@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
    color: #fff;
    background: linear-gradient(270deg, #001832, #042447, #001832, #072a51, #072a51);
}
@font-face {
    font-family: 'Arial Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Arial Regular'), url('ARIAL.woff') format('woff');
}
*, *:before, *:after{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}
ul{list-style: none;}
p{margin:  0px;}
.logo-marque{
    background: #1d77d6;
    background: -moz-linear-gradient(top, #d9b553 0%, #f4e59d 50%, #d4ab46 100%);
    background: -webkit-linear-gradient( -90deg,#3895f7 0%,#1d77d6 100%);
    /* background: linear-gradient( -90deg,#3895f7 0%,#1d77d6 100%); */
    height: 60px;
    margin-bottom: 10px;
}
.logo-marque ul{
    display: flex;
    justify-content: space-between;
}
.logo-marque ul > li{
    width: 100px;
}
.logo-marque ul > li .marquee-div{
    background: #fff9f9;
    color: #000;
    border: 1px solid #8d7d54;
    overflow: hidden;
    padding: 3px;
}
.logo-marque ul > li > img{
    padding: 15px 17px 2px;
    width: 210px;
    display: block;
}
.logo-marque ul > li:nth-child(2){
    margin-left: 20px;
    padding-top: 19px;
    width: 850px;
}

.logo-marque ul > li .marquee-div > p{
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
    transform:
    translateX(100%);
    -moz-animation: marquee 20s linear infinite;
    -webkit-animation: marquee 20s linear infinite;
    animation: marquee 20s linear infinite;
}
.logo-marque ul > li .marquee-div > p:hover{
    cursor: pointer;
    -moz-animation-play-state: paused;
     -webkit-animation-play-state: paused;
      animation-play-state: paused;
}
   @-moz-keyframes marquee {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
   }
   @-webkit-keyframes marquee {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
   }
   @keyframes marquee {
    0%   { 
    -moz-transform: translateX(100%); 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%);        
    }
    100% { 
    -moz-transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    transform: translateX(-100%); 
    }
   }

.game-section .nav-pills > li {
    border-radius: 4px;
    margin-bottom: 2px;
    background: #1d77d6;
    background: -webkit-linear-gradient( -90deg,#3895f7 0%,#1d77d6 100%);
    background: -moz-linear-gradient(bottom, #c5992e, #ecd573);
    /* background: linear-gradient(to top, #c5992e, #ecd573); */
}
.game-section .nav-pills>li.active>a{
    color: #000;
    background-color: #ffffff;
    text-transform: uppercase;
}
.game-section .nav-tabs>li>a{
  margin-right: 0;
  border: 0;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
.game-section .nav-tabs>li>a > img{
    padding-right: 10px;
}
.game-section .nav-tabs{ border-bottom: 0;}
.game-section .tab-content{
    border: 1px solid #407ab9;
    padding: 10px;
    background: #01162d;
}
.tab-content-games .tab-games .list-games{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
.tab-content-games .tab-games .list-games > li{
    width: 160px;
    height: 160px;
    margin-right: 5px;
    margin-bottom: 50px;
}
.tab-content-games .tab-games .list-games > li > img{
    width: 160px;
    height: 160px;
}
.tab-content-games .tab-games .list-games .progress-cus {
    margin-top: 4px;
    margin-bottom: 0px;
    border-radius: 10px;
}

.content {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
  }
  .content .image-overlay {
    background: rgb(87 169 255 / 70%);
    position: absolute;
    border-radius: 20px;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
  }
   
  .content:hover .image-overlay{
    opacity: 1;
  }
   
  .content-image{
    width: 100%;
  }
  .content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
   
  .content:hover .content-details{
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  .fadeIn-bottom {
        top: 80%;
  }
  .btn-sm{
    padding: 5px 40px;
  }
  .btn-black, .btn-black:hover{
    color: #fff;
    background-color: #000000;
    border-color: #000000;
  }
  .img-radius{
    border-radius: 20px;
    border: 3px solid #323233;
  }

  .top-header{
    margin-top: 20px;
  }
  .top-header .btn-cus{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    float: right;
    z-index: 9999;
    position: relative;
    margin: 0;
  }
  .top-header .btn-cus > li:nth-child(2){
    margin-left: 10px;
  }
  .top-header .pad-custom{
    padding: 6px 27px;
    font-size: 17px;
  }
  .top-header .btn-warning{
    background: #2984e4;
    border: 1px solid #9acbff;
  }
  .top-header .btn-white{
    background: #ed3d2c;
    color: #fff;
    border: 1px solid #fff;
  }
  .top-header .social{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    float: left;
  }
  .top-header .social > li {
    margin-right: 17px;
    background: #2984e4;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50px;
  }
  .top-header .social > li > a > i{
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 992px) {
    .logo-marque ul{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .logo-marque ul > li:nth-child(2){
        margin-left: 0;
        padding-top: 0;
    }
    .tab-content-games .tab-games .list-games > li{
        width: 15.5rem;
        height: auto;
        margin-right: 6px;
        margin-bottom: 1.5rem;
    }
    .game-section .nav-tabs{
        margin-bottom: 2.5rem;
    }
    .logo-marque{
        height: auto;
        margin-bottom: 0;
    }
    .logo-marque ul > li{
        width: auto;
    }
    .logo-marque ul > li > img{
        padding: 15px 17px 2px;
        width: auto;
        display: block;
        margin: 0 auto;
    }
    
}