/*************************/
/* --- HTML-Elements --- */
/*************************/
/* --- Webfonts (für alle Browser ausser IE) ---*/
@font-face {font-family:"Unit-LightTF"; src: url('Unit-Light-TF.ttf') format('truetype');}
@font-face {font-family:"Unit-RegularTF"; src: url('Unit-Regular-TF.ttf') format('truetype');}
@font-face {font-family:"Unit-MediumTF"; src: url('Unit-Medium-TF.ttf') format('truetype');}
@font-face {font-family:"Unit-BoldTF"; src: url('Unit-Bold-TF.ttf') format('truetype');}
html, body {margin:0; padding:0; height:100%; font-family:Unit-RegularTF, Helvetiva, Arial, sans-serif; color:#FFFFFF;}
.adBackground {background-color:#000000; box-sizing:border-box; height:90px; overflow:hidden;}
.outer__block {position:absolute; background-color:#000000; width:100%;}
.clear:after {display:block; content:""; clear:both;}
p {margin:0; padding:0;}
a:link,
a:visited,
a:hover,
a:active {color:#FFFFFF; text-decoration:none;}
/* --- [Panel 1][Panel 2][Panel 3] Block 1 (Text) & Block 3 (Logo) --- */
.block__one {width:86%; height:90px; float:left; box-sizing:border-box; padding-left:4%;} /* Block 1 (Text) */
.block__one p {font-size:32px; line-height:120%; display:inline;}
.block__one br {display:none;} /* AUSgeschaltete Zeilenschaltung: 'first', 'second' */
.block__one > img {display:block; height:90px; width:auto; margin:0 9px 0 0; padding:0; float:right;}
.block__one .text-div {float:left; height:90px; padding-top:22px;} /* 1 Zeile (font-size 32px) */
.block__one .img-div {float:right; height:90px;}
.block__one .img-div img {display:block; height:90px; width:auto; padding:0;}
.block__one span.marker {color:#FFFFFF; display:none;} /* Marker: remove display:none; for Debug */
.block__three {width:13%; float:left; padding:8px 0 8px 0;} /* Block 3 (Logo) */
.block__three img {width:100%; height:auto; min-height:1px;}
.block__threeInner {box-sizing:border-box; padding:0 8% 0 8%; height:74px; max-height:74px; display:flex; flex-direction:column; justify-content:center;}
@media screen and (max-width: 1500px) {
.block__one {} /* Block 1 (Text) */
.block__one p {font-size:24px; line-height:120%;}
.block__one br.first {} /* AUSgeschaltete Zeilenschaltung: 'first' */
.block__one br.second {} /* AUSgeschaltete Zeilenschaltung: 'second' */
.block__one .text-div {padding-top:28px;} /* 1 Zeile (font-size 24px) */
.block__one .img-div {}
.block__one span.marker {color:#FF0000;}
.block__three {} /* Block 3 (Logo) */
}
@media screen and (max-width: 1400px) {
.block__one {} /* Block 1 (Text) */
.block__one p {}
.block__one br.first {} /* AUSgeschaltete Zeilenschaltung: 'first' */
.block__one br.second {} /* AUSgeschaltete Zeilenschaltung: 'second' */
.block__one .text-div {} /* 1 Zeile (font-size 24px) */
.block__one .img-div {}
.block__one span.marker {color:#FFFF00;}
.block__three {} /* Block 3 (Logo) */
}
@media screen and (max-width: 1200px) {
.block__one {width:82%;} /* Block 1 (Text)*/
.block__one p {}
.block__one br.first {display:block;} /* EINgeschaltete Zeilenschaltung: 'first' */
.block__one br.second {} /* AUSgeschaltete Zeilenschaltung: 'second' */
.block__one .text-div {padding-top:14px;} /* 2 Zeilen (font-size 24px) */
.block__one .img-div {}
.block__one span.marker {color:#00FF00;}
.block__three {width:18%;} /* Block 3 (Logo) */
}
@media screen and (max-width: 700px) {
.block__one {width:80%;}
.block__one p {font-size:16px; line-height:100%;}
.block__one br.first {display:none;} /* AUSgeschaltete Zeilenschaltung: 'first' */
.block__one br.second {display:block;} /* EINgeschaltete Zeilenschaltung: 'second' */
.block__one .text-div {padding-top:8px;} /* 3 Zeilen (font-size 16px) */
.block__one .img-div {}
.block__one span.marker {color:#00FFFF;}
.block__three {width:20%;} /* Logo-Bereich */
}
@media screen and (max-width: 400px) {
.block__one {width:96%;}
.block__one p {}
.block__one br.first {} /* AUSgeschaltete Zeilenschaltung: 'first' */
.block__one br.second {} /* EINgeschaltete Zeilenschaltung: 'second' */
.block__one .text-div {} /* 3 Zeilen (font-size 16px) */
.block__one .img-div {}
.block__one span.marker {color:#0000FF;}
.block__three {display:none;} /* Block 3 (Logo) */
}
@media screen and (max-width: 300px) {
.block__one {}
.block__one p {font-size:12px; line-height:100%;}
.block__one br.first {} /* AUSgeschaltete Zeilenschaltung: 'first' */
.block__one br.second {} /* EINgeschaltete Zeilenschaltung: 'second' */
.block__one .text-div {} /* 3 Zeilen (font-size 12px) */
.block__one .img-div {display:none;}
.block__one span.marker {color:#FF00FF;}
.block__three {} /* Block 3 (Logo) */
}
/* --- [Panel 1] Block 1 (Bilder) --- */
.panel__one {}
.panel__one img.three {display:block;} /* EINgeschaltet Bild 3 */
.panel__one img.two {display:block;} /* EINgeschaltet Bild 2 */
.panel__one img.one {display:block;} /* EINgeschaltet Bild 1 */
@media screen and (max-width: 800px) {
.panel__one img.three {display:none;} /* AUSgeschaltet Bild 3 */
.panel__one img.two {} /* EINgeschaltet Bild 2 */
.panel__one img.one {} /* EINgeschaltet Bild 1 */
}
@media screen and (max-width: 500px) {
.panel__one img.three {} /* AUSgeschaltet Bild 3 */
.panel__one img.two {display:none;} /* AUSgeschaltet Bild 2 */
.panel__one img.one {} /* EINgeschaltet Bild 1 */
}
/* --- [Panel 2] Block 1 (Bilder) --- */
.panel__two {}
.panel__two img.three {display:block;} /* EINgeschaltet Bild 3 */
.panel__two img.two {display:block;} /* EINgeschaltet Bild 2 */
.panel__two img.one {display:block;} /* EINgeschaltet Bild 1 */
@media screen and (max-width: 800px) {
.panel__two img.three {display:none;} /* AUSgeschaltet Bild 3 */
.panel__two img.two {} /* EINgeschaltet Bild 2 */
.panel__two img.one {} /* EINgeschaltet Bild 1 */
}
@media screen and (max-width: 500px) {
.panel__two img.three {} /* AUSgeschaltet Bild 3 */
.panel__two img.two {display:none;} /* AUSgeschaltet Bild 2 */
.panel__two img.one {} /* EINgeschaltet Bild 1 */
}
/* --- [Panel 3] Block 1 (Bilder) --- */
.panel__three {}
.panel__three img.three {display:block;} /* EINgeschaltet Bild 3 */
.panel__three img.two {display:block;} /* EINgeschaltet Bild 2 */
.panel__three img.one {display:block;} /* EINgeschaltet Bild 1 */
@media screen and (max-width: 800px) {
.panel__three img.three {display:none;} /* AUSgeschaltet Bild 3 */
.panel__three img.two {} /* EINgeschaltet Bild 2 */
.panel__three img.one {} /* EINgeschaltet Bild 1 */
}
@media screen and (max-width: 500px) {
.panel__three img.three {} /* AUSgeschaltet Bild 3 */
.panel__three img.two {display:none;} /* AUSgeschaltet Bild 2 */
.panel__three img.one {} /* EINgeschaltet Bild 1 */
}
/**********************/
/* --- Javascript --- */
/**********************/
.show {opacity:1;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s; }
.hide {opacity:0;
/*display:none !important;*/
-webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeout 1s; /* Firefox < 16 */
-ms-animation: fadeout 1s; /* Internet Explorer */
-o-animation: fadeout 1s; /* Opera < 12.1 */
animation: fadeout 1s; }
.panel__one {z-index:1000;}
.panel__two {z-index:100;}
.panel__three {z-index:10;}
/***********/
/* FADE-IN */
/***********/
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */
/************/
/* FADE-OUT */
/************/
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@-moz-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } /* Firefox < 16 */
@-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } /* Safari, Chrome and Opera > 12.1 */
@-ms-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } /* Internet Explorer */
@-o-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } /* Opera < 12.1 */