/* ####################################################################################################### */




.div-primeira-foto-padrao{ /* Estipula tamanho e comportamento (adaptação mobile) pra primeira imagem das urls */
    width: 100%;
    height: 70%; /* Antes era 400px */
    box-sizing: border-box;
    overflow: hidden;
}

.div-mapa-padrao{ /* Estipula tamanho e comportamento (adaptação mobile) pro mapa do Google Maps */
    width: 100%;
    height: 80%;
    box-sizing: border-box;
    overflow: hidden;
}

.div-main-banner{ /* Foto principal na MAIN pra banner */
    background-image: url("../img/fondue/fondue-01.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-position: top left; /* Insere a imagem a partir da esquerda e do topo */
    width: 100%;
    height: 100%;
}


.div-fondue-banner{ /* Foto principal do fondue usada pra banner */
    background-image: url("../img/fondue/fondue-02.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-position: top left; /* Insere a imagem a partir da esquerda e do topo */
    width: 100%;
    height: 100%;
    animation: img-div-sobedesce 15s ease-in-out infinite;
}


.div-hotel-banner{ /* Foto principal do hotel usada pra banner */
    background-image: url("../img/ambientes/hgp-aereo.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-position: top left; /* Insere a imagem a partir da esquerda e do topo */
    width: 100%;
    height: 100%;
    animation: img-div-sobedesce 15s ease-in-out infinite;
}

.iframe-mapa{
    width: 100%;
    height: 100%;  
}





/* ####################################################################################################### */





.div-descricao-banner{ /* Primeira barra em marrom abaixo do BANNER com texto de boas vindas */
    display: grid; /* Funciona bem com textos e botões */
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #573323; /* Cor marrom */
    overflow: hidden;
    padding: 1em 0;
    margin: 0;
    width: 100%;
    height: 40%; /* Antes era 350px / Aumenta um pouco no mobile pra não cortar o texto */
}

.p-descricao-titulo{ /* Bem-vindo destacado na barra em marrom */
    font-family: Pacifico, sans-serif;
    font-size: 35px; 
    color: white;
    font-weight: normal;
    padding: 0;
    margin: 0;
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.p-descricao-texto{ /* Breve resumo introdutório destacado na barra em marrom */
    color: white;
    padding: 0;
    margin: 1em 2em 0 2em;
}




/* ####################################################################################################### */




.p-titulo-marrom-padrao{ /* Não desaparece no mobile como os outros títulos */
    font-family: Pacifico, sans-serif;
    color: #432918;
    font-weight: normal;
    font-size: 35px;
    padding: 0;
    margin: 0;
}

.p-titulo-marrom{
    font-family: Pacifico, sans-serif;
    color: #432918;
    font-weight: normal;
    font-size: 35px;
    padding: 0;
    margin: 0;
}

.p-titulo-cinza{
    font-family: Pacifico, sans-serif;
    color: #6f6f6f;
    font-weight: normal;
    font-size: 35px;
    padding: 0;
    margin: 0;
}

.p-titulo-branco{
    font-family: Pacifico, sans-serif;
    color: white;
    font-weight: normal;
    font-size: 35px;
    padding: 0;
    margin: 0;
}

.p-texto-marrom{
    color: #432918;
}

.p-texto-cinza{
    color: #525252;
}

.p-texto-branco{
    color: white;
}

.ul-lista-fondue{
    list-style: none;
    padding: 0;
    margin: 0;
}

.li-com-icone{
    list-style: square;
    list-style-position: inside;
    text-align: left;
}



/* ####################################################################################################### */





.div-float-50-flex{
    display: flex; /* Funciona bem com imagens mas embola textos e botões */
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    float: left;
    width: 50%;
    height: 100%;
}


.div-float-50-grid{
    display: grid; /* Funciona bem com textos e botões mas afina imagens (fica tipo width 0) */
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    float: left;
    width: 50%;
    height: 100%;
}

.div-float-40-flex{ /* Apenas para a moeda giratória dos preços */
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    float: left;
    width: 40%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.div-float-60-grid{ /* Apenas para os preços da moeda giratória */
    display: grid; 
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    float: left;
    width: 60%;
    height: 100%;
}

.div-float-25-grid{ /* Apenas para o formulário de contato */
    display: grid; 
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    float: left;
    width: 25%;
    height: 100%;
}

.div-principal-branca{
    overflow: hidden;
    padding: 2em 0; /* Pequeno espaço por cima e por baixo pra aumentar as divs */
    margin: 0; /* A div branca não tem margin porque fica visualmente feio (distancia demais) */
    width: 100%;
    height: 50%;
}

.div-principal-cinza{
    overflow: hidden;
    padding: 2em 0; /* Pequeno espaço por cima e por baixo pra aumentar as divs */
    margin: 1em 0; /* Pequeno espaço por cima e por baixo pra distanciar as divs */
    width: 100%;
    height: 50%;
    background-color: #eee;
}

.div-principal-verde{
    overflow: hidden;
    padding: 2em 0; /* Pequeno espaço por cima e por baixo pra aumentar as divs */
    margin: 1em 0; /* Pequeno espaço por cima e por baixo pra distanciar as divs */
    width: 100%;
    height: 50%;
    background-color: #33733F;
}

.div-principal-vermelha{
    overflow: hidden;
    padding: 2em 0; /* Pequeno espaço por cima e por baixo pra aumentar as divs */
    margin: 1em 0; /* Pequeno espaço por cima e por baixo pra distanciar as divs */
    width: 100%;
    height: 50%;
    background-color: #7F1B1D;
}

.div-principal-dourada{
    overflow: hidden;
    padding: 2em 0; /* Pequeno espaço por cima e por baixo pra distanciar as divs */
    margin: 2em 0 0 0; /* Pequeno espaço por cima da DIV pra distanciar da anterior */
    width: 100%;
    height: 50%;
    background-color: #B99253;
}

.div-dupla-espaco-zero{ /* Tira os espaçamentos das DIVs duplas (fotos dos espaços do hotel que usam 2 divs com fotos) */
    padding: 0;
    margin: 0;
}

.div-dupla-margin-bottom{
    margin-bottom: 1em; /* Pequeno espaço por cima e por baixo pra aumentar as divs */
}





/* ####################################################################################################### */




.animacao{ /* Animação de aproximar e voltar na imagem */
    animation: zoom-img-div 10s ease-in-out infinite;
}

.div-foto-fondue-completo{
    background-image: url("../img/fondue/fondue-02.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;   
}

.div-foto-rechaud-queijo{
    background-image: url("../img/fondue/fondue-rechaud-queijo.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;   
}

.div-foto-pedra-carnes{
    background-image: url("../img/fondue/fondue-pedra-carnes.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;   
}

.div-foto-rechaud-chocolate{
    background-image: url("../img/fondue/fondue-rechaud-chocolate.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-vinho-lareira{
    background-image: url("../img/ambientes/hgp-vinho-lareira.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}




/* ####################################################################################################### */





.div-foto-corredor{
    background-image: url("../img/ambientes/hgp-corredor.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-estacionamento01{
    background-image: url("../img/ambientes/hgp-estacionamento-01.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-estacionamento02{
    background-image: url("../img/ambientes/hgp-estacionamento-02.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-salaobranco{
    background-image: url("../img/ambientes/hgp-salao-branco.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-restaurante{
    background-image: url("../img/ambientes/hgp-restaurante.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-bar{
    background-image: url("../img/ambientes/hgp-bar.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-lareira-inferior{
    background-image: url("../img/ambientes/hgp-lareira-inferior.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-espacokids{
    background-image: url("../img/ambientes/hgp-espaco-kids.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-fraldario{
    background-image: url("../img/ambientes/hgp-fraldario.jpg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-escadavermelha{
    background-image: url("../img/ambientes/hgp-escadaria-vermelha.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-moveis-antiquario{
    background-image: url("../img/ambientes/hgp-moveis-antiquarios.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-deck01{
    background-image: url("../img/ambientes/hgp-deck-externo-01.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}

.div-foto-deck02{
    background-image: url("../img/ambientes/hgp-deck-externo-02.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 90%;
    border-radius: 7px;
    margin: 0;
    padding: 0;
    position: relative; /* Para funcionar a fita decorativa */
    z-index: 1; /* Para funcionar a fita decorativa */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
}






/* ####################################################################################################### */





.div-contatos-principal{ /* DIV inicial que engloba todos */
    width: 100%;
    height: 60%;
    padding: 2em 0 0 0;
    margin: 0;
}

.div-contatos-individual{ /* Cada seção de contatos (4 seções) */
    display: flex; /* É necessário pros alinhamentos funcionar */
    justify-content: center; /* Centraliza o conteúdo na horizontal */
    align-items: center; /* Centraliza o conteúdo na vertical */
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding: 0;
    margin: 0;
}

.ul-contatos{ /* UL que organiza os depoimentos individualmente */
    margin: 0;
    padding: 0;
    list-style: none;
    /* color: #6f6f6f; */
    text-align: center;
}

.ul-contatos a{
    text-decoration: none;
    color: black;
}

.ul-contatos a:visited{
    text-decoration: none;
    color: black;
}


.div-contatos-circulo{ /* Definições padrão da DIV redonda para as fotos de depoimentos */
    display: flex; /* É necessário pros alinhamentos funcionar */
    justify-content: center; /* Centraliza o conteúdo na horizontal */
    align-items: center; /* Centraliza o conteúdo na vertical */
    width: 80px;
    height: 80px;
    background-color: #B99253;
    margin: 1em auto 0 auto; /* Centraliza a imagem horizontalmente */
    color: #fff;
    border: 7px solid white;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.contatos-icones{ /* Ícones dentro dos círculos nos contatos */
    color: white;
    font-size: 40px;
}

.p-contatos{
    margin: 2em 0 0 0;
    padding: 0;
}






/* ####################################################################################################### */





.fita-decorativa-direita {
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: -10px;
}

.fita-decorativa-direita__content {
    left: -25px;
    top: 30px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background-color: #00aaa0; /* #00aaa0 */
    box-shadow: 0 0px 10px ;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
    border: 2px dotted #fff;
    outline : 5px solid  #f5cd79;
}

.fita-decorativa-direita::before {
    top: 0;
    left: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #f19066;
    box-sizing: content-box;
}

.fita-decorativa-direita::after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #f19066;
}  

.fita-decorativa-esquerda {
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    left: -10px;
}

.fita-decorativa-esquerda__content {
    right: -25px;
    top: 30px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background-color: #00aaa0;
    box-shadow: 0 0px 10px ;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
    border: 2px dotted #fff;
    outline : 5px solid  #f5cd79;
}

.fita-decorativa-esquerda::before {
    top: 0;
    right: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #f19066;
    box-sizing: content-box;
}

.fita-decorativa-esquerda::after {
    bottom: 0;
    left: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #f19066;
} 

.fita-invisivel{ /* Deixa as fitas visíveis no mobile e invisíveis no desktop */
    width: 100%;
    height: 100%;
    display: none;
}



/* ####################################################################################################### */





@media only screen and (max-width: 767px) {

.fita-invisivel{ /* Deixa as fitas visíveis no mobile e invisíveis no desktop */
    width: 100%;
    height: 100%;
    display: block;
}

.p-titulo-marrom, .p-titulo-cinza, .p-titulo-branco{
    display: none;
}
    
.p-texto-cinza, .p-texto-branco, .p-texto-marrom{
    margin: 0;
    padding: 0;
}

.div-primeira-foto-padrao{
    height: 50%; /* Antes era 200px */
}

.div-moeda-preco{ /* Diminui o tamanho do valor na moeda */
    height: 30px;
    width: 100px;
    font-size: 25px;
}

.div-principal-dourada{ /* Aumenta o tamanho da div com preços */
    height: 65%;
}
    
    
.div-contatos-circulo{
    width: 50px;
    height: 50px;
}
 
.contatos-icones{
    font-size: 25px;
}
  

.div-circulo{ /* Diminui o tamanho o círculo com valor de promoção na MAIN */
    width: 100px;
    height: 100px;
    right: 50%; /* Não deixa o círculo se esconder no final da página à direita */
}

.div-preco{
    top: 40%; /* Centraliza mais o conteúdo */
    font-size: 20px;
}


.p-titulo-padrao{ /* Diminui o tamanho dos titulos coloridos */
    font-size: 25px;
}

    
.depo-imagem-padrao{ /* Diminui a foto dos depoimentos */
    width: 70px;
    height: 70px;
}


.p-depoimento{ /* Aumenta o espaço de texto pro depoimento */
    height: 350px;
    padding: 0;
}

    
}