/*
Theme Name:         Brackhagen Archtitekten 
Template:           kpzTheme
Author:             Jan Pferdmenges, KP&Z Werbeagentur GmbH, Münster
Authors URI:        https://www.kp-z.de
Version:            0.1
*/




/*
**            F A R B E N
**            ===========
**
**            cyan:         #7fc9e6
**            hellcyan:     #d7eef7
**            rot:          #c33d14
**            Schriftfarbe: #587079
**
*/


// @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700');

html, body {padding: 0; margin: 0; min-height: 100%;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 16px;font-weight: 400; color: #587079; background-color: #fff;}
header {color: white; display: flex; justify-content: space-between; padding: 10px; background-color: #7fc9e6;}
section.stdTemplate {min-height: 100%; min-height: calc(100vh - 78px); box-sizing: border-box;}
section.kontaktTemplate {min-height: 100%; min-height: calc(100vh - 35px); box-sizing: border-box;}
strong {font-weight:700; }
a.hiddenLink {color: #587079; text-decoration: none;}

#Logo {font-size: 22px; font-weight: 600; align-self: center; display: block; color: white; text-decoration: none;}
#Logo span{font-size: 22px; font-weight: 300; color: #d7eef7;}

#MainMenu {text-align: right;}
#MainMenu #MenuCheckBox {display: none;}
#MainMenu label > img {display: block;}
#MainMenu > div {position: absolute; left:0; bottom:0; right:0; top:40px;background-color:#7fc9e6; display: none; align-items: center;justify-content: flex-end; z-index: 10;}
#MainMenu > div > ul {list-style: none; padding:0; margin:0;}
#MainMenu > div > ul > li {padding: 15px; position: relative;}
#MainMenu > div > ul > li a {font-weight: 600; color: #587079; text-decoration: none; font-size: 20px;}
#MainMenu > div > ul > li.current-menu-item::after {position: absolute; top:0; width: 8px; bottom: 0; right: 0; background-color: white; content: ' ';}
#MainMenu > div > ul > li a:hover { color: white;}
#MainMenu #MenuCheckBox ~ label img:last-child {display: none;}
#MainMenu #MenuCheckBox:checked ~ label img:first-child {display: none;}
#MainMenu #MenuCheckBox:checked ~ label img:last-child {display: block;}
#MainMenu #MenuCheckBox:checked ~ div {display: flex;}
#MainMenu label img {width: 20px; height: auto;}


div.headerBild { width: 100%; position: relative; }
div.headerBild > img {width: 100%; height: auto;}
div.headerBild > div {position:absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: none; cursor: pointer;}
div.headerBild > div > img {cursor: pointer;}
section.stdTemplate > div.pageContent {padding: 50px 10px; overflow: hidden;}
section.kontaktTemplate > div.pageContent {padding: 50px 10px 0 10px; overflow: hidden;}

ul.frontPage {list-style: none; padding: 0; margin:0;}
ul.frontPage >li {padding: 0; margin:0 0 3px 0; position: relative;}
ul.frontPage >li > a > div{color: white; position: absolute; bottom: 10px; left: 15px;}
ul.frontPage >li img {display: block;height: auto; width: 100%;}
ul.transition div.sliderTitle {position: absolute; bottom: 40px; left: 30px;z-index: 5; font-size: 24px; color: white; font-weight: 600;}

footer {text-align: right; padding: 10px 5px; font-size: 14px; background-color: #7fc9e6;}
footer ul {list-style: none; padding:0; margin:0;}
footer ul > li {padding: 0 5px; display: inline-block;}
footer ul > li  a {color: white; text-decoration: none;}


.projekte {display: flex; width: 100%; flex-wrap: wrap; position: relative; background-color: #7fc9e6;}
.projekte > a {flex: 0 0 100%; height: 67vw; overflow: hidden; position: relative;}
.projekte > a > img {width: 100%; height: 100%; object-fit: cover; }
.projekte > a > div {position: absolute; color: white; left: 0; bottom: 0;  width: 100%; padding: 15px; font-weight: 700; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);}

.projekt ul {margin:0; padding:0}
.projekt > ul > li {margin:0; padding:0; width: 100%;}
.projekt > ul.static > li {margin-bottom: 3px;}
.projekt > ul.static > li.portrait {max-height: 70vh;}
.projekt > ul.static > li > img {width: 100%; height: auto;}
.projekt > ul.static > li.portrait > img {width: 100%; height: auto; max-height: 70vh; object-fit: contain;}
div.jhpSlider {display:none; width: 100%; height: 100%; overflow: hidden;}
div.jhpSlider > ul {height: 100%; width:2000%; display: block; padding:0; margin:0;}
div.jhpSlider > ul > li {height: 100%; width:5%; display: inline-block; background-color: #7fc9e6;position: relative;}
div.jhpSlider > ul > li > div {width: 100%; height: 100%;}
div.jhpSlider > ul > li img {width: 100%; height: 100%; object-fit: cover;}
div.jhpSlider > ul > li img.portrait {width: 100%; height: 100%; object-fit: contain;}
/* div.jhpSlider > div {position:absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: none; cursor: pointer;} */
/* .projekt > ul.jhpSlider > li:not(:first-child) {display:none;}*/
.sliderControl {display: none; position: absolute; width: 25%; top: 0; height: 100%; transform: translateX(0);}
.sliderControl.controlLeft {left: 0;}
.sliderControl.controlRight {right: 0;}
.sliderControl > img {position: absolute; top: 50%; transform: translateY(-50%); transition-duration: 500ms; opacity: 0;}
.sliderControl:hover > img {opacity: 1;}
.sliderControl.controlLeft > img {left: 15px;}
.sliderControl.controlRight > img {right: 15px;}


.projekt > div.beschreibung > .showHideButton {display: none;}
.projekt > div.beschreibung > .showHideButton:hover {background-color: #d7eef7;}
.projekt > div.beschreibung {padding: 0 15px;}
div.readMoreInline > p {text-decoration: none; display: inline-block; padding: 5px 5px;  border: 1px solid #7fc9e6; border-radius: 5px; transition: background-color 300ms 300ms;}
div.readMoreInline > p:hover {background-color: #d7eef7;}
div.readMoreInline > p > span {transform: rotate(90deg); transition: 300ms 400ms; display: inline-block; width:20px; height: 20px; text-align: center; font-weight: 700;}
div.readMoreInline.open > p > span {transform: rotate(270deg);}

div.sliderLinks {position: absolute; left: 10px; bottom: 6px; z-index: 11; display: none;}
div.sliderLinks > span {padding: 2px 5px; cursor: pointer; display: inline-block; color: white; transition-duration: 300ms; border-bottom: 2px solid transparent;}
div.sliderLinks > span:hover {border-bottom: 2px solid white;}
div.sliderLinks > span.aktuellerSlider {color: #d7eef7; text-decoration: underline;}

.team {display: flex; flex-wrap: wrap; min-height: 100%;}
.teamMember {flex: 1 1 100%; height: 100vh; height: calc(100vh - 50px); position: relative; overflow: hidden;}
.teamMember > div:first-child > img { position: absolute; top: 0; left:0; height:100%; width: 100%; object-fit: cover; z-index: -1;}
.teamMember > div:first-child::after { content: ' ';position: absolute; bottom: 0; left:0; height:70px; width: 100%;background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); z-index:1;}
.teamMember > div:first-child > div {position: absolute; right: 15px; bottom: 15px; z-index:0; font-weight: 700; color: white; z-index: 2;}
.teamMember > div:first-child > div > span  {display: block; font-weight: 400; font-size: 0.85rem}
.teamMember > div:last-child {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.9); padding: 15px; overflow-y: auto; z-index:3;display: flex; flex-direction: column; justify-content: space-between; transition: transform 500ms; transform: translateY(-100%);} 
.teamMember.active > div:last-child {transform: translateY(0);} 
.teamMember > div:last-child > div:first-child h3 > span {font-size: 0.8em; display: block; font-weight: 400; margin-top: 5px;}
.teamMember > div:last-child > div:last-child {align-self: flex-end;}

div.kontaktPage {display: flex; flex-direction: column; margin-bottom: 50px; padding: 15px;}
div.kontaktPage #contactItems { margin-bottom: 80px; display: flex; flex-direction: column; align-content: flex-start;}
div.kontaktPage .contactIconBox { text-align: center; }
div.kontaktPage .contactIconBox:not(:first-child) { margin-top: 30px; }
div.kontaktPage .contactIconBox p{ margin: 0; }
form .inputFeld.activeInput {border-color: #7fc9e6;}
form .inputFeld input:invalid {
  box-shadow: none;
}
form .inputFeld input[type=email], form .inputFeld input[type=text], form .inputFeld textarea {color: #587079;}
form .inputFeld.activeInput input, form .inputFeld.activeInput textarea {color: #7fc9e6;}
form input[type="submit"] {font-family: Arial,Helvetica,sans-serif;}

.desktop {display: none;}
.tabelle  td {vertical-align: top;}
.tabelle tr > td:first-child {padding-right: 8px;}


/* #ScrollDown { animation-name: scroll-animation;  animation-duration: 5s; animation-iteration-count: infinite; } */


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    .teamMember {flex: 1 1 50%; height: 75vw;}
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .projekte > a {flex-basis: 50%; height: 33vw;}
    .teamMember {height: 75vw;}
	section.kontaktTemplate > div.pageContent, div.kontaktPage {margin-left: auto; margin-right: auto; width: 95vw;}
    div.kontaktPage #contactItems { flex-direction: row; flex-wrap: wrap;}
    div.kontaktPage #contactItems > div { flex-basis: 50%;}
    div.kontaktPage .contactIconBox { margin-top: 30px; }


    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    header.frontPage {position:absolute; width:100%; top:0; left:0; z-index: 10;}
    #MainMenu > div {position: static; display: block; }
    header.frontPage {background-color: transparent;}
    header.frontPage #MainMenu > div {background-color: transparent;}
    div.jhpSlider {height: 100vh;}
    div.jhpSlider > ul > li > div, div.jhpSlider > ul > li > a {position: relative; width: 100%; height: 100%;}
    div.jhpSlider > li > div::before {content: ' '; position: absolute; top:0; left:0; width:100%; height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50px, rgba(0,0,0,0.0) 80px);z-index: 10;}
    div.jhpSlider > li > div::after {content: ' '; position: absolute; bottom: 0; left:0; width:100%; height: 50px; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50px, rgba(0,0,0,0.0) 80px);z-index: 10;}
    ul.jhpSlider > li img {object-fit: cover; width: 100%; height: 100%;}
    #MainMenu > div > ul {padding-top: 3px;}
    #MainMenu > div > ul > li {padding: 0px; position: relative; display: inline-block;  margin: 0 10px;}
    #MainMenu > div > ul > li a {color: white; font-size: 16px;}
    #MainMenu > div > ul > li.current-menu-item::after {position: absolute; height: 3px; top:20px; width: 100%;}
    #MainMenu > div > ul > li a:hover { color: #d7eef7;}
    #MainMenu #MenuCheckBox ~ label img {display: none;}
    #MainMenu #MenuCheckBox:checked ~ label img:last-child {display: none;}
    footer.frontPage {position: relative; width: 100%; margin-top: -37px; left:0; z-index: 10; background-color: transparent;}
    
    div.headerBild::before {content: ' '; position: absolute; top:0; left:0; width:100%;height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50px, rgba(0,0,0,0.0) 80px ); z-index: 5;}
    div.headerBild { width: 100%; height: 100vh; }
    div.headerBild > img {width: 100%; height: 100%; object-fit: cover;}
    div.headerBild > div {display: block;}

    
    .projekte > a {flex-basis: 33.33%; height: 22.22vw; position: relative;}
    .projekte > a::before {position: absolute; left:0; top:0;right: 0;bottom: 0; background-color: rgba(0,0,0,0);content: ' '; transition-duration: 500ms;}
    .projekte:hover > a::before {background-color: rgba(0,0,0,0.5);}
    .projekte:hover > a:hover::before {background-color: rgba(0,0,0,0.0);}
    .projekte::before {content: ' '; position: absolute; top:0; left:0; width:100%;height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50px, rgba(0,0,0,0.0) 80px ); z-index: 5;}
    .projekte::after {content: ' '; position: absolute; bottom:0; left:0; width:100%;height: 50px; background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.4) 50px ); background: transparent; z-index: 5;}
 
    div.sliderLinks {display: block;}
    div.jhpSlider {display:block; position: relative;}
    .projekt > ul.static {display:none;}
    
    div.jhpSlider::before {content: ' '; position: absolute; top:0; left:0; width:100%; height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50px, rgba(0,0,0,0.0) 80px); z-index: 5;}
    div.jhpSlider::after {content: ' '; position: absolute; bottom:0; left:0; width:100%; height: 50px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 100%);background:transparent; z-index: 5;}
    div.jhpSlider > div {display: block;}
    .sliderControl {display: block;}
    
    .projekt > div.beschreibung {position: absolute; top: 150px; left: 75px; width: 340px; max-height: 470px; max-height: calc(100vh - 230px); background-color: rgba(255,255,255,0.7); padding: 15px; 
    transition-duration: 300ms; z-index: 10; color: #556;}
    /*.projekt > div.beschreibung::after {content: ' '; position: absolute; bottom: 0; right: 0; width: 70%; height: 70%; border-bottom: 1px solid #333; border-right: 1px solid #333;} */
    .projekt > div.beschreibung > div.projektInhalt { max-height: 370px; max-height: calc(100vh - 330px); overflow-y: scroll;}
    .projekt > div.beschreibung.hide {left: -340px;}
    .projekt > div.beschreibung > .showHideButton {display: block; position: absolute; width: 30px; height: 30px; right: -30px; top: 0; padding: 7px;  background-color: rgba(255,255,255,0.7); cursor: pointer;font-weight: 700;}
    .projekt > div.beschreibung> .showHideButton > span {display: inline-block; transition-duration: 500ms; transition-delay: 300ms;}
    .projekt > div.beschreibung.hide > .showHideButton > span {transform: rotate(180deg);}

    div.readMoreInline > p {position: absolute; left: 0px; bottom: -46px; padding: 5px 5px;  border: none; border-radius: 0px; background-color: rgba(255,255,255,0.7);}

    .team::before {content: ' '; position: absolute; top:0; left:0; width:100%;height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50px, rgba(0,0,0,0.0) 80px ); z-index: 5;}
    .team:hover > div.teamMember::before {content: ' '; position: absolute; top:0; left:0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); transition: 300ms;}
    .team:hover > div.teamMember:hover::before { background-color: transparent;}
    .teamMember {flex: 1 1 33.33%; height: 50vw;}
    
    div.kontaktPage {display: flex; flex-direction: row; }
    div.kontaktPage > div:first-child {order: 3; flex-basis: 380px; margin-left: 50px; }
    div.kontaktPage #contactItems { flex-direction: column; flex-wrap: nowrap;}
    div.kontaktPage .contactIconBox:first-child { margin-top: 0; }

    .desktop {display: block;}
    .mobile {display:none;}
    .transition {transition: transform 1000ms;}
    .noDisplay {display: none!important;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    section.kontaktTemplate > div.pageContent, div.kontaktPage {max-width: 1600px;}
    .projekte > a {flex-basis: 25%; height: 16.7vw;}
    .projekte > a > div {opacity: 0; transition-duration: 500ms;}
    .projekte > a:hover > div {opacity: 1;}
    .teamMember {flex: 0 1 33,333%; height: 38vw;}
    .teamMember > div:last-child {padding: 45px; }
}



@keyframes scroll-animation {
  10% { -webkit-filter: invert(0); filter: invert(0);}
  40% { -webkit-filter: invert(1); filter: invert(1);}
  60% { -webkit-filter: invert(1); filter: invert(1);}
  90% { -webkit-filter: invert(0); filter: invert(0);}
 }