/* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ /* Theme Name: Engel & Haehnel-Theme Theme URI: http://kp-z.de/wordpressthemes/eh/ Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH Author URI: http://www.kp-z.de/team.php Description: Template für Engel & Haehnel Version: 0.1 License: commercial */ /*@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600&display=swap');*/ /* raleway-300 - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; src: url('fonts/raleway-v14-latin-300.eot'); /* IE9 Compat Modes */ src: local('Raleway Light'), local('Raleway-Light'), url('fonts/raleway-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/raleway-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/raleway-v14-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/raleway-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/raleway-v14-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */ } /* raleway-regular - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: url('fonts/raleway-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Raleway'), local('Raleway-Regular'), url('fonts/raleway-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/raleway-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/raleway-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/raleway-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/raleway-v14-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */ } /* raleway-600 - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; src: url('fonts/raleway-v14-latin-600.eot'); /* IE9 Compat Modes */ src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url('fonts/raleway-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/raleway-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/raleway-v14-latin-600.woff') format('woff'), /* Modern Browsers */ url('fonts/raleway-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/raleway-v14-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */ } /* aladin-regular - latin */ html {padding: 0; margin:0; font-size: 16px; background: white; height: 100%;} body {padding: 0; margin:0;font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6em; overflow-x: hidden; color: #666;} h1,h2,h3,h4,h5 { font-weight: 600; color: #FF9820;} h1,h2 {font-size: 28px; line-height: 1.05; letter-spacing: 0.1em; margin-bottom: 50px;} h1 {text-align: center; text-transform: uppercase;} h4 {font-size: 20px; text-transform: uppercase;} h3 {font-size: 24px; font-weight: 300; line-height: 1.05;} h5 {text-transform: uppercase; color: #777; font-size: 1rem; margin-top: 35px; margin-bottom: 10px;} div > :not(div):first-child {margin-top: 0;} section {padding: 75px 0;} section.noPadding {padding: 0;} figure.wp-block-image {margin: 0; } /* ** Header */ #Topbar {height: 80px; position: relative; z-index: 2;} #Topbar > div {position: relative; width: 100%; height: 100%; background-color: white; padding-top: 20px; border-bottom: 1px solid #ddd;} #Topbar div.container {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #Topbar label {display: block; position: relative; padding-right: 50px; padding-top: 5px;} #Topbar label::after {content: url("img/menuOpen.png"); position: absolute; right:0; top:0} #MenuCheckbox {display: none;} #MenuCheckbox ~ div {-webkit-transform: translateY(-100vh);-ms-transform: translateY(-100vh);transform: translateY(-100vh); -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms;} #Topbar #MenuCheckbox:checked ~ label::after {content: url("img/menuClose.png");} #MenuCheckbox:checked ~ div {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0); } #Topbar nav > div {position: fixed; top:0; bottom: 0; left:0; right: 0; z-index: -1; background-color: white; background-image: url("img/mobile-bg-s.png"); background-size: cover; background-position: center; padding-top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} #Topbar nav div > ul {padding: 0; margin: 0; list-style: none; text-align: center;} #Topbar nav div > ul > li:not(:last-child){margin-bottom: 30px;} #Topbar nav div > ul > li > a {color: #777; text-decoration: none;} #Topbar nav div > ul > li.current_page_item > a {color: #FF9820;} #HeaderBild { overflow: hidden; position: relative;} #HeaderBild > img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 70vw;} #HeaderBild > .headline {position: absolute; left: 50%; top:70%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); padding: 10px 60px; background-color: rgba(255,255,255,0.70); border: 1px solid #aaa; text-align: center; } .headline div {font-size: 48px; color: #444;} #HeaderBild > div.slider {width: 100%; height: 90vh; height: calc(100vh - 80px); overflow: hidden;} #HeaderBild > div.slider > ul {width: 1000%; height: 100%; padding: 0; margin: 0; } #HeaderBild > div.slider > ul.transition {-webkit-transition-duration: 1500ms;-o-transition-duration: 1500ms;transition-duration: 1500ms;-webkit-transition-timing-function: cubic-bezier(0.690, 0.000, 0.420, 1.000); -o-transition-timing-function: cubic-bezier(0.690, 0.000, 0.420, 1.000);transition-timing-function: cubic-bezier(0.690, 0.000, 0.420, 1.000); } #HeaderBild > div.slider > ul > li {width: 10%; height: 100%; padding: 0; margin: 0; display: inline-block; background-position: center; background-size: cover; position: relative;} #HeaderBild > div.slider > ul > li > div {padding: 10px 40px; position: absolute; left: 50%; bottom: 5%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);color: #444; background-color: rgba(255,255,255,0.60); border: 1px solid #aaa; opacity: 0;} #HeaderBild > div.slider > ul > li > div h3 {color: #444; font-size: 32px; line-height: 1.1em; text-align: center; text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.7);} #HeaderText {position: absolute; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); max-width: 90%; min-width: 50%; min-height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #aaa; background-color: rgba(255,255,255,0.7); padding: 10px 40px; color: #444; } #HeaderText h3 {color:#444; text-align: center;} #HeaderText.sliding > * {opacity:0;} #HeaderText.invisible {-webkit-transition-duration:750ms;-o-transition-duration:750ms;transition-duration:750ms;} /* ** Footer */ footer {padding: 15px 0;background-color: #333; font-size: 18px;} footer div {text-align: center;} footer div.bottomLine {color: #666; font-size: 12px; line-height: 1.1em; margin-top: 15px;} footer div.bottomLine a {color: #666; -webkit-text-decoration-style: dotted; text-decoration-style: dotted;} footer nav ul {margin: 0; padding: 0; list-style: none;} footer nav ul li {display: inline-block; } footer nav ul > li:not(:last-child) { margin-right: 15px;} footer nav ul a {color: #aaa; text-decoration: underline; -webkit-text-decoration-style: dotted; text-decoration-style: dotted;} footer nav ul a:hover {color: #FF9820; text-decoration: underline; -webkit-text-decoration-style: dotted; text-decoration-style: dotted;} /* ** Lightbox */ #Lightbox {position: fixed; left: 0; right: 0; top:0; bottom: 0;z-index: 10;background-color: rgba(255,255,255,0.9); padding: 40px 50px;} #Lightbox > div.lightboxContent { width: 100%; height: 100%;} #Lightbox div.projekt { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #Lightbox div.projekt > div { width: 100%; max-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #Lightbox div.projekt div.image { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #Lightbox div.projekt div.image > img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; margin: 0 auto; border: 1px solid #ccc;} #Lightbox div.projekt div.externVideo { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #Lightbox div.projekt div.externVideo > iframe{ width: 100%; height: 100%; margin: 0 auto; } #Lightbox div.projekt div.video { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #Lightbox div.projekt div.video > video{ width: 100%; height: 100%; margin: 0 auto; } #Lightbox div.projekt div.pano2vr { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #Lightbox div.projekt div.pano2vr > iframe{ width: 100%; height: 100%; margin: 0 auto; border: 1px solid #ccc;} #Lightbox div.beschreibung {padding-top: 15px;} #Lightbox div.beschreibung h3 {margin: 0; font-size: 20px;} #Lightbox div.beschreibung .architektenName {font-size: 14px;} #Lightbox div.beschreibung > div:first-child {display: -webkit-box;display: -ms-flexbox;display: flex; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 1rem; line-height: 1.1em; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;} #Lightbox > div.lightboxClose {position: absolute; top: 5px; right: 20px; z-index: 16; cursor: pointer; padding-right: 25px; line-height: 1em; padding-top: 2px;} #Lightbox > div.lightboxClose::after {position: absolute; content: url("img/lightboxClose.png"); top:0; right: 0;} #Lightbox > div.lightboxLeft {position: absolute; top: 50%; left: 10px; z-index: 16; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} #Lightbox > div.lightboxRight {position: absolute; top: 50%; right: 10px; z-index: 16; cursor: pointer; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);} #Lightbox > div.lightboxLeft > img, #Lightbox > div.lightboxRight > img {width: 30px; height: 100px;} /* ** Slider Sonstiges */ div.slider h3 {margin:10px 0; padding:0;} /* ** LightboxSlider */ .lightboxSliderLink:hover div.row > div {background-color: #f0f0f0;} .lightboxSliderLink { cursor: pointer;} #LightboxSlider {position: fixed; top: 0px; left: 0; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.85); z-index: 3; padding: 40px 50px; display: none;} #LightboxSlider > div.lightboxSliderClose {position: absolute; top: 5px; right: 20px; z-index: 16; cursor: pointer; padding-right: 25px; line-height: 1em; padding-top: 2px;} #LightboxSlider > div.lightboxSliderClose::after {position: absolute; content: url("img/lightboxClose.png"); top:0; right: 0;} #LightboxSlider > div.lightboxSliderLeft {position: absolute; top: 50%; left: 10px; z-index: 16; cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} #LightboxSlider > div.lightboxSliderRight {position: absolute; top: 50%; right: 10px; z-index: 16; cursor: pointer; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);} #LightboxSlider > div.lightboxSliderLeft > img, #LightboxSlider > div.lightboxSliderRight > img {width: 30px; height: 100px;} #LightboxSlider > div.lightboxContent { width: 100%; height: 100%; } #LightboxSlider div.projekt { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #LightboxSlider div.projekt > div { width: 100%; max-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #LightboxSlider div.projekt div.image { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #LightboxSlider div.projekt div.image > img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; margin: 0 auto; border: 1px solid #ccc;} #LightboxSlider div.projekt div.externVideo { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #LightboxSlider div.projekt div.externVideo > iframe{ width: 100%; height: 100%; margin: 0 auto; } #LightboxSlider div.projekt div.video { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #LightboxSlider div.projekt div.video > video{ width: 100%; height: 100%; margin: 0 auto; } #LightboxSlider div.projekt div.pano2vr { height: 80vh; height: calc(100vh - 140px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #LightboxSlider div.projekt div.pano2vr > iframe{ width: 100%; height: 100%; margin: 0 auto; border: 1px solid #ccc;} #LightboxSlider div.beschreibung {padding-top: 15px;} #LightboxSlider div.beschreibung h3 {margin: 0; font-size: 20px;} #LightboxSlider div.beschreibung .architektenName {font-size: 14px;} #LightboxSlider div.beschreibung > div:first-child {display: -webkit-box;display: -ms-flexbox;display: flex; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 1rem; line-height: 1.1em; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;} /* ** PopUp */ #Popup {position: absolute; width:240px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 15px 15px 55px; top: 60%; left: -40px; -webkit-transform: translateY(-50%) rotate(-5deg); -ms-transform: translateY(-50%) rotate(-5deg); transform: translateY(-50%) rotate(-5deg); color: white; background-color: #FF9820; z-index: 0; max-width: 500px; border: 1px solid white; border-radius: 15px; -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3);} #Popup h2 {font-size: 22px; margin-top: 0;} #Popup p {margin-bottom: .3em;} #PopupImage {position: absolute; top:80px; left:0; width:50%; min-width: 250px;} #PopupImage img {width: 100%; height: auto;} /* ** Leistungen */ .leistung {text-align: center; margin-top: 70px;} .leistung figure {border: 3px solid #FF9820; border-radius: 50%; padding: 20px; width:120px; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 15px auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .leistung figure > img {width: 100%; height: auto; display: block; } /* ** bakground Picture */ .pictureBg {position: relative; margin-left: -15px; margin-right: -15px;} .pictureBg > div:last-child {width: 50%; margin-left: 50%; background-color: rgba(255,255,255,0.75); } .pictureBg > div:last-child > div {width: 570px; padding: 75px 0 75px 30px;} .bgPicture {height: 100%; width: 100%; position: absolute; z-index: -1;top:0; left:0; background-size: cover;} /* ** Cookie Banner */ #JhpCookieBanner {display: -webkit-box;display: -ms-flexbox;display: flex; padding: 15px; position: fixed; bottom: 0; left:0; width: 100%; background-color: #FF9820; color: white; -ms-flex-pack: distribute; justify-content: space-around; border-top: 3px solid white; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 20;} #JhpCookieBanner > div:first-child {margin-bottom: 15px;} #JhpCookieBanner .cookieButton {padding: 5px 15px; display: inline-block; background-color: white; color: #777; border-radius: 15px; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; cursor: pointer;} #JhpCookieBanner .cookieButton:hover {background-color: #ccc; color: #444;} /* ** Referenzen */ .jhpMasonryItem > img {width: 100%; height: auto; display: block; } .jhpMasonryItem img.typeOverlay {position: absolute; width: 50%; max-width: 300px; z-index: 1; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-filter: drop-shadow(1px 5px 5px #000); filter: drop-shadow(1px 5px 5px #000); opacity: 0.6;} .jhpMasonryItem .beschreibung {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center} .jhpMasonryItem .projektTyp {margin-left: 10px;} .jhpMasonryItem .projektName {line-height: 1.1em; } /* ** Kontaktformular */ .inputFeld {width:100%; padding: 1px; border-radius: 5px; border: 1px solid #FF9820; margin-bottom: 15px; position: relative; background-color: white;} .inputFeld label {position: absolute; top: 10px; left: 5px; font-size: 16px; line-height: 16px; color: #aaa; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms;} .inputFeld.pflichtangabe label::after {content:'*';} .inputFeld.filled label {top: 2px; font-size: 11px; line-height: 11px; } .inputFeld input {font-size: 16px; line-height: 16px;font-family: 'Raleway', sans-serif; padding: 15px 5px 1px 5px; border: none; outline: hidden; margin:0; width: 100%; color: #666;} .inputFeld textarea {width: 100%; font-display: 16px; height: 150px; padding: 15px 5px 1px 5px; border: none; outline: hidden; margin:0;} .checkbox {margin-bottom: 15px;} .checkbox input {display: none;} .checkbox label {position: relative; padding-left: 30px; } .checkbox label::before {content: url("img/checkBoxOff.png"); position: absolute;left:0; top: 3px;} .checkbox input:checked ~ label::before {content: url("img/checkBoxOn.png"); position: absolute;left:0; top: 3px;} input[type=submit] {display: inline-block; max-width: 300px; border: 1px solid #FF9820; text-align: center; padding: 10px 20px; border-radius: 5px; color: #FF9820; text-decoration: none; font-weight: 700; font-size:1.3rem; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; background-color: transparent; cursor: pointer;} input[type=submit]:hover {-webkit-transform: scale(1.02);-ms-transform: scale(1.02);transform: scale(1.02); background-color: #eee;} .inputFeld:where([class$="iled"]) {display: none;} .error {color:red;} .errorBox {background-color: red; color: white; padding: 15px; border-radius: 10px; font-weight: 700; margin-bottom: 45px;} .infoBox {background-color: #FF9820; color: white; padding: 15px; border-radius: 10px; font-weight: 700; margin-bottom: 45px;} .contactBar img {margin: 0 auto; display: block;} .contactBar h5 {margin: 10px 0 5px 0; font-size: 1rem; color: #FF9820; text-align: center;} .contactBar h5~div {margin: 0 0 50px 0; text-align: center;} .contactBar h5~div > a {color: #555555;} /* ** 404-Seite */ section.page404 { background-color: #ff9820; color: white; padding: 100px 20px 20px 20px; min-height: 100vh; min-height: calc(100vh - 121px); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} section.page404 h2 { color: white; text-align: center;margin-top: 50px;} section.page404 img { display: block; width: 100%; height: auto; max-width: 1000px;} section.page404 a.button { display: block; width: 150px; padding: 5px 15px; border-radius: 15px; background-color: white; border: 1px solid #ccc; text-align: center; text-decoration: none; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; color: #777; font-weight: 600;} section.page404 a.button:hover { background-color: #eee; -webkit-transform: translate(0,-4px); -ms-transform: translate(0,-4px); transform: translate(0,-4px); -webkit-box-shadow: 0px 6px 4px -2px rgba(0,0,0,0.3); box-shadow: 0px 6px 4px -2px rgba(0,0,0,0.3);} /* ** Sonstiges */ .button a {display: inline-block; padding: 10px 40px; border-radius: 25px; background-color: #FF9820; color:white; text-decoration: none;} .invisible {opacity: 0;} .abstandTop {margin-top: 30px;} .abstandTopSmall {margin-top: 15px;} .abstandBottom {margin-bottom: 30px;} .bgLightGrey { background-color: #eee;} div.leistungen h3 {margin-top: 15px} .wp-block-image img {height: auto;} @media (min-width: 576px) { } @media (min-width: 768px) { h1,h2 {font-size: 48px;} h3 {font-size: 26px;} div.projekte .column1 {display: none;} div.projekte .column2 {display: -webkit-box;display: -ms-flexbox;display: flex;} footer div.row > div.col-md-4:not(:last-child) {padding-bottom: 0;} #Topbar nav > div {background-image: url("img/mobile-bg-m.png"); } #Lightbox div.beschreibung > div:first-child {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;} #LightboxSlider div.beschreibung > div:first-child {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;} #Lightbox div.beschreibung h3, #LightboxSlider div.beschreibung h3 {font-size: 26px;} #Lightbox div.beschreibung .architektenName, #LightboxSlider div.beschreibung .architektenName {font-size: inherit;} #JhpCookieBanner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;} #JhpCookieBanner > div:first-child {margin: 0 30px 0 0;} #PopupImage { width:50%; min-width: unset;} } @media (min-width: 992px) { h3 {font-size: 32px;} h1, h2 {margin-bottom: 75px;} section {padding: 100px 0;} footer {padding: 8px 0;} footer div {text-align: right;} footer div.bottomLine {text-align: left; margin-top: 6px;} #HeaderBild {margin-top: 80px;} #HeaderBild > img { width: 100%; height: 90vh; height: calc(100vh - 80px);} #Topbar label {display: none;} #Topbar div.container > div img {-webkit-transition-duration: 1500ms;-o-transition-duration: 1500ms;transition-duration: 1500ms; } #MenuCheckbox ~ div {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);} #Topbar nav > div {position: static; background-image: none; display: block; padding-top:20px; z-index:1; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms;} #Topbar nav > div > ul > li {display: inline-block;} #Topbar nav > div > ul > li > a {color: #777; text-transform: uppercase; margin-left: 30px;letter-spacing: 0.1em; text-decoration:none; padding-bottom: 12px; border-bottom: 5px solid transparent; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms;} #Topbar nav > div > ul > li > a:hover {border-bottom-color: #FF9820;} #Topbar nav > div > ul > li:not(:last-child){margin-bottom: 0;} #Topbar {position: fixed; width: 100%; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; top:0;} #Topbar.smallBar {height: 30px;} #Topbar.smallBar > div {padding-top: 0px;} #Topbar.smallBar div.container > div img {height: 22px; width: auto; padding-top: 3px; } #Topbar.smallBar nav > div {padding-top: 3px;} #Topbar.smallBar nav > div > ul > li > a {padding-bottom: 0px; } #Lightbox div.beschreibung h3, #LightboxSlider div.beschreibung h3 {font-size: 32px;} section.page404 { min-height: calc(100vh - 41px); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} div.leistungen h3 {margin-top: 0} #Popup {top: 50%;} #PopupImage { width:40%;} } @media (min-width: 1200px) { #PopupImage { width:40%; max-width: 700px;} }