@font-face {
  font-family:Avenir Next;
  src:url(../assets/fonts/AvenirNextW1G-Demi.ttf);
  font-weight:700;
}
@font-face {
  font-family:Avenir Next;
  src:url(../assets/fonts/AvenirNextW1G-Medium);
  font-weight:400;
}
*{
	padding:0;
	margin:0;
	list-style:none;
	font-family:Avenir Next;
	font-weight:400;
	color:#fff;
	line-height:1.2;
}
body{
	overflow:hidden;
}
header{
	height:8vh;
	background:#fff;
	width:100%;
	position:relative;
}
header img{
	height:40%;
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
}
#start{
	background:url(../assets/wheel/start-screen.jpg);
	background-size:cover;
	height:64vh;
	width:100%;
	position:absolute;
	top:8vh;
	z-index:15;
	transition:all .3s ease .5s;
}
#start.slide{
	top:73vh;
}
#start img{
	width:70%;
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
}
#wheel{
	height:64vh;
	overflow:hidden;
	background: -moz-linear-gradient(left, rgba(1,21,108,1) 0%, rgba(11,134,210,1) 15%, rgba(11,133,210,1) 85%, rgba(1,21,108,1) 100%);
	background: -webkit-linear-gradient(left, rgba(1,21,108,1) 0%, rgba(11,134,210,1) 15%, rgba(11,133,210,1) 85%, rgba(1,21,108,1) 100%);
	background: linear-gradient(to right, rgba(1,21,108,1) 0%, rgba(11,134,210,1) 15%, rgba(11,133,210,1) 85%, rgba(1,21,108,1) 100%);
}
ul#blocks{
	height:100%;
	position:relative;
	transform:scaleY(-1);
}
li.block{
	transform:translateY(-50%);
	width:100%;
	height:64%;
	top:178%;
	position:absolute;
	background:url(../assets/wheel/honor-bg.jpg);
	background-size:100% 100%;
}
@keyframes winanim{
	0%{background:url(../assets/wheel/honor-bg.jpg);background-size:100% 100%;}
	15%{background:url(../assets/wheel/honor-bg-win.jpg);background-size:100% 100%;}
	30%{background:url(../assets/wheel/honor-bg.jpg);background-size:100% 100%;}
	45%{background:url(../assets/wheel/honor-bg-win.jpg);background-size:100% 100%;}
	60%{background:url(../assets/wheel/honor-bg.jpg);background-size:100% 100%;}
	75%{background:url(../assets/wheel/honor-bg-win.jpg);background-size:100% 100%;}
	90%{background:url(../assets/wheel/honor-bg.jpg);background-size:100% 100%;}
}
#wheel.win li.block{
	animation:winanim 3s 1;
}
li.block img{
	height:75%;
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%) scaleY(-1);
}
li.block.next{
	top:113.8%;
	z-index:3;
}
li.block.middle, li.block.result{
	top:50%;
	z-index:3;
}
li.block.previous{
	top:-13.8%;
	z-index:3;
}
li.block.down{
	top:-77.6%;
}
#arrows{
	height:100%;
	position:relative;
	top:-100%;
}
#arrow{
	width:10vw;
	padding:12vw 0 0;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:10;

}
#arrow::after{
	content:"";
	position:absolute;
	margin-top:-12vw;
	border-top:6vw solid transparent;
	border-bottom:6vw solid transparent;
}
#arrow.left{
	left:0;
}
#arrow.left::after{
	border-left:10vw solid #fff;
}
#arrow.right{
	right:0;
}
#arrow.right::after{
	border-right:10vw solid #fff;
}
#bottom{
	z-index:20;
	height:28vh;
	background:#000;
	position:relative;
}
#stripe{
	background:url(../assets/wheel/honor-stripe.png);
	background-size:100vw 100%;
	background-repeat:no-repeat;
	height:7px;
	width:100%;
}
#text-container{
	padding:0 10%;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}
#text-container h2{	
	font-size:8vw;
	font-weight:700;
	text-transform:uppercase;
	background: -webkit-linear-gradient(-80deg, #ea279e 20%,#3273f7 80%);
  	-webkit-background-clip:text;
  	-webkit-text-fill-color:transparent;
}
#text-container p{
	font-size:6vw;
}
#text-container p:nth-child(2){
	margin-top:5%;
}