/* COLORS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.white{background:#FFF}
.black{background:#000}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 62.5%; }
body {
  background: #FFF;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  font-family: 'Ubuntu', sans-serif;
  color: #000; }
a,a:visited {color: #000; text-decoration: none;}
a:hover{color:#ea690b}
strong {font-weight: 700}
p {padding:0 0 10px 0; margin:0;}
img{width:100%}
h1{font-weight: 700;font-size: 42px;line-height:52px;color:#FFF;}
h2,h3{font-weight: 700;font-size: 32px;line-height: 42px; text-align: center; margin:0; padding:40px 0 20px 0}
h4{font-weight: 700;font-size: 26px;line-height: 36px; text-align: center; margin:0 0 10px 0}


@media only screen and (max-width:420px){
	h1{font-size: 28px;line-height:38px}
	h2,h3{font-size: 24px;line-height:34px}
	h4{font-size: 20px;line-height:30px}
}


/* GLOBAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.transition{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.flex{display:flex;justify-content: space-between; align-items: center}
.container{position:relative; width:100%;}
#content{position:absolute; top:-200px;}


/* BACKGROUNDS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-home:after{background: url("../images/header/home-1920x1280.jpg") center center;}
.bg-kompetenzen:after{background: url("../images/header/kompetenzen-1920x1280.jpg") center center;}
.bg-haushaltsgeraete:after{background: url("../images/header/haushaltsgeraete-1920x1280.jpg") center bottom;}
.bg-unternehmen:after{background: url("../images/header/unternehmen-1920x1280.jpg") center bottom;}
.bg-impressum:after{background: url("../images/header/impressum-1920x1280.jpg") center bottom;}
.bg-attribut:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}


/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{width: 100%; background: rgba(255,255,255,0.8); position:fixed; top:0; left:0; z-index:10000000;}
header .content{width:calc(100% - 40px); height: 100px; padding: 0 20px; margin:0 auto;}
header .content p{font-weight: 700; font-size: 30px;}
.navigation{width:240px;}
.navigation > a > img{width:40px;margin: 0 10px}
.navigation > a > img:hover{ -webkit-filter: brightness(0); -moz-filter: brightness(0); -o-filter: brightness(0); filter: brightness(0);}

@media only screen and (max-width:620px){
	header .content p{display:none;}
}

/* INTRO
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.intro{width:100%; height:calc(75vh - 100px); justify-content: center;line-height: 0px;margin-bottom:-30px}
.home{height:calc(100vh - 100px); background:rgba(0,0,0,0.5);}
.intro img{width:50vw;max-width: 800px}

.breath {animation: UD_KLASSE_1 infinite 5000ms; -moz-animation: UD_KLASSE_1 infinite 5000ms; -ms-animation: UD_KLASSE_1 infinite 5000ms; -o-animation: UD_KLASSE_1 infinite 5000ms; -webkit-animation: UD_KLASSE_1 infinite 5000ms;   }

@-webkit-keyframes UD_KLASSE_1 {
	0% { filter: drop-shadow(0 0 10px #FFF); -moz-filter: drop-shadow(0 0 10px #FFF); -o-filter: drop-shadow(0 0 10px #FFF);-ms-filter: drop-shadow(0 0 10px #FFF); }
	50% { filter: drop-shadow(0 0 20px #FFF); -moz-filter: drop-shadow(0 0 20px #FFF); -o-filter: drop-shadow(0 0 20px #FFF);-ms-filter: drop-shadow(0 0 20px #FFF); }
	100% { filter: drop-shadow(0 0 10px #FFF); -moz-filter: drop-shadow(0 0 10px #FFF); -o-filter: drop-shadow(0 0 10px #FFF);-ms-filter: drop-shadow(0 0 10px #FFF); }
	}


@media only screen and (max-width:800px){
	.intro img{width:75vw;}
	.intro{height:calc(100vh - 200px)}
}

@media only screen and (max-width:420px){
	
}


/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.title{position:relative; top:-100px; margin-bottom:-100px; display:flex; width:100%; max-width:940px; height:200px; background:#000; color:#FFF; justify-content: center; align-items: center}

article{position:relative; width:calc(100% - 40px); max-width:940px; padding:0 20px; margin:0 auto; text-align: center}
article h1{padding:0 10px;}

.teaser{padding:40px 0; justify-content:space-around!important}
.teaser .content{width:30%;}
.teaser .content a, .teaser .content a:visited{color:#FFF}
.teaser .content a:hover{color:#ea690b}

article .contact{padding-bottom:40px;}

.kompetenzen{padding:40px; flex-flow:wrap; justify-content: center}
.kompetenzen .content{width:140px; height:140px; margin:10px; border-radius:50%; background:#000}
.kompetenzen .content:hover{background:#ea690b}
.kompetenzen .content img{width:60%; margin:20%;}

.kompetenz{position:relative; text-align:center; margin:90px 0}
.kompetenz img{width:200px; margin:0 auto; -webkit-filter: brightness(0); -moz-filter: brightness(0); -o-filter: brightness(0); filter: brightness(0);}
#elektroplanung,#installation,#kommunikation,#smart-home,#elektroservice{position:absolute; top:-100px}

.prospekt{margin:80px 0}
.issuu{width:100%; height:440px;}

.partner{display:flex; justify-content: center; flex-wrap:wrap; margin-bottom:40px}
.partner .content{width: 100px; height: 100px; background: #000; border-radius: 50%; padding:20px; margin:10px}
.partner .content:hover{background:#ea690b}
.partner .content img{width:100%;}

.team{display:flex; justify-content: center; flex-wrap:wrap; margin-bottom:40px}
.team .content{width:280px; margin:20px 10px;}
.team .content img{background:#ddd; margin-bottom:10px}
.team .content p{padding:0 0 5px 0}
.team .content p:nth-child(2){font-weight:700;}

.impressum{padding-bottom:60px; text-align: left; word-break: break-word}
.impressum h2{text-align:left;}

.news{background:#ea690b; text-align: center; width:calc(100% - 30px); padding:50px 15px;}
.news h2{font-size:40px; line-height: 50px; font-weight: 700; color:#FFF; }
.news a{color:#FFFFFF}
.news a:hover{color:#000}

@media only screen and (max-width:420px){
	.title{top:-50px; margin-bottom:-50px;height:100px;}
	.teaser{flex-wrap:wrap; justify-content: center;}
	.teaser .content{width:calc(50% - 20px);margin:10px}
	.teaser .content p{font-size:14px}
	.kompetenzen{display:none; padding:40px 0 0 0}
	.kompetenzen .content{width:100px; height:100px;}
}
@media only screen and (max-width:320px){
	.partner .content{width:70px; height:70px}
}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e-tec{width:100%; max-width: 940px; margin:0 auto; padding:20px 0 60px 0}
.e-tec h3{color:#FFF; padding-bottom:30px}
.e-tec iframe{width:100%; height:640px; border:0;}

@media only screen and (max-width:768px){
	.e-tec iframe{height:580px;}
	.e-tec h3{padding-top:0;}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.googlemaps{width:100%; height:420px; border:0;}
.contact{width:calc(100% - 40px);max-width: 940px; margin:0 auto; padding:40px 20px}
.contact .logo{width: 280px}
.img-unternehmen{width:50%; overflow:hidden; height:240px;}
.img-unternehmen img{width:100%}

@media only screen and (max-width:700px){
	.img-unternehmen{display:none;}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{width:calc(100% - 40px); max-width: 940px; margin:0 auto; padding:40px 20px}
footer a, footer a:visited{color:#FFF}
footer a:hover{color:#ea690b}

@media only screen and (max-width:500px){
	footer{flex-wrap:wrap;}
	footer p:last-child{padding-top:20px}
}

/* 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; text-decoration: underline}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}