body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

/* https://codepen.io/clintabrown/pen/DQmPbp */

/* Variablen ersetzen */
:root {
  --grid-background-color: #f2f1ed;
  --grid-line-color: #cccccc;
  --grid-width: 98px;
  --timeline-events-no: 3;
  --timeline-events-line-height: 10px;
  --timeline-years-no: 8;
}

#main .mod_article#lebenslauf {
	width: 90%;
	margin: 0 auto;
	min-height: 600px;
	text-align: center;
	position: relative;
}

#lebenslauf {
  margin: 0 auto;
  padding: 0;
  background: var(--grid-background-color);
  background-image: linear-gradient(90deg, var(--grid-background-color) 0, var(--grid-background-color) calc(var(--grid-width) - 1px), var(--grid-line-color) var(--grid-width));
  background-size: var(--grid-width) var(--grid-width);
}

/* Timeline - Years */
.timelines-years {
  position: absolute;
  top: 350px;
  padding: 0 0 0 75px;
  margin: 0;
  white-space: nowrap;
  /*border-top: 1px solid var(--grid-line-color);*/
  list-style: none;
  font-size: 0;
}
.timelines-years li {
  position: relative;
  top: -6px;
  display: inline-block;
  width: calc(var(--grid-width) * 2);
  color: #cccccc;
  font-size: 16px;
  line-height: 11px;
  text-indent: -12px;
  background-color: var(--grid-background-color);
  padding: 5px 0;
}
/* Display last year 
.timelines-years li:last-child {
  width: var(--grid-width);
  border: 1px solid red;
}
*/

/* Timeline - Events */
.timeline-events {
  position: absolute;
  top: 150px;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
}
.timeline-events h2,
.timeline-events h3,
.timeline-events h4 {
  margin: 0 0 1px 0;
  font-weight: normal;
  font-size: 16px;
}
.timeline-events h2 {
  color: #333;
	font-family: 'Open Sans Light';
}
.timeline-events h4 {
  color: #333;
  font-style: italic;
}
.timeline-events li {
  position: relative;
  display: inline-block;
}
.timeline-events li:before {
  position: absolute;
  left: 0;
  bottom: -36px;
  height: var(--timeline-events-line-height);
  border-radius: var(--timeline-events-line-height);
  content: '';
}

/* Timeline Events - Dynamic bottom spacing */
.timeline-events li:nth-child(1) { bottom: calc((var(--timeline-events-line-height) * 2) * 1 - var(--timeline-events-line-height) * 2); }
.timeline-events li:nth-child(2) { bottom: calc((var(--timeline-events-line-height) * 2) * 2 - var(--timeline-events-line-height) * 2); }
.timeline-events li:nth-child(3) { bottom: calc((var(--timeline-events-line-height) * 2) * 3 - var(--timeline-events-line-height) * 2); }
.timeline-events li:nth-child(4) { bottom: calc((var(--timeline-events-line-height) * 2) * 4 - var(--timeline-events-line-height) * 2); }
.timeline-events li:nth-child(5) { bottom: calc((var(--timeline-events-line-height) * 2) * 5 - var(--timeline-events-line-height) * 2); }
.timeline-events li:nth-child(6) { bottom: calc((var(--timeline-events-line-height) * 2) * 6 - var(--timeline-events-line-height) * 2); }

/* Timeline - Events - Colours */

/*Ausbildung*/
.timeline-events li:nth-child(1):before {
  background: #8cb1a9;
  background-image: linear-gradient(to right, var(--grid-background-color) 0, #8cb1a9 100%);
  border-radius: 0 6px 6px 0;
}
.timeline-events li:nth-child(1) h3 {
  color: #8cb1a9;
}

/*webmen*/
.timeline-events li:nth-child(2):before {
  background: #447172;
}
.timeline-events li:nth-child(2) h3 {
  color: #447172;
}

.timeline-events li:nth-child(2):hover::after {
    opacity: 1;
}

/*selbständig*/
.timeline-events li:nth-child(3):before {
  background: #ebc0a5;
}
.timeline-events li:nth-child(3) h3 {
  color: #ebc0a5;
}

/*map*/
.timeline-events li:nth-child(4):before {
  background: #ec9846;
}
.timeline-events li:nth-child(4) h3 {
  color: #ec9846;
}

/*selbständig*/
.timeline-events li:nth-child(5):before {
  background: #d5929c;
}
.timeline-events li:nth-child(5) h3 {
  color: #d5929c;
}

/*w4*/
.timeline-events li:nth-child(6):before {
  background: #bd5a42;
  background-image: linear-gradient(to right, #bd5a42 0, var(--grid-background-color) 100%);
  border-radius: 6px 0 0 6px;
}
.timeline-events li:nth-child(6) h3 {
  color: #bd5a42;
}

/* Timeline - Events - Grid */
.timeline-event-years-0,
.timeline-event-years-0:before {
  width: calc(var(--grid-width) * 0);
}

.timeline-event-years-05,
.timeline-event-years-05:before {
  width: calc(var(--grid-width) * 0 + (var(--grid-width) / 2));
}

.timeline-event-years-1,
.timeline-event-years-1:before {
  width: calc(var(--grid-width) * 1);
}

.timeline-event-years-1-5,
.timeline-event-years-1-5:before {
   width: calc((var(--grid-width) * 1) + (var(--grid-width) / 2));
}

.timeline-event-years-2,
.timeline-event-years-2:before {
  width: calc(var(--grid-width) * 2);
}

.timeline-event-years-2-5,
.timeline-event-years-2-5:before {
   width: calc((var(--grid-width) * 2) + (var(--grid-width) / 2));
}

.timeline-event-years-3,
.timeline-event-years-3:before {
  width: calc(var(--grid-width) * 3);
}

.timeline-event-years-3-5,
.timeline-event-years-3-5:before {
   width: calc((var(--grid-width) * 3) + (var(--grid-width) / 2));
}

.timeline-event-years-4,
.timeline-event-years-4:before {
  width: calc(var(--grid-width) * 4);
}

.timeline-event-years-4-5,
.timeline-event-years-4-5:before {
   width: calc((var(--grid-width) * 4) + (var(--grid-width) / 2));
}

.timeline-event-years-5,
.timeline-event-years-5:before {
  width: calc(var(--grid-width) * 5);
}

.timeline-event-years-5-5,
.timeline-event-years-5-5:before {
   width: calc((var(--grid-width) * 5) + (var(--grid-width) / 2));
}

.timeline-event-years-6,
.timeline-event-years-6:before {
  width: calc(var(--grid-width) * 6);
}

.timeline-event-years-6-5,
.timeline-event-years-6-5:before {
   width: calc((var(--grid-width) * 6) + (var(--grid-width) / 2));
}

.timeline-event-years-7,
.timeline-event-years-7:before {
  width: calc(var(--grid-width) * 7);
}

/* X.5 years */
.timeline-event-years-6-5,
.timeline-event-years-6-5:before {
   width: calc((var(--grid-width) * 6) + (var(--grid-width) / 2));
}


/* Timeline - Legend */
.timelines-legend {
  position: absolute;
  top: 530px;
  font-size: 0.6em;
  color: #333;
  margin: 0 auto;
}

.timelines-legend li {
	list-style-type: none;
	display: inline-block;
	background-color: #f2f1ed;
	padding: 3px 5px;
  margin: 0 10px;
}

.timelines-legend li:nth-child(1) {
  color: #8cb1a9;
}

.timelines-legend li:nth-child(2) {
  color: #447172;
}

.timelines-legend li:nth-child(3) {
  color: #ebc0a5;
}

.timelines-legend li:nth-child(4) {
  color: #ec9846;
}

.timelines-legend li:nth-child(5) {
  color: #d5929c;
}

.timelines-legend li:nth-child(6) {
  color: #bd5a42;
}



/* CSS FAMOS

hellgruen       e6e9d2

grün			#92B72A;
a1ba9e

*/

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    border: none;
    

   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

/* lato-300 - latin */
@font-face {
  font-family: 'Open Sans Light';
  font-style: normal;
  font-weight: 300;
  src: url('../../files/fonts/OpenSans-Light.ttf'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('Open Sans Light'),
       url('../../files/fonts/OpenSans-Light.ttf') format('truetype'); /* Safari, Android, iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Open Sans Semi';
  font-style: bold;
  font-weight: 600;
  src: url('../../files/fonts/OpenSans-SemiBold.ttf'); /* IE9 Compat Modes */
  src: local('Open Sans Semi'), local('Open Sans Semi'),
       url('../../files/fonts/OpenSans-SemiBold.ttf') format('truetype'); /* Safari, Android, iOS */
}


body {
    font-family: 'Open Sans Light', sans-serif;
	font-weight: 300;
    font-size: 1.2em;
    background-color: #F2F1ED;
    text-align: center;
	color: #333;
}

#wrapper {
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: left;
}

#header {
	width: 100%;
	height: 280px;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	background-color: #f0efea;
}

#header .inside {
	position: relative;
	max-width: 1200px;
	width: 96%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 0;
}

#header .logo {
	padding: 20px 0 50px 0;
}

#header .logo img {
	width: 400px;
	height: auto;
}

#header {
	color: #333;
}


#main {
	width: 100%;
	text-align: center;
}

#main .mod_article {
	width: 100%;
	margin: 0 auto;
	min-height: 500px;
	text-align: center;
}

#main .mod_article .inside {
	width: 96%;
	max-width: 900px;
	min-height: 500px;
	padding: 200px 0;
	margin: 0 auto;
	text-align: center;
}

#main .mod_article.text {
	background-color: #f0efea;
	text-align: center;
	padding: 50px 0 0 0;
}


#main .mod_article .ce_text{
	max-width: 1100px;
	width: 96%;
	text-align: left;
	margin: 0 auto;
}

#main figure {
	line-height:0;
}

/*  SKILLS  */
#main .mod_article#skills {
	background-color: #f0efea;
	color: #333;
}

#main .mod_article#skills .rs-columns {
	width: 96%;
	min-height: 400px;
	padding: 100px 0 50px 0;
	margin: 0 auto;
	text-align: center;
}

#main .mod_article#skills h2 {
	font-family: 'Open Sans Semi';
	margin-bottom: 50px;
	text-transform: uppercase;
}

#main .mod_article#skills video {
	margin-bottom: 50px;
}

#main .mod_article#skills .ce_text {
	max-width: 450px;
	margin: 0 auto;
}

#main .mod_article#skills .ce_hyperlink {
	margin-bottom: 50px;
}

/*  zweispaltig kontakt  */
#main .mod_article#kontakt .rs-column .inside {
	width: 50%;
	margin: 0 auto;
}

#main .mod_article#kontakt .rs-column:nth-child(1) .inside {
	margin: 0 0 0 auto;
}

#main .mod_article#kontakt .rs-column:nth-child(2) .inside {
	margin: 0 auto 0 0;
}

@media screen and (max-width:900px) {
	#main .mod_article#kontakt .rs-column:nth-child(1) .inside {width: 100%;margin: 0 auto; border: 1px solid red;}
	#main .mod_article#kontakt .rs-column:nth-child(2) .inside {width: 100%;margin: 0 auto;}
}

/*  REFERENZEN  */
#main .mod_article.referenzen {
	color: #fff;
}

#main .mod_article.has-responsive-background-image.parallax {
	background: url("../../files/layout/transparent60.png") repeat;
}

#main .mod_article.referenzen h2 {
	font-family: 'Open Sans Semi';
	margin-bottom: 50px;
	text-transform: uppercase;
}

#main p {
	margin-bottom: 30px;
}

#main ul {
	margin: 0 0 30px 30px;
	
}


#main .mod_article .ce_hyperlink {
	padding: 40px 0;
}

#main .mod_article .ce_hyperlink a {
	background-color: #e6e9d2;
	color: #7ca078;;
	padding: 15px 30px;
	font-size: 0.8em;
	text-transform: uppercase;
  font-family: 'Open Sans Semi';
}

#main strong {
  font-family: 'Open Sans Semi';
}

#main #kontakt.mod_article .inside,
#main #uebermich.mod_article .inside,
#main #impressum.mod_article .inside,
#main #datenschutz.mod_article .inside {
	color: #333;
	text-align: left;
	font-size: 0.9em;
	min-height: 150px;
}

#main #uebermich.mod_article {
	min-height: 50px;
}

#main #uebermich.mod_article .inside {
	min-height: 50px;
	padding: 200px 0 0 0;
}

#main #kontakt a,
#main #uebermich a,
#main #impressum a,
#main #datenschutz a {
	color: #7ca078;
}


/* Sweep To Right */
#main .mod_article .ce_hyperlink a,
#main .mod_article.referenzen2 a{
  display: inline-block;
  transform: perspective(1px) translateZ(0);
  position: relative;
  transition: color 0.3s;
}
#main .mod_article .ce_hyperlink a:before,
#main .mod_article.referenzen2 a:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #7ca078;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s ease-out;
}
#main .mod_article .ce_hyperlink a:hover,
#main .mod_article.referenzen2 a:hover{
  color: #fff;
}
#main .mod_article .ce_hyperlink a:hover:before,
#main .mod_article.referenzen2 a:hover:before{
  transform: scaleX(1);
}


/*  TESTSEITE  */
#main .mod_article.referenzen2 .ce_text {
	max-width: 100%;
	width: 100%;
	text-align: left;
	margin: 0 auto;
	color: #333;
}

#main .mod_article.referenzen2 .ce_text h3 {
	margin-top: 60px;
}

#main .mod_article.referenzen2 a {
	background-color: #e6e9d2;
	color: #7ca078;;
	padding: 15px 30px;
	font-size: 0.8em;
	text-transform: uppercase;
  font-family: 'Open Sans Semi';
}

#main .mod_article.referenzen2 .ce_text .image_container {
	margin-right: 30px;
	overflow: hidden;
	max-width: 1100px;
	max-height: 825px;background: url("../../files/layout/transparent60.png") repeat;
}

#main .mod_article.referenzen2 .ce_text:nth-child(2n) {
	text-align: right;
}

#main .mod_article.referenzen2 .ce_text:nth-child(2n) .image_container {
	margin-right: 0;
	margin-left: 30px;
}


/* SCALE */
#main .mod_article.referenzen2 .ce_text .image_container img {
	width: 100%;
	height: auto;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: all 1.5s linear;
	-moz-transition: all 1.5s linear;
	-ms-transition: all 1.5s linear;
	-o-transition: all 1.5s linear;
	transition: all 1.5s linear;
}
#main .mod_article.referenzen2 .ce_text .image_container img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

#main #article-20 {
	text-align: left;
}

.wrapper {
  min-height: 800px;
  font-family: 'Open Sans', serif;
  font-weight: 300;
  color: #fff;
  position: relative;
  overflow: hidden;
}

section {
  height: 800px;
  font-size: 40px;
  font-weight: 100;

  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
}

/* Manuelle Umsetzung der $colors-Schleife */
section:nth-child(1) {
  background: white;
}
section:nth-child(2) {
  background: #F64747;
}
section:nth-child(3) {
  background: #22A7F0;
}
section:nth-child(4) {
  background: #F9690E;
}
section:nth-child(5) {
  background: #9B59B6;
}
section:nth-child(6) {
  background: #03C9A9;
}
section:nth-child(7) {
  background: #ffcc00;
}

.nav {
  margin: 0 0 50px 30px;
  list-style-type: none;
}

.nav__wrapper {
  position: fixed;
  height: 800px;
  padding: 30px;

  display: flex;
  flex-flow: column nowrap;
  /*justify-content: flex-end;*/
}

.nav__counter {
  font-size: 24px;
  transition: all 0.15s ease-out;
}

.nav__title {
  font-size: 32px;
  font-weight: 300;
  margin: 0 0 0.25em;
  width: 500px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s ease-out, opacity 0.2s ease-out;
}

.nav__body {
  font-weight: 100;
  font-size: 18px;
  width: 300px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s ease-out, opacity 0.2s ease-out;
}

.nav li {
  position: relative;
  transition: all 0.3s ease-out;
  margin-bottom: 1em;
}

.nav li::after {
  content: '';
  display: block;
  border-left: 3px solid white;
  border-top: 3px solid white;
  height: 250px;
  width: 20px;
  position: absolute;
  left: -30px;
  top: 15px;
}

.nav li a {
  display: block;
  padding: 0;
  color: #fff;
  transition: all 0.15s ease-out;
}

.nav li a:hover {
  background-color: transparent;
  padding-left: 1em;
}
.nav li a:focus {
  background-color: transparent;
}

.nav li.active {
  pointer-events: none;
  padding-left: 1em;
}

.nav li.active::after {
  width: 35px;
  height: 400px;
  top: 35px;
}

.nav li.active .nav__counter {
  font-size: 48px;
}

.nav li.active .nav__title {
  height: 40px;
  opacity: 1;
  overflow: visible;
}

.nav li.active .nav__body {
  height: 100px;
  opacity: 1;
  overflow: visible;
}