/*NEWS*/
.yjsg4-out:before{background:#FFF}
#yjsg4{background: #004390; padding:50px; margin:20px auto}

/*GLOBAL*/
.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;}
.pagetitle{display:none}
a:hover{color:#004390}
.yjsg3-out, .yjsg6-out{background:#ddd}
h1{margin-bottom:20px}
h2 .article-title{font-size:120%}/*Grösse Titel*/
#holder2{padding:50px 0}/*Abstand Inhalt zum Titelbild*/
.menu-image{display:none}
.yjsg-morearticles h3{display:none}

/*HOMEPAGE*/
#yjsg2{padding:0; width:100%}
#adv1{padding:0}

.home{position:relative; margin-bottom:80px}
.home img{width:100%}
.home-icons{position:absolute; bottom:-80px; width:100%; height:160px; display:flex; justify-content:center}
.home-icons > .content{width:160px; height:160px; border-radius:50%; background:#004390; margin:0 20px}
.home-icons > .content img{width:60%; margin:20%}
.home-icons > .content img:hover{width:80%; margin:10%}

@media only screen and (max-width: 740px){
  .home{position:relative; margin-bottom:35px}
  .home-icons{position:absolute; bottom:-35px; height:70px;}
  .home-icons > .content{width:70px; height:70px; border-radius:50%; margin:0 10px}
}

/*PARTNER*/
.partner{display:flex; flex-wrap:wrap; justify-content:flex-start; margin-left:-10px}
.partner img{width:100px; padding: 10px; background:#004390; margin:10px}
.partner img:hover{background:#ddd}
@media only screen and (max-width: 420px){
  .partner{justify-content:center; margin-left:0}
}

/*TEAM*/
.teaserarticles .siteteam{background:#ddd; padding-bottom:20px!important}
.teaserarticles .siteteam h2{display:none}
.teaserarticles .siteteam img{border:solid 1px #999; margin-bottom:10px; background:#aaa}
.teaserarticles .siteteam p{margin:0 10px; line-height:26px; font-size:16px; color:#333}
.teaserarticles .siteteam p:first-child{margin:0}

/*WERDE ELEKTRIKERIN*/
.werde-elektrikerin iframe{width:100%; height:260px; border:0}

/*HAUSHALTSAPPARATE*/
.haushaltsapparate{width:100%; display:flex; flex-wrap:wrap}
.haushaltsapparate > .content{width:calc(33.3% - 20px);}
.haushaltsapparate > .content:nth-child(2n){margin:0 30px}

@media only screen and (max-width: 740px){
  .haushaltsapparate > .content{width:100%}
  .haushaltsapparate > .content:nth-child(2n){margin:20px 0}
}

/*ISSUU*/
.issuu{width:100%; display:flex; margin-bottom:30px; flex-wrap:wrap}
.issuu > .content{width:50%;}
.issuu > .content:first-child{width:calc(50% - 10px);margin-right:10px}
.issuu > .content iframe{width:100%; height:420px; border:none}

@media only screen and (max-width: 740px){
  .issuu > .content,.issuu > .content:first-child{width:100%;margin:0}
}

/*MOVIE*/
.movie{width:700px; position:relative; margin:40px auto}
.movie iframe{width:calc(100% - 13px); height:387px; position:absolute; top:6px; left:7px; border:none}

@media only screen and (max-width: 740px){
  .movie{width:350px; position:relative; margin:40px auto}
  .movie iframe{width:calc(100% - 6px); height:193px; top:3px; left:3px;}
}
@media only screen and (max-width: 380px){
  .movie{width:280px}
  .movie iframe{width:calc(100% - 5px); height:154px;}
}

/*CONTACT-BODY*/
.contact-body{width:100%; position:relative; display:flex; justify-content:space-between; background:#004390; margin-bottom:50px}
.contact-body > .content{padding:20px 0 0 20px;}
.contact-body > .content > p:first-child{font-size:30px; color:#FFF; margin-bottom:20px}
.contact-body > .content > p:last-child{position:absolute; bottom:0; right:210px;}
.contact-body > .content a{color:#FFF}
.contact-body > .content a:hover{color:#000}
.contact-body > .content img{width:30px; margin-right:10px;}
.contact-body > a img{width:200px; height:200px; filter:grayscale(1);-moz-filter:grayscale(1);-o-filter:grayscale(1);-ms-filter:grayscale(1);-webkit-filter:grayscale(1);}
.contact-body > a img:hover{filter:grayscale(0);-moz-filter:grayscale(0);-o-filter:grayscale(0);-ms-filter:grayscale(0);-webkit-filter:grayscale(0);}

@media only screen and (max-width: 720px){
  .contact-body > a img,.contact-body > .content > p:last-child{display:none}
  .contact-body > .content > p:first-child{line-height:40px}
}

/*SEITE KOMPETENZEN*/
div.yjsg-newsitems div.multicolumns{margin-top:40px}
div.yjsg-newsitems div.multicolumns .yjsgarticle{padding:0; margin:15px}/*Abstände zwischen Felder*/
.sitekompetenzen > .teaserarticles .yjsgarticle{background:#ddd }/*Rahmen*/
.sitekompetenzen > .teaserarticles .yjsgarticle h2{margin:0; padding:10px; font-size:24px; background:#004390; color:#FFF}/*Titel*/
.sitekompetenzen > .teaserarticles .yjsgarticle p:last-child{padding:0 10px; color:#000}/*Text*/
.button, a.readon{padding:10px}/*Weiterlesen*/
a.readon:hover{background:#004390}/*Weiterlesen*/

/*KOMPETENZEN ÜBERSICHT*/
.kompetenzen{width:100%; display:flex; flex-wrap:wrap; margin-top:20px}
.kompetenzen > .content{width:calc(25% - 20px);background:#ddd; margin:0 10px 20px 10px; margin-bottom:20px; text-align:center; filter:grayscale(1);-moz-filter:grayscale(1);-o-filter:grayscale(1);-ms-filter:grayscale(1);-webkit-filter:grayscale(1);}
.kompetenzen > .content:hover{background:#004390;filter:grayscale(0);-moz-filter:grayscale(0);-o-filter:grayscale(1);-ms-filter:grayscale(0);-webkit-filter:grayscale(0);}
.kompetenzen > .content:hover a{color:#FFF;}
.kompetenzen > .content p{margin:0}
.kompetenzen > .content p:last-child{padding:10px 15px}

@media only screen and (max-width: 800px){
  .kompetenzen{justify-content:flex-start;}
  .kompetenzen > .content{width:calc(33% - 20px)}
} 
@media only screen and (max-width: 700px){
  .kompetenzen{justify-content:space-between;}
  .kompetenzen > .content{width:calc(50% - 20px)}
}
@media only screen and (max-width: 440px){
  .kompetenzen > .content p{font-size:14px; line-height:20px}
}

/*HEADERIMAGE*/
#yjsg3{width:100%; padding:0}
#user1{padding:0}
#user1 p{margin:0}
#user1 img{max-width:auto; width:100%}

/*FOOTER*/
#footmod{display:flex; justify-content:space-between}
#footmod a{color:#FFF}
#footmod p:first-child a{margin-right:20px}
#footmod p:last-child a{font-size:14px}
#footmod a:hover,#footmod p:last-child a:hover{color:#004390}

/*E-TEC*/
#yjsg6{padding:50px 0}
.e-tec h3{font-size:30px; margin-bottom:20px}
.e-tec iframe{width:100%; height:700px;border:none}

@media only screen and (max-width: 400px){
  .e-tec iframe{height:760px;}
}
@media only screen and (max-width: 320px){
  .e-tec iframe{height:780px;}
}

/*SITUATIONSPLAN*/
#yjsg7{width:100%;padding:0; background:#004390; color:#FFF}
#user21.yjsgxhtml{padding:0}
.situationsplan{width:100%}
.situationsplan iframe{width:100%; height:420px; border:0}
.situationsplan > .content{position:relative; max-width:970px;padding:15px; margin:0 auto;}
.situationsplan > .content > a img{position:absolute; top:30px; right: 15px; width:160px;}
address{line-height:30px; margin:20px 0}
address a{color:#FFF!important}
address a:hover{color:#000!important}
address img{width:30px; margin-right:10px}
address p:first-child{font-size:30px;}
address p:nth-child(2){padding-bottom:20px}

@media only screen and (max-width: 460px){
  .situationsplan > .content > a img{position:relative;top:auto; margin:20px 15px; }
}

/*HEADER+NAVI*/
#header{z-index:100; display:flex; justify-content:center; height:80px;-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);}/*Hamburgermenu anwählbar / Logo mittig*/
#logo, #logoholder{height:80px!important;}/*Header Höhe*/
#centertop{width:100%}/*Header Breite*/
.centertop-out{background:#004390}/*Header BG*/
#logoholder{padding:19px 0}/*Abstand Logo*/
#topmenu_holder{display:none!important}/*Standart Navi*/
.jf_mm_wrapper h2{display:none}/*Brand Hamburgermenu*/
.jf_mm_trigger{top:22px; left:20px;}/*Position Hamburgermenu*/
.centertop-out{border-bottom:none}/*Header ohne Border*/
#pathway{margin:0}/*Feldgrösse Modul Breadcrumb*/


/*CONTACT-ICONS*/
.contact-icons{position:fixed; top: 25px; right:10px; z-index:101}
.contact-icons img{width:30px; height:30px; margin:0 10px;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);}
.contact-icons img:hover{filter:invert(1);-moz-filter:invert(1);-o-filter:invert(1);-ms-filter:invert(1);}

@media only screen and (max-width: 750px){
  #header{height:110px}
  #logo, #logoholder{height:110px!important;}
  #logoholder{padding-top:55px}
  .contact-icons,.jf_mm_trigger{top: 10px}
  .contact-icons img{margin:0 5px}
}



/*HOTSPOTS*/
.hotspots{margin:50px 0 30px 0; width:100%; display:flex; justify-content:space-around; flex-wrap:wrap}
.hotspots > .content{text-align:center;}
.hotspots > .content img{width:200px; height:200px; border-radius:50%; border:solid 1px #004390; margin-bottom:10px; filter:grayscale(1);-moz-filter:grayscale(1);-o-filter:grayscale(1);-ms-filter:grayscale(1);-webkit-filter:grayscale(1);}
.hotspots > .content img:hover{filter:grayscale(0);-moz-filter:grayscale(0);-o-filter:grayscale(0);-ms-filter:grayscale(0);-webkit-filter:grayscale(0);}


@media only screen and (max-width: 450px){
  .hotspots > .content img{width:120px; height:120px; filter:grayscale(0);-moz-filter:grayscale(0);-o-filter:grayscale(0);-ms-filter:grayscale(1);-webkit-filter:grayscale(0);}
}

.cadre_alert_cookies{position:fixed; bottom:0; width:100%; z-index:201}

/*DIVERSES*/
div.yjsg-newsitems .width100{width:100%!important}


/* OLD VERSION OF HOMEPAGE
.gate{width:100%;height:auto;display:flex;flex-wrap:wrap;}
.gate > .content{width:33.333%; height:auto; position:relative; color:#FFF}
.gate > .content > .bg{opacity: 1; width:100%; height:calc(100vh - 200px); background-position: center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.gate > .content > .bg:hover{opacity: 0.2;}
.gate > .content > p{position:absolute; display:block; width:200px; padding:5px 0; background:#000; border-radius:5px; top:calc(50vh - 80px); left:calc(50% - 100px); text-align:center}

.more-content{width:100%;height:120px;display:flex;background:#004390;color:#FFF;align-items:center; justify-content:center}
.more-content:hover{background:#000; color:#FFF; padding-top:20px; height:100px}
.more-content p{transform:rotate(90deg)}
.more-content p:nth-child(2){transform:none; padding:0 30px; font-size:30px}
#more-content{position:absolute; top:-40px}

@media only screen and (max-width: 750px){
  .gate > .content{width:100%;}
  .gate > .content > .bg{height:20vh;}
  .gate > .content > p{bottom:10px; top:auto}
}
@media only screen and (max-width: 450px){
  .more-content p:nth-child(2){padding:0 10px; font-size:20px}
}
*/