@import url('https://fonts.googleapis.com/css?family=Sacramento');

.letter-effect {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

/* Content */
.content {
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	min-height: 500px;
	padding: 7em 0;
}

.js .content {
	overflow: hidden;
}

.content--c1 {
	color: #5141d6;
	background: #e8e8f1;
}

.content--c1 .btn--trigger,
.content--c1 .section-link {
	color: #333;
}

.content--c2 {
	color: #fff;
	background: #757d8b url(../img/3.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c2 .section-link {
	color: #f03c3c;
}

.content--c3 {
	color: #d65027;
	background: #13110f;
}

.content--c4 {
	color: #ffeb3b;
	background: #000 url(../img/2.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c4 .section-link {
	color: #ffeb3b;
}

.content--c5 {
	color: #bfea3d;
	background: #403e28 url(../img/7.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c6 {
	color: #0ed0ef;
	background: #2196f3 url(../img/1.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c7 {
	color: #f9f9f9;
	background: #9ce0c4;
}

.content--c8 {
	color: #fde35b;
	color:white;
	background: #0e0f13 url(../img/4.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c8 .section-link {
	color: #fde35b;
}

.content--c9 {
	color: #3f51b5;
	background: #fc8554 url(../img/8.png) no-repeat 80% 0;
}

.content--c10 {
	color: #0b070f;
	background: #1b1a1d url(../img/9.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c10 .btn--trigger,
.content--c10 .section-link {
	color: #ffc08a;
}

.content--c11 {
	color: #ffeb3b;
	background: #f9f4d4 url(../img/10.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c12 {
	color: #8bc34a;
	background: #dae2da;
}

.content--c12 .btn--trigger,
.content--c12 .section-link {
	color: #9b8a4c;
}

.content--c12 .deco-image {
	position: absolute;
	pointer-events: none;
	right: -100px;
	top: 50%;
	margin-top: -150px;
}

.content--c13 {
	color: #f7d3ad;
	background: #a96539 url(../img/6.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c13 .section-link {
	color: #cf8862;
}

.content--c14 {
	color: #009b3a;
	background: #fedf00;
}

.content--c14 .btn--trigger,
.content--c14 .section-link {
	color: #002776;
}

.content--c15 {
	color: #085f17;
	background: #5dd672;
}

.content--c16 {
	color: #dbe87e;
	background: #d1e6dc url(../img/12.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c17 {
	color: #e24b1e;
	background: #27272b url(../img/5.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.content--c18 {
	color: #fff;
	background: #366988 url(../img/13.jpg) no-repeat 50% 50%;
	background-size: cover;
}

/* Text styles */
.title {
	margin: 0;
	font-size: 10vw !important;
	position: relative;
}

.title--centered {
	width: 100%;
	text-align: center;
}

.js .title--centered {
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.title--right {
	width: 100%;
	text-align: right;
}

.js .title--right {
	-webkit-justify-content: flex-end;
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
}

.title--style-1 {
	font-family: 'Abril Fatface', serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.25vw;
}

.title--style-2 {
	font-family: 'Teko', sans-serif;
	font-weight: 600;
}

.title--style-3 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
}

.title--style-4 {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
}

.title--style-5 {
	font-family: 'Rubik', sans-serif;
	text-transform: uppercase;
	font-weight: 400;
}

.title--style-6 {
	font-family: 'Cormorant Garamond', serif;
	text-transform: uppercase;
	font-weight: 400;
}

.title--style-7 {
	font-family: 'Neucha', serif;
	font-size: 9vw !important;
	font-weight: 400;
}

.title--style-8 {
	font-family: 'Sacramento', serif;
	font-weight: 400;
	font-size: 9vw !important;
}

.title--style-9 {
	font-family: 'Abril Fatface', serif;
	font-weight: 400;
}

.title--style-10 {
	font-family: 'Arapey', serif;
	font-weight: 400;
}

.title--style-11 {
	font-family: 'Archivo Black', serif;
	font-weight: 400;
	font-size: 8vw !important;
	letter-spacing: -0.45vw;
}

.title--style-12 {
	font-family: 'Arapey', serif;
	font-weight: 400;
}

.title--style-13 {
	font-family: 'Elsie Swash Caps', serif;
	font-weight: 400;
	font-size: 8vw !important;
}

.title--style-14 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
}

.title--style-15 {
	font-family: 'Unica One', serif;
	font-weight: 400;
}

.title--style-16 {
	font-family: 'Old Standard TT', serif;
	font-size: 9vw !important;
	letter-spacing: -0.25vw;
	font-weight: 400;
}

.title--style-17 {
	font-family: 'Arapey', serif;
	font-weight: 400;
}

.title--style-18 {
	font-family: 'Teko', serif;
	text-transform: uppercase;
	font-weight: 400;
}

[class*="letter"] {

	position: relative;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	white-space: pre;
}

.title--style-9 [class*="letter"] {
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.title--style-10 [class*="letter"] {
	-webkit-transform-origin: -200% 50%;
	transform-origin: -200% 50%;
}

/* Slideshow */
.slideshow,
.slide {
	position: relative;
	width: 100%;
	height: 100%;
}

.slide {
	padding: 0 6vw;
}

.js .slide {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.js .slide:not(.slide--current) {
	position: absolute;
	top: 0;
	pointer-events: none;
	opacity: 0;
}

@media screen and (max-width:60em) {
	.content--c12 .deco-image {
		display: none;
	}
	.content {
		height: calc(100vh - 124px);
	}
}