*{
  box-sizing: border-box;
}

body{
  margin:0;
  background: black;
  width:100%;
}

.header, .footer{
  width:100%;
}

.casino{
  display:flex;
  flex-direction: column;
  position:relative;
  overflow: hidden;
  background: black;
  width:100%;
}

.item_bg{
  position:absolute;
  z-index: 1;
  width:100%;
  height:100%;
  object-fit: cover;
  display:none;
  -webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.item_bg_active{
  display:block;
}

.casino_content{
  display:flex;
  align-items: center;
  justify-content: flex-start;
  margin: auto;
  padding:20px 0;
  z-index: 2;
  position:relative;
  width:1024px;
}

.casino_list{
  width:55%;
  min-width: 55%;
  display:grid;
  grid-template-columns: repeat(auto-fit, 40%);
  column-gap:3%;
  z-index: 2;
}

.casino_item{
  position:relative;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: 0.2s;
  cursor: pointer;
}

.casino_item::after{
  content:"";
  background: url('../../img/livecasino/light.png');
  background-size: 100% 100%;
  position:absolute;
  left:0%;
  top:-13px;
  pointer-events: none;
  width:100px;
  height:26px;
  mix-blend-mode: screen;
  display:none;
  -webkit-animation: light_top 2s infinite;
    animation: light_top 2s infinite;
}

.casino_item::before{
  content:"";
  background: url('../../img/livecasino/light.png');
  background-size: 100% 100%;
  position:absolute;
  right:0%;
  bottom:-11px;
  pointer-events: none;
  width:100px;
  height:26px;
  mix-blend-mode: screen;
  display:none;
  -webkit-animation: light_bottom 2s infinite;
          animation: light_bottom 2s infinite;
}

.casino_item_logo{
  width:100%;
  position:absolute;
  z-index: 2;
  filter:grayscale(1);
}

.rect{
  width:100%;
}

.item_model{
  height:80%;
  margin-left: -5%;
  display:none;
  -webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.new_label{
  position:absolute;
  top:0;
  height:100%;
  pointer-events: none;
}

.item_model_active{
  display:block;
}

.casino_item_active .casino_item_logo{
  filter:none;
}

.casino_item_active::after,.casino_item_active::before{
  display:block;
}

.casino_item_active{
  transform:scale(1.05);
}

/**
 * ----------------------------------------
 * animation light
 * ----------------------------------------
 */
@-webkit-keyframes light_top {
  0%{
    left:30%;
    opacity: 0;
  }

  80% {
    left:0%;
    opacity: 1;
  }

  100% {
    left:0%;
    opacity: 0;
  }


}
@keyframes light_top{
  0%{
    left:30%;
    opacity: 0;
  }

  80% {
    left:0%;
    opacity: 1;
  }

  100% {
    left:0%;
    opacity: 0;
  }
}


@-webkit-keyframes light_bottom {
  0%{
    right:30%;
    opacity: 0;
  }

  80% {
    right:0%;
    opacity: 1;
  }

  100% {
    right:0%;
    opacity: 0;
  }


}
@keyframes light_bottom{
  0%{
    right:30%;
    opacity: 0;
  }

  80% {
    right:0%;
    opacity: 1;
  }

  100% {
    right:0%;
    opacity: 0;
  }
}




/**
 * ----------------------------------------
 * animation slide-in-bck-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bck-center {
  0% {
    -webkit-transform: perspective(1000px) translateZ(600px);
            transform: perspective(1000px) translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: perspective(1000px) translateZ(0);
            transform: perspective(1000px) translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-center {
  0% {
    -webkit-transform: perspective(1000px) translateZ(600px);
            transform: perspective(1000px) translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: perspective(1000px) translateZ(0);
            transform: perspective(1000px) translateZ(0);
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}