.timelapse {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: #252323;
	padding: 5em 0em 10em;
}
.timelapse-header {
	padding: 2em 1em 2em;
	text-align: center;
}
.timelapse-header h1 {
	margin: 0.5em 0 0;
	letter-spacing: -1px;
	font-size: 3em;
	line-height: 1;
	font-weight: normal;
}
.timelapse-header h1 span {
	display: block;
	padding: 0.5em 0 1em;
	color: #bdbdbd;
	font-weight: normal;
	font-size: 0.45em;
	letter-spacing: 0;
}
.timelapse em {
	font-size: 23px;
	color: #5D5D5D;
	display: block;
}

.timelapse-circle {
	background-color: #252323; border-radius: 40px; padding: 20px; margin: auto; height: 80px; width: 80px; margin-bottom: -45px; text-align: center; font-size: 20px;
}

.tilter {
	display: block;
	position: relative;
	width: 320px;
	height: 198px;
	margin: 5em 0em 2em;
	color: #fff;
	flex: none;
	perspective: 1000px;
}

.tilter * {
	pointer-events: none;
}

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

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

.tilter__figure > * {
	transform: translateZ(0px);
}

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

.tilter__figure {
	position: relative;
}

.tilter__figure::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	box-shadow: 0 30px 20px rgba(25,22,29,0.7);
}
.tilter__deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.tilter-1 .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-2 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6) 0%, rgba(218, 79, 107, 0.61) 0%, rgba(154, 41, 228, 0.5) 100%);
}
.tilter-3 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6) 0%, rgba(218, 192, 78, 0.61) 0%, rgba(227, 41, 41, 0.5) 100%);
}
.tilter-4 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6) 0%, rgba(190, 218, 78, 0.61) 0%, rgba(227, 150, 41, 0.5) 100%);
}
.tilter-5 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6) 0%, rgba(76, 200, 218, 0.61) 0%, rgba(223, 226, 41, 0.5) 100%);
}
.tilter .tilter__deco--overlay {
	opacity: 1;
	-webkit-transition: opacity 4s cubic-bezier(0.65, 0.035, 0.25, 1);
	transition: opacity 1.6s cubic-bezier(0.65, 0.035, 0.25, 1);
}
.tilter:hover .tilter__deco--overlay {
	opacity: 0;
}

.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 {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 2em;
	text-align: right;
	text-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35);
}
.tilter__title {
	margin: 0;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1;
}

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

@media (min-width: 720px) {
  .tilter {
  	width: 100%;
  	height: auto;
  }
  .tilter__title {
  	font-size: 2.5em;
  }
}
@media (min-width: 900px) {
  .tilter__caption {
  	padding: 4em;
  }
}

/* MODAL */

.modal-backdrop.in {
	opacity: 1;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
}

.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform 1s, opacity 1s;
        transition: transform 1s, opacity 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);  
  -webkit-transform: translate3d(0, 80px, 0) !important;
      -ms-transform: translate3d(0, 80px, 0) !important;
       -o-transform: translate3d(0, 80px, 0) !important;
          transform: translate3d(0, 80px, 0) !important;
}
.modal.in .modal-dialog {
  -webkit-transform: translate3d(0, 0px, 0) !important;
      -ms-transform:  translate3d(0, 0px, 0) !important;
       -o-transform:  translate3d(0, 0px, 0) !important;
          transform:  translate3d(0, 0px, 0) !important;
}

/* Close button */

.action {
	font-size: 30px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	vertical-align: top;
	color: #e95f46;
	border: none;
	background: none;
}

.action:hover,
.action:focus {
	color: #f0715a;
	outline: none;
}

.action--close {
	position: fixed;
	z-index: 150;
	top: 0;
	right: 10px;
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(0.6, 0.6, 1);
	transform: scale3d(0.6, 0.6, 1);
}

.modal.fade.in .action--close {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

/* Details */

.details {
	max-width: 100%;
	padding: 2.15em 0;
}

.details h4,
.details p {
	opacity: 0;
	-webkit-transition: -webkit-transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
}

.modal.fade.in .details h4,
.modal.fade.in .details p {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.modal.fade.in .details p {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}