@charset 'UTF-8';

@font-face {
    font-family: asap;
    font-style: normal;
    font-weight: 400;
 
	src: url("assets/Acumin-BdItPro.woff") format("woff"), 
		url("https://use.typekit.net/af/2b01c0/00000000000000003b9acb1a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/2b01c0/00000000000000003b9acb1a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
}

@font-face {
	font-family: handel-gothic, sans-serif;
	font-style: normal;
	font-weight: 700;
}



html,
html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
	width: 100%;
	top: 0;
	padding: 1em 2em;
	position: fixed;
	z-index: 1000;
}

body {
	font-family: acumin-pro-extra-condensed, sans-serif;
	font-size: 1.7vw;
	background: white;
}

footer {
	margin-top: 3em;
	padding-top: 2em;
	background-color: #ccc;
}

img { 
	width: 80%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
a, a:visited {
	color: inherit;
}

h1 {
	color: #fff;
	text-transform: uppercase;
	font-size: 7.5em;
	letter-spacing: .85em;
}

h2 {
	font-weight: 100;
	font-size: 2em;
	line-height: 2.2;
	margin-bottom: -.35em;
	padding-top: 5%;
	letter-spacing: .3em;
	text-transform: uppercase;
/*	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2); */
}

h3 {
	font-size: 1.5em;
	font-weight: 100;
	line-height: 2.75;
	letter-spacing: .35em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}



/* HEADER */

.site-logo {
	position: relative;
	display: block;
	float: left;
	width: 6.0em;
}
.site-logo img {
	width: 3.0em;
}
.logo {
	opacity: 0.9;
}

.logo:hover {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #ffed00;
}

.site-nav {
	position: relative;
	float: right;
	z-index: 400;
	top: 0;
	left: 0;
	display: block !important;
	width: 80%;
	padding: .75em 1em 0 0;
	opacity: .95;
	background: none;
}
.site-nav ul {
	list-style-type: none;
	margin: 0;
	text-align: right;
}
.site-nav ul li {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 1.5em;
}
.site-nav ul li a {
	font-size: .85em;
	padding-bottom: .5em;
	text-decoration: none;
	letter-spacing: .15em;
	text-transform: uppercase;
	text-decoration-color: #ffed00;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.site-nav ul li a:hover {
	outline: none;
/*	border-bottom: 10px solid #ffed00; */
	background: #ffed00;
}


/* SLIDER */

.slider{
	overflow: hidden;
	width: 80%;
	margin:3em auto 0 auto;
	}	

.slider figure {
	position: relative;
	width: 500%; /* 500% = 5 bilder => width: 20% .slider figure img */
	margin: 0;
	left: 0;
	animation: 20s slider infinite; /* infinite = laeuft durchgegend. stopp nicht! */
}

.slider figure img {
	float: left;
	width: 20%;
}

@keyframes slider {
	0% {left:0;}
	20% {left:0;}
	25% {left:-100%;}
	45% {left:-100%;}
	50% {left:-200%;}
	70% {left:-200%;}
	75% {left:-300%;}
	95% {left:-300%;}
	100% {left:-400%;}
}


/* MAIN SECTIONS */

.flex {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ABOUT */

.about {
	display: flex;
	margin-top: 3em;
}
.about .left {
    padding-top: 0;
    padding-right: 0;
    padding-left: 8em;
    padding-bottom: 4em; /* 8 0 8 23.5% */
    background-color: rgb(239, 239, 239);
    width: 50%;
}
.left figure {
	position: relative;
}

.left figure img {
	position: relative;
	z-index: 100;
	padding-top: 0em;
	padding-right: 0em; 
}
.about .right {
	background: rgb(239, 239, 239);
    color: #000000;
    width: 50%;
    padding: auto 1em auto 0;
}
.right-title {
	font-weight: 300;
	padding: 1em 0 0 0;
	letter-spacing: .10em;
	text-transform: uppercase;
	line-height: 1.5;
	max-width: 9em;
	margin-bottom: .5em;
}
.right-text {
	letter-spacing: .07em;
	line-height: 1.5;
	opacity: .9;
	max-width: 20em;
}

.feel-good {
	display: inline-block;
	margin-top: 2em;
	padding: 0 0 .4em 0;
	transition: all .3s;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .25em;
}

.feel-good:hover {
	outline: none;
	background: #ffed00;
}


/* GALLERY */

.gallery {
	display: flex;
	margin-top: 3em;
/*	flex-flow: column; */
}

.gallery .left {
	color: #000;
	width: 50%;
	padding: 1em 0 0 0;
	background-color: rgb(239, 239, 239);
}

.gallery .left .box {
	position: relative;
	display: inline-block;
	text-align: left;
	margin-left: 12em;
}

.left-title {
	font-weight: 300;
	padding-top: 1em;
	padding-right: 0;
	letter-spacing: .10em;
	text-transform: uppercase;
	text-align: left;
	line-height: 1.5;
	max-width: 12em;
	margin-bottom: .5em;
}

.left-text {
	letter-spacing: .07em;
	line-height: 1.5;
	opacity: .9;
	max-width: 30em;
}

.gallery-link {
	display: inline-block;
	margin-top: 5.0em;
	margin-bottom: 5em;
	padding: 0 0 .4em 0;
	transition: all .3s;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .25em;
}

.gallery-link:hover {
	border-bottom: 1px solid white;
}

.gallery .right {
	width: 50%;
	padding: 0em 0em 5em;
	background-color: rgb(239, 239, 239);
}

.right figure {
	position: relative;
}

.right figure img {
    position: relative;
    z-index: 100;
    width: 60%;
	padding-top: 0em;
}
 



/* FOOTER */

.footer-credit {
	float: right;
	width: 40%;
	text-align: right;
	position: relative;
}

.footer-disclaimer {
	float: left;
	width: 60%;
	position: relative;
}

.footer-content {
	width: 100%;
	margin: 0 auto; 
	padding-bottom:1.7em;
}

.footer-info p {
	font-size: 0.9em;
	color: #777;
	line-height: 1.55;
	margin-bottom: 2em;
	text-align: center;
	letter-spacing: 0.10em;
}
.footer-info {
	clear: both;

}
.footer-legal {
	text-align: center;
	color:#FFF;
	opacity: .8;
}
.footer-credit a:hover {
	text-decoration: none;
}


/* impressum */

.impressum p {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	width: 60%;
	font-size: 0.5em;
	text-transform: lowercase;
	color: #777;
	text-align:justify;
	padding: 2em 0;
}


/* tablet MITTEL */

@media screen and (max-width: 600px){
	
	body {
		max-width: 605px;
	}
	
	.logo:hover {
		width: 30px;
		height: 30px;
	}
	
	.site-nav ul li {
		margin-left: 2.5em;
	}
	.site-nav ul li a {
		font-size: 2.0em;
	}

	
	.intro p {
		font-size: 2.5vw;
	}

	.banner img {
		max-width: 50%;
		margin-left: 22.5%;
	}
	
	.about {
		display: flex;
		flex-flow: column;
	}
	
	.about .left {
		width: 80%;
		margin-left: 10%;
	}
	
	.about .right {
		width: 80%;
		margin-left: 10%;
		padding-left: 8%;
	}

	.right-title {
		font-size: 2.5em;
		padding-top: 2%;
		padding-bottom: 1%;
		margin-left: 9%;
	}
	
	.right-text {
		font-size: 2.0em;
		margin-left: 9.5%;
		padding-bottom: 8%;
		max-width: 18em;
	}
	
	.feel-good {
		font-size: 2em;
		margin-top: 2em;
		margin-bottom: 2em;	
		padding-left: 7%;
	}	
	
	.gallery {
		display: flex;
		flex-flow: column; 
	}
	
	.gallery .left {
		width: 80%;
		margin-left: 10%;
	}
	
	.gallery .left .box {
		margin-left: 10em;
	/*	color: #666; */
	}
	
	.left-title {
		font-size: 2.5em;
		padding-top: 8%;
		padding-bottom: 8%;
		margin-left: -3%;
	}
	
	.left-text {
		font-size: 2em;
		margin-left: -5%;
	}
	
	.gallery-link {
		font-size: 2.3em;
		margin-top: 3em;
		margin-bottom: 3em;	
	}
	
	.gallery .right {
		width: 80%;
		margin-left: 10%;
		padding-bottom: 0;
	}
	
	.right figure img {
		width: 83%;
		padding-left: 17%;
		padding-top: 10%;
	}
	
	.contact p {
		font-size: 2.5em;
	}
	
	.collage {
		display: flex;
		flex-flow: column;
	}
	
	.collage .left {
		width: 80%;
		margin-left: 10%;
	}
	
	.collage .right {
		width: 70%;
		margin-left: 10%;
		padding-left: 8%;
	}


	.impressum p {
		width: 75%;
		margin-left: 7%;
		font-size: 0.85em;
		padding: 0 0;
		margin-bottom: 10%;
}
	
}