/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {font-size: 62.5%}
body {background: #FFF; font-size: 20px;line-height: 30px; font-weight: 300; font-family: 'Raleway', sans-serif; color: #000}

a,a:visited {color: #000; text-decoration: none;}
a:hover{color:#BE1F18}
strong {font-weight: 700}
p {margin:0 0 20px 0}
.autohyphens{hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}

h1{font-size: 100px; line-height:120px; padding:0; margin:0; color:#000; text-transform: uppercase; font-weight: 300; text-align: center}
h2{font-size: 50px;line-height: 70px; margin:0 0 30px 0}
h3{font-size: 30px;line-height: 40px; margin:0}
h1,h2,h3{font-weight: 300; -webkit-hyphens:none; -moz-hyphens:none; hyphens:none}

.bg_white{background:#FFF; position:relative}
.bg_gray{background:#4C4C4C}
.bg_black{background:#000}

article > .bg_white > .content{width:100%; max-width: 1024px; margin:0 auto; padding:60px 15px; box-sizing: border-box}
#content{position:absolute; top:-120px; left:0}

@media only screen and (max-width:700px){
    h1{font-size:50px; line-height:60px}
    h2{font-size:30px; line-height:40px}
    #content{top:0} 
}
@media only screen and (max-width:380px){
    h1{font-size:30px; line-height:40px}
    h2,h3{font-size:26px; line-height:32px}
}

/* TRANSISTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.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;}
.transition:after{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:after:hover{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; top:0; left:0; width: 100%; z-index:3; background: #000;}

header > .content{width:100%; max-width:1024px; height:120px; position:relative; margin:0 auto}
header > .content > .logo{position:absolute; left:15px; top:10px;}
header > .content > .logo img{height:100px; width:auto}

header > .content > .quickcontact{position:absolute; display:flex; top:0; right:15px; width:140px; justify-content: space-between}
header > .content > .quickcontact > .btn{background:#4C4C4C; width:40px; height:40px; padding:10px; box-sizing: border-box; line-height: 0; position:relative}
header > .content > .quickcontact > .btn:hover{background:#BE1F18}
header > .content > .quickcontact > .btn img{width:20px; height:20px; filter:brightness(0) invert(1)}
header > .content > .quickcontact > .btn:hover:after{position:absolute; left:20px; transform:translateX(-50%); bottom:-20px; text-align: center; color:#FFF; font-size:16px;}
header > .content > .quickcontact > .phone:hover:after{content:"+41 (0)71 787 53 87"; width:180px}
header > .content > .quickcontact > .mail:hover:after{content:"info@elektro-manser.ch"; width:180px}
header > .content > .quickcontact > .location:hover:after{content:"9050 Appenzell"; width:140px}

@media only screen and (max-width:1100px){
    header > .content > .quickcontact > .phone:hover:after{transform:translateX(0); left:auto; right:-100px; text-align: right} 
    header > .content > .quickcontact > .mail:hover:after{transform:translateX(0); left:auto; right:-50px; text-align: right} 
    header > .content > .quickcontact > .location:hover:after{transform:translateX(0); left:auto; right:0; text-align: right}  
}
@media only screen and (max-width:700px){
    header{position:absolute}
    header > .content > .logo{left:50%; transform:translateX(-50%)}
    header > .content > .logo img{height:90px}
    header > .content{height:150px; font-size:16px}
    header > .content > .quickcontact{width:110px}
    header > .content > .quickcontact > .btn:hover:after{content:""}
    header > .content > .quickcontact > .btn{width:30px; height:30px; padding:5px}
}


/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{z-index:2; width:auto; position:absolute; right:5px; bottom:0}
nav a, nav a:visited{color:#FFF;}
nav a:hover{color:#BE1F18}

.nav{display:flex; align-items:center; justify-content:center; height:60px; list-style-type:none; margin:0; padding:0; text-align:center;}

.nav li{margin:0 10px}
.nav li:hover{color:#BE1F18}

@media only screen and (max-width:1100px){
    nav > label{left:20px}
}

@media only screen and (max-width:700px){
    nav{right:auto; width:100%}
    .nav{overflow:hidden}
    .nav li{margin:0 5px}
}


/* INTRO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro{height:calc(100vh - 120px); margin-top:120px; width:100%; background:rgba(255,255,255,0.5); display:flex; align-items: center; flex-direction: column; justify-content: space-around; padding:10% 0; box-sizing: border-box}
.intro 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}
}
.intro > p a{display:block; padding:20px 0}
.intro > p a:hover{padding:40px 0 0 0}
.intro > .content{width:100%; max-width:1024px; display:flex; justify-content: space-around; flex-wrap:wrap}
.intro > .content > p{padding:0}
.intro > .content > p a{width:220px; height:220px; background:rgba(0,0,0,0.5); text-align: center; display:block; color:#FFF; padding-top:10px; box-sizing: border-box}
.intro > .content > p a:hover{background:rgba(0,0,0,1); color:#000}
.intro > .content > p span:nth-child(1){display:flex; align-items: center; flex-direction: column; justify-content: center; height:calc(100% - 50px)}
.intro > .content > p span:nth-child(2){display:flex; align-items: center; flex-direction: column; justify-content: center; height:50px; background:#BE1F18}
.intro > .content > p span img{filter:brightness(0) invert(1)}

.intro > .content_sites{width:100%; max-width:1024px; display:flex; justify-content: center; flex-wrap:wrap}
.intro > .content_sites > p{padding:0; margin:20px}
.intro > .content_sites > p a{display:block; width:220px; height:50px; background:#BE1F18; text-align: center; color:#FFF; padding-top:10px; box-sizing: border-box}
.intro > .content_sites > p a:hover{background:#000}

#elektroplanung,#beleuchtung,#smarthome,#multimedia,#emobility,#elektroservice,#team,#partner,#referenzen{position:absolute; top:-150px; left:0}

.bg_home:after{background: url("../images/header/home-1920x1280.jpg") center center; position:fixed}
.bg_kompetenzen:after{background: url("../images/header/kompetenzen-1920x1280.jpg") center center; position:fixed}
.bg_firma:after{background: url("../images/header/elektro-manser-1920x1280.jpg") center center; position:fixed}
.bg_impressum:after{background: url("../images/header/impressum-1920x1280.jpg") center center; position:fixed}
.intro:after{content: ""; top: 120px; height: calc(100vh - 120px); 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;}

@media only screen and (max-width:700px){
    .intro{overflow:hidden; height:calc(100vh - 150px); margin-top:150px;}
    .intro:after{height:100vh; top:0}
    .intro > .content > p{font-size:14px; line-height: 20px}
    .intro > .content > p a{width:100px; height:150px;}
    .intro > .content > p span img{width:70%; height:auto}
    .intro > .content > p span:nth-child(1){display:block; padding-top:5px; box-sizing:border-box}
    .intro > .content > p span:nth-child(2){display:block; padding:5px; box-sizing:border-box}
    .intro > .content_sites > p{margin:10px}
    .bg_kompetenzen > p a{display:none}
    
}
@media only screen and (max-width:380px){
    .intro > .content_sites > p{margin:5px}
    .intro > .content_sites > p a{height:40px; padding-top:5px; }
}


/* KOMPTENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{width:100%; max-width:1024px; padding:0 15px 80px 15px; box-sizing: border-box; margin:0 auto; position:relative}
.kompetenzen div{display:flex; justify-content: space-between; align-items: center}

.kompetenzen > .header{width:100%; height:80px; background:#BE1F18; padding:15px; box-sizing: border-box}
.kompetenzen > .header h3{color:#FFF; margin:0; padding:0;}
.kompetenzen > .header img{filter:brightness(0) invert(1)}
.kompetenzen > .header .title img{width:40px; height:40px; margin-right:15px}
.kompetenzen > .header .icons{width:260px; position:relative}
.kompetenzen > .header .icons a{display:block; width:40px; height:40px; padding:5px; box-sizing:border-box; background:rgba(255,255,255,0.2)}
.kompetenzen > .header .icons a:hover{background: #000}
.kompetenzen > .header .icons img{width:100%; height:100%}
.kompetenzen > .header .icons a:hover:after{width:140px; position: absolute; left:-155px; top:50%; transform:translateY(-50%); font-size:16px; line-height: 16px; text-align:right; color:#FFF}
.kompetenzen > .header .icons a:nth-child(1):hover:after{content:"Elektroplanung"}
.kompetenzen > .header .icons a:nth-child(2):hover:after{content:"Beleuchtung"}
.kompetenzen > .header .icons a:nth-child(3):hover:after{content:"Smart Home"}
.kompetenzen > .header .icons a:nth-child(4):hover:after{content:"Multimedia"}
.kompetenzen > .header .icons a:nth-child(5):hover:after{content:"E-Mobilität"}
.kompetenzen > .header .icons a:nth-child(6):hover:after{content:"Elektroservice"}

.kompetenzen > .image{width:100%; height: 340px}
.kompetenzen > .elektroplanung{background: url("../images/content/elektroplanung-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.kompetenzen > .beleuchtung{background: url("../images/content/beleuchtung-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.kompetenzen > .smarthome{background: url("../images/content/smart-home-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.kompetenzen > .multimedia{background: url("../images/content/multimedia-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.kompetenzen > .emobility{background: url("../images/content/emobility-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.kompetenzen > .elektroservice{background: url("../images/content/elektroservice-1920x1280.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.kompetenzen > .text{padding:15px; box-sizing: border-box; background: #DDD}

@media only screen and (max-width:700px){
    .kompetenzen > .header .icons{display:none}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{width:100%; max-width:1024px; margin:0 auto; padding:20px 15px 50px 15px; box-sizing: border-box; display:flex; flex-wrap:wrap; justify-content: space-between}
.team h3{width:100%; height:80px; display:flex; padding-left:30px; align-items:center; color:#FFF; background:#BE1F18; margin-bottom:30px; font-weight: 700}
.team > .content{width:calc(50% - 15px); background:#DDD; margin-bottom:30px; padding-bottom:30px}
.team > .content p{padding:0 15px; box-sizing:border-box; margin:0;}
.team > .content p:first-child{padding:0;}
.team > .content p:nth-child(2){font-weight: 700}
.team > .content p img{width:100%; height:auto; background:#EEE}

@media only screen and (max-width:700px){
    .team > .content{width:100%}
}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{width:100%; max-width:1024px; margin:0 auto; padding:20px 15px 80px 15px; box-sizing: border-box; display:flex; flex-wrap:wrap; justify-content: space-between}
.partner h3{width:100%; height:80px; display:flex; padding-left:30px; align-items:center; color:#FFF; background:#BE1F18; margin-bottom:30px; font-weight: 700}
.partner > .content{width:calc(25% - 22.5px); background:#DDD; margin-bottom:30px}
.partner > .content p{margin:0; line-height: 0; text-align: center}
.partner > .content p img{width:60%; height:auto; opacity: 0.6}

@media only screen and (max-width:700px){
    .partner > .content{width:calc(50% - 15px);}
}

/* REFERENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.referenzen{width:100%; max-width:1024px; margin:0 auto; padding:20px 15px 80px 15px; box-sizing: border-box; display:flex; flex-wrap:wrap; justify-content: space-between}
.referenzen h3{width:100%; height:80px; display:flex; padding-left:30px; align-items:center; color:#FFF; background:#BE1F18; margin-bottom:30px; font-weight: 700}
.referenzen > .content{width:calc(33.33% - 20px); background:#DDD; margin-bottom:30px;display:flex; align-items: center; justify-content: center}
.referenzen > .content p{margin:0; text-align: center}
.referenzen > .content p img{width:70%; height:auto; opacity: 0.6}

@media only screen and (max-width:700px){
    .referenzen > .content{width:calc(50% - 15px);}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{display:flex; width:100%; padding:0 0 80px 0; height:250px}

.contact > .content_left{width:100%;}

.contact > .content{min-width:1024px; background:#BE1F18; display:flex; }

.contact > .content > .image{width:33%; height:100%; background: url("../images/content/thomas-hans-manser.jpg") center center; background-size:cover; display:flex; flex-direction:column-reverse}
.contact > .content > .image p{ width:auto; padding:5px 10px; background:rgba(255,255,255,0.2); margin:20px; text-align:center; color:#FFF}

.contact > .content > .text{width:68%;}
.contact > .content > .text p{margin:0; padding:0 0 0 15px; display:flex; align-items:center; box-sizing: border-box}
.contact > .content > .text p:nth-child(1){height:75px; font-size:30px; line-height: 40px; background:#DDD}
.contact > .content > .text p:nth-child(2){height:100px}
.contact > .content > .text p:nth-child(2) img{width:20px; height:20px; filter:brightness(0) invert(1); padding:10px; margin-right:10px; background:rgba(255,255,255,0.3)}
.contact > .content > .text p:nth-child(2) a{color:#FFF; display:flex; line-height: 40px; margin-right:30px}
.contact > .content > .text p:nth-child(2) a:hover{color:#000}
.contact > .content > .text p:nth-child(3){height:75px; background:#DDD}
.contact > .content > .text p:nth-child(3) a{text-decoration: underline}

.contact > .content_right p{margin:0; padding:0}
.contact > .content_right p:nth-child(1){height:75px}
.contact > .content_right p:nth-child(2){height:100px; background:#BE1F18}
.contact > .content_right p:nth-child(3){height:75px}
.contact > .content_right{width:100%; background:#ddd}

@media only screen and (max-width:1024px){
    .contact > .content{min-width:auto; width:100%}
    .contact > .content_left,
    .contact > .content_right{display:none}
    .contact > .content > .text p:nth-child(2) a{color:#FFF; display:flex; margin-right:30px; font-size:16px}
}
@media only screen and (max-width:980px){
    .contact > .content > .text p:nth-child(3){display:block}
}
@media only screen and (max-width:700px){
    .contact{height:auto}
    .contact > .content{flex-wrap:wrap}
    .contact > .content > .text p{display:block; padding:15px; text-align:center}
    .contact > .content > .text p:nth-child(1){height:auto}
    .contact > .content > .text p:nth-child(2){height:auto}
    .contact > .content > .text p:nth-child(3){height:auto}
    .contact > .content > .image{width:100%; height:300px}
    .contact > .content > .text{width:100%; height:310px}
}
    
/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e_tec{width:100%; max-width:1024px; margin:0 auto; padding:50px 0;}
.e_tec h2, .e_tec p{color:#FFF; padding:0 15px; box-sizing: border-box}
.e_tec iframe{width:100%; height:720px; border:none; margin-top:30px}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#location{position:absolute; top:-120px; left:0}
.address{width:100%; max-width:1024px; padding:0 15px; box-sizing: border-box; margin:0 auto; display:flex; flex-wrap:wrap}
.address h2{width:100%;}
.map{padding:50px 0}
.map iframe{width:100%; height:400px; border:none; margin:20px 0}
.address address{width:66%; display:flex; flex-wrap:wrap; font-style:normal}
.address address p{width:auto; padding-right:30px}
.address address p:nth-child(1){width:100%; margin-bottom:10px}
.address > p{width:33%; text-align:right;}
.address > p img{width:140px; height:auto;}

@media only screen and (max-width:700px){
    #location{top:0}
    .address address{width:100%}
    .address > p{width:100%; text-align:left}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{width:100%; max-width:1024px; margin:0 auto; padding:30px 15px; box-sizing:border-box; display:flex; justify-content: space-between; flex-wrap:wrap; color:#FFF}
footer p{margin:0}
footer a, footer a:visited{color:#FFF}
footer a:hover{color:#BE1F18}
footer p:nth-child(1) a{padding-right:15px}
footer p:last-child{font-size:16px}

@media only screen and (max-width:520px){
    footer{display:block}
    footer p{text-align: center}
    footer p:last-child{margin-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;}