body {
  overflow-x: hidden; /* No horizontal scrolling here! */
}


/* Big bold pink captions for each content box */
.box-title {
	font-size: 32px;
    font-weight: 900;
	line-height: 39px;
    text-align: center;
    text-transform: uppercase;

	margin-bottom: 2px;

    width: 100%;
	height: 82px;
	display: flex;
	justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #DF185B 0%, #B51555 100%);
}



.header-carousel{
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);

	min-height: 320px;
	z-index: 0;
	max-height: 700px;
}

.header-back-img{
	grid-row-start: 1;
	grid-column-start: 1;

	width: 100vw;

	min-height: 320px;
	object-fit: cover;
	z-index: -5;
}

.header-back-gradient{
	grid-row-start: 1;
	grid-column-start: 1;
	width: 100%;
	height: 100%;
	min-height: 320px;
	background-image:
		linear-gradient(
			to bottom,
			rgba(20, 21, 31, 0) 70%,
			rgba(20, 21, 31, 1) 110%
		),
		linear-gradient(
			to right,
			rgba(20, 21, 31, 1) 0,
			rgba(20, 21, 31, 0) 50%
		);
	background-size:
		100% auto,
		100% auto;
	background-repeat: no-repeat;
	z-index: -2;
}

.header-element{
	margin-left: auto;
	margin-right: auto;

}

.header-holder{
	object-fit: contain;
    display: grid;
    grid-template-columns: 1fr;
	position: relative;
}

.header-content{
	position: absolute;
	top: 14%;
	margin-left: calc(5vw + 10%);
	margin-right: calc(5vw + 10%);
	text-align: center;
}

.header-navigate{
	width: 100%;
	height:100px;
	position: absolute;
}

/* Properties of the game title in the header area */
.header-game-title {
    text-align: left;
    text-transform: uppercase;
    font-size: 3em;
    font-weight: 900;
    line-height: 48px;
    letter-spacing: 0em;
    padding-bottom: 0;
    width: 358px;
}

/* The part of the header that holds the operating system icons */
.os-holder {
	margin-left: 0px;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 0px;
	text-align: left;
	width: 100%;
}
.game-header-icon {
    width: auto;
	margin-right: 0px;
	margin-left: 15px;
}



.header-navigate {
	margin-top: 20px;
	height: 15px;
}

.header-dots {
	margin-top: -20px;
}

/* The container for "About us" */
.box-about {
	margin-bottom: 20px;
	width: 100%;
	z-index: 1;
}

.about-back{
	position: relative;
	width: 100%;
	max-height: 100%;
	z-index: 1;
	/*opacity: 0.8;*/
}

.about-back {
	object-fit: cover;
	background-color: #14151F;
	width: 100%;
	height: 100%;
    position: absolute;
	z-index: -2;
}

.logo-big {
	margin-top: 40px;
	margin-bottom: 40px;
	padding-left: 20px;
	padding-right: 60px;
	height: auto;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.about-body{
	padding-bottom: 18px;
	padding-top: 18px;
	padding-left: 20px;
	padding-right: 30px;
}

.about-social{
	margin-bottom: 68px;
	margin-top: 28px;
	margin-left: 0px;
	margin-right: auto;
}

* {
  box-sizing: border-box;
}
/* The container for "Discover our Games" */
.box-discover {
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
	text-align: center;
	padding-bottom: 30px;
	width: 100%;
}
.discover-overlay-content{
	margin-top: 55px;
	bottom: 0;
	left: 0;

}
.discover-title{
	font-size: 20px;
	font-weight: 600;
	line-height: 20px;
	text-align: left;
	margin-bottom: 0px;
	margin-top: 0px;
	padding: 0px;
	z-index: 2;

}
.discover-tags{
	font-size: 14px;
	line-height: 30px;
	text-align: left;
	margin-bottom: 10px;

}
.discover-os{
	float:left;
	margin-right: 8px;

}

.discover-carousel{
	margin-bottom: 15px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
}

.slick-prev, .slick-next {
	color: black;
	background-color: black;
    width: 24px;
    height: 25px;
}
.slick-prev, .slick-next:hover {
	color: black;
	background-color: black;
    width: 24px;
    height: 25px;
}
.slick-prev { content: url(#{`${baseURI}images/carousel/prev-arrow.svg`});
.slick-next { content: url(#{`${baseURI}images/carousel/next-arrow.svg`});
.slick-prev:hover { content: url(#{`${baseURI}images/carousel/prev-arrow-hover.svg`});
.slick-next:hover { content: url(#{`${baseURI}images/carousel/next-arrow-hover.svg`});

.slick-prev:before {color: black; }
.slick-next:before {color: black; }

/* NOTE: More properties for the carousel elements can be found in slick-custom.css */

/* For medium screens */
@media (max-width: 1280px) {
	/* The container for "Discover our Games" */
	.box-discover {
		margin-top: -60px;
	}
}

/* For small screens */
@media (max-width: 800px) {

/* NOTE: Check slick-custom.css for more properties of mobile display. It's weird to put it in there, but it works */

	.header-content{
		padding: 20px;
		position: absolute;
		margin-left: 30px;
		top: 0px;
	}

	.header-back-img{
		position: relative;
		margin-left: -50px;
		margin-right: -50px;
		top: 0px;
		grid-row-start: 1;
		grid-column-start: 1;

		width: 200vw;
		height: min(483px, 100%);
		object-fit: cover;
	}

	.box-discover {
		padding-bottom: 5px;
		margin-bottom: 5px;
		margin-top: 0px;
	}



	.about-container{
		padding-left: 35px;
		padding-right: 35px;
		padding-bottom: 18;
		padding-top: 18;
	}




	/* The part of the header that holds the operating system icons */
	.os-holder {
		margin-top: 5px;
		margin-bottom: 30px;
	}

	/* Properties of the game title in the header area */
	.header-game-title {
		text-align: left;
		text-transform: uppercase;
		font-size: 1em;
		font-weight: 900;
		line-height: 38px;
		letter-spacing: 0em;
		padding-bottom: 0;
		width: 158px;
	}

}