@font-face {
  font-family: 'frankfurter-medium';
  src: url("../fonts/Frankfurter_SB_Medium.otf");
  src: url("../fonts/Frankfurter_SB_Medium.eot");
  src: url("../fonts/Frankfurter_SB_Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Frankfurter_SB_Medium.woff") format("woff"), url("../fonts/Frankfurter_SB_Medium.ttf") format("truetype"), url("../fonts/Frankfurter_SB_Medium.svg#Frankfurter_SB_Medium") format("svg");
  font-weight: normal;
  font-style: normal;
}

html{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
body{
	display:none;
	background:url() center center no-repeat transparent;
	background-size:cover;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	font-family: 'frankfurter-medium', cursive;
	overflow:hidden;
	text-transform: uppercase;
}
.limiter{
	position:relative;
	width:100%;
	height:100%;
	margin-left:0%;
	margin-right:0%;
}

.logotipo{
	position:absolute;
	bottom:2%;
	right:2%;
	text-align:right
}
.logotipo img{
	max-width:100%;
}

.desktop{
	display:block;
}
.mobile{
	display:none !important;
}
#block_land{
	display:none;
	position:fixed;
	width:100%;
	height:130%;
	background:#0073AB;
	color:#fff;
	text-align:center;
    z-index: 9999999;	
    top:0;
    left:0;
}
#block_land img{
	position:relative;
	max-width:100%;
	top:50%;
	margin-top:-250px;
}

img{
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.clickStart:hover {
	-webkit-filter: brightness(0.25); filter: brightness(1.25);
}
.middle{
	position:relative;
	top:20%;
	width:30%;
	margin: 0px auto 0px 35%;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;	
	color:#343745;		
	font-size:1.5vw;
	font-weight:300;
	/*-webkit-text-stroke: 1px black;*/
}
.white{
	color:#FFF;		
}
.setaL{
	position:absolute;
	top:0;
	left:-20%;
    max-width:25%;
}
.setaR{
	position:absolute;
	top:0;
	right:-20%;
    max-width:25%;
}
.middle div.text, .middle div.image {
    position: relative;
    width: 100%;
    float:none;
    clear:both;
}
.introText{
	position:absolute;
	width:28%;
	top:10%;
	left:5%;
	padding:2% 3% 1% 3%;
	background: rgba(0,0,0,0.8);
	border-radius:30px;
	text-align:left;
	font-size:28px;
	color:#f8d700;
}.introText span{
	font-size:22px;
	color:#fff;
}
.introText img{
	position:relative;
	margin-top:6%;
	max-width:100%;
	cursor:pointer;
}
.slide16{
    z-index: 9999999;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    /*background: url(../img/2_final_banner.jpg) top right no-repeat transparent;
    background-size: cover;*/
}
.outText {
    position: absolute;
    width: 66%;
    right: 7%;
    top: 14%;
    padding: 1% 3%;
    text-align: center;
    font-size: 36px;
    color: #fff;
    height: 84%;
    line-height: 35px;
}
.outText img{
	position:relative;
	margin-top:6%;
	max-width:100%;
	cursor:pointer;
}
.yellow{
	color:#fbd300;
}

.text1{
	font-size:1.6vw;
}
.text2{
	color:#006086;
	font-size:2.5vw;
}
.text3{
	color:#006086;
	font-size:2vw;
}
.text4{
	color:#ac202d;
	font-size:1.5vw;
}
.text5{
	color:#ac202d;
	font-size:1.5vw;
}
.text6{
	color:#3b3c2c;
	font-size:1vw;line-height: 25px;
}
.text6 a{
	color:inherit;
}

.break0{
	clear:both;
	height:0px;
}
.break1{
	clear:both;
	height:13%;
}
.break2{
	clear:both;
	height:30px;
}
.clickReStart{
	max-width:100%;
}
.pandaImage{
    position: relative;
    display: inline-block;
    margin: auto;
    float: none;
    clear: both;	
    max-width:75%;
    margin-top:5%;
}
.hand{
	position:absolute;
	bottom:5%;
	left:50%;
	width:182px;
	height:66px;
	margin-left: -91px;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;	
	color:#fff;		
	z-index:999;
}

.hand img{
	max-width:100%;
	max-height:80%;
}
.split{
	position:absolute;
	width:4px;
	left:50%;
	margin-left:-2px;
	height:100%;
	margin:auto;
	text-align:center;
	background: rgba(255,255,255,0.1);
}
.friends{
	display:none;
	position:absolute;
	top:5%;
	width:90%;
	left:5%;
	height:auto;
	text-align:left;
	font-family: 'frankfurter-medium', cursive;
	color:#fff;
	font-size:36px;
	text-transform: uppercase;
}
.friends img{
	max-width:7%;
	opacity: 0.3;
}





.right:hover, .left:hover{
	/*background: rgba(255,255,255,0.1);*/
}
.left{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.right{
	position:absolute;
	top:0;
	right:0;
	width:50%;
	text-align:center;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.leftBg{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    opacity:0;
    background: rgba(255,255,255,1);
    z-index:-1;
}
.rightBg{
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    opacity:0;
    background: rgba(255,255,255,1);
    z-index:-1;
}
.white{
	color:#fff;
}
.left img, .right img{
	max-width:100%;
	max-height:80%;
}
.ending{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	text-align:center;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.slide{
	display:none;
}
.background{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
	display:none;
}
.background.background0{
	background:url(../img/1_entrada.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background1{
	background:url(../img/cenario1.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background2{
	background:url(../img/cenario1b.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background2a{
	background:url(../img/cenario1b_amigo.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background3{
	background:url(../img/cenario1a.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background4{
	background:url(../img/cenario2.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background5{
	background:url(../img/cenario2b.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background6{
	background:url(../img/cenario2a.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background6a{
	background:url(../img/cenario2a_amigo.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background7{
	background:url(../img/cenario3.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background8{
	background:url(../img/cenario3b.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background8a{
	background:url(../img/cenario3b_amigo.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background9{
	background:url(../img/cenario3a.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background10{
	background:url(../img/cenario4.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background11{
	background:url(../img/cenario4b.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background12{
	background:url(../img/cenario4a.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background12a{
	background:url(../img/cenario4a_amigo.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background13{
	background:url(../img/cenario5.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background14{
	background:url(../img/cenario5b.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background15{
	background:url(../img/cenario5a.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background15a{
	background:url(../img/cenario5a_amigo.jpg) center center no-repeat transparent;
	background-size:cover;
}
.background.background16{
	background:url(../img/2_final2.jpg) center center no-repeat transparent;
	background-size:cover;
}

.background.friend0{
	background:url(../img/2_final_a_panda.png) center center no-repeat transparent;
	background-size:cover;
	z-index:101
}
.background.friend1{
	background:url(../img/2_final_e_amigo1.png) center center no-repeat transparent;
	background-size:cover;
	z-index:96
}
.background.friend2{
	background:url(../img/2_final_b_amigo2.png) center center no-repeat transparent;
	background-size:cover;
	z-index:99
}
.background.friend3{
	background:url(../img/2_final_d_amigo3.png) center center no-repeat transparent;
	background-size:cover;
	z-index:97
}
.background.friend4{
	background:url(../img/2_final_c_amigo4.png) center center no-repeat transparent;
	background-size:cover;
	z-index:98
}
.background.friend5{
	background:url(../img/2_final_a_amigo5.png) center center no-repeat transparent;
	background-size:cover;
	z-index:101
}
.click1 {
    position: absolute;
    top: 50%;
    right: 20%;
    width: 54%;
    height: 13%;
	margin-top:-29%;
	cursor:pointer;
}
.click2{
	position:absolute;
	top:50%;
	right:9%;
	width:10%;
	height:16%;
	margin-top:3%;
	cursor:pointer;
}
.click3{
    position: absolute;
    top: 50%;
    right: 36%;
    width: 36%;
    height: 5%;
    margin-top: 18%;
    cursor: pointer;
}


















@media screen and (orientation:portrait) and (max-width: 1024px) {
	.desktop{
		display:none !important;
	}
	.mobile{
		display:block !important;
	}
	.hand{
		bottom:-3%;
	}
	.hand img{
		width:50%;
		max-width:50%;
	}
	.middle{
		font-size:26vw;
	}
}
@media screen and (orientation:landscape) and (max-width: 1024px) {
	body{
		background: #000;
		padding:0;
		margin:0;
	}
	.limiter{
		position:relative;
		width:100%;
		height:95%;
		margin:2% 0% 0% 0%;
		padding:0;
		overflow:hidden;
	}

	.logotipo img{
		max-width:40%;
	}
	.right:hover, .left:hover {
	    background: rgba(255,255,255,0);
	}
	.desktop{
		display:none !important;
	}
	.mobile{
		display:block !important;
	}
	.hand {
		top:75%;
	}
	.hand img{
		width:30%;
		max-width:30%;
	}
	.middle{
		width:50%;
		margin: 2% auto 0px 25%;
		font-size:2.0vw;
	}
	.pandaImage{
	    max-width: 45% !important;
	    margin-top: 2% !important;
	}
	.setaL{
	    max-width:20%;
	}
	.setaR{
	    max-width:20%;
	}
	.friends{
		top:4%;
		width:90%;
		left:1%;
		font-size:3vw;
	}
	.introText{
		width:30%;
		font-size:1.7vw;
		padding:1% 3% 1% 3%;
		
	}
	.text1{
		font-size:1.6vw;
	}
	.text2{
		color:#006086;
		font-size:2.5vw;
	}
	.text3{
		color:#006086;
		font-size:2vw;
	}
	.text4{
		color:#ac202d;
		font-size:1.5vw;
	}
	.text5{
		color:#ac202d;
		font-size:1.5vw;
	}
	.text6{
		color:#3b3c2c;
		font-size:1vw;line-height: 25px;
	}
	.logotipo{
		bottom:4% !important;
	}	
}