/* BEWERBUNGSFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.formular{width:100%; max-width:1024px; margin:0 auto; padding:0 15px; box-sizing:border-box}
.formular fieldset{border:none; padding:0}
.formular .visCSSlabel{font-weight:bold}
.formular .btn{background:var(--orange); padding:5px 15px; border:none; color:#FFF; border-radius:5px;}
.formular .btn:hover{background:var(--anthrazit)}
.formular .trennlinie_abstand{margin:30px 0 0 0}

@media (max-width: 700px) {
	.formular .visCSSlabel{width:100%}
	.formular .visCSSinput, .formular .editor{width:100%}
	.formular .visCSSmargLeft, .bewerbungsformular .editor{margin-left:0}
	.formular p label{width:calc(100% - 50px); display: inline-block;}	
}
@media (max-width: 400px) {
  input[type="checkbox"], input[type="radio"]{width:20px!important}
  .visCSSright20{margin:0!important}
  .formular p label{width:calc(100% - 20px)}
  }

/* PARTNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner{}
.partner > div{width:100%; max-width:1024px; margin:0 auto 30px auto; display:flex; flex-wrap:wrap}
.partner h3{width:100%; padding:0 15px;}
.partner .content{margin:15px; width:calc(33.33% - 30px); padding:15px; box-sizing:border-box; background:var(--orange); border-radius:15px}
.partner ul{margin-block-start:0}
.partner a{color:var(--anthrazit)}
.partner a:visited{color:var(--anthrazit)}
.partner a:hover{color:#FFF}
.partner p{margin:0 0 10px 0}

@media (max-width: 700px) {
	.partner .content{margin:15px; width:calc(100% - 30px)}
}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team{margin:-20px 0 0 0}
.team > div{width:100%; max-width:1024px; margin:0 auto 30px auto; display:flex; flex-wrap:wrap}
.team > div > div{margin:15px; width:calc(33.33% - 30px); padding:15px; box-sizing:border-box; background:var(--orange); border-radius:15px}
.team figure{margin:0 0 15px 0}
.team img{width:100%; height:auto}
.team p{margin:0 0 0 0; font-size:16px; line-height:24px;}
.team strong{font-size:20px; margin:0 0 10px 0; display:block}
.team a,.team a:visited{margin:10px 0 5px 0; display:inline-block; color:#FFF}
.team a:hover{color:var(--anthrazit) }

@media (max-width: 700px) {
	.team > div > div{width:calc(50% - 30px)}
}
@media (max-width: 520px) {
	.team > div > div{width:calc(100% - 30px)}
}

/* HOME SITES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home-sites{margin:60px 0}
.home-sites > div{width:100%; max-width:1024px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-around; padding:0 15px; box-sizing:border-box}
.home-sites > div p a{width:200px; height:200px; border-radius:50%; display:block; position:relative; border:solid 10px var(--orange); box-sizing:border-box; margin:15px; color:var(--anthrazit)}
.home-sites > div p a:hover{color:var(--orange)}
.home-sites > div p:nth-child(1) a{background: url("../../../images/global/kompetenzen-420x420.jpg") 25% center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.home-sites > div p:nth-child(2) a{background: url("../../../images/header/haushaltsgeraete-1920x640.jpg") left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.home-sites > div p:nth-child(3) a{background: url("../../../images/header/firma-1920x640.jpg") center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.home-sites > div p a span{position:absolute; bottom:-50px; left:50%; transform:translateX(-50%)}

@media (max-width: 500px) {
.home-sites{margin:0}
}

/* ISSUU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.issuu > div{width:100%; max-width:1024px; margin:0 auto 30px auto; display:flex; flex-wrap:wrap}
.issuu h3{width:100%; padding:0 15px;}
.issuu .content{width:50%; padding:15px; box-sizing:border-box}
.issuu p{text-align:center; font-weight:700; margin:20px 0}

/* WEBSHOP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.webshop{margin:40px 0 100px 0}
.webshop h3{width:100%; max-width:1024px; margin:0 auto 20px auto; padding:0 15px; box-sizing:border-box}
.webshop .content{width:100%; height:140px; background:var(--orange); border-top:130px solid #FFF; border-bottom:130px solid #FFF; position:relative}
.webshop p{position:absolute; top:calc(50% + 20px); left:50%; transform:translate(-50%,-50%); text-align:center; margin:0}
.webshop span{font-family:marketregular; font-size:70px; line-height:80px; color:#FFF; position: absolute; top: calc(50% - 20px); left: 50%; transform: rotate(-5deg) translate(-50%,-50%)}
.webshop img{height:400px; width:auto}
.webshop a:hover span{color:#000}

/* VORTEILE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.vorteile{display:flex; align-items:center; margin:50px 0}
.vorteile .content:nth-child(odd) p{width:240px; height:240px; margin:0 40px 0 0; background:var(--orange); border-radius:50%; padding:30px; box-sizing:border-box}
.vorteile img{width:100%; height:100%; filter:invert(1)}

/* TV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tv{padding:0 0 40px 0}
.tv > div{width:100%; max-width:1024px; margin:0 auto; padding:0 15px; box-sizing:border-box; position:relative; text-align:center}
.tv img{width:700px; height:auto;}
.tv iframe,.tv video{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:686px; height:386px; border:none}
.tv video{}

@media (max-width: 700px) {
	.tv img{width:500px;}
	.tv iframe,.tv video{top:5px; width:490px; height:276px}
}
@media (max-width: 560px) {
	.tv img{width:280px;}
	.tv iframe,.tv video{top:3px; width:274px; height:155px}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kompetenzen{width:100%; max-width:1024px; margin:0 auto;}
.k_mini{margin:0 auto 40px auto}
.kompetenzen > div{width:100%; display:flex; flex-wrap:wrap;}
.k_mini > div{padding:0 7.5px; box-sizing:border-box}
.kompetenzen > div > div{width:calc(50% - 30px); margin:15px; position:relative}
.k_mini > div > div{width:calc(25% - 15px); margin:7.5px}
.kompetenzen h3{position:absolute; top:0; left:0; width:100%; height:150px}
.k_mini h3{font-size:20px; line-height:30px}
.kompetenzen h3 a{display:flex; justify-content:center; align-items:center; width:100%; height:100%; background:rgba(0,0,0,0.7); color:#FFF}
.kompetenzen h3 a:hover{background:rgba(0,0,0,0); color:rgba(0,0,0,0)}
.kompetenzen figure{margin:0 0 20px 0; width:100%; height:150px}
.k_mini figure{margin:0}
.kompetenzen img{width:100%; height:100%; object-fit:cover}
.kompetenzen .readmore a{padding:5 15px; background:var(--anthrazit); border-radius:5px; color:#FFF; font-size:16px}
.kompetenzen .readmore a:hover{background:var(--orange)}

@media (max-width: 500px) {
	.kompetenzen > div > div{width:calc(100% - 30px);}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{}
.footer{background:var(--anthrazit); }
.footer > div{height:140px; width:100%; max-width:1024px; padding:7.5px; box-sizing:border-box; margin:auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap}
footer a{color:#FFF!important; margin:7.5px}
footer a:hover{color:var(--orange)!important}
footer p{margin:0}

@media (max-width: 700px) {
	footer p{width:100%; text-align:center}
}

/* KONTAKTDATEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kontaktdaten{}
.kontaktdaten > div{background:var(--orange); position:relative; padding:50px 0}
.kontaktdaten .map{width:calc(50% + 249px); height:720px; overflow:hidden; position:relative}
.kontaktdaten .map:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.kontaktdaten .map iframe{width:calc(100% + 300px); height:calc(100% + 300px); border:none; position:absolute; top:-150px; left:-150px}
.kontaktdaten .map p{position:absolute; bottom:50px; right:750px; transform:translateX(+100%); margin:0; z-index:2}
.kontaktdaten #location{position:absolute; top:-180px; left:0}
.kontaktdaten .map a{background:var(--anthrazit); padding:5px 20px; border-radius:9px; color:#FFF}
.kontaktdaten .map a:visited{color:#FFF}
.kontaktdaten .map a:hover{background:var(--orange)}
.kontaktdaten address{position:absolute; top:50%; left:50%; width:512px; background:#FFF; transform:translateY(-50%); padding:20px 20px 0 20px; box-sizing:border-box; display:flex; flex-wrap:wrap; font-style:normal; z-index:2}
.kontaktdaten .content{width:100%; margin:0 0 20px 0}
.kontaktdaten .content:nth-child(2),.kontaktdaten .content:nth-child(3){width:50%}
.kontaktdaten h3{margin:0 0 10px 0;}
.kontaktdaten p{margin:0 0 10px 0; display:flex; align-items:center}
.kontaktdaten a{display:flex; align-items:center; color:var(--anthrazit)}
.kontaktdaten a:visited{color:var(--anthrazit)}
.kontaktdaten span{padding:8px; border-radius:50%; background:var(--orange); margin:0 10px 0 0; display:block; width:40px; height:40px; box-sizing:border-box}
.kontaktdaten a:hover span{background:var(--anthrazit)}
.kontaktdaten .content img{width:24px; height:24px; filter:invert(1)}
.kontaktdaten .label{position:absolute; bottom:80px; left:calc(50% + 497px); transform:translateX(-100%);}
.kontaktdaten .label img{width:140px; height:auto; filter:invert(1)}
.kontaktdaten .label a:hover img{filter:none}

@media (max-width: 1024px) {
	.kontaktdaten .map{width:75%}
	.kontaktdaten .map p{right:auto; left:calc(50% - 12.5%); transform:none}
	.kontaktdaten .map iframe{left:-300px}
	.kontaktdaten address{left:auto; right:0}
	.kontaktdaten .label{left:auto; right:15px; transform:none}
}
@media (max-width: 700px) {
	.kontaktdaten > div{padding:0}
	.kontaktdaten .map{width:100%; height:400px}
	.kontaktdaten .map iframe{position: relative; left:-150px}
	.kontaktdaten address{position:relative; top:auto; left:auto; width:100%; transform:none; padding:15px;}
}
@media (max-width: 500px) {
	.kontaktdaten .content:nth-child(2),.kontaktdaten .content:nth-child(3){width:100%}
}

/* E-TEC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e-tec{padding:20px 0}
.e-tec > div{width:100%; max-width:1024px; margin:0 auto; text-align:center}
.e-tec iframe{width:100%; height:740px; border:0}
.e-tec p{margin:10px}

/* NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news-title{padding:20px 0 0 0}
.news{background:var(--orange); padding:50px 0 20px 0; margin:40px 0 60px 0}
.news > ul{width:100%; max-width:1024px; margin:0 auto; display:flex; flex-wrap:wrap; padding:0; margin-block-start:0; margin-block-end:0; padding-inline-start:0; list-style-type:none}
.news > ul li{width:calc(50% - 30px); margin:0 15px 30px 15px; background:#000; padding:10px 20px; box-sizing:border-box; border-radius:9px; text-align:center; display:flex; justify-content:center; align-items:center}
.news > ul li a{color:#FFF}
.news > ul li:hover{background:#FFF;}
.news > ul li:hover a{color:#000}
.news h2{margin:0 0 30px 0; color:#FFF}

@media (max-width: 700px) {
	.news > ul li{width:calc(100% - 30px)}
}

/* HOME-NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_news{padding:50px 15px 100px 15px}
.home_news > div{width:100%; max-width:1024px; margin:0 auto; padding:15px; box-sizing:border-box; border:3px solid var(--orange); border-radius:9px; background:var(--light)}
.home_news h2{margin:40px 0}
.home_news h3{font-size:30px; line-height:40px; margin:0 0 30px 0}
.home_news h2,.home_news h3,.home_news p{text-align:center}
.home_news a,.home_news a:visited{color:var(--orange)}
.home_news a:hover{color:var(--anthrazit)}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{padding:60px 0; position:relative; width:100%; height:320px}
.contact:before{content:""; position:absolute; width:100%; height:150px; left:0; top:50%; transform:translateY(-50%); background:var(--orange)}
.contact > div{position:relative; width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box; margin:0 auto; display:flex;}
.contact p{margin:10px; width:100%; max-width:348px; height:300px; display:flex; align-content:center; flex-wrap:wrap; align-items:center; justify-content:center}
.contact p:nth-child(1){font-size:26px; line-height:36px; font-weight:700; text-align:right; }
.contact p:nth-child(2) a{display:flex; width:300px; height:300px; border-radius:50%; border:solid 10px var(--orange); position:relative; background-color:#FFF; background: url("../../../images/global/team-420x420.jpg") center center; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}
.contact p:nth-child(2) span{position:absolute; bottom:30px; left:50%; transform:translate(-50%); padding:5px 20px; border-radius:9px; background:var(--orange); color:#FFF}
.contact p:nth-child(2) a:hover span{background:#000}
.contact p:nth-child(3) a{display:block; background:var(--anthrazit); width:40px; height:40px; border-radius:50%; padding:8px; box-sizing:border-box; margin:7.5px 15px 7.5px 0; position:relative}
.contact p:nth-child(3) a:hover{background:#FFF; color:#FFF}
.contact p:nth-child(3) img{width:24px; height:auto; filter:invert(1)}
.contact p:nth-child(3) a:hover img{filter:invert(0)}
.contact p:nth-child(3) a:hover:after{content:""; position:absolute; bottom:-35px; left:50%; transform:translateX(-50%); width:180px; text-align:center}
.contact p:nth-child(3) a:nth-child(1):hover:after{content:"+41 44 762 61 41"}
.contact p:nth-child(3) a:nth-child(2):hover:after{content:"Kontaktformular"}
.contact p:nth-child(3) a:nth-child(3):hover:after{content:"info@elacki.ch"}
.contact p:nth-child(3) a:nth-child(4):hover:after{content:"8913 Ottenbach"}

@media (max-width: 1000px) {
	.contact p:nth-child(1){font-size:20px; line-height:30px; font-weight:700; text-align:right; }
	.contact p:nth-child(2) a{width:200px; height:200px}
}
@media (max-width: 700px) {
	.contact{height:auto}
	.contact > div{display:block}
	.contact p{height:auto; max-width:none; margin:0 0 20px 0}
	.contact p:nth-child(1){font-size:30px; line-height:40px; display:block; text-align:center}
	.contact p:nth-child(1){display:block;}
	.contact p:nth-child(2) a{width:300px; height:300px}
	.contact p:nth-child(3){}
}

/* HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-home{position:relative; height:100vh; width:100%}
.bg-home .triangle{position:absolute; bottom:0; left:0; height:50%; width:100%; margin:0; border-bottom:110px solid #fff}
.bg-home .triangle img{width:100%; height:100%; object-fit: cover; filter:invert(1); pointer-events: none; transform: translateY(3px);}
.bg-home .title{position:absolute; bottom:260px; left:50%; transform:translateX(-50%); z-index:2; width:500px}
.bg-home .title p{font-family: marketregular; text-align:left; font-weight:normal; font-size:70px; line-height:90px;}
.bg-home .title p span{text-align:right; display:block; width:100%}
.bg-home .title a{color:#FFF;transform:rotate(-6deg); display:block}
.bg-home .title a:hover{color:var(--orange)}
.bg-home .arrow{position:absolute; bottom:50px; left:50%; transform:translateX(-50%); z-index:1}
.bg-home .arrow:after{position:absolute; content:""; top:-120px; left:50%; transform:translateX(-50%); height:120px; width:4px; background:#FFF}

.bg-home:after{background: url("../../../images/background/home-1920x1280.jpg") center center; height: 100vh; position:fixed; content:""; top: 0; left: 0; right: 0; z-index: -2; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat;}

.spalten{column-count: 2; gap:40px}
.spalten p{margin:0 0 30px 0}
.handwritten{font-family:marketregular; font-size:40px; }
.sqq{position:absolute; top:140px; right:90px; z-index:1; transform:scale(0.5) translateY(-50%)}

@media (max-width: 700px) {
	.spalten{column-count: 1; gap:0}
	.sqq{top:50%; right:50%; transform:translate(50%,-50%) scale(0.5)}
	.bg-home .title{bottom:0px; left:20px; width:200px; transform:none}
	.bg-home .title p{font-size:40px; line-height:50px; }
	.bg-home .title a{color:var(--anthrazit);}
	.bg-home .triangle{border-bottom:200px solid #fff}
	.bg-home .arrow{bottom:140px;}
	.bg-home .arrow:after{height:40px;top:-40px}
	.sqq{display:none}
}
@media (max-width: 400px) {
	.bg-home .title p{font-size:30px; line-height:40px; }
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{}

.logo > div{position:absolute; top:30px; right:47px; width:280px; height:66px; z-index:1}
.logo > div:after{content:""; position:absolute; top:66px; right:0; width:7px; height:calc(50vh - 296px); min-height: calc(500px - 296px); background:var(--orange)}/* Höhe: 100vh - logo 96px - linksunten 200px */
.logo img{width:100%; height:auto; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5))}
.logo img:hover{cursor: pointer; filter: drop-shadow(0 0 3px var(--orange))}
.home .logo > div:after{height:calc(100vh - 296px)}

.h_links{position:absolute; right:0; top:0; height:50vh; min-height:500px; z-index:1}
.h_links > div{position:absolute; bottom:0; right:30px; height:200px; padding:20px 0 30px 0; box-sizing:border-box}
.h_links p{margin:0}
.h_links a{display:flex; height:50px; justify-content:flex-end; align-items:center; color:#FFF}
.h_links a:visited{color:#FFF}
.h_links span{display:block; width:40px; height:40px; border-radius:50%; padding:7.5px; box-sizing:border-box; background:var(--orange); margin:10px 0 10px 10px;}
.h_links img{width:100%; height:auto; filter:invert(1)}
.h_links a:hover{color:#FFF}
.h_links a:hover span{background:var(--anthrazit)}
.home .h_links{height:100vh}
.home .h_links a{color:var(--anthrazit)}

.h_icons{position:absolute; top:35px; left:100px; z-index:11}
.h_icons > div{display:flex; justify-content:space-between; width:185px; }
.h_icons a{display:block; background:var(--anthrazit); width:40px; height:40px; border-radius:50%; padding:8px; box-sizing:border-box; position:relative}
.h_icons a:hover{background:var(--orange)}
.h_icons img{width:24px; height:auto; filter:invert(1)}
.h_icons a:hover:after{content:""; position:absolute; bottom:-35px; left:50%; transform:translateX(-50%); width:180px; text-align:center; color:var(--orange)}
.h_icons p:nth-child(1) a:hover:after{content:"+41 44 762 61 41"}
.h_icons p:nth-child(2) a:hover:after{content:"Kontaktformular"}
.h_icons p:nth-child(3) a:hover:after{content:"info@elacki.ch"}
.h_icons p:nth-child(4) a:hover:after{content:"8913 Ottenbach"}


@media (max-width: 700px) {
	.logo > div{top:80px;right:20px; width:270px;}
	.logo > div:after{width:6px; right:1px; top:64px}
	.h_icons{top:15px; left:auto; right:15px} 
	.h_links > div{right:5px}
}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article > div > figure{margin:0; width:100%; position:realtive}
article > div > figure img{width:100%; height:50vh; min-height:500px; object-fit:cover; object-position:top}
article > div > figure:after{content:""; position:absolute; top:0; left:0; width:100%; height:50vh; min-height:500px; background: rgba(0,0,0,0.5);
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.5) 100%);}
article .com-content-article__body{padding:60px 15px 30px 15px; margin:0 auto; width:100%; max-width:1024px; box-sizing:border-box}
.bg_white{background:#FFF}
article .com-content-article__body h1{margin:0 0 40px 0}
.home article .com-content-article__body h1{margin:0 0 60px 0}

@media (max-width: 700px) {
	article > div > .img_60 img{object-position:60% 100%}
	article > div > .img_80 img{object-position:80% 100%}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--orange: rgb(242,145,0);--anthrazit: rgb(41,49,51); --light: rgb(234,234,234)}

@font-face {font-family: 'ralewaybold'; src: url('../fonts/raleway-bold.woff2') format('woff2'), url('../fonts/raleway-bold.woff') format('woff'); font-weight: 700; font-style: bold;}
@font-face {font-family: 'ralewaymedium'; src: url('../fonts/raleway-medium.woff2') format('woff2'), url('../fonts/raleway-medium.woff') format('woff'); font-weight: medium; font-style: normal;}
@font-face {font-family: 'marketregular'; src: url('../fonts/MarketOT.woff2') format('woff2'), url('../fonts/MarketOT.woff') format('woff'); font-weight: normal; font-style: normal;}


html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-weight: 500; font-family: ralewaymedium, sans-serif; color: var(--anthrazit); overflow-x:hidden}
a, a:visited{color: var(--orange);text-decoration: none}
a:hover{color:var(--anthrazit)}
strong {font-family: ralewaybold;}
p {margin:0 0 20px 0}


.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;}

.transition img{-ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover img{-ms-transition: all 500ms;-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

.transition span{-ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover span{-ms-transition: all 500ms;-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

h1,h2{font-family: marketregular; text-align:center; color:var(--anthrazit); font-weight:normal; transform:rotate(-6deg)}
h3,h4{font-family: ralewaybold; text-align:left; color:var(--anthrazit); margin:0}

h1,h2{font-size:70px; line-height:70px; margin:0 0 30px 0}
h3{font-size:30px; line-height:40px; margin: 0 0 20px 0}
h4{font-size:24px; line-height:34px; margin: 0 0 10px 0}

@media (max-width: 700px) {
	h1,h2{font-size:50px; line-height:50px; margin:0 0 20px 0}
}
@media (max-width: 400px) {
	h1,h2{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
	.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
}

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

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 22.5px 9px; position: relative; border-radius:9px; z-index:2; background:var(--anthrazit)}
nav .menu-icon:hover{background:var(--orange)}
nav .menu-icon .navicon {  background: #FFF;  display: block;  height: 5px; width: 30px;  position: relative;  transition: background .2s ease-out;  }
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: 12px;}
nav .menu-icon .navicon:after {top: -12px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .mod-menu {height: 100%; background: rgba(0,0,0,0.85)}
nav .menu-btn:checked ~ .menu-icon {background:var(--orange)}
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: 1000px) {
nav .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,1)}
}
@media (max-width: 700px) {
  nav{top:15px; left:15px; }
  nav > ul {width:100%;}
  nav > ul > li:first-child{padding-top:80px}
}
@media (max-width: 390px) {
  nav > ul > li{margin:10px 0; font-size:16px; line-height:22px}
}