@charset "UTF-8";
/*@font-face {
    font-family: 'Rubik';
    src: url("../fig/Rubik/Rubik-Regular.ttf");
}*/


* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; list-style: none; font-family: 'arial', sans-serif;}

a {text-decoration: none; cursor: pointer;}
ul {list-style: none}
h1 {font-size: 1.2rem; font-weight: 700; text-shadow: 1px 1px 1px gray; }
a:hover, input[type="submit"] {cursor: pointer;}

#spn_signif {text-decoration: underline; cursor: pointer;}
#capa {width: 100%; height: 380px;z-index: -1;}
#principal {background-color: white; text-align: center}
#principal hr {background-color: gray}
#principal a {color:blue; font-weight: 500}
#principal a:hover {color:black}
#indexh1 {width: 300px;margin:10px auto 30px auto }
#indexh1 h1 {text-align: center; color: dodgerblue; text-shadow: 2px 2px 2px black} 
#indexh1 h2 {text-align: center; font-size: .9rem; font-weight: 700; text-shadow: 2px 2px 2px white}

#indexh1 {animation: h1move 45s infinite;}
@keyframes h1move {
    0%   {transform:  scale(1)}
   
    50%  {transform:  scale(1.3)}
   
    100% {transform:  scale(1)}
    
}

#img_pousada{margin-left:35px;margin-top: -10px; width:60px}
#img_logo1{width:60px}

#menu_Principal { position: fixed; width: 100%; min-height: 70px; background-color: white; z-index: 1;box-shadow: 2px 2px 2px gray}

#sec_login,#spn_titulo h1 {display: none} /*  esconde elementos p tela maior */
#login {position: absolute ; top:5px ;text-align: center; left: 50% ;margin-left: -20px}
#logomenu {width: 100px; min-width: 105px;padding: 5px; }
#locked img {width: 40px; margin-top: 5px; cursor: pointer;}
#locked p {font-size: .8rem; color: gray; cursor: pointer}
#locked {display: inline;}
.btn_menu {width: 56px; height: 56px; position: absolute;top: 10px; right: 10px; text-align: center; color:white; border-radius: 56px; cursor: pointer; background-color: dodgerblue; font-size: 2rem; padding-bottom: 4px}
.btn_close {width: 56px; height: 56px; position: absolute;top: 5px; right: 5px;text-align: center;color: white;border-radius: 56px; cursor: pointer ; background-color:  dodgerblue; font-size: 2rem;margin: 5px 5px; display: none}

/*.MENU MOBILE*/
#divMenu {display: none; }

.menu { z-index: 1; width: 220px; height: fit-content;  position: absolute; ;margin-left: 0; background-color:white; box-shadow: 2px 2px 2px gray; }
.menu {-webkit-animation: animat 1s}

@-webkit-keyframes animat {
    from {margin-left: -300px}
    to {margin-left: 0}
}
.menu ul {position: relative; }
.menu ul li {  float: none;  }
.menu ul ul {position: static; overflow: hidden; max-height: 0; transition: all .5s;}
.menu1 {padding-bottom:20px ; display: block; text-align: left; color: blue;font-size: 1.3rem; font-weight: 700; margin-left: 10px}
.submenu { padding-bottom:20px ; display: block; text-align: left; color:black;font-size: 1.1rem; font-weight: 500; margin-left: 20px}
.menu1:hover { color: black;font-size: 1.3rem; font-weight: 700}
.submenu:hover { font-size: 1.1rem; font-weight: 700}
.menu ul li:hover ul{height: auto; max-height: 320px; visibility: visible;}
#li1 {margin-top: 5px}

/* ==== Login Socios  ====*/
    #formesqueci {display:none}
    #esqucisenha {cursor:pointer;font-size: .7rem; color:blue; font-weight:700;text-align: center} 
    #esqucisenha:hover {color: black}
  #login_icon {position: absolute;top:100px; width:300px;height: auto; left: 50%; margin-left: -150px; padding: 5px;border: 7px solid  #72B372;border-radius: 10px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #444;background-color: #F0F0F0;box-shadow: 0 0 20px 0 #000000;display: none;}

#login_icon img {margin-left: 40px}
#cpfsocio,#senhasocio,#loginsocio {font-size: .8rem; margin: 4px;border: solid 2px gray; height: 30px; }


#sbt_socio2{background-color: rgba(255, 255, 143, 0.973);width: 80px; height: 35px; border: 1px solid yellow; border-radius: 5px; margin-bottom: 5px; margin-top: 10px; margin-bottom: 10px}
#sbt_socio2:hover {background-color: rgba(255, 255, 49, 0.973)}
/*
#login_icon h2{font-size: .9rem; color: #ccc; font-weight: 300;text-shadow: none}
#login_icon label, #login_icon legend {color: #ccc}

*/
#p_facalogin {margin: -20px 90px 10px;font-size: .9rem }
#spn_xx {position: relative;font-size: 1.2rem; font-weight: 500; left: 250px; color: black; cursor: pointer;}
spn_x {position: relative;font-size: 1.2rem; font-weight: 500; left: 250px; color: black; cursor: pointer;}
#lbl_LoginErro {color: red; font-size: .9rem; font-weight: 500}

#sousocio {text-align: center; ; font-size: .7rem; width:250px; height:25px; background-color: rgb(248, 59, 59);  border-radius: 5px; padding: 5px; margin-top: 10px; margin-left: 15px } 
#sousocio:hover {background-color: red; }
#sousocio a {color:white; }


 .login_botao { margin: 30px 0 20px 50px; font-size: 1em;border-radius: 8px;padding: 10px;border: 1px solid #59B969;background-color: rgba(162, 255, 143, 0.973);box-shadow: 0 1px 0 0 #60BD49 inset;}
 .login_botao:hover{background-color:rgba(73, 255, 49, 0.973)}

/* ==== icones de atalho  ====*/
#iconesGrendes {width: 100%; height: 135px;  display: flex; flex-direction: row; flex-wrap: wrap;padding: 5px; align-items: center; }
.artImg {width: 20%;text-align: center ; color: floralwhite; font-weight: 500;  }
.artImg img {width: 55px} 



.p_imaAtalho { color:gray;font-size: .6rem; font-weight: 500}

/* ==== rodape  ====*/
#divultimo {width: 100%; background-color: black; color: white; font-size: .8rem; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center} 
#divultimo section {margin: 10px} 
#divultimo a {color: white}
#divultimo p{font-size: .9rem; margin-bottom: 10px}
#divultimo li{margin-bottom: 10px; }
.divultimoC,.divultimoC1 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.sec_info {font-size: .6rem; line-height:15px; text-align: center; padding: 0 10% 0 10%}
#newsletter {width: 300px; display: flex; flex-direction: row; flex-wrap: nowrap;}
#newsletter p {font-size: .9rem; color: yellow}
#trabalhe {width: 300px;display: flex; flex-direction: row; flex-wrap: wrap;}
#trabalhe p{width: 195px;font-size: .7rem}
section article {padding: 10px; text-align: center}
#social {width: 310px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
hr {width: 310px;  height: 1px;  background-color: white;  }
.menurodape li {font-size: .7rem}
#p_siga {width: 340px;text-align: center}
#jkweb {font-size: .6rem; align-self: flex-end; padding-bottom: 10px}
#logasoc{font-size: .5rem}
.art_gira:hover {transform: rotate(400grad); transition: 1s}
#p_modalLogin {cursor: pointer;}
#iconeCad {width: 64px; height: 64px;}

/******* Formularios de envio  - Pacotes, sujestao, contato*******/
#qual_form {visibility: hidden;}


#info_text {font-size: .9rem; text-align: justify; line-height: 20px; padding: 10px}
#info_text li { color: black;list-style: initial;margin-left: 20px; margin-bottom: 10px}
#text_a_form {width: 90%}


  /*formulario*/
  #formulario { width:90%;min-width: 300px; margin: 10px auto;padding: 10px;border: 7px solid  #72B372;border-radius: 10px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #444;background-color: #F0F0F0;box-shadow: 0 0 20px 0 #000000;}
 
  label {display: inline-block;width: 25%;text-align: right;margin: 10px; font-size:.7rem; font-weight: 500}
  select,textarea, input {width: 65%; font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;padding: 5px;font-size: 0.9rem;border-radius: 5px;background: rgba(0, 0, 0, 0.1);}

  select:focus,textarea:focus, input:focus{background: rgba(0, 0, 0, 0.2);}
  #h2_final {font-size: 1rem; font-weight: 700; margin: 0 15px 40px;border-bottom: 2px solid #72B372;padding: 5px 10px 5px 0; }
  #botao_enviar { font-size: 1em;border-radius: 8px;padding: 10px;border: 1px solid #59B969;background-color: rgba(162, 255, 143, 0.973);box-shadow: 0 1px 0 0 #60BD49 inset;}
  #botao_enviar:hover {background-color:rgba(73, 255, 49, 0.973)}
  #botao_enviar {margin:20px;}



 

@media screen and (max-width: 340px) {  /******* break point telas < 340px *******/
  
    #capa {height: 300px; }
    #indexh1 {width: 280px}
    #nome_form,#empresa_form,#email_form {width: 95%;} 
  
    
}


@media screen and (min-width: 768px) {  /******* break point telas > 768px *******/
    
    #capa {height: 400px; background-size: 100%;}
    #indexh1 {width: 600px;}
    #indexh1 h1 {font-size: 1.4rem }
    #indexh1 h2 { font-size: 1.2rem}
    
/******* Menu *******/
.btn_menu {display: none; visibility: hidden;}
    .btn_close {display: none; position: absolute;top: 0; left: 0; visibility: hidden;}
#menu_Principal { width: 100%; height: 70px;background-color: white;position: fixed; display: flex; flex-direction: row; flex-wrap: wrap;}
    #divTitMenu {width: 50%;  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; min-width: 550px;}
    #spn_titulo {width: 100%; height:40px; text-align: center; padding-top: 5px }
    #spn_titulo h1 {display: initial;}


#divMenu {display: inline; }
.menu { width: 100%; min-width: 620px;  margin-top: 2px; height: 56px;left: 50px; display: block !important;   position: relative;background-color: initial; border: none; box-shadow: none;}

.menu1,.submenu {font-size: 1rem; font-weight: initial; margin-left: initial; text-align: center; }
.menu1:hover,.submenu:hover {font-size: 1rem}
.menu ul {position: relative; float: left; margin-right: 20px; }
 .menu ul li { width: 122px; float: left;margin-top: -8px; }
 #li1 {width:50px; margin-top: -8px;}
 .menu ul ul {position: absolute; visibility: hidden;}
 .menu ul li:hover ul{ background-color: white}
 .menu ul ul li {float: none; border-bottom: #ccc 1px solid} 
 .menu a {padding: 5px; padding-top:15px; display: block; text-align: center; color: blue;font-size: 1rem;font-weight: 700;}
 #itemmenor {font-size: .9rem; }
 .submenu:hover {color: black; font-weight: 700;}

 /******* acesso associados *******/
 #login {display: initial;width: 100px; position: initial; top:initial; left:initial ; margin-left: 0;text-align: center;z-index: 1;}
 #locked { float: right}
/* ==== icones de atalho  ====*/
.artImg img {width: 64px}
 .img_fot  {width: 400px;height: 266px; }
 .p_imaAtalho { font-size: .8rem}
 .artImg:hover {cursor: pointer;  transform: scale(1.5);
    transition: .3s}

 /* ==== rodape  ====*/
 hr {width: 700px}
 .sec_info {width: 230px;padding: 0 ; }
 .divultimoC {justify-content: space-around }

 /*formulario*/
 #formulario { width:450px;margin: 10px auto;padding: 10px;font-size:.9rem}
     label {font-size:.8rem}
}


@media screen and (min-width: 992px) {  /******* break point telas > 992 *******/
  
/******* acesso associados *******/
#capa { height: 400px;}
#indexh1 {width: 700px; }
#indexh1 h1 {font-size: 1.6rem }
#indexh1 h2 { font-size: 1.4rem}

#login {width: 100px;font-size: .7rem; text-align: center}
#formIni input { margin-top: 0px;}
#div_label {width: 100%; height: 15px;   display: flex; flex-direction: row; flex-wrap: wrap;padding: 5px; align-items: center; font-size: .6rem; }
#lbl_log1 {margin-left: 0;  }
#lbl_log2 {margin-left: 25px; }
#lbl_log3 {margin-left: 0; }
#inpt1 {width: 100px}
#inpt2 {width: 70px}
#inpt3 {width: 70px}
#inpt1, #inpt2, #inpt3 {height: 15px; font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;font-size: 0.7rem; border-radius: 2px; background: rgba(0, 0, 0, 0.15);}
#lbl_log1, #lbl_log2, #lbl_log3 {display: inline-block;width: 80;text-align: left; font-size:.7rem; font-weight: 200}

/*#locked {display: none}*/
#sec_login {display: initial;float: right}

#sbt_socio {width: 35px; height: 20px; padding: 2px;border: 1px solid #59B969;background-color: rgba(162, 255, 143, 0.973);box-shadow: 0 1px 0 0 #60BD49 inset; font-size: .6rem}
#sbt_socio:hover {background-color:rgba(73, 255, 49, 0.973)}
}


@media screen and (min-width: 1200px) {  /******* break point telas > 1200 *******/
#capa { height: 400px;}
#indexh1 {width: 800px; }
#indexh1 h1 {font-size: 1.8rem }
#indexh1 h2 { font-size: 1.5rem}
#logomenu {width: 250px;}

#img_pousada{margin-left:35px;margin-top: 0; width:100px}
#img_logo1{width:100px}
}

@media screen and (min-width: 1600px) {  /******* break point telas > 1600 *******/
    #capa { height: 600px;}
    #indexh1 {width: 800px; }
}