/*
Theme Name: Pousada João de Barro
Theme URI: http://www.danilovalque.com.br
Author: Danilo Valque
Author URI: http://www.danilovalque.com.br
*/

body{font-family: 'Quicksand', sans-serif; padding-top: 78px; background: #fff; font-weight:400; font-size: 15px; color:#431807;}
a{color:#181818;}
.container{ width:85%; margin:0 auto; position:relative;}
.clearfix{ clear: both; position: relative; }
.redes{z-index: 88; position: fixed; right: 0; top: 200px; }
.gradiente{ width: 100%; height: 8px; position: absolute; bottom: 0; left: 0; background: rgb(43,54,144); background: linear-gradient(90deg, rgba(43,54,144,1) 0%, rgba(3,165,224,1) 25%, rgba(234,32,36,1) 50%, rgba(166,67,133,1) 75%, rgba(255,205,0,1) 100%);}
.abremenu{ display: none; }

.topo{ z-index: 99; background: #fff; height: 120px; position: fixed; top: 0; left: 0; width: 100%; border-bottom:#431807 solid 1px; }
.topo .marca{ float: left; margin: 10px 0 0 0; }
.topo nav{ float: right; margin-top: 80px; }
.topo nav ul li{ float: left; margin: 0 0 0 40px; }
.topo nav ul li a{ font-weight: 600; text-transform: uppercase; font-size: 20px; color:#431807; }
.topo .info{ position:absolute; right:0; top: 15px; }
.topo .info p{font-weight: 500; font-size: 15px; float: left; line-height: 150%; margin-left: 20px;}
.topo .info a{ float: left; }
.reserva{ border-radius: 8px; color: #fff; font-weight: 600; font-size: 18px; background:#4e6a3b; padding: 14px 30px 14px 30px; display: inline-block; }
.reserva:hover{background:#431807;}

.rodape{ position: relative; background: #fff; width: 100%; height: auto; padding: 40px 0 40px 0; }
.rodape img{ float: left; }
.rodape ul{ float: right; width: 30%; }
.rodape ul li{ margin: 0 0 0 0; font-size: 20px; line-height: 120%; }
.rodape ul li.mail{background: url(images/email.png) left center no-repeat; background-size: 32px 24px; padding: 13px 20px 18px 45px;}
.rodape ul li.tel{background: url(images/tel.png) left center no-repeat; background-size: 30px 30px; padding: 13px 20px 18px 45px;}
.rodape ul li.end{  background: url(images/end.png) left center no-repeat; background-size: 24px 30px; padding: 16px 20px 18px 35px;}
.rodape .gradiente{ height: 15px; }

.banner{ overflow-x: hidden; position: relative; width: 100%; height: auto; }
.banner img{ width: 100%; height: auto; display: block; }

.gipsy{ padding: 60px 0 60px 0; width: 100%; position: relative; }
.gipsy h2{ position: relative; text-align: center; width: 100%; font-size: 40px; font-weight: 600; margin: 0 0 30px 0; }
.gipsy img{ border-radius: 10px; float: left; width: 53%; margin:0 5% 0 0; }
.gipsy .text{ width: 100%; text-align: center; margin-top: 20px; float: left; }
.gipsy .text p{ margin: 0 0 20px 0; font-size: 18px; line-height: 140%; }

.mapa{ width: 100%; height: 400px; overflow: hidden; position: relative; }
.mapa iframe{ width: 100%; height: 400px; display: block; }

.instagram{padding: 60px 0 60px 0; width: 100%; position: relative; }
.instagram h2{ position: relative; text-align: center; width: 100%; font-size: 40px; font-weight: 600; margin: 0 0 30px 0; }
.instagram h2 span{ display: block; }

#instagram ul li{ float: left; width: 13.8%; margin: 0 0.2% 5px 0.2%; height: auto; }
#instagram ul li img{ width: 100%; height: auto; display: block; }


.arembepe{ padding: 60px 0 60px 0; width: 100%; position: relative; background:#e8e8e8; }
.arembepe h2{ position: relative; text-align: center; width: 100%; font-size: 40px; font-weight: 600; margin: 0 0 30px 0; }
.arembepe iframe{ border-radius: 10px; float: left; width: 53%; margin:0 0 0 5%; height: 300px; }
.arembepe .text{ width: 42%; margin-top: 20px; float: left; }
.arembepe .text p{ margin: 0 0 20px 0; font-size: 18px; line-height: 140%; }

.perguntas{border-radius: 10px;  padding: 60px 0 60px 0;  width: 50%; margin: 40px auto; background: #e8e8e8; position: relative; }
.perguntas h2{ position: relative; text-align: center; width: 100%; font-size: 40px; font-weight: 600; margin: 0 0 20px 0; }

.reservaonline{ display: none; z-index: 9999; background: rgb(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
.reservaonline .box{ position: relative; padding: 40px; background: #fff; width: 40%; border-radius: 10px; height: 370px; margin: 80px auto 0 auto; }
.reservaonline .box h2{text-align: center; position: relative; text-align: center; width: 100%; font-size: 48px; font-family: 'Handlee', cursive; margin: 0 0 30px 0;}
.reservaonline .box input{border: #666 solid 1px; border-radius: 10px; font-family: 'Assistant', sans-serif; float: left; width: 40%; margin: 0 2% 20px 2%; padding: 8px 10px; font-size: 15px; }
.reservaonline .box button{ border-radius: 10px; font-family: 'Handlee', cursive; cursor: pointer; float: left; width: 44.5%; margin: 0 2% 0 2%; font-size: 20px; color: #fff; border: none; background:#a64385 url(images/reserva.png) no-repeat; background-position: 14px 13px; padding: 14px 20px 14px 45px; display: inline-block;}
.reservaonline .box .fechar{ position: absolute; right: 20px; top: 20px; }

@media screen and (max-width:900px){ 
body{ padding-top: 83px; }
.container{ width: 90%; }
.topo{ height: 83px; }
.abremenu{ display: block; position: fixed; right: 5%; top: 25px; }
.topo .marca img{ width: 85px; height: auto; }
.topo nav{ position: fixed; right: 0; top: 0; background:#fff; width: 60%; height: auto; padding: 20px 0; display: none; }
.topo nav ul li{ float: none; margin: 20px 40px 25px 0; display: block; text-align: right; }
.topo .info p{ display: none; }
.topo .info a{ display: none; }
.reserva{  font-size: 14px; display: inline-block; }
.gipsy h2{ font-size: 26px; }
.gipsy img{ width: 100%; height: auto; float: none; margin: 0 0 20px 0; }
.gipsy .text{ width: 100%; float: none; margin: 0 0 0 0; }
.gipsy .texta{ display: inline-block; }
.arembepe h2{ font-size: 26px; }
.arembepe iframe{ width: 100%; height: 190px; float: none; margin: 0 0 0 0; }
.arembepe .text{ width: 100%; float: none; margin: 0 0 20px 0; }
.perguntas{ width: 90%; }
.perguntas h2{ font-size: 24px; }
.instagram h2{ font-size: 26px; }
.rodape img{ margin: 0 0 20px 0; float: none; }
.rodape ul{ float: none; width: 100%; }
.rodape ul li{ font-size:16px; }
.aks-accordion-row{ width: 90%; margin:0 auto; }
#instagram ul li{ width: 32.8%; }

}