.features_pointers{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 10000;
}

#outer_layer_thumbs{
    margin-top: 20px;
    width:100%;
    text-align: center;
}

#outer_layer_thumbs .arrow{
    width:30px;
    line-height:50px;
    display: inline-block;
    vertical-align: top;
    margin:0px 5px;
    text-align: center;
    height:50px;
    transition: all .3s ease;
    color:#722741;
    cursor: default;
    font-size: 24px;
}

#outer_layer_thumbs .arrow:hover{
    background: #ccc;
}
#outer_layer_thumbs .arrow i{
    pointer-events: none;
}


#outer_layer_thumbs .thumb{
    width:75px;
    line-height:15px;
    display: inline-block;
    vertical-align: top;
    margin:0px 2px;
    text-align: center;
    height:60px;
    padding: 3px;
    transition: all .2s ease;
    color:#444;
    cursor: default;
}
#outer_layer_thumbs .thumb:hover{
    background: rgba(255,255,255,.2);
}
#outer_layer_thumbs .thumb.active{
    background: rgba(0,0,0,.3);
    color:#444;
}
#outer_layer_thumbs .thumb .dot{
    pointer-events: none;
    display: inline-block;
    width:10px;
    height:10px;
    background: #999;
    border-radius: 10px;
    transition: all .2s ease;
}

#outer_layer_thumbs .thumb .bar{
    margin-top: 5px;
    width:100%;
    height:6px;
    background: #eee;
    opacity: 0;
    transition: .1s all ease;
}
#outer_layer_thumbs .thumb .bar >div{
    height:100%;
    background: #096;
    width:0px;
}
#outer_layer_thumbs .thumb.active .bar{
    opacity: 1;
}

#outer_layer_thumbs .thumb.active .dot{
    background:#722741;
}
#outer_layer_thumbs .thumb .text{
    pointer-events: none;
    display: inline-block;
    font-size: 11px;
    line-height:12px;
    user-select:none;
}
#outer_layer_text{
    margin-top: 30px;
    text-align: center;
}
#outer_layer_text .main{
    width:100%;
    font-size: 24px;
    color:#722741;
}
#outer_layer_text .second{
    width:100%;
    font-size: 16px;
    color:#444;
}
.outer_layer{
    will-change: auto;
    transform: scale(.9);
    position: absolute;
    top:0;
    left:0;
    margin: auto;
    width:100%;
    height:100%;
    perspective: 480px;
    transition: all .5s ease;
    opacity:0;
    pointer-events: none;
        background: rgb(132,206,179);
        background: -moz-linear-gradient(-45deg,  rgba(132,206,179,1) 0%, rgba(171,193,204,1) 100%);
        background: -webkit-linear-gradient(-45deg,  rgba(132,206,179,1) 0%,rgba(171,193,204,1) 100%);
        background: linear-gradient(135deg,  rgba(132,206,179,1) 0%,rgba(171,193,204,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84ceb3', endColorstr='#abc1cc',GradientType=1 );
    background: rgba(0,0,0,.6);
}

.outer_layer.before{
    transform: scale(.8) translate(-300px,0px);
    opacity:0;
}

.outer_layer.after{
    transform: scale(1.2) translate(300px,0px);
    opacity:0;
}

.outer_layer.active{
    transform: scale(1) translate(0px,0px);
    opacity:1;
    pointer-events: auto;
}

.features_info{
    will-change: auto;
    position: absolute;
    pointer-events: none;
    top:50%;
    left:10px;
    transform: translate(0,-50%);
    background: rgba(0,0,0,.6);
    opacity: 0;
    -webkit-box-shadow: 1px 4px 5px 0px rgba(0,0,0,0.44);
    -moz-box-shadow: 1px 4px 5px 0px rgba(0,0,0,0.44);
    box-shadow: 1px 4px 5px 0px rgba(0,0,0,0.44);
    z-index: 1000;
}
.features_info .bg{
    position: absolute;
    top:-75px;
    left:-75px;
    width:400px;
    height:400px;
    background-position: center;
    background-repeat: no-repeat;
    /*transform: translate(-50px ,0px);*/
    transform: scale(1.1);
    transition: .2s all ease;
}
.features_info.active .bg{
    transform: scale(1);
    /*transform: translate(0px ,0px);*/
}
.features_info .img{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.features_info .details{
    transform: scale(.9) translate(0px ,-50%);
    /*transform: translate(50px ,-50%);*/
    background: rgb(65,146,163);
    background: -moz-linear-gradient(-45deg,  rgba(65,146,163,1) 0%, rgba(37,141,200,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(65,146,163,1) 0%,rgba(37,141,200,1) 100%);
    background: linear-gradient(135deg,  rgba(65,146,163,1) 0%,rgba(37,141,200,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4192a3', endColorstr='#258dc8',GradientType=1 );
    position: absolute;
    top: 50%;
    left:0;
    transition: .2s all ease;
    width: 100%;
}

.features_info.active .details{
    transform: scale(1) translate(0px ,-50%);
    /*transform: translate(0px ,-50%);*/
}
.features_info .title{
    font-size: 20px;
    line-height: 22px;
    color:#F7FFD8;
    padding: 10px;
    width: 100%;
    white-space: normal;
}

.features_info .subtitle{
    width: 100%;
    font-size: 16px;
    line-height: 18px;
    color:#fff;
    padding: 10px;
    white-space: normal;
}

.features_info.active{
    width:200px;
    /*height:200px;*/
    opacity: 1;
}

.features_layer{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: all .2s ease;
    background-size: contain;
    background-repeat: no-repeat;
    perspective: 5000px;
    opacity:1;
}

.features_layer.before,.features_layer.after{
    opacity:0;
}

.features_layer.no_pointer{
    pointer-events: none;
}

.features_layer_overlay{
    width:100%;
    height:100%;
    background: red;
    opacity:0;
}

.features_layer:hover{
    z-index: 1000!important;
    transform: scale(1.2);
    -webkit-box-shadow: 1px 4px 5px 0px rgba(0,0,0,0.44);
    -moz-box-shadow: 1px 4px 5px 0px rgba(0,0,0,0.44);
    box-shadow: 1px 4px 5px 0px rgba(0,0,0,0.44);
}

.features_layer:hover .features_layer_overlay{
    opacity: .3;
}
/*            .outer_layer:hover .layer{
                transform: perspective(500px) rotateY(15deg) translateZ(42px);
            }*/
.layer_0{transition-delay: .02s;}
.layer_1{transition-delay: .04s;}
.layer_2{transition-delay: .06s;}
.layer_3{transition-delay: .08s;}
.layer_4{transition-delay: .1s;}
.layer_5{transition-delay: .12s;}

.layer_0.before{transform: rotate3d(.5, .5, .05, 45deg);}
.layer_1.before{transform: rotate3d(.5, .5, .05, 45deg);}
.layer_2.before{transform: rotate3d(.5, .5, .05, 45deg);}
.layer_3.before{transform: rotate3d(.5, .5, .05, 45deg);}
.layer_4.before{transform: rotate3d(.5, .5, .05, 45deg);}

.layer_0.after{transform: rotate3d(.5, .5, .05, -45deg);}
.layer_1.after{transform: rotate3d(.5, .5, .05, -45deg);}
.layer_2.after{transform: rotate3d(.5, .5, .05, -45deg);}
.layer_3.after{transform: rotate3d(.5, .5, .05, -45deg);}
.layer_4.after{transform: rotate3d(.5, .5, .05, -45deg);}


.layer_0.active{transform: rotate3d(1, 1, 1, 0deg);}
.layer_1.active{transform: rotate3d(1, 1, 1, 0deg);}
.layer_2.active{transform: rotate3d(1, 1, 1, 0deg);}
.layer_3.active{transform: rotate3d(1, 1, 1, 0deg);}
.layer_4.active{transform: rotate3d(1, 1, 1, 0deg);}

.layer_0:hover {transform: scale(1.1)}
.layer_1:hover {transform: scale(1.1)}
.layer_2:hover {transform: scale(1.1)}
.layer_3:hover {transform: scale(1.1)}
.layer_4:hover {transform: scale(1.1)}
/*.layer_1.left:hover {transform: scale(1.05) rotateY(10deg);}
.layer_2.left:hover {transform: scale(1.05) rotateY(10deg);}
.layer_3.left:hover {transform: scale(1.05) rotateY(10deg);}
.layer_4.left:hover {transform: scale(1.05) rotateY(10deg);}

.layer_0.right:hover {transform: scale(1.05)  rotateY(-10deg);}
.layer_1.right:hover {transform: scale(1.05) rotateY(-10deg);}
.layer_2.right:hover {transform: scale(1.05) rotateY(-10deg);}
.layer_3.right:hover {transform: scale(1.05) rotateY(-10deg);}
.layer_4.right:hover {transform: scale(1.05) rotateY(-10deg);}*/