@charset 'UTF-8';

@font-face {
  font-family: "acumin-pro-extra-condensed";
  font-style: normal;
  font-weight: 400;
  src: url("https://use.typekit.net/af/2b01c0/00000000000000003b9acb1a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), 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.2vw;
	background: white;
}

footer {
	padding-top: 5em;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(159,178,216,1.00) 73.58%,rgba(0,51,153,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(159,178,216,1.00) 73.58%,rgba(0,51,153,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(159,178,216,1.00) 73.58%,rgba(0,51,153,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(159,178,216,1.00) 73.58%,rgba(0,51,153,1.00) 100%);
}

img { 
	width: 100%;
	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: 13%;
	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: 6.0em;
}
.logo {
	opacity: 1;
}
.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;
	color: #fff;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.site-nav ul li a:hover {
	outline: none;
	border-bottom: 1px solid white;
}

/* INTRO */

.intro {
	position: relative;
	height: 50vw;
	background-color: #FFF;
}
.intro-content {
	color: #fff;
	position: absolute;
	z-index: 20000;
	padding-top: 4em;
	top: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}

/* IMAGEFILM */

.image {
    position: relative;
    background-color: #FFF;
    width: 80%;
    height: auto;
    margin-top: 5em;
    margin-left: auto;
    margin-right: auto;
}



/* AUFMACHER */

.aufmacher {
  	position: relative;
	background: #fff;
	padding: 6em 6em;
}

.aufmacher p {
	color: #666666;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	font-size: 2.0em;
	line-height: 2.2;
	letter-spacing: .250em;
}

/* BANNER */

.banner {
	width: 100%;
	height: auto;
	margin-top: 5em;
	/*	background-image: url(images/logo_mitclaim.svg); */
}

.banner img {
	max-width: 30%;
	margin-left: 33%;
}

/* MAIN SECTIONS */

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

/* ABOUT */

.about {
	display: flex;
}
.about .left {
	padding: 8% 0 8% 20%; /* 8 0 8 23.5% */ 
	background-image: -webkit-linear-gradient(315deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(315deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(315deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(135deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	width: 50%;
}
.left figure {
	position: relative;
}

.left figure img {
	position: relative;
	z-index: 100;
	padding-top: 0em;
}
.about .right {
	background: #039;
	color: #fff;
	width: 50%;
	padding: 6em 3em 10em;
}
.right-title {
	font-weight: 100;
	padding: 1em 0 0 0;
	letter-spacing: .35em;
	text-transform: uppercase;
	line-height: 1.59;
	max-width: 9em;
	margin-bottom: .5em;
}
.right-text {
	letter-spacing: .1em;
	line-height: 1.9;
	opacity: .9;
	max-width: 20em;
}

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

.feel-good:hover {
	border-bottom: 1px solid white;
}


/* GALLERY */

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

.gallery .left {
	color: #fff;
	width: 50%;
	padding: 3em 0 0 0;
	background-color: #039;
}

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

.left-title {
	font-weight: 100;
	padding-top: 8%;
	padding-right: 0;
	padding-left: 20%;
	padding-bottom: 8%;
	/*	padding: 8% 0 8% 10%; */
	letter-spacing: .35em;
	text-transform: uppercase;
	line-height: 1.59;
	max-width: 12em;
	margin-bottom: .5em;
}

.left-text {
	letter-spacing: .1em;
	line-height: 1.9;
	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-image: -webkit-linear-gradient(315deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(315deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(315deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(135deg,rgba(0,51,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
}

.right figure {
	position: relative;
}

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

/* FUHRPARK 

.right .figure img fuhrpark {
	position: relative;
	z-index: 100;
	width: 60%;
}
 

/* ADRESS CONTACT */

.adress {
	padding: 6em 6em;
}

.adress p {
	color: #666666;;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.3em;
	line-height: 1.9;
	letter-spacing: .225em;
}

.adress p a {
	text-decoration: none;
}

.adress p a:hover {
	text-decoration: none;
	color: #039;
}

.contact {
  	position: relative;
	background: #fff;
	margin-top: 5em;
	margin-bottom: 5em;
}

.contact p {
	color: #666666;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 1.9;
	letter-spacing: .325em;
}

.contact p a {
	text-decoration: none;
}

.contact p a:hover {
	text-decoration: none;
	color: #039;
}




/* 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.8em;
	color: #FFF;
	line-height: 1.55;
	margin-bottom: 2.0em;
	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";
	font-size: 0.6em;
	text-transform: lowercase;
	color: #777;
}


/* tablet MITTEL */

@media screen and (max-width: 600px){
	
	body {
		max-width: 605px;
	}
	
	.intro p {
		font-size: 1.8vw;
	}

	.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: 3em;
		padding-top: 8%;
		padding-bottom: 8%;
	}
	
	.right-text {
		font-size: 2.3em;
	}
	
	.feel-good {
		font-size: 3em;
		margin-top: 3em;
		margin-bottom: 3em;	
	}	
	
	.gallery {
		display: flex;
		flex-flow: column; 
	}
	
	.gallery .left {
		width: 80%;
		margin-left: 10%;
	}
	
	.gallery .left .box {
		margin-left: 15em;
	/*	color: #666; */
	}
	
	.left-title {
		font-size: 3.0em;
		padding-top: 8%;
		padding-bottom: 8%;
	}
	
	.left-text {
		font-size: 2.3em;
	}
	
	.gallery-link {
		font-size: 3em;
		margin-top: 3em;
		margin-bottom: 3em;	
	}
	
	.gallery .right {
		width: 80%;
		margin-left: 10%;
	}
	
	.right figure img {
		width: 60%;
	}
	
	.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%;
	}

	
}