/* Base Styles. */
.dipl_image_hover_effect_inner {
	overflow: hidden;
	position: relative;
	display: inline-block;
	border: 0 solid #000000;
}
.dipl_image_hover_effect_inner:hover {
	opacity: 1;
}

/* General Image Styling. */
.dipl_image_hover_effect_inner img{
	display: block;
	height: auto;
	border: 0 solid #000000;
}

/* circle and half-circle comman css (circle). */
.dipl_image_hover_effect_inner.circle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 100%;
	z-index: 2;
}
.dipl_image_hover_effect_inner.circle:hover::before {
	animation: dipl_circleIn 0.5s forwards ease-out;
}
.dipl_image_hover_effect_inner.circle:not(:hover)::before {
	animation: dipl_circleOut 0.5s forwards ease-in;
}

@keyframes dipl_circleIn {
	0% { width: 150%; height: 150%; }
	100% { width: 0; height: 0; background: rgba(255, 255, 255, 0.5); }
}
@keyframes dipl_circleOut {
	0% { width: 0; height: 0; background: rgba(0, 0, 0); }
	100% { width: 150%; height: 150%; background: rgba(0, 0, 0, 0); }
}

/* circle, half circle, flash, Layout 05 and Layout 06 comman css (Zoom). */
.dipl_image_hover_effect_inner.zoom img {
	transform: scale(1);
	transition: transform 0.5s ease-in-out;
	transform-origin: center center;
}
.dipl_image_hover_effect_inner.zoom:hover img {
	transform: scale(1.3);
}

/* Layout 02 css (rotate). */
.dipl_image_hover_effect_inner.rotate img {
	transition: transform 0.5s ease-in-out;
}
.dipl_image_hover_effect_inner.rotate:hover img {
	transform: rotate(-4deg) scale(1.1);
	transition: 0.8s ease-in-out;
}
.dipl_image_hover_effect_inner.rotate::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	background: rgba(0, 0, 0, 0.7);
	top: -50%;
	right: -50%;
	transform: translate(0%, 0%);
	border-radius: 100%;
	opacity: 0;
	z-index: 2;
	display: block;
	transition: transform 0.4s ease;
}
.dipl_image_hover_effect_inner.rotate:hover::before {
	animation: dipl_rotateIn 0.8s forwards ease-out;
}
.dipl_image_hover_effect_inner.rotate:not(:hover)::before {
	animation: dipl_rotateOut 0.55s forwards ease-in;
}

@keyframes dipl_rotateIn {
	0% { opacity: 1; width: 200%; height: 200%; }
	100% { opacity: 0; }
}
@keyframes dipl_rotateOut {
	0% { opacity: 1; }
	100% { opacity: 0; width: 200%; height: 200%; }
}

/* Layout 03, Layout 04 and Layout 05 css (filter). */
.dipl_image_hover_effect_inner.filter:hover img {
	animation: dipl_filterIn 0.5s forwards ease-out;
}

@keyframes dipl_filterIn {
	0% { filter: brightness(400%) saturate(200%) hue-rotate(100deg); }
	25% { filter: brightness(100%) saturate(100%) hue-rotate(100deg); }
}

/* Layout 04 css (Flash). */
.dipl_image_hover_effect_inner.flash,
.dipl_image_hover_effect_inner.flash_rev,
.dipl_image_hover_effect_inner.flash_inst_rev {
	position: relative;
}
.dipl_image_hover_effect_inner.flash::before,
.dipl_image_hover_effect_inner.flash_rev::before,
.dipl_image_hover_effect_inner.flash_inst_rev::before {
	content: '';
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	z-index: 2;
	display: block;
}
.dipl_image_hover_effect_inner.flash::before {
	background: linear-gradient(to right, rgba(255, 255, 250, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	left: -75%;
}
.dipl_image_hover_effect_inner.flash:hover::before {
	animation: dipl_flashIN 0.8s forwards ease-out;
}
@keyframes dipl_flashIN {
	100% { left: 125%; }
}

.dipl_image_hover_effect_inner.flash:not(:hover)::before {
	animation: dipl_flashOut 0.5s forwards ease-in;
}
@keyframes dipl_flashOut {
	0% { left: 125%; }
}

/* Layout 05 css. */
.dipl_image_hover_effect_inner.flash_inst_rev {
	display: inline-block;
	transform: scaleX(1);
}
.dipl_image_hover_effect_inner.flash_inst_rev:hover {
	transform: scaleX(-1);
}
.dipl_image_hover_effect_inner.flash_inst_rev::before {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	right: -75%;
}
.dipl_image_hover_effect_inner.flash_inst_rev:hover::before {
	animation: dipl_flashinstrevIn1 0.5s forwards ease-out, dipl_flashinstrevIn2 0.5s forwards ease-in 0.4s;
}
@keyframes dipl_flashinstrevIn1 { 100% { right: 125%; } }
@keyframes dipl_flashinstrevIn2 { 100% { right: -125%; } }

.dipl_image_hover_effect_inner.flash_inst_rev:not(:hover)::before {
	animation: dipl_flashinstrevOut1 0.5s forwards ease-out, dipl_flashinstrevOut2 0.5s forwards ease-in 0.4s;
}
@keyframes dipl_flashinstrevOut1 { 100% { right: 125%; } }
@keyframes dipl_flashinstrevOut2 { 100% { right: -125%; } }

/* Shine-Filter Effect. */
.dipl_image_hover_effect_inner.flash.filter:hover img,
.dipl_image_hover_effect_inner.flash_rev.filter:hover img,
.dipl_image_hover_effect_inner.flash_inst_rev.filter:hover img {
	animation: dipl_flashfilterIn 0.25s forwards ease-out;
}
@keyframes dipl_flashfilterIn {
	0% { filter: brightness(150%) saturate(150%) hue-rotate(100deg); }
	15% { filter: brightness(100%) saturate(100%) hue-rotate(100deg); }
}

/* diagonal. */
.dipl_image_hover_effect_inner.diagonal::before,
.dipl_image_hover_effect_inner.diagonal::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 2;
	opacity: 1;
	transition: all 0.5s;
}
.dipl_image_hover_effect_inner.diagonal::before {
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	transform: rotate(-90deg);
	transform-origin: left bottom;
}
.dipl_image_hover_effect_inner.diagonal::after {
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	top: 0;
	transform: rotate(-90deg);
	transform-origin: top right;
}
.dipl_image_hover_effect_wrapper.dipl-effect-diagonal:hover .dipl_image_hover_effect_inner.diagonal::before {
	transform: rotate(0deg);
	background: rgba(255, 255, 255, 0);
}
.dipl_image_hover_effect_wrapper.dipl-effect-diagonal:hover .dipl_image_hover_effect_inner.diagonal::after {
	transform: rotate(0deg);
    background: rgba(255, 255, 255, 0);
}

/* glitch effect css. */
.dipl-glitch-image {
	transition: transform 0.4s ease;
}
.dipl-glitch-image:hover {
	transform: scale(0.95);
	transition: transform 1.5s ease;
}
.dipl-glitch-image::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 15%;
	left: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	filter: blur(1px);
	z-index: 2;
	pointer-events: none;
	opacity: 0;
}

.dipl-glitch-image:hover::before {
	animation: dipl_glitchUpIn 0.8s forwards ease-out;
	opacity: 1;
}
.dipl-glitch-image:not(:hover)::before {
	animation: dipl_glitchDownOut 0.4s forwards ease-in;
	opacity: 1;
}
@keyframes dipl_glitchUpIn {
	0% { transform: translateY(0); }
	100% { transform: translateY(-800%); }
}
@keyframes dipl_glitchDownOut {
	0% { transform: translateY(-600%); opacity: 1; }
	100% { transform: translateY(100%); opacity: 0; }
}

/* slide glitch effect. */
.dipl-slide-glitch{
	background-color: #000;
	background-repeat: no-repeat;
	position: relative;
}
.dipl-slide-glitch::before,
.dipl-slide-glitch::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	opacity: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 2;
	animation: dipl_glitchRGB 0.6s steps(2, end) infinite;
}
.dipl-slide-glitch::before {
	filter: contrast(200%) hue-rotate(270deg);
}
.dipl-slide-glitch::after {
	filter: contrast(200%) hue-rotate(90deg);
}
.dipl-slide-glitch:hover::before,
.dipl-slide-glitch:hover::after {
	opacity: 0.2;
}

@keyframes dipl_glitchRGB{
	0%   { transform: translate( 0, 0 ); }
	20%  { transform: translate( -2px, -2px ); }
	40%  { transform: translate( 2px, 2px ); }
	60%  { transform: translate( -1px, 2px ); }
	80%  { transform: translate( 1px, -1px ); }
	100% { transform: translate( 0, 0 ); }
}

.dipl-slide-glitch-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 3;
}
.dipl-slide-glitch-overlay .quadrant{
	position: absolute;
	width: 100%;
	height: 100%;
	backdrop-filter: none;
	opacity: 1;
	transition: all 0.25s ease;
}
.dipl-slide-glitch-overlay .quad1{
	clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
	transform: translateX(-100%);
	transition-delay: 0s;
}
.dipl-slide-glitch-overlay .quad2{
	clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
	transform: translateY(-100%);
	transition-delay: 0.5s;
}
.dipl-slide-glitch-overlay .quad3{
	clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
	transform: translateY(100%);
	transition-delay: 0.75s;
}
.dipl-slide-glitch-overlay .quad4{
	clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
	transform: translateX(100%);
	transition-delay: 1s;
}

.dipl-slide-glitch:hover .quadrant {
	transform: translate(0, 0);
	opacity: 1;
}
.dipl-slide-glitch:hover .quad1,
.dipl-slide-glitch:hover .quad2,
.dipl-slide-glitch:hover .quad3,
.dipl-slide-glitch:hover .quad4 {
	backdrop-filter: saturate(200%);
}