.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); 
  }	  


}

.swal2-popup {
  width: 50%;
}
.form-control {
  font-size: 1.02rem;
  height: 35px;
}
.swal2-popup {
  /*width: 50%;*/
}

@media screen and (max-width: 800px) {
  .swal2-popup {
    width: 100%;
  }
}
.order-details {
  background-color: rgb(58 12 0);
  padding: 1.3rem 1.4rem;
}

.headtextall {
  color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 0;
  text-transform: uppercase;
  background: linear-gradient(180deg, #691e0d, #2f0505);
  padding-bottom: 10px;
  border-radius: 5px;
  height: 50px;
  font-size: 14pt;
}

.page-title h3 {
  width: 100%;
  margin: 0px 0 0px;
  background: -webkit-linear-gradient(#ffffff,#a7a7a7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 40px;
}

.bgmainall{
  background-color: rgb(58 12 0);
  border-radius: 10px;
}
.head-content{
  color: #fff;
  font-size: 16px;
  margin-top:10px;
  padding:10px 20px 10px 20px;
  border-radius: 8px 8px 0 0;
  text-shadow:1px 1px 10px rgba(0,0,0,1);
  background:#3cd5fa;
  background:-moz-linear-gradient(to bottom, #343434 0%, #111 33%, #111 66%, #343434 100%);
  background:-webkit-linear-gradient(to bottom, #343434 0%, #111 33%, #111 66%, #343434 100%);
  background: linear-gradient(180deg, #691e0d, #2f0505);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3cd5fa',endColorstr='#002421',GradientType=0)
  }
.body-content{
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
  background-color: rgb(72 19 5);
  }



@media screen and (max-width: 800px){
  .logo_m img {
    width: 100%;
  }
}
.head_mc {
  display: none;
}
@media screen and (max-width: 980px){
  .head_mc {
    display: block;
  }
}
@media screen and (max-width: 800px){
  .logo_m {
    display: block;
    float: left;
    width: 100%;
    text-align: center;
  }
}
.team-popup-close {
  color: #fff;
  width: 30px;
  font-size: 30px;
  position: absolute;
  z-index: 999;
  top: 60;
  right: 0;
}

a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}