@font-face {
    font-family: "Electrolux Sans Bold";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local("Electrolux Bold"), url(../fonts/ElectroluxSans-Bold.woff) format("woff")
}

@font-face {
    font-family: "Electrolux Sans SemiBold";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Electrolux SemiBold"), url(../fonts/ElectroluxSans-SemiBold.woff) format("woff")
}

@font-face {
    font-family: "Electrolux Sans Regular";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Electrolux Regular"), url(../fonts/ElectroluxSans-Regular.woff) format("woff")
}

@font-face {
    font-family: "Electrolux Sans Light";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Electrolux Light"), url(../fonts/ElectroluxSans-Light.woff) format("woff")
}

:root {
    --branco: #ffffff;
    --color-p: #333333;
    --preto: #000000;
    --azul: #011e41;
    --azul-footer: #041E50;
    --bg-light: #adb9c3;
    --fonte-principal: "Electrolux Sans Regular", sans-serif
}

body {
    background-color: var(--branco);
    font-family: var(--fonte-principal);
    color: var(--branco)
}

.container-fluid {
    max-width: 1440px
}

div, p, h1, h2, h3, span {
    margin: 0px;
    padding: 0px
}

.container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important
}

.bg-azul {
    background-color: var(--azul)
}

.bg2 {
    background-color: var(--bg-light)
}

.bg3 {
    background-color: #7b8a9c
}

.txt-azul {
    color: var(--azul)
}

.txt-branco {
    color: var(--branco)
}

.ft-regular {
    font-family: "Electrolux Sans Regular" !important
}

.ft-SemiBold {
    font-family: "Electrolux Sans SemiBold" !important
}

.ft-Bold {
    font-family: "Electrolux Sans Bold" !important
}

.section-2 {
    background-color: var(--branco);
    width: 100%;
    padding: 0
}

.section-2 #video {
    padding: 0px;
    width: 100%;
    aspect-ratio: 16/9;
    margin: 0 auto;
    z-index: 999
}

.section-2 #video iframe {
    width: 100%;
    aspect-ratio: 16/9
}

.card2 {
    top: 0;
    left: 0
}

.card1 .section2-mobile-gif {
    padding: 76% 0px 28%
}

.cta_manter_fresco {
    max-width: 250px;
    bottom: 30px;
    left: 0;
    cursor: pointer;
    z-index: 2
}

@media screen and (max-width: 990px) {
    .cta_manter_fresco {
        max-width: 180px;
        bottom: 20px
    }
}

@media screen and (max-width: 830px) {
    .cta_manter_fresco {
        max-width: 140px;
        bottom: 20px
    }
}

@media screen and (max-width: 766px) {
    .cta_manter_fresco {
        max-width: 216px;
        bottom: 0px;
        left: auto;
        right: 0px;
        z-index: 999
    }
}

@media screen and (max-width: 340px) {
    .cta_manter_fresco {
        max-width: 200px;
        bottom: 0px;
        left: auto;
        right: 0px
    }
}

.cta_manter_close {
    max-width: 95px;
    bottom: 30px;
    left: 0px;
    cursor: pointer;
    display: none;
    z-index: 1
}

@media screen and (max-width: 990px) {
    .cta_manter_close {
        max-width: 70px;
        bottom: 20px
    }
}

@media screen and (max-width: 830px) {
    .cta_manter_close {
        max-width: 50px;
        bottom: 20px
    }
}

@media screen and (max-width: 766px) {
    .cta_manter_close {
        max-width: 81px;
        bottom: 0
    }
}

@media screen and (max-width: 340px) {
    .cta_manter_close {
        max-width: 60px;
        bottom: 0
    }
}

.card1.img_none {
    overflow: hidden;
    opacity: 0
}

.img_none {
    overflow: hidden;
    opacity: 0
}

.img_block {
    transition: .3s ease-out;
    opacity: 1;
    overflow: visible
}

.cta1, .cta2, .cta3 {
    position: absolute;
    max-width: 45px;
    cursor: pointer;
    z-index: 999
}

@media screen and (max-width: 766px) {
    .cta1, .cta2, .cta3 {
        max-width: 37px
    }
}

.geladeira-card2 {
    top: 0;
    left: 0
}

.geladeira-card2 img {
    position: absolute;
    z-index: 1
}

.cta1 {
    top: 28%;
    left: 56.5%
}

.cta1.active {
    top: 28%;
    left: 56.5%
}

.cta2 {
    top: 35%;
    left: 50%
}

.cta2.active {
    top: 35%;
    left: 50%
}

.cta3 {
    top: 57%;
    left: 46.6%
}

.cta3.active {
    top: 57%;
    left: 46.6%
}

@media screen and (max-width: 766px) {
    .cta1 {
        top: 37%;
        left: 59%
    }

    .cta1.active {
        top: 2%;
        left: 78%;
        transform: rotate(-44deg) scale(1)
    }

    .cta2 {
        top: 42%;
        left: 45%
    }

    .cta2.active {
        top: 2%;
        left: 78%;
        transform: rotate(-44deg) scale(1)
    }

    .cta3 {
        top: 61%;
        left: 39%
    }

    .cta3.active {
        top: 2%;
        left: 78%;
        transform: rotate(-44deg) scale(1)
    }
}

.footer {
    background-color: var(--azul-footer);
    padding: 70px 50px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start
}

@media screen and (max-width: 1280px) {
    .footer {
        padding: 70px 40px
    }
}

@media screen and (max-width: 766px) {
    .footer {
        padding: 55px 10px 60px
    }
}

.footer img {
    max-width: 300px;
    width: 100%;
    padding: 0 20px
}

@media screen and (max-width: 992px) {
    .footer img {
        max-width: 235px;
        display: block;
        margin: 0 auto;
        max-width: 235px;
        margin-bottom: 30px
    }
}

.footer p {
    font-size: 11px;
    line-height: 14px;
    text-align: left;
    color: var(--branco);
    font-family: "Electrolux Sans light";
    padding-left: 20px
}

@media screen and (max-width: 992px) {
    .footer p {
        font-size: 12px;
        line-height: 14px;
        padding: 10px 18px 0px;
        display: block;
        text-align: left;
    }
}

.gif_30 {
    position: absolute;
    width: 100%;
    max-width: 190px;
    left: 10%;
    top: 69%
}

@media screen and (max-width: 1200px) {
    .gif_30 {
        max-width: 140px;
        left: 10%;
        top: 69%
    }
}

@media screen and (max-width: 880px) {
    .gif_30 {
        max-width: 100px;
        left: 10%;
        top: 69%
    }
}

@media screen and (max-width: 767px) {
    .gif_30 {
        max-width: 144px;
        left: 38%;
        top: 41%
    }
}

@media screen and (max-width: 480px) {
    .gif_30 {
        max-width: 120px;
        left: 37%;
        top: 40%
    }
}

@media screen and (max-width: 412px) {
    .gif_30 {
        max-width: 120px;
        left: 33%;
        top: 39%
    }
}

@media screen and (max-width: 383px) {
    .gif_30 {
        max-width: 100px;
        left: 35%;
        top: 40%
    }
}

@media screen and (max-width: 320px) {
    .gif_30 {
        max-width: 100px;
        left: 33%;
        top: 39%
    }
}

@media screen and (max-width: 766px) {
    .has-active-button .cta1:not(.active), .has-active-button .cta2:not(.active), .has-active-button .cta3:not(.active) {
        display: none
    }
}