body{ margin: 0px; padding: 0px; background-color: #000000; color: #fff;}
a{ color: #f7c121; text-decoration: none;}
a:hover{  color: #f7c121; text-decoration: underline;}

.searchbox{ background: #373952; border: 0px solid #f82249; border-radius: 10px; padding: 2px;}
.searchbox .form-control{ background-color: transparent; border-color: transparent; color: #ffffff; padding: 0rem .75rem;}
.searchbox ::placeholder {color: #aaadbe;  }
.searchbox .btn-outline-success{ background: #292b3c; color: #ffffff; border-color:#6a6c85; padding: 3px 10px;}

.navbar-brand{ max-width: 180px;}
main{ padding-top:82px; position: relative;}
footer{background-color: #000000; color: white; padding: 1rem; box-shadow: 0px -1px 0px #1a1b28;}
footer p:last-child{margin-bottom:0px;}
footer a{ padding: 0px .5rem; color: #f7c121; text-decoration: none;}
footer a:hover{  color: #f7c121; text-decoration: underline;}

.banner-slider{display: flex; justify-content: space-between;}
.banner-slider img{  vertical-align: bottom;}
/* .banner-slider .col{ width:250px; height: 250px; flex: 1 1 auto; padding: 12px;} */
/* .banner-slider .col.full{ width:250px; height: 250px; flex: 1 1 auto; padding: 12px;}
.banner-slider .col.half{ width:125px; height: 125px; flex: 1 1 auto; padding: 12px;}
.banner-slider .col a{ display: block; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgb(255 255 255 / 80%); overflow: hidden; border-radius: 10px;}
.banner-slider .col img{ width: 100%; height:100%; object-fit: cover; transform: scale(1.2);} */

.game-section{ padding: 15px 15px;}
.titleContainer{flex-direction: row; width: 100%;display: flex; align-items: center;}
.titleContainer .title{ margin-right:15px;}
.gamerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.gamerow1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.gamerow .col { width: calc(10% - 20px); flex: 0 0 10%; padding: 10px;}
.gamerow .col  a{ display: block; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgb(255 255 255 / 80%); overflow: hidden; border-radius: 10px;}
.gamerow .col  img{ display: block; width: 100%; height:100%; object-fit: cover; transform: scale(1.2);}
.gamerow1 .col { width: calc(10% - 20px); flex: 0 0 10%; padding: 10px;}
.gamerow1 .col  a{ display: block; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgb(255 255 255 / 80%); overflow: hidden; border-radius: 10px;}
.gamerow1 .col  img{ display: block; width: 100%; height:100%; object-fit: cover; transform: scale(1.2);}
.staticpage{ background-color: #1a1b28; padding: 2rem; margin: 2rem 0px;}

.iframe-game {width:100%; height: 75vh;}


.showmore-section .text-container{margin: 0 auto; width: 100%; padding: 0px 0px;}
.showmore-section .text-container h5{ background-color: #1A1B28; border-top-left-radius: 4px;  border-top-right-radius: 4px; color: #fff; margin: 0; margin-right: 8px; padding: 16px 24px; text-transform: none; display: inline-block;}
.showmore-section .text-container .content{ width: 100%; padding: 16px 24px; background-color: #1A1B28;}
.showmore-section .text-container .content p{ line-height: normal;}
.hideContent{ overflow: hidden; line-height: 1em; height: 7em;}
.showContent{ line-height: 1em; height: auto;}
.showContent{ height: auto;}
.show-more{background-color: #1A1B28; padding: 30px 0 10px 0; text-align: center; border-bottom: 9px solid #f82249; position: relative;}
.show-more a{ position: absolute; right: 0px; bottom: 0px; background-color:#f82249; padding: 3px 10px; color: #ffffff; border-radius: 4px 4px 0px 0px; font-size: 12px;}


@media only screen and (max-width:768px){
  .allgame{ flex-wrap: wrap; align-items: center; justify-content: center;}
  .gamerow .col{width: calc(14.2% - 14px); flex: 0 0 14.2%; padding: 7px;}
  .gamerow1 .col{width: calc(14.2% - 14px); flex: 0 0 14.2%; padding: 7px;}
}

@media only screen and (max-width:640px){
    .game-section{ padding: 15px 15px;}
    .gamerow{ flex-wrap: nowrap; overflow: hidden; align-items: inherit; justify-content: inherit;}
	.gamerow1{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
    .allgame{ flex-wrap: wrap; align-items: center; justify-content: center;}
    .gamerow .col{width: calc(25% - 14px); flex: 0 0 25%; padding: 7px;}
    .gamerow1 .col{width: calc(25% - 14px); flex: 0 0 25%; padding: 7px;}
    .titleContainer{ justify-content: space-between;}
}


@media only screen and (max-width: 600px) {
    .prev, .next,.text {font-size: 11px}
    .cost30 {width:30%;}
    .cost9 {width:14.75%;position: absolute;vertical-align: middle;}
    .cost91 {width:14.75%}
    .cost92 {display:none}
    .nocost30 {display:none}
    .nocost9 {display:none}
    .nocost91 {display:none}
    .nocost93 {width:14.75%;position: absolute;vertical-align: middle;}
    .nocost913 {width:14.75%}
    .cost30 ,.cost9,.cost91 ,.cost92 ,.nocost30,.nocost9,.nocost91,.nocost93,.nocost913 {
      border-radius: 10px;
      border: 2px  #717171;
      max-width:30%;
      }
      .search{width:90%}
      .logo img {max-width: 100px;}
  }
  
  /* For mobile phones: */
  
  
  @media only screen and (min-width: 600px) {
    /* For tablets: */
     .cost30 {width: 30%;}
    .cost9 {width:9.5%;position: absolute;vertical-align: middle;}
    .cost91 {width:9.5%}
    .cost92 {width:9.5%}
    .nocost30 {width: 30%;}
    .nocost9 {width:9.5%;position: absolute;vertical-align: middle;}
    .nocost91 {width:9.5%}
    .nocost93 {width:9.5%;position: absolute;vertical-align: middle;}
    .nocost913 {width:9.5%}
    .cost30 ,.cost9,.cost91 ,.cost92 ,.nocost30,.nocost9,.nocost91,.nocost93,.nocost913 
    {
      border-radius: 15px;
      border: 2px  #717171;
      max-width:20%;
      }
    
  }
  @media only screen and (min-width: 768px) {
    /* For desktop: */
    .cost30 {width: 30%;}
    .cost9 {width:9.7%;position: absolute;vertical-align: middle;}
    .cost91 {width:9.5%}
    .cost92 {width:9.7%}
    .nocost30 {width: 30%;}
    .nocost9 {width:9.7%;position: absolute;vertical-align: middle;}
    .nocost93 {width:9.7%;position: absolute;vertical-align: middle;}
    .nocost91 {width:9.7%}
    .nocost913 {width:9.7%}
    .cost30 ,.cost9,.cost91 ,.cost92 ,.nocost30,.nocost9,.nocost91,.nocost93,.nocost913{
      border-radius: 15px;
      border: 2px  #717171;
      max-width:20%;
      }

    
  }