/* //////////////////////////////////////////////////////////// */
/* //////////////////////// CASE STYLES ////////////////////////*/
/* //////////////////////////////////////////////////////////// */




.case-anim-item {
    width : 240px;
    height: 192px;
    /*width : 1240px;
    height: 1920px;*/
    display: block;
    position: relative;
    box-sizing: border-box;
    /*border: solid 1px rgb(157, 157, 157);*/
    margin: 30px 10px;
    background: #f4f8fc;
    margin: 0 auto;
}

.case-anim-item .timer_topimg,
.case-anim-item .timer_wrap{
    font-family: Tahoma, Arial,Verdana, sans-serif;
    color: #fff;
    font-size: 19px;
    text-align: center;
    position: relative;
    text-decoration: none;
}
.case-anim-item .timer_topimg{
    width:240px;
    height:190px;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: 50% 50%;
}
.case-anim-item .timer_topimg .blick{
    position: absolute;
    -webkit-animation: top_blik_img_rotate-animation 5s ease-in-out infinite;
    animation: top_blik_img_rotate 5s infinite linear;
    pointer-events: none;
}
.case-anim-item .timer_topimg .blick1{
    width: 41px;
    height: 71px;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: 50% 50%;
    top: 74px;
    left: 93px;
}
.case-anim-item .timer_topimg .blick2{
    width: 92px;
    height: 98px;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: 50% 50%;
    left: 112px;
    top: 42px;
}
/* //////////////////////////////////////////////////////////// */
/* //////////////////////// CASE STYLES ////////////////////////*/
/* //////////////////////////////////////////////////////////// */


animated-cases {
    width: 100%;
    max-width: 960px;
    padding: 40px;
    display: block;
    box-sizing: border-box;
    left: 0; right: 0; margin: 0 auto;
}

.animated-cases > div > h1 {
    text-decoration: none;
    font-family: sans-serif;
    color: #737373
}

.animated-cases > div {
    width: 100%;
    padding: 20px;
    display: block;
    box-sizing: border-box;
    margin-bottom: 40px;
    box-shadow: 0px 15px 30px 0px rgba(0,0,0,.15);
    text-align: center;
    background-color: #ffffff;
}

.animated-cases > div > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.case-anim-item .case-anim-stuff{
    -webkit-transition: -webkit-transform 200ms;
    transition: -webkit-transform 200ms;
    -o-transition: transform 200ms;
    transition: transform 200ms;
    transition: transform 200ms, -webkit-transform 200ms;
}
.case-anim-item:hover .case-anim-stuff{
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);

}
.case-anim-item:hover .case-anim-btn-active{
    opacity: 0;
}
.case-anim-item .case-anim-btn{
    position: reletive;
    border-radius: 5px;
    overflow: hidden;
}
.case-anim-item .case-anim-btn.disable{
    display: none;
}
.case-anim-item .case-anim-btn:before{
    content: '';
    width: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),color-stop(50%, rgba(255,255,255,1)),to(rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    z-index: 3;
    -webkit-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    transform: skewX(-10deg)
}
.countdown_time:before{
    display: none;
}


.top_blik_img{
    position: absolute;
    width: 50px;
    height: 50px;
    right: 60px;
    pointer-events: none;
    bottom: 65px;
    animation: top_blik_img_rotate 5s infinite linear;
}


.case-anim-item:hover .case-anim-btn:before{
    -webkit-animation: blick-animation 1.4s ease-in-out infinite;
    animation: blick-animation 1.4s ease-in-out infinite;
}
@-webkit-keyframes blick-animation{
    from{
        opacity: 0;
        left: -50px;
    }
    20%{
        opacity: 1;
    }
    40%,
    to{
        opacity: 0;
        left: 100%;
    }
}
@keyframes blick-animation{
    from{
        opacity: 0;
        left: -50px;
    }
    20%{
        opacity: 1;
    }
    40%,
    to{
        opacity: 0;
        left: 100%;
    }
}
@keyframes top_blik_img_rotate{
    from{
        transform: rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}



.case-anim-item .before {
    display: none;
}

.case-anim-item .timer_topimg .text_line{position:absolute;left:0;right:0;bottom:2px}
.case-anim-item .timer_wrap{font-size:0;margin-top:7px}
.case-anim-item .timer_wrap .names{font-size:0;margin-top:1px;padding:0 5px}
.case-anim-item .timer_wrap .names > *{text-align:center;width:25%;text-transform:uppercase;font-size:9px;color:#000;display:inline-block}
.case-anim-item .timer_wrap .digit{position:relative;display:inline-block;width:20px;height:32px;-webkit-border-radius:3px;border-radius:3px;background:-webkit-gradient(linear,left top,left bottom,from(#575757),color-stop(200%,#1b1b1a));background:-webkit-linear-gradient(#575757 0%,#1b1b1a 200%);background:-o-linear-gradient(#575757 0%,#1b1b1a 200%);background:linear-gradient(#575757 0%,#1b1b1a 200%);font-size:19px;color:#fff;margin:0 1px 0 0;vertical-align:middle}
.case-anim-item .timer_wrap .digit:nth-child(2n){margin-right:8px}
.case-anim-item .timer_wrap .digit:nth-child(2n - 1){margin-left:8px}
.case-anim-item .timer_wrap .digit:after{position:absolute;z-index:3;width:100%;height:1px;top:50%;left:0;background:rgba(0,0,0,.5);content:''}
.case-anim-item .timer_wrap .base{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.case-anim-item .timer_wrap .flap{display:none;position:absolute;width:100%;height:50%;left:0;top:0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.case-anim-item .timer_wrap .flap::before{content:attr(data-content);position:absolute;left:50%}
.case-anim-item .timer_wrap .flap.front::before,.case-anim-item .timer_wrap .flap.under::before{top:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.case-anim-item .timer_wrap .flap.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.case-anim-item .timer_wrap .flap.back::before{top:100%;-webkit-transform:translate(-50%,-50%) rotateZ(180deg);-ms-transform:translate(-50%,-50%) rotate(180deg);transform:translate(-50%,-50%) rotateZ(180deg)}
.case-anim-item .timer_wrap .flap.over{z-index:2}
.case-anim-item .timer_wrap .flap.under{z-index:1}
.case-anim-item .timer_wrap .flap.front{-webkit-animation:flip-down-front 500ms ease-in both;animation:flip-down-front 500ms ease-in both;background:-webkit-gradient(linear,left top,left bottom,from(#575757),color-stop(200%,#1b1b1a));background:-webkit-linear-gradient(#575757 0%,#1b1b1a 200%);background:-o-linear-gradient(#575757 0%,#1b1b1a 200%);background:linear-gradient(#575757 0%,#1b1b1a 200%)}
.case-anim-item .timer_wrap .flap.back{-webkit-animation:flip-down-back 500ms ease-in both;animation:flip-down-back 500ms ease-in both;background:-webkit-gradient(linear,left top,left bottom,from(#1b1b1a),color-stop(200%,#575757));background:-webkit-linear-gradient(#1b1b1a 0%,#575757 200%);background:-o-linear-gradient(#1b1b1a 0%,#575757 200%);background:linear-gradient(#1b1b1a 0%,#575757 200%)}
.case-anim-item .timer_wrap .flap.under{-webkit-animation:fade-under 500ms ease-in both;animation:fade-under 500ms ease-in both;background:-webkit-gradient(linear,left top,left bottom,from(#575757),color-stop(200%,#1b1b1a));background:-webkit-linear-gradient(#575757 0%,#1b1b1a 200%);background:-o-linear-gradient(#575757 0%,#1b1b1a 200%);background:linear-gradient(#575757 0%,#1b1b1a 200%)}
@-webkit-keyframes flip-down-front {
    0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);color:#fff}
    100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);color:#333}
}
@keyframes flip-down-front {
    0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);color:#fff}
    100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);color:#333}
}
@-webkit-keyframes flip-down-back {
    0%{-webkit-transform:rotateY(180deg) rotateX(0deg);transform:rotateY(180deg) rotateX(0deg);color:#333}
    100%{-webkit-transform:rotateY(180deg) rotateX(180deg);transform:rotateY(180deg) rotateX(180deg);color:#fff}
}
@keyframes flip-down-back {
    0%{-webkit-transform:rotateY(180deg) rotateX(0deg);transform:rotateY(180deg) rotateX(0deg);color:#333}
    100%{-webkit-transform:rotateY(180deg) rotateX(180deg);transform:rotateY(180deg) rotateX(180deg);color:#fff}
}
@-webkit-keyframes fade-under {
    0%{color:#333}
    100%{color:#fff}
}
@keyframes fade-under {
    0%{color:#333}
    100%{color:#fff}
}
.case-anim-item .case_name{
    display: none;
}