/* 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; font-weight:300;}
a:hover{color:#e30613}
strong {font-weight: 700}
p {padding-bottom:10px; margin:0}
article p a,article p a:visited{font-weight:700; color:#666}
.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}


img{width:100%}

h1,h2,h3,h4{font-weight:700;text-align:left;color:#000;margin:0}
h1{font-size:40px; line-height:50px; padding:10px 0 20px 0}
h2,h3{font-size:30px; line-height:40px; padding:0 0 20px 0}
h4{font-size:24px; line-height:34px;}

article h1{padding:10px 0 0 0}
article h2{padding:20px 0}
article h3{padding:20px 0}

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

ul{margin-top:0}


/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

nav{position:fixed;top:27px; right:40px; z-index:2}
nav > ul {position:fixed; top:80px; left:0px;}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; width:100%;}
nav > ul > li{width:25%; float:left; padding:40px 0 0 0}
nav > ul > li:nth-child(1),nav > ul > li:nth-child(2){padding-top:80px}
nav > ul > li:nth-child(odd){padding-left:25%}
nav > ul > li:nth-child(even){padding-right:25%}
nav > ul > li img{width:100px; margin:0 auto 10px auto;}
nav > ul > li img:first-child{box-shadow:0px 0px 5px #666}
nav > ul > li .nav-button{position:relative;}
nav > ul > li .nav-button-icon{position:absolute; top:-60px; left:30px; filter:invert(0.7); width:30px; padding:5px;}
nav > ul > li .nav-button-icon:hover{box-shadow:0px 0px 5px 5px #0422e4}
nav > ul > li > a {font-weight:700;}
nav > ul > li .arrow:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li .arrow:hover:after {content:'\2794 '; padding-left:5px; color:transparent}
nav > ul > li a:visited,nav > ul > li a:hover{color:#000;}

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

/* menu icon */
nav .menu-icon {  cursor: pointer;  display: inline-block;  float: right;  padding: 20px 10px;  position: relative;  user-select: none; border-radius:9px}
nav .menu-icon:hover{background:#e30613}
nav .menu-icon .navicon {  background: #FFF;  display: block;  height: 5px;  position: relative;  transition: background .2s ease-out;  width: 30px;}
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {  background: #FFF;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
nav .menu-icon .navicon:before {  top: 10px;}
nav .menu-icon .navicon:after {  top: -10px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .menu {height: calc(100vh - 80px);  
	background-image: -webkit-linear-gradient(bottom right, #ddd 0%, #666 100%);
	background-image: -o-linear-gradient(bottom right, #ddd 0%, #666 100%);
	background-image: linear-gradient(to top left, #ddd 0%, #666 100%); }
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  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 > ul > li{width:40%;}
	nav > ul > li:nth-child(odd){padding-left:10%}
	nav > ul > li:nth-child(even){padding-right:10%}
}
@media (max-width: 550px) {
	nav .menu-icon{filter: drop-shadow(0 0 5px #000); -moz-filter: drop-shadow(0 0 5px #000); -o-filter: drop-shadow(0 0 5px #000);-ms-filter: drop-shadow(0 0 5px #000);}
	nav .menu-icon:hover{background:none;}
}
@media (max-width: 420px) {
	nav > ul > li{width:50%;}
	nav > ul > li:nth-child(odd){padding-left:0%}
	nav > ul > li:nth-child(even){padding-right:0%}
}
@media (max-width: 400px) {
	nav > ul > li img,nav > ul > li br{display:none;}
	nav > ul > li{width:100%; padding:10px 0 0 0}
	nav > ul > li:nth-child(1){padding-top:40px}
	nav > ul > li:nth-child(2){padding-top:10px}
	nav{right:10px}
	
}

/* CONSTRUCT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container{width:100%; max-width:1000px; margin:0 auto; background:#FFF; box-shadow:0 0 10px #000; position:relative}
@media (max-width: 1024px) {.container{box-shadow:none}}
article{width:calc(100% - 40px); padding:20px;}

.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;}

/* BACKGROUND
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-wall:after{background: url("../images/background/wall-1920x1280.jpg") center center;position:fixed;}
.bg-home:after{background: url("../images/background/home-1920x1280.jpg") center center;position:absolute;}
.bg-attribut:after{
      content:"";
      /* 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;
	  background-repeat:no-repeat;
}
@media (max-width: 1000px) {
	.bg-wall{display:none;}
	.bg-home{background:none;}
	.bg-home:after{background: url("../images/background/home-1920x1280.jpg") center center;}
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; z-index:2; top: 20px; left: 0; width:100%; height:60px; background:rgba(0,0,0,0.8); display:flex; align-items: center; justify-content: center}
header p{text-align:center; letter-spacing:1px; padding:0}
header p a, header p a:visited{color:#FFF;}
header p a:hover{color:#e30613}
@media (max-width: 1100px) {
    header p{display:none}}
header .logo{position:fixed; z-index:4; top:0px; left:40px; width:300px; height:90px; border-radius: 0 0 9px 9px; background-color:#FFF; box-shadow: 0 0 10px #000; display:flex; justify-content:center}

header .logo img{width:280px; height:auto; margin-top:20px}

header > .icons{position:fixed; top:35px; right:40px; width:200px; height:100px;}
header > .icons img{width:auto; height:30px; margin-right:20px;}
header > .icons img:hover{filter:invert(0.7)}
header > .icons > .phone,
header > .icons > .email,
header > .icons > .icon-location{position:relative}
header > .icons > .phone:hover::before{content:'+41 33 654 05 55';left:-40px}
header > .icons > .email:hover::before{content:'info@beoelektriker.ch';left:-75px}
header > .icons > .icon-location:hover::before{content:'3700 Spiez';left:-20px}
header > .icons > .phone:hover::before,
header > .icons > .email:hover::before,
header > .icons > .icon-location:hover::before{position:absolute; top:-35px; white-space: nowrap; background:#666; padding:2px 5px; border-radius:3px; font-size:13px; line-height:15px; color:#FFF}

@media (max-width: 550px) {
	header {position:absolute;}
	header .logo{position:absolute;top:-20px;left:20px; width:280px}
    header .logo img{width:260px;}
	header .icons{top:90px; display:flex; flex-direction:column; width:30px;right:50px;}
	header > .icons img{width:auto; height:30px; margin:5px;filter: drop-shadow(0 0 2px #000); -moz-filter: drop-shadow(0 0 2px #000); -o-filter: drop-shadow(0 0 2px #000);-ms-filter: drop-shadow(0 0 2px #000); }
	header > .icons > .phone:hover::before,
	header > .icons > .email:hover::before,
	header > .icons > .icon-location:hover::before{content:none}
}
@media (max-width: 400px) {
	header .icons{right:25px;}
}

/* BUTTONS
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.button-field{position:fixed; left:calc(50% - 640px); top:140px;}
.button{position:relative; width:100px; height:100px; margin-bottom:30px; box-shadow:0px 0px 5px #000}
.button a img{position:absolute; top:31px; left:31px; width:30px; padding:5px; filter: invert(70%); }
.button a img:hover{box-shadow:0px 0px 5px 5px #1bf9ec}
.button-home:hover::before{content:'Home'; left:29px} 
.button-kompetenzen:hover::before{content:'Kompetenzen'; left:6px} 
.button-haushaltsgeraete:hover::before{content:'Haushaltsgeräte'; left:0} 
.button-unternehmen:hover::before{content:'Unternehmen'; left:6px} 
.button-home:hover::before,
.button-kompetenzen:hover::before,
.button-haushaltsgeraete:hover::before,
.button-unternehmen:hover::before{position:absolute; top:77px; white-space: nowrap; background:#666; padding:0px 3px; border-radius:3px; font-size:13px; line-height:15px; color:#FFF;}

@media (max-width: 1340px) {
	.button-field{display:none;}
}

/* NEWSTEASER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.newsteaser{display:block; padding:10px 20px; background:#e30613; text-align:center; position: fixed; z-index:2; top:120px; right:40px; border-radius:9px; box-shadow: 0 0 10px #000;color:#FFF!important}
.newsteaser > p{padding:0;}
.newsteaser:hover{background:#000; transform: rotate(-5deg);box-shadow: none}
@media (max-width: 550px) {
	.newsteaser{right:auto; left:20px; position:absolute; top:140px; z-index:0}
}

/* HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home{width:100%;height:100vh; display:flex; flex-direction: column; justify-content: center; box-shadow: inset -100px -200px 400px #000; position:relative; z-index:1}
.home > .title{margin-top:300px; font-size:56px; line-height:68px; font-weight:300; text-align:center; color:#FFF; text-shadow: 0 0 10px #000}
.home > .title strong{font-size:100px; line-height:90px; font-weight:700}
.home a{text-align:center}

.home svg {width: 200px; height: 100px; margin: 80px 0}
.home svg:hover{margin:100px 0 60px 0}
.home svg #triangle{fill:#FFF;}
.home svg #triangle:hover{fill:rgba(255,255,255,0.5)}

.hotshots{width:100%; display:flex; justify-content: space-around; margin:40px 0; flex-wrap:wrap}
.hotshots > .content{width:200px; text-align:center; }
.hotshots > .content > .pic{width:140px;height:140px;padding:30px;background:#666; border-radius:50%; margin-bottom:10px}
.hotshots > .content > .pic:hover{width:100px;height:100px;padding:50px}

#readmore{position:absolute;top:-80px}

@media (max-width: 550px) {
	.home{box-shadow:inset 0 -100px 200px #000}
	.home > .title strong{font-size:56px;}
	.home > .title{font-size:32px;line-height: 32px}
	.hotshots > .content{width:120px; font-size:14px}
	.hotshots > .content > .pic{width:100px;height:100px;padding:10px;}
	.hotshots > .content > .pic:hover{width:100px;height:100px;padding:10px;}
	#readmore{top:0}
}
@media (max-width: 400px) {
	.home > .title strong{font-size:42px; line-height: 42px}
	.home > .title{font-size:24px;line-height: 32px}
}

/* HAUSHALTSGERÄTE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.haushaltsgeraete{width:100%; display:flex; flex-wrap:wrap; margin:30px 0}
.haushaltsgeraete > .content{width:calc(33.3% - 13.3px)}
.haushaltsgeraete > .content:nth-child(2){padding:0 20px}

@media (max-width: 750px) {
	.haushaltsgeraete > .content{width:100%; margin-bottom:20px}
	.haushaltsgeraete > .content:nth-child(2){padding:0}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{width:100%; display:flex; flex-wrap:wrap; margin:0 0 30px 0}
.kompetenzen > .content{width:calc(33.3% - 7px); margin-right:10px;filter:grayscale(1)}
.kompetenzen > .content:hover{filter:grayscale(0)}
.kompetenzen > .content p{font-size:16px; line-height:22px}
.kompetenzen > .content:nth-child(3n){margin:0}

@media (max-width: 750px) {
	.kompetenzen > .content{width:calc(50% - 5px); margin-right:10px;}
	.kompetenzen > .content:nth-child(even){margin:0}
	.kompetenzen > .content:nth-child(3){margin-right:10px}
}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{width:100%; display:flex; flex-wrap:wrap;justify-content: center; margin-bottom:40px}
.partner > .content{width:80px; height:80px; padding:20px; background:#666; margin:10px; border-radius:50%;}
.partner > .content:hover{width:120px; height:120px; padding:0;}
@media (max-width: 320px) {
	.partner > .content:nth-child(1n){margin-left:0; margin-right:20px;}
	.partner > .content:nth-child(2n){margin-right:0}
}

/* MITARBEITER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mitarbeiter{width:100%; display:flex; flex-wrap: wrap; margin:20px}
.mitarbeiter > .content{width:210px; text-align:center; margin:10px}
.mitarbeiter > .content img{filter:grayscale(1);-ms-filter:grayscale(1);-moz-filter:grayscale(1);-webkit-filter:grayscale(1)}
.mitarbeiter > .content img:hover{filter:grayscale(0);-ms-filter:grayscale(0);-moz-filter:grayscale(0);-webkit-filter:grayscale(0)}
.mitarbeiter p{padding-bottom:0; }

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{background:#666; position:relative}
.contact > .content{padding:20px 0 20px 20px; width:calc(66% - 20px); float:left}
.contact > img{width:34%;margin-bottom: -8px}
.contact > .content img{width:30px;padding:5px 10px 0 0; float:left}
.contact h3, .contact p, .contact a{color:#FFF;}
.contact a:hover{color:#e30613;}
.contact a{padding:5px 0; display:block}
.contact > .name{position: absolute; bottom:10px; right:calc(34% + 20px);text-align:right; font-size:16px; line-height:20px}

@media (max-width: 750px) {
	.contact > .content{width:calc(100% - 20px)}
	.contact > img{padding:0 0 20px 20px}
	.contact > .name{right:auto; left:calc(34% + 30px); text-align:left;}
}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news {background:#e30613; position:relative; color:#FFF}
.news h3,.news a{color:#FFF}
#news{position:absolute; top:0}
.news > .content{padding:20px}
.news a:hover{color:#000}

/* FLICKR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.flickr{width:calc(700px - 50px); padding:20px; margin:0 auto 20px auto; background:#DDD; border:5px solid #000; box-shadow: 2px 2px 5px #666}
.flickr img{margin-bottom:-7px}
@media (max-width: 750px) {
	.flickr{width:calc(280px - 26px); padding:10px; border:3px solid #000}
}

/* MOVIE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.movie{width:100%; position: relative}
.movie img{width: 700px; height:455px; margin-left: calc(50% - 350px);}
.movie iframe{position: absolute; width:687px; height:386px; left:calc(50% - 343.5px); top:8px; border:none}
@media (max-width: 750px) {
	.movie img{width: 280px; height:182px; margin-left: calc(50% - 140px);}
	.movie iframe{position: absolute; width:276px; height:155px; left:calc(50% - 138px); top:3px;}
}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e-tec {}
.e-tec > .content{padding:40px 20px 0 20px}
.e-tec iframe{width:100%; height:660px; border:none}

/* LOCATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.location{background:#666; position:relative}
#location{position:absolute; top:-80px}
.location > .content{padding:20px;width:calc(100% - 40px); display:flex; justify-content:space-between; flex-wrap:wrap;}
.location h3, .location p, .location a{color:#FFF;}
.location h3{padding:20px 0 0 0;}
.location > .content img{width:30px;padding:5px 10px 0 0; float:left}
.location a:hover{color:#e30613;}
.location a{padding:5px 0; display:block}
.location iframe{width:100%; height:420px; border:none}
.location address,.location .address{width:25%}
.location address{font-style:normal}
.location .online{width:100%}
@media (max-width: 900px) {
	.location address,.location .address{width:50%}
	.location .online{padding-top:20px}
	#location{top:0}
}
@media (max-width: 500px) {
    .location address,.location .address{width:100%}
}

/* Kontaktformular
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.formular {margin:20px 0;}
.formular label{display: block;width:30%;float:left;}
.formular input,.formular textarea{width:calc(70% - 6px);}

.formular p,.kontakt-send,.kontakt-recaptcha{margin-left:30%;}
.formular a{text-decoration:underline}
.super-important {position: absolute; top: -3000px; left: -3000px;}
.error {color: #b00;}

@media only screen and (max-width:500px){
	.formular input,.formular textarea{width:90%;}
	.formular label{width:100%}
	.formular p,.kontakt-send,.kontakt-recaptcha{margin-left:0;}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{width:100%; background:#000; }
footer > .content{width:calc(100% - 40px); max-width:calc(1000px - 40px); padding:20px; margin:0 auto; display: flex; justify-content: space-between; flex-wrap:wrap;}
footer > .content > p > a{color:#FFFFFF}
footer > .content > p > a:hover{color:#e30613}
footer > .content > p a:nth-child(1){padding-right: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; font-weight:700}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}