@charset "utf-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  border: 0;
}
html {
  font-size: 18px;
  margin: 0 auto;
  max-width: 1280px;
  
}
body {
  width: 100%;
  height: 5040px;
  background-image: url("../img/gamebg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  alignment-baseline: center;
  margin: 0 auto;
}

/* GERAL */

@font-face {
		  font-family: "Dell Replica";
		  src: url("../fonts/DellReplicaTT-Light.ttf") format("truetype");
}

@font-face {
		  font-family: 'DellReplicaTT-Bold';
		  src: url("../fonts/DellReplicaTT-Bold.ttf") format("truetype");
}

@font-face {
			font-family: "Dell Replica TT";
			src: url("../fonts/DellReplicaTT-Regular.ttf") format("truetype");
}

h1 {
	font-family: "Dell Replica";
	color: #4d4d4f;
	font-size: 43px;
	font-weight: 300;
	line-height: 43px;
}

h2 {
	font-family: "Dell Replica";
	color: #4d4d4f;
	font-size: 39px;
	font-weight: 300;
	line-height: 41px;
	transform: scale(0.696,0.696);
	letter-spacing: 24px;
}

p {
	font-family: "Dell Replica";
	color: #4d4d4f;
	font-size: 18px;
	font-weight: 300;
}

h3 {
	font-family: "Dell Replica";
	color: #74cbc8;
	font-size: 14px;
	font-weight: 300;
	line-height: 44.595px;
	position: absolute;
	top: 5%;
	left: 5%;
}

h4 {
	font-family: "DellReplicaTT-Bold";
	color: #097eb9;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	width: 33%;
	height: 100%;
	text-align: center;
}

h5 {
	font-family: "Dell Replica";
	color: #4d4d4f;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	width: 100%;
}


/* CONTAINERS */

header {
	width: 97.8%;
	height: 2.215%;
	margin: 0 auto;
	position: relative;
	
}

header img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.main_container {
	width: 96.4%;
	height: 97.258%;
	position: relative;
	margin: 0 auto;
}

.mod_b {
	width: 100%;
	height: 28.7%;
	position: relative;
}

.mod_c {
	width: 100%;
	height: 18.4%;
	position: relative;
}

.mod_c_plus {
	width: 100%;
	height: 12.3%;
	position: relative;
}

.slideshow {	
	width: 100%;
	height: 9.9%;
	position: relative;
}

.video {
	width: 100%;
	height: 13.3%;
	position: relative;
}

.mod_acc {
	width: 100%;
	height: 7.4%;
	position: relative;
}

.slots {
	width: 100%;
	height: 10%;
	position: relative;
}

/* CONTENT */

.headline_01 {
	width: 50%;
	text-align: center;
	position: absolute;
	top: 2%;
	left: 50%;
	transform: translate(-50%, 0);
}

.mod_b img {
	width: 85.7%;
	height: auto;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.feature {
	width: 85%;
	height: 6%;
	display: inline-flex;	
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translate(-50%, 0);
}

.mod_c img {
	width: 61.4%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: 10%;
}

.headline_02 {
	width: 30%;
	height: 75%;
	position: absolute;
	right: 5%;
	top: 8%;
}

.mod_c_plus img{
	width: 55.3%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* SLIDESHOW */

.slideshow p {
	width: 90%;
	margin: 0 auto;
}

.gamerconfig {
	width: 100%;
	height: 350px;
	position: absolute;
	bottom: 0;
}

.slider-holder
        {
            width: 100%;
            height: 100%;
             margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }
        
        .image-holder
        {
            width: 800%;
            height: 100%;
            clear: both;
            position: relative;
            
            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }

		.image-holder img {
			width: 12.5%;
			height: auto;
		}
        
        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }
        
        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }
        
        #slider-image-2:target ~ .image-holder
        {
            left: -100%;
        }
        
        #slider-image-3:target ~ .image-holder
        {
            left: -200%;
        }

		#slider-image-4:target ~ .image-holder
        {
            left: -300%;
        }

		#slider-image-5:target ~ .image-holder
        {
            left: -400%;
        }

		#slider-image-6:target ~ .image-holder
        {
            left: -500%;
        }

		#slider-image-7:target ~ .image-holder
        {
            left: -600%;
        }

		#slider-image-8:target ~ .image-holder
        {
            left: -700%;
        }
    
        .button-holder
        {
            position: absolute;
            bottom: -2%;
			left: 50%;
			transform: translate(-50%);
        }
        
        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: #097eb9;
        }

/* END OF SLIDESHOW */

.acc_l {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
}

.acc_l p {
	width: 95%;
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16px;
}

.acc_l img {
	width: 56%;
	height: auto;
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, 0);
}

.acc_r {
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
}

.acc_r img {
	width: 80%;
	height: auto;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.slots img {
	width: 45%;
	height: auto;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.box_03 {
	width: 80%;
	height: 16%;
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%);
}

/* SLOTS CONTENT */

#slot01	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
}

#slot02	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		left: 20%;
}

#slot03	{width: 20%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		left: 40%;
}

#slot04	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		left: 60%;
}

#slot05	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		top: 0;
		left: 80%;
}

#slot06	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		top: 50%;
		left: 0;
}

#slot07	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		left: 25%;
		top: 50%;
}

#slot08	{width: 25%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		left: 50%;
		top: 50%;
}

#slot09	{width: 20%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 1rem;
  		position: absolute;
		left: 75%;
		top: 50%;
}

#slot10	{width: 20%;
		height: 50%;
		font-family: "Dell Replica";
		font-size: 12px;
		color: rgb(77, 77, 79);
  		line-height: 125%;
  		position: absolute;
		left: 560px;
		top: 30px;
		display: none;
}

.grey 	{width: 15px;
		height: 15px;
		background-color: grey;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: white;
		position: inherit;
		}

/* END OF SLOTS */

@media (min-width: 861px) and (max-width: 1080px) {
	.button-holder {
		bottom: 20%;
	}
	
	.acc_l {
		top: -20%;
		height: 120%;
	}
}

@media (min-width: 768px) and (max-width: 860px) {
	.headline_01 {
		width: 90%;
	}
	
	.feature {
		width: 95%;
	}
	
	.mod_c_plus img {
		width: 70%;
		top: 40%;
	}
	
	.headline_02 {
		top: 0;
	}
	
	.slideshow p {
		position: absolute;
		top: -15%;		
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	.button-holder {
		bottom: 35%;
		left: 50%;
		transform: translate(-50%,0);
	}
	
	.acc_l {
		top: -35%;
		height: 120%;
	}
	
	.acc_r img{
		width: 100%;
	}
	
	.slots img {
		width: 70%;
	}
	
	.box_03 {
		width: 90%;
	}
}

@media (min-width: 701px) and (max-width: 767px) {
	.headline_01 {
		width: 90%;
	}
	
	.feature {
		width: 98%;
	}
	
	.headline_02 {
		top: -3%;
	}
	
	.mod_c_plus img {
		width: 85%;
		top: 40%;
	}
	
	.slideshow p {
		position: absolute;
		top: -15%;		
		left: 50%;
		transform: translate(-50%, 0);
	}
	
	.button-holder {
		bottom: 40%;
		left: 50%;
		transform: translate(-50%,0);
	}
	
	.acc_l {
		top: -35%;
		height: 120%;
	}
	
	.acc_r img{
		width: 100%;
	}
	
	.slots img {
		width: 70%;
	}
	
	.box_03 {
		width: 95%;
	}
}

@media (min-width: 480px) and (max-width: 700px) {
	
	h1 {
		font-size: 24px;
		line-height: 24px;
	}
	
	h2 {
		font-size: 18px;
		letter-spacing: 16px;
	}
	
	p {
		font-size: 14px;
		line-height: 14px;
	}
	
	h4 {
		font-size: 12px;
		width: 100%;
	}
	
	.headline_01 {
		width: 90%;
	}
	
	.mod_b img {
		width: 90%;
		height: auto;
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50%, 0);
}
	
	.feature {
		width: 95%;
		display: grid;
		bottom: 42%;
	}
	
	.headline_02 {
		width: 80%;
		height: 75%;
		position: absolute;
		right: 10%;
		top: -50%;
}
	
	.mod_c img {
		width: 85%;
		bottom: 50%;
	}
	
	iframe {
		width: 100%;
		height: 60%;
		position: absolute;
		top: -70%;
	}
	
	.mod_c_plus img {
		width: 85%;
		top: -85%;
	}
	
	.slideshow p {
		position: absolute;
		top: -175%;
		left: 50%;
		transform: translate(-50%,0);
	}
	
	.gamerconfig {
		bottom: 160%;
	}
	
	.button-holder {
		bottom: 50%;
		left: 50%;
		transform: translate(-50%,0);
	}
	
	.acc_l {
		width: 100%;
		top: -250%;
	}
	
	.acc_r {
		width: 100%;
		top: -170%;
	}
	
	.slots {
		top: -10%;
	}
	
	.slots img {
		width: 95%;
	}
	
	.box_03 {
		width: 90%;
		height: 90%;
		top: 80%;
	}
	
	#slot01 {
		width: 50%;
		height: 25%;
		top: 0;
	}
	
	#slot02 {
		width: 50%;
		height: 25%;
		top: 0;
		left: 50%;
	}
	
	#slot03 {
		width: 50%;
		height: 25%;
		top: 25%;
		left: 0;
	}
	
	#slot04 {
		width: 50%;
		height: 25%;
		top: 25%;
		left: 50%;
	}
	
	#slot05 {
		width: 50%;
		height: 25%;
		top: 50%;
		left: 0;
	}
	
	#slot06 {
		width: 50%;
		height: 25%;
		top: 50%;
		left: 50%;
	}
	
	#slot07 {
		width: 50%;
		height: 25%;
		top: 75%;
		left: 0;
	}
	
	#slot08 {
		width: 50%;
		height: 25%;
		top: 75%;
		left: 50%;
	}
	
	#slot09 {
		width: 50%;
		height: 25%;
		left: 0;
		top: 100%;
	}
}

@media (min-width: 320px) and (max-width: 479px) {
	
	h1 {
		font-size: 24px;
		line-height: 24px;
	}
	
	h2 {
		font-size: 18px;
		letter-spacing: 16px;
	}
	
	p {
		font-size: 14px;
		line-height: 14px;
	}
	
	h4 {
		font-size: 12px;
		width: 100%;
	}
	
	.headline_01 {
		width: 90%;
	}
	
	.mod_b img {
		width: 100%;
		height: auto;
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%, 0);
}
	
	.feature {
		width: 95%;
		display: grid;
		bottom: 48%;
	}
	
	.headline_02 {
		width: 80%;
		height: 75%;
		position: absolute;
		right: 10%;
		top: -55%;
}
	
	.mod_c img {
		width: 95%;
		bottom: 65%;
	}
	
	iframe {
		width: 100%;
		height: 60%;
		position: absolute;
		top: -70%;
	}
	
	.mod_c_plus img {
		width: 95%;
		top: -85%;
	}
	
	.slideshow p {
		position: absolute;
		top: -175%;
		left: 50%;
		transform: translate(-50%,0);
	}
	
	.gamerconfig {
		bottom: 160%;
	}
	
	.button-holder {
		bottom: 56%;
		left: 50%;
		transform: translate(-50%,0);
	}
	
	.acc_l {
		width: 100%;
		top: -250%;
	}
	
	.acc_r {
		width: 100%;
		top: -170%;
	}
	
	.slots {
		top: -13%;
	}
	
	.slots img {
		width: 95%;
	}
	
	.box_03 {
		width: 90%;
		height: 90%;
		top: 80%;
	}
	
	#slot01 {
		width: 50%;
		height: 25%;
		top: 0;
	}
	
	#slot02 {
		width: 50%;
		height: 25%;
		top: 0;
		left: 50%;
	}
	
	#slot03 {
		width: 50%;
		height: 25%;
		top: 25%;
		left: 0;
	}
	
	#slot04 {
		width: 50%;
		height: 25%;
		top: 25%;
		left: 50%;
	}
	
	#slot05 {
		width: 50%;
		height: 25%;
		top: 50%;
		left: 0;
	}
	
	#slot06 {
		width: 50%;
		height: 25%;
		top: 50%;
		left: 50%;
	}
	
	#slot07 {
		width: 50%;
		height: 25%;
		top: 75%;
		left: 0;
	}
	
	#slot08 {
		width: 50%;
		height: 25%;
		top: 75%;
		left: 50%;
	}
	
	#slot09 {
		width: 50%;
		height: 25%;
		left: 0;
		top: 100%;
	}
}