/* 
Folha de Estilo CSS do Site VilaVip Hotel Fazenda Serra Negra

cor verde-claro : #98AE4B
cor verde-medio : #98AE4B
cor verde-escuro: #788732


*/


body{
font-family: 'Montserrat';
font-size: 12px;
 /* padding: 10px 10px 10px 10px; */
}

/* se usar css-reset.css utilizar os estilos abaixo para permitir o <strong> e italico <em>
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: italic; }
*/


html {
  scroll-behavior: smooth;
}

.texto-responsivo{
/*font-size: clamp(14px, 18px, 30px);*/
 font-size: clamp(16px, 1.2vw, 18px);
 line-height: 2.0;
}

.texto-responsivo-gd{
 font-size: clamp(20px, 1.5vw, 26px);*/
}

.sub-pagina{
 font-family: 'Montserrat';
 font-size: 16px;
 line-height: 1.5;
 color: #666666;
 /*padding-left: 10px; */
}


.img-border-shadow {
 border: 1px solid #ddd;
 padding: 8px;
-webkit-box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
-moz-box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
}

.img-border{
 border: 1px solid #ddd;
 padding: 8px;
}

.linha-pq2{
 line-height:20px;
 margin-bottom: -10px;
}

.linha-pq{
 line-height:25px;
}

.img_resposiva{
 max-width:98%;
 min-width:245px;
 min-height:40px;
 height: auto;
 /* margin-left: 1%; */
 margin-bottom: 1%;
 border-radius: 5px;
}

.img_resposiva_middle{
 max-width:98%;
 min-width:245px;
 min-height:40px;
 height: auto;
 /* margin-left: 1%; */
 margin-bottom: 1%;
 border-radius: 5px;
 vertical-align: middle !important;
 /*top: 100px;*/
 position: relative;
  /*top: 25% !important;*/
  max-height: 600px;
  margin: 0 auto;
}


.img-galeria{
height: 100% ;
width: 100%;
}

#div-rodape{
 background-color: #98AE4B;
 color: #FFFFFF;
 font-size: 20px;
 text-align: center;
 margin-left: 10px;
 margin-right: 10px;
}

#div-rodape-final{
 background-color: #788732;
 color: #FFFFFF;
 text-align: center;
 margin-left: 10px;
 margin-right: 10px;
 padding-top: 5px;
 padding-bottom: 5px;
 font-size: 12px;
}

#div-info-rodape{
 font-size: 16px;
}

#itens-topo-mobile{
 display: none;
}

.carousel-caption{
 font-family: 'Calibri';
 background-color: #98AE4B; 
 font-size: 3vw; 
 font-weight: bolder;
 border-radius: 5px;
 padding-top: 0px !important;
 padding-bottom: 0px !important;
 padding-left: 10px;
 padding-right: 10px;
 /* width: 50%; */
 top: 30px;
 bottom: auto; 
 left: 40px;
 right: auto;
 text-align: left; 
}

.carousel{
-webkit-box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
-moz-box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
}


.w-100{
 min-height: 200px;	
}


.container-fluid{
width: 100%;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 20px;  /* para corrigir a sobreposicao do rodape*/
/* padding-left: 0px; */
}


.centralizado{
 text-align: center !important;
}


#centralizado{
 text-align: center !important;
}

.carousel.slide{
max-width: 98%;
/* max-width: 1200px; */
margin: auto;
}



/* cards */
/* ----------------------- */

.card{
 margin-top: 10px;
 -webkit-box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
 -moz-box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
 box-shadow: 6px 7px 8px 0px rgba(191,181,191,0.42);
}

.card-header{
 background-color: #788732; 
 color: #FFFFFF; 
 height: 40px; 
 line-height: 40px;
 padding-top: 0px;	
 font-size: 18px !important;	
}

.card-body{
padding: 10px 10px 10px 10px;
}


.img-card{
 border-radius: 5px;
}


/* menu e top bar */

a { 
text-decoration: none !important; 
color: inherit !important; 
}

.hamburger {
width: 25px;
height: 4px;
background-color: white;
margin: 4px 0;
}

.navbar{
background-color: #98AE4B;
color: #FFFFFF;
padding: 5px 5px 5px 10px;
text-align: left;
font-family: 'Montserrat';
font-size: 14px !important;
border-bottom: 2px solid #788732;
}

.navbar-brand{
font-size: 14px !important;
font-weight: bolder; 
}

.nav-item{
font-size: 14px !important;
cursor: pointer;
color: #FFFFFF;
}

.nav-link{
font-size: 14px !important;
text-align: left;
}

.navbar-collapse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
 background-color: #788732;
 color: #FFC0CB;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 font-size: 14px !important;
}

.navbar-nav li:hover > ul.dropdown-menu {
 display: block;
 font-size: 14px !important;
}

.dropdown-menu {
 position:relative;
 background-color: #98AE4B;
 color: #FFFFFF;
 margin-top: 0px;
 border: none;
 border-radius: 2px;
 font-size: 14px !important;
}

.dropdown-item{
 padding: 7px 15px 7px 15px;
 color: #FFFFFF;
 border-top: 1px solid #218c74;
}

.dropdown-item:hover{
 background-color: #788732;
 /* border-radius: 3px; */
 color: #FFFFFF;
}

.dropdown-toggle:hover{
 background-color: #788732;
 color: #FFFFFF;
}


.dropdown-submenu {
 position:relative;
 border-top: 1px solid #218c74;
}

.dropdown-submenu>.dropdown-menu {
 top:0;
 left:100%;
 margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
 text-decoration: underline;
 transform: rotate(-90deg);
} 


.bt_voltar_topo{
 background-color: #98AE4B;
 color: #FFFFFF;
 width: 120px;
 height: 30px;
 line-height: 30px;
 border-radius: 10px;
 font-size: 14px;
 text-align: center;
 margin: 0 auto;
 cursor: pointer;
-webkit-box-shadow: 5px 6px 4px -1px rgba(10,9,10,0.21);
-moz-box-shadow: 5px 6px 4px -1px rgba(10,9,10,0.21);
box-shadow: 5px 6px 4px -1px rgba(10,9,10,0.21);
}

.bt_voltar_topo:hover{
	background-color: #788732;
}


.pax_site{
 font-size: 12px;
 }


.semestilo{
 -moz-appearance: none;
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 border: none;
 border-radius: 5px;
 font-size: 14px;
 padding: 5px;
}

input[type='checkbox'] {
  /* remove browser chrome */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  /*add styling */
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #455A64;
  overflow: hidden;
  cursor: pointer;
  background-color: #ffffff;
}
input[type='checkbox']::before {
  content: '';
  color: #fff;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: transparent;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 2px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  /* base64 encoded to make things easier to show 
  	normally you would use an image or a font
  */
  background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI0NDgiIHZpZXdCb3g9IjAgMCA0NDggNDQ4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTQxNy43NSAxNDEuNWMwIDYuMjUtMi41IDEyLjUtNyAxN2wtMjE1IDIxNWMtNC41IDQuNS0xMC43NSA3LTE3IDdzLTEyLjUtMi41LTE3LTdsLTEyNC41LTEyNC41Yy00LjUtNC41LTctMTAuNzUtNy0xN3MyLjUtMTIuNSA3LTE3bDM0LTM0YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsNzMuNSA3My43NSAxNjQtMTY0LjI1YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsMzQgMzRjNC41IDQuNSA3IDEwLjc1IDcgMTd6Ij48L3BhdGg+Cjwvc3ZnPgo=");
}

input[type='checkbox']:checked::before {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
		  background-color: yellow;
}

.noselect {
 -webkit-touch-callout: none; /* iOS Safari */
 -webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Old versions of Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
 user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#div-chat-vivi{
 width: 100%;
 max-width: 400px;
 height: 600px; /*440*/
 border-radius: 5px;
 position: fixed;
 bottom:10px;
 right:10px;
 z-index: 1001; 
}





/**************************************************************************************************************/

 /* Msgbox (background) */
#msgbox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}

#msgbox-caixa{
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 5px;
  border: 4px solid #788732;
-webkit-box-shadow: 5px 5px 15px 5px #E6E6E6; 
box-shadow: 5px 5px 15px 5px #E6E6E6;
 }

/* Msgbox titulo */
#msgbox-titulo {
  background-color: #6A7934;
  color: #ffffff;
  margin: auto;
  padding: 10px;
  padding-left: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 18px;
}

/* Msgbox conteudo */
#msgbox-conteudo {
  /*background-color: #fefefe;*/
  background-color: #98AE4B;
  color: #ffffff;
  margin: auto;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 18px;
  text-align: center;
}

/* botao fechar */
#msgbox-bt-close{
 background-color: #dfe6e9;
 font-size: 14px;
 padding: 5px;
 padding-left: 10px;
 padding-right: 10px;
 border: 2px solid #bdc3c7;
 border-radius: 5px;
}

#msgbox-bt-close:hover{
  background-color: #b2bec3;
  cursor: pointer;
}
/**************************************************************************************************************/



/* ******************** */
/*     MEDIA QUERIES    */
/* ******************** */

@media (max-width: 770px){

.carousel.slide{
max-width: 95%;
margin: auto;
}


}


@media (max-width: 750px){

#itens-topo{
 display: none;
}

#itens-topo-mobile{
 display: block;
 text-align: center;
}

.card-header{
 font-size: 18px !important;	
 padding-top: 3px;
}


#div-rodape{
 font-size: 14px !important;
 margin-left: 0px !important;
 margin-right: 0px !important;
}

#div-rodape-final{
 margin-left: 0px !important;
 margin-right: 0px !important;
 font-size: 12px;
}

	
}



@media (max-width: 990px){

.navbar-collapse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
 padding-left: 5px;
}

}

@media (max-width: 600px){

#div-info-rodape{
 font-size: 16px;
}

}


@media (max-width: 400px){

.navbar-brand{
 font-size: 14px !important;
 color: yellow !important;
 margin-right: 0px; /*hamburger*/
}

#botao-menu{
padding: 0px;
}



}


@media (max-width: 450px){
	
#div-chat-vivi{
 /*max-width: 320px;*/
 height: 100%; /*440*/
 bottom:0px;
 right: 0px;
}


}