@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@charset "UTF-8";

.clear{ clear:both; border:0; opacity:0; height:0; font-size:0; visibility: hidden; }



html, body{  font-family: "Noto Sans", sans-serif; color: #444444; height: 100%;}

p{font-weight: 300; line-height: 28px; margin-top: 0;}

p a{color: red; text-decoration; display: inline-block; text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

p a:hover{ background: red; color: white; padding: 0px 5px;}

h1{font-weight: 300; font-size: 4em; margin-bottom: 0; margin-top: 0; color: red;}

.stitle h1{display: inline-block; padding: 0 15px; background: rgba(255,0,0,0.8); color:white; margin-top: 15%;}

.sub{font-size: 1.6em; line-height: 2.2; font-style: italic; color: white; background: rgba(0,0,0,0.6); padding: 0 10px; margin-top: 10px; display: inline-block;}

.tit{margin-bottom: 35px;}

.subtit{font-size: 1.6em; line-height: 2.2; font-style: italic; color: black;}

h2{font-weight: 400;}

h3{ }



.bg {

  animation:slide 8s ease-in-out infinite alternate;

  background-image: linear-gradient(-60deg, #ffffff85 50%, #ffffff00 5%););

  bottom:0;

  left:-50%;

  opacity:.2;

  position:fixed;

  right:-50%;

  top:0;

  z-index:-1;

}



.bg2 {

  animation-direction:alternate-reverse;

  animation-duration:10s;

}



.bg3 {

  animation-duration:14s;

}



@keyframes slide {

  0% {

    transform:translateX(-25%);

  }

  100% {

    transform:translateX(25%);

  }

}



#header{width: 100%; height: 100%; position: relative; overflow: hidden; z-index: -2;

    position: relative;

    -webkit-transition: all .7s ease;

    -moz-transition: all .7s ease;

    -ms-transition: all .7s ease;

    -o-transition: all .7s ease;

    transition: all .7s ease;

}



.lang{position: absolute; right: 20px; top: 0; display: inline-table; height: 100%;}

.lang ul{list-style: none; padding: 0; displaY: table-cell; vertical-align: middle;}

.lang ul li{display: inline-block;}

.lang ul li a{color: white; text-transform: uppercase; padding: 14px 0px; width: 50px; display: block; text-align: center; margin: 5px; text-decoration: none; border: 1px solid white; border-radius: 100%;

  -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

.lang ul li.active a, .lang ul li a:hover{background: white; color: black;}



#top{position: fixed; top: 0; width: 100%; background: rgba(0,0,0,0.5); z-index: 99;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

#top.act{background: rgba(255,0,0,0.9);}

#top .inner{padding: 40px 60px;-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

#top.act .inner{padding: 15px 40px;}

#top.act a.logo{background-image: url(../Images/gobo.svg); width: 10vw; height: 5vh;}

#top.act ul.nav{    margin: 38px 0 7px 0;}

#top.act ul.nav li a:hover, #top.act ul.nav li a.act{color: black;}



a.logo{display: block; width: 20vw; height: 10vh; background: url(../Images/gobo_col.svg) no-repeat top left; position: relative; z-index: 9; background-size: contain;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}



.inner{max-width: 1280px; margin: 0 auto; padding: 60px;}



.content{background: rgba(255,255,255,0.7);}



.navwrap{margin-top: -70px;}

ul.nav{list-style: none; padding: 0; text-align: right;}

ul.nav li{display: inline-block; margin: 5px;}

ul.nav li a{text-decoration: none; color: white; padding: 20px; font-style: italic; font-size: 18px;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

ul.nav li a:hover, ul.nav li a.act{color: red; font-weight: 500;}



.title{position: absolute; z-index: 15; left: 0; top: 0; width: 100%; height: 100%; display: inline-table; text-align: center; z-index: 5;}

.stitle{display: table-cell; vertical-align: middle; padding: 5%;}



footer{background: red; padding-bottom: 120px;}



footer p{text-align: center; color: rgba(255,255,255,0.85); }

footer p span{margin: 0 10px; opacity: 0.7; color: black;}

footer p a{color: white; text-decoration: none;}

footer p a:hover{color: #444;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

video{width: 100%; height: auto;}

.copy{text-align: center; font-size: 0.8em;}



.ce-bodytext, .reftext{column-count: 2; column-gap: 80px;}
.ce-bodytext p, .reftext p{margin-bottom: 40px;}
.ce-bodytext h3, .reftext h3{break-after: avoid; margin-top: 20px;}
.ce-bodytext ul, .reftext ul{list-style: none; padding: 0; margin-bottom: 40px;}
.ce-bodytext ul li, .reftext ul li{margin: 20px 0; position: relative; margin-left: 40px; break-inside: avoid;}
.ce-bodytext ul li::before, .reftext ul li::before{content: ""; background: url(../Images/Icons/favicon-32x32.ico) no-repeat center center; background-size: contain; position: absolute; left: -40px; width: 20px; height: 20px; top: 0; display: block;}
.ce-bodytext ul li strong, .reftext ul li strong{display: block; color: red; margin-bottom: 5px;}

.reftext{margin-bottom: 40px;}

ul.gal{display: flex; gap: 10px; padding: 0; flex-wrap: wrap;}
ul.gal li{display: inline-block; flex-grow: 2; flex-shrink: 1; overflow: hidden; width: 20%;}
ul.gal li a{opacity: 0.8; display: block;
  -moz-transform: scale(1) rotate(0deg);-webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);
  -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
ul.gal li a:hover{opacity: 1.0; -moz-transform: scale(1.1) rotate(4deg);-webkit-transform: scale(1.1) rotate(4deg);-o-transform: scale(1.1) rotate(4deg);-ms-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
ul.gal li a img{width: 100%; height: auto;}

.story{margin: 80px 0 120px 0;}
.story h2{font-weight: 600; font-style: italic; text-align: center}

ul.hist{list-style: none; padding: 0;}
ul.hist li{position: relative; height: 120px;}
ul.hist li .year{display: inline-block; position: absolute; left: 50%; margin-left: -40px; padding: 23px 15px; color: white; font-weight: 600; font-style: italic; font-size: 1.2em; border-radius: 100%; background: red; border: 2px solid #444;}
ul.hist li .year::before{content:""; height: 50px; width: 2px; border-left: 4px solid red; position: absolute; left: 50%; margin-left: -2px; top: 100%; z-index: 100%;}
ul.hist li .inh{    position: absolute; left: 50%; background: rgba(0,0,0,0.05); max-width: 30%;    margin-left: 70px;    border: 3px solid red;    border-radius: 20px;    padding: 20px;}
ul.hist li .inh::before{    content: "";
    position: absolute;
    display: block;
    left: -70px;
    width: 70px;
    border-bottom: 5px solid #444;
    height: 2px;
    top: 31px;
    z-index: -4;}
ul.hist li:nth-child(odd) .inh{left: auto; right: 50%; margin-left: 0; margin-right: 70px;}
ul.hist li:nth-child(odd) .inh::before{left: 100%;}
ul.hist li .inh h3{margin: 0; margin-bottom: 10px;}
ul.hist li .inh p{margin: 0; line-height: 1.35em;}

#headimg{}

.himage{min-height: 600px;}





ul.team{ margin-left: -10px; margin-right: -10px; position: relative; list-style: none; padding: 0;}



ul.team li{width: 31.333%; display: inline-block; box-sizing: border-box; margin: 1%; position: relative; overflow: hidden;}



ul.team li img{width: 100%; height: auto;  -webkit-filter: grayscale(80%); filter: grayscale(80%);}



ul.team li h3{position: absolute; left: 0; bottom: 0; margin: 0; width: 100%; padding: 10px; background: rgba(255,0,0,0.85); color: white; box-sizing: border-box; font-weight: 400; bottom: 0;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}



ul.team li .capt{position: absolute; top: 100%; background: rgba(255,0,0,0.85); color: white; width: 100%; height: 100%; display: table;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}



ul.team li .capt span{display: table-cell; vertical-align: middle; padding: 20px; text-align: center;} 

ul.team li .capt span a{color: white; text-decoration: none; display: block;}

ul.team li .capt span h4{font-size: 2em; margin: 0;}

ul.team li .capt span p{font-style: italic;     font-size: 1.3em; margin-top: 5px;}

ul.team li .capt span a{margin: 5px;

	-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

ul.team li .capt span a:hover{color: #444;}



ul.team li:hover h3{ bottom: -50px;}



ul.team li:hover .capt{position: absolute; left: 0; top: 0;}


.subnav, .refnav.front{margin-top: 100px;}
.subnav h2, .refnav h2{padding-bottom: 20px; text-align: center; border-bottom: 1px solid #444; font-weight: 600; font-style: italic;}
.subnav ul.ang{list-style: none; padding: 0;
     display: flex;  gap: 10px;   flex-direction: row;}
.subnav ul.ang li{flex: 1 1 0%; padding-top: 70px; overflow: hidden;}
.subnav ul.ang li a{display: block; padding-top: 60px; padding-bottom: 200px; margin-bottom: -200px; color: white; background: #444; text-decoration: none; position: relative; text-align: center;
    -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.subnav ul.ang li a img{width: 100%; height: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%);
-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.subnav ul.ang li a h3{font-size: 1.6em; font-weight: 500; margin: 15px;}
.subnav ul.ang li a p{padding: 10px; padding-bottom: 20px; min-height: 40px;}
.subnav ul.ang li a::before{content: ""; background: url(../Images/Icons/hoch.svg) no-repeat center center red; background-size: 60%; width: 120px; height: 120px; border-radius: 100%; border: 2px solid #444; display: block; position: absolute; left: 50%; margin-left: -60px; top: -60px;
    -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

.subnav ul.ang li:nth-child(2) a::before{background-image: url(../Images/Icons/tief.svg)}
.subnav ul.ang li:nth-child(3) a::before{background-image: url(../Images/Icons/plan.svg); background-size: 70%;}
.subnav ul.ang li:nth-child(4) a::before{background-image: url(../Images/Icons/spez.svg)}


.subnav ul.ang li a:hover{background: red;}
.subnav ul.ang li a:hover::before{background-color: #444; -moz-transform: scale(1.1) rotate(18deg);
-webkit-transform: scale(1.1) rotate(18deg);
-o-transform: scale(1.1) rotate(18deg);
-ms-transform: scale(1.1) rotate(18deg);
transform: scale(1.1) rotate(18deg);}
.subnav ul.ang li a:hover img{-webkit-filter: grayscale(0%); filter: grayscale(0%);}


.refnav ul{list-style: none; padding: 0; display: flex; gap: 20px; flex-flow: wrap;}
.refnav ul li{display: inline-block; flex-grow: 1; overflow: hidden; position: relative; width: 40%;}
.refnav ul li img{width: 100%; height: auto;}
.refnav ul li a{position: relative; display: block;}
.refnav ul li a .cap{position: absolute; left: 0; bottom: 0;}
.refnav ul li a .cap h3{background: rgba(255, 0, 0, 0.8);    font-weight: 400;    margin: 0;    display: inline-block;    color: white;     text-decoration: none;     padding: 5px 10px;}
.refnav ul li a .cap p{padding: 5px 10px;    display: inline-block;    background: rgba(255, 255, 255, 0.8);    color: #444;    margin-bottom: 0;}

.refnav ul li:before{    position: absolute;
    z-index: 9;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(255, 255, 255, 0.2);    content: '';    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;   -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -110%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -110%, 0);}

.refnav ul li:hover:before {
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 110%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 110%, 0);}

#menu{display: none;}



.slideshow {

  position: absolute;

  width: 100%;

  overflow: hidden;

  height: 100%;

}



.slideshow-image {

  position: absolute;

  width: 100%;

  height: 100%;

  background: no-repeat 50% 50%;

  background-size: cover;

  -webkit-animation-name: kenburns;

  animation-name: kenburns;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  -webkit-animation-duration: 25s;

  animation-duration: 25s;

  opacity: 1;

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}



.slideshow-image:nth-child(1) {

  -webkit-animation-name: kenburns-1;

  animation-name: kenburns-1;

  z-index: 3;

}



.slideshow-image:nth-child(2) {

  -webkit-animation-name: kenburns-2;

  animation-name: kenburns-2;

  z-index: 2;

}



.slideshow-image:nth-child(3) {

  -webkit-animation-name: kenburns-3;

  animation-name: kenburns-3;

  z-index: 1;

}



.slideshow-image:nth-child(4) {

  -webkit-animation-name: kenburns-4;

  animation-name: kenburns-4;

  z-index: 0;

}


.news-single .news-img-wrap .outer{display: inline-block; width: 33.33%;}
.news-single .news-img-wrap .outer.i1{displaY: block; width: 100%;}
  .news-single img{width: 100%; height: auto;}

.news-single .news-backlink-wrap a {color: black; text-decoration:  none; border: 1px solid black; padding: 10px 15px; margin-top: 20px; display: inline-block;
                                        -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.news-single .news-backlink-wrap a:hover{background: rgba(0,0,0,0.8); color: white;}


 @-webkit-keyframes 

kenburns-1 {  0% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 1.5625% {

 opacity: 1;

}

 23.4375% {

 opacity: 1;

}

 26.5625% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 98.4375% {

 opacity: 0;

 -webkit-transform: scale(1.11176);

 transform: scale(1.11176);

}

 100% {

 opacity: 1;

}

}

 @keyframes 

kenburns-1 {  0% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 1.5625% {

 opacity: 1;

}

 23.4375% {

 opacity: 1;

}

 26.5625% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 98.4375% {

 opacity: 0;

 -webkit-transform: scale(1.11176);

 transform: scale(1.11176);

}

 100% {

 opacity: 1;

}

}

@-webkit-keyframes 

kenburns-2 {  23.4375% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 26.5625% {

 opacity: 1;

}

 48.4375% {

 opacity: 1;

}

 51.5625% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

}

@keyframes 

kenburns-2 {  23.4375% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 26.5625% {

 opacity: 1;

}

 48.4375% {

 opacity: 1;

}

 51.5625% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

}

@-webkit-keyframes 

kenburns-3 {  48.4375% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 51.5625% {

 opacity: 1;

}

 73.4375% {

 opacity: 1;

}

 76.5625% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

}

@keyframes 

kenburns-3 {  48.4375% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 51.5625% {

 opacity: 1;

}

 73.4375% {

 opacity: 1;

}

 76.5625% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

}

@-webkit-keyframes 

kenburns-4 {  73.4375% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 76.5625% {

 opacity: 1;

}

 98.4375% {

 opacity: 1;

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

}

@keyframes 

kenburns-4 {  73.4375% {

 opacity: 1;

 -webkit-transform: scale(1.1);

 transform: scale(1.1);

}

 76.5625% {

 opacity: 1;

}

 98.4375% {

 opacity: 1;

}

 100% {

 opacity: 0;

 -webkit-transform: scale(1);

 transform: scale(1);

}

}


@media only screen and (max-width: 1400px) {
ul.nav {
    margin-right: 120px!important;
}


}



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

  ul.nav{margin: 0!important;}
ul.nav li a:hover, ul.nav li a.act{color: black;}
h1{font-size: 3em;}

.refnav ul li{width: 100%;}

  
ul.team li{width: 100%; margin: 1% 0;}

ul.gal li{width:33.333%;}
  
.himage {min-height: 485px;}

.stitle h1{font-size: 2em;}
.sub{font-size: 1.2em;
    line-height: 1.8;}

    .ce-bodytext,  .reftext{column-count: 1;}

.inner{padding: 40px 20px;}

.news .swipwrap{padding: 20px;}
.news .news-slide .cap h3,.news .news-slide .cap p{padding: 3px 5px;}


  
#top .inner{padding: 20px;}
#top.act .inner{padding: 20px;}
#top a.logo{display: block; width: auto; background-position: center; height: 50px;}
#top.act a.logo{display: block; width: auto; background-position: center; height: 50px;}


.lang{position: fixed; left: -130px; top: 100px;
     -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

.lang.open{left: 20px;}

.lang ul{display: block;}
.lang ul li{display: block;}
.lang ul li a{background: rgba(255,255,255,0.85); border-color: red; color: red;}
.lang ul li.active a{background: red; color: white; border-color: white;}

#top .navwrap{position: fixed; right: -100%;  top: 90px; height: 100%; margin-top: 0; background: rgba(255,0,0,0.8);
   -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
#top .navwrap.open{right: 0;}
#top .navwrap ul.nav{margin: 30px 10px 40px 10px;}
#top .navwrap ul.nav li{display: block; margin: 0;}
#top .navwrap ul.nav li a{display: block; padding: 8px 20px; font-size: 1.8em;}

.subnav ul.ang{ flex-direction: column;}

#menu{position: fixed; displaY: block; right: 20px; top: 20px; width: 50px; height: 50px; z-index: 2; background: rgba(255,255,255,0.5); z-index: 99999;

   -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

  #menu.top{top: 10px;}

.story ul.hist li{height: auto;}
.story ul.hist li .year{position: inherit; z-index: 3;}
.story ul.hist li .year::before{display: none;}
.story ul.hist li .inh{position: inherit; display: block;  left: auto; right: auto; margin: 0; text-align: center; max-width: 100%; margin-top: -20px; margin-bottom: 30px; background: rgb(242 242 242);}
.story ul.hist li .inh::before{content: "";
    height: 50px;
    width: 0px;
    border-left: 4px solid red;
    position: absolute;
    left: 50%;
    margin-left: -2px;
    top: 100%;
    z-index: 0;}

.menu {

  background-color: transparent;

  border: none;

  cursor: pointer;

  display: flex;

  padding: 0;

  position: absolute; left: 0; top: 0; 

}

.menu svg{position: absolute; width: 50px; height: 50px;}



.line {

  fill: none;

  stroke: black;

  stroke-width: 6;

  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),

    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}

.menu.opened .line{stroke: white;}

.line1 {

  stroke-dasharray: 60 207;

  stroke-width: 6;

}

.line2 {

  stroke-dasharray: 60 60;

  stroke-width: 6;

}

.line3 {

  stroke-dasharray: 60 207;

  stroke-width: 6;

}

.opened .line1 {

  stroke-dasharray: 90 207;

  stroke-dashoffset: -134;

  stroke-width: 6;

}

.opened .line2 {

  stroke-dasharray: 1 60;

  stroke-dashoffset: -30;

  stroke-width: 6;

}

.opened .line3 {

  stroke-dasharray: 90 207;

  stroke-dashoffset: -134;

  stroke-width: 6;

}

}