/* -----------------------------------------------------------------------------
	
	
	#	HOROWITZMUSIK.DE
	
	Author: Roman Klein
	Website: https://github.com/twiro
	
	Version: 1.0.1
	Date: 05.02.2020
	
	
----------------------------------------------------------------------------- */


html {
	
	/* COLORS */
	
	--color: #102540;
	--colorBronze: #A9614B;
	
	/* MARGINS */
	
	--marginM: 3rem; 
	
	--letterSpacing: .25em;
	
	
	/* TRANSITIONS & FX */
	
	--transHoverDuration: 250ms;
	--transHoverTiming: ease;
	
	--transLoadTiming: cubic-bezier(0.165, 0.84, 0.44, 1); /* EaseOutQuart */
	--transLoadDuration: 3000ms;
	--transLoadDurationLong: 6000ms;
}







/* 1024PX (M) */
@media screen and (max-width: 64em) {
	html {
		--marginM: 2.5rem; 
	}
}


/* 768PX (M) */
@media screen and (max-width: 48em) {
	html {
		--marginM: 2rem;
		--letterSpacing: .2em;
	}
}


/* 640PX (S) */
@media screen and (max-width: 40em) {
	html {
		--letterSpacing: .15em;
	}
}


/* 560PX (S) */
@media screen and (max-width: 35em) {
	html {
		--letterSpacing: .1em;
	}
}


/* 480PX (S) */
@media screen and (max-width: 30em) {
	html {
		font-size: 95%;
		--letterSpacing: .05em;
	}
}


/* 400PX (S) */
@media screen and (max-width: 25em) {
	html {
		font-size: 90%;
	}
}


/* 360PX (S) */
@media screen and (max-width: 22.5em) {
	html {
		font-size: 85%;
	}
}








/* -----------------------------------------------------------------------------

	##	GLOBAL LAYOUT
	
	31.01.2020

----------------------------------------------------------------------------- */



body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--colorBronze);
	font-family: 'Crimson Text';
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--colorBronze);
	transition-property: color;
	transition-duration: var(--transLoadDurationLong);
	transition-timing-function: var(--transLoadTiming);
}


body.state--loaded {
	color: var(--color);
}




/* -----------------------------------------------------------------------------

	##	LINKS
	
	31.01.2020

----------------------------------------------------------------------------- */


a {
	color: var(--colorBronze);
	text-decoration: none;
	transition-property: color;
	transition-duration: var(--transHoverDuration);
	transition-timing-function: var(--transHoverTiming);
}

a:hover {
	color: var(--color);
}




/* -----------------------------------------------------------------------------

	##	BACKGROUND
	
	31.01.2020

----------------------------------------------------------------------------- */


.background {
	z-index: -1;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
}




/* -----------------------------------------------------------------------------

	##	IMAGES
	
	31.01.2020

----------------------------------------------------------------------------- */


img {
	display: block;
	max-width: 100%;
}

/* LAZYLOAD */

.fx--lazyload.lazyload,
.fx--lazyload.lazyloading,
.fx--lazyload.lazyloaded {
	opacity: 0;
	transform: scale3d(1.1,1.1,1.1);
	transition-property: opacity, transform;
	transition-duration: var(--transLoadDuration);
	transition-timing-function: var(--transLoadTiming);
}

.fx--lazyload.lazyloaded {
	opacity: 1;
	transform: scale3d(1,1,1);
}










/* -----------------------------------------------------------------------------

	##	HEADER
	
	31.01.2020

----------------------------------------------------------------------------- */


.header {
	display: block;
	position: relative;
	max-width: 80%;
	padding: var(--marginM);
	background-color: white;
}


.header__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	border: .1875rem solid currentColor;
	padding: var(--marginM);
	padding-top: 0;
	padding-bottom: calc(0.75 * var(--marginM));
}

.header__title {
	font-family: 'Copperblade';
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: var(--letterSpacing);
	text-transform: uppercase;
	transform: translateY(-52.5%);
	padding: 0 .25em;
}


/* 640PX (S) */
@media screen and (max-width: 40em) {}






/* -----------------------------------------------------------------------------

	##	NAV
	
	31.01.2020

----------------------------------------------------------------------------- */


.nav {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	text-transform: lowercase;
	font-style: italic;
	letter-spacing: var(--letterSpacing);
}

.nav__item,
.email {
	padding: .325em .75em;
}

.nav__divider {
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0;
}



/* 640PX (S) */
@media screen and (max-width: 40em) {
	
	.nav {
		flex-direction: column;
		margin-bottom: calc(0.5 * var(--marginM));
	}
	
	.nav__divider {
		display: none;
	}
}