*{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}
a:hover{
    text-decoration: none;
}
@font-face {
    font-family: 'Exo';
    font-style: normal;
    src: url("../font/Exo-Regular.woff");
  }
  @font-face {
    font-family: 'Exo-Bold';
    font-style: Bold;
    src: url("../font/Exo-ExtraBold.woff");
  }
  @font-face {
    font-family: 'Exo-Black';
    font-style: Black;
    src: url("../font/Exo-Black.woff");
  }
   @font-face {
    font-family: 'Exo-Medium';
    font-style: Medium;
    src: url("../font/Exo-Medium.woff");
  }

 @font-face {
    font-family: 'Exo-Light';
    font-style: Light;
    src: url("../font/Exo-Light.woff");
  }
  
    @font-face {
    font-family: '8Bit';
    font-style: Normal;
    src: url("../font/PressStart2P.woff");
  }
  @font-face {
    font-family: 'Social-Circles';
    src: url("../font/Social-Circles.ttf.woff") format("woff"), url("../font/Social-Circles.ttf.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  body, html {
    background: #043043;
    height: 100%;
    color: #34394b;
    font-family: Exo;
    font-style: normal;
    font-size: 16px;
  }
  
  h1, h2, h3, h4, h5, h6, p {
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.1em;
    font-family: Exo;
    font-style: normal;
    font-weight: 100;
}

  p {
    font-size: 1.1rem;
    color: #34394b;
    line-height: 1.3em;
  }
  
  .nav {
    background: #00aeff;
    padding: 20px 0;
    z-index: 2;
  }
  
  .nav .uk-container .uk-flex-middle {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
  .menu {
    font-family: 'Exo';
    font-style: normal;
    font-weight: normal;
  }
  
  .menu a {
    color: #0b364a;
    text-decoration: none;
    font-size: 1rem;
    padding: 0 2px;
    -webkit-transition: all ease .2s;
    transition: all ease .2s;
    margin-right: 1rem;
    padding: 0 10px 5px;
    font-family: 'Exo-Medium';
  }
.menu a:hover {
    border-bottom: 2px solid #042e40;
}
@media screen and (max-width:1150px) and (min-width:960px) {
    .menu a{font-size: .8rem;}}

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

    .desktop-menu{display: none;} 
    .mobile-menu svg {
        width: 60px;
        cursor: pointer;
        transform: translateX(-20px);
        height: 30px;
    }
    .mobile-menu {
        position: absolute;
        right: 0%;
        top: 50%;
        width: 100px;
        transform: translateY(-50%);
        display: block !important;
    }
    .mobile-menu ul {
        position: absolute;
        top: 0;
        background: #043043;
        list-style: none;
        text-align: left;
        width: 250px;
        padding: 15px;
        right: 0;
        clip-path: polygon(8% 0, 100% 0, 100% 82%, 90% 100%, 0 100%, 0% 18%);
    }
    .mobile-menu li{
        margin-bottom: 10px;
    }
    .mobile-menu a{color:white}
}
.showMenu{ display: block !important; }

.nav .uk-container {
    align-self: center;
}
.menu a:hover { color: #fff;}

.mainBanner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 0px 0;
    margin: auto;
}
    
.fx1 { grid-area: 1 / 1 / 2 / 2; align-self: end; padding-top: 30px;}
.fx2 { grid-area: 1 / 2 / 2 / 3; z-index: 3;align-self: center;}



.gamestitle #mb-kabum{
    color:#ff7b00;
    font-size: 7.3rem;
    margin-left: 30px;
    line-height: 0;
  }
.mainBanner img{
    position: relative;
    transform: translate(0,0);
    width: 50%;
}
/* img.mouse {
    float: right;
    top: 80%;
}
img.teclado {
    position: absolute;
}
img.controle-xbox {
    float: right;
    left: -10%;
}
img.controle-ps5 {
    left: 35%;
    top: -78%;
}
img.mouse {
    float: right;
    top: -6%;
    left: -28%;
    animation:movin2 7s infinite;
    filter: brightness(0.7);
}
img.teclado {
    position: absolute;
    animation: movin4 20s infinite, rgbled 3s infinite;
    left: 11%;
    filter: brightness(0.98);
}
img.controle-xbox {
    float: right;
    left: -14%;
    z-index: 1;
    width: 30%;
    animation: movin 7s infinite ease-in-out;
    top: -10%;
}
img.controle-ps5 {
    left: 30%;
    top: -25%;
    animation:movin 6s infinite ease-in-out;
    filter: brightness(0.7);
}
img.headset{
    width:35%;
    animation: movin3 10s infinite;
    left: -130px;
} */

@keyframes movin{
    0% { transform:translate(0%,0%) }
    50% { transform:translate(5%,8%) }
    100% { transform:translate(0%,0%) }
}

@keyframes movin2{
    0% { transform:translate(0%,0%) }
    50% { transform:translate(-5%,-1%) }
    100% { transform:translate(0%,0%) }
}

@keyframes movin3{
    0% { transform:translate(0%,0%) }
    50% { transform:translate(-10%,10%) }
    100% { transform:translate(0%,0%) }
}

@keyframes movin4{
    0% { transform:translate(0%,0%) }
    50% { transform:translate(20%,10%) }
    100% { transform:translate(0%,0%) }
}
@keyframes rgbled {
    0% { filter:grayscale(1) }
    50% { filter:grayscale(0)}
    100% { filter:grayscale(1)}
}
.categorias{
    padding: 30px 0;
    transform: translateX(0px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
}
.consoles { grid-area: 1 / 1 / 2 / 2; }
.pcgamer { grid-area: 1 / 2 / 2 / 3; }
.acessorios { grid-area: 1 / 3 / 2 / 4; }
.perifericos { grid-area: 1 / 4 / 2 / 5; }

.categorias button{
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0% 20%);
    border:0;
    background:#ff7b00;
    color:white;
    padding:8px 30px;
    border-radius:5px;
    margin-right:15px;
    transition: .2s;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Exo';
}
.categorias a button:hover{
    background: #0bb1ff;
}
.gamestitle h2{
    font-size: 6rem;
    font-family: 'Exo-Black';
    color: white;
    line-height: 1;
}
.gamestitle span{
    font-family: 'Exo';
    color: white;
    font-size: 1.8rem;
    text-align: center;
    line-height: 0;
}
.gamestitle sup {
    font-size: 3rem;
    position: relative;
    top: -15px;
    font-family: 'Exo';
}
  .gamesKabum{
    background: url(../img/bg-games-kabum.jpg);
    background-size: cover;
    background-position-x: center;
    overflow-x:hidden ;
  }
.gamesKabum.uk-section{
    padding: 0px 0 0 0;
}
.rodape{
    height: 120px;
    background: url(../img/flare-press-start.png);
    background-position-x: 0%;
    background-size: 90% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: hard-light;
    background-repeat: repeat no-repeat;
  }
.rodape h2{
    color: white; 
}
.rodape button{
    background: #00aeff;
    padding: 20px 40px;
    border-radius: 6px;
    border: 0;
    font-size: 1.1rem;
    transform: translate(30px, -5px);
    font-family: '8Bit';
    overflow:hidden;
    transition:.1s;
    transition-delay:.15s
}
.rodape a button:hover{
    color:white;
    background: #ff7b00;
}
.rodape a button:hover:before{
    content:"";
    position:absolute;
    height:100px;
    width:200px;
    background:linear-gradient(transparent 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 100%);
    transition:ease-in-out 1s;
    transform:rotate(-45deg);
    animation: shine .5s forwards;
}
@keyframes shine{
  0%{top:-50px;left:-100px;}
  100%{left:200px;top:0px;}
}

@media screen and (max-width:1268px) and (min-width:961px) {
    .categorias button{
        font-size: 1rem;
    }
}
@media screen and (max-width:960px){
.mainBanner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.fx1 {
    display: none;
    grid-area: 1 / 1 / 2 / 2;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    top: 10%;
}
.fx2 {
    position: relative;
    grid-area: 2 / 1 / 3 / 2;
    margin-top: -5rem;
    transform: translateY(-50%);
    top: 30%;
    align-self: start;
}

.gamestitle h2 {
    font-size: 9rem;
}
.gamestitle span{
    font-size: 2rem;
}
.gamestitle #mb-kabum {
    font-size: 11rem;
}
.gamestitle sup {
    font-size: 8rem;
    top: -10px;
}
.rodape{
    flex-direction: column;
    padding: 80px 20px 100px;
    background-size: cover;
}
.rodape button {
    transform: translate(0px, 5px);
}
.rodape h2 {
    font-size: 2rem;
}
.categorias button{
    font-size: 1.5rem;
}
}

@media screen and (max-width:799px){
    .fx1 {
        top: 0%;
    }
    .gamestitle h2 {
    font-size: 9rem;
}
.gamestitle span{
    font-size: 2rem;
}
.gamestitle #mb-kabum {
    font-size: 10rem;
}
.gamestitle sup {
    font-size: 5rem;
}

    .categorias {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-row-gap: 20px;
    }
    .categorias button{
        font-size: 2rem;
    }
    .consoles { grid-area: 1 / 1 / 2 / 2; }
    .pcgamer { grid-area: 1 / 2 / 2 / 3; }
    .acessorios { grid-area: 2 / 1 / 3 / 2; }
    .perifericos { grid-area: 2 / 2 / 3 / 3; }
}

@media screen and (max-width:693px){
    .fx1 {
        top: -5%;
    }
.gamestitle h2 {
    font-size: 7.6rem;
}
.gamestitle span{
    font-size: 1.8rem;
}
.gamestitle #mb-kabum {
    font-size: 9rem;
}
.gamestitle sup {
    font-size: 4rem;
}
.categorias button{
    font-size: 1.7rem;
}
}
@media screen and (max-width:580px){
.gamestitle h2 {
    font-size: 6.5rem;
}
.gamestitle span{
    font-size: 1.6rem;
}
.gamestitle #mb-kabum {
    font-size: 8rem;
}
.gamestitle sup {
    font-size: 3rem;
}
.categorias button{
    font-size: 1.5rem;
}
.rodape h2 {
    font-size: 1.6rem;
}
}
@media screen and (max-width:500px){
    .fx1 {
        top: -9%;
    }
.gamestitle h2 {
    font-size: 6rem;
}
.gamestitle span{
    font-size: 1.4rem;
}
.gamestitle #mb-kabum {
    font-size: 7rem;
}
.gamestitle sup {
    font-size: 3rem;
}
.categorias button{
    font-size: 1.2rem;
}
.rodape h2 {
    font-size: 1.4rem;
}
}

@media screen and (max-width:450px){
.gamestitle h2 {
    font-size: 5rem;
}
.gamestitle span{
    font-size: 1rem;
}
.gamestitle #mb-kabum {
    font-size: 6rem;
}
.gamestitle sup {
    font-size: 2rem;
}
.categorias button{
    font-size: 1.1rem;
}
.rodape h2 {
    font-size: 1.2rem;
}
}
@media screen and (max-width:400px){
.rodape h2 {
    font-size: 1.1rem;
}
.fx2 {
    margin-top: -5rem;
}
    .gamesKabum.uk-section {
    padding: 0;
    }
    .categorias {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-row-gap: 20px;
    }
    .categorias button{
        font-size: 2rem;
    }
    .consoles { grid-area: 1 / 1 / 2 / 2; }
    .pcgamer { grid-area: 2 / 1 / 3 / 2; }
    .acessorios { grid-area: 3 / 1 / 4 / 2; }
    .perifericos { grid-area: 4 / 1 / 5 / 2; }
}
@media screen and (max-width:380px){
.gamestitle h2 {
    font-size: 4rem;
}
.gamestitle span{
    font-size: 1rem;
}
.gamestitle #mb-kabum {
    font-size: 5rem;
}
.gamestitle sup {
    font-size: 1.2rem;
}
.categorias button{
    font-size: 1.2rem;
}
.rodape h2 {
    font-size: 1.1rem;
}
}
main{
    overflow-x: hidden;
}

section.orangeBanner {
    background: url(../img/bg-vem-pro-game.jpg);
    background-size: cover;
    background-position: center;
}

.orangeBanner .uk-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .gd1 { 
        grid-area: 1 / 1 / 2 / 2; 
        display: flex;
        flex-direction: column;
        align-self: center;
        z-index: 2;
    }
    .gd2 img:first-child {
    margin-right: -70px;
    z-index: 1;
    margin-bottom: -1px;
}
    .gd1 h2{
        color: #042e40;
        font-family: 'Exo-Black';
        font-size: 5rem;
        margin-top: -40px;
    }

    .gd1 h2 strong{
    font-size:8rem
    }
    .gd1 p {
        width: 350px;
        color: white;
        font-family: 'Exo-Light';
        line-height: 1.6;
        font-size: 1.1rem;
        transform: translate(50px,20px);
    }
    .gd1 p strong{
        font-family: 'Exo-Medium';
    }
    .gd1 p:before {
        content: '{';
        color: #042e40;
        font-size: 11rem;
        position: absolute;
        font-family: 'Exo-Light';
        transform: translate(-50px,-70px);
    }
    .gd2 { 
        grid-area: 1 / 2 / 2 / 3; 
        display: flex;
        transform: translateX(-0);
    }
    .gd2 img:first-child {
        margin-right: -70px;
        z-index: 1;
    }

    @media screen and (max-width:960px) {
        .orangeBanner .uk-container {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(1, 1fr);
        }
        .gd1 h2{
            margin-top: 40px !important;
            margin: auto;
            font-size: 8rem;
        }
        .gd1 { grid-area: 1 / 1 / 2 / 2;justify-content: center;margin:auto; transform: translateX(-10px);}
        .gd2 { grid-area: 2 / 1 / 3 / 2; transform: translate(0); flex-direction: column-reverse;}
        .gd1 p {transform: translate(50px,35px);width: 90%;font-size: 1.3rem;}

        .gd1 h2 strong {
            font-size: 12rem;
            margin: auto;
        }
        .orangeBanner{height: auto !important;}

        .gd2 img:first-child { 
            margin-left: -5%;
            transform: translateX(50%) translateY(0);
            width: 60%;
        }
        .gd2 img {
            width: 90%;
            margin: auto;
        }
    }
    
    @media screen and (max-width:580px){
        .gd1 h2 {
        font-size: 5rem;
    }
        .gd1 h2 strong {
        font-size: 8rem;
    }
        .gd1 p {
        font-size: 1.2rem;
    }
    }
 @media screen and (max-width:450px){
        .gd1 h2 {
        font-size: 5rem;
    }
        .gd1 h2 strong {
        font-size: 8rem;
    }
        .gd1 p {
        font-size: 1.1rem;
    }
    }

@media screen and (max-width:400px){
        .gd1 h2 {
        font-size: 4rem;
    }
        .gd1 h2 strong {
        font-size: 6.2rem;
    }
        .gd1 p {
        font-size: 1rem;
    }
}

@media screen and (max-width:370px){
        .gd1 h2 {
        font-size: 3rem;
    }
        .gd1 h2 strong {
        font-size: 6.2rem;
    }
        .gd1 p {
        font-size: 1rem;
    }
}
    .qualGenero{
        color: white;
        background: url(../img/bg-genero.png) #042e40;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 100px 0;
    }
    .qualGenero .uk-container{
    max-width: 1200px;
    }
    .qualGenero .GeneroTs{
        display: flex;
        flex-direction: row;
    }
    .GeneroTs *{
        width: 50%;
    }
    .qualGenero h2{
        color: #ff7b00;
        font-family: 'Exo-Black';
        text-align: right; 
        margin-right: 20px;
        font-size: 3.5rem;
    }
    h2.qual:after {
        content: '';
        background: url(../img/right-bracket.png);
        height: 140px;
        width: 130px;
        position: absolute;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        top: -20px;
        transform: translateX(-30px);
    }
    .qualGenero .GeneroTs h3 {
        color: white;
        font-family: 'Exo-Medium';
        width: 340px;
        transform: translate(85px,10px);
        font-size: 1.7rem;
    }
   
    .categoriasJogos{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 10px;
        margin-top: 30px;
    }
    .categoriasJogos .cat{
        height: 220px;
        width: auto;
        padding: 30px;
        justify-content: space-evenly;
        background-position: center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }
    .action { grid-area: 1 / 1 / 2 / 2;}
    .platform { grid-area: 1 / 2 / 2 / 3;}
    .rpg { grid-area: 1 / 3 / 2 / 4;}
    .sim { grid-area: 1 / 4 / 2 / 5;}
    .puzzle { grid-area: 2 / 1 / 3 / 2;}
    .sports { grid-area: 2 / 2 / 3 / 3;}
    .strategy { grid-area: 2 / 3 / 3 / 4;}
    .shooter { grid-area: 2 / 4 / 3 / 5;}

     .cat h3 {
        color: #ff7b00;
        font-family: 'Exo-Bold';
        font-size: 1.5rem;
        line-height: 1;
}
    .cat p {
        color: white;
        font-size: 1.2rem;
        width: 90%;
        line-height: 1;
    }
    @media screen and (max-width:960px){
        .qualGenero{
            padding: 60px 0;
        }
        .qualGenero .GeneroTs{
            flex-direction: column;
        }
        .qualGenero .GeneroTs h3 {
            width: 95%;
            transform: translate(0,0);
            margin: auto;
            margin-top: 60px;
            font-size: 2rem;
        }
        .qualGenero h2 {
            font-size: 4rem;
        }
        .GeneroTs *{
            width: 95%;
            text-align: center !important;
        }
        h2.qual:after{
            top: 10rem;
            transform: translateX(-50%) rotate(90deg);
            left: 50%;
        }

        .categoriasJogos{
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(4, 1fr);
        }
        .action { grid-area: 1 / 1 / 2 / 2;}
        .platform { grid-area: 1 / 2 / 2 / 3;}
        .rpg { grid-area: 2 / 1 / 3 / 2; }
        .sim { grid-area: 2 / 2 / 3 / 3; }
        .puzzle { grid-area: 3 / 1 / 4 / 2; }
        .sports { grid-area: 3 / 2 / 4 / 3; }
        .strategy { grid-area: 4 / 1 / 5 / 2; }
        .shooter { grid-area: 4 / 2 / 5 / 3; }
    }
@media screen and (max-width:693px){
    .qualGenero h2 {
    font-size: 3rem;
}
    h2.qual:after {
    top: 9rem;
}
}

    @media screen and (max-width:640px){
        .categoriasJogos{
            grid-template-columns: 1fr;
            grid-template-rows: repeat(8, 1fr)
        }
        .action { grid-area: 1 / 1 / 2 / 2;}
        .platform { grid-area: 2 / 1 / 3 / 2;}
        .rpg { grid-area: 3 / 1 / 4 / 2;}
        .sim { grid-area: 4 / 1 / 5 / 2;}
        .puzzle { grid-area: 5 / 1 / 6 / 2;}
        .sports { grid-area: 6 / 1 / 7 / 2;}
        .strategy { grid-area: 7 / 1 / 8 / 2;}
        .shooter { grid-area: 8 / 1 / 9 / 2;}

        .categoriasJogos .cat {
            width: 95%;
            margin: auto;
        }
    }

    .jogosOferta{
        background-image: -moz-linear-gradient( to bottom, #03c7f4 40%, #0082b3 100%);
        background-image: -webkit-linear-gradient( to bottom, #03c7f4 40%, #0082b3 100%);
        background-image: -ms-linear-gradient( to bottom, #03c7f4 40%, #0082b3 100%);
        background-image: linear-gradient( to bottom, #03c7f4 40%, #0082b3 100%);
        height: auto;
        padding-bottom:0 ;
    }
    .jogosOferta h2{
        font-family: 'Exo-Black';
        font-size: 5rem;
        color: #042e40;
        padding: 20px 0;
    }
    .jogosOferta p {
        clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
        background: white;
        padding: 30px 20px;
        width:
        auto;
        font-size: 1.4rem;
        letter-spacing: 1px;
        color: #042e40;
        width: 60%;
        text-align: center;
        margin: auto;
    }


    @media screen and (max-width:960px){
        .jogosOferta h2 {
            font-size: 7rem;
        }
        .mathSigns:after, .mathSigns:before{display: none;}

        .jogosOferta p{
            width:80%;
            
        }
    }

 @media screen and (max-width:550px){
        .jogosOferta h2 {
            font-size: 6rem;
        }
     .jogosOferta p{
         font-size:2rem !important
     }
}
@media screen and (max-width: 580px){
.qualGenero h2 {
    font-size: 3.4rem;
}
h2.qual:after {
    top: 9rem;
}
}
@media screen and (max-width:500px){
    .qualGenero h2 {
    font-size: 2.9rem;
}
    .qual:after {
    top: 8rem !important;
}
}
@media screen and (max-width:450px){
    .qualGenero h2 {
    font-size: 2.9rem;
}
    .qualGenero .GeneroTs h3{
        font-size:1.8rem        
    }
}
@media screen and (max-width:400px){
     .jogosOferta h2 {
            font-size: 4.3rem;
        }
     .jogosOferta p{
         font-size: 1.1rem !important;
     }
    .qualGenero h2 {
    font-size: 2.5rem;
}
        .qual:after {
    top: 7rem !important;
}
    .qualGenero .GeneroTs h3{
        font-size:1.3rem        
    }
}

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

    .qualGenero h2 {
    font-size: 2.3rem;
}
        .qual:after {
    top: 7rem !important;
}
    .qualGenero .GeneroTs h3{
        font-size:1.3rem        
    }
}
    .mathSigns:after, .mathSigns:before {
        color: #042e40;
        font-size: 4rem;
        font-family: 'inherit';
        position: absolute;
    }

    .mathSigns:after{
        content: '<<';
        transform: translate(45px, -90px) scale(.8,2);
        animation: moveLeft 1s infinite;
        transition:.5s;
    }
    .mathSigns:before{
        content: '>>';
        transform: translate(-95px, 0px) scale(.8,2);
        animation: moveRight 1s infinite;
        transition:.5s;
    }

    @keyframes moveLeft{
        0% {right:80%}
        50% {right:85%}
        100%{right:80%}
    }
    
    @keyframes moveRight{
        0% {right:5%}
        50% {right:10%}
        100%{right:5%}
    }

    .cards {display: flex;margin:40px 0;transform: translateY(70px);}
    .brand{
        width:33%;
        margin: 20px;
    }
    .brand div {
        width: 100%;
        height: 350px;
        border-radius: 20px;
    }       
.opct{opacity: 1 !important;}
    .cards button {
        position: relative;
        bottom: 27%;
        left: 0%;
        clip-path: polygon(5% 0, 100% 0, 100% 85%, 95% 100%, 0 100%, 0% 15%);
        border: 0;
        background: #ff7b00;
        color: white;
        padding: 15px 40px;
        border-radius: 5px;
        margin-right: 15px;
        font-family: 'Exo-Medium';
        font-size: 2.2rem;
        z-index: 2;
        cursor: pointer;
    }
    .cards .aproveite:hover{
        transform: translate(-10px,-10px);
        transition: .1s;
    }
    .cards .effect3d{
        background: #042e40;
        color: transparent;
        z-index: 0;
        transform: translateY(-68px);
        opacity: 0;
    }
    .cards img{
        position: relative;
        top: 37%;
        transform: translateY(-50%);
    }
    @media screen and (max-width:1152px){
        .cards button {
            font-size: 2rem;
            bottom: 33%;
        }
    }
    @media screen and (max-width:1132px){
        .cards button {
            font-size: 1.8rem;
        }
    }
    @media screen and (max-width:1132px) and (min-width:961px){
        .cards button {
            font-size: 1.5rem;
        }
    }
    
    @media screen and (max-width:960px){  
        .cards{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            transform: translateY(calc(14rem + 3%));
        }
        .sony { grid-area: 1 / 1 / 2 / 2; }
        .microsoft { grid-area: 2 / 1 / 3 / 2; }
        .nintendo { grid-area: 3 / 1 / 4 / 2; }

        .brand {
            width: 50%;
            margin: auto;
            margin-bottom: 40%;
        }
        .brand div{
            margin-bottom: -100px;
        }
        .cards button {
            bottom: 0px;
            font-size: 3rem;
        }
        .cards .effect3d {
            transform: translateY(-98px);
        }
        .jogosOferta span {
            clip-path: none;
            background: transparent;
            padding: 10px 10px;
            font-size: 3rem;
            text-align: left;
        }
        .mathSigns {
            /* clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); */
            background: white;
            margin: 0 -6%;
            padding: 0 30px;
            margin-bottom: -8rem;
        }
    }
    @media screen and (max-width:846px){  
        .brand {
            width: 70%;
        }
}

@media screen and (max-width:769px){  
    .brand {
        width: 80%;
    }
}
@media screen and (max-width:640px){  
    .brand {
        width: 90%;
    }
}
    @media screen and (max-width:560px){
        .brand{
            margin-bottom: 6rem;
        }
        .cards button {
            transform: translateY(-1rem);
            font-size: 2rem;
        }
        .jogosOferta{
            padding-bottom: 200px;
        }
    }
    @media screen and (max-width:470px){
        .brand{
            margin-bottom: 4rem;
        }
        .cards button {
            transform: translateY(-1rem);
        }
    }
    @media screen and (max-width:402px){
        .brand{
            margin-bottom: 0rem;
        }
        .cards button {
            transform: translateY(-3rem);
        }
    }
    @media screen and (max-width:370px){
        .brand{
            margin-bottom: 0rem;
        }
        .cards button {
            transform: translateY(-3rem);
            font-size: 1.5rem;
        }
    }
    @media screen and (max-width:316px){
        .brand{
            margin-bottom: -19rem;
        }
        .cards button {
            transform: translateY(-20rem);
        }
    }
    @media screen and (max-width:308px){
        .brand{
            margin-bottom: -23rem;
        }
        .cards button {
            transform: translateY(-23rem);
            font-size: 1rem;
        }
       .brand div {
    margin-bottom: 204px;
    }
        .jogosOferta {
    padding-bottom: 200px;
}
    }
    .lancamento2022{
        background-image: -moz-linear-gradient( 90deg, rgb(4,46,64) 0%, rgb(7,86,120) 100%);
        background-image: -webkit-linear-gradient( 90deg, rgb(4,46,64) 0%, rgb(7,86,120) 100%);
        background-image: -ms-linear-gradient( 90deg, rgb(4,46,64) 0%, rgb(7,86,120) 100%);  
        background-image: linear-gradient( 90deg, rgb(4,46,64) 0%, rgb(7,86,120) 100%);  
        padding: 50px 0 150px 0;
    }
    .lancamento2022 .textos{    
        display: flex;
        padding: 50px 0;
        justify-content: start;
    }
    .lancamento.chamada {
        font-family: 'Exo-Black';
        color: white;
        font-size: 3.5rem;
        text-align: right;
        width: 50%;
        line-height: 1;
    }
    .lancamento.orangeBox {
        background: #ff7b00;
        margin: 0 50px;
        color: white;
        font-size: 1.7rem;
        padding: 35px;
        width: 30%;
        line-height: 1.2;
    }
    .lancamento.orangeBox:before {
        content: '';
        height: 30px;
        width: 30px;
        position: absolute;
        background: #ff7b00;
        transform: translate(-50px,30px) rotate(45deg);
    }
  
    .lanca {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }
    .lanca .jogos .bg-jogo{
        height: 200px;
        margin: -1px;
        background-position:center !important;
        background-size: cover !important;
        transition: .2s;
    }
    .jogos:hover .bg-jogo{
        filter: brightness(.4);
    }
    .jogos h3.uk-margin-remove {
        font-family: 'Exo-Bold';
        font-size: 1.3rem;
        transform: translateY(-20px);
    }
    .jogos h3 span {
        font-family: 'Exo-Light';
    }
    .j1 { grid-area: 1 / 1 / 2 / 2; }
    .j2 { grid-area: 1 / 2 / 2 / 3; }
    .j3 { grid-area: 1 / 3 / 2 / 4; }
    .j4 { grid-area: 1 / 4 / 2 / 5; }
    .j5 { grid-area: 2 / 1 / 3 / 2; }
    .j6 { grid-area: 2 / 2 / 3 / 3; }
    .j7 { grid-area: 2 / 3 / 3 / 4; }
    .j8 { grid-area: 2 / 4 / 3 / 5; }
    .j9 { grid-area: 3 / 1 / 4 / 2; }
    .j10 { grid-area: 3 / 2 / 4 / 3; }
    .j11 { grid-area: 3 / 3 / 4 / 4; }
    .j12 { grid-area: 3 / 4 / 4 / 5; }


    @media screen and (max-width:960px){
        .lancamento2022 .textos {
            flex-direction: column;
        }
        .lancamento.chamada {
            width: 90%;
            text-align: left;
            margin: auto;
            font-size: 3.5rem;
        }
        .lancamento.orangeBox {
            width: 85%;
            margin: 40px 40px;
            font-size: 2rem;
        }
        .lancamento.orangeBox:before {
            transform: translate(0px,-50px) rotate(45deg);
        }
        .lanca{
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(6, 1fr);
        }
        .j1 { grid-area: 1 / 1 / 2 / 2; }
        .j2 { grid-area: 2 / 1 / 3 / 2; }
        .j3 { grid-area: 3 / 1 / 4 / 2; }
        .j4 { grid-area: 4 / 1 / 5 / 2; }
        .j5 { grid-area: 5 / 1 / 6 / 2; }
        .j6 { grid-area: 6 / 1 / 7 / 2; }
        .j7 { grid-area: 1 / 2 / 2 / 3; }
        .j8 { grid-area: 2 / 2 / 3 / 3; }
        .j9 { grid-area: 3 / 2 / 4 / 3; }
        .j10 { grid-area: 4 / 2 / 5 / 3; }
        .j11 { grid-area: 5 / 2 / 6 / 3; }
        .j12 { grid-area: 6 / 2 / 7 / 3; }
    }

    @media screen and (max-width:500px){
        .lanca{
            grid-template-columns: 1fr;
            grid-template-rows: repeat(12, 1fr);
        }
        .j1 { grid-area: 1 / 1 / 2 / 2; }
        .j2 { grid-area: 2 / 1 / 3 / 2; }
        .j3 { grid-area: 3 / 1 / 4 / 2; }
        .j4 { grid-area: 4 / 1 / 5 / 2; }
        .j5 { grid-area: 5 / 1 / 6 / 2; }
        .j6 { grid-area: 6 / 1 / 7 / 2; }
        .j7 { grid-area: 7 / 1 / 8 / 2; }
        .j8 { grid-area: 8 / 1 / 9 / 2; }
        .j9 { grid-area: 9 / 1 / 10 / 2; }
        .j10 { grid-area: 10 / 1 / 11 / 2; }
        .j11 { grid-area: 11 / 1 / 12 / 2; }
        .j12 { grid-area: 12 / 1 / 13 / 2; }
    }
@media screen and (max-width:400px){
        .lancamento.chamada {
            font-size: 2.7rem;
        }
        .lancamento.orangeBox {
            width: 85%;
            margin: 40px 30px;
            font-size: 1.2rem;
        }
        .lancamento.orangeBox:before {
            transform: translate(0px,-50px) rotate(45deg);
        }
        .lanca{
            grid-template-columns: repeat(1, 1fr);
        }
    }

     .techmasters{
        clip-path: polygon(0 8%, 18% 8%, 20% 0, 80% 0, 82% 8%, 100% 8%, 100% 100%, 0 100%);
        background: url(../img/m-techmasters.png) #ff7b00;
        background-repeat: no-repeat;
        background-position:85% center;
        margin-top: -52px;
        background-size: contain;
        padding: 70px 0 140px 0;
     }

     .universoTech {
        display: flex;
        justify-content: space-evenly;
    }
    .universoTech h2 {
        font-family: 'Exo-Black';
        font-size: 2.5rem;
    }
    .universoTech h2 span {
        color: white;
    }
    .universoTech img {
        width: auto;
        height: 70px;
        transform: translatey(8px);
    }
    .universoTech div {
        height: 85px;
        width: 2px;
        background: rgba(0,0,0,.4);
    }
    .techmasters p {
        font-size: 2rem;
        color: #042e40;
    }

    
    .uk-container.cnn {
        margin-bottom: -170px;
    }
    .conecte {
        clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
        background: white;
        padding: 50px;
        font-size: 2rem;
        font-family: 'Exo-Bold';
        display: flex;
        text-align: right;
        transform: translateY(-100px);
        justify-content: space-evenly;
        line-height: 1;
    }
    .conecte:before {
        content: '';
        width: 88%;
        height: 2px;
        background: rgba(0,0,0,.4);
        position: absolute;
        top: 13px;
    }
    
    .conecte a {
        border-radius: 10px;
        border: 0;
        background: #042e40;
        color: #ff7b00;
        font-family: 'Exo';
        clip-path: polygon(6% 0, 100% 0, 100% 80%, 94% 100%, 0 100%, 0% 20%);
        padding: 10px 20px;
        font-size: 2.1rem;
        width: 35%;
        text-align: center;
        transition:.3s;
        height: auto;
        align-self: center;
    }
    @media screen and (max-width:1169px){
        .conecte a {
            font-size: 2.7rem;
        }
    }
    @media screen and (max-width:1083px){
        .conecte a {
        font-size: 2.6rem;
    }
    }
    .conecte a:hover{
        background: #ff7b00;
        color: #042e40 ;
    }
    .conecte strong {
        width: 50%;
    }

    .conecte strong {
        width: 50%;
    }

    .conecte strong:before {
        content: '';
        width: 7%;
        height: 2px;
        background: rgba(0,0,0,.4);
        position: absolute;
        top: 47px;
        transform: rotate(-53deg);
        left: 6px;
    }
    .conecte strong:after {
        content: '';
        width: 7%;
        height: 2px;
        background: rgba(0,0,0,0.4);
        position: absolute;
        top: 46px;
        transform: rotate(53deg);
        right: 4px;
    }

    @media screen and (max-width:1272px){
        .conecte strong:before {
        transform: rotate(-58deg);
        }
        .conecte strong:after {
        transform: rotate(58deg);
        }
    }
    @media screen and (max-width:1268px){
        .conecte strong:before {
        top:47px;left:10px;
        transform: rotate(-64deg);
        }
        .conecte strong:after {
        top:47px;right:10px;
        transform: rotate(64deg);
        }
    }
    @media screen and (max-width:960px){
        .techmasters{
            clip-path: polygon(0 8%, 15% 8%, 20% 0, 80% 0, 85% 8%, 100% 8%, 100% 100%, 0 100%);
        }
        .universoTech{
            flex-direction: column;
        }
        .universoTech h2 {
            font-size: 3rem;
        }

        .conecte strong:after, .conecte strong:before, .conecte:before{display: none;}
        .conecte{
            flex-direction: column;
            align-items: center;
            clip-path: none;
            margin: 0 -40px;
        }
        .conecte strong, .conecte a {
            width: 90%;
            text-align: center;
            font-size: 2rem;
        }
        .conecte a{
            margin-top: 20px;
            width: auto;
            padding: 15px 60px;
            font-size: 2rem;
        }
    }

@media screen and (max-width:400px){
        .universoTech h2 {
            font-size: 2.3rem;
        }
        .universoTech img {
            margin-bottom: 1rem;
        }

        .conecte strong, .conecte a {
            font-size: 1.5rem;
        }
        .conecte a{
            font-size: 1.5rem;
        }
    }
@media screen and (max-width:380px){
        .universoTech h2 {
            font-size: 2.3rem;
        }
.universoTech div{
    position:relative;
    left:50%;
    transform:rotate(90deg) translate(-50%,-0%);
    height:20px
}
     .universoTech img {
            margin-bottom: 0rem;
        }
    .conecte strong, .conecte a {
            font-size: 1.3rem;
        }
}
    .faq {
        background-image: -moz-linear-gradient( 0deg, rgb(4,46,64) 0%, rgb(5,69,97) 100%);
        background-image: -webkit-linear-gradient( 0deg, rgb(4,46,64) 0%, rgb(5,69,97) 100%);
        background-image: -ms-linear-gradient( 0deg, rgb(4,46,64) 0%, rgb(5,69,97) 100%);
        background-image: linear-gradient( 0deg, rgb(4,46,64) 0%, rgb(5,69,97) 100%);
        padding: 150px 0;
      }

      .faqTitle {
        color: #69c2dc;
        font-size: 2rem;
    }

    .uk-container.cnn {
        margin-bottom: -170px;
    }
    
    .uk-accordion li{
      background:#02131a;
      border-radius:8px;
      padding:20px 40px;
      color:white;
    }

    .uk-accordion h2 {
        color: white;
        font-size: 1.4rem;
        transition: .2s;
    }
    li.uk-open h2 {
        color: #00aeff;
        
    }
    li.uk-open .uk-accordion-title::before{
        content:"X";
    }
    .uk-accordion-title::before {
        content: "v";
        width: 1.4em;
        height: 1.4em;
        margin-left: 10px;
        float: right;
        background: #ff7b00;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        text-align: center;
        font-size: 1.5rem;
        line-height: 1.5;
        color: black;
    }
    .uk-open>.uk-accordion-title::before {
        background-image: none;
    }
    .uk-accordion p{
        color: white;
    }
    .uk-open span {
        color: #ff7b00;
    }
    @media screen and (max-width:769px){
        .uk-accordion-title h2 {
            font-size: 1.3rem;
        }
        .uk-accordion li{
            padding:10px 20px;
          }
          .uk-accordion-title::before{
            font-size: 1rem;
          }
    }

    .copy p{
            color: #fff;
            padding: 20px;
    }
    #footer-social {
        background: #02131a;
        height: 150px;

    }
    
    #footer-social .container {
        position: relative;
    }
    
    #footer-social ul {
        width: 340px;
        margin: 0 auto;
    }
    
    #footer-social li {
        line-height: 150px;
        float: left;
        width: 18%;
        text-align: center;
        list-style:
        none;
        margin-right: 0px;
    }
    
    #logo-kabum-rodape {
        position: absolute;
        top: 45px;
        right: 0;
    }
    
    #footer-social li span {
        padding: 8px;
        background-color: #fff;
        border-radius: 50%;
        color: #05365f;
        transition: all 0.3s;
    }

    @media screen and (max-width:666px){
        #footer-social .container {
            display: flex;
            flex-direction: column;
            text-align:center;
            overflow-x: hidden;
        }
        #logo-kabum-rodape {
            display:none
        }
    }