@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap";

*{
    user-select: none;
}

body {
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    overflow-x: hidden;
    accent-color: #fda111;
    background: #030b22
}

body h1,
body h2,
body h3,
body h4 {
    font-family: "Poppins", sans-serif;
    line-height: normal;
    line-height: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto
}

.flex {
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly
}

.gap{
    gap: 30px;
}

.wrap{
    flex-wrap: wrap;
}

.center {
    justify-content: center
}

.between {
    justify-content: space-between
}

footer {
    background: #0A0C25;
}

#footer-social {
    padding: 20px 0 0
}

#footer-social .container {
    position: relative
}

#footer-social ul {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 20px 0
}

#footer-social li span {
    padding: 8px;
    background-color: #fff;
    border-radius: 50%;
    color: #0A0C25;
    transition: all .3s
}

#footer-social li span:hover {
    background-color: #FF7800;
    color: #0b182c
}

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

nav ul {
    display: flex;
    background: #fff;
    padding: 10px 40px;
    border-radius: 30px;
    gap: 40px
}

.uk-navbar-nav {
    background: none
}

a.btcalendario {
    background: #6000C0;
    padding: 10px 40px;
    border-radius: 30px;
    color: #fff;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    transition: all .3s
}

a.btcalendario:hover {
    background: #e95400;
    color: #fff
}

nav li a {
    color: #030b22;
    transition: all .2s;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    background: none;
    padding: 5px 5px;
    border-radius: 10px
}

nav li:hover a,
nav li a.ativo {
    color: #fff;
    background: #0f32fe
}

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

.uk-navbar-nav>li>a:hover {
    color: #e95400;
    background: none;
}

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

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

header {
    background: #030b22;
    padding: 30px 0
}

header .center {
    gap: 20px
}

main {
    padding: 30px 0;
    text-align: center;
    background: url(../img/bg-topo.webp) center top no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1
}

main .flex{
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

main.lol {
    background: url(../img/bg-topo-lol.webp) center bottom no-repeat;
    background-size: cover
}

main.tft {
    background: url(../img/bg-topo-tft.webp) center bottom no-repeat;
    background-size: cover
}

main.sf {
    background: url(../img/bg-topo-sf2025.webp) center bottom no-repeat;
    background-size: cover
}

main.cs {
    background: url(../img/cs2025-bg-topo.webp) center bottom no-repeat;
    background-size: cover
}

main.brawlstars {
    background: url(../img/bg-topo-brawlstars.webp) center bottom no-repeat;
    background-size: cover
}

main.valorant {
    background: url(../img/bg-topo-valorant.webp) center bottom no-repeat;
    background-size: cover
}

main.vip {
    background: url(../img/bg-topo-vip.webp) center bottom no-repeat;
    background-size: cover
}

main.vip img{
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}

main.lol-obrigado {
    background: url(../img/bg-topo-lol-obrigado.webp) center bottom no-repeat;
    background-size: cover
}

main.sf-obrigado {
    background: url(../img/bg-sf2025-obrigado.webp) center bottom no-repeat;
    background-size: cover
}

main.cs-obrigado {
    background: url(../img/cs2025-bg-topo-obrigado.webp) center bottom no-repeat;
    background-size: cover
}

main.brawlstars-obrigado {
    background: url(../img/bg-topo-brawlstars-obrigado.webp) center bottom no-repeat;
    background-size: cover
}



main.watchparty-obrigado {
    background: url(../img/bg-topo-watchparty-obrigado.webp) center bottom no-repeat;
    background-size: cover
}

.parabens {
    margin-bottom: 20px
}

.logoh1 {
    margin-bottom: 50px
}

.logoprincipal{
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.icofloat{
    position: absolute;
    max-height: 20%;
    animation-name: float;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes float {
    0% {
        scale: 1;
    }

    50% {
        scale: 0.9;
    }
}

.float01{ left: 0; top: 0; }
.float02{ left: -10%; top: 40%; animation-delay: 1s;}
.float03{ left: -10%; bottom: 0; animation-delay: 0.5s;}
.float04{ right: -10%; top: 40%; animation-delay: 1s;}
.float05{ right: -10%; bottom: 0; animation-delay: 0.5s;}

main.interna .logoh1 {
    max-width: 600px
}

main h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase
}

main.comercial{
    padding: 80px 0 20px;
}

main.comercial .logoh1{
    margin-bottom: 0;
}

main.comercial h1{
    font-size: 0.8rem;
    margin-bottom: 10px;
}

main.comercial h2{
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

main h1 strong {
    color: #68e4ff;
    font-weight: 600
}

main.vip p{
    margin-top: 20px;
    font-size: 1.4rem;
}

main.vip p strong {
    color: #68E4FF
}


main p strong {
    color: #fda111
}

.porcentagem{
    background: rgb(245,252,254);
    background: linear-gradient(180deg, rgba(245,252,254,1) 0%, rgba(232,243,254,1) 100%);
    padding: 0 20px;
    max-width: 300px;
    border-radius: 20px;
    color: #005FFF;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 10px auto;
    font-size: 2rem;
    gap: 10px;
    font-weight: 600;
}

.porcentagem strong{
    font-size: 4rem;
    color: #005FFF;
}

.porcentagem span{
    background: #005FFF;
    color: #fff;
    padding: 2px 5px;
    border-radius: 10px;
    filter: drop-shadow(0px 5px 0 rgba(0, 95, 255, 0.3));
}

.pix{
    background: rgb(253,158,51);
    background: linear-gradient(180deg, rgba(253,158,51,1) 0%, rgba(252,195,74,1) 100%);
    padding: 5px 10px;
    max-width: 300px;
    border-radius: 20px;
    border: solid 1px #FCC34A;
    margin: 10px auto;
    color: #030B22;
    font-weight: 600;
    font-size: 1.1rem;
}

.maincta{
    background: #2361FF;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.3rem;
    color: #fff;
    filter: drop-shadow(5px 5px 0 #0A0C25);
    display: inline-block;
    transition: all 0.2s;
}

.maincta span{
    translate: 0 0;
    transition: all 0.4s;
}

.maincta:hover{
    background: #FCC34A;
    color: #030B22;
}

.maincta:hover span{
    translate: 5px 0;
}

@keyframes balanco {
    0% {
        translate: 0px 0px
    }

    50% {
        translate: 0px 10px
    }
}

.setahr {
    display: block;
    margin: 0 auto 10px;
    animation-name: balanco;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

#ofertas{
    background: #00E4FF;
    padding: 50px 0;
    text-align: center;
}

#ofertas h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #0A0C25;
    margin-bottom: 10px;
}

#ofertas p{
    color: #0A0C25;
}

.produtos{
    margin-top: 30px;
}

.box-produto {
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 0 10px 10px;
    border: solid 2px #000;
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.6 ));
}

.box-produto img{
    border: solid 2px #000;
    border-radius: 20px;
    width: 100%;
    margin-bottom: 10px;
}

#ofertas .box-produto .preco{
    color: #0C1165;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
}

#ofertas .box-produto p{
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
}

.box-produto .cta {
    background: #FCC34A;
    color: #000;
    display: block;
    border-radius: 10px;
    border: solid 2px #000;
    padding: 15px;
    margin-top: 20px;
    transition: all 0.3s;
}

#ofertas .box-produto .cta:hover {
    color: #fff;
    background: #0057ff;
}

.box-produto h3{
    color: #000;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1;
}

#ofertas .uk-dotnav>*>* {
    border: solid 1px #000;
}

#ofertas .uk-dotnav>.uk-active>* {
    background: #000;
}

.uk-dotnav>* {
    padding-left: 4px;
}

#categorias{
    background: #FCC34A;
    padding: 50px 0;
    text-align: center;
}

#categorias h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #0A0C25;
    margin-bottom: 10px;
}

#categorias p{
    color: #0A0C25;
}

.boxcategorias{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px auto;
}

.categoria{
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 0 10px 10px;
    border: solid 2px #000;
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.8 ));
    width: 250px;
}

.categoria h3{
    border-radius: 10px;
    border: solid 2px #0A0C25;
    padding: 15px;
    background: #0F32FE;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.categoria img{
    margin-bottom: 20px;
}

.categoria p{
    font-weight: 600;
}

#cupons{
    text-align: left;
    background: #0C1165 url(../img/bg-cupons.webp) center center no-repeat;
    background-size: cover;
}

#cupons .flex{
    justify-content: center;
    gap: 30px;
}

#cupons img{
    max-height: 400px;
}

#cupons h2 {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 600;
    color: #FCC34A;
    margin-bottom: 20px;
}

#cupons p{
    max-width: 350px;
    margin-bottom: 20px;
}

#cupons a{
    background: #0F32FE;
    border-radius: 20px;
    border: solid 2px #000552;
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s;
}

#cupons a:hover{
    background: #FCC34A;
    color: #000;
}

#chamadacampeonatos{
    padding: 50px 0;
    text-align: center;
    background: #030B22;
}

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

#chamadacampeonatos .destaque{
    background: #FF4C00;
    padding: 10px 20px;
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    margin-top: 20px;
    display: inline-block;
}








#conquiste {
    padding: 50px 0;
    background: #FF7800;
    text-align: center
}

#conquiste.comercial{
    background: #0C1165;
}


#conquiste .container {
    background-image: url(../img/bg-conquiste-esquerda.webp), url(../img/bg-conquiste-direita.webp);
    background-position: center left, center right;
    background-repeat: no-repeat, no-repeat
}

#conquiste.comercial .container {
    background: none;
}

#conquiste h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #3D1D00
}

#conquiste h3{
    font-size: 1.4rem;
    font-weight: 600;
    color: #2AEFFF;
    margin-bottom: 20px;
}

.boxhabilidades{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: #0A0C25;
    padding: 20px;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto 30px;
}

.habilidade{
    background: #FF4C00;
    padding: 20px;
    width: 100px;
    border-radius: 20px;
}

.habilidade p{
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
}

#conquiste.comercial h2 {
    color: #fff;
    margin-bottom: 30px;
}

#faixa {
    height: 162px;
    background: url(../img/faixa-meio.webp) center top repeat-x;
    position: relative;
    margin: 20px auto 0;
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px 50px 0
}

.comercial #faixa{
    margin-bottom: 50px;
}

#faixa::after {
    content: "";
    width: 83px;
    height: 162px;
    background: url(../img/faixa-direita.webp) right top no-repeat;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -83px
}

#faixa::before {
    content: "";
    width: 83px;
    height: 162px;
    background: url(../img/faixa-esquerda.webp) left top no-repeat;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -83px
}

.divisaov {
    width: 3px;
    height: 90px;
    border-right: #000 dotted 5px
}

#textofaixa p {
    color: #0a1180;
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 600
}

#textofaixa p strong {
    font-size: 5rem
}

#textofaixa p.flex {
    gap: 10px;
    text-align: left
}

.risco {
    height: 3px;
    flex-grow: 1;
    background: #0a1180
}

#campeonatos {
    background: url(../img/bg-campeonatos.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}

#campeonatos.comercial{
    background: #0C1165;
    padding: 0 0 50px;
}

#campeonatos .container {
    max-width: 1440px
}

#campeonatos h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #fda111
}

#campeonatos hr {
    background: url(../img/hr-campeonatos.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 27px
}

#campeonatos .boxcampeonatos {
    background: #23004A;
    padding: 40px;
    border-radius: 60px;
    filter: drop-shadow(15px 15px 0 #5D00C1);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 20px
}

#campeonatos.comercial .boxcampeonatos {
    background: #0D2098;
    margin-bottom: 40px;
}


#campeonatos .boxcampeonatos .campeonato {
    width: 250px;
    background: #5D00C1;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    position: relative
}

#campeonatos .boxcampeonatos .campeonato p {
    font-size: .8rem;
    flex-grow: 1
}

#campeonatos .boxcampeonatos .campeonato .logocampeonato {
    height: 160px;
    display: block;
    aspect-ratio: 170/190;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: -60px
}

#campeonatos .boxcampeonatos .campeonato .logojogo {
    aspect-ratio: 130/60;
    -o-object-fit: contain;
    object-fit: contain
}

#campeonatos .boxcampeonatos .campeonato .ctacampeonato {
    justify-self: flex-end;
    display: block;
    padding: 10px;
    border-radius: 10px;
    background: #FF7800;
    color: #461900;
    filter: drop-shadow(5px 5px 0 #5D00C1);
    text-transform: lowercase;
    font-size: .8rem;
    font-weight: 600;
    transition: all .3s
}

#campeonatos .boxcampeonatos .campeonato .ctacampeonato:hover {
    background: #fcc34a;
    color: #461900
}

#campeonatos .campeonato.embreve {
    filter: grayscale(1);
    pointer-events: none
}

#linkcampeonatos{
    background: url(../img/bg--campeonatos.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center;
}

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

#linkcampeonatos h2 strong{
    color: #FCC34A;
}


.dadoscampeonatos{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.dadoscampeonatos p{
    color: #0A0C25;
    background: #FCC34A;
    padding: 10px 20px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 20px;
}

#linkcampeonatos a{
    display: inline-block;
    background: #2361FF;
    color: #fff;
    padding: 10px 50px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3;
}

#linkcampeonatos a:hover{
    color: #0A0C25;
    background: #FCC34A;
}

#calendario {
    background: url(../img/bg-campeonatos.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}

#calendario .container {
    max-width: 1440px
}

#calendario h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #fda111;
    text-wrap: balance;
    margin-bottom: 20px
}

#calendario .boxcalendario {
    background: #0A0C25;
    padding: 40px;
    border-radius: 60px;
    filter: drop-shadow(15px 15px 0 rgba(0, 0, 0, 0.25));
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 20px
}

#calendario .boxcalendario .evento {
    background: #FF7800;
    width: 255px;
    padding: 0;
    border-radius: 15px;
    position: relative;
    border: solid 1px #0a0c25
}

#calendario .boxcalendario .evento .fotoevento {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;

}

#calendario .boxcalendario .evento .fotoevento h3 {
    position: absolute;
    bottom: 10px;
    width: 100%;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    font-size: .9rem;
}

#calendario .boxcalendario .evento .dadosevento {
    padding: 20px 20px 30px
}

#calendario .boxcalendario .evento .dadosevento p {
    color: #000;
    font-size: .8rem;
    font-weight: 600
}

#calendario .boxcalendario .evento .finalevento {
    position: absolute;
    bottom: -20px;
    width: 100%
}

#calendario .boxcalendario .evento .finalevento p {
    padding: 10px;
    border-radius: 10px;
    background: #5D00C1;
    color: #fff;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.3));
    font-size: .8rem;
    font-weight: 600;
    border: solid 1px #0a0c25;
    display: inline-block
}

#calendario .boxcalendario .evento .finalevento .hora {
    background: #fff;
    border-radius: 5px;
    padding: 2px 5px;
    color: #0a0c25;
    margin: 0 5px
}

#transmissoes {
    background: url(../img/bg-topo.webp) center bottom no-repeat;
    background-size: cover;
    padding: 30px 0 10px;
    text-align: center
}

#transmissoes h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
    margin-bottom: 20px
}

#transmissoes p {
    margin-bottom: 20px
}

#transmissoes p.embreve {
    font-size: 1.4rem;
    color: #fcc34a;
    font-weight: 600;
    margin-bottom: 0
}

#transmissoes hr {
    background: url(../img/hr-transmissoes.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 41px
}

#inscricao.formulario {
    background: #0a0c25;
    padding: 0 0 30px
}

#inscricao.aram {
    background: url(../img/aram-bg.webp) center center no-repeat;
    background-size: cover;
    padding: 30px 0;
}

#inscricao.aram .containerform{
    margin-bottom: 30px;
}

.formulario .containerform.encerrado .imgcontainer{
    max-width: 500px;
}

.formulario .containerform.encerrado .form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}

.formulario .containerform.valorant {
    width: fit-content;
    margin: 30px auto;
}

#inscricao.formulario .imgcontainer {
    display: block;
    padding: 50px 30px;
    text-align: left;
    flex-grow: 1;
    width: 100%;
    min-width: 320px;
    max-width: 400px;
    
}

#inscricao.formulario .imgcontainer img {
    margin-bottom: 30px
}

#inscricao.formulario .imgcontainer h3 {
    color: #00e4ff;
    font-weight: 600;
}

#inscricao.formulario .form.valorant h3 {
    color: #0F32FE;
    font-weight: 600;
    font-size: 1rem;
}

#inscricao.formulario .imgcontainer p {
    margin-bottom: 10px
}

#inscricao.formulario .imgcontainer .cta, #inscricao.formulario .form.valorant .cta  {
    background: #0f32fe;
    display: block;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.3));
    transition: all .3s
}

#inscricao.formulario .imgcontainer .cta:hover, #inscricao.formulario .form.valorant .cta:hover {
    background: #fda111;
    color: #0a0c25
}

#inscricao.formulario .imgcontainer.lol {
    background: url(../img/lateral-form-lol.webp) center top no-repeat;
    background-size: cover
}

#inscricao.formulario .imgcontainer.tft {
    background: url(../img/lateral-form-lol.webp) center top no-repeat;
    background-size: cover
}

#inscricao.formulario .imgcontainer.sf {
    background: url(../img/lateral-form-lol.webp) center top no-repeat;
    background-size: cover
}

#inscricao.formulario .imgcontainer.cs {
    background: url(../img/cs2025-lateralform.webp) center top no-repeat;
    background-size: cover
}

#inscricao.formulario .imgcontainer.valorant {
    background: url(../img/lateral-form-valorant.webp) center top no-repeat;
    background-size: cover;
    max-width: 300px;
}

#inscricao.formulario .imgcontainer.vip {
    background: #101757;
    max-width: 300px;
}




#inscricao.formulario .imgcontainer.brawlstars {
    background: url(../img/lateral-form-brawlstars.webp) center top no-repeat;
    background-size: cover
}

#inscricao.formulario .regras {
    padding: 20px;
    border: solid 1px #C7CBE1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin: 10px 0;
    background: #C7CBE1;
}

#inscricao.formulario .regras strong {
    color: #5D00C1;
    font-weight: normal;
}

.formulario {
    background: #FF7800;
    padding: 50px 0;
    text-align: center
}

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

.formulario .containerform {
    background: #fff;
    border-radius: 60px;
    overflow: hidden;
    justify-content: space-between;
    align-items: stretch
}

.formulario .containerform .imgcontainer {
    width: 30%;
    background: url(../img/lateral-form.webp) center top no-repeat;
    background-size: cover;
    display: block
}

.formulario .containerform .form {
    flex-grow: 1;
    text-align: left;
    padding: 30px;
    box-sizing: border-box
}

.formulario .containerform .form h3 {
    font-size: 1.6rem;
    color: #0a0c25;
    margin-bottom: 10px;
    font-weight: 900;
    line-height: 1
}

.formulario .containerform .form hr {
    background: #6100C1;
    width: 80px;
    height: 5px;
    border: none;
    margin: 0 0 10px;
    transform: skew(-30deg, 0)
}

.formulario .containerform .form label,
.formulario .containerform .form h4 {
    color: #0a0c25;
    font-size: .8rem;
    font-weight: 600;
    display: block
}

.formulario .containerform .form p {
    color: #0a0c25;
    font-size: .8rem;
    font-weight: 400;
    display: block;
    margin-bottom: 20px;
    max-width: 780px;
}

.formulario .containerform .form label.checkbox {
    display: inline-block
}

.formulario .containerform .form input {
    border: solid 1px #c7cbe1;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    font-size: .8rem
}

.formulario .containerform .form input[type=checkbox] {
    width: auto;
    margin: 0
}

.formulario .containerform .form input[type=submit] {
    background: #6100C1;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.3));
    color: #fff;
    font-size: 1rem;
    padding: 10px;
    margin-top: 20px;
    cursor: pointer;
    transition: all .3s
}

.formulario .containerform .form input[type=submit]:hover {
    background: #fcc34a;
    color: #6100C1
}

.formulario .containerform .form .boxcheckbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 1px #c7cbe1;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 10px
}

.formulario .containerform .form select {
    border: solid 1px #c7cbe1;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    flex-grow: 1;
    box-sizing: border-box;
    font-size: .8rem
}

.formulario .containerform .form #aniversario, .formulario .containerform .form #aniversario2 {
    display: none
}

.formulario .containerform .form .flex {
    justify-content: flex-start;
    gap: 20px
}

.formulario .containerform .form .flex div {
    flex-grow: 1
}

.formulario .containerform .form .flex.datas {
    gap: 5px
}

#participar {
    background: #0a0c25;
    padding: 0 0 50px;
    text-align: center
}

#participar .container {
    background: #fff;
    padding: 30px;
    border-radius: 40px;
    box-sizing: border-box
}

#participar h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #0f32fe;
    margin-bottom: 10px
}

#participar p {
    color: #0a0c25
}

#embaixadores {
    background: url(../img/bg-embaixador-lol.webp) center center no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}

#embaixadores.tft {
    background: url(../img/bg-embaixador.webp) center center no-repeat;

}

#embaixadores hr {
    background: url(../img/hr-embaixadores.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 26px
}

#embaixadores h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #FFF;
    display: inline-block
}

#embaixadores .boxembaixadores {
    gap: 30px;
    flex-wrap: wrap
}

#embaixadores .boxembaixadores .embaixador {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    border: solid 2px #0b1451;
    filter: drop-shadow(5px 5px 0 #0B1451);
    min-width: 250px
}

#embaixadores .boxembaixadores .embaixador img {
    border-radius: 15px;
    border: solid 2px #0b1451;
    margin-bottom: 10px
}

#embaixadores .boxembaixadores .embaixador h3 {
    font-weight: 900;
    color: #0b1451;
    margin-bottom: 10px;
    font-size: 1.2rem
}

#embaixadores .boxembaixadores .embaixador a {
    color: #fff;
    padding: 10px;
    border-radius: 15px;
    background: #5a3e85;
    border: solid 2px #0b1451;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all .3s
}

#embaixadores .boxembaixadores .embaixador a:hover {
    background: #fda111;
    color: #0a0c25
}

#premiacao {
    background: #0a0c25;
    padding: 50px 0;
    text-align: center
}

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

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

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

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

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

#premiacao h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #0a0c25;
    margin-bottom: 30px;
    padding: 10px 30px;
    background: #fcc34a;
    display: inline-block
}

#premiacao h3 {
    color: #fcc34a;
    font-size: 1.6rem;
    font-weight: 600;
    display: block;
    margin: 30px 0;
}

#premiacao .destaque {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 30px;
}

#premiacao hr {
    background: url(../img/hr-premiacao.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 41px
}

#premiacao .boxpremiacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

#premiacao .boxpremiacao .premio {
    padding: 20px;
    border: solid 1px #3571ec;
    border-radius: 20px;
    background: #5D00C1 url(../img/risquinhos.webp) right 10px top 10px no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 350px;
    box-sizing: border-box;
}

#premiacao .boxpremiacao .premio .trofeupremio {
    background: #0057ff;
    border-radius: 10px;
    padding: 20px 30px
}

#premiacao .boxpremiacao .premio p {
    color: #c5e2f5;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: left
}

#premiacao .boxpremiacao .premio p strong {
    font-size: 1.4rem
}

#premiacao .boxpremiacao .premio.ouro {
    background: #fcc34a url(../img/risquinhos.webp) right 10px top 10px no-repeat;
    border: solid 1px #fcc34a
}

#premiacao .boxpremiacao .premio.ouro p {
    color: #1c2639
}

#premiacao .boxpremiacao .premio.prata {
    background: #e6e6e6 url(../img/risquinhos.webp) right 10px top 10px no-repeat;
    border: solid 1px #e6e6e6
}

#premiacao .boxpremiacao .premio.prata p {
    color: #1c2639
}

#premiacao .boxpremiacao .premio.bronze {
    background: #f39345 url(../img/risquinhos.webp) right 10px top 10px no-repeat;
    border: solid 1px #f39345
}

#premiacao .boxpremiacao .premio.bronze p {
    color: #1c2639
}



#premiacao.sf h2 {
    background: #68e4ff;
    border: solid 2px #000;
    filter: drop-shadow(5px 5px 0 #000000)
}

#premiacao.sf #faixa {
    margin-bottom: 50px
}

#premiacao.sf #textofaixa p {
    color: #1c2639
}

.barfight {
    padding: 20px;
    border-radius: 20px;
    border: solid 1px #5D00C1;
    margin: 30px auto 0;
    width: -moz-fit-content;
    width: fit-content;
    background: #0A0C25;
}

.barfight h3 {
    color: #fff;
    margin: 0 0 20px;
    font-size: 1.3rem
}

.barfight h3 strong {
    color: #68e4ff
}

.barfight .flex {
    gap: 20px
}

.barfight .flex strong {
    font-size: 1.1rem
}

#savethedate {
    background: url(../img/bg-save-the-date-sf.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}

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

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

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

#savethedate.brawlstars {
    background: url(../img/bg-save-the-date-brawlstars.webp) center top no-repeat;
    background-size: cover;
}

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

#savethedate.valorant {
    background: url(../img/bg-save-the-date-valorant.webp) center top no-repeat;
    background-size: cover;
}

#savethedate h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    background: #fcc34a;
    color: #000;
    margin-bottom: 20px;
    border: solid 2px #000;
    filter: drop-shadow(5px 5px 0 #000);
    padding: 10px 30px;
    display: inline-block
}

#savethedate .boxsavethedate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap
}

#savethedate .boxsavethedate .date {
    width: 270px;
    box-sizing: border-box;
    background: #0a0c25;
    border: solid 2px #0057ff;
    padding: 20px
}

#savethedate .boxsavethedate .date .destaque {
    margin: 5px 0;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px
}

#savethedate .boxsavethedate .date .destaque strong {
    color: #68e4ff;
    text-transform: uppercase
}

#savethedate .boxsavethedate .date .ft {
    font-weight: 600
}

#savethedate .boxsavethedate .date .hora {
    background: #0057ff;
    padding: 5px;
    border-radius: 5px;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px
}

#savethedate .boxsavethedate .date.final {
    border: solid 2px #fcc34a
}

#savethedate .boxsavethedate .date.final .destaque strong {
    color: #fcc34a
}

#savethedate .boxsavethedate .date.final .hora {
    background: #fcc34a;
    color: #03040d
}

@keyframes sino {
    0% {
        rotate: 0deg
    }

    33% {
        rotate: 50deg
    }

    66% {
        rotate: -50deg
    }
}

#final {
    background: url(../img/bg-final.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0px;
    text-align: center
}

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

#final hr {
    background: url(../img/hr-final.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 26px
}

#final p {
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff
}


#final p a{
    font-weight: 900;
    font-size: 1.2rem;
    color: #FF7800
}

#final .container {
    background: url(../img/frufru-final.webp) center center no-repeat;
    background-size: contain
}

#final .boxpessoas {
    gap: 30px;
    flex-wrap: wrap;
    margin: 30px 0
}

#final .boxpessoas .pessoa {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    border: solid 2px #0b1451;
    min-width: 250px;
    position: relative
}

#final .boxpessoas .pessoa img {
    border-radius: 15px;
    border: solid 2px #0b1451;
    margin-bottom: 10px
}

#final .boxpessoas .pessoa h3 {
    font-weight: 900;
    color: #0b1451;
    margin-bottom: 10px;
    font-size: 1.2rem
}

#final .boxpessoas .pessoa a {
    color: #fff;
    padding: 10px;
    border-radius: 15px;
    border: solid 2px #0b1451;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all .3s
}

#final .boxpessoas .pessoa a.twitch {
    background: #5a3e85
}

#final .boxpessoas .pessoa a.twitch:hover {
    background: #fda111;
    color: #0a0c25
}

#final .boxpessoas .pessoa a.youtube {
    background: red
}

#final .boxpessoas .pessoa a.youtube:hover {
    background: #fda111;
    color: #0a0c25
}

#final .boxpessoas .pessoa .cargo {
    position: absolute;
    top: -10px;
    width: 100%;
    left: 0
}

#final .boxpessoas .pessoa .cargo p {
    background: #fff;
    text-align: center;
    display: inline-block;
    padding: 10px;
    border: solid 2px #0b1451;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: .8rem;
    color: #000;
}

#final .ctasininho {
    display: inline-block;
    background: #0f32fe;
    border: solid 2px #0a0c25;
    padding: 20px 40px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    transition: all .3s
}

#final .ctasininho img {
    transition: all .3s;
    scale: 1;
    rotate: 0deg
}

#final .ctasininho:hover {
    background: #fff;
    color: #0f32fe
}

#final .ctasininho:hover img {
    animation-name: sino;
    animation-duration: .3s;
    animation-iteration-count: infinite;
    scale: 1.2
}

#ranking.lol {
    background: url(../img/bg-embaixador-lol.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 20px;
    text-align: center
}

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

#ranking p {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px
}

#ranking .cta {
    background: #5D00C1;
    padding: 10px 30px;
    display: inline-block;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    border: solid 2px #0a0c25;
    filter: drop-shadow(5px 5px 0 #5D00C1);
    font-size: 1.4rem;
    transition: all .3s
}

#ranking .cta:hover {
    filter: drop-shadow(-5px -5px 0 #5D00C1)
}

#podcasts {
    background: #fff;
    padding: 50px 20px;
    text-align: center
}

#podcasts h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #0a0c25;
    margin-bottom: 0px
}

#podcasts hr {
    background: url(../img/hr-podcast.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 23px
}

#podcasts p {
    color: #0a0c25
}

#podcasts #slider {
    margin: 30px auto 0
}

#podcasts .podcast {
    display: flex;
    justify-content: center;
    align-items: center
}

#podcasts .podcast .apresentadores,
#podcasts .podcast .blocojogo {
    position: relative
}

#podcasts .podcast .infos {
    position: absolute;
    bottom: 20px;
    left: 0
}

#podcasts .podcast .apresentadores .infos {
    width: 100%;
    text-align: center
}

#podcasts .podcast .apresentadores .infos h3 {
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    padding: 0 10px
}

#podcasts .podcast .apresentadores .infos p {
    color: #fff;
    padding: 0 10px
}

#podcasts .podcast .blocojogo .infos {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px
}

#podcasts .podcast .blocojogo .infos .cta {
    background: #edf4f8;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 20px;
    color: #030b22;
    transition: all .3s
}

#podcasts .podcast .blocojogo .infos .cta:hover {
    background: #fda111;
    color: #0a1180
}

#podcasts .podcast .blocojogo .infos p {
    color: #fff
}

#podcasts .uk-slider-nav {
    margin: 20px auto 0;
    justify-content: center;
    align-items: center
}

#discord {
    background: #0A0C25;
    padding: 50px 20px;
    text-align: center
}

#discord h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #FF7800;
    margin-bottom: 20px
}

#discord .ctadiscord {
    background: #5865F2;
    display: inline-block;
    padding: 10px 30px;
    border: solid 2px #0a0c25;
    border-radius: 10px;
    color: #fff;
    margin-top: 20px;
    filter: drop-shadow(5px 5px 0 #5865F2);
    transition: all .3s
}

#discord .ctadiscord:hover {
    filter: drop-shadow(-5px -5px 0 #5865F2)
}

#faq {
    background: #2B0370;
    padding: 50px 20px;
    text-align: center
}

#faq h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #68E4FF;
    margin-bottom: 30px
}

#faq p{
    margin-bottom: 10px;
}

#faq li {
    background: #5C00BD;
    padding: 15px 20px;
    border-radius: 10px;
    text-align: left
}

#faq li h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0px
}

#faq li a {
    color: #f39345;
    font-weight: 600
}

#faq li .uk-accordion-title::before {
    background: url(../img/seta-faq.webp) center center no-repeat;
    background-size: contain;
    rotate: 180deg;
    transition: all .3s
}

#faq .uk-open .uk-accordion-title::before {
    rotate: 0deg
}

#maisbuscados {
    background: #FF7800;
    padding: 50px 20px;
    text-align: center
}

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

#maisbuscados .termos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto
}

#maisbuscados .termos a {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 3px;
    background: #592A00;
    color: #fff;
    font-size: .8rem
}

#maisbuscados .termos a:hover {
    background: #f04700
}

#maisbuscados #oquee {
    margin-bottom: 50px
}

#maisbuscados #oquee h2 {
    color: #fff;
}

#maisbuscados #oquee p{
    margin-bottom: 10px;
}

#maisbuscados #oquee a {
    color: #fff;
    font-weight: 600
}


#instrucoes {
    background: #0a0c25;
    padding: 0 0 30px;
    text-align: center;
    
}

#instrucoes h2 {
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 900;
    background: #fcc34a;
    color: #000;
    margin: 0 20px;
    border: solid 2px #000;
    filter: drop-shadow(5px 5px 0 #000);
    padding: 10px 30px;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.boxinstrucoes{
    background: #ddd url(../img/risquinhos-preto.webp) right 20px top 20px no-repeat;
    padding: 80px 40px 40px;
    border-radius: 30px;
    filter: drop-shadow(15px 15px 0 #0F32FE);
    translate: 0 -30px;
    position: relative;
    z-index: 1;
}

.instrucao{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.numero{
    padding: 30px 0;
    text-align: center;
    background: #0F32FE;
    border: solid 1px #0B1451;
    filter: drop-shadow(5px 5px 0 #0B1451);
    border-radius: 10px;
    width: 90px;
    flex-shrink: 0;
}

.numero p{
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

.passo{
    text-align: left;
    color: #0A0C25;
    font-size: 1.2rem;
    font-weight: 600;
}

.passo a{
    color: #0F32FE;
    font-weight: 600;
}


#confirma{
    background: #00E4FF;
    padding: 50px 0;
    text-align: center;
}

#confirma h2{
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #0A0C25;
    margin-bottom: 20px; 
}

#confirma h2 img{
    margin-bottom: 20px;
}

#confirma p{
    color: #0A0C25;
    font-size: 1.2rem;
    font-weight: 600;
}

#lives{
    background: #FF4C00 url(../img/jp-emerson.webp) center bottom no-repeat;
    background-size: contain;
    text-align: center;
    
}

#lives .container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 500px;
    gap: 20px;
}

#lives .jp-emerson{
    max-height: 500px;
}

#lives .lives{
    background: rgba(33, 35, 74, 0.75) ;
    padding: 30px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    max-width: 250px;
    border: solid 2px #FF7426;
}

#lives .lives h2{
    color: #FCC34A;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.jp-emerson{
    display: none;
}

#lives .ctasininho {
    display: inline-block;
    background: #FCC34A;
    border: solid 2px #0B0D30;
    padding: 10px 20px;
    color: #0B0D30;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 20px  auto 0;
    transition: all .3s
}

#lives .ctasininho img {
    transition: all .3s;
    scale: 1;
    rotate: 0deg
}

#lives .ctasininho:hover {
    background: #fff;
    color: #0f32fe
}

#lives .ctasininho:hover img {
    animation-name: sino;
    animation-duration: .3s;
    animation-iteration-count: infinite;
    scale: 1.2
}

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

#app .container {
    gap: 20px;
}

#conteudoapp {
    background: #0C1165;
    border: solid 3px #FF9900;
    width: 350px;
    padding: 40px;
    border-radius: 40px;
    text-align: center;
    margin: 30px 0;
}

#conteudoapp h2 {
    color: #fff;
    font-weight: 600;
    margin: 10px 0;
    font-size: 1.4rem;
}

#conteudoapp h3 {
    color: #fff;
    font-weight: 600;
    margin: 10px 0;
    font-size: 1rem;
}

#conteudoapp p {
    margin-bottom: 10px;
    color: #fff;
}

.vantagensapp {
    background: #0047FF;
    border-radius: 20px;
    padding: 20px 10px;
}

#ninjaapp img {
    max-height: 600px;
    scale: 1.02;
    transform-origin: bottom right;
}

#app .cta {
    background: #0F32FE;
    color: #fff;
    font-size: 1rem;
    padding: 10px 30px;
    border-radius: 10px;
    display: inline-block;
    margin: 30px auto 0;
    font-weight: 600;
}

#app .uk-dotnav>*>* {
    border: solid 1px #fff;
}

#app .uk-dotnav>.uk-active>* {
    background: #fff;
}


#cupons{
    text-align: left;
    background: #0C1165 url(../img/bg-cupons.webp) center center no-repeat;
    background-size: cover;
}

#monteoseu{
    text-align: left;
    background: #0C1165;
    background-size: cover;
    padding: 50px;
}


#monteoseu .flex{
    justify-content: center;
    gap: 50px;
}

#monteoseu img{
    max-height: 400px;
}

#monteoseu h2 {
    text-transform: uppercase;
    font-size: 2.4rem;
    font-weight: 600;
    color: #FCC34A;
    margin-bottom: 20px;
}

.customiza{
    margin: 0 10px ;
}

#monteoseu p{
    max-width: 300px;
    margin-bottom: 20px;
}

#monteoseu a{
    background: #0F32FE;
    border-radius: 20px;
    border: solid 2px #000552;
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    display: block;
    transition: all 0.3s;
    text-align: center;
}

#monteoseu a:hover{
    background: #FCC34A;
    color: #000;
}

#comprasegura {
    padding: 50px 0;
    background: #F3F3F3;
    text-align: center;
}

#comprasegura p.descricao{
    color: #707070;
}

.bignumbers {
    margin: 30px 0;
    color: #707070;
    line-height: 1;
}

.bignumbers .bignumero {
    color: #071D92;
    font-size: 6rem;
    font-weight: 600;
    line-height: 1;
}

.bignumbers .unidade {
    color: #071D92;
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase
}

.logosseguros {
    margin-bottom: 30px
}

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

#comprasegura .cta {
    background: #0F32FE;
    border: solid 2px #000552;
    color: #fff;
    font-size: 1rem;
    padding: 10px 30px;
    border-radius: 10px;
    display: inline-block;
    margin: 30px auto 0;
    transition: all 0.3s;
}

#comprasegura .cta:hover {
    background: #fcc34a;
    color: #000552;
}

#times{
    background: #0F32FE;
    text-align: center;
    padding: 50px 0;
}

#times h2{
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #FDA111;
    margin-bottom: 0;
}

#times hr {
    background: url(../img/hr-times.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 26px;
    margin-bottom: 30px;
}

.boxtimes{
    padding: 30px;
    border-radius: 30px;
    background: #0A0C25;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.time{
    width: 200px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
}

.time img{
    max-height: 100px;
    margin-bottom: 10px;
}

.time h3{
    color: #0A0C25;
}

#jogadaninja{
    background: #5c00bf url(../img/bg-topo.webp) center top no-repeat;
    text-align: center;
    color: #fff;
    padding: 50px 0;
}

#jogadaninja h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    background: #FF7800;
    color: #000;
    margin-bottom: 20px;
    border: solid 2px #000;
    filter: drop-shadow(5px 5px 0 #000);
    padding: 10px 30px;
    display: inline-block
}

#jogadaninja h3{
    color: #02FAFC;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 600;
}

.boxparticiparjogada{
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px 0;
    gap: 10px;
}

.boxparticiparjogada .info{
    background: #fff;
    color: #0C116D;
    padding: 30px;
    width: 200px;
    filter: drop-shadow(5px 5px 0 #0C116D);
    border: solid 1px #0C116D;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.boxparticiparjogada .info a{
    font-weight: 600;
    color: #0C116D;
    transition: all 0.1s;
}

.boxparticiparjogada .info a:hover{
    color: #FF4C00;
}

#jogadaninja .boxmodalidades{
    background: #0C116D;
    padding: 30px;
    border-radius: 30px;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.25));
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.premiojogada{
    background: #EEEEEE;
    padding: 20px 0 10px;
    margin: 0 auto;
}

#jogadaninja .premiojogada h2{
    color: #0F32FE;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2rem;
    background: none;
    padding: none;
    border: none;
    filter: none;
    margin-bottom: 10px;
}

.premiojogada p.destaque{
    color: #0C116D;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 5rem;
}

.premiojogada p.periodo{
    background: #5D00C1;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    border: solid 1px #0A0C25;
}

.premiojogada p.periodo strong{
    padding: 2px 5px;
    background: #fff;
    border-radius: 5px;
    color: #0A0C25;
    display: inline-block;
}

.premiojogada hr {
    background: url(../img/hr-jogada-ninja.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 23px
}

#jogadaninja .temmais{
    padding: 50px 0;
    background: #FF7800;
}

#jogadaninja .temmais h2{
    background: #fff;
    color: #0C116D;
}

.smzinho{
    background: #fff;
    color: #0C116D;
    padding: 30px;
    width: fit-content;
    margin: 30px auto;
    filter: drop-shadow(5px 5px 0 #0C116D);
    border: solid 1px #0C116D;
    border-radius: 30px;
}

#jogadaninja .smzinho h3{
    color: #0B1451;
    margin: 20px 0 0;
    text-transform: none;
}

#jogadaninja .temmais .cta{
    background: #FCC34A;
    color: #0C116D;
    padding: 20px;
    border-radius: 5px;
    filter: drop-shadow(5px 5px 0 #0C116D);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.2rem;
    transition: all 0.3s;
}

#jogadaninja .temmais .cta img{
    translate: 0 0;
    transition: all 0.1s;
}

#jogadaninja .temmais .cta:hover{
    background: #fff;
}

#jogadaninja .temmais .cta:hover img{
    translate: -2px -2px;
    transition: all 0.1s;
}

.logopatrocinador{
    max-width: 200px;
    margin: 20px auto 30px;
}

#patrocinadores{
    background: #0F32FE;
    text-align: center;
    color: #fff;
    padding: 50px 0;
}

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

.ninjavip{
    filter: drop-shadow(0 0 80px #00F0FF);
}

#inscricao.formulario .containerform.vip{
    background: #101757;
}

#inscricao.formulario .containerform.vip .form{
    background: #fff;
}

#inscricao.formulario .imgcontainer.vip h3{
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #fff;
} 

#inscricao.formulario .form h4{
    margin-bottom: 5px;

} 

#inscricao.formulario .imgcontainer.vip h3 strong{
    color: #68E4FF;
} 

#inscricao.formulario .imgcontainer.vip p{
    margin-bottom: 30px;
} 

#inscricao.formulario .form .flex.vip {
    flex-wrap: wrap;   
    gap: 10px; 
    margin-bottom: 20px;
} 

#inscricao.formulario .form .flex.vip .boxcheckbox {
    width: 49%;
    margin-bottom: 0;
    flex-grow: 0;
}

#afiliados {
    background: url(../img/bg-afiliados.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}

#afiliados .container {
    max-width: 1440px
}

#afiliados h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #FF7800
}

#afiliados hr {
    background: url(../img/hr-afiliados.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 20px
}

.vantagensafiliados{
    align-items: stretch;
    margin: 30px 0;
}

.vantagensafiliados .vantagem {
    background: #fff;
    color: #0C116D;
    padding: 20px;
    width: 200px;
    filter: drop-shadow(5px 5px 0 #0C116D);
    border: solid 1px #0C116D;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.vantagensafiliados .vantagem p{
    font-weight: 600;
}

#afiliados .cta{
    display: inline-block;
    padding:10px 30px;
    border-radius: 10px;
    background: #FF7800;
    color: #461900;
    filter: drop-shadow(5px 5px 0 #1A0037);
    font-size: 1rem;
    font-weight: 600;
    transition: all .3s;
    margin-bottom: 30px;
}

#afiliados .cta:hover{
    background: #0CF8FD;
    color: #000;
}

p.alerta{
    background: #28036D;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    width: fit-content;
    margin: 0 auto 30px;
    font-size: 0.8rem;
}

#afiliados p a{
    color: #FF7800;
}

#afiliados p a:hover{
    color: #68E4FF;
}

#aquelesninjas {
    background: #FF7800;
    padding: 50px 0;
    text-align: center
}

#aquelesninjas .container {
    max-width: 1440px
}

#aquelesninjas h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

#aquelesninjas hr {
    background: url(../img/hr-campeonatos.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 27px
}

#aquelesninjas .boxaquelesninjas {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px
}


#aquelesninjas .boxaquelesninjas .evento{
    width: 250px;
    background: #23004A;
    filter: drop-shadow(5px 5px 0 rgba(0,0,0,0.25));
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative
}

#aquelesninjas .boxaquelesninjas .evento p {
    font-size: .8rem;
    flex-grow: 1;
    margin-bottom: 0;
    color: #fff;
}

#aquelesninjas .boxaquelesninjas .evento .logojogo {
    aspect-ratio: 130/50;
    -o-object-fit: contain;
    object-fit: contain
}

#aquelesninjas .boxaquelesninjas .evento p.data{
    color: #FF7800;
    font-weight: 600;
    font-size: 1.4rem;
    margin: 10px 0;
}

#aquelesninjas .boxaquelesninjas .evento p.data a{
    background: #FF7800;
    color: #461900;
    padding: 5px 10px;
    border-radius: 5px;
    display: block;
    font-size: 1rem;
    transition: all 0.3s;
    margin: 0;
}

#aquelesninjas .boxaquelesninjas .evento p.data a:hover{
    background: #68E4FF;
    color: #461900;
}

#aquelesninjas .boxaquelesninjas .evento p.hosts{
    color: #FF7800;
    font-weight: 600;
    font-size: 1rem;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}

#aquelesninjas .boxaquelesninjas .evento p.convidado{
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

#patrocinio {
    background: url(../img/bg-afiliados.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center
}


#patrocinio h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #FF7800
}

#patrocinio hr {
    background: url(../img/hr-final.webp) center top no-repeat;
    background-size: contain;
    border: none;
    height: 26px
}

#patrocinio .boxpatrocinio img{
    width: 150px;
    aspect-ratio: 3 / 1;
    object-fit: contain;
    overflow: hidden;
}




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

@media screen and (max-width: 1155px) {
    a.btcalendario {
        display: none
    }

    #calendario .boxcalendario {
        flex-wrap: wrap;
        gap: 50px
    }

    #ninjaapp img{
        scale: 1;
    }

    #conteudoapp{
        width: 280px;
    }

    #lives .container{
        justify-content: space-between;
    }

    #inscricao.formulario .form .flex.vip .boxcheckbox {
        width: 100%;

    }

}

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

    #lives{
        background: #FF4C00;
        padding: 50px 0 0;
    }

    .jp-emerson{
        display: block;
        max-height: 400px;
    }

    #lives .container{
        flex-direction: column;
        justify-content: center;
        min-height: auto;
    }

    #lives .lives{
        max-width: none;
        width: calc(100% - 80px) ;
    }

    

    header .center {
        gap: 20px;
        justify-content: space-between;
        margin: 0 20px
    }

    #faixa::after,
    #faixa::before {
        display: none
    }

    #faixa {
        background: #fff;
        border: solid 3px #03040d;
        padding: 20px;
        border-radius: 20px
    }

    #textofaixa p strong {
        font-size: 3rem
    }

    .boxcampeonatos {
        flex-wrap: wrap
    }

    .formulario .containerform .imgcontainer {
        display: none
    }

    #app .container{
        flex-direction: column;
        gap: 0;
    }

    #conteudoapp{
        width: 100%;
        margin: 0;
    }

    #ninjaapp img{
        max-height: 300px;
        scale: 1.1;
    }

    #app{
        padding: 20px;
    }

    .bignumbers{
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media screen and (max-width: 800px) {
    .podcast {
        flex-direction: column
    }

    .podcast div {
        flex-grow: 1
    }

    .apresentadores {
        width: 100%
    }

    .apresentadores img {
        aspect-ratio: 2/1.7;
        display: block;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

    #podcasts .podcast .blocojogo .infos {
        flex-direction: column-reverse;
        gap: 10px
    }

    #inscricao.formulario .containerform {
        flex-direction: column
    }

    #inscricao.formulario .imgcontainer {
        width: auto;
        text-align: center;
        min-width: auto
    }

    #cupons{
        text-align: center;
        padding-top: 50px;
    }

    #cupons .flex{
        flex-direction: column;
    }

    #monteoseu{
        text-align: center;
        padding-top: 50px;
    }

    #monteoseu .flex{
        flex-direction: column;
    }

    #inscricao.formulario .imgcontainer.vip{
        text-align: center;
        max-width:none;
    }

    .icofloat{
        display: none;
    }
}

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

    .boxhabilidades{
        flex-direction: column;
    }

    .seta-branca{
        rotate: 90deg;
    }

    main.interna .logoh1 {
        max-width: 100%
    }

    #faixa {
        flex-direction: column;
        height: auto
    }

    .divisaov {
        display: none
    }

    .formulario .containerform .form .flex {
        flex-direction: column;
        gap: 10px
    }

    .formulario .containerform .form .flex div {
        width: 100%
    }

    .formulario .containerform .form .flex.datas {
        flex-direction: row
    }

    .regrasidade {
        flex-direction: column
    }

    .instrucao{
        flex-direction: column;
        gap: 10px;
    }

    .numero{
        padding: 20px 0;
    }

    .numero p{
        font-size: 1rem;
    }

    .passo{
        text-align: center;
    }
}



@media screen and (max-width: 460px) {
    main h1 {
        font-size: 1.4rem
    }

    #conquiste h2,
    #campeonatos h2,
    #calendario h2,
    #transmissoes h2,
    .formulario h2,
    #podcasts h2,
    #discord h2,
    #faq h2,
    #maisbuscados h2,
    #participar h2,
    #embaixadores h2,
    #premiacao h2,
    #ranking h2,
    #savethedate h2,
    #final h2,
    #confirma h2,
    #cupons h2, 
    #monteoseu h2 {
        font-size: 1.4rem;
        line-height: 1;
    }

    #confirma h2 img{
        display: block;
        margin: 10px auto 20px;
    }

    #textofaixa p strong {
        font-size: 1.4rem
    }

    .trofeupremio {
        display: none
    }

    #premiacao .boxpremiacao .premio p {
        text-align: center
    }

    .barfight .flex {
        flex-direction: column
    }

    .porcentagem strong{
        font-size: 2.8rem;
    }

    main.comercial h2{
        font-size: 1.8rem;
    }
}