* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.1;
}

body {
    font-family: "Saira", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #474747;
    max-width: 100vw;
    overflow-x: hidden;
}

body h1,
body h2,
body h3,
body h4 {
    line-height: 1;
    font-family: "Saira", sans-serif;
    font-weight: 700;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}

.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap:20px;
}

.center {
    justify-content: center;
}

.between {
    justify-content: space-between;
}

footer {
    background-color: #1b181b;
}

#footer-social {
    background: #201e20;
    height: 150px;
}

#footer-social .container {
    position: relative;
}

#footer-social ul {
    width: 250px;
    margin: 0 auto;
}

#footer-social li {
    line-height: 150px;
    float: left;
    width: 20%;
    text-align: center;
}

#logo-kabum-rodape {
    position: absolute;
    top: 45px;
    right: 0;
}

#logo-black-rodape {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}

#footer-social li span {
    padding: 8px;
    background-color: #201e20;
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s;
}

#footer-social li span:hover {
    background-color: #e15112;
    color: #fff;

}

footer p {
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0;
}

nav li a {
    color: #fff;
    transition: all 0.3s;
    font-weight: 600;
    font-family: "Saira", sans-serif;
    margin-left: 20px;
    font-size: 1rem;
    padding: 10px 15px;
}

nav li a.menuapp{
    background: #e15112;
    clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
}

nav li:hover a,
nav li a.ativo {
    color: #e15112;
}

nav li:hover a.menuapp {
    color: #e15112;
    background: #fff;
}

.uk-navbar-nav>li>a {
    color: #fff;
}

.uk-navbar-nav>li>a:hover {
    color: #fff;
}

#mobile-navbar img {
    margin-bottom: 40px;
}

.uk-nav-default {
    font-size: 20px;
}

.between {
    justify-content: space-between;
}

header {
    background: #000;
    padding: 30px 0;
    border-bottom: #e15112 solid 2px;
}

main{
    background: url(https://www.kabum.com.br/hotsite/blackfriday/img/bg-black-friday-topo.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
}

main.lp{
    padding: 50px 0 0;
}

#topoblack {
    display: grid;
    grid-template-columns: repeat(4, 23%);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 2%;
    grid-row-gap: 50px;
    margin-bottom: 50px;
    }
    
    #logoblack { grid-area: 1 / 1 / 2 / 3; }
    #areasave { grid-area: 1 / 3 / 2 / 5; display: flex; align-items: center; justify-content: center;}
    .boxh1 { grid-area: 2 / 1 / 3 / 2; }
    .quad1 { grid-area: 2 / 2 / 3 / 3; }
    .quad2 { grid-area: 2 / 3 / 3 / 4; }
    .quad3 { grid-area: 2 / 4 / 3 / 5; }


    #logoblack img{
        margin-bottom: 40px;
    }

.savethedate{
    width: 403px;
    height: 260px;
    background: url(../img/save-the-date.webp) center top no-repeat;
    position: relative;
    text-align: center;
    margin: 20px;
}

.savethedate .titulo{ 
    color: #fff;
    font-weight: 600;
    padding-top: 35px;
    margin-bottom: 20px;
}

.savethedate .data{
    color: #e15112;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.savethedate .hora{
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
}

.boxh1{
    text-align: left;
}

h1{
    font-weight: 900;
    text-transform: uppercase;
    color: #e15112;
    font-size: 2rem;
}

h1::after{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: rgb(225,81,18);
    background: radial-gradient(circle, rgba(225,81,18,1) 80%, rgba(225,81,18,0) 100%);
    margin: 20px 0;
}

.boxh1 h2{
    color: #fff;
    font-size: 1.4rem;
}

.quadriculado{
    background: url(../img/bg-quadriculado.webp) left top repeat;
    padding: 30px;
    color: #fff;
    border: #e15112 solid 2px;
    border-radius: 20px;
    text-align: left;
}

.quadriculado h3{
    color: #e15112;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.quadriculado p{
    color: #fff;
    line-height: 1.4;
}

.quadriculado p a{
    color: #e15112;
    font-weight: 900;
}

.stretch{
    align-items: stretch;
}

.quadriculado h3::before{
    content: url(../img/setas-sem-contorno.webp);
    display: block;
    margin-bottom: 15px;
}

#listaDinamica li{
    align-items: stretch;
    margin: 20px 0;
}



.box-produto {
    margin: 20px;
    background: #fff;
    text-align: center;
    position: relative;
    transition: all 0.3s;
    height: 100%;
    border-radius: 20px;
}

.box-produto img {
    padding: 20px 20px 0;
}

.box-produto p {
    padding: 0 40px;
    color: #777676;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.box-produto p.titulooferta { margin-bottom: 10px; }
.box-produto p.precopadrao { text-decoration: line-through; margin-bottom: 0; font-size: 0.8rem }
.box-produto p.precooferta { color: #cf401a; font-size: 1.5rem; font-weight: 700; margin-bottom: 0; }
.box-produto p.pix { margin-bottom: 90px; }

.box-produto p.cta{
    display: inline-block;
    padding: 20px;
    background: #e15112;
    color: #fff;
    transform: scale(1) translateX(-50%);
    position: absolute;
     bottom: 30px;
     margin-top: 40px;
     left: 50%;
     transition: all 0.3s;
     border-radius: 10px;
}

.box-produto p.cta:hover{
    transform: scale(1.05) translateX(-50%);
    background: #e15112;
    color: #fff;
}

h2.titulo{
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

h2.titulo::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: rgb(225,81,18);
    background: radial-gradient(circle, rgba(225,81,18,1) 80%, rgba(225,81,18,0) 100%);
    margin: 30px 0;
}

h3.titulo{
    color: #e15112;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

p.chamada{
    color: #fff;
    font-size: 1.2rem;
}

div.cta{
    padding: 20px;
    background: #e15112;
    color: #fff;
    transition: all 0.3s;
    border-radius: 10px;
    display: inline-block;
    margin: 30px;
    transform: scale(1);
    
}

div.cta a{
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.2rem;
}

div.cta:hover{
    transform: scale(1.1);
}

#preparese{
    background: #e75412;
    padding: 50px 0;
}

#preparese .flex{
    margin: 50px 20px 0;
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: 60px;
}

.boxcategoria{
    background: #3f3b3f;
    padding: 0 25px 25px;
    border: 5px;
    width: 250px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s;
}

#preparese h2.titulo::after{
    background: rgb(82,45,29);
    background: radial-gradient(circle, rgba(82,45,29,1) 80%, rgba(82,45,29,0) 100%);
}

.boxcategoria h3{
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 5px;
    transition: all 0.3s;
}

.boxcategoria img{
    transform: translateY(-20px);
    transition: all 0.3s;
    text-align: center;
}



.boxcategoria p{
    color: #fff;
    transition: all 0.3s;
}

.boxcategoria:hover{
    background: #fff;
}

.boxcategoria:hover h3, .boxcategoria:hover p {
    color: #3f3b3f;
}

.boxcategoria:hover img{
    transform: translateY(-30px);
}

#milhares{
    background: #2f2c2f;
    padding: 50px 0;
}

.navegacategoria{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.navegacategoria li{
    flex-grow: 1;
}

.navegacategoria li a{
    background: #3f3b3f;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    text-transform: uppercase;
    display: block;
    transition: all 0.3s;
}

.navegacategoria li a:hover, .navegacategoria li.uk-active a {
    background: #e15112;
}

.detalhes{
    margin-bottom: 50px;
}

.box-detalhe{
    background: #3f3b3f;
    border-radius: 10px;
    padding: 30px 50px;
    text-align: left;
    display: flex;
    gap: 30px;
    align-items: center;
}

.box-detalhe .icone{
    flex-shrink: 0;
}

.box-detalhe h3{
    text-transform: uppercase;
    color: #e15112;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.box-detalhe p{
    color: #fff;
    line-height: 1.5;
    margin-bottom: 20px;
}

.box-detalhe .cta{
    padding: 20px;
    background: #e15112;
    color: #fff;
    transition: all 0.3s;
    border-radius: 5px;
    display: inline-block;
    transform: scale(1);

}

h4{
    color: #e15112;
    font-size: 1rem;
    font-weight: 600;
    margin: 40px 0 15px;
}

.parceiros{
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: flex-end;
}

.marca img{
    filter: brightness(0.7);
    transform: scale(1);
    transition: all 0.3s;
    margin-bottom: 10px;
    max-width: 140px;
}

.marca:hover img{
    filter: brightness(10);
    transform: scale(1.1);
}

.nome-marca{
    font-size: 0.9rem;
    color: #777676;
}

#supermaquina{
    background: #cfcfcf;
    padding: 50px 0;
}

#supermaquina h2.titulo, #supermaquina p.chamada{
    color:#3f3b3f;
}

.smboxes{
    margin: 50px 0;
}

.smbox{
    background: #3e3a3e;
    padding: 50px 30px;
    border-radius: 30px;
    margin: 0 20px;
    height: 100%;
}

#supermaquina .video{
    padding: 0;
    overflow: hidden;
}

#supermaquina iframe{
    height: 100%;
}

.uk-slider-items{
    justify-content: stretch;
}

.smbox h3{
    color: #e15112;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.smbox p{
    color: #fff;
}

.certificado{
    padding: 5px;
    border: #3e3a3e solid 1px;
    display: inline-block;
    font-size:0.8rem;
}

.boxcta{
    margin: 40px 0 20px;
    background: #e15112;
    border-radius: 20px;
    height: 250px;
    align-items: flex-end;
    padding: 0 30px;
}

.boxcta h3, .boxcta p{
    color: #fff;
    margin-bottom: 15px;
}

.boxcta h3{
    font-size: 1.3rem;
}

.boxcta .cta{
    background: #fff;
}

.boxcta .cta a{
    color: #e15112;
}

.boxcta img{
    transform: translateX(-10px) scale(1);
    transition: all 0.3s;
}

.boxcta:hover img{
    transform: translateX(5px);
}

#app{
    background: #1e1c1e;
}

.imgapp{
    transform: scale(1.05);
    position: relative;
    z-index: 2;
}

#app .conteudoapp .titulo, #app .conteudoapp .chamada, #app .conteudoapp{
    text-align: left;
}

.conteudoapp{
    width: 60%;
    margin-left: 50px;
}

#app h2.titulo{
    color: #e15112;
    font-weight: 900;
}

#app p.chamada{
    font-size: 1.4rem;
    text-transform: uppercase;
}

#app p{
    margin-bottom: 20px;
    color: #fff;
}

.vantagensapp{
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 30px;
    margin-top: 30px;
}

.vantagem{
    width: 40%;
    align-items: flex-start;
}

.vantagem h3{
    color: #e15112;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.vantagem::before{
    content: url(../img/seta-app.webp);
    background: #e15112;
    padding: 10px;
    border-radius: 10px;
}

#baixeapp{
    padding: 30px 0;
    background: #000;
    clip-path: polygon(26% 0, 74% 0, 75% 8%, 100% 8%, 100% 100%, 0 100%, 0 8%, 25% 8%);
}

#baixeapp h3{
    color: #fff;
    font-size: 1.4rem;
}

#baixeapp div.cta{
    margin-bottom: 0;
}
 
#newsletter{
    background: #3f3b3f;
    padding: 50px 0;
}

#newsletter a{
    color: #e37d1d;
}

#newsletter h2.titulo, #newsletter p.chamada{
    text-align: left;
}

#newsletter form{
    display: flex;
    gap: 20px;
    flex-grow: 1;
    max-width: 600px;
}

.inscricao-input{
    flex-grow: 1;
    padding: 30px;
    border-radius: 10px;
}

.uk-button{
    background: #e15112;
    color: #fff;
    border-radius: 10px;
}

#prime{
    padding: 50px 0;
    background: #cfcfcf;
    text-align: center;
}

#prime h2.titulo, #prime h3.titulo, #prime p.chamada{
    color:#3f3b3f;
}

#prime p.chamada{
    margin-bottom: 20px;
}

#prime h2.titulo, #prime h3.titulo{
    text-transform: uppercase;
}

.boxprime{
    width: 320px;
    margin: 0 auto;
    padding: 20px 40px 40px ;
    border-radius: 30px;
    background: #3e3a3e;
    height: 100%;
    transition: all 0.3s;
    user-select: none;
}

.boxprime h3{
    color: #e15112;
    font-size: 1.4rem;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.boxprime p{
    color: #fff;
}

.boxprime img{
    width: 100px;
    transform: translateY(0);
    transition: all 0.3s;
}

.boxprime:hover{
    background: #e15112;
}

.boxprime:hover h3{
    color: #fff;
}

.boxprime:hover img{
    transform: translateY(-15px);
}

#depoimentos{
    background: #1e1c1e;
    padding: 50px 0;
}

.basedepoimentos{
    align-items: stretch;
    flex-wrap: wrap;
}

.depoimento{
    background: #3e3a3e;
    padding: 30px;
    border-radius: 20px;
    width: 300px;
}

.depoimento h3{
    color: #e15112;
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.depoimento h3::after{
    content: url(../img/estrelas.webp);
    display: block;
    margin-top: 5px;
}

.depoimento p{
    color: #cfcfcf;
    line-height: 1.5;
}

#tecmasters{
    background: #27304b;
    padding: 50px 0;

}

#tecmasters .container{
    margin-bottom: 30px;
}

#tecmasters h2{
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6rem;
}

.noticia{
    width: 350px;
    height: 250px;
    border-radius: 30px;
    position: relative;
}

.noticia:nth-child(1){background: url(../img/blog1.webp) center top no-repeat;}
.noticia:nth-child(2){background: url(../img/blog2.webp) center top no-repeat;}
.noticia:nth-child(3){background: url(../img/blog3.webp) center top no-repeat;}
.noticia:nth-child(4){background: url(../img/blog4.webp) center top no-repeat;}

.noticia h3{
    position: absolute;
    color: #fff;
    filter: drop-shadow( 5px 5px 5px #000 );
    text-align: left;
    padding: 0 40px;
    bottom: 40px;
    font-size: 1.4rem;

    transition: all 0.3s;
}

.noticia:hover h3{
    bottom: 60px;
}

#comprasegura{
    padding: 50px 0;
    background: #cfcfcf;
    border: solid 1px #201e20;
}

#comprasegura h2{
    color: #2f2c2f;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6rem;
    margin-bottom: 40px;
}

#magalu{
    background: #ececec;
    padding: 50px 0;
}

#magalu h2.titulo{
    color: #2f2c2f;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6rem;
    margin-bottom: 40px;
}

#magalu p.chamada{
    color: #2f2c2f;
}

.grupo{
    margin: 40px 0;
    flex-wrap: wrap;
    gap: 80px;
}

.grupo img{
    transform: translateY(0);
    transition: all 0.3s;
}

.grupo img:hover{
    transform: translateY(-15px);
}

#faq{
    background: #2f2c2f;
    padding: 50px 0;
}

#faq li{
    background: #201e20;
    padding: 20px;
    border-radius: 15px;
    position: relative;
}

#faq li h2{
    color: #cf401a;
    text-align: left;
}

#faq li .uk-accordion-title .icoP {
    transition: all ease-in-out .2s;
    border-radius: 50px;
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #ff3904;
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq li p{
    text-align: left;
    color: #fff;
}

#faq li p a{
    color: #e15112;
}

#nuvem{
    background: #282427;
    padding: 50px 0;
}

#nuvem h2.titulo{
    font-size: 1.4rem;
}

.linknuvem{
    padding: 5px;
    background: #2e2b2d;
    font-size: 0.9rem;
    display: inline-block;
    margin: 0 10px 10px;
    color: #fff;
}

.linknuvem:hover{
    color: #cf401a;
}

#saiba{
    margin: 50px 0 0;
}

#saiba p{
    color: #fff;
    line-height: 1.5;
    margin-bottom: 10px;
}

#saiba a{
    color: #e15112;
}

#comofunciona{
    background: #2f2c2f;
    padding: 50px 0;
}

.blocoregras{
    align-items: stretch;
    margin: 30px 0;
    gap: 40px;
    flex-wrap: wrap;
}

.regras{
    background: #3f3b3f;
    border-radius: 20px;
    flex-shrink: 0;
    align-items: stretch;
    overflow: hidden;
}

.regras .icone{
    background: #e15112;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.regras .icone img{
    transform: translateY(0);
    transition: all 0.3s;
}

.regras:hover .icone img{
    transform: translateY(-10px);
}

.regras .texto{
    width: 250px;
    padding: 30px;
    text-align: left;
}

.regras .texto p{
    color: #fff;
    margin-bottom: 10px;
}

.regras .texto h3{
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.fadein {
    animation-name: fadein;
    animation-duration: 2s;
       }

   @keyframes fadein {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }

#spoiler{
    background: url(../img/bg-spoiler.webp) center top no-repeat;
    background-size: cover;
}  

#spoiler h2.titulo, #spoiler p.chamada{
    color: #fff;
}  


#contador{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px 30px
}

#spoilerh1{
    width: 411px;
}

#contador .data{
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    font-size: 3rem;
    line-height: 1;
    width: 85px;
}

#contador .data span {
    padding: 0 20px;
    text-align: center;
    color: #fff;
}

#contador .data span:nth-child(1) {
    font-size: 25%
}

#contador .data span:nth-child(2) {
    font-weight: 600
}
.pontos::before {
    content: ":";
    position: absolute;
    color: #fff;
    font-family: "Saira", sans-serif;
    font-size: 2.2rem;
    line-height: .5;
    display: block;
    top: 50%;
    transform: translateY(-25%);
    right: -5px
}

#basealerta{
    width: 411px;
    height: 302px;
    position: relative;
    background: url(../img/base-alerta.webp) center top no-repeat; 
}

#basealerta h2{
    color: #fff;
    font-size: 1.4rem;
    position: absolute;
    left: 135px;
    top: 20px;
}

#basealerta p{
    color: #fff;
    width: 290px;
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 70px;
    left: 70px;
    text-transform: uppercase;
    line-height: 1.3;
}

#basealerta p strong{
    color: #cf401a;
}


    

@media screen and (max-width: 1480px) {
    .container {
        margin: 0 30px;
    }

    

    nav li a{
        margin-left: 0;
    }

}

@media screen and (max-width: 1300px) {

    .boxcta .imagem{
        display: none;
    }

    .boxcta{
        flex-grow: 1;
        margin: 0 0 20px;
        align-items: center;
    }

    .boxcta .cta{
        margin: 0;
    }
}

@media screen and (max-width: 1260px) {
    #ninjacronometro{
        display: none;
    }

    #spoilerh1{
        padding: 50px 0;
    }

    
}

@media screen and (max-width: 1145px) {
    .container {
        margin: 0 30px;
    }

    nav li a{
        padding: 0;
    }

    nav li a.menuapp{
        padding: 10px 15px;
    }

    

    nav li a{
        margin-left: 0;
        font-size: 0.9rem;
    }

    .imgapp{
        display: none;
    }

    .conteudoapp{
        width: auto;
        margin: 0;
        padding: 50px 0;
    }

    #app .conteudoapp .titulo, #app .conteudoapp .chamada, #app .conteudoapp {
        text-align: center;
    }

    .vantagensapp{
        justify-content: center;
    }

}

@media screen and (max-width: 1000px) {
    .flex {
        flex-wrap: wrap;
    }

    nav li a{
        font-size: 0.8rem;
    }

        #topoblack {
            display: grid;
            grid-template-columns: repeat(6, 15%);
            grid-template-rows: repeat(3, auto);
            grid-column-gap: 2%;
            grid-row-gap: 50px;
            margin-bottom: 50px;
            }
            
            #logoblack { grid-area: 1 / 1 / 2 / 4; }
            #areasave { grid-area: 1 / 4 / 2 / 7; display: flex; align-items: center; justify-content: center;}
            .boxh1 { grid-area: 2 / 1 / 3 / 7; text-align: center;}
            .quad1 { grid-area: 3 / 1 / 4 / 3; }
            .quad2 { grid-area: 3 / 3 / 4 / 5; }
            .quad3 { grid-area: 3 / 5 / 4 / 7; }

}

@media screen and (max-width: 875px) {
    #ninjacronometro{
        display: block;
        order: 3;
    }

    #boxcontador{
        order: 2;
        padding: 20px 0;
        width: 100%;
    }

    #spoilerh1{
        order: 1;
        padding: 50px 0 0;
    }
}

@media screen and (max-width: 820px) {
    .flex {
        flex-wrap: wrap;
    }

    
    .box-detalhe{
        flex-direction: column;
        text-align: center;
    }

    .depoimento{
        width: 100%;
    }

    #topoblack {
        display: grid;
        grid-template-columns: repeat(3, 30%);
        grid-template-rows: repeat(4, auto);
        grid-column-gap: 3%;
        grid-row-gap: 10px;
        }
        
        #logoblack { grid-area: 1 / 1 / 2 / 4; }
        #areasave { grid-area: 2 / 1 / 3 / 4; }
        .boxh1 { grid-area: 3 / 1 / 4 / 4; }
        .quad1 { grid-area: 4 / 1 / 5 / 2; }
        .quad2 { grid-area: 4 / 2 / 5 / 3; }
        .quad3 { grid-area: 4 / 3 / 5 / 4; }

        .savethedate{
            margin: 0;
        }

}

@media screen and (max-width: 650px) {
    #logo-black-rodape, #logo-kabum-rodape{
        display: none;
    }
}

@media screen and (max-width: 500px) {

    #topoblack {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(6, auto);
        grid-column-gap: 0px;
        grid-row-gap: 20px;
        }
        
        #logoblack { grid-area: 1 / 1 / 2 / 2; }
        .boxh1 { grid-area: 2 / 1 / 3 / 2; }
        #areasave { grid-area: 3 / 1 / 4 / 2; }
        .quad1 { grid-area: 4 / 1 / 5 / 2; }
        .quad2 { grid-area: 5 / 1 / 6 / 2; }
        .quad3 { grid-area: 6 / 1 / 7 / 2; }

        .savethedate{
            width: 100%;
        } 

        #logoblack img {
            margin-bottom: 20px;
        }

        

    .vantagem {
        width: auto;
    }

    #newsletter form{
        display: block;
    }

    #newsletter input{
        width: 100%;
        margin-bottom: 20px;
    }

    .noticia h3 {
        bottom: 60px;
        opacity: 1;
    }

    .regras{
        flex-direction: column;
        margin: 0 20px;
        flex-shrink: 1;
    }

    .regras .texto{
        width: 100%;
    }

    .data{
        font-size: 2rem;
    }
    
    .data span {
        padding: 0 10px;
    }
    
    .data span:nth-child(1) {
        font-size: 50%;
    }


    .pontos::before {
        top: 10px;
        transform: translateY(0);
    }

    #basealerta{
        width: auto;
        position: static;
        background: none;
        height: auto;
    }

    #basealerta h2{
        position: static;
        margin-bottom: 20px;
    }

    #basealerta p {
        position: static;
        width: auto;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 440px) {
}

/* LP */

#lpdestaque{
    background: rgb(36,33,33);
    background: linear-gradient(0deg, rgba(36,33,33,1) 70%, rgba(36,33,33,0) 100%);
    text-align: left;
}

#lpdestaque h1{
    color: #e37d1d;
}

#lpdestaque h2{
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

#lpdestaque p{
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.2rem;
    line-height: 1.5;
}

#lpdestaque a{
    color: #e37d1d;
}

hr{
    border: 0;
    width: 100%;
    height: 3px;
    background: rgb(225,81,18);
    background: radial-gradient(circle, rgba(225,81,18,1) 80%, rgba(225,81,18,0) 100%);
}

.principaltexto{
    max-width: 500px;
    text-align: left;
}

#lpmarcas{
    background: #2f2c2f;
    padding: 50px 0;
}

#lpmarcas p.destaque{
    color: #fff;
}

#lpqual{
    padding: 50px 0;
    background: url(../img/lp-bgqual.webp) center top no-repeat;
    background-size: cover;
}

#lpqual p.destaque{
    margin-bottom: 30px;
}

#lpqual h2.titulo{
    color: #4f4b4f;
}

#slider-marcas{
    margin: 50px 0 20px;
}

.basequal{
    max-width: 500px;
    min-width: 350px;
}

.basequal img{
    position: relative;
    z-index: 2;
}

.bgbasequal{
    background: rgb(97,94,97);
    background: linear-gradient(180deg, rgba(97,94,97,1) 0%, rgba(62,58,62,1) 40%);
    border-radius: 20px;
    padding: 100px 40px 40px;
    position: relative;
    z-index: 1;
    transform: translateY(-80px);
    min-height: 450px;
}

.basequal h3{
    color: #e37d1d;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 30px;
}

.basequal p{
    color:#ffffff;
    margin-bottom: 15px;
}

.principalimagem{
    margin-bottom: 30px;
}

#lpqual .flex{
    align-items: stretch;
}

.slider-marcas{
    align-items: center;
}

span#arrow{
    color: #cf401a;
}

ul.faq ul, ul .faq ol{
    text-align: left !important;
    color: #ddd !important;
}