*{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}
#Interna .CorpoDiv{box-shadow:none !important}

.BgAzul{background-color:#9cc7ef}
.BgRosa{background-color:#f08493}

.ColorAzul{color:#307cc3 !important}
.ColorRosa{color:#f08493 !important}

.BordaAzul{border-color:#9cc7ef}
.BordaRosa{border-color:#f08493}

.BackgroundAzul{background-image:url('../img/background-azul.png')}
.BackgroundRosa{background-image:url('../img/background-rosa.png')}

#Topo{float:left; width:100%; text-align:center}
#Topo .CorpoDiv{padding:16px 0px}
#Topo .BordaBottom{float:left; width:100%; height:6px; background-image:url('../img/borda.png'); background-repeat:repeat}
#Topo .TopoSeparador{float:left; width:calc(25% - 116px)}
#Topo .TopoMenu{float:left; text-align:center}
#Topo .TopoMenuIcone{display:inline-block; width:56px; height:56px; margin-bottom:8px}
#Topo .TopoMenuHome{background-image:url('../img/inicio.png')}
#Topo .TopoMenuFotos{background-image:url('../img/fotos.png')}
#Topo .TopoMenuVideos{background-image:url('../img/videos.png')}
#Topo .TopoMuralRecados{background-image:url('../img/recados.png')}
#Topo .TopoMuralMais{background-image:url('../img/padrinhos.png')}
#Topo .TopoMenuSpan{display:inline-block; font-family:Ubuntu; font-size:16px; position:relative}
#Topo .MenuMobileIcon{float:right; width:32px; height:32px; background-size:contain; display:none}
#Topo .MenuMobileIconAzul{background-image:url('../img/menu-azul.png')}
#Topo .MenuMobileIconRosa{background-image:url('../img/menu-rosa.png')}
#Topo .NomeMobile{display:none; float:left; font-family:Dancing Script; font-size:26px}
#Topo .TopoMenuMaisPaginas:hover .MaisPaginas{display:block}
#Topo .MaisPaginas{display:none; position:absolute; z-index:9; top:40px; left:-34px; width:calc(100% + 56px); padding-top:8px; background-color:#FFF; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);}
#Topo .MaisPaginasSpan{float:left; width:100%; text-align:left; padding-bottom:8px; padding-left:8px; font-family:Ubuntu; font-size:14px; line-height:18px}
#Topo .MaisPaginasSpan:hover{font-weight:600}
#Topo .MaisPaginasBorder{float:left; width:100%; height:0px}
#Topo .MaisPaginasBorder1{float:left; width:50%; height:0px; border-bottom:6px solid #F90}
#Topo .MaisPaginasBorder2{float:left; width:50%; height:0px; border-bottom:6px solid #5c89cb}
#Topo .MaisPaginasSeparador{position:absolute; top:20px; left:0px; width:100%; height:24px}

#Site{float:left; width:100%; text-align:center; padding-bottom:225px; background-color:#dcebfa; background-size:cover; background-image:url('../img/nuvens.png')}
#Site .CegonhaCorpo{float:left; width:100%; text-align:right}
#Site .Cegonha{display:inline-block; margin-top:32px}
#Site .CegonhaImg{float:left; width:168px; height:106px; background-repeat:no-repeat; position:relative; left: 32px; top: -14px;}
#Site .CegonhaNuvem{float:left; width:202px; height:85px; text-align:center; padding-top:10px; padding-left:18px; background-image:url('../img/nuvem.png')}
#Site .CegonhaNuvemTexto{display:inline-block; width:140px; margin-top:14px; text-align:center; font-size:13.5px; font-weight:600}
#Site .CegonhaNuvemPrevisao{display:inline-block; width:140px; text-align:center; font-size:13.5px; font-weight:600}
#Site .CegonhaNuvemPrevisaoAzul{color:#afd456}
#Site .CegonhaNuvemPrevisaoRosa{color:#2db9f3}
#Site .CegonhaNuvemData{display:inline-block; width:140px; text-align:center;  font-size:17.5px; font-weight:600}
#Site .Nome{float:left; width:100%; text-align:center}
#Site .NomeSite{float:left; width:100%; text-align:center; font-family:Dancing Script; font-size:58px; font-weight:700; color:#FFF; text-shadow:1px 1.5px 1px #777}
#Site .NomeNome{float:left; width:100%; text-align:center; font-family:Dancing Script; font-size:90px; font-weight:700; text-shadow:1px 1.5px 1px #a5a5a5}
#Site .NomeNomeAzul{color:#307cc3}
#Site .NomeNomeRosa{color:#ff8499}

#Conteudo{float:left; width:100%; text-align:center}
#Conteudo .CorpoDiv{background-color:#FFF; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.25); padding:72px; margin-top:-64px; text-align:center}
#Conteudo .Avatar{display:inline-block; width:253px; height:253px; margin-top:-200px; position:relative}
#Conteudo .AvatarMoldura{position:absolute; top:0px; left:0px; width:100%; height:100%}
#Conteudo .AvatarMolduraAzul{background-image:url('../img/moldura-azul.png')}
#Conteudo .AvatarMolduraRosa{background-image:url('../img/moldura-rosa.png')}
#Conteudo .AvatarImg{position:absolute; top:20px; left:20px; border-radius:100%; background-size:cover; width:calc(100% - 40px); height:calc(100% - 40px)}
#Conteudo .BemVindoCorpo{float:left; width:100%; margin-top:40px; text-align:center}
#Conteudo .BemVindo{display:inline-block; width:720px}
#Conteudo .BemVindoTitulo{display:inline-block; padding:12px 80px; background-position:left center, right center; font-family:Ubuntu; font-size:28px}
#Conteudo .BemVindoTituloAzul{background-image:url('../img/dados-azul.png'), url('../img/chocalho-azul.png')}
#Conteudo .BemVindoTexto{float:left; width:100%; margin:24px 0px; text-align:center; font-size:14px; line-height:1.9; color:#737373}
#Conteudo .BemVindoImg{float:left; width:100%; padding-bottom:66.6%; margin-top:40px; background-size:cover; box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.25); position:relative}
#Conteudo .Cha{float:left; width:100%; position:relative; background-color:#efefef}
#Conteudo .Cha:nth-child(odd){background-color:#fafafa; border-top:7px solid #FFF}
#Conteudo .ChaBebe{float:left; width:50%; text-align:right}
#Conteudo .ChaBebeCompleto{width:100%; text-align:center}
#Conteudo .ChaBebeDiv{display:inline-block; width:570px; height:390px; padding:40px}
#Conteudo .ChaBebeDivCompleto{width:100%; max-width:1140px}
#Conteudo .ChaBebeTitulo{float:left; width:100%; text-align:right; padding-top:22px}
#Conteudo .ChaBebeTituloCompleto{text-align:center}
#Conteudo .ChaBebeTituloSpan{display:inline-block; position:relative; font-family:Ubuntu; font-size:22px}
#Conteudo .ChaBebeBaloes{position:absolute; top:-82px; left:-64px; width:70px; height:104px}
#Conteudo .ChaBebeBaloesAzul{background-image:url('../img/baloes-azul.png')}
#Conteudo .ChaBebeBaloesRosa{background-image:url('../img/baloes-rosa.png')}
#Conteudo .ChaBebeTexto{float:left; width:100%; text-align:right; margin-top:32px; font-size:14px; line-height:1.9; color:#383838}
#Conteudo .ChaBebeTextoCompleto{text-align:center}
#Conteudo .ChaBebeBotaoCorpo{float:left; width:100%; margin-top:32px; text-align:right}
#Conteudo .ChaBebeBotaoCorpoCompleto{text-align:center}
#Conteudo .ChaBebeBotao{display:inline-block; width:calc(50% - 10px); max-width:270px; margin:0px 3px; border-radius:8px; padding:16px; font-size:16px; font-weight:700; color:#FFF}
#Conteudo .ChaBebeBotaoPresentesAzul{background-color:transparent; border:1px solid #2876bf; color:#2876bf}
#Conteudo .ChaBebeBotaoPresentesRosa{background-color:transparent; border:1px solid #ff8499; color:#ff8499}
#Conteudo .ChaBebeBotaoAzul{background-color:#2876bf}
#Conteudo .ChaBebeBotaoRosa{background-color:#ff8499}
#Conteudo .ChaMapa{float:left; width:50%; text-align:left; background-image:url('../img/mapa.png')}
#Conteudo .ChaMapaDiv{display:inline-block; width:570px; height:390px; position:relative}
#Conteudo .ChaMapaSeparador{position:absolute; top:0px; left:0px; height:100%; border-left:7px solid #FFF}
#Conteudo .ChaMapaTriangulo{position:absolute; top:calc(50% - 20px); left:0px; width:0px; height:0px; border-top:20px solid transparent; border-right:28px solid transparent; border-bottom:20px solid transparent; border-left:28px solid #FFF}
#Conteudo .ChaMapaBotao{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:270px; padding:16px 10px; text-align:center; border-radius:10px; background-color:#FFF; box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2); cursor:pointer}
#Conteudo .ChaMapaBotaoSpan{display:inline-block; padding-left:28px; background-position:left center; font-size:16px; line-height:24px; font-weight:700; color:#383838}
#Conteudo .ChaMapaBotaoSpanAzul{background-image:url('../img/pin-azul.png')}
#Conteudo .ChaMapaBotaoSpanRosa{background-image:url('../img/pin-rosa.png')}
#Conteudo .AindaNaoHaImagem{position:absolute; top:calc(50% - 11px); left:0px; width:100%; text-align:center; font-family:Ubuntu; font-size:18px; color:#999}
#Conteudo .ConfirmarBotao{float:left; width:calc(50% - 10px); margin:0px 3px; border-radius:5px; padding:12px; font-size:16px; font-weight:700; color:#FFF; cursor:pointer; text-align:center}
#Conteudo .IndexTexto{float:left; width:100%}
#Conteudo .IndexTextoCorpo{float:left; width:100%; margin-top:20px}
#Conteudo .ConfirmarPresenca{display:inline-block; width:100%; max-width:640px; 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 .ConfirmarBotaoEvento{float:left; width:calc(25% - 6px); border-radius:5px; padding:12px; margin-right:6px; font-size:16px; font-weight:700; color:#FFF}
#Conteudo .ConfirmarBotaoAzul{background-color:#2876bf}
#Conteudo .ConfirmarVoltar{float:left; width:125px; 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}


#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:Dancing Script; 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:Dancing Script; 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}

#Rodape{float:left; width:100%; margin-top:8px; text-align:center; background-color:#FFF; border-top:1px solid #d5d5d5; position:relative}
#Rodape .BordaBottom{float:left; width:100%; height:6px; margin-top:-6px; background-image:url('../img/borda.png'); background-repeat:repeat}
#Rodape .CorpoDiv{padding:28px 0px}
#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')}

/*MEDIA QUERIES*/
@media(max-width:1160px){
#Conteudo .ChaBebeDiv{width:100%; padding-left:20px}
#Conteudo .ChaMapaDiv{width:100%}
}

@media(max-width:940px){
#Site{padding-bottom:200px}
#Conteudo .BemVindo{width:100%}
#Conteudo .CorpoDiv{padding:48px}
#Conteudo .Avatar{width:220px; height:220px; margin-top:-158px}
#Conteudo .AvatarMoldura{background-size:220px 220px}
#Conteudo .ChaBebeTexto{font-size:13.5px}
#Conteudo .ChaBebeTexto{margin-top:20px}
#Conteudo .ChaBebeBotaoCorpo{margin-top:20px}
#Conteudo .ChaBebeBotao{padding:15px; font-size:15px}
#Conteudo .ChaBebeTituloSpan{font-size:21px}
#Conteudo .ConfirmarPresenca{height:auto}
#Conteudo .ConfirmarText{width:100%}
#Conteudo .ConfirmarBotaoEvento{width:calc(100% - 132px); margin-top:8px; font-size:15px}
#Conteudo .ConfirmarVoltar{margin-top:8px; font-size:15px}
#Site .NomeSite{font-size:52px}
#Site .NomeNome{font-size:80px}
}

@media(max-width:854px){
#Topo .NomeMobile{display:block}
#Topo .TopoMenu{display:none}
#Topo .TopoSeparador{display:none}
#Topo .MenuMobileIcon{display:block}
#Conteudo .ChaBebeDiv{padding:20px; padding-right:28px}
}

@media(max-width:780px){
#Site .CegonhaImg{display:none}
#Site .CegonhaNuvem{width:180px; height:83px; background-size:contain; background-repeat:no-repeat}
#Site .CegonhaNuvemTexto{margin-top:10px; font-size:13px}
#Site .CegonhaNuvemData{font-size:15.5px}
#Site .CegonhaNuvemPrevisao{font-size:12.5px}
#Site .NomeSite{font-size:46px}
#Site .NomeNome{font-size:64px}
#Conteudo .CorpoDiv{padding:28px}
#Conteudo .Avatar{width:200px; height:200px; margin-top:-158px}
#Conteudo .AvatarMoldura{background-size:200px 200px}
#Conteudo .BemVindoCorpo{margin-top:28px}
#Conteudo .BemVindoTitulo{font-size:28px; background-image:none; padding:12px 0px}
#Conteudo .ChaBebe{width:100%}
#Conteudo .ChaBebeTitulo{text-align:left}
#Conteudo .ChaBebeBaloes{display:none}
#Conteudo .ChaBebeDiv{padding-right:20px; height:auto}
#Conteudo .ChaBebeTexto{text-align:left; margin-top:14px}
#Conteudo .ChaBebeBotaoCorpo{text-align:left}
#Conteudo .ChaBebeBotao{padding:14px}
#Conteudo .ChaMapa{width:100%}
#Conteudo .ChaMapaDiv{height:auto; padding-bottom:66.6%}
#Conteudo .ChaMapaSeparador{display:none}
}


@media(max-width:480px){
#Topo .MenuMobileIcon{width:24px; height:24px}
#Topo .NomeMobile{font-size:22px; margin-top:-2px}
#Site{padding-bottom:156px}
#Site .NomeSite{font-size:38px}
#Site .NomeNome{font-size:50px}
#Conteudo .CorpoDiv{width:calc(100% - 20px); margin-left:10px; padding:20px}
#Conteudo .Avatar{width:160px; height:160px; margin-top:-100px}
#Conteudo .AvatarMoldura{background-size:160px 160px}
#Conteudo .AvatarImg{width:calc(100% - 20px); height:calc(100% - 20px); top:10px; left:10px}
#Conteudo .BemVindoCorpo{margin-top:20px}
#Conteudo .BemVindoTitulo{padding:6px 0px; font-size:22px}
#Conteudo .BemVindoTexto{margin:10px 0px; font-size:13px}
#Conteudo .BemVindoImg{margin-top:20px}
#Conteudo .ChaMapaBotao{width:220px; padding:15px 10px}
#Conteudo .ChaMapaBotaoSpan{padding-left:26px; font-size:14px}
#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}
}

@media(max-width:420px){
#Site .NomeSite{font-size:36px}
#Site .NomeNome{font-size:52px}
#Conteudo .ChaBebeBotaoCorpo{margin-top:16px}
#Conteudo .ChaBebeBotao{width:100%; max-width:100%; margin-top:5px}
#Conteudo .ConfirmarRetorno{margin-top:10px; font-size:15px}
}