Your IP : 216.73.216.95

Current Path : /var/test/www/foundation/wp-content/plugins/znpb-tiltbox/sass/
Upload File :
Current File : /var/test/www/foundation/wp-content/plugins/znpb-tiltbox/sass/app.scss

.znTiltBox-tilter {
	display: block;
	position: relative;
	width: 100%;
	height: 415px;
	color: #fff;
	flex: none;
	perspective: 1000px;
}

.znTiltBox-tilter * {
	pointer-events: none;
}

.znTiltBox-tilter:hover,
.znTiltBox-tilter:focus {
	color: #fff;
	outline: none;
}

.znTiltBox-tilter__figure,
.znTiltBox-tilter__image {
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.znTiltBox-tilter__figure > * {
	transform: translateZ(0px); /* Force correct stacking order */
}

.znTiltBox-tilter__figure,
.znTiltBox-tilter__deco--overlay,
.znTiltBox-tilter__deco--lines,
.znTiltBox-tilter__deco--lines rect,
.znTiltBox-tilter__deco--shine div,
.znTiltBox-tilter__caption {
	transition: transform 0.2s ease-out;
}

.znTiltBox-tilter__figure {
	position: relative;
}

.znTiltBox-tilter__figure::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	box-shadow: 0 30px 20px rgba(35,32,39,0.5);
}

.znTiltBox-tilter__deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.znTiltBox-tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));
}

.znTiltBox-tilter__deco--shine div {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
}

.znTiltBox-tilter__deco--lines rect {
	fill: none;
	stroke: #fff;
	stroke-width:2px;
	width: calc(100% - 50px);
	height: calc(100% - 50px);
	transform: translate(25px, 25px);
}

.znTiltBox-tilter__caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 4em;
}

.znTiltBox-tilter__title {
	margin: 0;
	font-weight: normal;
	font-size: 32px;
	line-height: 1;
}

.znTiltBox-tilter__description {
	margin: 1em 0 0 0;
	font-size: 0.85em;
	letter-spacing: 0.15em;
}

/* Individual styles */

/* Example 1 (Default) */
.znTiltBox-tilter--1 .znTiltBox-tilter__figure::before {
	box-shadow: 0 30px 20px rgba(0,0,0,0.5);
}

/* Example 2 (thicker lines, overlay) */
.znTiltBox-tilter--2,
.znTiltBox-tilter--2:hover,
.znTiltBox-tilter--2:focus {
	color: #2e27ad;
}

.znTiltBox-tilter--2 .znTiltBox-tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(245, 239, 40, 0.6), rgba(164, 22, 169, 0.6));
}

.znTiltBox-tilter--2 .znTiltBox-tilter__deco--lines rect {
	stroke: #2e27ad;
	stroke-width: 4px;
}

/* Example 3 (no lines, overlay hard-light) */
.znTiltBox-tilter--3 .znTiltBox-tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6), rgba(41, 94, 230,0.5));
}

.znTiltBox-tilter--3 .znTiltBox-tilter__caption {
	padding: 2em;
	text-align: right;
	text-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35);
}

/* Example 4 (caption sliding in) */
.znTiltBox-tilter--4 .znTiltBox-tilter__deco--overlay {
	background-image: linear-gradient(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6));
}

@media screen and (min-width: 30em) {
	.znTiltBox-tilter--4 .znTiltBox-tilter__deco--lines {
		transform: scale3d(0.8,0.8,1);
		transition: transform 0.4s;
	}
	.znTiltBox-tilter--4:hover .znTiltBox-tilter__deco--lines {
		transform: scale3d(1,1,1);
	}
	.znTiltBox-tilter--4 .znTiltBox-tilter__title,
	.znTiltBox-tilter--4 .znTiltBox-tilter__description {
		transform: translate3d(0,80px,0);
		opacity: 0;
		transition: transform 0.4s, opacity 0.4s;
	}
	.znTiltBox-tilter--4:hover .znTiltBox-tilter__description {
		transition-delay: 0.1s;
	}
	.znTiltBox-tilter--4:hover .znTiltBox-tilter__title,
	.znTiltBox-tilter--4:hover .znTiltBox-tilter__description {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

/* Example 5 (line animating) */
.znTiltBox-tilter--5 .znTiltBox-tilter__deco--lines rect {
	stroke-dasharray: 355%;
	stroke-dashoffset: 355%;
	transition: stroke-dashoffset 0.7s;
}

.znTiltBox-tilter--5:hover .znTiltBox-tilter__deco--lines rect {
	stroke-dashoffset: 0;
}

.znTiltBox-tilter--5 .znTiltBox-tilter__figure::before {
	box-shadow: none;
}

/* Example 6 (different line position) */
.znTiltBox-tilter--6,
.znTiltBox-tilter--6:hover,
.znTiltBox-tilter--6:focus {
	color: #2e27ad;
}

.znTiltBox-tilter--6 .znTiltBox-tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(46, 39, 173, 0.2), rgba(255, 186, 59, 0.58));
}


.znTiltBox-tilter--6 .znTiltBox-tilter__deco--lines {
	top: -30px;
	left: -30px;
}
.znTiltBox-tilter--6 .znTiltBox-tilter__deco--lines rect {
	stroke: #2e27ad;
	stroke-width: 6px;
	width: 100%;
	height: 100%;
	transform:none;
}

.znTiltBox-tilter--6 .znTiltBox-tilter__caption {
	padding: 0 4em 5.5em 1em;
}

.znTiltBox-tilter--6 .znTiltBox-tilter__figure::before {
	box-shadow: none;
}

/* Example 7 (different line) */
.znTiltBox-tilter--7 .znTiltBox-tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(93, 203, 106, 0.48), rgba(59, 239, 255, 0.58));
}

.znTiltBox-tilter--7 .znTiltBox-tilter__deco--lines {
	opacity: 0;
	transform: scale3d(0.9,0.9,1);
	transition: transform 0.3s, opacity 0.3s;
}
.znTiltBox-tilter--7 .znTiltBox-tilter__deco--lines rect {
	stroke-width: 20px;
}

.znTiltBox-tilter--7:hover .znTiltBox-tilter__deco--lines  {
	opacity: 1;
	transform: scale3d(1,1,1);
}

.znTiltBox-tilter--7 .znTiltBox-tilter__figure::before {
	box-shadow: none;
}

/* Example 8 (different line) */
.znTiltBox-tilter--8 {
	perspective: none;
}

.znTiltBox-tilter--8 .znTiltBox-tilter__figure {
	transform-style: flat;
}

.znTiltBox-tilter--8 .znTiltBox-tilter__deco--lines {
	mix-blend-mode: color-burn;
}
.znTiltBox-tilter--8 .znTiltBox-tilter__deco--lines rect {
	stroke: #9255ae;
	stroke-width: 6px;
}

.znTiltBox-tilter--8 .znTiltBox-tilter__caption {
	color: #9255ae;
	mix-blend-mode: color-burn;
}

.znTiltBox-tilter--8 .znTiltBox-tilter__figure::before {
	box-shadow: none;
}