/* NEWSFLAG
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.newsflag{position:absolute; top:70px; right:30px}
.newsflag a{display:flex; width:110px; height:70px; text-align:center; align-items:center; justify-content:center; background:#000; color:#FFF; border-radius:15px; font-size:16px; line-height:20px; font-weight:bold; }
.newsflag a:hover{background:#004A98; color:#FFF}
.newsflag a:visited{color:#FFF}
@media (max-width: 700px) {
.newsflag{position:absolute; top:80px; right:10px}
}

/* GALLERY
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gallery{margin-top:60px}
.gallery h3{font-size:30px; line-height:40px; padding:0}
ul.sigProResponsiveBlue li.sigProThumb a.sigProLink{border: 6px solid #FFF;}
ul.sigProResponsiveBlue li.sigProThumb a.sigProLink:hover{border: 6px solid #004A98;}
ul.sigProResponsiveBlue span.sigProPseudoCaption{display:none}

/* MAP / Address / Team
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.map h3{width:100%; max-width:1024px; padding:15px; box-sizing:border-box; margin:0 auto}
.map iframe{width:100%; height:420px; border:none}
address{font-style:normal; margin:0; padding:20px}
.address{display:flex; flex-wrap:wrap; margin-bottom:10px}
.address > .text{width:33.3%; display:flex; flex-direction: column; justify-content:space-between}
.address > .text p{font-weight:200; margin-bottom:10px}
.address > .text .content:nth-child(1) p:nth-child(2){margin:0}
.address > .text img{width:40px; filter:invert(1); margin-right:15px}
.address > .text > p{margin:0}
.address > .text .content:nth-child(2) p{margin:0}
.address > .text .content:nth-child(2) p a{display:flex; align-items:center; height:60px;}
.address .image{display:block; position:relative; width:66.7%; height:420px; margin:0; background-repeat: none; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;color:#FFF; background-image: url("../../../images/background/tipps-1920x1280.jpg");}
.address > .image p{display:block; position: absolute; bottom:15px; right:15px; width:calc(50% - 30px); background:#004A98;  color:#FFF; border-radius:5px; margin:0; padding:10px; box-sizing:border-box;}

@media (max-width: 1000px) {
  .address > .text, .address > .image{width:50%}
  .address > .image p{width:calc(100% - 30px)}
}
@media (max-width: 700px) {
  .address > .text, .address > .image{width:100%}
  .address > .image{margin-top:30px}
}

/* TABELLE TIPPS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.field-lightgrey{background:#eee;padding:15px; margin:40px 0}
.tab-tipps{border-collapse: collapse; margin:20px 0}
.tab-tipps tr:nth-child(odd){background:#ddd}
.tab-tipps tr:first-child{background:#004A98; color:#FFF}
.tab-tipps td{padding:5px}
.tab-2col td{width:50%;}
@media (max-width: 500px) {
  .tab-tipps{font-size:14px; line-height:20px}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact-space{border-style: solid; border-width: 80px 0; border-color:#FFF}
.contact{width:100%; height:240px; position:relative}

.contact > .content{position:relative; padding-left:15px; box-sizing:border-box;}
.contact > .content p:nth-child(1){color:#FFF; font-size:40px; line-height:50px; font-weight:300; text-transform: uppercase; padding:30px 0 10px 0; margin:0;}
.contact > .content p:nth-child(2){display:flex;}
.contact > .content img{width:40px;}
.contact > .content a {margin:15px 30px 0 0; display:block; text-align:center; color:#FFF}
.contact > p > .content{position:absolute; top:-50px; right:15px; width:320px; height: 320px; border-radius:15px; background-repeat: none; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;color:#FFF; background-image: url("../../../images/background/team-1920x1280.jpg");}
.contact > p > .content span{position:absolute; bottom:30px; right:30px; padding:10px 20px; background:#000; border-radius:5px; margin:0}
.contact > p > .content:hover span{background:#004A98;}

@media (max-width: 1000px) {
  .contact > .content p:first-child{font-size:30px; line-height:40px;}
}
@media (max-width: 700px) {
  .contact{height:auto}
  .contact-space{border-width: 0 0 80px 0}
  .contact > .content{padding-left:0}
  .contact > .content p:nth-child(2){justify-content:center}
  .contact > .content a:last-child {margin:15px 0 0 0}
  .contact > p > .content{position:relative; width:100%; height:180px; top:0; right:0; border-radius:0; display:block}
  .contact > p > .content p:nth-child(2),.contact > .content:nth-child(1) p:nth-child(1){text-align:center;}
  .contact > p > .content img{margin:15px}
  .contact > p > .content p:nth-child(2){justify-content:center}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{display:flex; flex-wrap:wrap; margin:0; padding:0}
.team li{list-style-type:none; width:calc(33.33% - 30px); margin:15px; padding:15px; box-sizing:border-box; border-radius:15px; background: linear-gradient(315deg, rgba(221,221,221,1) 0%, rgba(210,210,210,1) 55%, rgba(242,242,242,1) 100%);}
.team img{background:#666; margin-bottom:0}
.team p{margin:0}
.team p:nth-child(2){font-weight:700;}
.team p:nth-child(3){margin-bottom:10px}
.team span{display:none}
@media (max-width: 800px) {
  .team li{width:calc(50% - 30px)}
}
@media (max-width: 500px) {
  .team li{width:100%; margin:15px 0}
}

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{margin-top:40px}
.partner h3{font-size:30px; line-height:40px; padding:0}
.partner p{margin:0}
.partner > .content{display:flex; flex-wrap:wrap; margin-top:20px}
.partner > .content p{display:block; margin:7.5px; border-radius:9px; width:100px; height:100px; background:#004A98;}
.partner > .content p:hover{background:#000}
.partner > .content img{width:100%; height:auto; padding:10px; box-sizing:border-box}
.partner > .content .small{padding:25px}
@media (max-width: 500px) {
  .partner > .content{justify-content:center}
}
@media (max-width: 380px) {
  .partner > .content p{width:75px; height:75px}
}

/* SERVICES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.services{display:flex; flex-wrap:wrap; margin-top:50px}
.services > .content{width:50%; box-sizing:border-box; padding-right:15px}
.services > .content p:first-child{margin-bottom:10px}
@media (max-width: 600px) {
  .services > .content{width:100%;padding-right:0}
}

/* PROCUDTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.products{display:flex; flex-wrap:wrap; margin:40px 0 20px 0; justify-content:center}
.products > p{padding:0 30px; text-align:center}
.products > p img{width:120px; padding:20px; box-sizing:border-box; border-radius:9px}
.products > p:nth-child(1) img{background:#004A98}
.products > p:nth-child(2) img{background:#004A98}
.products > p:nth-child(3) img{background:#004A98}


/* PROCUDT OVERVIEW
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.product_overview{display:flex; flex-wrap:wrap; margin-bottom:20px}
.product_overview p{position:relative; width:33.33%; height:340px; background-repeat: none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center}
.product_overview p:nth-child(1){background-image: url("../../../images/background/kueche-1920x1280.jpg")}
.product_overview p:nth-child(2){background-image: url("../../../images/background/waschraum-1920x1280.jpg")}
.product_overview p:nth-child(3){background-image: url("../../../images/background/kuechenbau-1920x1280.jpg")}
.product_overview p a{position:absolute; top:0; left:0; width:100%; height:100%; display:block; color:#FFF}
.product_overview span{display:block; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); background:#000; padding:10px 20px; border-radius:5px}
.product_overview a:hover span{background:#004A98; color:#FFF}

@media (max-width: 600px) {
  .product_overview p{width:100%; height:180px;}
  .product_overview span{font-size:20px; padding:5px 10px; bottom:25px}
}

/* ISSUU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.magazine{margin-top:50px}
.magazine > .issuu{display:flex; flex-wrap:wrap}
.magazine > .issuu > .content{width:50%; box-sizing:border-box}
.magazine > .issuu > .content:nth-child(1){padding-right:7.5px}
.magazine > .issuu > .content:nth-child(2){padding-left:7.5px}
.magazine h3{width:100%; font-size:30px; line-height:40px}
.magazine > .issuu iframe{width:100%; height:320px; border:none}
.stopfloat{clear:both}
@media (max-width: 700px) {
  .magazine > .issuu > .content{width:100%}
  .magazine > .issuu >  .content:nth-child(1){padding-right:0}
  .magazine > .issuu >  .content:nth-child(2){padding-left:0}
}

/* HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_after{display:flex; flex-wrap:wrap; margin-top:70px}
.home_after > .content{width:50%; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; color:#FFF}
.home_after > .content:nth-child(1){padding-right: 10px;}
.home_after > .content:nth-child(1) p{display:block; width:100px; height:100px; border-radius:15px; margin:0 0 30px 0; background:#DDD; padding:15px; box-sizing:border-box}
.home_after > .content:nth-child(1) p:nth-child(n+5){margin:0}
.home_after > .content:nth-child(1) p:nth-child(1){background:#ef83b3}
.home_after > .content:nth-child(1) p:nth-child(2){background:#9962a4}
.home_after > .content:nth-child(1) p:nth-child(3){background:#7a81be}
.home_after > .content:nth-child(1) p:nth-child(4){background:#64bd9f}
.home_after > .content:nth-child(1) p:nth-child(5){background:#bccf01}
.home_after > .content:nth-child(1) p:nth-child(6){background:#ffcd1c}
.home_after > .content:nth-child(1) p:nth-child(7){background:#f7a70a}
.home_after > .content:nth-child(1) p:nth-child(8){background:#ed694b}
.home_after > .content:nth-child(2){padding-left: 10px;}
.home_after > .content:nth-child(2) p{width:100%; display:flex; justify-content:center; align-items:center; margin:0 0 0 15px; background:#004A98; border-radius:15px}
.home_after > .content:nth-child(2) p img{width:80%; height:auto}

@media (max-width: 700px) {
  .home_after{display:none}  
}

/* QUICKNAV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.quicknav {position:fixed; left:30px; top:33px; z-index:2}
.quicknav > .custom{display:flex; flex-wrap:wrap; width:180px;}
.quicknav img{height:30px; width:auto; padding:0 7.5px; filter:brightness(1) drop-shadow(0 0 2px #004A98); }
.quicknav > .custom > p > a{position:relative}
.quicknav > .custom > p > a:hover:after{position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); font-size:12px; line-height:12px; color:#FFF; padding:3px; border-radius:3px; text-align:center; width:120px}
.quicknav > .custom > p:nth-child(1) > a:hover::after{content:"6048 Horw"}
.quicknav > .custom > p:nth-child(2) > a:hover::after{content:"+41 41 348 08 40"}
.quicknav > .custom > p:nth-child(3) > a:hover::after{content:"info@suesshaushalt.ch"}
.quicknav > .custom > p:nth-child(4) > a:hover::after{content:"Kontaktformular"}
@media (max-width: 700px) {
  .quicknav{top:15px; left:15px}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; top:30px; right:25px; z-index:10}
nav > ul {position:fixed; top:0; right:0; width:320px;}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; }
nav > ul > li:first-child{padding-top:80px}
nav > ul > li{width:100%; padding:0; margin:20px 0}
nav > ul > li,nav > ul > li > a{font-weight:bold}
nav > ul > li > a{text-transform:uppercase}
nav a, nav, nav a:visited, nav:visited{color:#FFF}
nav a:hover{color:#004A98}
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 .menu {height: 0;  transition: height .2s ease-out;	text-align: center;}

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 13px 0px; position: relative; z-index:2; background:#004A98; border:solid 5px #004A98}
nav .menu-icon:hover{background:#004A98}
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: 11px;}
nav .menu-icon .navicon:after {top: -11px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,0.8)}
nav .menu-btn:checked ~ .menu-icon {background:#000; border-color:#000}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  background: #FFF; transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  background: #FFF; 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: 700px) {
  nav{top:10px; right:20px} 
  nav > ul {width:100%;}
}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.newsflash-horiz{margin: 0; list-style-type: none; padding: 0 7.5px 50px 7.5px; display:flex; justify-content:space-between;}
.newsflash-horiz li{position:relative;margin:7.5px; border-radius:15px}
.newsflash h3{padding-left:15px}
.newsflash-horiz h4{position:absolute; bottom:20px; right:0; margin:0; font-size:20px;line-height:20px; color:#FFF; padding:10px 15px; background:#000; border-radius:9px 0 0 9px; font-weight:300}
.newsflash-horiz .readmore{position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column-reverse; text-align:center;  padding-bottom:20px; box-sizing:border-box; font-size:12px; line-height:16px; font-weight:700}
.newsflash-horiz .readmore:hover:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);border-radius:15px;}
.newsflash-horiz span{display:none}
.newsflash-horiz p{margin:0; line-height:0}
.newsflash-horiz a{color:#FFF!important; filter:drop-shadow(0 0 1px #000)}
.newsflash-horiz img{border-radius:15px; overflow:hidden}

.news{margin:0; padding:50px 0 0 0}
.news h1{color:#000; font-size:40px; line-height:50px; margin-bottom:20px; font-weight:300; text-transform:uppercase }
.news h2{font-size:30px; line-height:40px;}
.newsimg{width:auto; height:auto}

@media (max-width: 700px) {
  .newsflash-horiz{flex-wrap:wrap;}
}
@media (max-width: 500px) {
  .newsimg{width:100%}
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{height:100px; display:flex; align-items:center;}
footer .custom{width:100%}
footer p{display:block; position:relative; width:100%; margin:0; padding:15px; box-sizing:border-box}
footer a, footer a:visited{color:#FFF; margin-right:30px}
footer a:hover{color:#000}
footer a:last-child{position:absolute; right:15px; top:50%; transform:translateY(-50%); margin-right:0}

@media (max-width: 600px) {
  footer{height:auto}
  footer p{text-align:center}
  footer a{margin:0 7.5px}
  footer a:last-child{position:relative; width:100%; display:block; transform:translateY(0); margin:15px 15px 0 15px; font-size:14px}
 
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; top:0; left:0; width:100%; height: 100px; background:#004A98; z-index:9}
@media (max-width: 700px) {
  header{position:absolute; height:140px}
}

/* LOGO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo{position:absolute; top:20px; left:50%; transform:translateX(-50%); width:250px; height:60px; z-index:3}
.logo img{width:100%}
@media (max-width: 700px) {
  .logo{top:60px}
}

/* TITLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.title{width:100%; height:100vh; display:flex; justify-content:center; align-items: center; flex-direction:column; text-align:center; background:rgba(0,0,0,0.3)}
.title > h1{margin-top:200px}
.title > p{font-size:40px; line-height:50px; font-weight:300; text-transform: uppercase; padding:10px 0; color:#FFF}
.title a, .title a:visited{color:#FFF}
.title a:hover{color:#004A98}
.title > .content{width:100%; max-width:768px; display:flex; justify-content:space-around; margin-top:20px}
.title > .content p{width:200px; font-weight:700; margin:0 7.5px}
.title > .content p img{width:140px; height:140px; padding:15px; box-sizing:border-box; border-radius:15px}
.title > .content p:nth-child(1) img{background:#7a81be}
.title > .content p:nth-child(2) img{background:#bccf01}
.title > .content p:nth-child(3) img{background:#f7a70a}
.title > .content p:hover img{background:#004A98}

@media (max-width: 700px) {
  .title > p{font-size:20px; line-height:30px;}
  .title > .content{transform:scale(0.75)}
}
@media (max-width: 500px) {
.title > h1{margin-top:240px}
}
@media (max-width: 350px) {
  .title > .content{transform:scale(0.6)}
}

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

a, a:visited{color: #000; text-decoration: none}
a:hover{color:#004A98}
strong,bold {font-weight: 700;}

.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
img{width:100%; height:auto}

p{margin:0 0 20px 0}
h1,h4{font-weight: 700}
h2, h3{font-weight: 300; text-transform: uppercase;}
h1{font-size:80px; line-height:100px; margin:0; color:#FFF}
h1 a,h1 a:visited{color:#FFF}
h2,h3{font-size:40px; line-height:50px; margin:0; padding:0 0 20px 0; color:#000}
h4{font-size:20px; line-height:30px; margin:0; padding:0 0 10px 0; color:#000}

.btn{padding:10px 15px; background:#004A98; color:#FFF!important; border-radius:9px}
.btn:hover{background:#000}

@media (max-width: 1200px) {
	h1{font-size:60px; line-height:80px}
	h2{font-size:40px; line-height:50px}
	h3{font-size:40px; line-height:50px}
}
@media (max-width: 750px) {
	body {font-size: 18px; line-height: 28px;}
	h1{font-size:40px; line-height:50px}
	h2,h3{font-size:30px; line-height:40px}
}
@media (max-width: 400px) {
	h1{font-size:30px; line-height:40px}
	h2,h3,h4{font-size:20px; line-height:30px}
}

article{width:100%; max-width:1024px; margin:0 auto; padding:50px 15px; box-sizing:border-box;}
.layout{width:100%; max-width:1024px; margin:0 auto; box-sizing:border-box}

.bg_black{background:#000}
.bg_white{background:#FFF; position:relative}
.bg_blue{background:#004A98}

#start,#location{position:absolute; top:-100px; left:0}
#news{position:absolute; top:-140px; left:0}
@media (max-width: 700px) {
  #start,#location{top:-40px;}
  #news{top:-80px;}
}

/* BACKGROUND
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.bg_home:after{background: url("../../../images/background/home-1920x1280.jpg") center center; position:fixed;}
.bg_produkte:after{background: url("../../../images/background/produkte-1920x1280.jpg") center center; position:fixed;}
.bg_kueche:after{background: url("../../../images/background/kueche-1920x1280.jpg") center center; position:fixed;}
.bg_waschraum:after{background: url("../../../images/background/waschraum-1920x1280.jpg") center center; position:fixed;}
.bg_kuechenbau:after{background: url("../../../images/background/kuechenbau-1920x1280.jpg") center center; position:fixed;}
.bg_kompetenzen:after{background: url("../../../images/background/kompetenzen-1920x1280.jpg") center center; position:fixed;}
.bg_tipps:after{background: url("../../../images/background/tipps-1920x1280.jpg") center center; position:fixed;}
.bg_tipps_kueche:after{background: url("../../../images/background/tipps-kueche-1920x1280.jpg") center center; position:fixed;}
.bg_tipps_waschraum:after{background: url("../../../images/background/tipps-waschraum-1920x1280.jpg") center center; position:fixed;}
.bg_tipps_reparatur:after{background: url("../../../images/background/tipps-reparatur-1920x1280.jpg") center center; position:fixed;}
.bg_unternehmen:after{background: url("../../../images/background/unternehmen-1920x1280.jpg") center center; position:fixed;}
.bg_team:after{background: url("../../../images/background/team-1920x1280.jpg") center center; position:fixed;}
.bg_kontakt:after{background: url("../../../images/background/kontaktformular-1920x1280.jpg") center center; position:fixed;}
.bg_impressum:after{background: url("../../../images/background/impressum-1920x1280.jpg") center center; position:fixed;}
.bg_datenschutz:after{background: url("../../../images/background/datenschutz-1920x1280.jpg") center center; position:fixed;}
.bg_agb:after{background: url("../../../images/background/agb-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;
}


/* 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;}