@font-face {
  font-family: 'Kia-Medium';
  src: url('fonts/kia_medium.ttf');
}
@font-face {
  font-family: 'Kia-Bold';
  src: url('fonts/kia_bold.ttf');
}

/*---------------------------------------------------------*/
/*  COMMON STYLES                                          */
/*---------------------------------------------------------*/
body {
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Kia-Medium', sans-serif;
	font-weight: 300;
	overflow-x: hidden;
	font-size: 100%;
	color: #444444;
}




a, a:hover, a:link, a:visited, a:active {text-decoration: none; outline: none;}
li {list-style: none;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0;}

/*---------------------------------------------------------*/
/*  STYLES                                                 */
/*---------------------------------------------------------*/

/*---------------------------------------------------------*/
/*  STYLES FOR LANDSCAPE                                   */
/*---------------------------------------------------------*/
.landscape {display: none;}
.landscape {width: 100%; height: 100vh; top: 0; left: 0; position: fixed; z-index: 9999999; background-color: #333;}
.mobileAnim {width: 220px; height: 94px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -47px;}
.gif {width: 60px; height: 60px; margin: auto;}
.gif img {width: 100%;}
.mobileAnim p {text-align: center; margin-top: 10px;}

/*---------------------------------------------------------*/
/*  STYLES FOR DESKTOP VERSION (ALIGN CONTENT CENTER)      */
/*---------------------------------------------------------*/
.desktopBg {
	width: 360px !important;
	height: 640px !important;
	position: absolute  !important;
	top: 50% !important;
	margin-top: -320px !important;
	left: 50% !important;
	margin-left: -180px !important;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
}

/*---------------------------------------------------------*/
/*  CONTAINER                                              */
/*---------------------------------------------------------*/

.content {
	background-image: url("../images/img/bg.jpg");
	background-repeat: repeat-x;
	background-size: contain;
}

.full{
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.voltar{
	position: absolute;
	z-index: 1000;
	width: 38px;
	top: 9px;
	left: 6px;
	display: none;
}
.voltar img{
	width: 100%;
}

.logo{
	position: absolute;
	z-index: 500;
	width: 100%;
	top: 0;
	background: white;
	text-align: center;
}
.logo img{
	width: 51px;
	padding: 10px 0 7px;
}


.intro{
	z-index: 100;
	background: #7BCBDC url('../images/intro-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	transition: top 1s;
}
.intro .claim{
	width: 80%;
	margin: 80px 10%;
}
.intro .claim img{
	width: 100%;
}
.intro .btn1{
	background: #8AEBFF;
	width: 80%;
	margin-left: 10%;
	padding: 15px 0;
	font-size: 20px;
	text-align: center;
	position: absolute;
	bottom: 30px;
	font-family: 'Kia-Bold', sans-serif;
}


.interiorView{
	background-size: cover;
	background-position: center center;
	background-image: url("../images/180.jpg");
	transition: background-position .5s;
}

.hotspot{
	position: absolute;
	width: 60px;
	height: 60px;
	background-image: url("../images/hotspot.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px;
}
.hs2, .hs3{
	display: none;
}
.hotspot1{
	top: 38%;
  left: 34%;
}
.hotspot2{
	top: 65%;
  left: 25%;
}
.hotspot3{
	top: 48%;
  left: 64%;
}
.hotspot4{
	top: 28%;
  left: 64%;
}


.nav{
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 5;
	font-family: 'Kia-Bold', sans-serif;
}
.nav .btn2{
	width: 44%;
	margin: 0 1% 5% 5%;
	background: white;
	text-align: center;
	padding: 10px 0;
	float: left;
}
.nav .btn3{
	width: 44%;
	margin: 0 5% 5% 1%;
	background: #D5172E;
	text-align: center;
	padding: 10px 0;
	color: white;
	float: left;
}


.info{
	background: white;
	text-align: center;
	line-height: 120%;
	display: none;
	z-index: 10;
}
.informacao{
	position: absolute;
	width: 100%;
  bottom: -5px;
}
.info .title{
	width: 90%;
	margin-left: 5%;
	margin-bottom: 20px;
	font-size: 20px;
	color: black;
	line-height: 130%;
}
.info .separador{
	width: 20%;
	margin-left: 40%;
	margin-bottom: 20px;
	height: 2px;
	background: #D5172E;
}
.info .descricao{
	width: 90%;
	margin-left: 5%;
	margin-bottom: 30px;
	font-size: 15px;
	color: #666666
}
.info .foto img{
	width: 100%;
}





.btn{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: -10px;
	z-index: 900;
}
.btn img{
	width: 90%;
}

.aInfo{
	z-index: 10000;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	display: none;
}

.help{
	background: rgba(0,170,76, 0.5);
	z-index: 10000;
}
.phone-gif{
	width: 100%;
	text-align: center;
	margin-top: 250px;
}
.phone-gif img{
	width: 100px;
}




/*---------------------------------------------------------*/
/*  MEDIA QUERIES                                          */
/*---------------------------------------------------------*/
/* iPhone 6 Plus */
@media (max-width: 415px) {

}

@media (max-width: 440px) {

}

/* iPhone 6 */
@media (max-width: 415px) {


}

@media (max-width: 360px) {}

/* iPhone 5 */
@media (max-width: 321px) {}

@media (max-width: 321px) and (max-height: 445px){}