/* GLOBAL */
*,*:after,*:before{margin:0;padding:0;box-sizing:inherit}
.img-center{display:block;margin:0 auto!important}.img-responsive{display:block;max-width:100%;height:auto}
.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}
.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive.embed-responsive-4by3{padding-bottom:75%}
.vsbl-mobile,.vsbl-tablet{display:none!important}
@media only screen and (max-width:62em){.hdn-tablet{display:none!important}.vsbl-tablet{display:block!important}}
@media only screen and (max-width:48em){.hdn-mobile{display:none!important}.vsbl-mobile{display:block!important}}
/* BASIC */
.anchor-target{position:relative;top:-85px;width:1px;height:1px}
:root{--color-white:#fff;--color-black:#000;--color-main:#fd9a5b;--color-link-dark:#ca4f02;--color-link-light:#FDA46D;--color-black--light:#151515;
--color-gradient-1:#cf6475;--color-gradient-2:#ab52ac;--color-gradient-3:#8342ac;--color-gradient-4:#6039bf;--color-gradient-5:#0d1f54}
::selection{background-color:var(--color-main);color:var(--color-white)}
html{font-size:62.5%;scrollbar-color:var(--color-main) var(--color-black);scroll-behavior:smooth}
body{font:300 2rem/1.5 "Hanken Grotesk",sans-serif;box-sizing:border-box;background:var(--color-white);color:var(--color-black)}
/* LINKS, HEADERS & LISTS*/
a{color:var(--color-main);text-decoration:none;transition:color .2s ease-in-out}
a:hover,a:focus{color:var(--color-white)}
a[href^="tel:"]{white-space:nowrap}
.white-section a{color:var(--color-link-dark)}
.white-section a:hover,.white-section a:focus{color:var(--color-black)}
.black-section a{color:var(--color-link-light)}
.black-section a:hover,.black-section a:focus{color:var(--color-white)}
p{margin:2rem 0 1rem}
h2+p,h3+p,h4+p{margin-top:1rem}
h1,h2,h3,h4{line-height:1.2}
h1{font-size:3.6rem;margin:0 0 1.5rem;font-family:Michroma}
h2{font-size:3rem;margin:3rem 0 1.5rem}
h3{font-size:2.5rem;margin:3rem 0 1.5rem}
h4{font-size:2rem;margin:3rem 0 1rem}
h1+h3,h1+h2,h2+h3{margin-top:1rem}
ul{padding-left:1.5rem;margin:2rem 0 1rem}
.b2top{position:fixed;right:2rem;bottom:2rem;z-index:1500;width:5rem;height:5rem;opacity:0;pointer-events:none;transition:opacity .2s ease}
.b2top.active{opacity:100;pointer-events:all}
.b2top svg{width:auto;height:100%;fill:var(--color-main)}
.anchor-target{position:relative;top:-85px;width:1px;height:1px}
/* CONTAINERS & GRID */
.container,.container-fluid{padding-right:1.5rem;padding-left:1.5rem;margin:0 auto}
.container{width:150rem}
@media only screen and (max-width:98em){.container{width:117rem}}
@media only screen and (max-width:75em){.container{width:96.2rem}}
@media only screen and (max-width:62em){.container{width:74.8rem}}
@media only screen and (max-width:48em){.container{width:100%}}
/* SECTIONS */
.header{position:fixed;inset:0;bottom:auto;z-index:2000;padding:.5rem 0 1.5rem}
.header:before{content:"";position:absolute;inset:0;background:url(../imgerman/triangleBG.jpg) no-repeat center center;z-index:-1;transform:translateY(-100%);transition:transform .2s ease-in}
.header.active:before{transform:translateY(0)}
.header .container{display:flex;justify-content:space-between;align-items:flex-end;position:relative}
.header__logo a{display:flex;align-items:center;gap:1.5rem;font-family:Michroma;font-size:1.5rem;color:var(--color-white)}
.header__logo a:hover,.header__logo a:focus{color:var(--color-main)}
.header__logo span{margin-top:1.25rem;line-height:1.2}
.header__phone-nav{display:flex;align-items:center;gap:1.5rem;margin-bottom:.65rem}
.hero-section{min-height:100vh;padding:0;background:url(../imgerman/topBG.png) no-repeat top center;display:flex;flex-direction:column;justify-items:stretch;position:relative;overflow:hidden;z-index:200}
.hero--inner{min-height:0;height:50rem}
.hero-section .container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding-bottom:15rem;position:relative;z-index:100}
.hero--inner .container{padding-bottom:10rem}
.hero-section canvas{position:absolute;inset:0;pointer-events:none}
.hero__title{font-family:Michroma;font-size:9rem;line-height:1.1;color:var(--color-main);position:relative;padding-bottom:4rem;text-align:center;animation:glow 3s linear infinite}
.hero__title:before{content:"";position:absolute;bottom:0;height:3px;background-color:var(--color-main);left:0;right:0;margin:0 auto;max-width:55rem;box-shadow:0 0 2rem var(--color-main),0 0 0.4rem var(--color-main)}
.hero--inner .hero__title{font-size:6rem}
@keyframes glow{from,to{text-shadow:0 0 4rem var(--color-main),0 0 .4rem var(--color-main)}50%{text-shadow:0 0 10rem var(--color-main),0 0 1.6rem var(--color-main)}}
.hero__bottom{position:absolute;inset:0;top:auto;height:15rem;z-index:0}
.hero__bottom-ellipse{position:absolute;inset:0;top:auto;clip-path:ellipse(80% 100% at bottom);background:var(--color-black);height:15rem}
.hero--inner .hero__bottom-ellipse{height:7.5rem}
.hero__bottom-left{position:absolute;bottom:5rem;right:62%;pointer-events:none}
.hero__bottom-right{position:absolute;bottom:5rem;left:62%;pointer-events:none}
.hero__bottom-lamp{position:absolute;inset:2rem;top:auto;margin:0 auto;width:50rem}
.hero__bottom-lamp img{position:relative;z-index:10}
.hero__bottom-light{background:var(--color-main);border-radius:50%;width:.1rem;height:.1rem;position:absolute;top:18%;left:4.7%;box-shadow:0 0 1rem 1.5rem var(--color-main);z-index:20;animation:flickering 5s linear infinite}
.hero__bottom-reflection{background:var(--color-main);border-radius:50%;width:30rem;height:0;position:absolute;bottom:25%;left:0;right:0;margin:0 auto;box-shadow:0 0 5rem 1rem var(--color-main);animation:flickering 5s linear infinite}
@keyframes flickering{0%,4%,10%,14%,18%,100%{opacity:1}2%,12%,16%{opacity:0}}
section{padding:6rem 0}
.black-section{background:var(--color-black);color:var(--color-white);position:relative}
.services__container{display:grid;grid-template-columns:repeat(4,1fr);gap:4rem;margin:8rem auto}
.services__block{position:relative;background:var(--color-black--light);border-radius:1rem;text-align:center;padding:4rem 2rem 2rem}
.services__block a{color:var(--color-white)}
.services__block a:hover,.services__block a:focus{color:var(--color-main)}
.services__image{position:relative;margin-bottom:1.5rem;padding:2rem 0}
.services__image svg{position:relative;z-index:200;width:100%;height:auto}
.lines{position:absolute;inset:0 4rem;display:flex;justify-content:space-between;max-width:50rem;margin:0 auto}
.lines>div{height:100%;width:2px;background-size:auto 200%;animation:bgLineMove 10s ease-in-out infinite}
.lines>div:nth-child(1){background-image:linear-gradient(to bottom,var(--color-gradient-1) 20%,transparent 20%,transparent 30%,var(--color-gradient-1) 30%,var(--color-gradient-1) 70%,transparent 70%,transparent 90%,var(--color-gradient-1) 90%)}
.lines>div:nth-child(2){background-image:linear-gradient(to bottom,var(--color-gradient-2) 50%,transparent 50%,transparent 70%,var(--color-gradient-2) 70%);animation-duration:12s}
.lines>div:nth-child(3){background-image:linear-gradient(to bottom,var(--color-gradient-3) 30%,transparent 30%,transparent 45%,var(--color-gradient-3) 45%);animation-duration:8s}
.lines>div:nth-child(4){background-image:linear-gradient(to bottom,var(--color-gradient-4) 15%,transparent 15%,transparent 20%,var(--color-gradient-4) 20%,var(--color-gradient-4) 75%,transparent 75%,transparent 95%,var(--color-gradient-4) 95%);animation-duration:16s}
.lines>div:nth-child(5){background-image:linear-gradient(to bottom,var(--color-gradient-3) 60%,transparent 60%,transparent 80%,var(--color-gradient-3) 80%);animation-duration:7s}
.lines>div:nth-child(6){background-image:linear-gradient(to bottom,var(--color-gradient-2) 50%,transparent 50%,transparent 75%,var(--color-gradient-2) 75%);animation-duration:9s}
.lines>div:nth-child(7){background-image:linear-gradient(to bottom,var(--color-gradient-1) 10%,transparent 10%,transparent 35%,var(--color-gradient-1) 35%,var(--color-gradient-1) 80%,transparent 80%,transparent 90%,var(--color-gradient-1) 90%);animation-duration:11s}
.services__block:nth-of-type(1) .lines>div:nth-child(1){animation-duration:8s}.services__block:nth-of-type(1) .lines>div:nth-child(2){animation-duration:12s}
.services__block:nth-of-type(1) .lines>div:nth-child(3){animation-duration:10s}.services__block:nth-of-type(1) .lines>div:nth-child(4){animation-duration:9s}
.services__block:nth-of-type(1) .lines>div:nth-child(5){animation-duration:7s}.services__block:nth-of-type(1) .lines>div:nth-child(6){animation-duration:13s}
.services__block:nth-of-type(1) .lines>div:nth-child(7){animation-duration:11s}
.services__block:nth-of-type(2) .lines>div:nth-child(1){animation-duration:13s}.services__block:nth-of-type(2) .lines>div:nth-child(2){animation-duration:11s}
.services__block:nth-of-type(2) .lines>div:nth-child(3){animation-duration:7s}.services__block:nth-of-type(2) .lines>div:nth-child(4){animation-duration:8s}
.services__block:nth-of-type(2) .lines>div:nth-child(5){animation-duration:10s}.services__block:nth-of-type(2) .lines>div:nth-child(6){animation-duration:12s}
.services__block:nth-of-type(2) .lines>div:nth-child(7){animation-duration:9s}
.services__block:nth-of-type(3) .lines>div:nth-child(1){animation-duration:11s}.services__block:nth-of-type(3) .lines>div:nth-child(2){animation-duration:15s}
.services__block:nth-of-type(3) .lines>div:nth-child(3){animation-duration:6s}.services__block:nth-of-type(3) .lines>div:nth-child(4){animation-duration:9s}
.services__block:nth-of-type(3) .lines>div:nth-child(5){animation-duration:12s}.services__block:nth-of-type(3) .lines>div:nth-child(6){animation-duration:14s}
.services__block:nth-of-type(3) .lines>div:nth-child(7){animation-duration:7s}
@keyframes bgLineMove{from,to{background-position:0 0}50%{background-position:0 100%}}
.services__title{font:2.6rem/1 Michroma}
.cta-section{background-image:linear-gradient(to bottom,var(--color-black) 50%,var(--color-white) 50%);color:var(--color-white);padding:4rem 0 2rem}
.cta__wrapper{
  display:flex;justify-content:space-between;align-items:center;border-radius:1rem;position:relative;padding:13rem 0;
  background-image:linear-gradient(to right,var(--color-gradient-1) 0%,var(--color-black) 10%,var(--color-gradient-2) 10%,var(--color-black) 20%,
    var(--color-gradient-3) 20%,var(--color-black) 30%,var(--color-gradient-4) 30%,var(--color-black) 40%,var(--color-gradient-5) 40%,var(--color-black) 50%,
    var(--color-gradient-1) 50%,var(--color-black) 60%,var(--color-gradient-2) 60%,var(--color-black) 70%,var(--color-gradient-3) 70%,var(--color-black) 80%,
    var(--color-gradient-4) 80%,var(--color-black) 90%,var(--color-gradient-5) 90%,var(--color-black) 100%);
    background-repeat:repeat-x;background-size:200% auto;animation:ctaBGMove 30s linear infinite}
@keyframes ctaBGMove{from{background-position:0 0}to{background-position:100% 0}}
.cta__title{font-family:Michroma;font-size:6rem;line-height:1.2;color:var(--color-main);margin-left:8rem}
.cta__image{position:absolute;bottom:0;right:0}
.bottom-section{padding:6rem 0;position:relative}
.bottom-section .lines{top:20rem;bottom:-2rem;z-index:10;opacity:.5}
.bottom-section .container{position:relative;z-index:20}
.footer{background:url(../imgerman/triangleBG.jpg) no-repeat top center;padding:6rem 0 3rem;color:var(--color-white);clip-path:ellipse(80% 100% at bottom);text-align:center;position:relative;z-index:20}
.footer__nav{display:flex;gap:1rem;justify-content:center;align-items:center;margin-bottom:1rem}
.footer__nav a{color:var(--color-white)}
.footer__nav a:hover,.footer__nav a:focus{color:var(--color-main)}
.footer__hcard{display:flex;flex-direction:column;gap:0.5rem;font-size:1.7rem}
.footer__hcard-title{font-family:Michroma;font-size:2.5rem}
/*MENU*/
nav{position:fixed;inset:0;z-index:1750;top:6.8rem;display:flex;justify-content:center;align-items:center;pointer-events:none}
nav.active{pointer-events:all}
nav .nav-bg{position:absolute;top:-40vh;bottom:-40vh;background:var(--color-black--light);transition:all .4s linear;transform:rotate(20deg);opacity:0}
nav .nav-bg-1{left:17%;right:83%}
nav .nav-bg-2{left:50%;right:50%}
nav .nav-bg-3{left:83%;right:17%}
nav.active .nav-bg{opacity:1;transition:all .4s linear,opacity .1s ease-in}
nav.active .nav-bg-1{left:-10%;right:56%;transition-delay:.3s}
nav.active .nav-bg-2{left:33%;right:33%}
nav.active .nav-bg-3{left:56%;right:-10%;transition-delay:.15s}
nav>ul{list-style-type:none;padding-left:0;display:flex;flex-direction:column;align-items:center;gap:2rem;opacity:0;transform:translateY(5rem);transition:all .2s ease-in}
nav.active>ul{opacity:1;transform:translateY(0);transition-delay:.4s}
nav .navbar-nav>li{font:3.5rem/1 Michroma;text-align:center}
nav .navbar-nav a{display:block;color:var(--color-white);position:relative}
nav .navbar-nav a:hover,.navbar-nav a:focus{text-decoration:none;color:var(--color-main)}
/*DROPDOWN*/
nav .dropdown-item>a>span{position:relative}
nav .dropdown-item>a>span:before{content:"▼";font-size:.6em;position:relative;top:-3px}
nav .dropdown-item.active>a>span:before{content:"▲"}
nav .dropdown-menu{display:flex;flex-direction:column;gap:1.5rem;max-height:0;transition:all .1s ease-in-out;overflow:hidden;margin:0;list-style-type:none;padding-left:0}
nav .dropdown-menu li{font-size:2.5rem}
nav .dropdown-item.active .dropdown-menu{max-height:180px;padding:1.5rem 0 2rem}
/*HAMBURGER*/
.hamburger{position:absolute;width:5rem;height:5.85rem;top:-.5rem;right:0;cursor:pointer}
.bar{position:absolute;width:4rem;height:.3rem;transform:rotate(-45deg);transform-origin:center bottom;background:var(--color-white);transition:all .3s ease-in}
.bar-closed-1{bottom:2.25rem;left:0;right:0;margin:0 auto}
.bar-closed-2{width:2rem;bottom:3rem;left:.7rem;right:auto;transition-delay:.2s}
.bar-closed-3{width:2rem;bottom:1.5rem;left:auto;right:.75rem;transition-delay:.1s}
.bar-opened-1{bottom:7.25rem;left:5rem;right:auto;margin:0 auto}
.bar-opened-2{bottom:7.25rem;left:auto;right:5.9rem;margin:0 auto;transform:rotate(45deg)}
.hamburger.active .bar-closed-1{bottom:7.25rem;left:6rem}
.hamburger.active .bar-closed-2{bottom:7.9rem;left:5.65rem;right:auto}
.hamburger.active .bar-closed-3{bottom:6.7rem;right:-4.95rem}
.hamburger.active .bar-opened-1{bottom:2.25rem;left:.4rem;right:auto;transition-delay:.2s}
.hamburger.active .bar-opened-2{bottom:2.25rem;right:.9rem;transform:rotate(45deg);transition-delay:.15s}
/* PHONE LINKS */
.phone-num{font-family:Michroma}
.phone-num a{color:var(--color-white)}
.phone-num a:hover,.phone-num a:focus{color:var(--color-main)}
.phone--header{font-size:1.5rem;margin-right:5rem}
.phone--hero{font-size:6rem}
.phone--cta{font-size:7.6rem}
.phone--footer{font-size:5rem;margin-bottom:1rem;font-family:"Hanken Grotesk"}
/* FORM */
.form{margin:4rem 0;max-width:100rem}
.form__cont{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 5rem}
.form__group{display:flex;flex-direction:column-reverse}
.form__group--full-width{grid-column:1/-1}
.form__label{padding-left:10px;font-size:14px;margin-bottom:5px;transform:translateY(0);transition:all .3s ease-out}
.form__input:placeholder-shown+.form__label{transform:translateY(35px);opacity:0;visibility:hidden}
.form__input{border:var(--color-main) 1px solid;background:none;outline:none;resize:none;width:100%;height:40px;font-size:16px;font-family:inherit;color:var(--color-white);padding-left:10px}
textarea.form__input{height:75px;padding-top:10px}
.form__submit{font-size:2rem;line-height:1;height:40px;width:25rem;margin:2.5rem 0 0 auto;color:var(--color-black);background-color:var(--color-main);cursor:pointer;border:none;-webkit-appearance:none;appearance:none;transition:all .2s ease}
.form__submit:hover{background-color:var(--color-white);color:var(--color-black)}
[placeholder]{color:var(--color-white)}
:-ms-input-placeholder{color:var(--color-white)}
::-webkit-input-placeholder{color:var(--color-white)}
/* RESPONSIVE */
@media only screen and (min-width:120em){header:before,footer,.hero-section{background-size:cover!important}#bgCanvas{width:100vw}}
@media only screen and (max-width:98em){.hero__title{font-size:7.5rem}.services__title{font-size:2.2rem}.cta__title{font-size:4.2rem}.phone--cta{font-size:5.3rem}}
@media only screen and (max-width:75em){
  nav.active .nav-bg-1{left:-20%}
  nav.active .nav-bg-3{right:-20%}
  .hero__title{font-size:6rem}
  .phone--hero{font-size:5.5rem}
  .services__container{gap:2rem}
  .services__title{font-size:1.8rem}
  .cta__wrapper{padding:10rem 0}
  .cta__image{width:35rem}
  .cta__title{font-size:3.5rem}
  .phone--cta{font-size:4.5rem}
  .lock-and-key{width:50rem}}
@media only screen and (max-width:62em){
  h1{font-size:3.2rem}
  h2{font-size:2.7rem}
  h3{font-size:2.2rem}
  nav .navbar-nav>li{font-size:3rem}
  nav .dropdown-menu li{font-size:2.2rem}
  .hero--inner{height:40rem}
  .hero--inner .container{padding-bottom:5rem}
  .hero__title{font-size:5rem}
  .hero--inner .hero__title{font-size:4rem}
  .hero__bottom-left{bottom:5rem;right:75%;width:60rem;height:auto}
  .hero__bottom-right{bottom:5rem;left:75%;width:60rem;height:auto}
  .phone--hero{font-size:4.5rem}
  .services__container{grid-template-columns:1fr 1fr;gap:4rem}
  .services__title{font-size:3rem}
  .cta__wrapper{padding:8rem 0}
  .cta__image{width:30rem}
  .cta__title{font-size:2.5rem;margin-left:5rem}
  .phone--cta{font-size:3.1rem}
  .lock-and-key{width:50rem}
  .footer{padding-top:4rem}
  .footer__nav{display:none}}
@media only screen and (max-width:48em){
  body{font-size:1.8rem}
  h1{font-size:2.8rem}
  h2{font-size:2.4rem}
  h3{font-size:2rem}
  .hamburger{right:.5rem}
  nav.active .nav-bg-1{left:-30%}
  nav.active .nav-bg-3{right:-30%}
  nav .navbar-nav>li{font-size:2.7rem}
  nav .dropdown-menu li{font-size:2rem}
  .b2top{width:4rem;height:4rem;right:1.5rem;bottom:1.5rem}
  .black-section{padding:4rem 0}
  .header .container{display:grid;grid-template-columns:1fr min-content}
  .phone--header{margin-right:4.5rem}
  .phone--header img{position:relative;top:.3rem}
  .hero-section{min-height:55rem;background-size:100% auto;background-image:url(../imgerman/topBGmob.jpg)}
  .hero-section .container{gap:.75rem}
  .hero--inner{height:30rem}
  .hero__title{font-size:3.3rem;padding-bottom:2rem}
  .hero--inner .hero__title{font-size:3rem}
  .hero__bottom-lamp{width:auto;max-width:50rem;bottom:4rem}
  .hero__bottom-light{left:4.8%;top:18.25%}
  .phone--hero{font-size:3.6rem}
  .services__block .lines{inset:0 2rem}
  .services__title{font-size:1.6rem}
  .services__image{padding:0}
  .cta-section{padding:2rem 0 0}
  .cta__wrapper{padding:5rem 0;text-align:center}
  .cta__title{font-size:2.8rem;margin:0 auto}
  .phone--cta{font-size:3.5rem}
  .bottom-section{padding-top:3rem}
  .phone--footer{font-size:4rem;margin-bottom:0}
  .footer__hcard{gap:0;font-size:1.5rem}
  .footer__hcard-title{font-size:2.1rem}
  .form__cont{gap:1rem 3rem}
  .form__submit{margin:1.5rem 0 0;width:auto;max-width:25rem}}
@media only screen and (max-width:31em){
  h1{font-size:2.5rem}
  h2{font-size:2.2rem}
  nav .navbar-nav>li{font-size:2.3rem}
  nav .dropdown-menu li{font-size:1.8rem}
  .header__logo a{gap:1rem}
  .header__logo span{font-size:1.4rem}
  .phone--header img{top:.4rem}
  .hero-section{background-size:50rem auto}
  .hero--inner{height:25rem}
  .hero--inner .container{padding-bottom:0}
  .hero__title{font-size:2.5rem}
  .hero--inner .hero__title{font-size:2.5rem}
  .phone--hero{font-size:3rem}
  .hero__bottom-left,.hero__bottom-right{display:none}
  .hero__bottom-reflection{width:20rem}
  .hero--inner .hero__bottom-ellipse{height:5rem}
  .black-section{padding:3rem 0}
  .services__container{grid-template-columns:1fr 1fr;gap:1rem}
  .services__block{padding:2rem 1rem}
  .services__block .lines{inset:1rem}
  .services__image{margin-bottom:0}
  .services__title{font-size:1.2rem}
  .cta__wrapper{padding:4rem 0}
  .cta__title{font-size:2.2rem}
  .phone--cta{font-size:2.7rem}
  .footer__hcard-title{font-size:1.7rem;margin-bottom:.25rem}
  .form__cont{display:flex;flex-direction:column}}