* {margin: 0; padding: 0; box-sizing: border-box; position: relative}
a {color: #000; text-decoration: none;}
a:hover {text-decoration: underline}
body {margin: 0; padding: 0; font-family: Arial; font-size: 12px}
header {height: 150px; width:100%; background: #eceded; position: fixed; top: 0; left: 0; text-align: center}
header:before {content: ''; width:100%; height: 30px; background: url(images/W.png) #fff; display: block; background-size: contain; }
header .logo {width: 240px; height: auto; padding: 15px}
header .wella {width: 90px; height: auto; position: absolute; top: 80px; left: 40px }
.fb {position: absolute; right: 40px; top: 53px; border: 1px solid #000; font-size: 20px !important; padding: 4px 10.1px; border-radius: 100%; transition: all 0.2s}
.fb:hover {transform: scale(1.3)}
.termin {position: absolute; right: 40px; top: 110px; font-size: 17px}
.termin a {font-weight: bold}
.close {position: absolute; right: 40px; top: -17px; border: 1px solid #000; font-size: 20px !important; padding: 5px 9px; border-radius: 100%; transition: all 0.2s; background: #fff}
.close:hover {transform: scale(1.3)}


main {width: 100%; height: calc( 100vh - 178px ); display: block; margin-top: 150px; overflow: hidden}
main img {width: 100%; height: auto; }
main img.W {height: 100%; width: auto; position: absolute; left: 0; top: 0; z-index: 1}

footer {text-align: center; background: rgba(255,255,255,0.6); width: 100%; padding-top: 16px;  position: fixed; bottom: 0; left: 0;}
footer p {max-width: 90%; margin: 0 auto}
footer p:nth-child(2){font-weight: bold; font-size: 100%; padding-top: 8px;}
footer .imp.open p {max-width: 100%; margin: 0 auto; padding-bottom: 0.6em; }
footer .imp.open {line-height: 1.5}
.footer {margin-top: 15px; background: #4b4b4d; color: #fff; padding: 8px 0; font-size: 80%; height: 28px}
.footer a{color: #fff}
.imp {height: 0; transition: all 0.2s; background: #fff; color: #000; text-align: left; overflow: hidden }
.imp.open {padding: 20px 0; height: auto; overflow: visible }
.content {margin: 0 auto; max-width: 96%; display:flex;justify-content: space-between }
.content .col2 {padding-left: 30px; width: 32%; max-height: 60vh; overflow: auto }
.content .col2:last-child {width: 64%; padding-left: 0; text-align: justify}
.custom-navigation { display: table ;position: absolute;top: calc( 50% - 41px);z-index: 9999; width: 100%}
.custom-navigation > * { display: table-cell; font-size: 1.5em; color: #fff; padding: 0 20px; transition: all 0.2s }
.custom-navigation a span {transition: all 0.2s}
.custom-navigation a:hover span {transform: scale(1.3); }
.flex-next {text-align: right}
.flex-prev {text-align: left}
.flex-next span {width: 26px; height: 46px; display: block; background: url(images/next.png); background-size: 100%; float: right}
.flex-prev span {width: 26px; height: 46px; display: block; background: url(images/prev.png); background-size: 100%}

.slides li:nth-child(3) img {margin-top: -15%}
.slides li:nth-child(4) img {margin-top: -7.5%}

.flex-control-nav {display: none !important}
#Imp {position: absolute; top: -28px}
.preisliste {position: absolute; display: inline-block; padding: 8px 20px; color: #fff; bottom: 130px; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-size: 120%; border: 1px solid #000; transition: all 0.2s; background: #eceded; color: #000}
.preisliste:hover {text-decoration: none; background: #000; color: #fff; border-color: #fff}

@media only screen and (max-width: 600px) {
    
    header {position: relative; }
    header .wella {width: 10%; height: auto;  }
    main {height: auto; display: block; margin-top: 0px; }
    main .W {display: none;}
	footer {position: relative}
	.slides li:nth-child(3) img {margin-top: 0}
	.slides li:nth-child(4) img {margin-top: 0}
	.preisliste { bottom: 0px; position: relative }
    .content {flex-wrap: wrap}
    .content .col2 {width: 100% !important; padding: 0 5%; max-height: 100%; margin-bottom: 20px}
    .content .col2 p {width: 100% }
}

@media only screen and (max-width: 800px) {
    
    .termin {top: 5px; right: 20px;  }
    
}
@media only screen and (max-width: 400px) {
    
    .termin {font-size: 100%  }
    header .wella {display: none;  }
    .fb {right: 20px; top: 43px }
    .termin {top: 8px  }
    .close {top: 15px; right: 23px}
    
}