@media only screen and (max-width: 1600px) {
  .col-4.Gamecolumn{
    width:50% !important;
  }
  .gameImg2{
    height:110px;
  }
}

@media only screen and (max-width: 1300px) {
  .col-4.game{
    width:50% !important;
  }
  .categorybody{
    width:95% !important;
  }
}


@media only screen and (max-width: 900px) {
  .categorybody{
    width:96% !important;
  }

}

@media only screen and (max-width: 800px) {
  .col-4.Gamecolumn{
    padding:0px !important;
  }
  .col-6.Gamecolumn2{
    padding:0px !important;
  }
  .categoryHeading{
    font-size: 20px !important;
    margin-top:20px;
  }
}



@media only screen and (max-width: 970px) {
    .topgames {
      max-height: 300px !important ;
    }
    .topgame {
      max-height: 300px !important;
    }
}


@media only screen and (max-width: 650px) {
  .col-4.game{
    width:100% !important;
  }
}



@media only screen and (max-width: 600px) {
    .topgames {
      max-height: 200px !important;
    }
    .topgame {
      max-height: 200px !important;
    }
}

@media only screen and (max-width: 500px) {
  .categoryHeading{
    font-size: 15px !important;
    margin-top:20px;
  }
}

@media only screen and (max-width: 400px) {
  .topgames {
    max-height: 160px !important;
  }
  .topgame {
    max-height: 160px !important;
  }
}

@media only screen and (max-width: 320px) {
  .col-4.Gamecolumn{
    width:100% !important;
  }
  .col-6.Gamecolumn2{
    width:100% !important;
  }
}






@font-face {
    font-family: Harabara_Mais_Bold;
    font-weight: bold;
    src: url("fonts/HarabaraMaisBold.otf") format("opentype");
}

@font-face {
    font-family: Harabara_Mais_Light;
    src: url("fonts/HarabaraMaisLight.otf") format("opentype");
}


[class*="col-"] {
    float:left;
    padding: 15px;
    display: table-cell;

}
.logo{
	width:15%;
	margin: 0 auto;
    /*position: relative;*/
    /*top: 40%;*/
    display: block;
    margin-top:20px;
    margin-bottom:20px;

    /*transform: translate(-50%, -140%);*/
}

a {
      text-decoration: none;
}

body {
    font-family: Harabara_Mais_Light;
	background-color: white;
  margin:0;
  padding:0px;
}


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



body::-webkit-scrollbar {
    width: 0.6em;
}

body::-webkit-scrollbar-track {
}

body::-webkit-scrollbar-thumb {
  background-color:rgb(255, 34, 93);
}

.sponsoredColumn {
  border-left: solid 4px rgb(240,240,240);
}


.categoryHeading {
  font-family: Harabara_Mais_Bold;
  font-size:30px;

  color:rgb(90,90,90);
  margin-left:10px;
}


.bordered {
	border: 0px solid white;
}

.topgames {
	max-height: 500px;
	max-width: 100%;
	text-align: center;
	object-fit: cover;


}

.gamefeed {

  margin-bottom:100px;
  border:solid;
  height:auto;
}

.categorybody {
  width:90%;
  margin-left:auto;
  margin-right:auto;
}
.Gamecolumn {
  padding:25px;
}

.Gamecolumn2 {
  padding:25px;
}

.topgame{
	max-height: 500px;
	max-width: 100%;
	-webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;


}
@-webkit-keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}
l
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0px;margin-left:5px;}

@keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

img {
	object-fit: cover;
    max-width: 100%;
}

button:focus{
    border: none;
        outline:none;
}

button{
    border: none;
        outline:none;
}

.searchButton {
    background:none;
}

.searchButton:hover {
    cursor:pointer;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
