*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    -moz-tab-size        : 4;
    tab-size             : 4;
    --vermelho        : #B8292F; 
}

html {
    line-height             : 1.25;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: #4D4D4F;
}

* {
    font-family: Mangerica, sans-serif;
    font-weight: 900;
    font-style : italic;
}

.logo {
    display: flex;
    height: 112px;
    text-align: center;
    align-items: center;
}
.logo > img {
    margin-left: auto;
    margin-right: auto;
}


.sessao1 {
    position       : relative;
    width          : 100vw;
    height : 48.75vw;
    background     : no-repeat url(../img/bg-sessao1.jpg);
    background-size: cover;
    color          : #fff;
}

.sessao1__brilho1 {
    position       : absolute;
    display: block;
    margin-top: 37.3vw;
    margin-left: 25.3vw;
    width: 40.78vw;
    height: 2.65vw;
    background     : no-repeat url(../img/brilho1.svg) top right;
    background-size: contain;
    opacity        : 0;
    animation: 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) .3s infinite alternate brilhoTotal;
}

#sessao3__hand {
    transform-origin: 70% 70%;
    transform: rotate(-14.0deg);
    animation: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) .3s infinite alternate anime__hand;
}

#sessao3__brilho1, #sessao3__brilho2 {
    position: absolute;
    opacity: 0;
}

#sessao3__brilho1 {
    top: 0;
    left: 0;
    animation: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) .8s infinite alternate brilho;
}
#sessao3__brilho2 {
    top: 10px;
    left: 10px;
    animation: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) .9s infinite alternate brilho;
}

@keyframes anime__hand {
    from { transform: rotate(-14.0deg) }
    to { transform: rotate( 0.0deg) }
}

@keyframes brilhoTotal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes brilho {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.sessao1__box {
    width: 78vw;
    margin-left: auto;
    margin-right: auto;
    height : 48.75vw;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1.22;
}

.sessao1__caption {
    font-size    : 32px;
    margin: 0;
    margin-bottom: 20px;
    line-height: 1;
}

.sessao1__img {
    width        : auto;
    max-width    : 100%;
    height       : auto;
    margin-bottom: 20px;
}

/* endof sessao1 */

.sessao2 {
    display        : flex;
    align-items    : center;
    align-content  : center;
    width          : 100vw;
    height         : 30vw;
    background:  linear-gradient(0deg, #EFECEA, #3A3633);
}


.sessao2__left {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 64vw;
    height         : 30vw;
    background     : no-repeat url(../img/bg-sessao2.jpg);
    background-size: cover;
}

.sessao2__center {
    width: 98px;
}

.sessao2__button {
    display      : block;
    padding      : 0;
    margin       : 0;
    border       : 2px solid #fff;
    width        : 98px;
    height       : 98px;
    border-radius: 100%;
    background   : none;
    text-align   : center;
    outline      : 0;
    transition   : .2s background ease-in-out;
}

.sessao2__button:focus,
.sessao2__button:hover {
    background: rgba(0, 0, 0, 0.3);
}

.sessao2__button:active {
    background: rgba(0, 0, 0, 0.6);
}

.sessao2__right {
    color: #fff;
    background-color: var(--vermelho);
    font-size: 22px;
    line-height: 26px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    display: flex;
    align-items: center;
    width: 36vw;
    height: 30vw;
    justify-content: center;
}

#video-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index                : 999980;
    backdrop-filter        : blur(10px) brightness(0.7);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter   : blur(10px);
    opacity                : 0.01;
    transition             : opacity .6s ease-in-out;
}
.video {
    display                : none;
    z-index                : 999999;
    position               : absolute;
    top                    : 0;
    left                   : 0;
    justify-content: center;
    width                  : 100%;
    height                 : 100%;
}

.video.active, #video-backdrop.active {
    display: flex;
}

.video>div {
    position    : absolute;
    margin-left : auto;
    margin-right: auto;
}

.video>div>iframe {
    width       : 80vw;
    height      : 45vw;
    max-width   : 100%;
    max-height  : 100%;
    margin-left : auto;
    margin-right: auto;
}

.video__fechar {
    right          : -40px;
    top            : -40px;
    position       : absolute;
    width          : 40px;
    height         : 40px;
    background     : #515150 no-repeat url(../img/icon-fechar.svg);
    background-size: contain;
    border-radius  : 20px;
}

.video__fechar:hover,
.video__fechar:focus {
    background-color: #c72026;
}

/* endof sessao2 */

.sessao3 {
    position       : relative;
    display        : flex;
    align-items    : flex-end;
    width          : 100vw;
    height         : 46vw;
    background     : #EFECEA;
    margin-bottom: 26vw;
}
.sessao3__icones {
    display: flex;
    align-items: center;
    height: 60px;
    margin-bottom: 20px;
}
 
.sessao3::after {
    content: "";
    background : no-repeat url(../img/bg-sessao3.png);
    background-size: auto 100%;
    width : 100vw;
    height : 72vw;
    top: 0;
    left: 0;
    position: absolute;
}

.sessao3__rows {
    position: absolute;
    top: 9.45vw;
    left: 36.9vw;
    width: 51.42vw;
    display: flex;
    z-index: 1;
}

.sessao3__luz {
    position: absolute;
    z-index: 19;
    display: block;
    width: 28.67vw;
    height: 9.22vw;
        top: 50vw;
    left: 31vw;
    background: no-repeat url(../img/brilho2.png) top center;
    background-size: contain;
    opacity        : 0;
    animation      : 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite alternate luz;
}

.sessao3__star1 {
    opacity: 0;
    animation      : 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) .3s infinite alternate luz;
}

.sessao3__star2 {
    opacity: 0;
    animation      : 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) .6s infinite alternate luz;
}

.sessao3__timer {
    transform-origin: 50% 50%;
    transform       : rotate(-14.0deg);
    animation       : 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite alternate anime__despertar;
}

@keyframes anime__despertar {
    0% {
        transform: rotate(-20.0deg)
    }

    15% {
        transform: rotate(20.0deg)
    }

    30% {
        transform: rotate(-20.0deg)
    }

    45% {
        transform: rotate(20.0deg)
    }

    60% {
        transform: rotate(-20.0deg)
    }

    75% {
        transform: rotate(0.0deg)
    }

    100% {
        transform: rotate(0.0deg)
    }
}

.sessao3__dedo {
 opacity        : 0;
    animation      : 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite alternate luz;   
}

@keyframes luz {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.sessao3__text {
    color     : #4D4D4F;
    text-align: left;
    padding-right: 6.58vw;
}
.sessao3__text:last-child{padding-right: 0;}

.sessao3__headline {
    font-size    : 22px;
    line-height: 1;
    margin-top   : 0;
    margin-bottom: 10px;
    min-height: 66px;
}

.sessao3__subheadline, .sessao4__body {
    font-size: 18px;
    line-height: 26px;
}

/* endof sessao3 */

.sessao4 {
    position       : relative;
}

.sessao4__subheadline {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 50px;
}

.sessao4__title {
    color: var(--vermelho);
    font-size: 56px;
    line-height: 1;
    margin: 0;
    text-align: center;
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
    height: 30vw;
}

.sessao4__box {
    display         : flex;
    width           : 100vw;
    height          : 60vw;
    background-color: var(--vermelho);
}

.sessao4__text {
    width: 29vw;
}


.sessao4__headline {
    font-size: 36px;
    margin-bottom: 0;
}

.sessao4__left {
    width: 50vw;
    height          : 60vw;
    color: #fff;
    display     : flex;
align-items : center;
justify-content: center;
}

.sessao4__right {
    width: 50vw;
    height          : 60vw;
    background : no-repeat url(../img/bg-sessao4.jpg) top center;
    background-size: cover;
}

/* endof sessao4 */

.sessao5 {
    padding-top: 13vw;
    padding-bottom: 14vw;
}


.sessao5__title {
    font-size: 56px;
    color: var(--vermelho);
    line-height: 33px;
    margin: 0;
    text-align: center;
}
.sessao5__subtitle {
    text-align: center;
    font-size: 24px;
    line-height: 34px;
    padding-bottom: 11vw;
}

.sessao5__box {
    display: flex;
    background     : #ECECEC no-repeat url(../img/bg-sessao5.png) top center;
background-size: contain;
height: 49vw;
position: relative;
}

.sessao5__text {
    color          : var(--vermelho);
    width       : 45vw;
    margin-right   : auto;
    padding-left   : 5vw;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    background-color: #fff;
    text-align: center;
    padding: 40px 80px;
    border-radius: 16px;
    position: absolute;
    bottom: -94px;
    left: 50vw;
    margin-left: -22.5vw;
}

.sessao5__headline {
    font-size    : 26px;
    line-height: 31px;
    margin: 0;
    margin-bottom: 26px;
    /* margin-bottom: 10px; */
}

.sessao5__subheadline {
    font-size: 18px;
line-height: 26px;
margin: 0;
}

.sessao5__luz {
    left      : 16vw;
    top       : 17.5vw;
    position  : absolute;
    display   : block;
    width     : 67.81vw;
    height    : 13.44vw;
    background: no-repeat url(../img/brilho3.png) top center;
    background-size: contain;
    opacity : 0;
animation : 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite alternate luz;
}

/* .sessao5__fumaca {
        position       : absolute;
    bottom         : 0;
    display        : block;
    width          : 92vw;
    height         : 31vw;
    background     : no-repeat url(../img/fumaca.gif) bottom center;
    background-size: contain;
    left           : 0;
} */

/* endof sessao5 */

.sessao6 {
    width: 77.42vw;
    background-color: #FCFBFB;
    border-radius: 16px;
    margin: auto;
    margin-bottom: 136px;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 4vw;
}

.sessao6_img {
    display: flex;
    height: 46px;
    align-items: center;
    margin-bottom: 10px;
}
.sessao6_rows .text_thin {
    color: #000;
    
}

.sessao6__headline {
    font-size: 36px;
    margin   : 0;
    padding-top: 48px;
    text-align: center;
}
.sessao6__subheadline {
    text-align: center;font-size: 16px;
}

.sessao6_rows>div>ul:first-child {
    margin-left: 0;
}

.sessao6_rows>div>ul:last-child {
    margin-right: 0;
}

.sessao6__item__title {
    font-size: 24px;
    color: var(--vermelho);
}

ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 976px) {
    .sessao6_rows {
        display: flex;
        justify-content: space-around;
    }
    .sessao6_rows ul{
        min-height: 118px;
    }
    .title-caracteristicas {
        height: 60px;
        line-height: 60px;
    }
}

li img {
    object-fit: contain;
}

li {
    display: block;
    /* flex-grow: 1; */
    padding-right: 40px;
}

li>p {
    font-size: 17px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 0;
}

/* endof sessao6 */

footer {
    background-color: #4D4D4F;
    color: #fff;
}

footer > div {
    display    : flex;
    align-items: center;
    height : 384px;
    width: 67.81vw;
    margin: auto;
}

.footer__left {
    font-size: 32px;
    line-height: 1;
    width: 50%;
}

.footer__left> span {
font-size: 18px;
line-height: 32px;
}

.footer__right {
    align-self: stretch;
    width: 42vw;
    background: no-repeat url(../img/bg-footer.png);
    margin-top: -3.4vw;
    background-size: contain;
}

@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min--moz-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    .sessao1 {
        background-image: url(../img/bg-sessao1@2x.jpg);
    }
    .sessao2__left {
        background-image: url(../img/bg-sessao2@2x.jpg);
    }
    .sessao3::after {
        background-image: url(../img/bg-sessao3@2x.png);
    }
    .sessao4__right {
        background-image: url(../img/bg-sessao4@2x.jpg);
    }
    .sessao5__box {
        background-image: url(../img/bg-sessao5@2x.png);
    }
    .footer__right {
        background-image: url(../img/bg-footer@2x.png);
    }
}
