.slider{
  height: 100%;
  width:100vw;
  background-image:url('/infiniwin/mobile/img/index/slider_bg.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position:relative;
}

.slider_content{
  display:flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:100%;
}

.slide{
  display:flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  -webkit-animation: tilt-in-fwd-tr 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
         animation: tilt-in-fwd-tr 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide img{
  width:100%;
}

.slider_controller{
  position:absolute;
  bottom:2vmin;
  left:50%;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  display:flex;
  align-items: center;
  background: var(--gradient2);
  padding:1vmin;
  border-radius: 2vmin;
}


.slide_btn{
  height:1.5vmin;
  width:4vmin;
  background: rgba(255,255,255,0.5);
  margin:0 1vmin;
  border-radius: 1vmin;
}

.active_btn{
  background: var(--gradient1);
}

.index_topmenu{
  width:100%;
  display:flex;
  align-items: center;
  background: var(--gradient1);
}

.index_topmenu_item{
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 4vmin;
  flex:1;
  border-right: 2px solid var(--color2);
  color:black !important;
  text-transform: uppercase;
  padding:1vmin;
  text-decoration: none;
}

.index_topmenu_item:last-child{
  border:none;
}

.index_topmenu_item img{
  height:4vmin;
  margin-right: 2vw;
  filter:drop-shadow(1px 1px 1px black);
}

.index_menu{
  display:flex;
  position:relative;
  background: var(--gradient2);
}

.index_menu_next,.index_menu_prev{
  position:absolute;
  right:0;
  height:4vmin;
  top:50%;
  -moz-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  z-index: 2;
}

.index_menu_next{
  right:1vmin;
  -webkit-animation: arrow_r 0.4s infinite alternate ease-in-out;
  animation: arrow_r 0.4s infinite alternate ease-in-out;
}

.index_menu_prev{
  left:1vmin;
  -webkit-animation: arrow_l 0.4s infinite alternate ease-in-out;
  animation: arrow_l 0.4s infinite alternate ease-in-out;
  display:none;
}


.index_menu_content{
  background: var(--gradient2);
  display:flex;
  overflow-x: auto;
  padding:1vh 0;
  box-shadow: 0 3px 5px rgb(10,10,10);
}

.index_menu_item{
  display:flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color:white;
  font-size: 3vmin;
  min-width:18vmin;
  margin:0 1vmin;
  background: linear-gradient(-45deg, #584f3f, #413021, #584f3f 60%);
  padding:2vmin 0;
  border-radius: 1vmin;
  text-align: center;
}

.index_menu_item>*{
  filter:grayscale(1);
}

.index_menu_item img{
  height:10vmin;
}

.index_menu_content .hot_item::after{
  background: none;
  top:-1vmin;
}

.index_menu_active{
  background: none;
  color:var(--color2);
}


.index_menu_active>*{
  filter:none;
}




.index_display{
    background: var(--color10);
    display:flex;
    flex-direction: column;
    padding:4vmin 0;
}


.index_header{
  margin-bottom:1vmin;
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding:2vmin 4vmin;
}

.index_header span{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 5vmin;
}

.display_content{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding:1vmin 0;
}

.content_item{
  display:flex;
  flex-direction: column;
  text-decoration: none;
  padding:3vmin 1vmin;
  padding-top: 5vmin;
  background: rgba(255,255,255,0.05);
  border-radius: 1vmin;
  box-shadow: 1px 1px 3px black;
  margin:0 1vmin;
  margin-bottom: 3vmin;
  width:23vmin;
  overflow: hidden;
  position:relative;
}

.content_item_name{
  text-align: center;
  color:var(--color1);
  font-size: 3.5vmin;
  margin:1vmin 0;
  white-space: nowrap;
}

.content_item img{
  width:100%;
  filter:drop-shadow(1px 1px 2px black);
}

/*
.new_item::after{
  content:"NEW";
  position:absolute;
  right:0;
  top:0;
  color:var(--color5);
  background: linear-gradient(var(--color11),rgb(10,10,10));
  font-size: 3vmin;
  font-weight: bold;
  text-align: center;
  width:8vmin;
  padding:0.5vmin 2vmin 1vmin 4vmin;
  border-bottom-left-radius: 5vmin;
  -webkit-animation: new-blink 3s both infinite;
	        animation: new-blink 3s both infinite;
            font-family: 'Gugi', cursive;
}
*/

.new_item::after{
  content:"NEW";
  color:var(--color5);
  background: linear-gradient(to right,var(--color11),rgb(10,10,10));
  position:absolute;
  top:-13vmin;
  right:-13vmin;
  height:20vmin;
  width:20vmin;
  transform:rotate(45deg);
  font-size: 2.5vmin;
  padding-bottom:1vmin;
  display:flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-animation: new-blink 3s both infinite;
          animation: new-blink 3s both infinite;
          font-family: 'Gugi', cursive;
}


.hot_item::after{
  content:"HOT";
  color:var(--color3);
  background: linear-gradient(to right,var(--color11),rgb(10,10,10));
  position:absolute;
  top:-13vmin;
  right:-13vmin;
  height:20vmin;
  width:20vmin;
  transform:rotate(45deg);
  font-size: 2.5vmin;
  padding-bottom:1vmin;
  display:flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-animation: hot-blink 3s both infinite;
          animation: hot-blink 3s both infinite;
          font-family: 'Gugi', cursive;
}

.es_content .content_item{
  width:48vmin;
}


/*-----------------------------------------------------*/

.game_status{
  background: var(--color10);
  display:flex;
  flex-wrap: wrap;
  /*padding:2vmin 0 10vmin 0;*/
}

.game_status_item{
  background: var(--gradient1);
  width:30vmin;
  position:relative;
  padding:0.5vmin;
  border-radius:3vmin;
  margin:5vmin 1.5vmin;
}

.game_status_logo{
  position:absolute;
  background: var(--color10);
  height:5vmin;
  top:-2vmin;
  left:50%;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  transform:translateX(-50%);
}

.game_status_text{
  background: var(--color10);
  color:white;
  border-radius:2.5vmin;
  padding:5vmin 1vmin 3vmin 1vmin;
  font-size: 2.5vmin;
  text-align: left;
  height:100%;
  width:100%;
}




/*---------------------------------------------------------*/




/**
 * ----------------------------------------
 * animation tilt-in-fwd-tr
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform:perspective(50vw)  rotateY(20deg) rotateX(35deg) translate(30vw, -30vw) skew(-35deg, 10deg);
            transform:perspective(50vw)  rotateY(20deg) rotateX(35deg) translate(30vw, -30vw) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform:perspective(50vw)  rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform:perspective(50vw)  rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform:perspective(50vw)  rotateY(20deg) rotateX(35deg) translate(30vw, -30vw) skew(-35deg, 10deg);
            transform:perspective(50vw)  rotateY(20deg) rotateX(35deg) translate(30vw, -30vw) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform:perspective(50vw)  rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform:perspective(50vw) rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation new-blink
 * ----------------------------------------
 */
@-webkit-keyframes new-blink {
  0%,
  50%,
  100% {
    color:var(--color5);
  }
  25%,
  75% {
    color:transparent;
  }
}
@keyframes new-blink {
  0%,
  50%,
  100% {
    color:var(--color5);
  }
  25%,
  75% {
    color:transparent;
  }
}




/**
 * ----------------------------------------
 * animation hot-blink
 * ----------------------------------------
 */
@-webkit-keyframes hot-blink {
  0%,
  50%,
  100% {
    color:var(--color3);
  }
  25%,
  75% {
    color:transparent;
  }
}
@keyframes hot-blink {
  0%,
  50%,
  100% {
    color:var(--color3);
  }
  25%,
  75% {
    color:transparent;
  }
}

/**
 * ----------------------------------------
 * animation arrow
 * ----------------------------------------
 */

@-webkit-keyframes arrow_r {
  0% { right:1vmin;}
  100% { right:2vmin;}
}
@keyframes arrow_r {
  0% { right:1vmin;}
  100% { right:2vmin;}
}


@-webkit-keyframes arrow_l {
  0% { left:1vmin;}
  100% { left:2vmin;}
}
@keyframes arrow_l {
  0% { left:1vmin;}
  100% { left:2vmin;}
}



@media screen and (orientation:landscape) {
  .display_content{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .game_status{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
  }

 }