.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;
}