/* RESET */
body{background-color: transparent;}
* {padding: 0;margin: 0;border: 0;box-sizing: border-box;vertical-align: baseline;font-size: 100%;font: inherit;list-style: none;text-decoration: none;}
a{cursor:pointer!important;}
*:hover{text-decoration: none;}
/* RESET */

a > h1, a > h2, a > h3, a > h4{
  font-size: inherit;
  font-family: inherit;
  color:inherit;
  margin-bottom: 0;
  text-transform: inherit;
}
/* FONTS */


@font-face {
  font-family: rog;
  src: url("../fonts/ROGFonts-Regular.otf");
}


@font-face {
  font-family: xolonium-regular;
  src: url("../fonts/Xolonium-Regular.otf");
}

@font-face {
  font-family: xolonium-bold;
  src: url("../fonts/Xolonium-Bold.otf");
}

@font-face {
  font-family: xolonium-numeral;
  src: url("../fonts/xolonium-numeral.otf");
}

@font-face {
  font-family: TradeGothic;
  src: url("../fonts/TradeGothic_cd.otf");
}

@font-face {
  font-family: tt_normal;
  src: url("../fonts/TT _Norms_Pro_Normal.ttf");
}

@font-face {
  font-family: tt_bold;
  src: url("../fonts/TT_Norms_Pro_Bold.otf");
}


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.mobile{display: none;}

/* FONTS */
.highlight-header{
  position: fixed;
  top: 0;
  background-color: #fafafa;
  height: 50px;
  z-index: 999;
  padding: 10px;
}


.highlight-header h2{
  font-family: 'tt_bold', sans-serif;
  font-size: 1.7rem;
  line-height: 110%;
  text-transform: uppercase;
  margin-bottom: 0;
  color:#433e48;
  text-decoration: none;
  opacity: 0.8;
  transform: scale(1);
  transition: all 0.5s;
}

.highlight-header h2:hover{
  transform: scale(1.1);
  opacity: 1;
}
.highlight-header h2  span{
  color:#000000;
}

.highlight-header a{
  text-decoration: none;
  color: unset;
}


/* REUTILIZAVEIS */
.owl-dots{display:none;}
.fl{float:left;}.fr{float:right;}
.hidden-load {visibility: hidden;}
.hidden-load.animate__animated {visibility: visible;}

.responsive-img{width: 100%;height: auto;}

.text-dark{color:#1c1c1c!important;}
.text-light{color:#FFFFFF;}
.text-highlight-dark{color:#1B417E;}
.text-highlight-light{background: #39A9F5;
background: linear-gradient(40deg,rgba(57, 169, 245, 1) 0%, rgba(13, 209, 152, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}


.dark-bg{
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(59,59,59,1) 100%);
}
.specs{
  font-family: TradeGothic, sans-serif;
  font-size: 1.4rem;
  line-height: 100%;
  color:#ffffff;
  text-align: center;
}
.specs > .row > div{
  display: flex;
  align-items: center;
  padding: 20px 8px;
}

.specs > .row > div > div > span{
  font-size: 140%;
  line-height: 140%;
width: 100%;
float: left;
background: -webkit-linear-gradient(left,rgba(31,179,255,1), rgba(155,50,239,1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
section{padding-top: 6.5rem;}


h1{
  font-family: TradeGothic, sans-serif;
  font-size: 2.7rem;
  margin-bottom: 1.3rem;
  line-height: 100%;
}

h2{
  font-family: TradeGothic, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-bottom: 2rem;

}

h3{
  font-family: TradeGothic, sans-serif;
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-align: center;
  color:#ffffff;
}

h3 > .seta{
  background-image: url('../imgs/seta.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 20px;
  width: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

p{
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  line-height: 120%;
  text-align: center;
  color:#ffffff;
}

ul{
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  line-height: 120%;
  text-align: left;
  color:#ffffff;
  margin-top: 15px;
}

li{
  list-style:inside;
  margin-bottom: 15px;
}

.anchor-cta{
  padding: 10px 20px;
  text-align: center;
  font-family: "xolonium-regular", sans-serif;
  color:#000000;
  font-size: 1.2rem;
  background: linear-gradient(40deg,rgba(57, 169, 245, 1) 0%, rgba(13, 209, 152, 1) 100%);;
  text-decoration: none;
}

.anchor-cta:hover{
  color:#000000;
  text-decoration: none;
  background: #ffffff;
}



/* REUTILIZAVEIS */



.lojas-logos img{
  height: auto;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  transition: all .2s ease-in-out;
}

.lojas-logos img:hover{
transform: scale(1.1);
}


header {padding:30px 0;}
header > .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header img{width: 100px;height: auto;}

header.affix{
  background: #1c1c1c;
padding: 15px 20px !important;
height: auto;
max-height: 70px;
position: fixed !important;
z-index: 2;
top: 0px;
display: flex !important;
justify-content: space-between;
align-items: center;
z-index: 999;}

header.affix .brand img{
  width: auto;
  height:80px;

}

header.affix .cta.comprar .cart{
  height: 25px;
  width:25px;
  margin-right: 10px;
  background-image: url('../imgs/cart.svg');
  background-repeat: no-repeat;
}
header.affix  .cta.comprar{
  font-family: "xolonium-regular", sans-serif;
  font-size: 15px;
  background: linear-gradient(40deg,rgba(57, 169, 245, 1) 0%, rgba(13, 209, 152, 1) 100%);
  color:#000000;
  float:right;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 10px;
  text-decoration: none;
}
header.affix  .cta.comprar:hover{
  text-decoration: none;
  color:#000000;
  text-decoration: none;
  background-color: #ccc;

}

html,body{
  background: #000000;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: auto;
  scroll-behavior: smooth;
}



#hero{
  background-image: url('../imgs/ROG_Ally_KV_horizontal.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  height: 90vh;
}

#hero .container{
  height: 100%;
}


#hero h2{
  margin-bottom: 0;
}



#hero .kv-img{
  width:180px;
  height: auto;
  display: block;
}

#hero h1{
  font-size: 2.5rem;
}


#hero h1 > span:nth-of-type(1){
  font-size: 130%;
  line-height: 90%;
  font-family: rog, sans-serif;
}

#hero h1 > span:nth-of-type(2){
  margin-top: 10px;
  font-size: 80%;
  line-height: 90%;
  display: inline-block;
}


.produto-destaque{
  padding: 20px 20px;
  margin-top: 60px;
}

.produto-destaque h2{
  margin-bottom: 20px;
}

#clock{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 90px;
}

#clock > span{
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 10px 0 20px;
  
}

#clock > span:first-child{
  margin: 0;
}

#clock span > span{
  width:100%;
  height:100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

#clock span p{
  font-family: "xolonium-numeral";
  font-size: 3rem;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  letter-spacing: 0.02em;
}

#clock span p:first-letter {

}

#clock div{
  display: flex;
  align-self: flex-end;
  line-height: 75px;
  margin-right: 10px;
  font-family: TradeGothic, sans-serif;
  font-size: 1.3rem;
  color:#ffffff;
}

.btns-live{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.btns-live a{
  color:#1c1c1c;
  display: flex;
  background: #ffffff;
  padding: 15px 15px;
  font-family: TradeGothic, sans-serif;
  font-size: 0.8rem;
  margin:0 10px;
  align-items: center;
  line-height: 100%;
}

.btns-live a:hover{
  color:#1c1c1c;
  text-decoration: none;
  background: #fff;
}

.btns-live a:focus {
    outline: none;
}

.btns-live a img{
  margin-right:5px;
}

.icon{width:20px;height:20px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.facebook-icon{background-image: url("../imgs/facebook.png");}
.twitter-icon{background-image: url("../imgs/twitter.png");}
.youtube-icon{background-image: url("../imgs/youtube.png");}
.google-icon{background-image: url("../imgs/calendar.png");}
.btns-live a:hover .google-icon{background-image: url("../imgs/calendar.png");}
.twitch-icon{background-image: url("../imgs/twitch.png");}
.insta-icon{background-image: url("../imgs/insta.png");}


#youtube-embed{
  display: none;
  justify-content: center;
}

#twitch-embed{
  display: flex;
  justify-content: center;
}

#twitch-embed iframe, #youtube-embed iframe{
  width:100%;
}



#outras-linhas .row > div{
  margin-bottom: 30px;
}

#outras-linhas{
  height: auto;
}

.single-linhas{
background:#363636;
padding-bottom: 30px;
min-height: 100%;
display: grid;
}



.single-linhas  img{
  width: 100%;
  height: auto;

  padding: 0!important;
}

.single-linhas h3{
  margin-top: 30px;
}





@media (max-width:1380px) {
  #hero{
    background-size: cover;
    background-position: center right;
  }
}


@media (max-width:480px) {
  .desk{display: none;}
  .mobile{display: block;}

  .dark-bg{background: #000000;}

  .highlight-header{
    position: fixed;
    top: 0;
    height: 70px;
    z-index: 999;
    padding: 10px;
  }



  .highlight-header h2{
    font-size: 1.2rem;
  }

  #specs img{
    margin-bottom: 30px;
  }
  .anchor-cta{
    display: block;
  }

#produtos > .container > h2 > span:first-of-type{
  display: block;
}

#produtos > .container > h2 > span:last-of-type{
  display: none;
}

#hero{
  background-image: url('../imgs/ROG_Ally_KV_horizontal_center.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 110vw;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  height: 85vh;
}


  #hero h1 > span:first-of-type{
    font-size: 90%;
    line-height: normal;
  }

  #hero h1 > span:last-of-type{
    font-size: 70%;
    line-height: 80%;
  }


#hero{padding: 300px 0 1rem 0;height: auto;background-size: 180%;}


#hero h1,#hero h2{
  text-align: left;
}

  #hero img{
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #hero .kv-img{
    width: 100px;
  }
  body{
    background-size: 200%;
  }
  .title {
  font-family: TradeGothic, sans-serif;
  line-height: 110%;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
  section,header{padding:2.5rem 15px 0 15px;}

  h1{
    font-family: TradeGothic, sans-serif;
    font-size: 2.7rem;
    margin-bottom: 1.3rem;
    line-height: 100%;
  }

  h2{
    font-family: TradeGothic, sans-serif;
    font-size: 1.7rem;
    margin-bottom: 0.8rem;
  }

  h3{
    font-family: TradeGothic, sans-serif;
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
    color:#ffffff;
  }

  header img {width: 70px;height: auto;}
  header.affix .brand img {
width: 80px;
height: auto;}
  #outras-linhas .row {
  margin-bottom: 0px;
  }

  #outras-linhas .row > div {
  margin-bottom: 20px;
  }

  #clock{

  justify-content: center;
  }
  #clock > span{
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px 0 8px;
    padding: 0px;
  }
  #clock span p{font-size: 30px;}
  #clock div{font-size: 1rem;line-height: 80px;}

  .btns-live{padding: 0;}
  .btns-live a,.form button {font-size: 0.6rem;padding: 8px;}
  .btns-live a img{width:auto;height:13px;display: block;}

}



@media (min-width:1900px) {

#hero{
  background-size: cover;
}

  #hero .container div > div.row{
    margin-bottom: 20px;
  }
}