@charset "utf-8";

/* CSS Document */
@media all and (orientation:portrait) {
html, body{
height: 100%;
overflow:hidden;
}

body{
background-color: #DEC59E;
}

div, body{
margin: 0;
padding: 0; 
}

.topnav {
background-color: #2A6FDB;
overflow: hidden;
width: 100%;
height: 10vw;
position: relative;
margin:0;
padding: 0;
}
	
.topcorner{
display: none;
width: 30%;
position:absolute;
top:45%;
left:2%;
}


.img1{
width:30%;
position: absolute;
left: 50%;
margin-top: 5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.centro{
width: 35%;
position: absolute;
left: 50%;
margin-top: 15%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.texto{
width: 85%;
position: absolute;
left: 50%;
margin-top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}


#botao{
width:9%;
position: absolute;
left: 34.9%;
margin-top: 33%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;	
}

#android{
width:25%;
position: absolute;
margin-left: -7%;
margin-top: 75%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}

#ios{
width:24.2%;
position: absolute;
margin-left: 10%;
margin-top: 75%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}

.logos{
width: 50%;
position: absolute;
left: 53%;
margin-top: 90%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
	
}
@media all and (orientation:landscape) {
html, body{
height: 100%;
overflow:hidden;
}

body{
background-color: #DEC59E;
}

div, body{
margin: 0;
padding: 0; 
}

.topnav {
background-color: #2A6FDB;
overflow: hidden;
width: 100%;
height: 6.5vw;
position: relative;
margin:0;
padding: 0;
}

.topcorner{
width: 21%;
position:absolute;
top:42%;
left:2%;
}

.img1{
width:22%;
position: absolute;
left: 50%;
margin-top: 3.2%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.centro{
width: 14%;
position: absolute;
left: 50%;
margin-top: 7%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.texto{
width: 39%;
position: absolute;
left: 50%;
margin-top: 22%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}


#botao{
width:9%;
position: absolute;
left: 34.9%;
margin-top: 33%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;	
}

#android{
width:9%;
position: absolute;
left: 50%;
margin-top: 33%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}

#ios{
width:8.5%;
position: absolute;
left: 61%;
margin-top: 33%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}

.logos{
width: 22%;
position: absolute;
left: 53%;
margin-top: 39%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}