@font-face {
    font-family: f1;
    src: url('../font/hwxk.ttf');
}


.initView{
	width: 100%;
	height: 100%;
	background-color: black;
}

video{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
}

.initView div{
	position: absolute;
	z-index:10;
}

.left_top1{
	color: white;
	font-family: f1;
	font-size: 1.6em;
	margin-left: 30px;
	margin-top: 20px;
}
.left_top{
	top:50px;
	left: 30px;
	color: white;

}

.skip1{
	color: white;
	right: 30px;
	margin-top: 20px;
	font-family: f1;
	font-size: 1.6em;
	cursor: pointer;
}

.skip{
	color: white;
	right: 35px;
	margin-top: 50px;
	cursor: pointer;
}

.soundoff{
	left: 0px;
	-webkit-transform: rotate(270deg);
	color: white;
	bottom: 100px;
	cursor: pointer;
}

.t1{
	font-family: 'Lato', sans-serif;
	color: white;
	font-size: 2em;
	margin: auto auto;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	width: 50%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	margin-top: 80px;
	font-family: f1;

}
.t2{
	font-family: 'Lato', sans-serif;
	color: white;
	font-size: 1.2em;
	margin: auto auto;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	width: 50%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	margin-top: 120px;

}

.countdown{

	color: white;
	font-size: 3em;
	margin: auto auto;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	width: 50%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
}


#svg{

	position: absolute;
}

.wrapper{
	display:none;

}

body{
background: black;
position: initial;
font-family:Varela;}

/*.wrapper{
	
		max-width: 90%;
		margin: 0 auto;
		box-shadow: 0px 8px 20px 0px #666;
	
}
*/
.container{
	width: 80%;
	margin: auto auto;
	background-color: #FFFFFF;
	margin-top: 60px;
}

.people{
	width: 49.9%;
	float: right;
	padding: 0%;
}

.friends{
	width: 100%;
}

.worldmap{
	padding:3%;
	text-align: center;
}

.overlap{
	position: absolute;
	top: 90px;
	width: 80%;
	text-align: center;
}
.overlap label{
	display: block;
	font-size: 8vw;
	color: white;
	
	text-shadow: 0px 2px 10px grey;
	}

nav img{
	display: none;
	position: fixed;
	width: 150px;
	left: 11%;
	top: -21px;
}

.worldmap img{

	width: 100%;
}

.caileaway{
	border-left-color: #E0E0E0;
	border-left-style: solid;
	border-left-width: 1px;

	border-bottom-color: #E0E0E0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.foot{
	padding-top: 40px;
	padding-left: 20px;
	height:40px;
}
.peopleview2,
.pencil{
	border-bottom-color: #E0E0E0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.li{
	border-left-color: #E0E0E0;
	border-left-style: solid;
	border-left-width: 1px;
	float: right;
}

.raymond{
	float:left;
}

.peopleview{
	background-color: white;
}
.peopleview1{
	border-top: 1px solid #e0e0e0;
	margin-top: -20px;
}

nav{
	text-align: center;
	width: 80%;
	margin: auto auto;
	top: 0px;
	padding-top: 26px;
	padding-bottom: 26px;
	font-size: 1vw;
	position: fixed;
	background-color: white;
	margin-left: 10%;
	z-index: 1;
	border-bottom: #e0e0e0 1px solid;
	}

nav a{
	margin-left: 5%;
	margin-right: 5%;
	font-size: 1.3vw;
	color: #22154d;
	text-decoration: none;
	padding-bottom: 20px;
}

.firstMenu{
	padding-left: 0%;
	margin-left:0px;
}

.lastMenu{
	padding-right: 0%;

}


nav a:hover{
	border-bottom-color: #ffe279;
	border-bottom-style: solid;
	border-bottom-width: 3px;
}

.language{
	float: right;
	position: fixed;
	top: 20px;
	right: 11%;
	font-family: f1;
}

.language{
	text-decoration: none;
	color: #f9b406;
	/* border: 2px solid rgb(237, 210, 210); */
	border: 1px solid #f9b406;
	padding: 5px;
	/* font-weight: 100; */
	cursor: pointer;
	z-index: 2;
	/* margin-top: -1px; */
	font-weight: lighter;
}

/*.friends:hover{
	opacity: 0.7;
	-ms-transform: scale(0.8,0.8); 
    -webkit-transform: scale(0.8,0.8); 
    transform: scale(0.8,0.8); 
    cursor:pointer;

}
*/
.title{
	margin-top: 7%;
}

.overlap .chinese1{
	margin-left: -35%;
}

.overlap .chinese2{
	font-size: 7vw;
	margin-left: -10%;
}

.overlap .chinese3{
	margin-left: 20%;
}
/*
.caileaway img{
	background-image: url('../images/caileaway.png');
	background-repeat: no-repeat;
	background-size: 100%;
}
.pencil img{
	background-image: url('../images/liway.png');
	background-repeat: no-repeat;
	background-size: 100%;
}
.raymond img{
	background-image: url('../images/raymondway.png');
	background-repeat: no-repeat;
	background-size: 100%;
}
.li img{
	background-image: url('../images/pencilway.png');
	background-repeat: no-repeat;
	background-size: 100%;
}*/