.hover_rotation {
   position: relative;
   overflow: hidden;
   float: left;
}

.hover_rotation div {
   position: absolute;
   /* The images have to be larger than their parent container to fill the visible area when rotating */
   /*width:400px;
   height:250px;*/
   /* Margins keep the image centered */
   top: 50%;
   left: 50%;
   /*	margin-top:-125px;
                   margin-left:-200px;*/
   border: none;
   /* Opacity */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
   filter: alpha(opacity=80);
   /* Opacity & Rotation Transitions */
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   -o-transition: all .2s;
   -ms-transition: all .2s;
   transition: all .2s;
}

/* Right rotation */

.hover_rotation div.hover_rotation_right:hover {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   /* Applying a 15 degrees rotation */
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
}

/* Left rotation */

.hover_rotation div.hover_rotation_left:hover {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   /* Applying a -15 degrees rotation */
   -webkit-transform: rotate(-15deg);
   -moz-transform: rotate(-15deg);
   -o-transform: rotate(-15deg);
   -ms-transform: rotate(-15deg);
   transform: rotate(-15deg);
}

/*	_______________________________________

        02 OVERLAY FADE
                _______________________________________	*/

.overlay_fade {
   position: relative;
   /* Modify the width and the height according to your images sizes */
   overflow: hidden;
   float: left;
}

.overlay_fade div {
   width: 100%;
   height: 100%;
   border: none;
}

.overlay_fade .overlay_zoom {
   position: absolute;
   top: 0px;
   width: 100%;
   height: 100%;
   background-image: url("../images/icons/zoom.png");
   background-repeat: no-repeat;
   background-position: center center;
   /* Opacity */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   /* Opacity Transition */
   -webkit-transition: opacity .4s ease-in;
   -moz-transition: opacity .4s ease-in;
   -o-transition: opacity .4s ease-in;
   -ms-transition: opacity .4s ease-in;
   transition: opacity .4s ease-in;
}

.overlay_fade:hover .overlay_zoom {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.overlay_fade .zoom_white {
   background-color: rgba(255, 255, 255, 0.7);
}

.overlay_fade .zoom_black {
   background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

        03 OVERLAY SLIDE
                _______________________________________	*/

.overlay_slide {
   position: relative;
   overflow: hidden;
   float: left;
}

.overlay_slide div {
   width: 100%;
   height: 100%;
   border: none;
}

.overlay_slide .overlay_zoom {
   position: absolute;
   top: -150px;
   width: 100%;
   height: 100%;
   background-image: url("../images/icons/zoom.png");
   background-repeat: no-repeat;
   background-position: center center;
   /* Slide Transition */
   -webkit-transition: top 0.4s;
   -moz-transition: top 0.4s;
   -o-transition: top 0.4s;
   -ms-transition: top 0.4s;
   transition: top 0.4s;
}

.overlay_slide:hover .overlay_zoom {
   top: 0 !important;
}

.overlay_slide .zoom_white {
   background-color: rgba(255, 255, 255, 0.7);
}

.overlay_slide .zoom_black {
   background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

        04 OVERLAY SPLIT
                _______________________________________	*/

.overlay_split {
   position: relative;
   overflow: hidden;
   float: left;
}

.overlay_split div {
   width: 100%;
   height: 100%;
   border: none;
}

/* Right and left sides */
.overlay_split .overlay_split_left,
.overlay_split .overlay_split_right {
   position: absolute;
   width: 50%;
   height: 100%;
}

.overlay_split .overlay_split_right {
   right: 0;
   /* Slide Transition */
   -webkit-transition: right 0.4s;
   -moz-transition: right 0.4s;
   -o-transition: right 0.4s;
   -ms-transition: right 0.4s;
   transition: right 0.4s;
}

.overlay_split .overlay_split_left {
   left: 0 !important;
   /* Slide Transition */
   -webkit-transition: left 0.4s;
   -moz-transition: left 0.4s;
   -o-transition: left 0.4s;
   -ms-transition: left 0.4s;
   transition: left 0.4s;
}

/* Top and bottom sides */

.overlay_split .overlay_split_top,
.overlay_split .overlay_split_bottom {
   position: absolute;
   width: 100%;
   height: 50%;
}

.overlay_split .overlay_split_top {
   top: 0 !important;
   /* Slide Transition */
   -webkit-transition: top 0.4s;
   -moz-transition: top 0.4s;
   -o-transition: top 0.4s;
   -ms-transition: top 0.4s;
   transition: top 0.4s;
}

.overlay_split .overlay_split_bottom {
   bottom: 0 !important;
   /* Slide Transition */
   -webkit-transition: bottom 0.4s;
   -moz-transition: bottom 0.4s;
   -o-transition: bottom 0.4s;
   -ms-transition: bottom 0.4s;
   transition: bottom 0.4s;
}

.overlay_split:hover .overlay_split_left {
   left: -50% !important;
}

.overlay_split:hover .overlay_split_right {
   right: -50% !important;
}

.overlay_split:hover .overlay_split_top {
   top: -50% !important;
}

.overlay_split:hover .overlay_split_bottom {
   bottom: -50% !important;
}

.overlay_split .split_white {
   background-color: rgba(255, 255, 255, 0.7);
}

.overlay_split .split_black {
   background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

        05 OVERLAY JOIN
                _______________________________________	*/

.overlay_join {
   position: relative;
   overflow: hidden;
   float: left;
}

.overlay_join div {
   width: 100%;
   height: 100%;
   border: none;
}

/* Right and left sides */

.overlay_join .overlay_join_left,
.overlay_join .overlay_join_right {
   position: absolute;
   width: 50% !important;
   height: 100% !important;
}

.overlay_join .overlay_join_left {
   left: -50% !important;
   /* Slide Transition */
   -webkit-transition: left 0.4s;
   -moz-transition: left 0.4s;
   -o-transition: left 0.4s;
   -ms-transition: left 0.4s;
   transition: left 0.4s;
}

.overlay_join .overlay_join_right {
   right: -50% !important;
   /* Slide Transition */
   -webkit-transition: right 0.4s;
   -moz-transition: right 0.4s;
   -o-transition: right 0.4s;
   -ms-transition: right 0.4s;
   transition: right 0.4s;
}

/* Top and bottom sides */

.overlay_join .overlay_join_top,
.overlay_join .overlay_join_bottom {
   position: absolute;
   width: 100%;
   height: 50%;
}

.overlay_join .overlay_join_top {
   top: -50% !important;
   /* Slide Transition */
   -webkit-transition: top 0.4s;
   -moz-transition: top 0.4s;
   -o-transition: top 0.4s;
   -ms-transition: top 0.4s;
   transition: top 0.4s;
}

.overlay_join .overlay_join_bottom {
   bottom: -50% !important;
   /* Slide Transition */
   -webkit-transition: bottom 0.4s;
   -moz-transition: bottom 0.4s;
   -o-transition: bottom 0.4s;
   -ms-transition: bottom 0.4s;
   transition: bottom 0.4s;
}

.overlay_join:hover .overlay_join_left {
   left: 0 !important;
}

.overlay_join:hover .overlay_join_right {
   right: 0 !important;
}

.overlay_join:hover .overlay_join_top {
   top: 0 !important;
}

.overlay_join:hover .overlay_join_bottom {
   bottom: 0 !important;
}

/* Background colors and icons */

.overlay_join_left .join_zoom,
.overlay_join_right .join_favorite,
.overlay_join_top .join_zoom,
.overlay_join_bottom .join_favorite {
   position: absolute;
   background-repeat: no-repeat;
   background-position: center center;
}

.overlay_join .join_zoom,
.overlay_join .join_favorite {
   width: 100%;
   height: 100%;
}

.overlay_join_left .join_zoom, .overlay_join_top .join_zoom {
   background-image: url("../images/icons/zoom.png");
}

.overlay_join_right .join_favorite, .overlay_join_bottom .join_favorite {
   background-image: url("../images/icons/favorite.png");
}

.overlay_join .join_white {
   background-color: rgba(255, 255, 255, 0.7);
}

.overlay_join .join_black {
   background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

        06 CORNER RIBBONS
                _______________________________________	*/

.corner_ribbon {
   position: relative;
   overflow: hidden;
   float: left;
}

.corner_ribbon div {
   width: 100%;
   height: 100%;
   border: none;
}

/* Common styling to all variants */
.corner_ribbon .corner_ribbon_top_left_white,
.corner_ribbon .corner_ribbon_top_left_black,
.corner_ribbon .corner_ribbon_bottom_left_white,
.corner_ribbon .corner_ribbon_bottom_left_black,
.corner_ribbon .corner_ribbon_top_right_white,
.corner_ribbon .corner_ribbon_top_right_black,
.corner_ribbon .corner_ribbon_bottom_right_white,
.corner_ribbon .corner_ribbon_bottom_right_black {
   position: absolute;
   width: 0;
   height: 0;
   /* Slide Transition */
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -o-transition: all 0.4s;
   -ms-transition: all 0.4s;
   transition: all 0.4s;
}

.corner_ribbon .corner_zoom,
.corner_ribbon .corner_zoom {
   position: absolute;
   background: url("../images/icons/zoom.png") no-repeat center center;
}

/* Top Left Ribbon */

.corner_ribbon:hover .corner_ribbon_top_left_white,
.corner_ribbon:hover .corner_ribbon_top_left_black {
   top: 0 !important;
   left: 0 !important;
}

/* Bottom Left Ribbon */

.corner_ribbon:hover .corner_ribbon_bottom_left_white,
.corner_ribbon:hover .corner_ribbon_bottom_left_black {
   bottom: 0 !important;
   left: 0 !important;
}

/* Top Right Ribbon */

.corner_ribbon:hover .corner_ribbon_top_right_white,
.corner_ribbon:hover .corner_ribbon_top_right_black {
   top: 0 !important;
   right: 0 !important;
}

/* Bottom Right Ribbon */

.corner_ribbon:hover .corner_ribbon_bottom_right_white,
.corner_ribbon:hover .corner_ribbon_bottom_right_black {
   bottom: 0 !important;
   right: 0 !important;
}

/*	_______________________________________

        10 LEVITATION SHADOW
                _______________________________________	*/

.levitation_shadow {
   position: relative;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
}

.levitation_shadow div.levitation_small,
.levitation_shadow div.levitation_large {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   /* Animation of the effect */
   -webkit-transition: top 0.3s;
   -moz-transition: top 0.3s;
   -o-transition: top 0.3s;
   -ms-transition: top 0.3s;
   transition: top 0.3s;
}

.levitation_shadow:hover div.levitation_small {
   top: -5px !important;
}

.levitation_shadow:hover div.levitation_large {
   top: -10px !important;
}

/*	_______________________________________

        11 LOMO EFFECT
                _______________________________________	*/

.lomo_black,
.lomo_white,
.lomo_black_reversed,
.lomo_white_reversed {
   position: relative;
   float: left;
   overflow: hidden;
}

.lomo_black div,
.lomo_white div,
.lomo_black_reversed div,
.lomo_white_reversed div {
   display: block;
   width: 100%;
   height: 100%;
   border: none;
}

.lomo_black:after,
.lomo_white:after,
.lomo_black_reversed:after,
.lomo_white_reversed:after {
   /* Positionning this black glow on mouse hover */
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   content: "";
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -o-transition: all 0.4s;
   -ms-transition: all 0.4s;
   transition: all 0.4s;
}

.lomo_black:after,
.lomo_black_reversed:hover:after {
   -webkit-box-shadow: inset 0 0 5px #000000;
   -moz-box-shadow: inset 0 0 5px #000000;
   box-shadow: inset 0 0 5px #000000;
}

.lomo_black:hover:after,
.lomo_black_reversed:after {
   -webkit-box-shadow: inset 0 0 90px #000000;
   -moz-box-shadow: inset 0 0 90px #000000;
   box-shadow: inset 0 0 90px #000000;
}

.lomo_white:after,
.lomo_white_reversed:hover:after {
   -webkit-box-shadow: inset 0 0 1px #ffffff;
   -moz-box-shadow: inset 0 0 1px #ffffff;
   box-shadow: inset 0 0 1px #ffffff;
}

.lomo_white:hover:after,
.lomo_white_reversed:after {
   -webkit-box-shadow: inset 0 0 90px #ffffff;
   -moz-box-shadow: inset 0 0 90px #ffffff;
   box-shadow: inset 0 0 90px #ffffff;
}

/*	_______________________________________

        14 ROUNDED IMAGES
                _______________________________________	*/

.rounded_image {
   position: relative;
   float: left;
   /*margin:15px 30px 15px 15px;*/
}

.rounded_image div.rounded_img,
.rounded_image div.squared_img {
   /*width:100%;
   height:100%;*/
   display: block;
   -webkit-transition: all 0.6s;
   -moz-transition: all 0.6s;
   -o-transition: all 0.6s;
   -ms-transition: all 0.6s;
   transition: all 0.6s;
}

.rounded_image div.rounded_img,
.rounded_image div.squared_img:hover {
   -webkit-border-radius: 75% !important;
   -moz-border-radius: 75% !important;
   -o-border-radius: 75% !important;
   -ms-border-radius: 75% !important;
   -khtml-border-radius: 75% !important;
   border-radius: 75% !important;
}

.rounded_image div.rounded_img:hover,
.rounded_image div.squared_img {
   -webkit-border-radius: 0 !important;
   -moz-border-radius: 0 !important;
   -o-border-radius: 0 !important;
   -ms-border-radius: 0 !important;
   -khtml-border-radius: 0 !important;
   border-radius: 0 !important;
}

/*	_______________________________________

        17 PERSPECTIVE IMAGES
                _______________________________________	*/

.perspective {
   float: left;
   /* 3D Effect - Safari and Chrome only */
   -webkit-perspective: 600;
   -webkit-transform-style: preserve-3d;
   -webkit-transition-property: perspective;
   -webkit-transition-duration: 0.5s;
}

.perspective:hover {
   /* 3D Effect - Safari and Chrome only */
   -webkit-perspective: 1000;
}

.perspective div.perspective_right,
.perspective div.perspective_left {
   width: 100%;
   height: 100%;
   -moz-box-shadow: 0 0 6px #666;
   box-shadow: 0 0 6px #666;
   -webkit-box-shadow: 0 0 6px #666;
   /* Animation - Safari and Chrome only */
   -webkit-transition-property: transform;
   -webkit-transition-duration: 0.5s;
}

.perspective div.perspective_right {
   -webkit-transform: rotateY(30deg);
}

.perspective div.perspective_left {
   -webkit-transform: rotateY(-30deg);
}

.perspective div:hover.perspective_right,
.perspective div:hover.perspective_left {
   -webkit-transform: rotateY(0deg);
}

/* Grayscale */

.gallery_grayscale {
   position: relative;
   display: inline-block;
   filter: gray;
   -webkit-filter: grayscale(100%);
   -webkit-backface-visibility: hidden;
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.gallery_grayscale:hover {
   filter: none;
   -webkit-filter: grayscale(0%);
   -webkit-transition: all .6s ease !important;
   /* Fade to color for Chrome and Safari */
}

/* Sepia */

.gallery_sepia {
   position: relative;
   display: inline-block;
   -webkit-transition: all .6s ease;
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
   -webkit-filter: sepia(1);
   -webkit-filter: sepia(100%);
   -moz-filter: sepia(100%);
   -ms-filter: sepia(100%);
   -o-filter: sepia(100%);
   filter: sepia(100%);
}

.gallery_sepia:hover {
   filter: none;
   -webkit-filter: sepia(0);
   -moz-filter: sepia(0);
   -ms-filter: sepia(0);
   -o-filter: sepia(0);
   filter: sepia(0);
   -webkit-transition: all .6s ease;
   /* Fade to color for Chrome and Safari */
}

/* Blur */

.gallery_blur {
   position: relative;
   display: inline-block;
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -o-filter: blur(2px);
   -ms-filter: blur(2px);
}

.gallery_blur:hover {
   filter: none;
   -webkit-filter: blur(0);
   -moz-filter: blur(0);
   -o-filter: blur(0);
   -ms-filter: blur(0);
   -webkit-transition: all .6s ease;
   /* Fade to color for Chrome and Safari */
}

/* Pulse */
@-webkit-keyframes special_pulse {
   25% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }

   75% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
   }
}

@keyframes special_pulse {
   25% {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
   }

   75% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
   }
}

.special_pulse {
   display: inline-block !important;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.special_pulse:hover {
   -webkit-animation-name: pulse;
   animation-name: pulse;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}