@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald');

/*
-----------------------------------------------------------------------------------------------------------
GRUNDSÄTZLICHES
-----------------------------------------------------------------------------------------------------------
*/

*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  width: 70%;
  margin: 2% 15% 2% 15%;
  font-size: 1.6rem;
  font-family: "Open", sans-serif;
  color: #ffffff;
  background-color: #303030;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
a {
  color: #d25555;
  text-decoration: none;
}
*/

a:link {
    color: #ffffff;									/* LINK Farbe z.B. #ffffff */
    background-color: transparent;					/* LINK Hintergrund z.B. transparent */
    text-decoration: none;							/* LINK Darstellung z.B. underline */
	opacity: .6;									/* LINK Transparenz z.B. 0.6 */
}

a:visited {
    color: #ffffff;									/* LINK Farbe z.B. #ffffff */
    background-color: transparent;					/* LINK Hintergrund z.B. transparent */
    text-decoration: none;							/* LINK Darstellung z.B. underline */
	opacity: .6;									/* LINK Transparenz z.B. 0.6 */
}

a:hover {
    color: #ffffff;									/* LINK Farbe z.B. #ffffff */
    background-color: transparent;					/* LINK Hintergrund z.B. transparent */
    text-decoration: none;							/* LINK Darstellung z.B. underline */
	opacity: 1.0;									/* LINK Transparenz z.B. 0.6 */
}

a:active {
    color: #ffffff;									/* LINK Farbe z.B. #ffffff */
    background-color: transparent;					/* LINK Hintergrund z.B. transparent */
    text-decoration: none;							/* LINK Darstellung z.B. underline */
	opacity: .6;									/* LINK Transparenz z.B. 0.6 */
}

.cd-btn {											/* BUTTON in SLIDERTEXT */
  display: inline-block;
  padding: 1.2em 1.4em;
  margin-top: .8em;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: lowercase;						/* lowercase = alles klein | uppercase = alles groß | capitalize = Normal */
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.0);	/* Versatz nach rechts | ... unten | Schärfe | Farbe */  
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.adresse {
  font-size: 1.0rem;
  font-family: "Open", sans-serif;
    left: 50%;
  
    position:absolute;
    bottom: 0;
/*    width: 100%;*/
    height: 6em;
}
/*	
.adresse {
  position: relative;
  float: left;
  left: 50%;
  font-size: 1.0rem;
  font-family: "Open", sans-serif;
  color: #ffffff;
  align: left;
  margin: auto;																/* oben rechts unten links z.B. 0px
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*/
.adresse-inner {
  position: relative;
  float: left;
  left: -50%;
  font-size: 1.0rem;
  font-family: "Open", sans-serif;
  color: #ffffff;
  align: left;
  margin: auto;																/* oben rechts unten links z.B. 0px*/
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.adresse-daten {
  position: relative;
  float: left;
  left: 0%;
  font-size: 1.0rem;
  font-family: "Open", sans-serif;
  color: #ffffff;
  align: left;
  margin: 50px;																/* oben rechts unten links z.B. 0px*/
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.halb {
  position: relative;
  float: left;
  width: 50%;
  font-size: 1.0rem;
  font-family: "Open", sans-serif;
  color: #ffffff;
  align: left;
  margin: auto;																/* oben rechts unten links z.B. 0px*/
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
-----------------------------------------------------------------------------------------------------------
SLIDER
-----------------------------------------------------------------------------------------------------------
*/

.cd-slideshow-wrapper {
  overflow: hidden;
}
@media only screen and (min-width: 600px) {
  .cd-slideshow-wrapper {
    height: 100vh;
  }
}

.cd-slideshow {
  position: relative;
}
.cd-slideshow::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-slideshow .sub-slides {
  width: 100%;
  /* Force Hardware acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-slideshow .sub-slides::after {
  clear: both;
  content: "";
  display: table;
}
.cd-slideshow > li, .cd-slideshow .sub-slides > li {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}
.cd-slideshow > li::after, .cd-slideshow .sub-slides > li::after {
  clear: both;
  content: "";
  display: table;
}
.cd-slideshow .sub-slides > li {
  float: left;
}
.cd-slideshow .slider-dots {
  /* 
  	dots visible on mobile when a slide has sub-slides
  	you won't see this element in the html - created using jQuery
  */
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 0;
  width: 100vw;
  text-align: center;
}
.cd-slideshow .slider-dots li {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 5px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.cd-slideshow .slider-dots li.active {
  background-color: #ffffff;
}
.cd-slideshow .slider-dots li:last-of-type {
  margin-right: 0;
}
.cd-slideshow.remove-transitions {
  /* 
  	remove transition on transforms 
  	used to switch form a slide to another from the main navigation
  */
  -webkit-transition: -webkit-transform 0s;
  -moz-transition: -moz-transform 0s;
  transition: transform 0s;
}
.cd-slideshow.remove-transitions .sub-slides {
  -webkit-transition: -webkit-transform 0s;
  -moz-transition: -moz-transform 0s;
  transition: transform 0s;
}
@media only screen and (min-width: 600px) {
  .cd-slideshow {
    /* Force Hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
  }
  .cd-slideshow::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
  .cd-slideshow .sub-slides {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
  }
  .cd-slideshow > li, .cd-slideshow .sub-slides > li {
    height: auto;
    width: auto;
  }
  .cd-slideshow .slider-dots {
    opacity: 0;
    visibility: hidden;
  }
}

/* -------------------------------- 

Slide Content

-------------------------------- */
.cd-slider-content {
  position: relative;
  height: 100vh;
  width: 100vw;
  float: left;
  display: table;
}
.cd-slider-content .content-wrapper {										/* Einstellung (Höhe und Breite) der TOPSLIDER */
  display: table-cell;		
  vertical-align: middle;
  text-align: center;
  background-color: #010557;												/* Hintergrundfarbe z.B. d25555 */
}

.cd-slider-content .content-wrapper-bild {									/* Einstellung (Höhe und Breite) der SLIDER mit HINTERGRUNDBILD */
  display: table-cell;		
  vertical-align: middle;
  text-align: center;
  background-color: #010557;												/* Hintergrundfarbe z.B. d25555 */
}

/*
-----------------------------------------------------------------------------------------------------------
HINTERGRUNDFARBE / BILD > TOPSLIDER
-----------------------------------------------------------------------------------------------------------
*/

.cd-slideshow > li:nth-of-type(1) .cd-slider-content .content-wrapper {								
  background: #010557;													/* >>> START Hintergrundbild */
/*  background-image: url("../img/hintergrund-tinte15.jpg");				/* >>> START Hintergrundbild */
}
.cd-slideshow > li:nth-of-type(2) .cd-slider-content .content-wrapper {
  background: #f07d00;														/* >>> BÜRO Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(3) .cd-slider-content .content-wrapper {
  background: #f5ad03;														/* >>> PAPIER Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(4) .cd-slider-content .content-wrapper {
  background: #028205;														/* >>> DRUCK Hintergrundfarbe */
/*  background-image: url("../img/slider-01.jpg");										/* >>> DRUCK Hintergrundbild */
}

.cd-slideshow > li:nth-of-type(5) .cd-slider-content .content-wrapper {
  background: #8d0e92;														/* >>> WERBUNG Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(6) .cd-slider-content .content-wrapper {
  background: #54302e;														/* >>> WERBEMITTEL Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(7) .cd-slider-content .content-wrapper {
  background: #00449a;														/* >>> TONER Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(8) .cd-slider-content .content-wrapper {
  background: #42929d;														/* >>> TEXTILIEN Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(9) .cd-slider-content .content-wrapper {
  background: #c7b89f;														/* >>> VERPACKUNG Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(10) .cd-slider-content .content-wrapper {
  background: #010557;														/* >>> KONTAKT Hintergrundfarbe */
}


/*
-----------------------------------------------------------------------------------------------------------
HINTERGRUNDFARBE / BILD > anders als TOPSLIDER
-----------------------------------------------------------------------------------------------------------
*/

.cd-slideshow > li:nth-of-type(1) .cd-slider-content .content-wrapper-bild {/* >>> START Hintergrundfarbe oder Bild */
/*  background: #d25555;																/* >>> START Hintergrundfarbe */
  background-image: url("../img/hintergrund-tinte15.jpg");								/* >>> START Hintergrundbild */
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
  background-size: cover;
}
.cd-slideshow > li:nth-of-type(2) .cd-slider-content .content-wrapper-bild {
  background: #f07d00;														/* >>> BÜRO Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(3) .cd-slider-content .content-wrapper-bild {
  background: #f5ad03;														/* >>> PAPIER Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(4) .cd-slider-content .content-wrapper-bild {
/*  background: #028205;													/* >>> DRUCK Hintergrundfarbe */
  background-image: url("../img/slider-01.jpg");										/* >>> DRUCK Hintergrundbild */
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
  background-size: cover;
}

.cd-slideshow > li:nth-of-type(5) .cd-slider-content .content-wrapper-bild {		
  background-image: url("../img/slider-03.png");										/* >>> WERBUNG Hintergrundbild */
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
  background-size: cover;
/*  background: #8d0e92;													/* >>> WERBUNG Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(6) .cd-slider-content .content-wrapper-bild {
  background: #54302e;														/* >>> WERBEMITTEL Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(7) .cd-slider-content .content-wrapper-bild {
  background: #00449a;														/* >>> TONER Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(8) .cd-slider-content .content-wrapper-bild {
  background: #42929d;														/* >>> TEXTILIEN Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(9) .cd-slider-content .content-wrapper-bild {
  background: #c7b89f;														/* >>> VERPACKUNG Hintergrundfarbe */
}
.cd-slideshow > li:nth-of-type(10) .cd-slider-content .content-wrapper-bild {
/*  background: #d25555;																/* >>> KONTAKT Hintergrundfarbe */
  background-image: url("../img/hintergrund-tinte15.jpg");								/* >>> KONTAKT Hintergrundbild */
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
  background-size: cover;
}


.cd-slider-content h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  color: #ffffff;
}

.cd-slider-content h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  color: #ffffff;
}

.cd-slider-content h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.5rem;
  color: #ffffff;
}

.megalink a {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

.cd-slider-content p {
  margin: 1em 0 2em;
  opacity: .6;
}

@media only screen and (min-width: 600px) {
  .cd-slider-content {
    height: 84vh;													/* >>> HÖHE der SLIDER bzw. maximaler Inhalt */
    width: 90vw;													/* >>> BREITE der SLIDER bzw. maximaler Inhalt */
    margin: 2vh 5vw;												/* >>> BREITE / >>> HÖHE ABSTAND zum Rand */	
    border-radius: 10px;											/* RUNDUNG des Rahmens einstellen bei NICHT AKTIVEN SLIDERN z.B. 10px */
    cursor: pointer;												/* DARSTELLUNG des CURSORS z.B. pointer */
  }
  .visible .sub-visible .cd-slider-content, .visible > .cd-slider-content {
    /* visible slide */
    cursor: auto;
  }
  .cd-slideshow > li:first-of-type .cd-slider-content {
    margin-top: 8vh;												/* ABSTAND des STARTSLIDERS zum obigen Rand */
  }
  .sub-slides > li:first-of-type .cd-slider-content {
    margin-left: 5vw;												/* >>> BREITE / ABSTAND der weiteren SLIDER zum linken Rand */
  }
  .sub-slides > li .cd-slider-content {
    margin-left: 1.25vw;											/* >>> BREITE / ABSTAND der nachfolgenden SLIDER zueinander > führt u.U. zu Verschiebungen */
    margin-right: 1.25vw;											/* >>> BREITE / ABSTAND der vorherigen SLIDER zueinander > führt u.U. zu Verschiebungen */
  }
  .cd-slider-content .content-wrapper {
    height: 100%;
    /* Versteckt den Folieninhalt, wenn die Folie nicht aktiv ist */
    opacity: 0;													/* TRANSPARENZ des SLIDERS einstellen */
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: inherit;										/* RUNDUNG des Rahmens einstellen bei AKTIVEN SLIDERN z.B. 10px oder inherit (Vererbt) */
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }

  .cd-slider-content .content-wrapper-bild {
    height: 100%;
    /* Versteckt den Sliderinhalt, wenn der Slider nicht aktiv ist */	
    opacity: 0; 												/* TRANSPARENZ des SLIDERS einstellen */ 
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: inherit;										/* RUNDUNG des Rahmens einstellen bei AKTIVEN SLIDERN z.B. 10px oder inherit (Vererbt) */
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }  

  .cd-slider-content::after {
    /* Wird verwendet, um die Sliderhintergrundfarbe zu ändern, wenn der Slider nicht aktiv ist */
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background-color: #3a3a3a;									/* HINTERGRUNDFARBE des nicht aktiven SLIDERS z.B. #3a3a3a; */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.6s, visibility 0.6s;
    -moz-transition: opacity 0.6s, visibility 0.6s;
    transition: opacity 0.6s, visibility 0.6s;
  }
  .visible .cd-slider-content .content-wrapper {
    opacity: 1;
  }

  .visible .cd-slider-content .content-wrapper-bild {
    opacity: 1;
  }

  .visible .cd-slider-content::after {
    opacity: 0;
    visibility: hidden;
  }

  .cd-slider-content h2 {
    font-family: 'Oswald', sans-serif;
	font-size: 8.0rem;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin: auto;															/* oben rechts unten links z.B. 0px*/
	line-height: 1.2;
/*
	margin-bottom: 0px;
*/
  }
  
  .cd-slider-content h3 {
    font-family: 'Oswald', sans-serif;
	font-size: 6.0rem;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin: auto;															/* oben rechts unten links z.B. 0px*/
	line-height: 1.0;	
  }

/*
  .cd-slider-content h2 {
    font-size: 4rem;
    font-weight: 300;
  }
*/ 

  .cd-slider-content h4 {
    font-family: 'Oswald', sans-serif;
	font-size: 2.0rem;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin: auto;															/* oben rechts unten links z.B. 0px*/
	line-height: 1.0;	
  }


  .cd-slider-content p {
    font-family: 'Open', sans-serif;
	font-size: 1.0em;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin:0px;																/* oben rechts unten links */
	line-height: 1.2;
	margin-bottom: 0px;
	opacity: .6;															/* Transparenz p  z.b: 0.6 */
  }

/*
  .cd-slider-content p {
    font-weight: bold;
  }
*/

}

@media only screen and (min-width: 1100px) {
  .cd-slider-content h2 {
    font-family: 'Oswald', sans-serif;
	font-size: 12.0rem;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin: auto;															/* oben rechts unten links z.B. 0px*/
	line-height: 1.2;
/*
	margin-bottom: 0px;
*/
  }	

  .cd-slider-content h3 {
    font-family: 'Oswald', sans-serif;
	font-size: 8.0rem;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin: auto;															/* oben rechts unten links z.B. 0px*/
	line-height: 1.0;	
  }

  .cd-slider-content h4 {
    font-family: 'Oswald', sans-serif;
	font-size: 4.0rem;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin: auto;															/* oben rechts unten links z.B. 0px*/
	line-height: 1.0;	
  }

  .cd-slider-content p {
    font-family: 'Open', sans-serif;
	font-size: 1.2em;														/* Schriftgröße H2 z.b: 3rem */
	font-weight: 900;
	color: #ffffff;
	margin:0px;																/* oben rechts unten links */
	line-height: 1.2;
	margin-bottom: 0px;
	opacity: .6;															/* Transparenz p  z.b: 0.6 */
  }
}


/* -------------------------------- 

Slideshow Navigation

-------------------------------- */
.cd-slideshow-nav {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}
.cd-slideshow-nav .cd-nav-items {
  position: fixed;
  z-index: 1;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: #171717;						/* Hintergrundfarbe NAVIAGTION */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-slideshow-nav .cd-nav-items > ol {
  height: 100%;
  overflow: auto;
  padding: 80px 20px 80px 30px;
}
.cd-slideshow-nav ol ol {
  padding-left: 1em;
}
.cd-slideshow-nav a {
  color: #ffffff;
  display: inline-block;
  margin-bottom: .8em;
}
.cd-slideshow-nav a:before {
  /* list bullets */
  position: relative;
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #6e6e6e;
  border-radius: 50%;
  margin-right: .4em;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.cd-slideshow-nav.nav-open .cd-nav-items {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-slideshow-nav.nav-open .cd-nav-items > ol {
  -webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 600px) {
  .cd-slideshow-nav .cd-nav-items > ol {
    padding: 10vh 10vw;								/* Abstand der NAVIGATION vom Rand z.B. 14vh 6vw */
  }
  .cd-slideshow-nav ol ol {
    padding-left: 3em;								/* Abstand der UNTERNAVIGATION zur NAVIGATION z.B. 3em */
  }
  .cd-slideshow-nav a {
    font-weight: bold;								/* Schriftstärke NAVIGATION */
    color: #595959;									/* Schriftfarbe NAVIGATION */
    font-size: 3rem;								/* Schriftgröße NAVIGATION */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
  }

  .cd-slideshow-nav a:before {
    /* list bullets */
    width: 24px;
    height: 24px;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
  }
  .no-touch .cd-slideshow-nav a:hover {
    color: #ffffff;
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(1) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(1) li a:hover::before {
    background: #f07d00;															/* >>> ALLGEMEIN */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(2) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(2) li a:hover::before {
    background: #f07d00;															/* >>> BÜRO */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(3) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(3) li a:hover::before {
    background: #f5ad03;															/* >>> PAPIER */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(4) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(4) li a:hover::before {
    background: #028205;															/* >>> DRUCK */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(5) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(5) li a:hover::before {
    background: #8d0e92;															/* >>> WERBUNG */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(6) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(6) li a:hover::before {
    background: #54302e;															/* >>> WERBEMITTEL */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(7) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(7) li a:hover::before {
    background: #00449a;															/* >>> TONER */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(8) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(8) li a:hover::before {
    background: #42929d;															/* >>> TEXTILIEN */
  }
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(9) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(9) li a:hover::before {
    background: #c7b89f;															/* >>> VERPACKUNG */
  } 
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(10) a:hover::before,
  .cd-slideshow-nav .cd-nav-items > ol > li:nth-of-type(10) li a:hover::before {
    background: #c7b89f;															/* >>> KONTAKT */
  } 

}

.cd-nav-trigger {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  height: 40px;
  width: 40px;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* replace text with image */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
}
.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
  /* used to create the menu icon */
  position: absolute;
  height: 2px;
  width: 18px;
  background-color: #ffffff;
}
.cd-nav-trigger span {
  /* menu icon middle line */
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.cd-nav-trigger span::after, .cd-nav-trigger span::before {
  content: '';
  left: 0;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-nav-trigger span::before {
  /* menu icon middle top line */
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger span::after {
  /* menu icon middle bottom line */
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.nav-open .cd-nav-trigger span {
  background-color: transparent;
}
.nav-open .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-open .cd-nav-trigger span::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media only screen and (min-width: 600px) {
  .cd-nav-trigger {
    height: 48px;
    width: 48px;
    left: calc(2.5vw - 24px);
    top: calc(4vh - 24px);
  }
}

/* -------------------------------- 

no-js

-------------------------------- */
.no-js .cd-slideshow-wrapper {
  overflow: visible;
  height: auto;
}

.no-js .cd-slideshow > li,
.no-js .cd-slideshow .sub-slides > li {
  height: auto;
  width: 100vw;
  margin: 0;
}

.no-js .cd-slider-content {
  margin: 0;
  height: 100vh;
  width: 100%;
  border-radius: 0;
}

.no-js .cd-slideshow > li:first-of-type .cd-slider-content,
.no-js .sub-slides > li:first-of-type .cd-slider-content,
.no-js .sub-slides > li .cd-slider-content {
  margin: 0;
}

.no-js .cd-slider-content .content-wrapper {
  opacity: 1;
  box-shadow: none;
}

.no-js .cd-slider-content::after {
  opacity: 0;
  visibility: hidden;
}

.no-js .cd-nav-trigger {
  display: none;
}

.no-js .cd-slideshow-nav {
  position: static;
}

.no-js #icon-keyboard {
  display: none;
}

.no-js .cd-slideshow-nav .cd-nav-items {
  position: static;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.no-js .cd-slideshow-nav .cd-nav-items {
  height: auto;
}

.no-js .sub-nav {
  display: none;
}