/*  

	Author : Moskva Yigit
	Author URI : http://www.moskvayigit.com/

	Table of Contents
	- Media Reveal Hover
	 
*/

.ki-description{width:100%;}

/*----------------------------
	.-- Media Reveal Hover
-----------------------------*/

*,
*::after,
*::before {
	box-sizing: border-box;
}


.media-reveal-hover-content__text-link.dark{
	color: var(--wp--preset--color--black);
}

.media-reveal-hover-content__text-link.light{
	color: var(--wp--preset--color--white);
}

.media-reveal-hover {
	padding: 0 4rem 20vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.media-reveal-hover__title {
	position: relative;
	font-size: 1rem;
	margin: 0 0 1.5rem 0;
	padding: 0.5rem 0;
	cursor: pointer;
	font-weight: 700;
}

.media-reveal-hover__link {
	position: relative;
	cursor: pointer;
	padding: 0.5rem 0;
}


/*.media-reveal-hover__link:hover {
	color: var(--color-blocklink-hover);
}

.media-reveal-hover__title:hover {
	color: var(--color-blocktitle-hover);
}*/

.media-reveal-hover__title span,
.media-reveal-hover__link span,
.media-reveal-hover-content__text-link span {
	display: inline-block;
	white-space: pre;
}

.media-reveal-hover-content__text {
	padding: 0 5vw 25vh;
	line-height: 2;
}

.media-reveal-hover-content__text-link {
	position: relative;
	font-weight: bold;
	cursor: pointer;
}

.media-reveal-hover[data-fx-image="1"] a::after,
a.media-reveal-hover-content__text-link[data-fx-image="1"]::after,
.media-reveal-hover[data-fx-image="2"] a::after,
a.media-reveal-hover-content__text-link[data-fx-image="2"]::after,
.media-reveal-hover[data-fx-video="1"] a::after,
a.media-reveal-hover-content__text-link[data-fx-video="1"]::after,
.media-reveal-hover[data-fx-video="2"] a::after,
a.media-reveal-hover-content__text-link[data-fx-video="2"]::after
 {
	content: '';
	z-index: -1;
	width: 100%;
	bottom: 0.25rem;
	left: 0;
	position: absolute;
	height: 2px;
	background: currentColor;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
	transition: transform 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

a.media-reveal-hover-content__text-link[data-fx-image="1"]::after,
a.media-reveal-hover-content__text-link[data-fx-image="2"]::after,
a.media-reveal-hover-content__text-link[data-fx-video="1"]::after,
a.media-reveal-hover-content__text-link[data-fx-video="2"]::after {
	bottom: 0;
}

.media-reveal-hover[data-fx-image="1"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-image="1"]:hover::after,
.media-reveal-hover[data-fx-image="2"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-image="2"]:hover::after,
.media-reveal-hover[data-fx-video="1"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-video="1"]:hover::after,
.media-reveal-hover[data-fx-video="2"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-video="2"]:hover::after {
	transform: scale3d(1,1,1)
}

.media-reveal-hover[data-fx-image="6"] a::after,
a.media-reveal-hover-content__text-link[data-fx-image="6"]::after.
.media-reveal-hover[data-fx-video="6"] a::after,
a.media-reveal-hover-content__text-link[data-fx-video="6"]::after {
	content: '';
	z-index: -1;
	width: 100%;
	bottom: 0.25rem;
	left: 0;
	position: absolute;
	height: 2px;
	background: currentColor;
	transform: scale3d(0,1,1);
	transform-origin: 100% 50%;
	transition: transform 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

a.media-reveal-hover-content__text-link[data-fx-image="6"]::after,
a.media-reveal-hover-content__text-link[data-fx-video="6"]::after {
	bottom: 0;
}

.media-reveal-hover[data-fx-image="6"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-image="6"]:hover::after,
.media-reveal-hover[data-fx-video="6"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-video="6"]:hover::after {
	transform: scale3d(1,1,1)
}

.media-reveal-hover[data-fx-image="14"] a::after,
a.media-reveal-hover-content__text-link[data-fx-image="14"]::after,
.media-reveal-hover[data-fx-video="14"] a::after,
a.media-reveal-hover-content__text-link[data-fx-video="14"]::after {
	content: '';
	z-index: -1;
	width: 100%;
	bottom: 0.25rem;
	left: 0;
	position: absolute;
	height: 2px;
	background: currentColor;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
}

a.media-reveal-hover-content__text-link[data-fx-image="14"]::after,
a.media-reveal-hover-content__text-link[data-fx-video="14"]::after {
	bottom: 0;
}

.media-reveal-hover[data-fx-image="14"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-image="14"]:hover::after,
.media-reveal-hover[data-fx-video="14"] a:hover::after,
a.media-reveal-hover-content__text-link[data-fx-video="14"]:hover::after  {
	animation: loop 0.5s infinite;
}

@keyframes loop {
	0% { transform-origin: 0% 50%; transform: scale3d(0,1,1); }
	50% { transform-origin: 0% 50%; transform: scale3d(1,1,1); }
	51% { transform-origin: 100% 50%; }
	100% { transform-origin: 100% 50%; transform: scale3d(0,1,1); }
}

.media__hover-reveal {
	position: fixed;
	width: 200px;
	height: 150px;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
}

.media__hover-reveal__inner,
.media__hover-reveal__img {
	width: 100%;
	height: 100%;
	position: relative;
}

.media__hover-reveal__deco {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #181314;
}

.media__hover-reveal__img {
	background-size: cover;
	background-position: 50% 50%;
}

@media screen and (min-width: 53em) {
	
	.media-reveal-hover {
		align-items: flex-start;
	}
	
	.media-reveal-hover-content {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3,33.33%);
		margin: 0 auto;
		padding-top: 20vh;
		max-width: 750px;
		min-height: 100vh;
		text-align: left;
	}
	
	.media-reveal-hover-content__text {
		grid-column: span 3;
	}
	
}