.tilter{
	/* display: block; */
	display:inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	/* width: 300px;
	height: 415px; */
	/* margin: 1.5em 2.5em; */
	/* color: #fff; */
	background: transparent;
	flex: none;
	perspective: 1000px;
}
.tilter:hover,
.tilter:focus {
	color: #fff;
	outline: none;
}

/*
.tilter__figure,
.tilter__deco,
.tilter__caption {
	will-change: transform;
}*/

.tilter__fig,
.tilter__image {
	margin: 0;
	width: 100%;
	height: 100%;
}

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

.smooth .tilter__fig,
.smooth .tilter__deco--overlay,
.smooth .tilter__deco--lines,
.smooth .tilter__deco--shine div,
.smooth .tilter__caption {
	transition: transform 0.2s ease-out;
}

.tilter__fig {
	position: relative;
	/* top:0; left:0; */
	/* line-height: 100%; */
	z-index: 1;
	display:table;
}

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

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

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

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

.tilter__deco--lines {
	fill: none;
	stroke: #fff;
	stroke-width: 1.5px;
}

.tilter__caption {
	width: 100%;
	padding:2vw 6vw;
	display: table-cell;
	/* flex-direction: column; */
	overflow: hidden;
	pointer-events: none;
	height: 100%;
		padding: 1em;
	/* position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1em;
	top: 0 !important;
    left: 0;
		display: inline-block; */
    /* vertical-align: middle; */
    /* justify-content: center; */
}

.tilter__title {
	/* margin: 0; */
	display: block;
	position: relative;
	padding-top:5%;
	padding-left:5%;
	padding-right:5%;
	/* font-weight: normal;
	font-size: 2.5em;
	font-family: 'Abril Fatface', serif;
	line-height: 1; */
}

.tilter__description {
	margin: 1em 0 0 0;
	padding-bottom:5%;
	display: inline-block;
	position: relative;
	padding-left:5%;
	padding-right:5%;
	/* padding: 1em; */
	/* font-size: 0.85em;
	letter-spacing: 0.15em; */
}
/* Editor css editing */
#tilter .editorset {
transform: scale3d(0);
opacity: 1;
transition: transform 0s, opacity 0s;
transition: stroke-dashoffset 0s;
stroke-dasharray: 0;
stroke-dashoffset: 0;
}

/* Individual styles */

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

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

.tilter-2 .tilter__deco--overlay {
	/* background-image: linear-gradient(45deg, rgba(245, 239, 40, 0.6), rgba(164, 22, 169, 0.6)); */
}
.tilter-2 .tilter__caption {
	padding: 2em;
}
.tilter-2 .tilter__deco--lines {
	stroke: #2e27ad;
	stroke-width: 4px;
}

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

.tilter-3 .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) */
.tilter-4 .tilter__deco--overlay {
	/* background-image: linear-gradient(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6)); */
}
.tilter-4 .tilter__deco--lines {
	transform: scale3d(0.8,0.8,1);
	transition: transform 0.4s;
}
.tilter-4:hover .tilter__deco--lines {
	transform: scale3d(1,1,1);
}
.tilter-4 .tilter__title,
.tilter-4 .tilter__description {
	transform: translate3d(0,80px,0);
	opacity: 0;
	transition: transform 0.4s, opacity 0.4s;
}
.tilter-4:hover .tilter__description {
	transition-delay: 0.1s;
}
.tilter-4:hover .tilter__title,
.tilter-4:hover .tilter__description {
	transform: translate3d(0,0,0);
	opacity: 1;
}
@media screen and (min-width: 30em) {
	.tilter-4 .tilter__deco--lines {
		transform: scale3d(0.8,0.8,1);
		transition: transform 0.4s;
	}
	.tilter-4:hover .tilter__deco--lines {
		transform: scale3d(1,1,1);
	}
	.tilter-4 .tilter__title,
	.tilter-4 .tilter__description {
		transform: translate3d(0,80px,0);
		opacity: 0;
		transition: transform 0.4s, opacity 0.4s;
	}
	.tilter-4:hover .tilter__description {
		transition-delay: 0.1s;
	}
	.tilter-4:hover .tilter__title,
	.tilter-4:hover .tilter__description {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

/* Example 5 (line animating) */
.tilter-5 .tilter__deco--lines path {
	stroke-dasharray: 1270;
	stroke-dashoffset: 1270;
	transition: stroke-dashoffset 0.7s;
}

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

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

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

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

.tilter-6 .tilter__deco--lines {
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
	stroke-width: 2px;
}

.tilter-6 .tilter__deco--lines:hover {
	-webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 transform: rotateY(180deg);
	stroke-width: 6px;

	}

.tilter-6 .tilter__caption {
	padding: 2em 4em 5.5em 2em;
}
/* .tilter-6 .tilter__title {
	padding: 1em;
} */

/* .tilter-6 .tilter__descripton {
	padding: 1em;
} */

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

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

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

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

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

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

.tilter-8 .tilter__fig {
	transform-style: flat;
}

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

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

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

.tilter__caption .aligntl, .tilter__caption .alignml, .tilter__caption .alignbl { text-align: left;}
.tilter__caption .aligntc, .tilter__caption .alignmc, .tilter__caption .alignbc { text-align: center;}
.tilter__caption .aligntr, .tilter__caption .alignmr, .tilter__caption .alignbr { text-align: right;}
.tilter__caption .aligntj, .tilter__caption .alignmj, .tilter__caption .alignbj { text-align: justify; float: left;}