/* ==========================================================================
   motor4.de-landingpage-automotive-v2018-02
   ========================================================================== */

.m4-c-header--landingpage {
	height: auto;
	overflow: hidden;
	background: #cd1619 url("../img/automotive/pattern.svg") no-repeat;
	background-size: 1920px 1080px;
	background-attachment: fixed;
}

.m4-c-header--landingpage .navbar-brand #logo {
	width: 160px;
}

.m4-c-header--landingpage .navbar-brand .st1 {
	fill: #abda09;
}

.m4-c-header--landingpage .navbar-brand {
	width: 100%;
	text-align: center;
}

.m4-c-header--dark.m4-c-header--landingpage .navbar-brand {
	width: auto;
	text-align: left;
}

@media (min-width: 768px) {
	.m4-c-header--landingpage .navbar-brand {
		width: auto;
		text-align: left;
	}
}

@media (min-height: 900px) {
	.m4-c-header--landingpage {
		height: 100vh;
	}
}

.m4-c-intro--landingpage h1 {
	font-family: "Oswald",sans-serif;
  font-weight: 500;
  text-transform: uppercase;
	font-size: 3rem;
	line-height: 3.5rem;
	position: relative;
	z-index: 15;
	margin: 1rem 0 0.5rem 0;
}

.m4-c-intro--landingpage .m4-c-intro--lager {
	font-size: 4rem;
}

@media (min-width: 576px) {

	.m4-c-intro--landingpage h1 {
		font-size: 4rem;
		line-height: 4.5rem;
		margin: 0 0 1rem 0;
	}
	.m4-c-intro--landingpage .m4-c-intro--lager {
		font-size: 5rem;
	}
}

@media (min-width: 768px) {

	.m4-c-intro--landingpage h1 {
		font-size: 5rem;
		line-height: 5.5rem;
	}
	.m4-c-intro--landingpage .m4-c-intro--lager {
		font-size: 6.5rem;
	}
}

@media (min-width: 1200px) {

	.m4-c-intro--landingpage h1 {
		font-size: 7rem;
		line-height: 7.5rem;
	}
	.m4-c-intro--landingpage .m4-c-intro--lager {
		font-size: 8.5rem;
	}
}

.m4-c-intro--landingpage:before {
	width: 200px;
	height: 200px;
	background-color: #abda09;
	border-radius: 50%;
	position: absolute;
	content: "";
	left: 50%;
	margin-left: -100px;
}

.m4-c-intro--landingpage {
	background: white;
	padding: 40px 15px 30px 15px;
	margin: 100px 10px 120px 10px;
	border: 0px solid #111;
	box-shadow:
		1px 1px #111,
		2px 2px #111,
		3px 3px #111,
		4px 4px #111,
		5px 5px #111,
		6px 6px #111,
		7px 7px #111,
		8px 8px #111,
		9px 9px #111,
		10px 10px #111,
		12px 12px #111,
		13px 13px #111,
		14px 14px #111,
		15px 15px #111,
		16px 16px #111,
		17px 17px #111,
		18px 18px #111,
		19px 19px #111,
		20px 20px #111;
}

@media (min-height: 768px) {

	.m4-c-intro--landingpage {
		padding: 60px 30px;
	}
}

@media (min-width: 768px) {

	.m4-c-intro--landingpage {
		margin: 120px auto 140px auto;
	}

	.m4-c-intro--landingpage:before {
		margin-top: 50px;
	}

}

@media (min-width: 1200px) {

	.m4-c-intro--landingpage:before {
		width: 350px;
		height: 350px;
		margin-left: -150px;
		margin-top: -10px;
	}
}

.m4-c-intro--landingpage:after {
	width: 104px;
	height: 104px;
	background: url("../img/automotive/arrow.svg") no-repeat;
	position: absolute;
	content: "";
	left: 50%;
	margin-left: -52px;
	bottom: -104px;
}

.m4-c-intro--landingpage h1,
.m4-c-intro--landingpage p {
	color: #2b2b2b;
	text-shadow: none;
}

.m4-c-intro__cta {
	display: inline-block; 
	margin-top: 5px;
	border-bottom: 2px solid #ccc;
	font-weight: 700;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.m4-c-intro__cta:hover {
	color: #2b2b2b;
	text-decoration: none; 
	border-bottom-color: #abda09;
}

@media (min-width: 1025px) {

	.m4-c-intro__cta {
		margin-top: 35px;
	}
}

.m4-c-competence__intro h2 {
	font-family: "Oswald",sans-serif;
	font-weight: 500;
  text-transform: uppercase;
	font-size: 3.2rem;
    line-height: 3.7rem;
}

.m4-c-competence strong {
	color: #cd1619;
}

.m4-c-competence .m4-c-competence__display {
	display: none;
}

.m4-c-benefits {
	background: #cd1619 url("../img/automotive/pattern-50.svg") center center no-repeat;
	background-size: 1920px 1080px;
	color: white;
	padding: 3rem 0 2.5rem 0;
	text-align: center;
}

.m4-c-benefits h2 {
	font-family: "Oswald",sans-serif;
	font-weight: 500;
  text-transform: uppercase;
	font-size: 3.5rem;
	line-height: 3.7rem;
	margin: 0 0 20px 0;
	text-align: center;
}

@media (min-width: 768px) {

	.m4-c-benefits h2 {
		text-align: right;
	}

	.m4-c-benefits {
		text-align: left;
	}
}

.m4-c-benefits__cta {
	display: inline-block; 
	border-bottom: 2px solid #af090c;
	font-weight: 700;
	color: white;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.m4-c-benefits__cta:hover {
	color: white;
	text-decoration: none; 
	border-bottom-color: #abda09;
}

.m4-c-competence__icons {
	margin: 40px auto;
	max-width: 500px;
	display: block;
}

.m4-c-portfolio {
	background: white;
}

.m4-c-cta p {
	font-size: 1.35rem;
	line-height: 1.9rem;
}

.m4-c-cta h2,
.m4-c-contact h2,
.m4-c-portfolio h2 {
	font-family: "Oswald",sans-serif;
	font-weight: 500;
  text-transform: uppercase;
	font-size: 3.2rem;
  line-height: 3.7rem;
	margin: 1rem 0;
}

.m4-c-cta {
	background: #cd1619 url("../img/automotive/pattern-50.svg") center center no-repeat;
	background-size: 1920px 1080px;
	color: white;
	padding: 2rem 0 4.5rem 0;
	text-align: center;
}

.m4-c-cta .btn {
	margin-top: 20px;
	color: #313a46;
	background: white;
	font-family: "fira-sans", sans-serif;
	font-weight: 700;
}

.m4-c-cta .btn:hover,
.m4-c-cta .btn:focus {
	background: #abda09;
	border-color: #abda09;
	color: #2b2b2b;
}

.m4-c-competence {
	padding: 80px 0 40px 0;
}