*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #dddddd;
}

.cases_wrap{
    width: 100%;
}
    .case_item{
        width: 100%;
        /*margin-top: 20px;*/
    }
    .case_item:first-child{
        margin-top: 0;
    }
        .case_item a{
            display: block;
            position: relative;
            width: 100%;
        }
        .case_item > i{

        }
            .case_item a b{
                display: inline-block;
                padding: 12px 10px 8px;
                color: #ffffff;
                /*background-color: #17b2ba;*/
                background-color: #fff;
                /*background-color: rgba(23,178,186, .9);*/
                /*background-image: url("./i/caces_rew_bkg.png");*/
                /*background-repeat: repeat-x;*/
                /*background-position: 0 0;*/

                background-image: url(./i/sprite.png);
                background-position: 0 -117px;
                background-repeat: repeat-x;

                max-width: 80%;
                position: absolute;
                top: 0px;
                left: -100%;
                font-size: 14px;
                line-height: 18px;
                font-family: Arial, sans-serif;
                font-weight: normal;

                -webkit-transition: all .4s;
                -moz-transition: all .4s;
                -ms-transition: all .4s;
                -o-transition: all .4s;
                transition: all .4s;



            }
                .case_item a b > i{
                    display: block;
                    position: absolute;
                    height: 9px;
                    /*background-color: #fff;*/
                    width: 100%;
                    bottom: -9px;
                    left: 0;
                    background-image: url(./i/sprite.png);
                    background-position: 50% -104px;
                }
            .case_item a span{
                display: block;
                width: 100%;
                overflow: hidden;

            }
                .case_item a span img{
                    display: block;
                    width: 100%;

                    -webkit-transition: all .8s;
                    -moz-transition: all .8s;
                    -ms-transition: all .8s;
                    -o-transition: all .8s;
                    transition: all .8s;

                }
            .case_item a .overlay{
                display: block;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                min-height: 100%;
                background-color: rgba(0,0,0, .2);
                opacity: 0;

                -webkit-transition: all .4s;
                -moz-transition: all .4s;
                -ms-transition: all .4s;
                -o-transition: all .4s;
                transition: all .4s;

            }

        .case_item a:hover{}
            .case_item a:hover b{
                left: 0;
            }
            .case_item a:hover span{}
                .case_item a:hover span img{
                    -webkit-transform: scale(1.1);
                    -moz-transform: scale(1.1);
                    -ms-transform: scale(1.1);
                    -o-transform: scale(1.1);
                    transform: scale(1.1);
                }
            .case_item a:hover .overlay{
                opacity: 1;
            }
            /*.case_item a.active .overlay{*/
                /*background-color: rgba(255, 255, 255, .2);*/
            /*}*/




@media screen and (max-width: 500px) {
    .case_item a b {
        line-height: 16px;

    }
}
@media screen and (max-width: 400px) {
    .case_item a b {
        font-size: 13px;
        line-height: 15px;

    }
}
@media screen and (max-width: 300px) {
    .case_item a b {
        font-size: 11px;
        line-height: 13px;

    }
}