.tab_box {
    width:100%;
    overflow:hidden;
    margin-top:20px;
    color:#fff;
}
.tab-1 {
    display:block;
    opacity:1;
}
.tab-2,.tab-3,.tab-4,.tab-5,.tab-6,.tab-7 {
    display:none;
    opacity:0;
    transform:translateX(100%);
}
.leftHide {
    animation:anim_leftHide 300ms ease-in-out;
    -webkit-animation:anim_leftHide 300ms ease-in-out;
    -moz-animation:anim_leftHide 300ms ease-in-out;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
}
.rightHide {
    animation:anim_rightHide 300ms ease-in-out;
    -webkit-animation:anim_rightHide 300ms ease-in-out;
    -moz-animation:anim_rightHide 300ms ease-in-out;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
}
.rightShow {
    animation:anim_rightShow 300ms ease-in-out;
    -webkit-animation:anim_rightShow 300ms ease-in-out;
    -moz-animation:anim_rightShow 300ms ease-in-out;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
}
.leftShow {
    animation:anim_leftShow 300ms ease-in-out;
    -webkit-animation:anim_leftShow 300ms ease-in-out;
    -moz-animation:anim_leftShow 300ms ease-in-out;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
}
@keyframes anim_leftHide {
    0% {
        transform:translateX(0%);
        opacity:1;
    }
    100% {
        transform:translateX(-100%);
        opacity:0;
    }
}
@-webkit-keyframes anim_leftHide {
    0% {
        -webkit-transform:translateX(0%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateX(-100%);
        opacity:0;
    }
}
@-moz-keyframes anim_leftHide {
    0% {
        transform:translateX(0%);
        opacity:1;
    }
    100% {
        transform:translateX(-100%);
        opacity:0;
    }
}
@keyframes anim_leftShow {
    0% {
        transform:translateX(-100%);
        opacity:0;
    }
    100% {
        transform:translateX(0%);
        opacity:1;
    }
}
@-webkit-keyframes anim_leftShow {
    0% {
        -webkit-transform:translateX(-100%);
        opacity:0;
    }
    100% {
        -webkit-transform:translateX(0%);
        opacity:1;
    }
}
@-moz-keyframes anim_leftShow {
    0% {
        -moz-transform:translateX(-100%);
        opacity:0;
    }
    100% {
        -moz-transform:translateX(0%);
        opacity:1;
    }
}
@keyframes anim_rightShow {
    0% {
        transform:translateX(100%);
        opacity:0;
    }
    100% {
        transform:translateX(0%);
        opacity:1;
    }
}
@-webkit-keyframes anim_rightShow {
    0% {
        -webkit-transform:translateX(100%);
        opacity:0;
    }
    100% {
        -webkit-transform:translateX(0%);
        opacity:1;
    }
}
@-moz-keyframes anim_rightShow {
    0% {
        transform:translateX(100%);
        opacity:0;
    }
    100% {
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes anim_rightHide {
    0% {
        transform:translateX(0%);
        opacity:1;
    }
    100% {
        transform:translateX(100%);
        opacity:0;
    }
}
@-webkit-keyframes anim_rightHide {
    0% {
        -webkit-transform:translateX(0%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateX(100%);
        opacity:0;
    }
}
@-moz-keyframes anim_rightHide {
    0% {
        -moz-transform:translateX(0%);
        opacity:1;
    }
    100% {
        -moz-transform:translateX(100%);
        opacity:0;
    }
}
.upHide {
  animation: anim_upHide 300ms ease-in-out;
  -webkit-animation: anim_upHide 300ms ease-in-out;
  -moz-animation: anim_upHide 300ms ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
@keyframes anim_upHide {
  0% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1
  }
  100% {
    transform: translateY(-100%);
/*    transform: rotateX(45deg);*/
    opacity: 0;
  }
}
@-webkit-keyframes anim_upHide {
  0% {
    -webkit-transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1
  }
  100% {
    -webkit-transform: translateY(-100%);
/*    transform: rotateX(45deg);*/
    opacity: 0;
  }
}
@-moz-keyframes anim_upHide {
  0% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1
  }
  100% {
    transform: translateY(-100%);
/*    transform: rotateX(45deg);*/
    opacity: 0;
  }
}
.upShow {
  animation: anim_upShow 300ms ease-in-out;
  -webkit-animation: anim_upShow 300ms ease-in-out;
  -moz-animation: anim_upShow 300ms ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
@keyframes anim_upShow {
  0% {
    transform: translateY(-100%);
/*    transform: rotateX(45deg);*/
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1;
  }
}
@-webkit-keyframes anim_upShow {
  0% {
    -webkit-transform: translateY(-100%);
/*    transform: rotateX(45deg);*/
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1;
  }
}
@-moz-keyframes anim_upShow {
  0% {
    transform: translateY(-100%);
/*    transform: rotateX(45deg);*/
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1;
  }
}
.downHide {
  animation: anim_downHide 300ms ease-in-out;
  -webkit-animation: anim_downHide 300ms ease-in-out;
  -moz-animation: anim_downHide 300ms ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
@keyframes anim_downHide {
  0% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1
  }
  100% {
    transform: translateY(100%);
/*    transform: rotateX(-45deg);*/
    opacity: 0;
  }
}
@-webkit-keyframes anim_downHide {
  0% {
    -webkit-transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1
  }
  100% {
    -webkit-transform: translateY(100%);
/*    transform: rotateX(-45deg);*/
    opacity: 0;
  }
}
@-moz-keyframes anim_downHide {
  0% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1
  }
  100% {
    transform: translateY(100%);
/*    transform: rotateX(-45deg);*/
    opacity: 0;
  }
}
.downShow {
  animation: anim_downShow 300ms ease-in-out;
  -webkit-animation: anim_downShow 300ms ease-in-out;
  -moz-animation: anim_downShow 300ms ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}
@keyframes anim_downShow {
  0% {
    transform: translateY(100%);
/*    transform: rotateX(-45deg);*/
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1;
  }
}
@-webkit-keyframes anim_downShow {
  0% {
    -webkit-transform: translateY(100%);
/*    transform: rotateX(-45deg);*/
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1;
  }
}
@-moz-keyframes anim_downShow {
  0% {
    transform: translateY(100%);
/*    transform: rotateX(-45deg);*/
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
/*    transform: rotateX(0deg);*/
    opacity: 1;
  }
}