header, section, footer {
	min-height: 100%;
    min-width: 1280px;
}

h1, h2, h3,h4, h5, h5, p {
	color: #3370a4;
}

strong {font-weight: 700}

p {max-width: 500px;}

header {
	background: url('../images/header.jpg') center bottom no-repeat;
	background-size: cover;
}

h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% - 300px), 140px);
	font-weight: 900;
}


h1 span {display: block; padding-left: 90px;}

header nav {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0.875rem 30px;
	width: 100%;
	text-align: right;
	display: block;
	background: rgba(255,255,255,.7);
	border-bottom: 1px solid rgba(255,255,255,.7);
}

nav ul li {display: inline-block; padding: 0 30px;}

header nav ul li a {
	line-height: 3.5rem;
	color: #3370a4;
	text-decoration: none;
	font-size: 1.25rem;
}

.logo-top, .logo-nav {padding: 1.75rem 60px; display: block;}

.logo-nav {
	padding: 0.875rem 30px;
	position: absolute;
	bottom: 0; 
	max-height: 100%;
	width: auto;
    transition: all .4s ease;
}


section {
	background: url('../images/background-dots_flipped.png') left center no-repeat;
	position: relative;
	background-size: contain;
}

@keyframes aniimage {
    0% {transform: translate3d( -50%,calc(50% - 0px), 0) rotate(0deg); animation-timing-function: ease-in;}
    25% {transform: translate3d( -50%,calc(50% - 15px), 0) rotate(.5deg); animation-timing-function: linear;}
    50% {transform: translate3d( -50%,calc(50% - 20px), 0) rotate(0deg); animation-timing-function: ease-in-out;}
    75% {transform: translate3d( -50%,calc(50% - 15px), 0) rotate(-.5deg); animation-timing-function: linear;}
    100% {transform: translate3d( -50%,calc(50% - 0px), 0) rotate(0deg); animation-timing-function: ease-out;}
}

section img {
    max-width: 100%;
    height: auto;
    position: absolute !important;
    bottom: 50%;
    left:  50%;
    transform: translate( -50%,50%);
    transform-origin: center bottom;
    animation: .8s aniimage infinite linear;
}

section img::after {
    display: block;
    content: "";
    width: 500px;
    height: 5px;
    background: #f00;
}

section:nth-of-type(even) {
	background: url('../images/background-dots.png') right center;
}

.centerme, .centerme p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 100%;
}

.centerme * {
	position: relative;
}

section.welove {
	background: url('../images/mechaniker.png') center top no-repeat; 
	background-size: 100% auto;
	padding-top: 900px;
}


h2  {font-weight: 900;}

footer.contact {
  background: #3370a4;
padding: 3.5rem 30px;
}


.contact p, .contact h2 {color: #fff; padding-bottom: 3.5rem;}

#map {
    width: 100%;
    height: 700px;
	 background: #fff;
}



label {
    display: block;
    font-weight: bold;
    margin-top: 40px;
    font-size: 14px;
}

.submit {
    background: #444;
    padding: 10px 20px 30px 20px;
    margin-top: 20px;
    cursor: pointer;
    border: none;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.submit:hover {
    background: #b31800;
}

#capticha_img {
    padding-top: 0px;
    margin-bottom: 20px;
    max-width: 200px;
}

#capticha {
    max-width: 200px;
}

#form1 div { position: relative;}


#form1 .text-input, #form1 textarea {
    font: 1rem/1.75rem "Raleway", helvetica, sans-serif;
    border: none;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    padding: 0.875rem 10px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#form1 select {
    width: 100%;
    border: none;
    background: none;
}

.selectbox {
    width: 96%;
    padding: 1% 2%;
    background: #F0F0F0;
}

#form1 .text-input:hover, #form1 textarea:hover {
    border-color: #4a5254;
}

#form1 textarea {
    min-height: 100px;
    max-height: 350px;
    margin-top: 10px;
    resize: none;
}

#status_message_ok, #status_message_error {
    background: #DCEBD0;
    border: 1px solid #B2C0A2;
    display: none;
    height: auto;
    margin-bottom: 45px;
}

#status_message_ok strong, #status_message_error strong {
    font-size: 15px;
    display: inline-block;
    margin-bottom: 5px;
}

#status_message_ok span, #status_message_error span {
    display: block;
    font-size: 13px;
    padding: 15px;
}

label.error {
    font-size: 10px;
    margin: 0;
    font-style: italic;
    padding: 4px 12px;
    display: block;
    background: rgb(228, 19, 19);
    color: #fff;
    position: absolute; right: 0; bottom: 0;
}

input.error, textarea.error {
    border-color: rgb(228, 19, 19) !important;
}


span.info {
    font-size: 10px;
    color: #9E9E9E;
    display: inline-block;
    margin: 20px 0;
}

.sticky {
    z-index: 100;
    transition: all .5s ease;
}


.fixit .logo-nav {
    filter: brightness(5) grayscale(100%);
}

.fixit {
    position: fixed;
    bottom: auto;
    top: 0;
    background: rgba(51,112,164,.9);
}

.fixit a {color: #fff}

div.border {
    width: 500px;
    height: 5px;
    background: #3370a4;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 175px);
}

div.border.b2 {
    left: auto;
    right: 0%;
    transform: translate(-50%, 125px);
}

div.border.b3 {
    transform: translate(-50%, 235px);
}

.implink, .closelink {cursor: pointer;}

.imp {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    overflow: hidden;
    transition: all .7s ease;
    background: rgba(255,255,255,.9);
    padding: 0px 60px;
    z-index: 1000;
}

.imp.open {
    height: 100%;
    padding: 3.5rem 60px;
}

.impcontent {
    width: 50%;
    max-width: 700px;
    min-width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-top: 2px solid  #3370a4;
    border-bottom: 2px solid  #3370a4;
    padding: 1.75rem 30px;
}

.closelink {
    position: absolute;
    border: 2px solid  #3370a4;
    width: 30px;
    height: 30px;
    position: absolute;
    right: -15px;
    top: -15px;
    border-radius: 100%;
    background: #fff;
    transition: all .3s ease;
}

.closelink:hover {
    transform: rotate(90deg);
    background: #3370a4;
}

.closelink::before, .closelink::after {
    display: block;
    background-color:   #3370a4;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%) rotate(45deg);
    width: 20px;
    height: 4px;
}

.closelink::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.closelink:hover::before, .closelink:hover::after {background: #fff;}