@charset "UTF-8";

@font-face {
  font-family: 'Molle';
  src: url('../fonts/Molle-Italic.ttf');
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
}

 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; scroll-behavior: smooth;}

body {
	width: 100%;
	height: 100%;
	font-family: sans-serif;
	overflow-x: hidden;
}
/* ------ Loader ------ */
.outer-lottie-wrapper {
	width: 100%;
	height: 100vh;
	z-index: 1050;
	position: fixed;
}
.inner-lottie-wrapper {
	width: 100%;
	height: 100%;
	display: table;
	text-align: center;
	background-color: white;
	transition: visibility 0s, opacity 0.5s linear;
}
lottie-player {
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	position: absolute;
}
/* ------ Navbar ------ */
.navbar {
  	box-shadow: 0px 0px 5px 0px black; 
}
/*.fixed-top.scrolled {
  	background-color: #343a40 !important;
 	transition: background-color 200ms linear;
} */
/* ------ Landing wrapper ------ */
.outer-landing-wrapper {
	width: 100%;
	height: 100vh;
}
.inner-landing-wrapper {
	width: 100%;
	height: 100vh;
	background-image: url("../img/landing-image.jpg");
	background-size: cover;
	background-position: center;
	display: table;
	text-align: center;
	overflow-x: hidden;
}
h1.landing-title {
	display: table-cell;
	vertical-align: middle;
	font-family: "Molle", cursive;
	color: black;
	font-size: 140px;
	line-height: 1;
	transform: translate(0px, 25px);
	overflow-x: hidden;
	/* text-shadow: 8px 8px turquoise; */
}
/* ------ General -------*/
.anchor {
	height: 0px;
	color: transparent;
}
.bold {
	font-weight: bold;
}
/* ------ Light content wrapper ------ */
.outer-content-wrapper-light {
	background-color: white;
	height: auto;
}
.inner-content-wrapper-light {
	max-width: 900px;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
}
p.subtitle {
	color: black;
	font-family: "Molle", cursive;
	font-size: 60px;
	line-height: 1.2;
}
.content-text-light {
	max-width: 700px;
	margin: 0 auto;
	font-family: 'Roboto', sans-serif;
	line-height: 1.45;
	font-size: 17px;
	color: black;
	text-align: left;
	padding: 0 0 0.8em 0;
}
.link-light {
	color: turquoise;
	text-decoration: none;
}
.link-light:hover {
	opacity: 0.6;
	color: turquoise;
	text-decoration: none;
}
/* ------ Images ------ */
.img-wrapper {
	padding: 20px 0 30px 0;
	width: 100%;
}
.tahtiset-image {
	width: 100%;
}
.tahtiset-caption {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	text-align: left;
	margin: 0;
	background-color: #343a40;
	color: white;
	padding: 10px;
}
/* ------ Gigs wrapper ------ */
.gigs-wrapper {
	padding: 30px 0 40px 0;
}
#sheets > p {
	line-height: 1.2;
}
.sheets-subtitle {
	font-size: 22px; 
	color: white; 
	font-weight: 700;
	margin: 0;
	padding: 0 0 2px 0;
}
.sheets-paragraph {
	font-size: 17px; 
	color: white;
	margin: 0;
	padding: 0 0 16px 0;
}
/* ------ Dark content wrapper ------ */
.outer-content-wrapper-dark {
	background-color: #343a40;
	height: auto;
}
.inner-content-wrapper-dark {
	max-width: 900px;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
}
p.subtitle__turquoise {
	color: turquoise;
}
.content-text-dark {
	max-width: 700px;
	margin: 0 auto;
	font-family: 'Roboto', sans-serif;
	line-height: 1.45;
	font-size: 17px;
	color: #eee;
	text-align: left;
	padding: 0 0 0.8em 0;
}
.flex-container {
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}
.left-flex, .right-flex {
	width: 50%;
}
.flex-text-dark {
	max-width: 700px;
	margin: 0 auto;
	font-family: 'Roboto', sans-serif;
	line-height: 1.45;
	font-size: 17px;
	color: #eee;
	text-align: left;
	padding: 0 0 0.8em 0;
}
/* ------ Social row ------ */
.social-row {
	max-width: 700px;
	margin: 0 auto;
	text-align: left;
}
.social-logo {
	width: 30px;
}
/* ------ Footer ------ */
.footer-wrapper {
	height: auto;
	text-align: center;
}
.footer-text {
	margin: 0;
}
.footer-link, .footer-link:hover {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.1);
}
/* ------ Media rules ------ */
@media screen and (max-width: 1120px) {
	h1.landing-title {
		font-size: 120px;
	}
}
@media screen and (max-width: 920px) {
	.img-wrapper {
		width: 94%;
		margin: 0 3%;
	}
	h1.landing-title {
		font-size: 120px;
	}
}
@media screen and (max-width: 720px) {
	h1.landing-title {
		font-size: 100px;
		word-spacing: 100vw;
	}
	.inner-content-wrapper-light {
		padding: 30px 0 10px 0;
	}
	.content-text-light, .content-text-dark {
		max-width: none;
		width: 94%;
		margin: 0 3%;
	}
	.social-row {
		max-width: none;
		width: 94%;
		margin: 0 3%;
	}
	.flex-container {
		max-width: none;
		width: 94%;
		margin: 0 3%;
		flex-direction: column;
	}
	.left-flex, .right-flex {
		width: 100%;
	}
}
@media screen and (max-width: 520px) {
	h1.landing-title {
		font-size: 100px;
		word-spacing: 100vw;
	}
	p.subtitle {
		font-size: 40px;
	}
	.tahtiset-caption {
		font-size: 17px;
	}
	#sheets {
		width: 94%;
		margin: 0 3%;
	}
}
@media screen and (max-width: 420px) {
	h1.landing-title {
		font-size: 70px;
		word-spacing: 100vw;
	}
	p.subtitle {
		font-size: 35px;
	}
}