/*
Theme Name: PW.WE. Template
Theme URI: http://kp-z.de/wordpressthemes/pewe/
Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH
Author URI: http://www.kp-z.de/team.php
Description: PE.WE. Template
Version: 0.1
License: commercial
*/

/*

Grün #76B828
Gelb #FBBA00
Rot  #E3000F
Beige   #fae7c7
Hell-beige  #fcfaf7
Braun #602c00
*/


/* arsenal-regular - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 400;
  src: local('Arsenal Regular'), local('Arsenal-Regular'),
       url('fonts/arsenal-v2-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/arsenal-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* arsenal-700 - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 700;
  src: local('Arsenal Bold'), local('Arsenal-Bold'),
       url('fonts/arsenal-v2-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/arsenal-v2-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face { font-family: 'Cashmere'; src: url('fonts/Cashmere-Regular.woff')  format('woff'), url('fonts/Cashmere-Regular.woff2')  format('woff2'); } */


html {padding: 0; margin:0; font-size: 16px; background: #fcfaf7;  height: 100%}
body {padding: 0; margin:0;font-family: 'Arsenal', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6em; overflow-x: hidden; color: #602c00; padding-top: 70px; background: radial-gradient(circle at 0px 50vw, #fcfaf7 0%,#fae7c7 250vw); min-height: 100%;}
section {padding: 75px 0;}
h1, h2, h3 {font-size: 28px; line-height: 1.2em; font-family: "Cashmere", serif; font-style: normal; font-weight: 400;}
/* h1, h2, h3 {font-family: "Austra", serif; font-weight: normal;} */
h2 {font-size: 32px; line-height: 1.2em;}
h3 {font-size: 27px; color: #76B828; margin-bottom: 20px;}
a {color: #602c00; text-decoration: underline; text-decoration-style: dotted;}
a:hover {text-decoration: none; color: #602c00;}
footer a, footer a:hover {color: white;}

#headerBalken {position:fixed; z-index: 100; background-color: white; height: 70px; top: 0; width: 100%}
#headerBalken .container {background-color: white; width: 100%; height: 70px;}
#headerBalken #logo img {width: 160px; height: auto; padding-top: 12px;}

#mobileMenu label {position: fixed; z-index: 101;top: 12px; right: 15px; background: white; display: block;}
#mobileMenu label img {width: 20px; height: auto; transition-duration: 300ms; transform: rotate(0); vertical-align:top; display: inline-block; margin-top: 5px;}
#mobileMenu label span {display: inline-block; padding-right: 10px; padding-top: 2px;}
#mobileMenu .menu {position: fixed; top:0; right: 0; z-index:9; padding: 80px 15px 15px 15px; margin:0; width: 250px; height: 100%; background-color: #76B828; border-left: 2px solid #76B828; transform: translate(250px,0); transition-duration: 300ms; overflow-y: auto;}
#mobileMenu #menuCheckBox:checked ~ ul {transform: translate(0,0);}
#mobileMenu #menuCheckBox:checked ~ label img {transform: rotate(90deg);}
#mobileMenu .menu li {list-style: none; padding: 10px 0;}
#mobileMenu .menu li>a { color: white; font-weight: 700; position: relative; text-decoration: none;}
#mobileMenu .menu li.menu-item-has-children>a::before {content: '>'; color: white; font-weight: 400; position: absolute; left: -10px; top:-4px; font-size: 1.2rem; transition-duration: 300ms;}
#mobileMenu .menu li.menu-item-has-children.open>a::before {transform: rotate(90deg); top: -3px;}
#mobileMenu .menu li.current-menu-ancestor>a {color: #FBBA00;}
#mobileMenu .menu li.current-menu-ancestor>ul {display: block;}
#mobileMenu .menu li.current-menu-item>a {color: #E3000F;}
#mobileMenu .menu>li>ul {padding: 10px 0 10px 20px; display: none;}
#mobileMenu .menu>li>ul>li>ul {padding: 5px 0 5px 20px; display: none;}
#mobileMenu .menu li>a:hover {color: #FBBA00; text-decoration: none;} 

#mainMenu {float: right; text-align: right; display: none;}
#mainMenu a:hover {text-decoration: none;}
#mainMenu .menu {list-style:  none; padding:0; margin:0;}
#mainMenu .menu > li {display: inline-block; padding: 0 8px 0 8px; position: relative; white-space: nowrap;  transition-duration: 250ms;}
#mainMenu .menu > li > a {display: block; color: #602c00; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; padding-top: 14px; height: 53px; text-decoration: none;}
#mainMenu .menu > li.current-menu-ancestor > a, #mainMenu .menu > li.current-menu-item > a {color: #E3000F;}
#mainMenu .menu > li > ul { display:none; position: absolute; left: 0; text-align: left; list-style: none; padding: 5px 0 ; margin:0; background-color: #76B828; z-index:2; top:53px;}
#mainMenu .menu > li > ul::before {content: ' '; position: absolute; background-color: #76B828; width: 10px; height: 10px;z-index: -1; top:-5px; left: 25px; transform: rotate(45deg);}
#mainMenu .menu > li:hover {background-color: #FBBA00;z-index:10;}
#mainMenu.noJQuery .menu > li:hover > ul {display:block;}
#mainMenu .menu > li:last-child {margin-right: -8px;}
#mainMenu .menu > li:last-child > ul {right:0; left: auto;}
#mainMenu .menu > li:last-child > ul::before {left: auto; right: 25px;}
#mainMenu .menu > li > ul > li { padding: 5px 15px; }
#mainMenu .menu > li > ul > li a { color: white; transition-duration: 250ms; text-decoration: none;}
#mainMenu .menu > li > ul > li.current-menu-item a { color: #E3000F;}
#mainMenu .menu > li > ul > li a:hover { color: #FBBA00; }
#mainMenu .menu > li.multiColumn > ul > {display: block;}
#mainMenu .menu > li.multiColumn > ul { transform: translate(-45%,0);}
#mainMenu .menu > li.multiColumn > ul >li {display: inline-block;}
#mainMenu .menu > li.multiColumn > ul::before {left: 50%; left: calc(45% + 25px);}
#mainMenu .menu > li.multiColumn > ul > li > a {font-weight: 700;}
#mainMenu .menu > li.multiColumn > ul > li > a:hover { color: white; cursor: default;}
#mainMenu .menu > li.multiColumn > ul > li > ul {padding: 10px 0 0 0; list-style: none;}
#mainMenu .menu > li.multiColumn > ul > li > ul >li.current-menu-item a { color: #E3000F;}
nav.topline {height: 36px; text-align: right; text-transform: uppercase; display:none;}
nav.topline ul {padding:0; margin:2px 0 0 0;}
nav.topline li { display: inline-block; }
nav.topline a {color: #602c00; font-size: 12px;line-height: 12px; display: inline-block; border-right: 1px solid #602c00;padding: 0 6px 0 5px; text-decoration: none; }
nav.topline ul>li:last-child a {padding-right: 0; border-right: none; }

#headerBild {padding:0; position: relative;}
#headerBild img {width: 100%; height: auto;}
#headerBild h1 {color: #fcfaf7; text-align: center; padding: 0 15%; line-height: 1.2em; }
#headerBild > div {position: absolute; width: 100%; top: 52%; transform: translate(0,-50%);}
#headerBild > div.headlineTop {top: 25%; transform: translate(0,-30%);}
#headerBild > div.headlineLeft h1 {text-align: left; padding: 0 45% 0 0;}

.uebersichtIcons {text-align: center;}
.uebersichtIcons h2 {}
.uebersichtIcons .iconContent {margin-top: 50px;}
.uebersichtIcons .iconContent img {display: block; margin: 0 auto 20px auto; width: 120px; height: auto;}
.uebersichtIcons .iconContent h3 {color: #76B828; margin-bottom: 20px;}
.uebersichtIcons .iconContent > div {margin-bottom: 20px;}


.produktbereiche {padding: 25px 0;}
.produktbereiche .produkt {margin: 50px 0; text-align: center;}
.produktbereiche .row:first-child .produkt {margin-top:0;}
.produktbereiche .produkt > img {width: 120px; height: auto; margin-bottom: 0px;}
.produktbereiche .produkt > div > img {max-width: 100%; height: auto;margin-bottom: 30px;}
.produktbereiche .produkt > h3 {font-size: 40px; margin-top: 10px;}  

.iconRow img {display: block; margin: 20px auto; width: 100%; height: auto; max-width: 150px;}

.ansprechpartnerBereich {padding: 25px 0;}
.ansprechpartnerBereich .ansprechpartner {margin: 50px 0; text-align: center;}
.ansprechpartnerBereich .ansprechpartner > img {width: 150px; height: auto; border: 2px solid #76B828; border-radius: 50%;}
.ansprechpartnerBereich .ansprechpartner > h3 {margin-top: 10px;}


.bgPapier .ansprechpartner img {width: 100%; height:auto; border: 2px solid #76B828; border-radius: 50%;}
.bgPapier .ansprechpartner h3 {margin-bottom: 50px;}
.bgPapier .ansprechpartner h4 {margin-bottom: 30px;}
.bgPapier .ansprechpartner h4>div {font-size: 18px; font-size: 1rem;}
.bgPapier .ansprechpartner .telefon, .bgPapier .ansprechpartner .fax, .bgPapier .ansprechpartner .email {margin-top: 20px; padding-left: 45px; position: relative;}
.bgPapier .ansprechpartner .telefon::before {content: url(img/iconMiniTel.png); position: absolute; left:0; top: 0;}
.bgPapier .ansprechpartner .fax::before {content: url(img/iconMiniFax.png); position: absolute; left:0; top: 0;}
.bgPapier .ansprechpartner .email::before {content: url(img/iconMiniMail.png); position: absolute; left:0; top: 0;}

.inputFeld {border: 2px solid #602c00; border-radius: 12px; position: relative; margin-bottom: 30px; transition: border 500ms; background-color: #fcfaf7; z-index:1;}
.inputFeld input, .inputFeld textarea { width: 100%; box-sizing: border-box; padding: 10px; font-size: 18px; color: #602c00; border:none; background-color: transparent; outline: none;}
.inputFeld textarea {height: 160px;}
.inputFeld label { font-size: 18px; line-height: 18px; font-size: 1rem; color: #aaa; position: absolute; padding: 12px 10px; transition: 300ms; font-weight: 400; z-index: -1;}
.inputFeld.pflichtangabe label::after {content: '*'; margin-left: 2px; }
.inputFeld.filled { border-color: #602c00;}
.inputFeld.filled input, .inputFeld.filled Textarea { padding: 15px 10px 5px 10px; }
.inputFeld.filled label { font-size: 12px; padding: 0 10px;}
.inputFeld.error {border-color: #fcc;} 
.inputFeld.activeInput {border-color: #FBBA00;}
.inputFeld.activeInput.error {border-color: #E3000F;}
.inputFeld.activeInput input {color: #602c00;}
label.checkbox {padding-left: 30px; position:relative;margin-bottom: 30px;}
label.checkbox::before {content: url(img/checkboxOff.png); position:absolute; left:0; top: 2px;}
input.checkbox {display:none;}
input.checkbox:checked + label.checkbox::before {content: url(img/checkboxOn.png); }
.errorMessage {color: #E3000F;}
.errorBox {margin-bottom: 30px; background-color: #E3000F; color: white; font-weight: 700;padding: 15px; border-radius: 15px;}
.messageBox {margin-bottom: 30px; background-color: #76B828; color: white; font-weight: 700;padding: 15px; border-radius: 15px;}
.contactIconBox .iconContact img {width: 60px; height: auto; margin: 0 auto; display: block;}
.contactIconBox p {text-align: center; padding: 5px 0 15px 0;}
.fitWidth {width:100%; height:auto;}

.content.karriere h3 {margin-top: 30px;}

footer {padding: 75px 0; background-color: #602c00; color: white; text-align: center;}



.button {display: block; padding: 8px 15px; border: 2px solid #602c00; border-radius: 12px; width: 250px; text-align: center; margin: 0 auto; transition: 300ms; color: #602c00; font-weight: 700; text-decoration: none;}
.button:hover {background-color: #FBBA00; transform: scale(1.05); text-decoration: none;color: #602c00;}
button {padding: 8px 25px; border: 2px solid #602c00; border-radius: 12px;  text-align: center; margin: 0 auto; transition: 300ms; color: #602c00; font-weight: 700;}
button:hover {background-color: #FBBA00;}
.fullWidth {width: 100%; height: auto;}
.button.abstandTop {margin-top: 30px;}
.button.alignLeft {margin-left: 0; margin-right: 0;}
.noWrap {white-space: nowrap;}

.bgPapier {background-color: white; padding-top: 50px;}
.bgPapierKante {background: url(img/abrisskante.png) top center; background-size: cover; width: 100%; height: 75px;}


.sideKontakt {background-color: #FBBA00; width:35px; color: #602c00; overflow-x: hidden; border: 3px solid white; border-right: none; border-top-left-radius: 20px; border-bottom-left-radius: 20px; position: fixed; top:50%; right: 0px; transform: translateY(-50%); transition: 500ms;}
.sideKontakt.menuOpen {width:380px;} 
.sideKontakt > div {display: flex; width:380px;}
.sideKontakt .label {width: 35px; border-right: 1px solid white; position: relative; min-height: 230px; padding-top: 7px; padding-left: 2px; cursor: pointer; color: #602c00;letter-spacing: 0.02em;}
.sideKontakt .label > div {transform: rotate(-90deg); font-weight: 400; font-size: 17px; text-transform: uppercase; white-space: nowrap; position: absolute; left: -69px; top: 113px;}
.sideKontakt .label > img {transition-duration: 500ms;}
.sideKontakt.menuOpen .label > img {transform: rotate(180deg);}
.sideKontakt .kontaktInfo {padding: 10px;}
.sideKontakt h3 {color: #602c00; font-family: 'Arsenal', sans-serif;margin-top: 5px;}
.sideKontakt .kontaktInfo > div{display: flex; }
.sideKontakt .kontaktInfo > div > img {width:80px; height: auto; display: block; align-self: flex-start;}
.sideKontakt .kontaktInfo > div > div {padding-left: 15px;}
.sideKontakt div.telefon, .sideKontakt div.fax, .sideKontakt div.email { position: relative; padding-left: 40px; margin-bottom: 10px;}
.sideKontakt div.telefon::before {content: url(img/iconMiniTel.png); position: absolute; left:0; top: 3px;}
.sideKontakt div.fax::before {content: url(img/iconMiniFax.png); position: absolute; left:0; top: 3px;}
.sideKontakt div.email::before {content: url(img/iconMiniMail.png); position: absolute; left:0; top: 3px;}
 

.stellenangebot h1 {font-size: 30px; margin-bottom: 30px; color: #76B828;}
.stellenangebot h1 sub {font-size: 1.3rem; display: block; font-family:  'Arsenal', sans-serif; line-height: 1em;}
.stellenangebot h3 {color: #602c00; font-size: 20px;}
.jobs li {line-height: 1.4em; margin-bottom: 15px;}

#PdfFrame {width: 100%; height: 125vw;}
#PdfFrame #mainContainer div.toolbar {display: none!important;}
.justMobile {display:block;}
.notMobile {display:none;}
.noWbr {white-space: nowrap;}
#PdfFrame html {background-color: red;}

.error404 p {text-align: center; color: white;}
.error404 a.button {color: white; border-color: white;}
.error404 h1 {font-size: 100px; margin-top:0; line-height: 1em;}
.error404 #headerBild > div { top:48%;}

.maZahl {vertical-align: text-top; width: 72px; height: auto; display: inline-block;}
.bildJob {width: 100%; height: auto; max-width: 800px; display: block; margin-top: 50px;}
.drop_uploader.drop_zone .text {font-family: inherit!important; font-size: 1.1rem;}
.bewerbungsBox .button {margin-top: 10px;}
.bewerbungsBox input.button {margin-left: 0; margin-top: 20px!important;}
.flagsSelect {appearance: none;}
.flagsSelect option {appearance: none;}
.flagGermany::before {position: absolute; display: block; width: 24px; height: 24px; background-image: url("img/flags/germany.png"); background-size: contain; content: ' ';}


/* Small devices (landscape phones , 576px and up) */
@media (min-width: 576px) {  
    h1,h2 { font-size: 40px;}
    
    #headerBild h1{ font-size: 45px;}
    
    #PdfFrame {height: 720px;}
    .error404 #headerBild h1 {font-size: 180px;}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    #headerBild h1{ font-size: 60px;}
    h3 {font-size: 30px;}
    #PdfFrame {height: 950px;}
    .justMobile {display:none;}
    .notMobile {display:block;}
    
    .stellenangebot h1 {font-size: 3rem; margin-left: 4rem;margin-bottom: 40px;}
    .stellenangebot h1 sub {font-size: 1.6rem;}
    .stellenangebot h3 {font-size: 28px;}

    .error404 #headerBild h1 {font-size: 280px; line-height: 1em;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    body {padding-top: 90px;}
    
    #mobileMenu { display: none;}
    #mainMenu {display: block;}
    nav.topline {display: block;}
    #headerBalken {height: 90px;}
    #headerBalken #logo { float: left;}
    #headerBalken #logo img {width: 200px; padding-top: 16px;}
    
    #headerBild {width: 100%; overflow: hidden; height: 700px; height: 85vh; height: calc(100vh - 90px);}
    #headerBild img {position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);width: auto; min-width: 100%; min-height: 100%;}
    #headerBild h1 { font-size: 95px; padding: 0 10%;}
    #headerBild > div {position: absolute; width: 100%; top: 51%; transform: translate(0,-50%);}

    .content.karriere .jobSpalte h3 {margin-top: 0;}

    
    footer {text-align: left;}
    
    #PdfFrame {height: 835px;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    html {font-size: 18px;}
    body {font-size: 18px; line-height: 1.6em;}
    
    #mainMenu .menu > li > a {padding: 12px 0;}
    nav.topline {height: 35px;}
    
    #headerBild h1 {font-size: 110px; }
    
    .sideKontakt > div {width: 430px;}
    .sideKontakt.menuOpen {width: 430px;}
    .sideKontakt .label {min-height: 230px;}
    .sideKontakt .label > div {top: 112px;left: -70px;}
    
    .stellenangebot h1 {font-size: 3rem; margin-bottom: 50px;}

    #PdfFrame {width: 100%; height: 1200px;}
    
    .maZahl {width: auto; vertical-align: text-bottom;}
}