/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{width:100%; height:200px; position:absolute; top:0; left:0; z-index:2; background: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);}

header .xlogo{position:absolute; top:30px; left:50%; transform:translateX(-50%); width:clamp(250px, 20vw, 400px); transition:0.5s; z-index: 9999;}
.home header .xlogo{top:7vh; width:clamp(250px, 30vw, 600px);}
header .xlogo p{margin:0; height: 100%;}
header .xlogo img{display:block; width:100%; height:auto}
header .xlogo:hover{height:calc(20vh - 10px)}
.home header .xlogo:hover{height:calc(75vh - (340px + 7vh))!important; transition:0.5s}
header .xlogo img:hover{cursor:pointer}

header .btns{position:fixed; right:30px; top:30px; }
header .btns p{margin:0 0 10px 0; position:relative; height:40px}
header .btns a{position:absolute; top:0; right:0; display:flex; width:40px; height:40px; background:#000; color:#FFF; align-items:center; justify-content:right; overflow:hidden; border-radius:5px; transition:0.5s}
header .btns a:hover{background:var(--red); color:#FFF; width:auto; transition:0.5s}
header .btns a img{width:26px; height:auto; margin:7px; filter:brightness(0)invert(1); order:1}
header .btns a span{order:0; padding:0 0 0 10px}

@media (orientation: portrait) {
	.home header .xlogo{top:7vh; width:clamp(250px, 60vw, 600px);}
}
@media (max-width: 700px) {
	header .btns{right:15px; top:15px}
}

/* HOME SLIDER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero_slider{margin:0 0 190px 0}
.n2-ss-slide{height:calc(100vh - 160px)!important;}

@media (max-width: 700px) {
	.hero_slider{margin:0 0 20px 0}
	.n2-ss-slide{height:50vh!important;}
}

/* HOME TEASER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_teaser{position:absolute; top:calc(100vh - 20px); left:50%; transform:translate(-50%,-100%); width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box}
.home_teaser > div{width:100%; display:flex; flex-wrap:wrap; gap:30px;}
.home_teaser p{width:calc(25% - 22.5px); padding:15px; box-sizing:border-box; background:var(--red); border-radius:15px; hyphens:auto; margin:0; transition:0.3s; font-size:16px; line-height:24px; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.75));}
.home_teaser p:hover{background:#000; transition:0.3s}
.home_teaser strong{display:block; font-size:20px; line-height:30px}
.home_teaser a,.home_teaser a:visited,.home_teaser a:hover{color:#FFF}
.home_teaser img{width:60%; margin:10px 20% 20px 20%; height:auto; filter:brightness(0)invert(1); transition:0.5s}
.home_teaser p:hover img{transform:scalex(-100%); transition:0.5s}

@media (orientation: portrait) {
	.home_teaser > div{gap:15px}
	.home_teaser p:hover{background:var(--red)}
	.home_teaser p:hover img{width:60%; margin:10px 20% 20px 20%}
}
@media (max-width: 1024px) {
	.home_teaser > div{gap:15px}
	.home_teaser p{width:calc(25% - 11.25px)}
	.home_teaser p:hover img{transform:none}
}
@media (max-width: 700px) {
	.home_teaser{position:relative; top:auto; left:auto; transform:none}
	.home_teaser p{width:calc(50% - 7.5px); filter:none}
	.home_teaser strong{text-align:center}
	.home_teaser span{display:none}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article figure{margin:0; width:100%; height:60vh;}
article figure img{width:100%; height:100%; object-fit:cover}

article .btn{display:inline-block; padding:15px 30px; background:var(--red); color:#FFF; margin:20px;}
article .btn:visited{color:#FFF}
article .btn:hover{color:#FFF; background:#000}

article .mod-articles-item{position:relative}
article .mod-articles-item .anker{position:absolute; top:-20px; left:0}

@media (max-width: 400px) {
.datenschutz article{hyphens:auto}
}
	
.com-content-article__body{margin:40px auto 60px auto; padding:0 15px; box-sizing:border-box; width:100%; max-width:var(--page)}

.home .com-content-article__body{display:flex; gap:30px; align-items:flex-end}
.home .com-content-article__body > div{width:calc(50% - 15px)}
.home .com-content-article__body .img p{text-align:center}
.home .com-content-article__body .img img{height:360px; width:auto;}

/* Scroll-Animation */
.home .com-content-article__body .img img {
	transform-origin:center center;
    animation: image-scale linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 50%;
}
@keyframes image-scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
} /* -------- */

.home .com-content-article__body .txt{display:flex; flex-wrap:wrap; justify-content:center; gap:30px; background:var(--red); border-radius:15px; margin:0 0 40px 0; padding:20px 0 0 0}
.home .com-content-article__body .txt p{color:#FFF}
.home .com-content-article__body .txt p:first-child{width:100%; font-size:26px; line-height:34px; text-align:center; margin:0}
.home .com-content-article__body .txt a,.home .com-content-article__body .txt a:visited{color:#FFF}
.home .com-content-article__body .txt a:hover{color:#000}
.home .com-content-article__body .txt img{width:40px; height:auto; filter:brightness(0)invert(1); display:block; margin:0 auto 10px auto; transition:0.5s}
.home .com-content-article__body .txt a:hover img{filter:brightness(0); transform:scalex(-100%); transition:0.5s}

@media (orientation: portrait) {
	.home .com-content-article__body .txt{padding:30px 0}
	.home .com-content-article__body .txt img{display:inline-block; margin:0 10px}
	.home .com-content-article__body .txt a{display:flex; align-items:center}
	.home .com-content-article__body .txt p{margin:0}
}
@media (max-width: 1024px) {
	.home .com-content-article__body{gap:15px; flex-direction:row}
	.home .com-content-article__body > div{width:calc(50% - 7.5px)}
	.home .com-content-article__body .txt a:hover{color:#FFF}
	.home .com-content-article__body .txt a:hover img{filter:brightness(0)invert(1);transform:none}
}
@media (max-width: 700px) {
	.home .com-content-article__body{flex-direction:column-reverse}
	.home .com-content-article__body > div{width:100%}
}


/* HOME TEASER ELECTRO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.teaser_elektro{width:100%; margin:60px 0 80px 0}
.teaser_elektro > div{width:100%; max-width:var(--page); margin:auto; display:flex; flex-wrap:wrap; gap:30px; padding:0 15px; box-sizing:border-box}
.teaser_elektro p{width:calc(33.333% - 20px); height:420px; margin:0; position:relative; overflow:hidden; border-radius:15px;}
.teaser_elektro p:last-child{width:100%; height:60px; background:#000; font-size:18px; border-radius:0}
.teaser_elektro p:last-child:hover{background:var(--red)}
.teaser_elektro a{display:flex; color:#FFF; width:100%; height:100%; justify-content:center; align-items:center}
.teaser_elektro a strong{display:flex; position:absolute; left:0; bottom:30px; height:70px; background:var(--red); width:100%; justify-content:center; align-items:center}
.teaser_elektro a:visited{color:#FFF}
.teaser_elektro a img{width:100%; height:100%; object-fit:cover; transition:1s}
.teaser_elektro a:hover{color:#FFF}
.teaser_elektro a:hover strong{background:#000}
.teaser_elektro a:hover img{width:120%; height:120%; transition:1s}

@media (max-width: 1024px) {
	.teaser_elektro > div{gap:15px}
	.teaser_elektro p{width:calc(33.333% - 10px)}
}
@media (orientation: portrait) {
	.teaser_elektro p{height:240px}
	.teaser_elektro a:hover img{width:100%; height:100%;}
	.teaser_elektro p:last-child:hover{background:#000}
	.teaser_elektro a:hover strong{background:var(--red)}
}
@media (max-width: 700px) {
	.teaser_elektro p{width:100%}
	.teaser_elektro p:last-child{height:80px; border-radius:15px}
	.teaser_elektro a strong{height:50px}
}

/* ELECTRO Beiträge
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.electro ul{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; list-style-type: none;}
.electro li{width:calc(50% - 15px)}
.electro figure{margin:0 0 20px 0; height:auto!important; border-radius:15px; border-left:30px solid var(--red); box-sizing:border-box; overflow:hidden;  line-height:0}
.electro img{width:100%; height:auto;}

/* Scroll-Animation */
.electro figure {
	transform-origin:center center;
    animation: electro-scale linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 40%;
}
@keyframes electro-scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
} /* -------- */

@media (max-width: 1024) {
	.electro ul{gap:15px}
	.electro li{width:calc(50% - 7.5px)}
}
@media (max-width: 700px) {
	.electro li{width:100%}
}

/* FIRMA Team
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{  width:100%; max-width:var(--page); margin:0 auto 80px auto; padding:0 15px; box-sizing:border-box}
.team ul{width:100%; display:flex; flex-wrap:wrap; gap:30px; list-style-type: none; margin:0; padding:0}
.team li{width:calc(33.333% - 20px); background:#FFF; border-radius:15px; overflow:hidden; padding:0 0 20px 0}

/* Scroll-Animation */
.team li {
	transform-origin:center center;
    animation: team-scale linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 20%;
}
@keyframes team-scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
} /* -------- */

.team figure{margin:0; height:auto!important; position:relative}
.team img{width:100%; height:auto; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
background-color: #000000}
.team p{padding:0 15px; margin:0; text-align:center}
.team strong{font-size:22px; line-height:32px; margin:0 0 30px 0; display:block; position:relative;}
.team strong:after{content:""; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); width:70px; height:5px; background:var(--red)}
.team em{font-style:normal; font-family:ubuntu-regular}

@media (max-width: 1024) {
	.team ul{gap:15px}
	.team li{width:calc(50% - 7.5px)}
}
@media (max-width: 700px) {
	.team li{width:100%}
}



/* FIRMA Partner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{width:100%; max-width:var(--page); margin:0 auto 80px auto; padding:0 15px; box-sizing:border-box}
.partner > div{display:flex; flex-wrap:wrap; gap:30px}
.partner p{width:calc(33.333% - 20px); aspect-ratio:2 / 1; background:#FFF; border-radius:15px; display:flex; text-align:center; align-items:center; margin:0; overflow:hidden}

/* Scroll-Animation */
.partner p {
	transform-origin:center center;
    animation: partner-scale linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 20%;
}
@keyframes partner-scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
} /* -------- */

.partner p a{display:block; position:relative; width:100%; height:100%}
.partner p a:after{content:"Website \25B8"; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); color:#FFF; display:flex; align-items:center; justify-content:center; opacity:0; transition:0.5s}
.partner p a:hover:after{opacity:1; transition:0.5s}
.partner img{width:100%; height:auto; transition:0.5s}
.partner a:hover img{transform:scale(0.9); transition:0.5s}

@media (max-width: 700px) {
	.partner > div{gap:15px}
	.partner p{width:calc(50% - 7.5px)}
}

/* JOBS Benefits
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.benefits{width:100%; max-width:var(--page); margin:0 auto 80px auto; padding:0 15px; box-sizing:border-box}
.benefits > div{display:flex; flex-wrap:wrap; gap:30px}
.benefits h2{width:100%; margin:0 0 0 0}
.benefits p{width:calc(33.333% - 20px); aspect-ratio:1 / 1; border-radius:15px; text-align:center; border:solid 3px #FFF; box-sizing:border-box; margin:0;}

/* Scroll-Animation */
.benefits p {
	transform-origin:center center;
    animation: benefits-scale linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 20%;
}
@keyframes benefits-scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
} /* -------- */

.benefits strong{display:block; font-size:150px; line-height:170px; margin:0 0 40px 0; position:relative}
.benefits strong:after{content:""; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); width:80%; height:5px; background:var(--red)}

@media (max-width: 700px) {
	.benefits > div{gap:15px}
	.benefits p{width:calc(50% - 7.5px); padding:0 0 20px 0}
}

/* JOBS Stellenangebote
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.stellenangebote{width:100%; max-width:var(--page); margin:0 auto 100px auto; padding:0 15px; box-sizing:border-box}
.stellenangebote a{display:block; width:100%; padding:15px; box-sizing:border-box; text-align:center; background:var(--red); color:#FFF; transition:0.3s}
.stellenangebote a:visited{color:#FFF}
.stellenangebote a:hover{background:#000; color:#FFF; transition:0.3s}

/* LEHRE Berufe
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.berufe{width:100%; max-width:var(--page); margin:0 auto 100px auto; padding:0 15px; box-sizing:border-box}
.berufe > div{display:flex; flex-wrap:wrap; gap:30px; width:100%}
.berufe h2{width:100%; margin:0}
.berufe .content{display:flex; flex-wrap:wrap; gap:15px; width:calc(50% - 15px)}
.berufe p{width:calc(50% - 7.5px); border:solid 3px #FFF; border-radius:15px; text-align:center; font-size:16px; padding:15px; box-sizing:border-box; margin:0; hyphens:auto}

/* Scroll-Animation */
.berufe p {
	transform-origin:center center;
    animation: berufe-scale linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 20%;
}
@keyframes berufe-scale {
    from {transform: scale(0);}
    to {transform: scale(1);}
} /* -------- */

.berufe strong{display:block; font-size:20px}
.berufe p:last-child{width:100%}
.berufe iframe{width:100%; aspect-ratio:16 / 9; height:auto; border:none; border-radius:15px}

@media (max-width: 700px) {
	.berufe > div{gap:50px}
	.berufe .content,
	.berufe p{width:100%} 
}

/* LEHRE Kontakt
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lehre_kontakt{width:100%; max-width:var(--page); margin:0 auto 100px auto; padding:0 15px; box-sizing:border-box}
.lehre_kontakt p{display:flex; flex-wrap:wrap; gap:30px;}
.lehre_kontakt a{display:inline-block; padding:15px; box-sizing:border-box; background:var(--red); color:#FFF; width:calc(50% - 15px); text-align:center; transition:0.3s}
.lehre_kontakt a:visited{color:#FFF}
.lehre_kontakt a:hover{color:#FFF; background:#000; transition:0.3s}

@media (max-width: 700px) {
	.lehre_kontakt p{gap:15px;}
}

/* BLOG
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blog{background:var(--red)}
.blog > div{width:100%; max-width:var(--page); margin:60px auto 0 auto}
.blog h2{color:#FFF; padding:30px 15px 0 15px; box-sizing:border-box}
.blog p{margin:0}
.e-tec{width:100%; height:720px; border:none}

@media (max-width: 700px) {
	.e-tec{height:620px}
}

/* ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.address {
    view-timeline-name: --address-timeline;
    view-timeline-axis:block;
}
.address > div{width:100%; height:820px; overflow:hidden; position:relative}
.address .map:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(233,233,233,1); z-index:1; mix-blend-mode: multiply;}
.address iframe{position:absolute; top:50%; left:50%; transform:translate(-62.5%,-50%); width:200%; height:150%; z-index:1; filter:grayscale(1) brightness(1.1)}
.address .btn{position:absolute; top:calc(50% - 15px); left:25%; transform:translate(-50%,-50%); margin:0; z-index:2}
.address .btn img{width:40px; height:40px;}
.address .btn a:hover img{filter:brightness(0)invert(1)}
.address .content{position:absolute; top:50%; left:50%; transform:translateY(-50%); width:100%; max-width:calc((var(--page) / 2) - 15px); z-index:2; background:rgba(255,255,255,0.7); padding:30px; box-sizing:border-box; border-radius:15px; backdrop-filter: blur(2px);}
.address .content > p > img{width:100%; height:auto; }

/* Scroll-Anim */
.address .content > p > img {
    width:100%;
    height:auto;
    animation:address-scale linear both;
    animation-timeline:--address-timeline;
}
@keyframes address-scale {
    0% {transform:scale(0)}
    25% {transform:scale(1)}
    100% {transform:scale(1)}
}
/* ---------- */

.address .content > p:last-child{margin:50px 0}
.address .content > p:last-child a{display:block; position:relative; background:var(--red); padding:10px 20px; box-sizing:border-box; width:calc(100% - 10px); color:#FFF; border-radius:9px}
.address .content > p:last-child a:hover{background:#000}
.address .content > p:last-child a:visited{color:#FFF}
.address .content > p:last-child a img{width:150px; height:auto; position:absolute; top:50%; right:-10px; transform:translateY(-50%); filter: drop-shadow(5px 5px 5px #9d9d9c); transition:0.5s}
.address .content > p:last-child a:hover img{width:160px; transition:0.5s}
.address p{margin:0 0 10px 0}
.address address{font-style:normal}
.address address strong{padding:10px 0 0 0; display:block}
.address address a{display:flex; align-items:center;}
.address address a img{width:30px; height:auto; filter:brightness(0); margin:0 10px 0 0}
.address address a:hover img{filter:none}

@media (max-width: 1000px) {
	.address .content{right:15px; width:calc(50% - 30px); max-width:none; padding:15px}
	.address .content > p:last-child{margin:30px 0 10px 0}
	.address .content > p:last-child a img{width:100px; right:-30px}
	.address .content > p:last-child a:hover img{width:100px}
}
@media (max-width: 700px) {
	.address > div,.address{height:auto}
	.address .map:after,.address .btn{display:none}
	.address .googlemaps{position:relative; width:100%; height:300px; overflow:hidden}
	.address iframe{width:300%; transform:translate(-50%,-50%);}
	.address .content{position:relative; top:auto; left:auto; right:auto; transform:none; width:100%; border-radius:0; z-index:0}
	.address .content > p:last-child{margin:30px 0}
	.address .content > p:last-child a img{right:-10px}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer{background:#000; width:100%}
.footer > div{width:100%; height:100px; max-width:var(--page); margin:auto; padding:15px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:30px; position:relative}
.footer p{margin:0}
.footer a,.footer > div a:visited{color:#FFF; display:flex; align-items:center;}
.footer a:hover{color:var(--red)!important}
.footer img{width:30px; height:30px; filter:brightness(0)invert(1); margin:0 10px 0 0}
.footer a:hover img{filter:none}
.footer p:last-child{position:absolute; top:50%; right:15px; font-size:16px; transform:translateY(-50%)}

@media (max-width: 700px) {
	.footer > div{height:auto; padding:30px 15px} 
	.footer p:last-child{position:relative; top:auto; right:auto; transform:none}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--red:rgb(231,60,59); --lightgray:rgb(230,230,230); --trans:rgba(0,0,0,0); --page:1024px}

@font-face {font-family: 'ubuntu-regular'; src: url('../fonts/Ubuntu-Regular.woff') format('woff'), url('../fonts/Ubuntu-Regular.woff2') format('woff2')}
@font-face {font-family: 'ubuntu-bold'; src: url('../fonts/Ubuntu-Bold.woff') format('woff'), url('../fonts/Ubuntu-Bold.woff2') format('woff2')}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: var(--lightgray); font-size: 20px; line-height: 30px; font-family: ubuntu-regular, sans-serif; color: #000; overflow-x:clip}
a{color:#000; text-decoration: none}
a:visited{color:inherit}
a:hover{color:var(--red)}
strong {font-family: ubuntu-bold; font-weight:normal}
p {margin:0 0 20px 0}
img{-webkit-user-drag:none; user-drag:none}

h1,h2,h3{font-family: ubuntu-bold; font-weight:normal; color:#000; margin: 0 0 20px 0}
h1{font-size:40px; line-height:50px}
h2{font-size:40px; line-height:50px}
h3{font-size:30px; line-height:40px; margin:0 0 10px 0}

@media (max-width: 1000px) {
	.hyphens h1{hyphens:auto}
}
@media (max-width: 700px) {
	h1{font-size:30px; line-height:40px}
	h2{font-size:26px; line-height:32px}
	h3{font-size:24px; line-height:28px}
	.hyphens article{hyphens: auto;}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed;top:0;left:0;z-index:33;width:100%;max-width:420px;transform:translateX(0)}
nav>ul{margin:0;padding:0;line-height:24px;float:left;width:100%; max-width:420px}
nav>ul>li{list-style:none;text-align:center;float:none;padding-top:17px}
nav>ul>li>a{display:block;padding:5px 0;margin:10px 0;text-decoration:none;text-transform:uppercase;font-size:30px;color:#FFF}
nav>ul>li>a:visited{color:#FFF}
nav>ul>li>a:hover{color:#000}
nav a:hover,nav>ul>li>ul>li a:hover{color:#000}
nav ul li ul{display:none;padding:0;position:relative;float:none;width:auto;left:0}
nav ul li:hover>ul{display:block}
nav ul li ul li{list-style:none;margin:10px 0;text-align:center;padding:0}
nav>ul>li>ul>li a{padding:0;width:100%;font-weight:bold;color:#000}
nav>ul li ul li ul{left:auto;top:auto}
nav>ul>li>a:after{content:none}
.nav{z-index:1;background:var(--red);position:fixed;top:0;left:0;padding:10px 0 0 0;height:100vh;width:100%;box-sizing:border-box;display:none}
nav>[type="checkbox"],nav>label{display:none}

@media screen and (min-width:0px){
	nav{left:auto;transform:none;width:auto}
	nav>label{display:block;width:30px;height:24px;cursor:pointer;position:absolute;top:32px;left:30px;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,0) 37%,rgba(0,0,0,1) 37%,rgba(0,0,0,1) 63%,rgba(0,0,0,0) 63%)}
	nav>label:hover,
	nav>label:hover:before,
	nav>label:hover:after{width:40px;transition:0.3s}
	nav>label:before,nav>label:after{content:'';display:block;height:6px;background:#000;position:absolute;left:0;transition:0.3s}
	nav>label:before{top:-6px;width:20px}
	nav>label:after{bottom:-6px;width:40px}
	nav>label.scrolled:before,
	nav>label.scrolled:after{background:#000}
	body.scrolled nav>label{background:linear-gradient(0deg,rgba(0,0,0,0) 37%,rgba(0,0,0,1) 37%,rgba(0,0,0,1) 63%,rgba(0,0,0,0) 63%)}
	body.scrolled nav>label:before,
	body.scrolled nav>label:after{background:#000}
	
	[type="checkbox"]:checked~.nav{display:block}	
	[type="checkbox"]:checked~label{height:40px;width:40px;top:26px;background:none}
	[type="checkbox"]:checked~label:before,
	[type="checkbox"]:checked~label:after{width:40px;top:15px;background:#FFF;transform:rotate(45deg)}	
	[type="checkbox"]:checked~label:after{transform:rotate(-45deg)}}

@media (max-width: 700px) {
	nav>label{top:26px; left:15px}
	[type="checkbox"]:checked~label:before,
	[type="checkbox"]:checked~label:after{top:10px}
}