/*General*/

.block_holder {
    padding: 7px;
    background: #f6f6f6;
    width: 350px;
    height: 250px;
    -webkit-box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
    box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
    float: left;
    margin: 15px;
}

.block {
    width:94%;
    height: 192px;
    position: relative;
    overflow: hidden;
	margin:0 auto;
}

.hover_info {
    width: 350px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); 
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;  
    top: -19%;
    transition: all 200ms linear; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.block:hover .hover_info { top: 0; left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); }

.hover_info h1 { font-size: 2em; padding: 10px 20px; background: rgba(207, 138, 5, 0.7); color: #E7E7E7; position: absolute; top: 25px; left: -100%; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; }
.hover_info p { font:16px Arial, Helvetica, sans-serif; font-weight:bold; line-height: 1.4; color: #fff; position: absolute; top: 45px; left: 10%; width: 80%; text-align: center; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; }
.hover_info a { font-size: 1.5em; padding:0; position: absolute; bottom: 65px; right: -100%; text-decoration: none; margin:0 80px 0 0; }
.hover_info:hover p { opacity: 1; transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; }
.hover_info:hover a { right: 0; transition: right 200ms linear 700ms; -webkit-transition: right 200ms linear 700ms; -moz-transition: right 200ms linear 700ms; 
 background:url(../images/view-more.png) top no-repeat; width:113px; height:34px; text-decoration:none; opacity:1;}
.hover_info a:hover { opacity:0.8;}


/*----gallery image---*/

.gallery_block {
    width:100%;
    height: auto;
    position: relative;
    overflow: hidden;
	margin:0 auto;
	
}

.hover_info01 {
    width: 350px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); 
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;  
    top: -19%;
    transition: all 200ms linear; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.gallery_block:hover .hover_info01 { top: 0; left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); }

.hover_info01 h1 { font-size: 2em; padding: 10px 20px; background: rgba(207, 138, 5, 0.7); color: #E7E7E7; position: absolute; top: 25px; left: -100%; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; }
.hover_info01 p { font:16px Arial, Helvetica, sans-serif; font-weight:bold; line-height: 1.4; color: #fff; position: absolute; top: 45px; left: 10%; width: 80%; text-align: center; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; }
.hover_info01 a { font-size: 1.5em; padding:0; position: absolute; bottom: 75px; right: -150%; text-decoration: none; margin:0 130px 0 0; }
.hover_info01:hover p { opacity: 1; transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; }
.hover_info01:hover a { right: 0; transition: right 250ms linear 700ms; -webkit-transition: right 200ms linear 700ms; -moz-transition: right 200ms linear 700ms; 
 background:url(../images/zoom-icon.png) top no-repeat; width:41px; height:37px; text-decoration:none; opacity:1;}
.hover_info01 a:hover { opacity:0.8;}

/*----gallery detail image---*/


.hover_info02 {
    width: 350px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); 
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;  
    top: -19%;
    transition: all 200ms linear; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.gallery_block:hover .hover_info02 { top: 0; left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); }

.hover_info02 h1 { font-size: 2em; padding: 10px 20px; background: rgba(207, 138, 5, 0.7); color: #E7E7E7; position: absolute; top: 25px; left: -100%; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; }
.hover_info02 p { font:16px Arial, Helvetica, sans-serif; font-weight:bold; line-height: 1.4; color: #fff; position: absolute; top: 45px; left: 10%; width: 80%; text-align: center; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; }
.hover_info02 a { font-size: 1.5em; padding:0; position: absolute; bottom: 75px; right: -150%; text-decoration: none; margin:0 91px 0 0; }
.hover_info02:hover p { opacity: 1; transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; }
.hover_info02:hover a { right: 0; transition: right 150ms linear 800ms; -webkit-transition: right 150ms linear 800ms; -moz-transition: right 150ms linear 800ms; 
 background:url(../images/zoom-icon01.png) top no-repeat; width:42px; height:40px; text-decoration:none; opacity:1;}
.hover_info02 a:hover { opacity:0.8;}