.jobs_benefits > div{width:100%; display:flex; flex-wrap:wrap; justify-content: center; margin:40px 0}
.jobs_benefits p{width:33.3%; box-sizing:border-box; padding:15px; text-align:center}
.jobs_benefits span{display:flex; justify-content: center; align-items:center; width:100px; height:100px; background:var(--orange); border-radius:50%; margin:0 auto 20px auto}
.jobs_benefits img{filter:brightness(0) invert(1); width:60%; height:60%}


.btn_jobs{position:absolute; top:150px; right:50px; z-index:1}
.btn_jobs > div{width:100px; height:100px; border-radius:50%; animation: 3s shine linear infinite;}

@keyframes shine {
  0% {box-shadow:0 0 30px 15px #FFF; }  
  50% {box-shadow:0 0 10px 5px #FFF; }
  100% {box-shadow:0 0 30px 15px #FFF; }
}
.btn_jobs p{margin:0; width:100%; height:100%}
.btn_jobs a{width:100%; height:100%; color:#FFF!important; display:flex; align-items:center; justify-content:center; background:var(--orange); border-radius:50%; }
.btn_jobs a:hover{background:#000; transition:0.3s}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav div{position:absolute; left:50%; top:30px; transform:translateX(-50%);}
nav div> ul{float:left;margin:0; width:100%;}
nav div> ul > li{float:left;padding:5px 10px;text-align:center;width:auto;list-style-type:none;color:#000;}
nav div> ul > li > a{cursor:pointer;display:block;outline:none;width:100%;text-decoration:none;color:#000;padding:0;font-weight: 700;}
nav div> ul li ul{display:none;position:absolute;left:0;top:100%;width:100%;z-index:2000;padding:0;}
nav div> ul li ul li{text-align:center;background:rgba(255,255,255,0.9);list-style-type:none;padding:5px;font-size:18px}
nav ul li:hover{cursor:pointer;position:relative;background:#FC5000;color:#FFF;}
nav ul li:hover > ul{display:block;}
nav a, nav a:visited{color:#000;}
nav a:hover{color:#FFF;}
nav > ul li ul li > a{text-decoration:none;}
[type="checkbox"], nav > label{display:none;}

@media screen and (max-width:900px){
    nav {position:relative; left:auto; top:auto; transform:none; z-index:2}
    .nav{display:none;}
	nav > label{display:block;background:#000;width:40px;height:40px;cursor:pointer;position:absolute;top:30px;right:30px;z-index:2;}
	nav > label:hover{background:#FC5000}
	nav > label:after{content:'';display:block;width:25px;height:3px;background:#FFF;margin:18px 7px;box-shadow:0px -10px 0px #FFF, 0px 10px 0px #FFF}
  	[type="checkbox"]:checked ~ label{background:#000}
	[type="checkbox"]:checked ~ div > .nav{display:block;}
    [type="checkbox"]:checked ~ label:after{box-shadow:0px 10px 0px rgba(0,0,0,0), 0px 20px 0px rgba(0,0,0,0)}
    .nav{z-index:1; background:#FC5000; position:absolute; top:-30px; left:0px; padding-inline-start: 0px; padding:20px; height:100vh; box-sizing:border-box;}
	nav a, nav a:visited{color:#FFF;}
    nav div{left:0; width:100%; transform:translateX(0)}
	nav a:hover{color:#000;}
    nav div> ul{float:left;margin:0; width:100%;}
	nav ul li{display:block;text-align:center;font-weight: 700;}
	nav ul li:hover{background:none;}
	nav div> ul > li{float:none; padding:10px}
	nav div> ul > li > a {color:#000!important; text-transform: uppercase;}
	nav div> ul li ul li{display:block;float:none;padding:4px 0;background:none;}
	nav div> ul li ul{display:block;position:relative;z-index:9999;float:none;left:0;}
	}

@media screen and (max-width:414px){
	nav > ul > li{padding:5px 0;}
	nav > ul li ul li{padding:3px 0;}
	nav {font-size:16px;line-height:26px}
}
@media screen and (max-width:320px){
	nav, nav > ul li ul li {font-size:12px;line-height:19px}
	nav > label{right:15px;}
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; top:0; z-index:2; width:100%; height:100px; border-bottom:solid 3px #000; background:rgba(255,255,255,0.7)}
.logo{position:absolute; top:10px; left:5vw; display:block;}
.logo p{margin:0}
.logo img{height:80px; width:auto}
.quicknav>div{position: absolute; top:20px; right:5vw; width:180px;height:60px; display:flex; justify-content: space-between; align-items: center}
.quicknav img{height:30px;filter: brightness(0);-moz-filter: brightness(0);-webkit-filter: brightness(0);-o-filter: brightness(0)}
.quicknav img:hover{height:40px;filter: brightness(1);-moz-filter: brightness(1);-webkit-filter: brightness(1);-o-filter: brightness(1)}
.quicknav p{margin:0}
.quicknav a{position:relative;}
.quicknav a:hover:after{position:absolute; font-size:14px; color:#000; bottom:-25px; left:50%; transform:translateX(-50%); width:140px; text-align:center}
.quicknav .phone:hover:after{content:"+41 (0)44 822 55 22"}
.quicknav .mail:hover:after{content:"info@3g-elektroserv.ch"; width:180px}
.quicknav .form:hover:after{content:"Kontaktformular"}
.quicknav .location:hover:after{content:"8600 Dübendorf"}

.teaser{position:absolute; top:120px; left:5vw; background:var(--orange); width:250px; height:80px; padding:15px 0 15px 50px; box-sizing:border-box; border-radius:9px; color:#FFF}
.teaser p{position:relative; line-height:24px!important}
.teaser p span{position:absolute; left:-45px; top:15px; display:block; transform:rotate(-90deg); font-size:40px}

@media screen and (max-width:900px){
  .quicknav>div{right:80px}
}

@media screen and (max-width:560px){
  header{height:140px}
  .quicknav>div{left:5vw; right:auto; transform:translateX(0); top: 85px}
  .quicknav a:hover:after{content:""!important}
}

/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.visforms{margin-top:40px}
.visforms hr{margin-top:20px}
.visforms .field11 hr{display:none}
.captchaCont img{width:auto}

/* MAPS + FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.googlemaps iframe{width:100%;height:40vh;border:none; margin-bottom:-20px;}

footer{width:100%;color:#FFF; padding-bottom:20px;}
footer a,footer a:visited{color:#FFF}
footer a:hover{color:#FC5000;}

address{font-style:normal; width:100%;}
address p{margin:0}
address > div > div{width:100%; display:flex; justify-content: space-between; flex-wrap: wrap; align-items:center}
address .social img{width:30px; height:30px; margin:0 10px; filter:brightness(2) grayscale(1)}
address .social img:hover{filter:brightness(1) grayscale(0)}
address .links{text-align:right;font-size:14px;line-height:20px}
address .links p:last-child{margin-top:20px}

@media screen and (max-width:620px){
  address > div{align-items:start}
  address .address{width:100%;}
  address .links, address .social{margin-top:20px}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen div{width:100%; display:flex; justify-content:space-around; flex-wrap:wrap;}
.kompetenzen h3{display:block; width:100%;}
.kompetenzen p{width:30%; background:#000}
.kompetenzen p:hover{background:#FC5000}
.kompetenzen p .img{display:block; width:100%; height:auto; line-height:0}
.kompetenzen p .txt{display:block; width:100%; height:auto; text-align:center; padding:5px 0; font-size:14px; line-height:20px;}
.kompetenzen p img{width:100%; height:auto;}
.kompetenzen a,.kompetenzen a:visited,.kompetenzen a:hover{color:#FFF}

@media screen and (max-width:600px){
  .kompetenzen p{width:47%}
}
@media screen and (max-width:400px){
  .kompetenzen_home p{width:100%}
}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner div{width:100%; height:auto; display:flex; justify-content:start; flex-wrap:wrap; margin-top:40px}
.partner p{width:95px; height:95px; margin:0 15px 15px 0; padding:10px; box-sizing:border-box; border-radius:15px; background:#FC5000}
.partner p:hover{background:#000}
.partner img{width:100%; height:auto}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{margin-top:40px}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{margin-top:40px}
.team > div{width:100%;display:flex;flex-wrap: wrap;margin-bottom:70px;}
.team > div > div{width:calc(50% - 20px);margin:10px}
.team figure{margin:0}
.team img{background:#ddd; width:100%; height:auto; margin:0 0 20px 0}
.team p{margin:0 0 10px 0}

@media screen and (max-width:420px){
  .team > div > div{width:100%;margin:10px 0}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face{font-family: 'asap'; src: url('../fonts/asap.woff') format('woff')}
@font-face{font-family: 'Fira-Sans-Regular'; src: url('../fonts/Fira-Sans-Regular.woff') format('woff')}

:root {--orange:#FC5000}
html {
  font-size: 62.5%; }
body {
  background: #FFF;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  font-family: Fira-Sans-Regularm, asap, sans-serif;
  color: #000; }
a,a:visited {color: #FC5000; text-decoration: none;}
a:hover{color:#000}
strong {font-weight: 700}
p {margin:0 0 10px 0; padding:0;}
img{width:100%}
h1,h2,h3{padding:20px 0;margin:0; hyphens: auto;-webkit-hyphens:auto}
h1{font-size: 70px;line-height:70px; font-weight:700; text-transform: uppercase}
h2{font-size: 34px;line-height: 44px; font-weight:700}
h3{font-size: 24px;line-height: 34px; font-weight:700}

.title_home h1{text-transform: none;}

.orange{color:#FC5000}
.bg_orange{background:#FC5000}
.bg_grey{background:#CCC}
.bg_black{background:#000}
.silbentrennung p{hyphens: auto}

@media (max-width: 1000px) {
	h1{font-size:50px; line-height:50px}
}
@media (max-width: 750px) {
	h1{font-size: 42px; line-height:42px}
	h2{font-size: 24px;line-height: 34px}
}
@media (max-width: 400px) {
	h1{font-size: 30px; line-height:30px}
}
@media (max-width:320px){
	h1{font-size:24px;}
}



/* TITLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.title{margin-top:100px}
.title .titelbalken{position:relative;}
.titelbalken{margin:auto; width:100%; max-width:960px; padding:20px 20px 0 30px; box-sizing:border-box}
.title p{position:relative; padding:0; margin:0; line-height:0}
.title img{width:100%; height:auto}
.title .slogan{position: absolute!important; top:50%; transform:translateY(-50%); left:0; width:100%; font-size: 70px; line-height:80px; font-weight:700; color:#FFF; text-align: center; animation-duration: 6s; animation-name: slogan; animation-iteration-count:infinite; animation-direction:alternate;animation-timing-function: linear; box-sizing:border-box; text-shadow:1px 1px 1px #000}
.title .slogan a,.title .slogan a:visited{color:#FFF;}
.title .slogan a:hover{color:#FC5000;}

@keyframes slogan {
	0%{padding:0 60px 0 0}
	100%{padding:0 0 0 60px}
}
@media screen and (max-width:800px){
  .title h1{top:0px}
  .title .slogan{font-size: 40px; line-height:50px}
}
@media screen and (max-width:560px){
  .title {margin-top:140px}
  .title h1{padding:25px 0}
  .title .slogan{font-size: 30px; line-height:40px}
}

/* CONTAINER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article,.news,.e-tec,.googlemaps h3,.googlemaps > .content,.footer
{position:relative; width:100%; max-width:940px; padding:40px 20px; margin:0 auto; box-sizing: border-box;}

article,.news{padding-top:0}
.googlemaps h3{padding:0 20px 20px 20px;}
.googlemaps > .content{padding:0 20px 40px 20px!important}
.footer{padding:20px 20px 0 20px}

article #content{position:absolute; top:-230px; left:0; color:rgba(0,0,0,0)}


/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news{text-align:center; padding-top:40px}
.news h2{font-weight:700}
.news img{max-width:66%; width:auto; height:auto; margin:20px 0}
.news a,.news a:visited{color:#000; text-decoration:underline}
@media screen and (max-width:800px){
  .news{padding-top:160px}
}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e-tec iframe{width:100%;height:660px;border:none}

@media screen and (max-width:750px){
	.e-tec iframe{height:560px}
}

@media screen and (max-width:400px){
	.e-tec iframe{height:660px}
}

/* SOLARRECHNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.solarrechner{margin-top:40px}
.solarrechner iframe{width:100%; height:800px; border:none; }


/* COOKIE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#redim-cookiehint{background:#FFF}
#redim-cookiehint, #redim-cookiehint a, #redim-cookiehint a:visited{color:#000}
#redim-cookiehint a:hover{color:#333}
#redim-cookiehint .cookiebuttons .btn{padding: 10px 15px !important; font-weight:bold}