.from_top_hovereffect {
              width: 100%;
              height: 100%;
              float: left;
              overflow: hidden;
              position: relative;
              text-align: center;
              cursor: default;
          }

          .from_top_hovereffect .overlay {
              width: 100%;
              height: 100%;
              position: absolute;
              overflow: hidden;
              top: 0;
              left: 0;
          }

          .from_top_hovereffect img {
              display: block;
              position: relative;
              -webkit-transition: all 1.0s ease-in;
              transition: all 1.0s ease-in;
          }

          .from_top_hovereffect:hover img {
              filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
              filter: grayscale(1) blur(1px);
              -webkit-filter: grayscale(1) blur(1px);
              -webkit-transform: scale(1.2);
              -ms-transform: scale(1.2);
              transform: scale(1.2);
          }

          .from_top_hovereffect h2 {
              text-transform: uppercase;
              text-align: center;
              position: relative;
              font-size: 17px;
              padding: 10px;
              background: rgba(0, 0, 0, 0.6);
          }

          .from_top_hovereffect h3 {
                width: 100%;
                height: 100%;
               opacity: 0.90;
               filter: alpha(opacity=90);
                display: inline-block;
               text-decoration: none;
               padding: 22% 0px;
               color: #ffffff;
               margin: 0px 0 0 0;
               background-color: #666666;
          }

          .from_top_hovereffect a.info {
              display: inline-block;
              text-decoration: none;
              padding: 7px 14px;
              border: 1px solid #666666;
              margin: 50px 0 0 0;
              background-color: #666666;
          }

          .from_top_hovereffect a.info:hover {
              box-shadow: 0 0 5px #555555;
          }

          .from_top_hovereffect a.info, .from_top_hovereffect h2 {
              -webkit-transform: scale(0.7);
              -ms-transform: scale(0.7);
              transform: scale(0.7);
              -webkit-transition: all 0.4s ease-in;
              transition: all 0.4s ease-in;
              opacity: 0;
              filter: alpha(opacity=0);
              color: #fff;
              text-transform: uppercase;
          }

          .from_top_hovereffect:hover a.info, .from_top_hovereffect:hover h2 {
              opacity: 1;
              filter: alpha(opacity=100);
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
          }

           .from_top_hovereffect:hover h3 {
               display: none;
           }
		   
		   
		   
		   
		   
		   
		   
		   .from_product_hovereffect {
              width: 100%;
              height: 100%;
              float: left;
              overflow: hidden;
              position: relative;
              text-align: center;
              cursor: default;
          }

          .from_product_hovereffect .overlay {
              width: 100%;
              height: 100%;
              position: absolute;
              overflow: hidden;
              top: 0;
              left: 0;
          }

          .from_product_hovereffect img {
              display: block;
              position: relative;
              -webkit-transition: all 0.6s ease-in;
              transition: all 0.6s ease-in;
          }

          .from_product_hovereffect:hover img {
              -webkit-transform: scale(1.1);
              -ms-transform: scale(1.1);
              transform: scale(1.1);
          }
		  
		   .from_product_hovereffect .overlay {
              width: 100%;
              height: 100%;
              position: absolute;
              overflow: hidden;
              top: 0;
              left: 0;
          }
		   
		   
		   
		   
		   
		   
		   

.zoom_in_hovereffect {
    width: 100%;
    height: 75%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.zoom_in_hovereffect .overlay {
    width: 100%;
    height: 96%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.zoom_in_hovereffect:hover .overlay {
    background-color: rgba(170,170,170,0.4);
}

.zoom_in_hovereffect h2, .zoom_in_hovereffect img {
    -webkit-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
}

.zoom_in_hovereffect img {
    display: block;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.zoom_in_hovereffect:hover img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.zoom_in_hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
}

.zoom_in_hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    margin: 50px 0 0 0;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    font-weight: normal;
    height: 80%;
    width: 85%;
    position: absolute;
    top: -5%;
    left: 8%;
    padding: 70px;
}

.zoom_in_hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-color: rgba(0,0,0,0.4);
}




.rotate_hovereffect{
    position: relative;
    perspective: 1000px;
}

.rotate_hovereffect img{
    width: 100%;
    height: auto;
    opacity:1;
    transform: translateY(0) rotateX(0);
    transition: all 0.6s ease-in-out 0s;
}

rotate_hovereffect:hover img{
    transform: translateY(-100%) rotateX(90deg);
    transform-origin: center bottom 0;
    opacity:0;
}

.rotate_hovereffect .over-layer{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    background:#333d4b;
    text-align:center;
    padding: 0 20px;
    transition: all 0.60s ease-in-out 0s;
}


.rotate_hovereffect:hover .over-layer{
    opacity:1;
}