/* Abertura animada (2,8 s): icone aparece, telhado encaixa, as 4 pessoas entram, a casa acende, nome e slogan.
   Usada ao abrir o app (1x por sessao) e no painel do iPad a cada 5 fotos. So translate/opacity: roda no iOS 10. */
#abertura{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background:#000;color:#fff;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;opacity:1;-webkit-transition:opacity .35s;transition:opacity .35s;cursor:pointer}
#abertura.sai{opacity:0}
.ab-icone{width:168px;height:168px;-webkit-animation:ab-pop .55s cubic-bezier(.2,1.4,.4,1) both;animation:ab-pop .55s cubic-bezier(.2,1.4,.4,1) both}
.ab-icone svg{width:100%;height:100%;display:block;overflow:visible}
.ab-telhado{-webkit-animation:ab-telhado .5s .3s cubic-bezier(.3,1.5,.5,1) both;animation:ab-telhado .5s .3s cubic-bezier(.3,1.5,.5,1) both}
.ab-corpo{-webkit-animation:ab-aparece .4s .55s ease-out both;animation:ab-aparece .4s .55s ease-out both}
.ab-p{-webkit-animation:ab-entra .62s cubic-bezier(.3,.9,.4,1) both;animation:ab-entra .62s cubic-bezier(.3,.9,.4,1) both}
.ab-p .ab-passo{-webkit-animation:ab-passo .155s ease-in-out 4 alternate both;animation:ab-passo .155s ease-in-out 4 alternate both}
.ab-p1,.ab-p1 .ab-passo{-webkit-animation-delay:.8s;animation-delay:.8s}
.ab-p2,.ab-p2 .ab-passo{-webkit-animation-delay:.98s;animation-delay:.98s}
.ab-p3,.ab-p3 .ab-passo{-webkit-animation-delay:1.16s;animation-delay:1.16s}
.ab-p4,.ab-p4 .ab-passo{-webkit-animation-delay:1.32s;animation-delay:1.32s}
.ab-brilho{opacity:0;-webkit-animation:ab-brilho .9s 1.85s ease-out both;animation:ab-brilho .9s 1.85s ease-out both}
.ab-nome{margin-top:26px;font-size:34px;font-weight:800;letter-spacing:-.5px;-webkit-animation:ab-sobe .5s 2.05s ease-out both;animation:ab-sobe .5s 2.05s ease-out both}
.ab-slogan{margin-top:6px;font-size:17px;color:rgba(255,255,255,.72);-webkit-animation:ab-sobe .5s 2.3s ease-out both;animation:ab-sobe .5s 2.3s ease-out both}
@-webkit-keyframes ab-pop{0%{-webkit-transform:scale(.2);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}
@keyframes ab-pop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
@-webkit-keyframes ab-telhado{0%{-webkit-transform:translateY(-90px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}
@keyframes ab-telhado{0%{transform:translateY(-90px);opacity:0}100%{transform:translateY(0);opacity:1}}
@-webkit-keyframes ab-aparece{from{opacity:0}to{opacity:.16}}
@keyframes ab-aparece{from{opacity:0}to{opacity:.16}}
@-webkit-keyframes ab-entra{0%{-webkit-transform:translateX(250px);opacity:0}15%{opacity:1}100%{-webkit-transform:translateX(0);opacity:1}}
@keyframes ab-entra{0%{transform:translateX(250px);opacity:0}15%{opacity:1}100%{transform:translateX(0);opacity:1}}
@-webkit-keyframes ab-passo{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(-9px)}}
@keyframes ab-passo{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@-webkit-keyframes ab-brilho{0%{opacity:0}35%{opacity:.55}100%{opacity:0}}
@keyframes ab-brilho{0%{opacity:0}35%{opacity:.55}100%{opacity:0}}
@-webkit-keyframes ab-sobe{from{-webkit-transform:translateY(10px);opacity:0}to{-webkit-transform:translateY(0);opacity:1}}
@keyframes ab-sobe{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){#abertura *{-webkit-animation-duration:.01s!important;animation-duration:.01s!important;-webkit-animation-delay:0s!important;animation-delay:0s!important}}