*{margin:0px; padding:0px; box-sizing:border-box; font-family:Open Sans; outline-style:none}
html{overflow-x:hidden}
html, body{margin:0px; padding:0px; overflow-x:hidden}
body{background-image:url('../img/background.png')}
.Botao{border:none; cursor:pointer; -webkit-appearance: none}
.Background{background-repeat:no-repeat; background-position:center center}
.CorpoDiv{display:inline-block; width:calc(100% - 40px); max-width:1140px; margin-left:20px; margin-right:20px; text-align:left}

.BgVerde{background-color:#a7d49b}
.BgAzul{background-color:#75c8ea}
.BgRosa{background-color:#f99ecc}

.ColorVerde{color:#a7d49b}
.ColorAzul{color:#75c8ea}
.ColorRosa{color:#f99ecc}

.BordaVerde{border-color:#a7d49b}
.BordaAzul{border-color:#75c8ea}
.BordaRosa{border-color:#f99ecc}

#Topo{float:left; width:100%; height:208px; text-align:center}
#Topo .CorpoDiv{text-align:right}
#Topo .Cegonha{display:inline-block}
#Topo .CegonhaImg{float:left; width:137px; height:90px; background-repeat:no-repeat; position:relative; left:28px}
#Topo .CegonhaImgVerde{background-image:url('../img/nascimento-verde.png')}
#Topo .CegonhaImgAzul{background-image:url('../img/nascimento-azul.png')}
#Topo .CegonhaImgRosa{background-image:url('../img/nascimento-rosa.png')}
#Topo .CegonhaNuvem{float:left; width:202px; height:85px; text-align:center; padding-top:10px; padding-left:18px; background-image:url('../img/nuvem.png')}
#Topo .CegonhaNuvemPrevisao{display:inline-block; width:140px; text-align:center; font-size:13.5px; font-weight:500}
#Topo .CegonhaNuvemPrevisaoIdade{margin-top:10px}
#Topo .CegonhaNuvemPrevisaoVerde{color:#a8a8a8}
#Topo .CegonhaNuvemPrevisaoAzul{color:#afd456}
#Topo .CegonhaNuvemPrevisaoRosa{color:#c48ee3}
#Topo .CegonhaNuvemData{display:inline-block; width:140px; text-align:center;  font-size:17.5px; font-weight:600}
#Topo .CegonhaNuvemDataVerde{color:#81c170}
#Topo .CegonhaNuvemDataAzul{color:#2db9f3}
#Topo .CegonhaNuvemDataRosa{color:#f48ec1}

#Menu {float:left; width:100%; margin-top:-106px; text-align:center}
#Menu .CorpoDiv{background-color:#FFF; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25); position:relative}
#Menu .NomeCorpo{float:left; width:100%; text-align:center}
#Menu .Nome{display:inline-block; min-width:220px; max-width:calc(100% - 40px); margin-top:-60px; white-space:nowrap; overflow: hidden; text-overflow:ellipsis}
#Menu .NomeImg{display:inline-block; width:118px; height:118px; position:relative}
#Menu .NomeImgMoldura{position:absolute; top:0px; left:0px; width:100%; height:100%}
#Menu .MolduraVerde{background-image:url('../img/moldura-verde.png')}
#Menu .MolduraAzul{background-image:url('../img/moldura-azul.png')}
#Menu .MolduraRosa{background-image:url('../img/moldura-rosa.png')}
#Menu .NomeImgImg{position:absolute; z-index:1; top:6px; left:6px; width:calc(100% - 12px); height:calc(100% - 12px); background-size:cover; border-radius:100%}
#Menu .NomeNome{float:left; width:100%; height:63px; margin-top:-12px; position:relative}
#Menu .NomesSpan{float:left; width:100%; padding:0px 10px; border-radius:8px; font-family:Overlock; font-weight:700; font-size:24px; line-height:40px; color:#363636; position:relative; z-index:2}
#Menu .NomeBordaVerde{border:2px solid #e1e1e1}
#Menu .NomeBordaAzul{border:2px solid #d7e9a7}
#Menu .NomeBordaRosa{border:2px solid #f7e9a2}
#Menu .NomeTribal{position:absolute; top:20px; left:calc(50% - 60px); z-index:1; width:120px; height:57px; background-image:url('../img/nome-div.png')}
#Menu .NomeTribalBg{position:absolute; top:21px; left:calc(50% - 59px); z-index:0; width:118px; height:55px}
#Menu .NomeTribalBgAzul{background-color:#d7e9a7}
#Menu .NomeTribalBgVerde{background-color:#e1e1e1}
#Menu .NomeTribalBgRosa{background-color:#f7e9a2}
#Menu .MenuCorpo{float:left; width:100%; padding:40px 48px; padding-bottom:20px; text-align:center; border-bottom:1px solid #ebebeb}
#Menu .Menu{display:inline-block; width:820px}
#Menu .MenuMobile{position:absolute; top:28px; right:28px; width:32px; height:32px; background-size:contain; display:none}
#Menu .MenuMobileVerde{background-image:url('../img/menu-verde.png')}
#Menu .MenuMobileAzul{background-image:url('../img/menu-azul.png')}
#Menu .MenuMobileRosa{background-image:url('../img/menu-rosa.png')}
#Menu .MenuTopico{float:left; padding:6px 20px; border-radius:40px; position:relative; font-family:Overlock; font-size:18px; font-weight:600; color:#252525}
#Menu .MenuTopico:hover{color:#FFF}
#Menu .MenuTopicoSeparador{position:absolute; z-index:2; width:100%; top:24px; left:0px}
#Menu .MenuTopicoMaisCorpo{position:absolute; z-index:2; top:0px; left:0px;  width:100%; padding-top:40px; border-radius:20px; background-color:#FFF; border:3px solid #75c8ea; overflow:hidden; display:none}
#Menu .MenuTopicoMaisCorpoVerde{border:3px solid #a7d49b}
#Menu .MenuTopicoMaisCorpoAzul{border:3px solid #75c8ea}
#Menu .MenuTopicoMaisCorpoRosa{border:3px solid #ff9ecc}
#Menu .MenuTopicoMaisPaginas{z-index:3; padding:0px}
#Menu .MenuTopicoMaisPaginasSpan{position:relative; z-index:3; display:inline-block}
#Menu .MenuTopicoMaisPaginas:hover .MenuTopicoMaisPaginasSpan{background-color:#75c8ea; border-radius:20px 20px 0px 0px}
#Menu .MenuTopicoMaisPaginas:hover .MenuTopico{color:#FFF}
#Menu .MenuTopicoMaisPaginas:hover .MenuTopicoMaisCorpo{display:block}
#Menu .MenuTopicoMais{float:left; width:100%; padding:8px 0px; font-family:Overlock; font-size:15px; font-weight:600}
#Menu .MenuTopicoMais:hover{color:#FFF}
#Menu .MenuTopicoMaisVerde:hover{background-color:#a7d49b}
#Menu .MenuTopicoMaisAzul:hover{background-color:#75c8ea}
#Menu .MenuTopicoMaisRosa:hover{background-color:#ff9ecc}
#Menu .MenuTopicoVerde:hover{background-color:#a7d49b}
#Menu .MenuTopicoAzul:hover{background-color:#75c8ea}
#Menu .MenuTopicoRosa:hover {background-color:#ff9ecc}
#Menu .MenuTopicoVerde:hover .MenuTopicoMaisPaginasSpan{background-color:#a7d49b}
#Menu .MenuTopicoAzul:hover .MenuTopicoMaisPaginasSpan{background-color:#75c8ea}
#Menu .MenuTopicoRosa:hover .MenuTopicoMaisPaginasSpan{background-color:#ff9ecc}
#Menu .MenuTopicoSelecionadoVerde{background-color:#a7d49b; color:#FFF}
#Menu .MenuTopicoSelecionadoAzul{background-color:#75c8ea; color:#FFF}
#Menu .MenuTopicoSelecionadoRosa{background-color:#ff9ecc; color:#FFF}
#Menu .MenuSeparador{float:left; width:calc(25% - 166px)}
#Menu .MenuNaoHaPaginas{float:left; width:100%; font-family:Overlock; font-size:16px; font-weight:400; margin-bottom:8px; color:#666}

#MenuMobile{float:left; position:absolute; top:20px; right:0px; z-index:9}
#MenuMobile .Link{font-size:14px; color:#8ff1ff}
#MenuMobile .MenuFixo{position:fixed; top:0px; left:-100%; width:calc(100% - 0px); height:100%; background:rgba(255,255,255,0.8); transition:0.2s}
#MenuMobile .Ul{float:left; position:relative; z-index:3; top:0; left:-270px; width:270px; height:100%; background:#F5F5F5; overflow:scroll; transition:0.5s}
#MenuMobile .UlTopo{float:left; width:100%; color:#FFF; padding:12px 12px}
#MenuMobile .Nome{float:left; font-family:Overlock; font-size:26px; font-weight:600}
#MenuMobile .UlTopoImg{float:left; width:72px}
#MenuMobile .UlTopoFont{float:left; font-size:14px}
#MenuMobile .Li{float:left; width:100%}
#MenuMobile .LiFont{float:left; width:100%; background:#FAFAFA; color:#656565; padding:12px; font-family:Overlock; font-size:16px; font-weight:600; border-bottom:1px solid #e1e1e1}
#MenuMobile .LiFont:hover{background:#f5f5f5}
#MenuMobile .LiVoltar img{position:relative; top:2px}
#MenuMobile .LiIcon{float:right; color:#505050}
#MenuMobile .LiIcon img{width:18px; height:16px}
#MenuMobile .UlMenuMobile{display:block}
#MenuMobile .LiSubCat{position:absolute; top:0; left:-270px; width:270px; transition:0.2s}
#MenuMobile .MenuTopicoSelecionado{background-color:#b5b5b5; color:#FFF}
#MenuMobile .MenuTopicoSelecionado:hover{background-color:#b5b5b5; color:#FFF}
.mobileClick{float:left; width:calc(100% - 270px); height:100%; position:relative}

#Conteudo{float:left; width:100%; min-height:calc(100% - 453px); text-align:center}
#Conteudo .CorpoDiv{background-color:#FFF; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25); position:relative}
#Conteudo .EscondeboxShadow{position:absolute; top:-21px; left:0px; width:100%; height:20px; background-color:#FFF}
#Conteudo .Index{float:left; width:100%; padding:48px; text-align:center}
#Conteudo .IndexBemVindoCorpo{float:left; width:100%; margin-bottom:40px}
#Conteudo .IndexBemVindo{display:inline-block; background-position:left center; padding-left:44px; font-family:Overlock; font-size:26px}
#Conteudo .IndexImgCorpo{display:inline-block; width:660px; height:386px; position:relative}
#Conteudo .IndexImgBordaVerde{border:2px dashed #e1e1e1}
#Conteudo .IndexImgBordaAzul{border:2px dashed #d7e9a7}
#Conteudo .IndexImgBordaRosa{border:2px dashed #f7e9a2}
#Conteudo .IndexImg{position:absolute; top:6px; left:6px; width:calc(100% - 12px); height:calc(100% - 12px); background-size:cover}
#Conteudo .IndexTextoCorpo{float:left; width:100%; margin:56px 0px}
#Conteudo .IndexTexto{float:left; width:100%; margin-bottom:4px; font-family:Overlock; font-size:17px; line-height:1.7; font-weight:400; color:#212121}
#Conteudo .IndexSeparador{float:left; width:100%; height:32px}
#Conteudo .IndexSeparadorVerde{background-image:url('../img/separador-verde.png')}
#Conteudo .IndexSeparadorAzul{background-image:url('../img/separador-azul.png')}
#Conteudo .IndexSeparadorRosa{background-image:url('../img/separador-rosa.png')}
#Conteudo .IndexCha{float:left; width:100%; padding:32px; margin-top:48px; margin-bottom:48px; position:relative}
#Conteudo .IndexCha:nth-last-child(1){margin-bottom:0px}
#Conteudo .IndexChaVerde{background-color:#f9faf2; border:2px dashed #c4df9b; color:#9ccf8e}
#Conteudo .IndexChaAzul{background-color:#f2f8fa; border:2px dashed #75c8ea; color:#75c8ea}
#Conteudo .IndexChaRosa{background-color:#faf7ee; border:2px dashed #f1ca2f; color:#f99ecc}
#Conteudo .IndexChaTitulo{float:left; width:100%; text-align:center; font-family:Overlock; font-size:26px}
#Conteudo .IndexChaTexto{display:inline-block; width:690px; margin:28px 0px; font-family:Overlock; font-size:17px; line-height:1.5; font-weight:400; color:#212121}
#Conteudo .IndexChaMapaCorpo{float:left; width:100%}
#Conteudo .IndexChaMapa{display:inline-block; padding-left:28px; background-position:left center; font-size:14px; line-height:24px; font-weight:700; color:#4c4c4c}
#Conteudo .IndexChaMapaVerde{background-image:url('../img/pin-verde.png')}
#Conteudo .IndexChaMapaAzul{background-image:url('../img/pin-azul.png')}
#Conteudo .IndexChaMapaRosa{background-image:url('../img/pin-rosa.png')}
#Conteudo .IndexChaConfirmarCorpo{float:left; width:100%; margin-top:40px}
#Conteudo .ConfirmarPresencaBotaoSemMapa{margin-top:0px}
#Conteudo .IndexChaConfirmar{display:inline-block; width:200px; border-radius:7px; padding:15px; margin:0px 3px; font-size:17px; font-weight:700; color:#FFF; cursor:pointer}
#Conteudo .IndexChaConfirmarVerde{background-color:#9ccf8e}
#Conteudo .IndexChaConfirmarAzul{background-color:#75c8ea}
#Conteudo .IndexChaConfirmarRosa{background-color:#ff9ecf}
#Conteudo .IndexChaPresentesVerde{border:1px solid #9ccf8e; color:#9ccf8e}
#Conteudo .IndexChaPresentesAzul{border:1px solid #75c8ea; color:#75c8ea}
#Conteudo .IndexChaPresentesRosa{border:1px solid #ff9ecf; color:#ff9ecf}
#Conteudo .IndexChaCarrinho{position:absolute; bottom:2px; right:2px; width:82px; height:76px}
#Conteudo .IndexChaCarrinhoVerde{background-image:url('../img/carrinho-verde.png')}
#Conteudo .IndexChaCarrinhoAzul{background-image:url('../img/carrinho-azul.png')}
#Conteudo .IndexChaCarrinhoRosa{background-image:url('../img/carrinho-rosa.png')}
#Conteudo .ConfirmarPresenca{display:inline-block; width:calc(100% - 180px); margin-top:40px; height:55px}
#Conteudo .ConfirmarText{float:left; width:calc(75% - 136px); border:1px solid #B5B5B5; border-radius:5px; padding:12px; margin-right:8px; font-size:14px; color:#222}
#Conteudo .ConfirmarBotao{float:left; width:calc(25% - 6px); border-radius:5px; padding:12px; margin-right:6px; font-size:16px; font-weight:700; color:#FFF}
#Conteudo .ConfirmarVoltar{float:left; width:128px; background-color:#A5A5A5; border-radius:5px; padding:12px; font-size:16px; font-weight:700; color:#FFF}
#Conteudo .ConfirmarRetorno{float:left; width:100%; margin-top:4px; font-size:16px; font-weight:700; color:#E62C2C}
#Conteudo .AindaNaoHaImagem{position:absolute; top:calc(50% - 11px); left:0px; width:100%; text-align:center; font-family:Overlock; font-size:18px; color:#999}
#Conteudo .AAA{}
#Conteudo .AAA{}
#Conteudo .AAA{}
#Conteudo .AAA{}
#Conteudo .AAA{}
#Conteudo .AAA{}
#Conteudo .AAA{}

#Rodape{float:left; width:100%; padding:28px 0px; padding-top:0px; margin-top:64px; text-align:center; background-color:#FFF; position:relative}
#Rodape .Topo{position:absolute; top:-28px; left:0px; width:100%; height:28px; background:linear-gradient(to top, #FFF, rgba(255, 255, 255, 0))}
#Rodape .Icegonha{float:left}
#Rodape .IcegonhaImg{float:left; width:76px; height:52px; background-image:url('../img/logo.png'); background-size:contain}
#Rodape .IcegonhaCopyright{float:left; margin-top:20px; margin-left:20px; font-size:13px; color:#4d4d4d}
#Rodape .Redes{float:right}
#Rodape .RedesDiv{float:left; width:40px; height:40px; margin-left:18px}
#Rodape .RedesDivFacebook{background-image:url('../img/facebook.png')}
#Rodape .RedesDivInstagram{background-image:url('../img/instagram.png')}
#Rodape .RedesDivBlog{background-image:url('../img/blog.png')}


/*MEDIA QUERIES*/
@media(max-width:980px){
#Menu .Menu{width:100%}
#Menu .MenuCorpo{padding-top:20px}
#Conteudo .IndexChaTexto{width:100%}
}

@media(max-width:854px){
#Menu .NomeCorpo{margin-bottom:28px}
#Menu .MenuCorpo{padding:0px}
#Menu .Menu{display:none}
#Menu .MenuMobile{display:block}
#Conteudo .Index{padding:28px}
#Conteudo .IndexImgCorpo{width:100%; height:auto; padding-bottom:56.25%}
#Conteudo .IndexChaCarrinho{display:none}
#Conteudo .ConfirmarPresenca{width:100%}
}

@media(max-width:750px){
#Topo .CegonhaImg{display:none}
}

@media(max-width:600px){
#Topo .CegonhaNuvem{width:180px; height:83px; padding-top:8px; padding-left:10px; background-size:contain; background-repeat:no-repeat}
#Topo .CegonhaNuvemPrevisao{font-size:12.5px}
#Topo .CegonhaNuvemData{font-size:15px}
#Conteudo .IndexBemVindo{font-size:23px}
#Conteudo .IndexTexto{font-size:15px}
#Conteudo .IndexTextoCorpo{margin:32px 0px}
#Conteudo .IndexCha{margin-top:40px; margin-bottom:40px}
#Conteudo .IndexChaTitulo{font-size:23px}
#Conteudo .IndexChaTexto{font-size:15px; margin:16px 0px}
#Conteudo .IndexChaConfirmar{padding:14px; font-size:14px; margin:5px}
#Conteudo .IndexChaConfirmarCorpo{margin-top:16px; margin-left:-5px}
#Conteudo .ConfirmarPresenca{height:auto}
#Conteudo .ConfirmarText{width:100%; padding:11px}
#Conteudo .ConfirmarBotao{width:calc(50% - 6px); margin-top:5px; font-size:15px}
#Conteudo .ConfirmarVoltar{width:50%; margin-top:5px; font-size:15px}
#Conteudo .AindaNaoHaImagem{font-size:16px}
}

@media(max-width:480px){
#Conteudo .Index{padding:20px}
#Menu .MenuMobile{top:20px; right:20px; width:28px; height:28px}
#Menu .CorpoDiv{width:calc(100% - 20px); margin-left:10px}
#Menu .Nome{margin-top:-40px}
#Conteudo .CorpoDiv{width:calc(100% - 20px); margin-left:10px; margin-right:10px}
#Conteudo .NomesSpan{font-size:22px}
#Conteudo .IndexTextoCorpo{margin:24px 0px}
#Conteudo .IndexCha{margin-top:28px}
#Conteudo .IndexTexto{font-size:14px}
#Conteudo .IndexBemVindo{font-size:21px; padding:0px; background-image:none !important}
#Conteudo .IndexBemVindoCorpo{margin-bottom:28px}
#Conteudo .IndexCha{margin-top:32px; margin-bottom:32px; padding:24px}
#Conteudo .IndexChaTitulo{font-size:21px}
#Conteudo .IndexChaTexto{font-size:14px}
#Conteudo .IndexChaMapa{font-size:13.5px}
#Conteudo .IndexChaConfirmar{width:100%; padding:14px; font-size:15px}
#Rodape .CorpoDiv{padding:20px 0px}
#Rodape .Icegonha{width:100%; margin-bottom:10px;}
#Rodape .IcegonhaImg{height:46px}
#Rodape .IcegonhaCopyright{font-size:12px; margin-top:16px; margin-left:16px}
#Rodape .RedesDiv{width:36px; height:36px; margin-left:14px}
}