a{text-decoration:none}a:hover{text-decoration:none;}ol,ul{list-style:none}a,article,blockquote,body,dd,div,dl,dt,em,fiegldset,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,img,label,legend,li,main,nav,ol,p,section,span,ul{margin:0;padding:0;border:0}a,h1,h2,h3,h4,h5,h6,p,ul{font-size:1em;font-weight:400}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.1;
}

body {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #111;
    max-width: 100vw;
    overflow-x: hidden;
}

body h1,
body h2,
body h3,
body h4 {
    line-height: 1;
    font-family: 'Sora', 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;
}

.gap{
    gap: 30px;
}

.wrap{
    flex-wrap: wrap;
}

.alignstart{
    align-items: start;
}

.center {
    justify-content: center;
}

.between {
    justify-content: space-between;
}

footer {
    background-color: #1b181b;
}

#footer-social {
    background: rgb(42,24,15);
background: linear-gradient(40deg, rgba(42,24,15,1) 0%, rgba(17,25,46,1) 100%);
    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: 'Sora', sans-serif;
    margin-left: 20px;
    font-size: 1rem;
    padding: 10px 15px;
}

nav li a.menuapp{
    background: #fff;
    border-radius: 10px;
    color: #e15112;
}

nav li:hover a,
nav li a.ativo {
    color: #e15112;
}

nav li:hover a.menuapp {
    color: #fff;
    background: #e15112;
}

.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 {
    padding: 30px 0;
}

#navlps{
    background: #e15112;
    padding: 15px 0;    
}

#navlps .flex{
    column-gap: 80px;
}

#navlps a{
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s;
}

#navlps a:hover{
    color: #1b181b;
}

#contaproninja{
    background: #e15112;
    padding: 50px 0;
    color: #fff;
}

#contaproninja p{
    margin-bottom: 10px;
}

#contaproninja h2{
    color: #111;
}

#contaproninja h3{
    color: #111;
    margin: 30px 0 20px;
    font-size: 2rem;
}

.passoapasso{
    justify-content: center;
    gap: 1rem;
}

#descontos{
    background: #e15112;
    padding: 50px 0;
    color: #fff;
}

.marcasdescontos{
    justify-content: center;
    gap: 1rem;
    margin: 30px 0;
}

.marcasdescontos img{
    translate: 0 0;
    transition: all 0.3s;
}

.marcasdescontos img:hover{
    translate: 0 10px;
}

main{
    background: url(../img/bg-topo-ladder.webp) center top no-repeat;
    background-size: cover;
    padding-bottom: 50px;
}

main.lp{
    padding: 50px 0 0;
}

#antecipado, #ofertas{
    padding: 50px 0;
}

#ofertas{
    background: #1b181b;
}


.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;
}

.logos-ladder{
    margin-bottom: 50px;
    justify-content: center;
    gap: 50px;
}

.separador{
    width: 1px;
    height: 20px;
    background: #3c3c3c;
    display: block;
}

body h1{
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

body h1::after, body h1::before{
    content:"";
    display: block;
    height: 1px;
    width: 30px;
    background: #3c3c3c;
}

#topoblack p{
    color: #d0a85c;
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 30px;

}

body h2{
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}

#inscricao{
    background: #1a1a1a url(../img/bg-rabiscos.webp) center center no-repeat; 
    background-size: contain;
    padding: 0 0 50px;
}

main #inscricao{
    background: none;
    padding: 0;
}

main .boxinscricao{
    margin: 50px 0;
}

.boxinscricao{
    align-items: stretch;
    justify-content: center;
    gap: 30px;
}

.regras, .formulario{
    background: #232323;
    padding: 30px;
    text-align: left;
    border: solid 1px #d0a85c;
    border-radius: 2rem;
    min-width: 400px;
}

.regras p{
    color: #fff;
    margin-bottom: 30px;
    font-size: 1rem;
    font-weight: 400;
}

.regras p strong{
    color: #d0a85c;
    font-weight: 700;

}

.regras a{
    color: #fff;
    font-weight: 600;
}

.setinha{
    margin-right: 10px;
}

.formulario h3{
    color: #e7461d;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 30px;
}

.formulario .btcta{
    text-align: center;
}

.formulario .cta{
    cursor: pointer;
}




.formulario input[type=text], .formulario input[type=email]{
    width: 100%;
    margin-bottom: 20px;
    background: #1a1a1a;
    color: #fff;
    border: solid 1px #fff;
    padding: 15px;
    border-radius: 10px;
    font-weight: 700;
}

.formulario input[type=checkbox]{
    margin:0 10px 20px 0
}

.formulario a{
    color: #e7461d;
}

.formulario label{
    color: #fff;
    font-weight: 400;
}
.formulario p{
    color: #fff;
    margin-bottom: 20px;
}

.formulario .opcoes{
    columns: 3 auto;
    margin-bottom: 20px;
}

.formulario .aceite p{
    font-size: 0.8rem;
    text-align: justify;
}

.formulario .aceite p a{
    color: #fff;
    font-weight: 600;
}

#outrasregras{
    background: #1a1a1a;
    padding: 0 0 50px;
}

#outrasregras h2{
    color: #d0a85c;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 30px;
}

#outrasregras p{
    color: #fff;
    margin: 0 auto 30px;
    text-align: left;
    max-width: 900px;
}

#outrasregras p::before{
    content: url(../img/setinha.webp);
    margin-right: 10px;
    display: inline-block;
}

#outrasregras .cta {
    color: #fff;
}

#outrasregras .cta:hover {
    color: #e7461d;
}

#outrasregras div:has(.cta){
    margin-bottom: 30px;
}

#outrasregras a{
    color: #e7461d;
}

#lives{
    background: url(../img/bg-lives.webp) center center no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#lives h2{
    color: #d0a85c;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 30px;
}

#lives p{
    color: #fff;
    margin-bottom: 30px;
}

#lives .container{
    background: #232323;
    padding: 30px;
    border: solid 1px #d0a85c;
    border-radius: 2rem;
}

.boxlives{
    justify-content: center;
    gap: 50px;
}

.live h3{
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.live .linktwitch{
    display: block;
    margin-top: 10px;
    background: #9147ff;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s;
}

.live .linktwitch:hover{
    background: #fff;
    color: #9147ff;
}

#premiacao{
    background: #1a1a1a;
    padding: 50px 0;
}

#premiacao .cta{
    margin-bottom: 30px;
}

#premiacao h2{
    color: #e7461d;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
}



#premiacao h3{
    color: #d0a85c;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 30px;
}

#premiacao p{
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.4;
}

.premios{
    justify-content: center;
    align-items: stretch;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

#premiacao .premio{
    background: #232323;
    padding: 30px;
    border: solid 1px #d0a85c;
    border-radius: 2rem;
    width: 30%;
    text-align: left;
    transition: all 0.3s;
}

#premiacao .legal{
    max-width: 800px;
    margin: 0 auto;
}


#premiacao .premio:hover{
    -webkit-box-shadow:0px 0px 15px 2px rgba(208,167,92,0.5);
    -moz-box-shadow: 0px 0px 15px 2px rgba(208,167,92,0.5);
    box-shadow: 0px 0px 15px 2px rgba(208,167,92,0.5);
}


#premiacao .premio .posicao{
    display: flex;
    justify-content: center;
    align-items: left;
    gap: 0px;
}

#premiacao .flex .premio .posicao{
    text-align: left;
}


#premiacao .premio p.posicao {
    margin: 0;
    color: #d0a85c;
    text-align: left;

}

#premiacao .premio .valor{
    margin: 0;
}

#premiacao .premio .valor strong{
    font-size: 5rem;
}

#premiacao p strong{
    font-size: 1.2rem;
}

#premiacao .flex{
    margin-bottom: 30px;
}

#premiacao .flex div{
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}

#premiacao .flex img{
    display: block;
    
}

#ranking{
    background: url(../img/bg-ranking.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#ranking h2{
    color: #1a1a1a;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 30px;
}

#ranking p{
    color: #1a1a1a;
    margin-bottom: 30px;
    line-height: 1.4;
}

#discord{
    background: url(../img/bg-discord.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#discord h2{
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 30px;
}

#discord p{
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.4;
}


.titconfirma{
    text-align: left;
}

#topoblack .titconfirma p{
    font-size: 2rem;
}

main .obrigado img{
    margin-bottom: 0;
    max-width: 200px;
}



#logoblack{
    gap: 50px;
    margin-bottom: 30px;
}



.quadriculados{
    align-items: stretch;
}

.quadriculado{
    background: #1B0D07;
    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;
}

#cubagem{
    padding: 50px 0;
    background: rgb(37,40,45);
    background: linear-gradient(309deg, rgba(37,40,45,1) 0%, rgba(56,43,35,1) 100%);
}

#cubagem h2{
    color: #e15112;
    text-transform: uppercase;
    font-size: 2.4rem;
    max-width: 50%;
}

#cubagem p.tit{
    color: #fff;
    width: 50%;
    font-size: 2rem;
    font-weight: 600;
}

.imgcubagem{
    width: 50%;
}

.textocubagem{
    width: 50%;
}

.textocubagem .desconto{
    color: #fff;
    font-size: 2rem;
}

.textocubagem .valor{
    color: #e15112;
    font-size: 2.5rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.textocubagem .valor strong{
    font-size: 7rem;
}

.textocubagem .destaque{
    background: #1B0D07;
    padding: 30px;
    color: #fff;
    border: #e15112 solid 2px;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    margin-bottom: 20px;
}

.textocubagem .destaque strong{
    display: block;
}

.cta{
    display: inline-block;
    background: #e15112;
    color: #fff;
    text-align: center;
    color: #fff;
    transition: all 0.3s;
    padding: 20px 50px ;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    border: none;
}



.cta:hover{
    color: #e15112;
    background: #fff;
}


#listaDinamica li, #listaEsquenta 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 h3 {
    padding: 0 40px;
    color: #777676;
    font-size: 1.1rem;
    height: 2.2rem;
    margin-bottom: 5px;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

.box-produto h3.titulooferta { margin: 10px 0; }
.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;
}

#listaEsquenta .box-produto p.cta {
    position: static;
    margin-top: 20px;
    border-radius: 0px;
    background: #000;
    color: #e15112;
    text-transform: uppercase;
    transform: scale(1) translateX(0) rotate(-3deg);
    font-weight: 900;
}

.box-produto p.cta:hover{
    transform: scale(1.05) translateX(-50%);
    background: #e15112;
    color: #fff;
}

#listaEsquenta .box-produto p.cta:hover {
    transform: scale(1.05) translateX(0) rotate(0deg);
}



h2.titulo{
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
}



p.titulo, h3.titulo{
    color: #e15112;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
}

p.chamada{
    color: #fff;
    font-size: 1.2rem;
}


#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: rgb(37,40,45);
    background: linear-gradient(309deg, rgba(37,40,45,1) 0%, rgba(56,43,35,1) 100%);
    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: none;
    padding: 10px 20px;
    border-radius: 10px;
    border: solid 1px #e15112;
    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: #111;
    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:5px 10px;
    background: #e15112;
    color: #fff;
    transition: all 0.3s;
    border-radius: 5px;
    display: inline-block;
    transform: scale(1);
    margin-right: 5px;
    margin-bottom: 10px;

}

h3.parceiros{
    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;
}

.legal{
    font-size: 0.8rem;
    color: #1e1c1e;
    margin-bottom: 20px;
}

.legal a{
    color: #e15112; 
}

.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;
}

#baixeapp h3{
    color: #fff;
    font-size: 1.4rem;
}

#baixeapp div.cta{
    margin-bottom: 0;
}
 
#newsletter{
    background: #111;
    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;
    transition: all 0.3s;
    font-weight: 600;
}

.uk-button:hover{
    color: #e15112;
    background: #fff;
}

#prime{
    padding: 50px 0;
    background: #111;
    text-align: center;
}

#prime h2.titulo, #prime h3.titulo, #prime p.chamada{
    color:#fff;
}

#prime p.chamada{
    margin-bottom: 20px;
}

#prime h2.titulo, #prime h3.titulo{
    text-transform: uppercase;
}

#prime li{
    padding: 0 20px;
    
}

#prime .uk-slider-nav li{
    padding: 0 5px;
}

.boxprime{
    background: #1B0D07;
    padding: 30px;
    color: #fff;
    border: #e15112 solid 2px;
    border-radius: 20px;
    text-align: center;
    height: 100%;
}

#prime .uk-slider-container ul{
    align-items: stretch;
}

#prime .legal{
    color: #fff;
}

.boxprime h3{
    color: #e15112;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.boxprime p{
    color: #fff;
    line-height: 1.4;
}

.boxprime p a{
    color: #e15112;
    font-weight: 900;
}


.boxprime img{
    width: 100px;
    transform: translateY(0);
    transition: all 0.3s;
}

#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: #112232;
    padding: 50px 0;

}

#tecmasters p{
    color: #fff;
}

#tecmasters .container{
    margin-bottom: 30px;
}

#tecmasters h2{
    color: #e15112;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6rem;
    max-width: 600px;
    text-align: left;
}

.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: #fff;
}

.bignumbers{
    margin: 30px 0 50px;
}

.bignumbers .numero{
    color: #e15112;
    font-size: 6rem;
    font-weight: 600;
}

.bignumbers .unidade{
    color: #e15112;
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
}

.logosseguros{
    margin-bottom: 30px;
}


#comprasegura h2{
    color: #2f2c2f;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6rem;
    margin-bottom: 40px;
}

#magalu{
    background: #000;
    padding: 50px 0;
}

#magalu h2.titulo{
    color: #e15112;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.6rem;
    margin-bottom: 40px;
}

#magalu p.chamada{
    color: #fff;
}

.grupo{
    margin: 40px 0;
    flex-wrap: wrap;
    gap: 80px;
    align-items: stretch;
}

.logogrupo{
    background: #fff;
    padding: 20px 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grupo img{
    transform: translateY(0);
    transition: all 0.3s;
    
}

.grupo img:hover{
    transform: translateY(-5px);
}

#faq{
    background: #2f2c2f;
    padding: 50px 0;
}

#faq li{
    background: #201e20;
    padding: 20px;
    border-radius: 15px;
    position: relative;
}

#faq li h3{
    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;
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq li p{
    text-align: left;
    color: #fff;
    margin-bottom: 20px;
}

#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;
}



.fadein {
    animation-name: fadein;
    animation-duration: 0.5s;
       }

   @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: 'Sora', 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;
}

#webstories{
    background: url(../img/bg-black-friday-ondas.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#webstories .basewebstories{
    margin: 50px 0;
}

.webstorie{
    width: 394px;
    height: 494px;
}

.webstorie .storiecont li{
    width: 394px;
    height: 494px;
    background: url(../img/webstories-bg.webp);
    padding: 35px 30px 30px ;
}

.webstorie .storiecont li h4{
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 70px;
}

.webstorie .storiecont li p{
    color: #fff;
    padding: 0 60px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.webstorie .storiecont li:first-of-type h2, .webstorie .storiecont li:first-of-type h3, .webstorie .storiecont li:last-of-type h4, .webstorie .storiecont li:last-of-type h3{
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.webstorie .storiecont li:first-of-type, .webstorie .storiecont li:last-of-type{
    padding: 380px 30px 0;
}



.webstorie01 .storiecont li:first-of-type{
    background: url(../img/webstories-01-01.webp) center top no-repeat;
}

.webstorie01 .storiecont li:last-of-type{
    background: url(../img/webstories-01-ultimo.webp) center top no-repeat;
}

.webstorie02 .storiecont li:first-of-type{
    background: url(../img/webstories-02-01.webp) center top no-repeat;
}

.webstorie02 .storiecont li:last-of-type{
    background: url(../img/webstories-01-ultimo.webp) center top no-repeat;
}

.webstorie03 .storiecont li:first-of-type{
    background: url(../img/webstories-03-01.webp) center top no-repeat;
}

.webstorie03 .storiecont li:last-of-type{
    background: url(../img/webstories-01-ultimo.webp) center top no-repeat;
}

.webstorie02 .storiecont li p{
       font-size: 1.4rem;
       line-height: 1.5;
}


.webstorie03 .storiecont li h2{
    font-size: 1.6rem;
}

.webstorie03 .storiecont li p{
    font-size: 1.3rem;
    line-height: 1.2;
}

.webstorie .uk-dotnav{
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);

}

.webstorie .uk-dotnav>*>* {
    width: 10px;
    height: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    opacity: 0.4;
    transition: .2s ease-in-out;
    transition-property: all;
}

.webstorie .uk-dotnav>.uk-active>* {
    opacity: 1;
}

.webstorie .uk-dotnav>*{
    padding-left: 5px;
}

#minutos90 h3{
    color: #fff;
    margin-bottom: 10px;
}

#minutos90 h4{
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
}

#lista90{
    text-align: left;
    margin-top: 20px;
    padding: 0 50px;
}

#lista90 li{
    color: #fff;
    margin-bottom: 5px;
    padding-left: 10px;
    list-style-type: ">";
}

#legal{
    padding: 20px 0;
    background: #000;
}

#legal p{
    color: #fff;
    font-size: 0.8rem;
}

#cybermonday{
    padding: 50px 0;
    background: url(../img/bg-cyber.webp) center top no-repeat; 
    background-size: cover;
    border-bottom: solid 2px #93f03b;
}

.textocyber{
    max-width: 500px;
}

#cybermonday .flex{
    flex-wrap: wrap;
}

#cybermonday a.ctacyber{
    display: inline-block;
    background: #93f03b;
    color: #113564;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    transition: all 0.3s;
    font-family: "Play",sans-serif;
    transform: scale(1);
}

#cybermonday a.ctacyber:hover{
    transform: scale(1.05);
}

#cybermonday h2{
    font-size: 2rem;
    line-height: 1.1;
    color: #93f03b;
    font-weight: 800;
    margin-bottom: 30px;
    font-family: "Play",sans-serif;
}

#cybermonday p{
    font-size: 1.4rem;
    line-height: 1.1;
    color: #fff;
    font-weight: 800;
    margin-bottom: 30px;
    font-family: "Play",sans-serif;
}




    

@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;
    }


    .titconfirma{
        text-align: center;
        margin-bottom: 50px;
    }

    #logoblack img{
        margin-bottom: 20px;
    }
    

        

}

@media screen and (max-width: 875px) {
    #ninjacronometro{
        display: block;
        order: 3;
    }

    #boxcontador{
         padding: 20px 0;
        width: 100%;
    }

    #spoilerh1{
            padding: 50px 0 0;
    }

    #lista90{
        padding: 0 20px;
    }
    
    #premiacao .premio .valor strong{
        font-size: 3rem;
    }

}

@media screen and (max-width: 820px) {
    .flex {
        flex-wrap: wrap;
    }

    .separador{
        display: none;
    }

    
    .box-detalhe{
        flex-direction: column;
        text-align: center;
    }

    .depoimento{
        width: 100%;
    }

    #premiacao .premio{
        width: 100%;
        text-align: center;
    }

    .formulario h3, #outrasregras h2, #lives h2, #premiacao h2, #ranking h2, #discord h2, h2.titulo{
        font-size: 1.2rem;
    }

    
    

}

@media screen and (max-width: 650px) {
    #logo-black-rodape, #logo-kabum-rodape{
        display: none;
    }
}

@media screen and (max-width: 500px) {

    body h1{
        font-size: 1rem;
    }

    body h1::after, body h1::before {
        display: none;
    }

    #topoblack p{
        font-size: 1.4rem;
    }

    .regras, .formulario{
        min-width: auto;
        width: 100%;
    }

    .aceite{
        margin-bottom: 20px;
    }

    #outrasregras p{
        text-align: left;
    }

    .formulario .opcoes {
        columns: 1 auto;
    }

    .boxh1 h2{
        font-size: 1.4rem;
        text-align: center;
    }

    #cubagem h2, #cubagem p.tit{
        font-size: 1.4rem;
        max-width: none;
    }

    .imgcubagem, .textocubagem{
        width: auto;
    }

    .textocubagem .valor{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        font-size: 1rem;
    }

    .textocubagem .valor strong{
        font-size: 3rem;
        
    }

    

        

    .vantagem {
        width: auto;
    }

    #newsletter form{
        display: block;
    }

    #newsletter input{
        width: 100%;
        margin-bottom: 20px;
    }

    .noticia h3 {
        bottom: 60px;
        opacity: 1;
    }

    

    .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: 414px) {
    .webstorie{
        width: 100%;
    }

    #webstories .container{
        margin: 0 10px;
    }

    .webstorie .storiecont li:first-of-type h2, .webstorie li:last-of-type h2{
        padding: 360px 30px 0;
    }

    .webstorie .storiecont li h2 {
        font-size: 1.2rem;
        text-transform: uppercase;
        margin-bottom: 70px;
    }

    .webstorie .storiecont li{
        padding: 45px 30px 30px;
    }

    .webstorie .storiecont li p {
        padding: 0 40px;
    }

    .webstorie02 .storiecont li p, .webstorie03 .storiecont li p{
        font-size: 1.2rem;
        line-height: 1.1;
    }

    .webstorie div.cta{
        padding: 10px;
        margin: 0;
    }
}

