*{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}
.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}
.CorpoDivTemplate02{width:calc(100% - 48px) !important; max-width:1132px !important; margin-left:24px !important; margin-right:24px !important; border-radius:10px; z-index:1}

.BodyBgLaranja{background:linear-gradient(to top, #FFF, #f6bc84)}
.BodyBgAzul{background:linear-gradient(to top, #FFF, #71bdec)}

.BgLaranja{background-color:#ffa800}
.BgAzul{background-color:#71bdec}

.ColorLaranja{color:#ffa800 !important}
.ColorAzul{color:#71bdec !important}

.BordaLaranja{border-color:#ffa800}
.BordaAzul{border-color:#71bdec}

.Conteudo{position:absolute; z-index:-1; top:0px; left:-4px; width:calc(100% + 8px); height:calc(100% + 4px); border-radius:0px 0px 24px 24px}
.ConteudoLaranja{background:linear-gradient(to bottom, #FFF, #f6bc84)}
.ConteudoAzul{background:linear-gradient(to bottom, #FFF, #71bdec)}
.ConteudoCorpo{position:absolute; top:0px; left:4px; width:calc(100% - 8px); height:calc(100% - 4px); background-color:#FFF; border-radius:0px 0px 20px 20px}

#CorpoBg{float:left; width:100%}

#Topo{float:left; width:100%; text-align:center}
#Topo .CorpoDiv{text-align:right}
#Topo .Cegonha{display:inline-block; margin-top:24px; margin-right:96px}
#Topo .CegonhaImg{float:left; width:168px; height:106px; background-repeat:no-repeat; position:relative; left:28px}
#Topo .CegonhaImgAzul{background-image:url('../img/nascimento-azul.png')}
#Topo .CegonhaImgLaranja{background-image:url('../img/nascimento-laranja.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 .CegonhaNuvemTexto{display:inline-block; width:140px; margin-top:4px; text-align:center; font-size:13.5px; font-weight:600; color:#444}
#Topo .CegonhaDias{float:left; width:100%; text-align:center; margin-top:4px}
#Topo .CegonhaDiasLaranja{font-size:15px; color:#6bbded}
#Topo .CegonhaDiasAzul{font-size:15px; color:#ffa800}

#Banner{float:left; width:100%; margin-top:20px; text-align:center}
#Banner .CorpoDiv{position:relative; height:310px; border:4px solid #FFF; border-radius:24px 24px 0px 0px; background-size:cover}
#Banner .AvatarCorpo{position:absolute; bottom:16px; width:100%; text-align:center}
#Banner .Avatar{display:inline-block}
#Banner .AvatarImg{display:inline-block; width:140px; height:140px; border:5px solid #FFF; border-radius:100%; background-size:cover}
#Banner .AvatarNome{display:inline-block; margin-top:6px; font-size:30px; font-weight:700; color:#FFF}
#Banner .Girafa{position:absolute; top:-68px; left:-44px; width:81px; height:159px; background-image:url('../img/girafa.png')}
#Banner .Tucano{position:absolute; top:-65px; right:-16px; width:71px; height:86px; background-image:url('../img/tucano.png')}

#Conteudo{float:left; width:100%; text-align:center}
#Conteudo .CorpoDiv{background-color:#FFF; padding:48px; position:relative}

#Menu{float:left; width:100%; text-align:center}
#Menu .CorpoDiv{background-color:#FFF; padding:48px; padding-bottom:0px; border-left:4px solid #FFF; border-right:4px solid #FFF; text-align:center}
#Menu .MenuCorpo{display:inline-block; width:800px}
#Menu .MenuSpan{float:left; font-family:Patrick Hand; font-size:22px; color:#252525; position:relative; z-index:2}
#Menu .MenuSpanLaranja:hover{color:#ffa800}
#Menu .MenuSpanAzul:hover{color:#71bdec}
#Menu .MenuSeparador{float:left; width:calc(25% - 112px)}
#Menu .MenuMobile{float:right; width:32px; height:32px; background-size:contain; display:none}
#Menu .MenuMobileLaranja{background-image:url('../img/menu-laranja.png')}
#Menu .MenuMobileAzul{background-image:url('../img/menu-azul.png')}

#MenuMobile{float:left; position:absolute; top:20px; right:0px; z-index:2}
#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%; overflow-y:scroll; background:#F5F5F5; transition:0.5s}
#MenuMobile .UlTopo{float:left; width:100%; color:#FFF; padding:12px 12px}
#MenuMobile .Nome{float:left; font-family:Patrick Hand; 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:Patrick Hand; font-size:17px; letter-spacing:0.33px; 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 .LiAdicionar{background-color:#656565; color:#FAFAFA}
#MenuMobile .LiAdicionar:hover{background-color:#656565; color:#FAFAFA}
.mobileClick{float:left; width:calc(100% - 270px); height:100%; position:relative}

#Lateral{float:left; width:220px; height:451px; margin-right:90px; padding-right:80px; background-image:url('../img/girafa-menu.png'); background-position:right top}
#Lateral .LateralSpan{float:left; width:100%; text-align:right; margin-bottom:17px; font-size:22px; font-family:Patrick Hand; color:#252525; position:relative}
#Lateral .LateralSpanLaranja:hover{color:#ffa800}
#Lateral .LateralSpanAzul:hover{color:#71bdec}
#Lateral .LateralSeparador{float:left; width:calc(25% - 119px); display:none}
#Lateral .MenuMobile{float:right; width:32px; height:32px; background-size:contain; display:none}
#Lateral .MenuMobileLaranja{background-image:url('../img/menu-laranja.png')}
#Lateral .MenuMobileAzul{background-image:url('../img/menu-azul.png')}
.SpanMaisPaginas:hover .MaisPaginas{display:block}
.MaisPaginas{position:absolute; top:48px; left:0px; z-index:1; padding:8px; min-width:140px; background-color:#FFF; border-radius:16px; display:none}
.MaisPaginasLaranja{border:3px solid #ffa800}
.MaisPaginasAzul{border:3px solid #71bdec}
.MaisPaginasSeta{position:absolute; top:-16px; left:0px; width:100%; height:16px; background-size:contain}
.MaisPaginasSetaLaranja{background-image:url('../img/triangulo-laranja.png')}
.MaisPaginasSetaAzul{background-image:url('../img/triangulo-azul.png')}
.MaisPaginasSeparador{float:left; width:100%; height:24px}
.SpanMais{float:left; width:100%; text-align:right; padding:4px 0px; font-size:18px; font-family:Patrick Hand; color:#252525; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.SpanMaisLaranja:hover{color:#ffa800}
.SpanMaisAzul:hover{color:#75c8ea}

#Index{float:left; width:calc(100% - 310px)}
#Index .IndexFoto{float:left; width:100%; padding-bottom:47.5%; background-size:cover; position:relative}
#Index .IndexTexto{float:left; width:100%; margin-top:20px}
#Index .IndexTextoTitulo{float:left; width:100%; font-family:Patrick Hand; font-size:28px; line-height:3.4}
#Index .IndexTextoTexto{float:left; width:100%; font-size:14px; line-height:2; color:#212121}
#Index .IndexChaCorpo{float:left; width:100%}
#Index .IndexCha{float:left; width:100%; text-align:center; border-radius:16px; padding:32px; margin-top:80px; position:relative}
#Index .IndexChaLaranja{background-color:#f9faf2; color:#ffa800}
#Index .IndexChaAzul{background-color:#f2f8fa; color:#75c8ea}
#Index .IndexChaConteudo{position:absolute; top:-4px; left:-4px; z-index:-1; border-radius:16px; width:calc(100% + 8px); height:calc(100% + 8px); background-repeat:repeat}
#Index .IndexChaConteudoAzul{background-image:url('../img/Animal-print-pattern-b.png')}
#Index .IndexChaConteudoLaranja{background-image:url('../img/Animal-print-pattern-y.png')}
#Index .IndexChaTitulo{float:left; width:100%; text-align:center; font-family:Patrick Hand; font-size:26px}
#Index .IndexChaTexto{display:inline-block; width:100%; margin:28px 0px; font-size:14px; line-height:1.8; color:#212121}
#Index .IndexChaMapaCorpo{float:left; width:100%}
#Index .IndexChaMapa{display:inline-block; padding-left:28px; background-position:left center; font-size:14px; line-height:24px; font-weight:700; color:#4c4c4c}
#Index .IndexChaMapaLaranja{background-image:url('../img/pin-laranja.png')}
#Index .IndexChaMapaAzul{background-image:url('../img/pin-azul.png')}
#Index .IndexChaConfirmarCorpo{float:left; width:100%; margin-top:40px}
#Index .IndexChaConfirmar{display:inline-block; width:270px; border-radius:7px; padding:16px; font-size:18px; font-weight:700; color:#FFF; cursor:pointer}
#Index .IndexChaPresentesAzul{border:1px solid #75c8ea; color:#75c8ea}
#Index .IndexChaPresentesLaranja{border:1px solid #ffa800; color:#ffa800}
#Index .ConfirmarPresenca{display:inline-block; width:calc(100% - 100px); margin-top:40px; height:55px}
#Index .ConfirmarText{float:left; width:calc(75% - 136px); border:1px solid #B5B5B5; border-radius:5px; padding:12px; margin-right:8px; font-size:14px; color:#222}
#Index .ConfirmarBotaoPresenca{float:left; width:calc(25% - 6px); border-radius:5px; padding:12px; margin-right:6px; font-size:16px; font-weight:700; color:#FFF}
#Index .ConfirmarPresencaBotaoSemMapa{margin-top:0px}
#Index .ConfirmarVoltar{float:left; width:128px; background-color:#A5A5A5; border-radius:5px; padding:12px; font-size:16px; font-weight:700; color:#FFF}
#Index .ConfirmarRetorno{float:left; width:100%; margin-top:4px; font-size:16px; font-weight:700; color:#E62C2C}
#Index .IndexLagarto{position:absolute; top:-40px; left:-28px; width:77px; height:80px; background-image:url('../img/lagarto.png')}
#Index .AindaNaoHaImagem{position:absolute; top:calc(50% - 11px); left:0px; width:100%; text-align:center; font-family:Patrick Hand; font-size:18px; color:#999}
#Index .ConfirmarBotao{float:left; width:calc(25% - 6px); border-radius:5px; padding:12px; margin-right:6px; font-size:16px; font-weight:700; color:#FFF; text-align:center}

#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; border-radius:100%}
#Rodape .RedesDivFacebook{background-image:url('../img/facebook.png')}
#Rodape .RedesDivInstagram{background-image:url('../img/instagram.png')}
#Rodape .RedesDivBlog{background-image:url('../img/blog.png')}

#Animais{float:left; width:100%}
#Animais .Animais{float:left; width:100%; height:324px; background-color:#FFF; background-image:url('../img/rodape_bg.png'); background-position:top center; background-repeat:repeat}


/*MEDIA QUERIES*/
@media(max-width:1090px){
#Index .ConfirmarPresenca{width:100%}
#Index .IndexChaConfirmar{width:200px; font-size:16px}
}

@media(max-width:960px){
#Menu .MenuCorpo{width:100%}
#Lateral{width:100%; height:auto; margin-right:0px; margin-bottom:28px; padding:0px; background-image:none}
#Lateral .LateralSpan{width:auto}
#Lateral .LateralSeparador{display:block}
#Index{width:100%}
.MaisPaginas{left:-28px; width:calc(100% + 56px)}
}

@media(max-width:854px){
#Menu .CorpoDiv{padding:20px; padding-bottom:0px}
#Menu .MenuCorpo{display:none}
#Menu .MenuMobile{display:block}
#Lateral .MenuMobile{display:block}
#Lateral .LateralSpan{display:none}
#Lateral .LateralSeparador{display:none}
#Conteudo .CorpoDiv{padding:20px}
#Banner .CorpoDiv{height:280px}
#Banner .AvatarNome{font-size:27px}
#Banner .AvatarImg{width:128px; height:128px}
#Banner .CorpoDiv{height:255px}
}

@media(max-width:780px){
#Topo .Cegonha{margin-right:20px}
#Topo .CegonhaImg{display:none}
#Topo .CegonhaNuvem{width:180px; height:83px; background-size:contain; background-repeat:no-repeat}
#Topo .CegonhaNuvemTexto{margin-top:10px; font-size:13px}
#Banner{margin-top:40px}
#Index .IndexTextoTitulo{margin-top:16px; margin-bottom:10px; line-height:1.4}
#Index .IndexCha{margin-top:64px}
#Index .IndexChaTexto{font-size:13px; margin:16px 0px}
#Conteudo .IndexChaConfirmarCorpo{margin-top:20px}
#Animais{display:none}
#Animais .Animais{background-image:none}
#Index .ConfirmarBotao{width:calc(60% - 6px)}
}

@media(max-width:600px){
#Index .IndexCha{padding:24px}
#Index .IndexChaConfirmar{width:80%; margin:3px 0px}
#Index .IndexCha{margin-top:40px; margin-bottom:40px}
#Index .IndexChaTitulo{font-size:23px}
#Index .IndexChaTexto{font-size:15px; margin:16px 0px}
#Index .IndexChaConfirmar{padding:14px; font-size:14px; margin:5px}
#Index .IndexChaConfirmarCorpo{margin-top:16px; margin-left:-5px}
#Index .ConfirmarPresenca{height:auto}
#Index .ConfirmarText{width:100%; padding:11px}
#Index .ConfirmarBotaoPresenca{width:calc(50% - 6px); margin-top:5px; font-size:15px}
#Index .ConfirmarVoltar{width:50%; margin-top:5px; font-size:15px}
}

@media(max-width:480px){
#Topo .Cegonha{margin-top:8px}
#Menu .CorpoDiv{width:calc(100% - 20px); margin-left:10px}
#Index .IndexChaConfirmar{width:100%}
#Index .IndexTextoTitulo{margin-top:8px; font-size:26px}
#Index .IndexTextoTexto{font-size:13.5px}
#Lateral{margin-bottom:24px}
#Lateral .MenuMobile{width:24px; height:24px}
#Menu .MenuMobile{width:24px; height:24px}
#Banner .CorpoDiv{width:calc(100% - 20px); margin-left:10px; height:225px}
#Banner .AvatarImg{width:108px; height:108px}
#Banner .AvatarNome{font-size:22px}
.CorpoDivTemplate02{width:calc(100% - 28px) !important; margin-left:14px !important}
#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}
}