div#gallery_01 {background-color:#f0f0f0;}
div.wh_11{width:1100px; margin:0px auto; padding:65px 0 70px 0; overflow:hidden;}
figure.gallery { float:left;  position: relative;  overflow: hidden;  margin: 10px 2%;    max-width: 30.55%;  width: 100%;
  color: #ffffff;  text-align: center;  font-size: 16px;  background-color: #000000;}
figure.gallery:first-child {margin-left:0;}
figure.gallery:last-child {margin-right:0;}
figure.gallery *,figure.gallery *:before,figure.gallery *:after {
  -webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: all 0.55s ease;  transition: all 0.55s ease;}
figure.gallery img {  width: 100%;  backface-visibility: hidden;  vertical-align: top;  opacity: 0.9;}
figure.gallery .title {  position: absolute;  top: 58%;  left: 25px;  padding: 5px 15px 15px;}
figure.gallery .title:before,figure.gallery .title:after { height: 1px;  width: 400px;  position: absolute;  content: '';  background-color: rgba(255,255,255,0.5);}
figure.gallery .title:before {  top: 0;  left: 10px;  -webkit-transform: translateX(100%);  transform: translateX(100%);}
figure.gallery .title:after {  bottom: 0;  right: 10px;  -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
figure.gallery .title div:before,figure.gallery .title div:after {  width: 1px;  height: 320px;
  position: absolute;  content: '';  background-color: rgba(255,255,255,0.5);}
figure.gallery .title div:before {  top: 10px;  right: 0;  -webkit-transform: translateY(100%);  transform: translateY(100%);}
figure.gallery .title div:after {  bottom: 10px;  left: 0;  -webkit-transform: translateY(-100%);  transform: translateY(-100%);}
figure.gallery h2,figure.gallery h4 {  margin: 0;  text-transform: uppercase; opacity: 0.6;}
figure.gallery:hover h2,figure.gallery:hover h4 {  opacity: 0.9;}
figure.gallery h2 {  font-weight: 400; margin-bottom:5px;}
figure.gallery h4 {  display: block; font-size:14px;  font-weight: 500;  background-color: #ffffff;  padding: 5px 10px 6px 10px;  color: #000000;}
figure.gallery figcaption {  position: absolute;  bottom: 42%;  left: 25px;  text-align: left;  opacity: 0;  padding: 5px 60px 5px 10px;
  font-size: 0.8em;  font-weight: 500;  letter-spacing: 1.5px;}
figure.gallery figcaption p {  margin: 0;}
figure.gallery a {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;}
figure.gallery:hover img,figure.gallery.hover img {  -webkit-transform: scale(1.1);  transform: scale(1.1);  
zoom: 1;  filter: alpha(opacity=35);  -webkit-opacity: 0.35;  opacity: 0.35;}
figure.gallery:hover .title:before,figure.gallery.hover .title:before,
figure.gallery:hover .title:after,figure.gallery.hover .title:after,
figure.gallery:hover .title div:before,figure.gallery.hover .title div:before,
figure.gallery:hover .title div:after,figure.gallery.hover .title div:after {  -webkit-transform: translate(0, 0);  transform: translate(0, 0);}
figure.gallery:hover .title:before,figure.gallery.hover .title:before,
figure.gallery:hover .title:after,figure.gallery.hover .title:after {  -webkit-transition-delay: 0.15s;  transition-delay: 0.15s;}
figure.gallery:hover figcaption,figure.gallery.hover figcaption {  opacity: 1;  -webkit-transition-delay: 0.2s;  transition-delay: 0.2s;}


/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
div.wh_11{width:100%; margin:50 auto; padding:0;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
div.wh_11{width:100%; margin:0 auto;}
figure.gallery { float:none; margin: 10px 0%; height:250px;   max-width: 100%; }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}