.btn:hover,
.btn:focus,
.btn:active{
    outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
	  -webkit-perspective: 800px;
   -moz-perspective: 800px;
     -o-perspective: 800px;
        perspective: 800px;
        margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
	-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
	-webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
    transform: none;
}
/* flip speed goes here */
.card {
	 -webkit-transition: -webkit-transform .5s;
   -moz-transition: -moz-transform .5s;
     -o-transition: -o-transform .5s;
        transition: transform .5s;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
	position: relative;
}
/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
        backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
	z-index: 2;
}
/* back, initially hidden pane */
.back {
		-webkit-transform: rotateY( 180deg );
   -moz-transform: rotateY( 180deg );
     -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
        z-index: 3;
}
.back .btn-simple{
    position: absolute;
    left: 0;
    bottom: 4px;
}
/*        Style       */
/*        Style Blog Header      */
#blog .container .row .blog-header h2 strong{position:relative;}
#blog .container .row .blog-header h2 span{color:#01b7f2;}
#blog .container .row .blog-header h2 strong::before{content: " ";position: absolute;left: -10px;bottom:-10px;width: 3px;height: 30px;background-color:#474543;transition: all 0.3s ease 0s;}
#blog .container .row .blog-header h2 strong::after{content: " ";position: absolute;left: -15px;bottom: -5px;width: 75px;height: 3px;background-color: #474543;transition: all 0.3s ease 0s;}
#blog .container .row .blog-header p{padding:0 20%;text-align:center;margin-bottom:45px;font-size:16px;}

/*        Style Blog Front      */
#blog .container .row .card-container, .front, .back {width: 100%;border-radius: 4px;height:550px;}
#blog .container .row .card-container .card{background: none repeat scroll 0 0 #FFFFFF;}

#blog .container .row .card-container .card .front .cover{overflow: hidden;border-radius: 4px 4px 0 0;}
#blog .container .row .card-container .card .front .cover img{width: 100%;height:250px;}
#blog .container .row .card-container .card .front .user{border-radius: 50%;display: block;height: 70px;margin: -35px auto 0;overflow: hidden;width: 70px;}
#blog .container .row .card-container .card .front .user img{background: none repeat scroll 0 0 #fff;border: 6px solid #01b7f2;width: 100%;height:100%;}

#blog .container .row .card-container .card .front .content{background-color: rgba(0, 0, 0, 0);box-shadow: none;padding: 10px 20px 20px;}
#blog .container .row .card-container .card .front .content .main {min-height: 160px;}

#blog .container .row .card-container .card .front .main h5{margin: 0;font-size: 16px;line-height: 28px;text-align: center;text-transform: uppercase;color: #3e3939;}
#blog .container .row .card-container .card .front .main span {font-size: 12px;color: #999;display: block;text-align: center;margin: 0 0 25px;padding-bottom: 12px;border-bottom: 1px solid #01b7f2;}
#blog .container .row .card-container .card .front .main span a{color: #ff6c26 !important;margin:3px;cursor:pointer;text-decoration:none;}
#blog .container .row .card-container .card .front .main h4 a{color: #232323;text-align:center;text-decoration:none;}
#blog .container .row .card-container .card .front .main p{font-size: 14px;}
#blog .container .row .card-container .card .front .main p a{text-decoration:none;color: #ff6c26;display: block;}
#blog .container .row .card-container .card .front .footer{margin-top: 35px;}
#blog .container .row .card-container .card .front .footer a{color: #423e3e;padding:5px 10px;font-size:22px;}
#blog .container .row .card-container .card .front .footer a:hover{background:#01b7f2;color:#fff;text-decoration:none;}
#blog .container .row .card-container .card .front .footer a:hover span{color:#fff;}
#blog .container .row .card-container .card .front .footer a i {font-size: 15px;}
#blog .container .row .card-container .card .front .footer a span{font-size:13px;color: #423e3e;padding-left:2px;}
#blog .container .row .card-container .card .front .footer a.comment{border-right: 1px solid #e8e8e8;padding-right: 30px;}
/*        Blog Rotate      */
#blog .container .row .card-container span.rotate{position:absolute;display:block;border-radius: 50px;right: 10px;top: 10px;padding: 10px 20px;background-color: white;color: #423e3e;line-height: 30px;}
#blog .container .row .card-container span i{font-size:20px;}
#blog .container .row .card-container span.rotate:hover{background-color:#01b7f2;color:#fff;}

/*        Style Blog back      */
#blog .container .row .card-container .card .back .user{border-radius:50%;display:block;height:100px;overflow:hidden;width:100px;margin:0 auto;position:relative;}
#blog .container .row .card-container .card .back .user img{background: none repeat scroll 0 0 #FFFFFF;border: 2px solid #01b7f2;width: 100%;height:100%;}
#blog .container .row .card-container .card .back .header h5{margin: 0;font-size: 17px;line-height: 28px;text-align: center;text-transform: capitalize;color: #3e3939;padding: 10px 15px 20px;border-bottom:1px solid rgb(1, 183, 242);}
#blog .container .row .card-container .card .back .content{padding: 35px 15px 10px;}
#blog .container .row .card-container .card .back .content h5{font-size:20px;color:#383434;}
#blog .container .row .card-container .card .back .content ul{margin-left:10px;list-style:none;padding-right:5px;}
#blog .container .row .card-container .card .back .content ul li{padding:10px 0;font-size:14px;}
#blog .container .row .card-container .card .back .content ul li i{margin-right:10px;}
#blog .container .row .card-container .card .back .content ul li a{color: #606060;text-decoration:none;}
#blog .container .row .card-container .card .back .footer {text-align:left;margin-top: 25px;padding: 0px 25px;}
#blog .container .row .card-container .card .back .footer a{padding: 5px 10px;color: #423e3e;font-size: 14px;border-top: 2px solid #01b7f2;border-bottom: 2px solid #01b7f2;}
#blog .container .row .card-container .card .back .footer a:hover{color:#01b7f2;}

/* Fix bug for IE  */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .front, .back{
        -ms-backface-visibility: visible;
        backface-visibility: visible;
    }

    .back {
        visibility: hidden;
        -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
    }
    .front{
        z-index: 4;
    }
    .card-container:not(.manual-flip):hover .back,
    .card-container.manual-flip.hover .back{
        z-index: 5;
        visibility: visible;
    }
}