.game-slot {
    display: grid;
    text-align: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 10px auto 30px;
    padding: 3% 0% 0% 0%;
  }

  .slot-box {
    display: grid;
    width: 100%;
    min-height: 200px;
    border-radius: 30px 30px 8px 8px;
    /* background: #490000; */
    grid-template-columns: 1fr;
    grid-template-areas: "slot-cover""slot-info""slot-btn";
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    align-items: start;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
  }

  .slot-cover {
    z-index: 70;
    display: grid;
    grid-area: slot-cover;
    background: none;
    grid-template-columns: 100%;
    grid-template-areas: "sl-cv-bg""sl-chr";
    position: relative;
    align-items: start;
  }

  .sl-cv-bg {
    z-index: 71;
    grid-area: sl-cv-bg;
    grid-row: 1/2;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
  }
  img {
    max-width: 100%;
  }
  .sl-chr {
    z-index: 72;
    grid-area: sl-chr;
    grid-row: 1/2;
    position: absolute;
    top: -20px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
  }
  /*.slot-box:hover {
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  }*/
  .slot-cen{margin-top:-10%;-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
            -webkit-filter:contrast(80%);filter:contrast(80%);-webkit-filter:brightness(80%);filter:brightness(80%);}
  .slot-intro:hover .slot-cen{-webkit-filter:contrast(120%);filter:contrast(120%);-webkit-filter:brightness(110%);filter:brightness(110%);}
  .slot-content{text-align:center;min-height:600px;background:#f4f4f4;width:100%;margin:0 auto;padding:30px;}

  .game-slot{display:grid;text-align:center;/*grid-gap:30px;grid-template-columns:1fr 1fr 1fr 1fr;*/align-items:center;
             width:100%;max-width:1200px;margin:10px auto 30px;padding:3% 0% 0% 0%;}
  .slot-box{display:grid;width:100%;min-height:200px;border-radius:30px 30px 8px 8px;/*background:#490000;*/grid-template-columns:1fr;
            grid-template-areas:"slot-cover""slot-info""slot-btn";box-shadow:0 10px 30px rgba(0, 0, 0, 0.03);align-items:start;
            -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;position:relative;}
  .slot-cover{z-index:70;display:grid;grid-area:slot-cover;background:none;grid-template-columns:100%;
              grid-template-areas:"sl-cv-bg""sl-chr";position: relative;align-items:start;}		
  .sl-cv-bg{z-index:71;grid-area:sl-cv-bg;grid-row: 1/2;border-radius:30px 30px 0 0;overflow:hidden;}
  .sl-chr{z-index:72;grid-area:sl-chr;grid-row: 1/2;position: absolute;top:-20px;
          -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
  .slot-box:hover .sl-chr{position: absolute;top:-45px;}	
  .slot-info{z-index:73;grid-area:slot-info;padding:10px 20px 20px;grid-row: 2/3;margin-top:-20%;border-radius: 0 0 8px 8px;
             background: #f97d1d;
             background: -moz-linear-gradient(top,  #f97d1d 0%, #44110a 100%);
             background: -webkit-linear-gradient(top,  #f97d1d 0%,#44110a 100%);
             background: linear-gradient(to bottom,rgba(176,0,0,1) 0,rgba(110,0,0,1) 49%,rgba(28,0,0,1) 100%);
             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97d1d', endColorstr='#44110a',GradientType=0 );
  }
  .sl-logo{z-index:75;margin-top:-20%;margin-bottom: -5%;}
  .slot-btn{z-index:74;grid-area:slot-btn;display:grid;margin-top:-10%;padding:10px 10px 20px;grid-row: 2/3;background:#fff;width:100%;opacity:0;
            border-radius: 0 0 7px 7px;-webkit-transition: all .5s ease-out; transition: all .5s ease-out;align-items:end;}
  .slot-box:hover .slot-btn{opacity:1;}
  /*.slot-box:hover{box-shadow:0 -10px 40px rgba(0, 0, 0, 0.2);} */
  .slot-box:hover .sl-chr{-webkit-filter:contrast(120%);filter:contrast(120%);-webkit-filter:brightness(130%);filter:brightness(130%);}
  .tx-name-slot{font-family: thaisanslite_r1;font-size: 18px;line-height: 18px;color:#444;}
  .tx-slot{font-size: 14px;line-height: 20px;color:#fff;overflow: hidden;max-height: 39px;}
  .slot-eff{-webkit-transition: all .3s ease-out; transition: all .3s ease-out;
            -webkit-filter:contrast(80%);filter:contrast(80%);
            -webkit-filter:brightness(200%);filter:brightness(200%);
            -webkit-filter: grayscale(100%);filter: grayscale(100%);
  }		
  .slot-box:hover	.slot-eff{
    -webkit-filter:contrast(110%);filter:contrast(110%);
    -webkit-filter:brightness(115%);filter:brightness(115%);
    -webkit-filter: grayscale(0%);filter: grayscale(0%);
  }

  .slot-box{
    margin-bottom: 20px;
  }



.column {
    padding: 0;
    margin-bottom: 20px;
  }
  .column div {
    -ms-flex: 0 0 25;
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    float: left;

  }
  .column div span {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
  }
  @media only screen and (max-width: 576px) {
    .column div {
      -ms-flex: 0 0 25;
      flex: 0 0 25%;
      max-width: 25%;
      position: relative;
      min-height: 1px;
      padding-right: 2px;
      padding-left: 2px;
      padding-bottom: 0px;
      float: left;

    }
    .column{
      padding: 0px 15px 0px 15px;
    }
  }
  .hover img:hover{
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  }
  figure {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
  }
  figure:hover+span {
    bottom: -36px;
    opacity: 1;
  }
  .hover figure {
    position: relative;
  }
  .hover figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
  }
  .hover figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
  }
  @-webkit-keyframes shine {
    100% {
      left: 125%;
    }
  }
  @keyframes shine {
    100% {
      left: 125%;
    }
  }

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 50%;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}

.u-btn{
    font-weight: 100;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
}
.btn-3c{
    color: #fff;
    background: rgb(101,101,101);
    background: linear-gradient(90deg, rgb(70, 70, 70) 0%, rgb(51, 51, 51) 100%);
    transition: 0.3s;
    -webkit-transition-duration: 0.4s; /* Safari */
    font-size: 18px;
}
.btn-3c:hover{
    color: #fff;
    background: rgb(122,8,7);
    background: linear-gradient(90deg, #ffc107 0%, #f3ba47 100%);
}
.btn-3c i {
    color: #fff;
    font-size: 36px;
}

.credit-box {
  background: rgb(27,13,13);
  background: linear-gradient(90deg, rgb(50, 50, 50) 0%, rgb(125, 125, 125) 100%);
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
  padding: 20px 0px;
}
.credit-box p{
  color: #fff;
  /*font-family: 'rsufont';*/
  /*font-family: 'Prompt', sans-serif;*/
  font-size: 20px;
  font-weight: 100;
}
.credit-box  > .credit {
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  /*font-family: 'rsufont';*/
  font-family: 'Prompt', sans-serif;
}

/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Buzz Out */
.btn-play{
  color: #fff;
  background: rgb(122,8,7);
  background: linear-gradient(90deg, rgb(237 181 68) 0%, rgb(136 96 17) 100%);
  font-size: 20px;
  transition: 0.3s;
  -webkit-transition-duration: 0.4s; /* Safari */
}
.btn-play:hover{
  color: #fff !important;
  background: rgb(122,8,7);
  background: linear-gradient(90deg, #ffc107 0%, #f3ba47 100%);
}
.btn-play i {
  color: #fff;
  font-size: 20px;
}

#loading{
  background-color: #070200ba;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999999;
  margin-top: 0px;
  top: 0px;
  left:0px;
}
#loading-center{
  width: 100%;
  height: 100%;
  position: relative;
}
#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 200px;
  width: 200px;
  margin-top: -100px;
  margin-left: -100px;	

}
.object{
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  position: absolute;
  border-left: 5px solid #FFF;
  border-right: 5px solid #FFF;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  -webkit-animation: animate 2s infinite;
  animation: animate 2s infinite;	
}

#object_one{
  left: 75px;
  top: 75px;
  width: 50px;
  height: 50px;
}

#object_two{
  left: 65px;
  top: 65px;
  width: 70px;
  height: 70px;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#object_three{
  left: 55px;
  top: 55px;
  width: 90px;
  height: 90px;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#object_four{
  left: 45px;
  top: 45px;
  width: 110px;
  height: 110px;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;

}	

@-webkit-keyframes animate {


  50% {
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
  }

  100% {
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
  }	  

}

@keyframes animate {

  50% {
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
  }

  100% {
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
  }	  


}