/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{background:#004f9e; border-top:40px solid #FFF; border-bottom:40px solid #FFF; box-sizing:border-box}
.contact .content{height:240px; position:relative; display:flex; flex-direction:column; justify-content:center; position:relative; padding:15px 0; box-sizing:border-box}
.contact p{display:block; height:60px; margin:0; padding-left:15px}
.contact p:last-child{padding:0}
.contact a{display:flex; height:60px; align-items:center; color:#FFF; }
.contact a:hover{color:#000}
.contact a:visited{color:#FFF}
.contact img{filter:brightness(0) invert(1); width:30px; height:30px; margin-right:15px}
.contact .image{position:absolute; top:-40px; right:0; height:320px; width:50%; background: url("../../../images/global/contact-720x480.jpg") center center; background-size: cover;}
.contact .image a{display:flex; height:100%; width:100%; text-align:center; padding-top:15px; box-sizing:border-box; font-size:30px; line-height:35px; color:#FFF; font-weight:700; background:rgba(0,0,0,0.5)}
.contact .image a:hover{background:none}
.contact .image a span{display:block; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); padding:5px 20px; background:#004f9e; color:#FFF; font-size:20px}
.contact .image a:hover span{background:#000;}


@media (max-width: 700px) {
  .contact .content{height:auto; padding:15px 0 0 0;}
  .contact .image{position:relative; top:auto; right:auto; width:100%; margin-top:20px}
}

/* JOBS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jobs{display:flex; flex-wrap:wrap;}
.jobs .content{width:calc(50% - 15px); margin:0 15px 15px 0; padding:25px 15px 10px 15px; box-sizing:border-box; border-radius:15px; background:#ddd}
.jobs .content:first-child{width:calc(100% - 15px)}
.jobs .content ul, 
.jobs .content p{margin:0 0 10px 0}
.stellenangebot{padding:25px 15px 15px 15px; box-sizing:border-box; border-radius:15px; border:solid 1px #ddd; background:#ddd}
.stellenangebot p{margin:0 0 10px 0}
.stellenangebot ul{margin:0 0 20px 0}

@media (max-width: 700px) {
	.jobs .content,
	.jobs .content:first-child{width:100%}
}

/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wp-form fieldset{border:none; padding:0; box-sizing:border-box}
.wp-form label{float:left; width:33%}
.wp-form .wp-input input,
.wp-form .wp-input textarea{width:66%; box-sizing:border-box}
.wp-form .wp-input{margin:0 0 20px 0}
.wp-form .wp-send{margin:20px 0 0 0}

@media (max-width: 700px) {
	.wp-form label,
	.wp-form .wp-input input,
	.wp-form .wp-input textarea{width:100%}
}

/* HEADER CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-content{width:100%; height:calc(50vh + 100px); margin-top:100px; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.5); padding-top:100px; box-sizing:border-box; overflow:hidden}
.header-content h1{color:#FFF; font-size:50px; line-height:60px}
.header-content h1{animation-duration: 6s; animation-name: title; animation-iteration-count:infinite; animation-direction:alternate;animation-timing-function: linear;}
@keyframes title {
	0%{padding:0 60px 0 0}
	100%{padding:0 0 0 60px}
}

.bg_kompetenzen:after{background: url("../../../images/header/kompetenzen-1920x1280.jpg") center center; position:fixed;}
.bg_gebaeudeautomation:after{background: url("../../../images/header/gebaeudeautomation-1920x1280.jpg") center center; position:fixed;}
.bg_hauptverteilungen:after{background: url("../../../images/header/kompetenzen-1920x1280.jpg") center center; position:fixed;}
.bg_industrieanlagen:after{background: url("../../../images/header/industrieanlagen-1920x1280.jpg") center center; position:fixed;}
.bg_um-ausbauten:after{background: url("../../../images/header/um-ausbauten-1920x1280.jpg") center center; position:fixed;}
.bg_firma:after{background: url("../../../images/header/firma-1920x1280.jpg") center center; position:fixed;}
.bg_team:after{background: url("../../../images/header/header-01-1920x1280.jpg") center center; position:fixed;}
.bg_image:after{
content: "";
top: 0;
height: 100vh;
left: 0;
right: 0;
z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{display:flex; flex-wrap:wrap; margin:40px 0}
.team > div{width:calc(33.3% - 15px); padding:15px; box-sizing:border-box; background:#ddd; margin:0 15px 15px 0}
.team figure{margin:0; padding:0}
.team p{margin-bottom:10px}
.team p:nth-child(1){font-weight:700; margin-bottom:0}
.team img{width:100%; height:auto}
.team a{font-size:16px}

@media (max-width: 800px) {
  .team > div{width:calc(50% - 15px)}
}
@media (max-width: 600px) {
  .team > div{width:100%; margin:0 0 15px 0}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; top:29px; left:29px; z-index:10}
nav > ul {position:fixed; top:0; left:0; width:320px; font-size:14px}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; }
nav > ul > li:first-child{padding-top:40px}
nav > ul > li{width:100%; padding:0 30px; margin:0 0 30px 0; box-sizing:border-box}
nav > ul > li > a{text-transform:uppercase; font-size:20px;}

nav > ul > li > a, nav > ul > li{font-weight:700; }
nav a, nav, nav a:visited, nav:visited{color:#FFF}
nav a:hover{color:#004f9e}
nav > ul > li .arrow:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li .arrow:hover:after {content:'\2794 '; padding-left:5px; color:transparent}

/* menu */
nav .mod-menu {height: 0;  transition: height .2s ease-out;	text-align: center;}

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 19px 7px; position: relative; border-radius:9px; z-index:2; background:#FFF}
nav .menu-icon:hover{background:#DDD}
nav .menu-icon .navicon {  background: #004f9e;  display: block;  height: 5px;  position: relative;  transition: background .2s ease-out;  width: 30px;}
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {background: #004f9e;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
nav .menu-icon .navicon:before {top: 12px;}
nav .menu-icon .navicon:after {top: -12px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .mod-menu {height: 100%; background: rgba(0,0,0,0.8)}
nav .menu-btn:checked ~ .menu-icon {background:#FFF}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  background: #004f9e; transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  background: #004f9e; transform: rotate(45deg);}
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {  top: 0;}

@media (max-width: 1000px) {
nav .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,1)}
}
@media (max-width: 750px) {
nav > ul {width:100%;}
}
@media (max-width: 700px) {
nav{left:14px; top:14px}
}

/* LERNENDE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#lernende{position:absolute; top:-80px; left:0}
.lernende{position:relative}
.lernende a{padding:10px 15px; background:#004f9e; border-radius:3px; color:#FFF}
.lernende a:visited{color:#FFF}
.lernende a:hover{background:#000; color:#FFF}
@media (max-width: 700px) {
  .lernende a{display:block; width:auto; text-align:center; margin:10px}
}

/* HISTORY
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.history{padding:40px 0}
.history > div{display:flex; flex-wrap:wrap; margin-top:30px}
.history strong{display:block; width:100%; font-size:30px; line-height:40px}
.history p{display:block; width:calc(25% - 15px); padding:10px; background:#004f9e; color:#FFF; text-align:center; box-sizing:border-box; margin:0 15px 15px 0}

@media (max-width: 1000px) {
  .history p{width:calc(33% - 15px);}
}
@media (max-width: 700px) {
  .history p{width:100%; margin:0 0 15px 0}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer > div{display:flex; justify-content: space-between; height:100px; align-items:center; padding:0 15px; box-sizing:border-box}
.footer a,.footer a:visited{color:#FFF}
.footer a:hover{color:#004f9e}
.footer p:first-child a{margin-right:20px}
.footer p:last-child{font-size:15px; line-height:20px; text-align:right}
.footer p{margin:0}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address{clear:both}
address{font-style:normal; width:50%; float:left; padding-left:15px; box-sizing:border-box}
address .content{margin:30px 0 40px 0}
address .content a{display:flex; height:40px; align-items:center}
address .content img{height:40px; width:40px; filter:brightness(0); margin-right:15px}
address > p:last-child img{width:120px; height:120px; margin-right:30px}

@media (max-width: 700px) {
  address{width:100%}
}
@media (max-width: 350px) {
  address .content p:nth-child(2) a{font-size:17px}
}  

/* ENGAGEMENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.engagement{width:50%; float:left; padding:0 15px 40px 0; box-sizing:border-box}
.engagement a span{display:block; width:100%; height:90px; box-sizing:border-box; padding:20px; border:solid 1px #004f9e}
.engagement a:hover span{border:solid 1px #000}
.engagement img{width:auto; height:auto; max-width:100%; max-height:50px}
.engagement p{line-height:20px; text-align:center; margin-bottom:30px}
.engagement h3{margin-bottom:30px}

@media (max-width: 700px) {
  .engagement{width:100%; padding:20px 15px 40px 15px;}
}

/* MAP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.map{padding:40px 0 30px 0; position:relative}
.map h3{margin-left:15px}
.map iframe{width:100%; height:400px; border:none}
#location{position:absolute; top: 0px; left:0}

/* OVERVIEW KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.overview_kompetenzen{margin-top:40px}
.overview_kompetenzen div{display:flex; flex-wrap:wrap}
.overview_kompetenzen p:nth-child(1){background: url("../../../images/header/gebaeudeautomation-1920x1280.jpg") center center; background-size: cover;}
.overview_kompetenzen p:nth-child(2){background: url("../../../images/header/kompetenzen-1920x1280.jpg") center center; background-size: cover;}
.overview_kompetenzen p:nth-child(3){background: url("../../../images/header/industrieanlagen-1920x1280.jpg") center center; background-size: cover;}
.overview_kompetenzen p:nth-child(4){background: url("../../../images/header/um-ausbauten-1920x1280.jpg") center center; background-size: cover;}
.overview_kompetenzen p{display:block; width:25%; height:160px; border-right:solid 15px #FFF; box-sizing:border-box}
.overview_kompetenzen a{display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:relative; color:#FFF; font-size:18px; line-height:24px; }
.overview_kompetenzen a:hover{color:#FFF; background:rgba(0,0,0,0)}
.overview_kompetenzen a:visited{color:#FFF}
.overview_kompetenzen strong{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:100%; padding:15px; box-sizing:border-box}

@media (max-width: 800px) {
  .overview_kompetenzen p{width:50%;}
}
@media (max-width: 500px) {
  .overview_kompetenzen p{width:100%; border:none}
}

/* HOME-HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-home{margin-top:115px; background:#DDD; width:100%; height:calc(100vh - 100px)}
.header-home > div{height:calc(100vh - 100px)}
.header-home > div p{display:block; height:50%; float:left; position:relative; margin:0; border-bottom:15px solid #fff; box-sizing:border-box; background-repeat: no-repeat}
.header-home .a{background: url("../../../images/header/header-01-1920x1280.jpg") 50% 45%; background-size: cover; width:100%;}
.header-home .b{background: url("../../../images/header/kompetenzen-1920x1280.jpg") center center; background-size: cover; width:50%; border-right:7.5px solid #FFF;}
.header-home .c{background: url("../../../images/header/firma-1920x1280.jpg") center center; background-size: cover; width:50%; border-left:7.5px solid #FFF}
.header-home > div p a{display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); color:#FFF}
.header-home > div p a:hover{background:rgba(0,0,0,0)}
.header-home > div p a strong{position:absolute; bottom:20%; left:0; width:100%; text-align:center; font-size:40px; line-height:60px}
.header-home > div .a a strong{font-size:50px}

@media (max-width: 700px) {
  .header-home{margin-top:135px;height:calc(100vh - 130px)}	
  .header-home > div p{height:33.3%}
  .header-home > div{height:calc(100vh - 130px)}
  .header-home .b, .header-home .c{width:100%; border-left:none; border-right:none;}
  .header-home > div p a strong,.header-home > div .a a strong{font-size:24px; line-height:30px}
}

/* LOGO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo{position:absolute; top:30px; right:15px}
.logo p{width:auto; height:40px; margin:0}
.logo img{width:auto; height:40px;}
.logo img:hover{filter:brightness(0)}

@media (max-width: 700px) {
  .logo{top:70px; right:auto; left:50%; transform:translateX(-50%)}
}
@media (max-width: 380px) {
  .logo img{width:270px; height:auto;}
}

/* QUICKNAV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.quicknav > div{position: absolute; left: 110px; top:35px; display:flex}
.quicknav p{margin-right:15px; position:relative}
.quicknav img{width:30px;}
.quicknav img:hover{filter:brightness(0)}
.quicknav > div > p:hover:after{position:absolute; left:50%; transform:translateX(-50%); bottom:-23px; font-size:16px; text-align:center}
.quicknav > div > p:nth-child(1):hover:after{content:"+41 31 961 33 88"; width:140px;}
.quicknav > div > p:nth-child(2):hover:after{content:"info@werderundpartner.ch"; width:180px;}
.quicknav > div > p:nth-child(3):hover:after{content:"3122 Kehrsatz"; width:110px;}

@media (max-width: 700px) {
  .quicknav > div{top:15px; left: auto; right:15px}
}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news{text-align:center; padding:80px 0 40px 0; width: 75%; margin: 0 auto;}
.news h3, .news p, .news a, .news a:visited{color:#FFF}
.news a{border:solid 1px #FFF; padding:10px 15px}
.news a:hover{border:solid 1px #000; color:#000}
.news .readmore{margin-top:40px}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {font-family: 'ubuntobold'; src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'), url('../fonts/Ubuntu-Bold.woff') format('woff'); font-weight: bold; font-style: bold;}
@font-face {font-family: 'ubuntolight'; src: url('../fonts/Ubuntu-Light.woff2') format('woff2'), url('../fonts/Ubuntu-Light.woff') format('woff'); font-weight: normal; font-style: normal;}

html {font-size: 62.5%; scroll-behavior:smooth}
body {font-size: 20px; line-height: 30px; font-weight: 300; font-family: 'ubuntolight', sans-serif;  color: #000; background:#FFF}
header{position:absolute; top:0; left:0; width:100%; height: 100px; background:#FFF; z-index:2; border-bottom:15px solid #004f9e}
article{width:100%; max-width:1024px; margin:0 auto; padding:50px 15px; box-sizing:border-box;}
a, a:visited{color: #000;text-decoration: none}
a:hover{color:#004f9e}
strong {font-family: 'ubuntobold', sans-serif; font-weight: 700}

article{width:100%; max-width:1024px; margin:0 auto; padding:50px 15px; box-sizing:border-box;}
.content{width:100%; max-width:1024px; margin:0 auto; box-sizing:border-box}
.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
.clear{clear:both; height:0; overflow:hidden}
.kontaktformular{border:none}

.transition{-ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-ms-transition: all 500ms;-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

p{margin:0 0 20px 0}
h1, h2, h3{font-family: 'ubuntobold', sans-serif;}
h1{font-size:40px; line-height:50px; font-family: 'ubuntobold', sans-serif; margin:0 0 20px 0; color:#000}
h1 a,h1 a:visited{color:#000}
h2,h3{font-size:30px; line-height:36px; margin:0 0 20px 0; color:#000}

.bg_white{background:#FFF}
.bg_black{background:#000}
.bg_blue{background:#004f9e}

@media (max-width: 700px) {
  header{height:130px}
  h1{font-size:30px; line-height:40px; hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
  h2,h3{font-size:26px; line-height:32px;
}
@media (max-width: 350px) {
}

/* COOKIE-BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cookie-banner{position:fixed; width: calc(100% - 40px);bottom:10px;right:10px;padding:15px 10px 10px 10px; background:rgba(0,0,0,0.8);border:1px solid #333;border-radius:9px;color:#fff;text-align: center;z-index:100002;}
.cookie-banner button{background:#fff;color:#000;margin:10px 0 0 0;border-radius:5px;padding:0 10px}
.cookie-banner a{color:#FFF; font-weight:700}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}