html {overflow-x: hidden; padding: 0; margin: 0; height: 100%;}
body {overflow: hidden; padding: 0; padding-bottom: 0px; margin: 0; height: auto; min-height: 100%; background-color: #fff;}
.clear {clear: both;}
* {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
@font-face {
font-family: 'MetaPlusBold';
src: url('../fonts/MetaPlusBoldRoman.woff2') format('woff2'),
url('../fonts/MetaPlusBoldRoman.woff') format('woff');
font-weight: bold;
font-style: normal;
}
/* Preloader */
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/********** FONTS ************/
@font-face {
font-family: 'metaplusbookroman';
src: url('../fonts/meta-webfont.eot');
src: url('../fonts/meta-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meta-webfont.woff2') format('woff2'),
url('../fonts/meta-webfont.woff') format('woff'),
url('../fonts/meta-webfont.ttf') format('truetype'),
url('../fonts/meta-webfont.svg#metaplusbookroman') format('svg');
font-weight: normal;
font-style: normal;
}
/************** ANIMATIONS ***************/
@keyframes introani1 {
0% {opacity: 0;}
25% {opacity: 1;}
50% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes introani1 {
0% {opacity: 0;}
15% {opacity: 0;}
40% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}
/**************** TYPO *********************/
/*p {font-family: 'Raleway', sans-serif; line-height: 26px; color: #ddd; max-width: 90%; max-width: 600px; position: relative; margin: 0 auto; font-size: 16px; letter-spacing: 1px; font-weight: 200;} */
p {font-family: 'Roboto', sans-serif; line-height: 34px; color: #aaa; position: relative; margin: 0 auto; font-size: 16px; letter-spacing: 1px; font-weight: 300; word-wrap: break-word; }
p.eingezogen {padding-left: 60px;}
p.eingezogen::before {position: absolute; top: 15px; left: 0px; width: 40px; height: 2px; background-color: #333; content:"";}
a {font-family: 'Roboto', sans-serif;}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}
a:active {text-decoration: none;}
a:focus {text-decoration: none;}
li {}
h1 {font-family: 'MetaPlusBold', sans-serif; text-transform: none; font-size: 4vmax; color: #333; letter-spacing: 0px; font-weight: 700; line-height: 3.5vmax; margin-bottom: 40px;}
h2 {font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 1.5vmax; color: #999; letter-spacing: 0px; font-weight: 500; line-height: 1.5vmax; margin-bottom: 40px;}
h3 {font-family: 'MetaPlusBold', sans-serif; text-transform: none; font-size: 1.9vmax; color: #333; letter-spacing: 0px; font-weight: 600; line-height: 1.9vmax; margin-bottom: 20px;}
h4 {font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 1.5vmax; color: #333; letter-spacing: 0px; font-weight: 600; line-height: 1.5vmax; margin-bottom: 30px;}
h5 {font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 1.9vmax; color: #333; letter-spacing: 0px; font-weight: 600; line-height: 2.5vmax; margin-bottom: 30px;}
h6 {font-family: 'Playfair Display', serif; font-size: 20px; color: #333; text-transform: none; font-style: italic; letter-spacing: 1px;}
h5 span {font-weight: 300;}
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.center img {position: relative; margin: 0 auto;}
.justify {text-align: justify;}
.padded {padding-top: 60px; padding-bottom: 60px;}
.padded20 {padding-top: 20px; padding-bottom: 20px;}
.padded0 {padding: 0; margin: 0;}
.sidepadded {}
.hidden {opacity: 0;}
.visible {opacity: 1;}
.bar {position: relative; margin-top: 40px; margin-bottom: 40px; width: 100px; height: 2px; background-color: #333;}
.barthin {position: relative; margin: 30px auto; width: 50px; height: 1px;}
.barthin2 {position: relative; margin: 50px auto; width: 50px; height: 1px;}
.red {background-color: #ce2831;}
.bar.green {background-color: #6b9725;}
.green {color: #6b9725;}
.white {background-color: #fff;}
.black {background-color: #000;}
.wow {visibility: hidden;}
.rowwrap1 {position: relative; margin: 0 auto; max-width: 1200px; }
.borderleft {border-left: 1px solid #333;}
.borderbottom {border-bottom: 1px solid #333;}
.borderright {border-right: 1px solid #333;}
.bordertop {border-top: 1px solid #333;}
/*******************************************************************************************
********************************************************************************************
CONTENT
********************************************************************************************
*******************************************************************************************/
#topbar {
position: fixed; width: 100%; height: 300px; top: 0; left: 0; z-index: 5;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(248,248,248,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#00f8f8f8',GradientType=0 ); /* IE6-9 */
}
#topnav-container {position: relative; margin: 0 auto; width: 100%; height: auto;}
#topnav {position: relative; width: 90%; left: 6%; height: auto; }
#topnav ul {list-style-type: none; margin-top: 16px; padding: 0; }
#topnav ul li {display: inline-block; font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 16px; font-weight: 600; color: #333; letter-spacing: 1px; width: 19%;
text-align: center;}
#topnav ul li:last-of-type {}
#topnav ul li:hover {color: #e95a0c;}
#bottombar {
position: fixed; width: 100%; height: 50px; background-color: #fff; bottom: 0; left: 0; z-index: 5;
}
#bottomcopyright {position: absolute; width: auto; height: 40px; top: 5px; left: 50px; padding-top: 7px;}
#bottomcopyright p {font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #333; letter-spacing: 1px; text-transform: uppercase;}
#bottomcontact {position: relative; margin: 0 auto; width: 50%; height: 40px; top: 5px; padding-top: 7px; text-align: center;}
#bottomcontact p {font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #333; letter-spacing: 1px; text-transform: uppercase;}
#bottomlinks {position: absolute; width: auto; height: auto; top: 5px; right: 5px; }
#bottomlinks ul {list-style-type: none; margin-top: 9px;}
#bottomlinks ul li {display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #333;
margin-left: 45px; margin-right: 45px; letter-spacing: 1px; text-transform: uppercase;}
/************************* UNTERSEITEN ******************************/
.sheet0 {position: relative; width: 100%; height: 100vh; background: url(../img/teaser2.jpg) center center no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover
-webkit-background-size: cover;}
.sheet1 {position: relative; width: 100%; height: auto; padding-top: 100px; padding-bottom: 180px;}
.sheet2 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 120px; margin-bottom: 80px;}
.sheet3 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 120px; margin-bottom: 80px;}
.sheet4 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 20px;}
.sheet5 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 40px; background-color: #e95a0c;}
.startsheet {padding-top: 140px;}
.impressumsheet {position: relative; width: 100%; height: auto; background-color: #e95a0c; padding-top: 220px; padding-bottom: 80px;}
.impressumsheet p, .impressumsheet h2, .impressumsheet h1 {color: #fff;}
.starsheet {position: relative; width: 100%; height: auto; padding: 0; margin: 0;}
.trennsheet {position: relative; width: 100%; height: auto; margin-top: 40px; margin-bottom: 50px;}
.trennsheet .orangebar {position: relative; width: 100%; height: 4px; background-color: #e95a0c; top: 80px;}
.trennsheet .trenntypo {position: relative; width: 35%; background-color: #fff; margin: 0 auto; margin-top: -50px; text-align: center; padding: 10px;}
.squarebox {position: relative; background-color: #fff; padding: 10px; border-right: 1px solid #eee;}
.squarebox:last-of-type {border-right: none;}
.circle {position: relative; width: 100%; padding-bottom: 100%; border-radius: 50%; background-color: #f8f8f8; margin-bottom: 40px;}
.square {position: relative; width: 80%; padding-bottom: 80%; background-color: #f8f8f8; margin: 0 auto; margin-bottom: 40px;}
.card {position: relative; width: 100%; height: 300px; margin-bottom: 20px;}
.card.illu {background-color: #f8f8f8;}
#card02 {background: url(../img/karten/technisch.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card03 {background: url(../img/karten/lustig.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card06 {background: url(../img/karten/cool2.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card07 {background: url(../img/karten/stylish2.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card08 {background: url(../img/karten/sexy.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card09 {background: url(../img/karten/clean.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card04 {background: url(../img/karten/illustrativ.jpg) top center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card10 {background: url(../img/karten/emotional.jpg) top center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card11 {background: url(../img/karten/produktverliebt.jpg) bottom center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card13 {background: url(../img/karten/dissonant.jpg) bottom left no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card14 {background: url(../img/karten/soft.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#card15 {background: url(../img/karten/analogie.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#square01 {background: url(../img/karten/cd.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#square02 {background: url(../img/karten/logo.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#square03 {background: url(../img/karten/farbe.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#square04 {background: url(../img/karten/typo.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#circle01 {background: url(../img/karten/wienern.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#circle02 {background: url(../img/karten/programm.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
#circle03 {background: url(../img/karten/putzen.jpg) center center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
margin-top: 20%;}
p.footerp {position: relative; font-size: 12px; line-height: 14px; color: #fff; margin: 0 auto; margin-top: 60px; margin-bottom: 20px; max-width: 90%; }
#bottomadress {position: relative; width: 100%; height: auto; margin-top: 40px; margin-bottom: 40px;}
#bottomadress #bottomlogo {position: relative; float: left; width: 30%; height: auto; }
#bottomadress #bottomtext {position: relative; float: left; width: 69%; height: auto; text-align: left; padding-top: 10px;}
#bottomadress #bottomtext h5 {margin-top: 30px; font-size: 1.4vmax; line-height: 1.8vmax;}
#teasertext {position: relative; width: 100%; margin: 0 auto; height: auto; margin-top: 30vh; left: 0;}
#teasertext h1 {position: relative; color: #fff; background-color: #e95a0c; padding: 10px 20px; text-align: left; display: inline-block; margin-bottom: 0px; font-size: 6vmax; line-height: 6vmax; margin: 0 auto;}
#teasertext h3 {position: relative; color: #e95a0c; background-color: #fff; padding: 10px 20px; text-align: left; display: inline-block; margin: 0 auto; margin-top: 5px;}
a.teaserlink {position: relative; width: auto; font-family: 'Barlow Condensed', sans-serif; text-transform: none; font-size: 26px; color: #fff; padding: 10px 40px 10px 20px; margin: 0 auto; margin-top: 20px;
letter-spacing: 0px; font-weight: 500; line-height: 20px; height: auto; display: inline-block; background-color: #e95a0c;}
a.teaserlink:hover {background-color: #dd4a00;}
a.bottomlink {font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 26px; color: #fff; letter-spacing: 1px; font-weight: 700; line-height: 26px;
position: relative; margin: 0 auto; border: 2px solid #fff; border-radius: 10px; padding: 10px 40px; background-color: none; display: inline-block;}
a.bottomlink:hover {background-color: #fff; color: #e95a0c;}
/************************* FLEXKARTEN ********************************/
/*************** NAVI TOGGLE *****************/
#miniheader-button {position: fixed; z-index: 25; width: 50px; height: 50px; background: url(../img/miniheader1.svg) center center no-repeat; top: 40px; right: 40px;
cursor: pointer; display: none; /*border: 2px solid #ff003d; border-radius: 0%;*/}
#miniheader-button.open {background: url(../img/miniheader2.png) center center no-repeat; /*border: 2px solid #fff;*/}
#miniheader {position: fixed; max-width: 100%; width: 400px; height: 100%; background-color: #242240; z-index: 20; padding: 20px; opacity: 0; z-index: 0; left: -100%; transition-duration: 0.7s;}
#miniheader-button.open + #miniheader {opacity: 1; cursor-events: auto; z-index: 20; left: 0;}
#miniheader-button.open + #miniheader #miniheader-bg {background-color: #ff003d; opacity: 0.9; cursor-events: auto; z-index: 20;}
#miniheader #ul-container {position: relative; top: 6%; width: 80%; height: auto; margin: 0 auto; }
#miniheader ul {list-style-type: none; position: relative; height: 80%; top: 4%; margin: 0 auto; z-index: 21; text-align: center; padding-left: 0 !important; -webkit-padding-start: 0px; }
#miniheader ul a { display: block;}
#miniheader ul a li {font-family: 'Playfair Display', serif; font-size: 3vh; font-weight: 500; letter-spacing: 3px; font-style: italic; color: #fff; padding: 0px 0px; z-index: 22;
transform: translateY(-40px); left: -400px; opacity: 0; transition: all 0.7s; transition-delay: 0s; line-height: 3vh; margin-bottom: 2vh; padding-bottom: 2vh;
border-bottom: 1px solid #fff;}
#miniheader ul a li:nth-of-type(5) {border-bottom: none;}
#miniheader-button.open + #miniheader ul li {transform: translateY(0px); opacity: 1;}
#miniheader ul li span {font-size: 12px; font-weight: 300;}
#miniheader ul a:hover {text-decoration: none !important;}
#miniheader ul a:hover {}
#miniheader ul a:hover li {}
#miniheader #miniheader-logo-container {position: absolute; left: 10%; bottom: 8%; width: 80%; height: auto;}
#miniheader #miniheader-logo-container img {position: relative; margin: 0 auto; max-width: 180px;}
#miniheader #miniheader-logo-container p {text-align: center; color: #fff; font-size: 1.1vh; line-height: 2vh; margin-top: 0; top: 2vh;}
#miniheader #miniheader-logo-container p a {color: #fff; font-weight: 700;}
a#impressumlink {position: relative; padding: 6px 20px; border: 1px solid #fff; color: #fff; text-transform: uppercase; top: 5px; letter-spacing: 1px; font-family: 'Lato', sans-serif; border-radius: 3px; display: inline-block;}
a#impressumlink:hover {background-color: #fff; color: #ff003d !important; padding: 6px 20px; letter-spacing: 1px; border: 1px solid #fff;}
a#facebooklink {font-size: 36px; position: relative; top: 14px; margin-left: 20px;}
/********************************** > 1200px *****************************/
@media screen and (max-width: 991px) {
.trennsheet {position: relative; width: 100%; height: auto; margin-top: 40px; margin-bottom: 50px;}
.trennsheet .orangebar {position: relative; width: 100%; height: 4px; background-color: #e95a0c; top: 80px;}
.trennsheet .trenntypo {position: relative; width: 80%; background-color: #fff; margin: 0 auto; margin-top: -50px; text-align: center; padding: 10px;}
#topbar {
position: fixed; width: 100%; height: 300px; top: 0; left: 0; z-index: 5;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(248,248,248,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#00f8f8f8',GradientType=0 ); /* IE6-9 */
}
#topnav-container {position: relative; margin: 0 auto; width: 90%; height: auto; padding-left: 3%;}
#topnav {position: relative; width: 100%; height: auto; }
.center-sm {text-align: center; padding-left: 10%; padding-right: 10%;}
.sheet1 {padding-top: 160px;}
p {font-family: 'Roboto', sans-serif; line-height: 28px; color: #aaa; position: relative; margin: 0 auto; font-size: 15px; letter-spacing: 1px; font-weight: 300; }
h1 {font-size: 48px; line-height: 48px;}
h2 {font-size: 26px; line-height: 26px;}
h3 {font-size: 32px; line-height: 32px;}
.square {position: relative; width: 60%; padding-bottom: 60%; margin: 0 auto;}
#square03 {margin-top: 20px!important;}
#square04 {margin-top: 20px!important;}
.squarebox:nth-of-type(1) {padding-bottom: 20px;}
.squarebox:nth-of-type(2) {padding-bottom: 20px;}
.squarebox:nth-of-type(3) {border-top: 1px solid #eee;}
.squarebox:last-of-type {border-top: 1px solid #eee;}
#bottomadress #bottomtext h5 {font-size: 4vmax; line-height: 5vmax;}
p.explainp {font-size: 13px; line-height: 20px;}
}
/******************************************************/
@media screen and (max-width: 800px) {
.wow{
animation-name: none !important;
-webkit-animation-name: none !important;
-moz-animation-name: none !important;
-o-animation-name: none !important;
visibility: visible !important;
}
}
/******************************************************/
@media screen and (max-width: 600px) {
.disabled {opacity: 0; pointer-events: none;}
#topnav ul li {font-size: 13px;}
.impressumsheet p {font-size: 13px; line-height: 18px; padding-left: 20px; padding-right: 20px; word-wrap: break-word; word-break: break-all;}
.impressumsheet h1 {font-size: px; line-height: px; padding-left: 20px; padding-right: 20px; word-wrap: break-word; word-break: break-all;}
.impressumsheet h2 {font-size: 22px; line-height: 26px; padding-left: 20px; padding-right: 20px; word-wrap: break-word; word-break: break-all;}
.impressumsheet {padding-top: 120px;}
}
/************************ MOBILE FIX *************************/
#mobileoverlay {position: fixed; top: 0; left: 0; width: 100%; height: 120vh; z-index: 25; background-color: #f05c24; display: none; }
#mobileoverlay .outer {position: relative; left: 0; top: 0; width: 100%; height: 100vh;
background: url(../img/mobileoverlay.png) center center no-repeat;
background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;}
#mobileoverlay .inner {position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center;}
#mobileoverlay .inner .text {align-self: center; text-align: center; padding-left: 20%; padding-right: 20%;}
#mobileoverlay .inner .text p {color: #fff;}
#mobileoverlay .inner .text h2 {color: #fff;}
#mobileoverlay .inner .text .bar {position: relative; margin: 20px auto;}
@media screen and (max-width: 600px) {
#mobileoverlay {display: flex;}
}
/************************ IPAD *************************/
@media only screen and (min-device-width : 200px) and (max-device-width : 1024px) {
body.longbody{
background: none !important;
}
.longbody .wrap_bg{
background-image: url(../img/bg.jpg) !important;
position: fixed;
top: 0;
right: 0;
left: 0;
height: 1024px;
background-position: 50% 0;
background-repeat: no-repeat;
z-index: -1;
}
#miniheader #miniheader-logo-container p {text-align: center; color: #fff; font-size: 10px; line-height: 15px; margin-top: 0; top: 20px;
#miniheader ul {list-style-type: none; position: relative; height: 80%; top: 4%; margin: 0 auto; z-index: 21; text-align: center; padding-left: 0 !important; -webkit-padding-start: 0px; }
#miniheader ul a { display: block;}
#miniheader ul a li {font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff; padding:5px 0px; z-index: 22;
transform: translateY(-40px); left: -400px; opacity: 0; transition: all 0.7s; transition-delay: 0s; line-height: 0px; /*margin-bottom: 5px !important;*/}
}