@font-face{
	font-family: 'Retro Gaming';
	src: url('../fonts/Retro Gaming.eot');
	src: url('../fonts/Retro Gaming.woff') format('woff'), url('fonts/Retro Gaming.ttf') format('truetype'), url('fonts/Retro Gaming.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
html {
  scroll-behavior: smooth !important;
}
a{
	text-decoration: none;
	color:#000;
	cursor:pointer;
}

.question-title, .question{
	font-weight:400;	
}
	
.touchscroll {
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch;
 position:relative;
 height:100%;
}
.touchscroll body { 
 height:100%;
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch;
 position:relative;
}
video{
	width:100%;
}

audio{
	position:fixed;
	top:0px;
	right:0px;
	z-index:2;
	left:0px;
	margin:0 auto;
}
.container{
	padding-top:80px !important;
	padding-bottom:80px !important;
}
#intro{
	z-index:1;
	padding-top:100px !important;
}
.avant{
	font-family: itc-avant-garde-gothic-pro, helvetica, arial, sans-serif;
	font-weight: 700;
	font-style: normal;
}
h2.gaming{
	font-family:'Retro Gaming', helvetica, arial, sans-serif;
	text-transform: uppercase;
	text-align:center;
	font-size:92px;
	margin-top:0px;
}
p{
	text-align:center;
	font-family: din-2014, arial, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 23px;
}
p.gaming{
	font-family:'Retro Gaming', helvetica, arial, sans-serif;
	text-transform: uppercase;
	text-align:center;
	font-size:32px;
	display:block;
	margin-bottom:60px;
}

#correct-answers h3{
	font-family: itc-avant-garde-gothic-pro, helvetica, arial, sans-serif;
	font-weight: 700;
	font-style: normal;
}

#intro .logo{
	position:absolute;
	left:20px;
	top:-60px;	
}
#intro p{
	font-family: itc-avant-garde-gothic-pro, helvetica, arial, sans-serif;
	font-size: 36px;
	padding:0px 80px;
	color:#000 !important;
}
html, body{
	height:100%;
	margin:0px;
	padding:0px;
}
.wrapper{
	width:100%;
	height:100%;
	overflow-x:hidden;
}
.container{
	width:100%;
	position:relative;
	display:block;
	clear:both !important;
}
#intro{
	background-color:#f9d8cd !important;
}
#rules{
	background-color:#b2dcda !important;	
}
#new{
	background-color:#feedcb !important;	
}
#new a{
	position:relative;
}
#questions{
	background-color:#eef4de !important;		
}
#questions p{
	padding-left:100px;
	padding-right:100px;
}
#correct-answers{
	background-color:#f9d8cd !important;			
}

#correct-answers h2{
	margin-bottom:20px;
}
a p{
	margin-top:5px;
	margin-bottom:5px;
}

.content-container{
	width:calc(100% - 80px);
	max-width:1360px;
	display:block;
	overflow:auto;
	margin:0 auto;
	position:relative;
	padding:40px;
}
.content-container{
	overflow:hidden;
}
#intro .content-container{
	overflow:visible;
}
.center-y{
	position:absolute;
	top:50%;
	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  	left:0px;
  	right:0px;
}
#new .content-container{
	width:600px;
}
.slider-container .content-container{
	width:100vw;
	max-width:100vw;
	display:block;
	overflow:auto;
	margin:0 auto;
	position:relative;
}
.icon-down{
	display:block;
	position:absolute;
	bottom:-60px;
	margin:0 auto;
	left:0px;
	right:0px;
	width:82px;
}
.number{
	width:32px;
	display:block;
	position:relative;
	margin:40px auto 0px;
}
.option::before{
	content:'';
	display:none;
	width:32px;
	height:32px;
	background-image:url(../img/arrow.png);
	background-size:contain;
	background-repeat:no-repeat;
	position:absolute;
	left:0px;

}
.option:hover::before{
	display:inline-block;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 30%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

a.control_prev img, a.control_next img {
	width:40px;
}

a.control_next {
	right:0px;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

#slider{
	height:600px !important	;
}

#slider .slider-container {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

#slider .slider-container p{
	padding-left:100px;
	padding-right:100px;
}


#slider .slider-container .content-container {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  text-align: center;
}

#questions .content-container{
	overflow-y: hidden;
}

.first-list{
	display: inline-block;
	float:left;
	width:100%;
	list-style: none;
	padding:0px;
}

.first-list li{
	margin-bottom:40px;
}

.first-list h3, .second-list h3{
	text-align: center;
	margin-bottom:10px;
	font-size:32px;
}

.second-list{
	float:right;
}

@media only screen and (max-width: 1024px) {
	#intro .logo{
		left:20px;
		width:150px;	
	}	
	#intro p{
		padding:0px 18px;
		font-size:32px;
	}
	.icon-down {
		display: block;
		position: absolute;
		margin: 0 auto;
		left: 0px;
		right: 0px;
		width: 60px;
	}
	.icon-down img{
		width:60px;
	}
	.content-container{
		width:calc(100% - 40px);
		padding:20px;
	}
	h2.gaming{
		font-size:70px;
		margin-bottom:34px;
		margin-top:34px;
	}
	#new h2{
		margin-bottom:60px;
	}
	p{
		font-size: 30px;
		margin-top:12px;
		margin-bottom:12px;
	}
	.center-y{
		padding:0px 6px;
	}
	#new .content-container{
		width:600px;
	}
	p.gaming{
		font-size: 32px;
		margin-bottom: 50px;
	}
	.number{
		width:24px;
		display:block;
		position:relative;
		margin:20px auto 0px;
	}
	.slider-container p{
		padding:0px 40px;
	}
	a.control_prev img, a.control_next img {
	width:20px;
}

#slider .slider-container p {
	padding-left:60px;
	padding-right:60px;
}
#correct-answers.container{

}
}

@media only screen and (max-width: 667px) {
	#intro .logo{
		left:20px;
		width:100px;	
	}	
	#intro p{
		padding:0px 18px;
		font-size:20px;
	}
	.icon-down {
		display: block;
		position: absolute;
		margin: 0 auto;
		left: 0px;
		right: 0px;
		width: 60px;
	}
	.icon-down img{
		width:60px;
	}
	.content-container{
		width:calc(100% - 40px);
		padding:20px;
	}
	h2.gaming{
		font-size:34px;
		margin-bottom:14px;
		margin-top:14px;
	}
	#new h2{
		margin-bottom:26px;
	}

	.container{
		padding-top:40px !important;
	}

	p{
		font-size: 22px;
		margin-top:16px;
		margin-bottom:16px;
	}
	.center-y{
		padding:0px 6px;
	}
	#new .content-container{
		width:300px;
	}
	p.gaming{
		font-size: 18px;
		margin-bottom: 32px;
	}
	.number{
		width:40px;
		display:block;
		position:relative;
		margin:36px auto 0px;
	}
	.slider-container p{
		padding:0px 40px;
	}
	a.control_prev img, a.control_next img {
	width:32px;
}

#questions .container{
	height:800px !important;
}

#slider .slider-container p {
	padding-left:55px;
	padding-right:55px;
}

#correct-answers h3{
	font-size:20px;
	margin-top:20px;
}

.question-title, .question{
	font-size:20px;
}


}