/* EINFACH BEWERBEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.einfach_bewerben{width:100%; background:var(--gardient_grey); border-top:solid #FFF 80px; margin:80px 0 0 0}
.einfach_bewerben > div{width:100%; max-width:1024px; height:340px; box-sizing:border-box; padding:25px 15px; box-sizing:border-box; margin:auto; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between}
.einfach_bewerben h2{position:absolute; top:-80px; left:15px}
.einfach_bewerben .image{width:calc(50% - 15px); height:100%; border-radius:15px; overflow:hidden;}
.einfach_bewerben .image img{width:100%; height:100%; object-fit:cover}
.einfach_bewerben .text{width:calc(50% - 15px); height:100%; display:flex; flex-wrap:wrap; align-content:space-around}
.einfach_bewerben .text p{color:#FFF; text-align:center; width:100%; position:relative}
.einfach_bewerben .text p:first-child{text-align:left}
.einfach_bewerben .text p a{position:relative; padding:20px 30px; border-radius:9px; background:var(--gardient_yellow); color:#000}
.einfach_bewerben .btn{display:inline-block; position:relative; overflow:hidden}
.einfach_bewerben .btn .flash{position:absolute; top:0; left:0; width:50px; height:90px; transform:translate(-50%); rotate:10deg; background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); animation: 5s flash_anim infinite}
.einfach_bewerben .text p a:hover{background:var(--red); color:#FFF}

@keyframes flash_anim {
	 0%{left:-30px} 
	20%{left:120%}
	100%{left:120%}
}

@media (max-width: 700px) {
	.einfach_bewerben > div{height:auto}
	.einfach_bewerben h2{top:-60px}
	.einfach_bewerben .image{width:100%; height:240px; margin:0 0 20px 0}
	.einfach_bewerben .text{width:100%}
	.einfach_bewerben .text p{text-align:left}
	.einfach_bewerben .text p a{display:inline-block}
}


/* HEGI-NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hegi_news{width:100%; max-width:var(--page); margin:0 auto 80px auto; padding:0 15px; box-sizing:border-box;}
.hegi_news > div > div{position:relative;padding-top:max(60%,326px);height:0;width:100%}
.hegi_news iframe{position:absolute;border:none;width:100%;height:100%;left:0;right:0;top:0;bottom:0; border-radius:15px}

/* JOBS-HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jobs_hero{margin:100px 0 0 0; height:60vh; overflow:hidden}
.jobs_hero .n2-ss-slide,
.jobs_hero .n2-ss-slider .n2-ss-slide--focus{height:60vh!important}

/* ANSPRECHPARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ansprechpartner{margin:240px 0 100px 0; position:relative; z-index:2}
.ansprechpartner:before{content:"Deine Ansprechpartner"; position:absolute; left:calc((50%  + 15px) - (var(--page) / 2)); top:-170px; font-size:40px; line-height:50px; font-family:raleway-bold}
.ansprechpartner:after{content:""; width:100vw; height:210px; position:absolute; z-index:-1; bottom:-20px; left:50%; transform:translateX(-50%); background:var(--gardient_grey); }
.ansprechpartner > div{width:100%; max-width:var(--page); margin:auto; padding:15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px;}
.ansprechpartner > div > div{width:calc(50% - 15px); background:var(--lightgrey); border-radius:15px; position:relative; padding:140px 15px 0 15px; box-sizing:border-box}
.ansprechpartner figure{width:260px; height:260px; border:solid 10px #FFF; box-sizing:border-box; border-radius:50%; overflow:hidden; margin:0; position:absolute; top:0; left:50%; transform:translate(-50%,-50%)}
.ansprechpartner figure img{width:100%; height:100%; object-fit:cover}
.ansprechpartner h3{margin:0; text-align:center}
.ansprechpartner > div > div *:nth-child(3){text-align:center; border-bottom:solid 3px #FFF; padding:0 0 10px 0}
.ansprechpartner a{display:flex; align-items:center;}
.ansprechpartner a:hover{color:var(--red)!important}
.ansprechpartner a img{width:30px; height:30px; filter:brightness(0); margin:0 10px}
.ansprechpartner a:hover img{filter:none}

@media (max-width: 700px) {
	.ansprechpartner:before{left:15px}
	.ansprechpartner > div > div{width:100%}
	.ansprechpartner > div > div:first-child{margin:0 0 140px 0}
}
@media (max-width: 500px) {
	.ansprechpartner:before{top:-210px;}
}

/* JOBDETAILS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jobdetails{width:100%; display:flex; flex-wrap:wrap; margin:40px 0 60px 0}
.jobdetails > div{width:50%; padding:0 10px 0 0; box-sizing:border-box}
.jobdetails h3{margin:0 0 10px 0}
.jobdetails ul{margin:0; padding:0 0 0 24px}

@media (max-width: 700px) {
	.jobdetails > div{width:100%; margin:0 0 20px 0}
}

/* FORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.formular{position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.75); z-index:999; backdrop-filter:blur(5px); display:none}

.formular_jobs{background:#FFF; width:280px; max-height:calc(100vh - 100px); border-radius:15px; font-size:16px; line-height:22px; overflow-y: auto; position:relative}
.formular_jobs fieldset{border:none; padding: 15px;}
.formular_jobs .job_label{margin:0 0 0 10px}
.formular_jobs .job_group > div > .job_label{font-family:raleway-bold; font-size:18px; margin:0}
.formular_jobs .job_group > div > div{margin:10px 0 0 0}
.formular_jobs .space{margin:0 0 10px 0}
.formular_jobs .textfield input,
.formular_jobs .textfield textarea,
#modvisform132viscaptcha_response{width:100%; border:none; border-bottom: solid 1px #333; color:#000;}
.formular_jobs .textfield textarea{border: solid 1px #333; border-radius:5px; padding:5px; box-sizing:border-box}
.formular_jobs .datenschutz{margin:20px 0 10px 0}
.formular_jobs .datenschutz > div > label{display:none}
.formular_jobs .datenschutz_label{margin:0 0 0 10px}
.formular_jobs .datenschutz p{margin:0}
.formular_jobs .datenschutz a{margin:0 0 0 23px; display:inline-block; font-size:12px}
.formular_jobs .abschicken{width:100%; border:none; border-radius:5px; background:var(--gardient_yellow); font-family:raleway-bold; padding:10px 20px; margin:20px 0 -20px 0; curser:pointer}
.formular_jobs .abschicken:hover{background:var(--red); color:#FFF}
.formular_jobs .close{position:absolute; top:10px; right:10px; width:30px; height:30px; background:#000; border-radius:50%; color:#FFF; display:flex; align-items:center; justify-content:center; text-align:center; font-family:raleway-bold}
.formular_jobs .close:hover{background:var(--red)}

body.no-scroll {overflow: hidden}
.formular.active {display:flex; justify-content:center; align-items:center}

@media (min-width: 1000px) {
	.formular_jobs{width:560px}
	.formular_jobs .textfield{margin:20px 0}
	.formular_jobs fieldset{padding:30px}
	.formular_jobs .job_group > div > .job_label{font-size:26px; line-height:36px}
}

/* BTN Einfach bewerben
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn_bewerben{position:fixed; top:160px; right:0; z-index:9}
.btn_bewerben p{font-family:raleway-bold; font-size:16px; line-height:20px; text-align:center}
.btn_bewerben a{width:120px; height:130px; background:var(--gardient_yellow); border-radius:15px 0 0 15px; display:block}
.btn_bewerben a:hover{color:#FFF; background:var(--red)}
.btn_bewerben img{height:60px; width:auto; margin:10px 0}
.btn_bewerben a:hover img{filter:brightness(0) invert(1)}

@media (max-width: 700px) {
	.btn_bewerben{top:100px; transform:scale(0.75) translateX(20%);}
	.btn_bewerben a{width:100px}
}

/* BEWERBUNGSPROZESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bewerbungsprozess{}
.bewerbungsprozess > div{width:100%; max-width:var(--page); margin:auto; padding:15px; box-sizing:border-box}
.bewerbungsprozess .content{width:100%; margin:0 0 30px 0; border-radius:15px; background:var(--lightgrey); display:flex; flex-wrap:wrap; padding:15px 0}
.bewerbungsprozess .content:nth-child(4){margin:0 0 60px 0}
.bewerbungsprozess .content .b_title{width:33%; border-right:3px solid #FFF; padding:0 15px; box-sizing:border-box; display:flex; justify-content:center; align-content:center; flex-wrap:wrap}
.bewerbungsprozess .content .text{width:67%; padding:0 15px; box-sizing:border-box; display:flex; align-content:center; flex-wrap:wrap}
.bewerbungsprozess img{height:100px; width:auto; margin:20px 0 0 0}
.bewerbungsprozess h3{width:100%; text-align:center}
.bewerbungsprozess ul,
.bewerbungsprozess ol{margin:0}
.bewerbungsprozess p{margin:0 0 10px 0}

@media (max-width: 700px) {
	.bewerbungsprozess .content .b_title{width:100%; border-right:none; border-bottom:3px solid #FFF;}
	.bewerbungsprozess .content .text{width:100%; padding:15px;}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{width:100%; background:var(--gardient_grey); margin:280px 0 0 0; position:relative;}
.contact > div{width:100%; max-width:1024px; margin:auto; padding:25px 15px; box-sizing:border-box; position:relative; display:flex; flex-wrap:wrap; gap:15px}
.contact h2{position:absolute; top:-80px; left:15px; width:100%;}
.contact p, .contact h3{color:#FFF}
.contact address{color:#FFF; font-style:normal; width:calc(50% - 15px)}
.contact address a{display:flex; align-items:center; color:#FFF!important}
.contact address img{width:30px; height:30px; filter:brightness(0) invert(1); margin:0 10px 0 0}
.contact address a:hover img{filter:none}
.contact address a:hover{color:var(--red)!important}
.contact .content{width:calc(50% - 15px)}
.contact .content p{text-align:right}
.contact .content p:first-child{display:flex; align-items:center; justify-content:flex-end; margin:10px 0 30px 0}
.contact .content p:first-child a{margin:0 0 0 10px}
.contact .content p strong a{padding:10px 20px; border-radius:9px; background:var(--gardient_yellow); color:#000!important; margin:0 0 20px 0; display:inline-block; }
.contact .content p strong a:hover{background:var(--red); color:#FFF!important}
.contact .content img{width:30px; height:30px; filter:none}
.contact .content a:hover img{filter:brightness(0) invert(1);}
.contact a{color:#FFF!important}
.contact a:hover{color:var(--red)!important}

@media (max-width: 700px) {
	.contact{margin:120px 0 0 0}
	.contact h2{top:-60px;}
	.contact address,
	.contact .content{width:100%}
	.contact address{margin:0 0 30px 0}
	.contact .content p{text-align:left;}
	.contact .content p:first-child{justify-content:flex-start}
}
	

/* INFOBOX (BENEFITS + FIRMA)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.infobox{}
.infobox > div{width:100%; max-width:var(--page); margin:auto; padding:15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px}
.infobox .content{width:calc(50% - 15px); border-radius:15px; background:var(--lightgrey); padding:15px; box-sizing:border-box; overflow:hidden}
.infobox .content > p:first-child,
.benefits .infobox .content:last-child .text p:first-child,
.infobox h3{text-align:center;}
.infobox .content > p:first-child img,
.benefits .infobox .content:last-child .text p:first-child img{height:100px; width:auto; margin:10px 0 0 0; opacity:1}
.infobox h2{width:100%; margin:20px 0 0 0; position:relative}
.infobox h2 span, .vision h2 span{position:absolute; top:-140px}
.infobox h3{width:100%; border-bottom:solid 3px var(--red); padding:0 0 20px 0}
.infobox ul{margin:0 0 20px 0; padding:0 0 0 30px}
.infobox .image{background:url("../../../images/content/elektriker-werte-720x480.jpg"); background-size: cover}

.stellenangebot .infobox .content:last-child{display:none}

.benefits .infobox .content:last-child{width:100%; display:flex; flex-wrap:wrap; padding:0; }
.benefits .infobox .content:last-child .text{width:50%; padding:15px; box-sizing:border-box}
.benefits .infobox .content:last-child .image{width:50%; background:#333; background:url("../../../images/content/team-haende-720x480.jpg"); background-size: cover}

.vision{margin:20px 0 80px 0}
.vision h2{width:100%; position:relative}
.vision > div{width:100%; max-width:var(--page); margin:auto; padding:15px; box-sizing:border-box;}
.vision .content{width:100%; display:flex; flex-wrap:wrap; background:var(--lightgrey); border-radius:15px; overflow:hidden}
.vision .image{width:50%; background:url("../../../images/content/vision-720x480.jpg"); background-size: cover}
.vision .text{width:50%; padding:15px; box-sizing:border-box;}

@media (max-width: 700px) {
	.infobox .content{width:100%}
	.vision .content div{width:100%}
	.infobox .image{display:none}
	.vision .image{height:200px}
	.benefits .infobox .content:last-child .text{width:100%}
	.benefits .infobox .content:last-child .image{display:none}
}

/* DEFAULT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --red:rgb(224, 6, 19); 
    --yellow: rgb(249,205,0); 
    --lightyellow:rgb(249,232,141); 
	--g_darkgrey:rgb(44,44,44);
	--g_grey:rgb(144,144,144);
    --grey:rgb(77,77,77);
	--lightgrey:rgb(218,218,218);
    --gardient_yellow: linear-gradient(135deg, var(--lightyellow) 0%, var(--yellow) 100%);
    --gardient_grey: linear-gradient(135deg, var(--g_grey) 0%, var(--g_darkgrey) 100%);
    --page:1024px}

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

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

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

@media (max-width: 1000px) {
	.hyphens h1{hyphens:auto}
}
@media (max-width: 700px) {
	.hyphens article{hyphens: auto;}
	h1{font-size:36px; line-height:46px}
	h2{font-size:30px; line-height:40px}
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{background:#FFF; height:100px; width:100%; position:fixed; top:0; left:0; z-index:99; border-bottom:var(--lightgrey) 1px solid}
header .logo{width:100%; max-width:1024px; margin:auto; padding:20px 15px; box-sizing:border-box;}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article figure{margin:100px 0 0 0; width:100%; height:60vh; min-height:320px}
article figure img{width:100%; height:100%; object-fit:cover; }
.pos_hero_0 img{object-position:50% 0%}
.pos_hero_12 img{object-position:50% 12.5%}
.pos_hero_25 img{object-position:50% 25%}
.pos_hero_37 img{object-position:50% 37.5%}
.pos_hero_50 img{object-position:50% 50%}
.pos_hero_75 img{object-position:50% 75%}
.pos_hero_100 img{object-position:50% 100%}

.com-content-article__body{width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box; margin:0 auto; position:relative}
article .title{position:absolute; top:0; left:0; width:100%; height:160px; transform:translateY(-50%); border-radius:15px; background:var(--gardient_grey)}
article .title h1{color:#FFF; text-align:center; margin:20px 0 15px 0}
article .title p{color:#FFF; text-align:center; font-size:24px; font-family:raleway-bold}
.com-content-article__body > *:nth-child(2) {padding-top:calc(90px + 60px); margin:0 0 10px 0}

@media (max-width: 1024px) {
	article .title{border-radius:0}
}
@media (max-width: 700px) {
	article .title{height:auto}
	article .title p{font-size:20px; padding:0 10px}
	.com-content-article__body > *:nth-child(2){padding-top:90px}
}

/* JOBS NAV Stellenangeobte
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav_jobs{width:100%; min-height:320px; background:var(--lightgrey); border-radius:15px; display:flex; flex-wrap:wrap; overflow:hidden; position:relative}
.nav_jobs > div{width:50%}
.nav_jobs .image{min-height:320px; background:url("../../../images/content/elektriker-720x480.jpg"); background-size: cover; color:rgba(255,255,255,0); background-position: 50% 100%;}
.nav_jobs .links{padding:20px 20px 0 20px; box-sizing:border-box}
.nav_jobs ul{list-style-type: none; padding:0; margin:0}
.nav_jobs a{width:100%; min-height:80px; border-radius:9px; display:block; padding:25px; box-sizing:border-box; background:var(--gardient_yellow); font-family:raleway-bold; margin:0 0 20px 0}
.nav_jobs a:hover{color:#FFF!important; background:var(--red)}
.nav_jobs a:visited{color:#000}

.nav_jobs #jobs{position:absolute; top:-170px}

@media (max-width: 700px) {
	.nav_jobs > div{width:100%}
	.nav_jobs .image{display:none}
}

/* JOBS Videos
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jobs_videos{width:100%; margin:80px 0}
.jobs_videos > div{width:100%; max-width:1024px; box-sizing:border-box; padding:0 15px 30px 15px; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative}
.jobs_videos > div:after{content:""; width:100vw; height:160px; position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:var(--gardient_grey); z-index:-1}
.jobs_videos h2{width:100%}
.jobs_videos p{width:calc(50% - 15px); border-radius:15px; overflow:hidden; margin:0}
.jobs_videos iframe{width:100%; height:auto; aspect-ratio: 16 / 9; border:none}

@media (max-width: 700px) {
	.jobs_videos > div:after{display:none}
	.jobs_videos p{width:100%; margin:0 0 20px 0}
}

/* VIDEO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.video_einblick_alltag{margin:80px 0}
.video_einblick_alltag > div{width:100%; max-width:1024px; box-sizing:border-box; margin:auto; padding:0 15px; box-sizing:border-box}
.video_einblick_alltag .content{width:100%; padding:30px 30px 10px 30px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; background:var(--lightgrey); border-radius:15px}
.video_einblick_alltag .content > div{width:calc(50% - 15px)}
.video_einblick_alltag iframe{width:100%; height:auto; aspect-ratio: 16 / 9; border:none}
.video_einblick_alltag h3{margin:0 0 10px 0}

@media (max-width: 700px) {
.video_einblick_alltag .content > div{width:100%}
}


/* STIMMEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.stimmen_title{width:100%; max-width:1024px; box-sizing:border-box; padding:0 15px; margin:80px auto 40px auto; position:relative}

.stimmen > div{width:100%; max-width:1024px; box-sizing:border-box; padding:0 15px; margin:160px auto 0 auto; position:relative}
.stimmen > div > div{background:var(--lightgrey); border-radius:15px; min-height:320px; width:100%; position:relative; padding:30px 160px 10px 30px; box-sizing:border-box; margin:80px 0}
.stimmen > div > div:after{content:""; position:absolute; bottom:0; left:70px; transform:translateY(50%); background:url("../../../images/content/anfuehrungszeichen-63x55.svg"); width:63px; height:55px}
.stimmen figure{margin:0; width:260px; height:260px; border-radius:50%; overflow:hidden; border:solid 10px #FFF; position:absolute; top:160px; right:0; transform:translate(50%,-50%); box-sizing:border-box}
.stimmen figure img{width:100%; height:100%; object-fit:cover}
.stimmen p{font-size:30px; line-height:50px}
.stimmen p:last-child{font-size:20px; line-height:30px; text-align:right}

.stimmen > div > div:nth-child(even){padding:30px 30px 10px 160px}
.stimmen > div > div:nth-child(even):after{left:auto; right:70px}
.stimmen > div > div:nth-child(even) figure{right:auto; left:0; transform:translate(-50%,-50%)}
.stimmen > div > div:nth-child(even) p:last-child{text-align:left}

.jobs .stimmen > div{margin:auto;}
.jobs .stimmen > div > div{margin:40px 0}

.stimmen_btn{width:100%; max-width:1024px; box-sizing:border-box; padding:0 15px; margin:80px auto 40px auto;}
.stimmen_btn a{width:calc(33.33% - 20px); display:block; padding:20px; box-sizing:border-box; text-align:center; color:#000; background:var(--gardient_yellow); border-radius:9px; font-family:raleway-bold}
.stimmen_btn a:hover{background:var(--red); color:#FFF!important}
.stimmen_btn a:visited{color:#000}

@media (max-width: 1280px) {
	.stimmen > div > div{width:calc(100% - 130px)}
	.stimmen > div > div:nth-child(even){padding:30px 30px 10px 160px; margin:80px 0 80px 130px}
}

@media (max-width: 700px) {
	.stimmen > div{margin:220px auto 0 auto}
	.stimmen > div > div,
	.stimmen > div > div:nth-child(even){width:100%; padding:140px 15px 10px 15px; margin:180px 0}
	.stimmen > div > div:last-child{margin:140px 0 80px 0}
	.stimmen > div > div:after{left:auto; right:70px}
	.stimmen figure,
	.stimmen > div > div:nth-child(even) figure{top:0; right:50%; left:auto; transform:translate(50%,-50%); margin:0 auto 20px auto}
	.stimmen p{font-size:24px; line-height:34px}
	.stimmen p:last-child{text-align:left}
	.stimmen_btn a{width:100%;}
}

/* SITE BTNS + FRIMA BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site_btns{margin:30px 0 80px 0}
.site_btns > div,
.firma_btns{width:100%; max-width:1024px; margin:auto; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px}
.site_btns p,
.firma_btns p{width:calc(33.33% - 20px); margin:0}
.site_btns a,
.firma_btns a{width:100%; padding:20px; box-sizing:border-box; background:var(--gardient_yellow); border-radius:9px; color:#000; text-align:center; display:block; font-family:raleway-bold}
.site_btns a:hover,
.firma_btns a:hover{background:var(--red); color:#FFF!important}
.site_btns a:visited,
.firma_btns a:visited{color:#000}

@media (max-width: 700px) {
	.site_btns p,
	.firma_btns p{width:100%}
}

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

@media (max-width: 700px) {
	footer > div > div p:last-child{position:relative; top:auto; right:auto;}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {position:absolute; z-index:99; top:40px; right:calc(50% - 512px)}
nav > ul{margin:0; padding:0; line-height:24px}
nav > ul > li{float:left; text-align:center; list-style-type:none; margin:0 15px; font-family:raleway-bold}
nav > ul > li a{display:block; text-decoration:none; }
nav > ul > li a img{display:none}
nav ul li ul{display:none; position:relative; float:none; left:0; padding:0; list-style-type: none}


nav ul li a, nav ul li a:visited{text-transform:}
nav a:hover{color:var(--red);}

nav > [type="checkbox"], nav > label{display:none;}

@media (max-width: 1024px) {
	nav {right:0}
}

 @media screen and (max-width:768px){

    nav {position:fixed; left:auto; top:0; transform:none; width:auto}
	nav .nav{display:none;}
    
	nav > label{display:block; background:#000; width:40px; height:40px; cursor:pointer; position:absolute; top:15px; right:15px; z-index:2; border-radius:5px}
	nav > label:hover{background:var(--red)}
	nav > label:after{content:'';display:block;width:25px;height:3px;background:#FFF;margin:18px 7px;box-shadow:0px -10px 0px #FFF, 0px 10px 0px #FFF}
  
  	[type="checkbox"]:checked ~ label{background:var(--red)}
	[type="checkbox"]:checked ~ .nav{display:block;}
    [type="checkbox"]:checked ~ label:after{box-shadow:0px 10px 0px rgba(0,0,0,0), 0px 20px 0px rgba(0,0,0,0)}
  
    nav .nav{z-index:1; background:var(--gardient_yellow); position:fixed; top:0; right:0px; padding-inline-start: 0px; padding:60px 0 0 0; height:100vh; width:100%; max-width:320px; box-sizing:border-box}
  
    nav{left:0; width:100%; transform:translateX(0)}
	nav a:hover{color:#FFF}
    nav ul{float:left;margin:0; width:100%}
	nav ul li{display:block; text-align:center;}
	nav ul li:hover{background:none}
	nav ul > li{float:none; padding:15px 0 0 0}
	nav ul li ul li{display:block; float:none; padding:0; background:none; text-align:center; width:auto}
	nav ul li ul{display:block}
	nav > ul > li > a{padding:10px 0; margin:10px 0; border:none}
	nav > ul > li a img{display:block; margin: 0 auto 20px auto; height: 100px; width: auto;}
    nav > ul li ul li ul{left:auto; top:auto}
    nav > ul > li > a{text-transform:uppercase; font-size:30px; color:#000}
  	nav > ul > li > a:visited{color:#000}
	nav > ul > li > a:hover{color:var(--red)}
    nav > ul > li > ul > li a{width:100%; padding:10px 0; font-weight:strong; color:#FFF!important}
  
	nav > ul > li > a:after{content:none}
}

 @media screen and (max-width:700px){
	 nav .nav{max-width:none}
}