*{
    margin: 0px;
    padding: 0px;
}

/* Phone */

html, body {
  height: 100%;
}

@font-face {
    font-family: vollkorn-boldItalic;
    src: url('../fonts/vollkorn-boldItalic.ttf');
}

@font-face {
    font-family:  vollkorn-medium;
    src: url('../fonts/vollkorn-medium.ttf');
}

#cookiedingsbums{
width: 100%;
min-height: 16%;
min-height: 68px;
padding-top: 2%;
padding-bottom:4%;
background-color:#C0C0C0;
position: relative;
z-index: 10000;
font-family: Arial, sans-serif;
}

#cookiedingsbums  a {
  color:#C64001;

}

#cookiedingsbums a:hover {
  text-decoration:underline;
}

#text{
 width: 98%;
 margin-left: 2%; /* 80%;*/
padding-top: 3%;
}

.OK_Button {
padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
  position: relative;
  top: 2%;
  left: 2%;
  cursor: pointer;
  background-color: #ffc400;

}
.OK_Button:hover {
text-decoration:underline;
}

#wrapper{
  height: 100%;
  width: 100%;
  float: left;
  overflow-x: hidden;
  * Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ac0401+0,ffc400+100 */
    background: #ac0401; /* Old browsers */background-position: center;
    background: -moz-linear-gradient(top,  #ac0401 0%, #ffc400 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ac0401 0%,#ffc400 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ac0401 0%,#ffc400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac0401', endColorstr='#ffc400',GradientType=0 ); /* IE6-9 */
    position: relative;
}

header{
  width: 100%;
  min-height: 22%;
  height: 125px;
  float: left;
  background: no-repeat url(../images/header-phone.png);
  background-position: center;
  border-bottom: solid 1px #C0C0C0;
  z-index: 2;
}

#header-xing{
    width: 34px;
    height: 34px;
    float: right;
    margin-top: 10px;
    margin-right: 3px;
}

#header-linkedin{
    width: 34px;
    height: 34px;
    float: right;
    margin-top: 10px;
    margin-right: 3px;
}

.menu_icon{
  margin-top: 16px;
  margin-left: 12px;
  display: block;
  border: none;
  background-color: transparent;
  position: absolute;
  width: 45px;
  height: 45px;
  cursor:  pointer;
}

.menu_icon{
  width: 45px;
  height: 45px;
  border: none;
}

.menu_icon:focus{
  outline: none;
}

.menu_icon span{
  display:block;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 7px;
  background:#000;
}

.menu_icon span:before, .menu_icon span:after{
  position: absolute;
  display: block;
  left: 0;
  width:100%;
  height:7px;
  background-color: #000;
  content:"";
}

.menu_icon span:before{
  top: -14px;
}

.menu_icon span:after{
  bottom: -14px;
}

.menu_icon-X span{
  transition: background 0s 0,3s;
}

.menu_icon-X span:before, .menu_icon-X span:after{
   transition-duration: 0.4s, 0.4s;
   transition-delay: 0.2s, 0s;
 }

.menu_icon-X span:before{
  transition-property: top, transform;
}

.menu_icon-X span:after{
  transition-property: bottom, transform;
}

.menu_icon-X.is-active span{
  background: none;
}

.menu_icon-X.is-active span:before{
  top: 0; transform: rotate(50deg);
}

.menu_icon-X.is-active span:after{
  bottom: 0; transform: rotate(-50deg);
}

.menu_icon-X.is-active span:before, .menu_icon-X.is-active span:after{
  transition-delay: 0s, 0.2s;
}

ul{
  list-style-type: none;
}

li a{text-decoration: none;
}

nav{
width: 100%;
margin-left: 5px;
display: none;
z-index: 9;
margin: 0 auto;
background-color: #C0C0C0;
}

ul#navi{
width: 150px;
z-index: 9;
margin: 0 auto;
}

/* Dropdownmenüpunkte  */
nav #navi ul {
  float: left;
  width: 350px;
  height:123px;
z-index: 9;
margin-left: -100px;
border-top: solid 1px #262626;
border-bottom: solid 1px #262626;
}

nav #navi ul li a{
height: 200px;
z-index: 9;
}

/* Haubtmenüpunkte  */
nav #navi li a{
 width: 75px;
  height: 44px;
  padding: 10px;
  line-height: 50px;
  z-index: 9;
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #262626;
}

/* Haubtmenüpunkte  */
nav #navi li a:focus, nav #navi li a:hover, nav #navi li a:focus, nav #navi li a:hover{
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #FFD400;
  z-index: 9;
}

/* Dropdownmenüpunkte  */
nav #navi ul li a{
  float: left;
  width: 155px;
  height: 60px;
  padding-left: 7px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  background-color: transparent;
  text-align: center;
  color: #262626;
  line-height: 20px;
  z-index: 9;
}

/* Dropdownmenüpunkte*/
nav #navi ul li a:focus, nav #navi ul li a:hover, nav #navi ul li a:focus, nav #navi ul li a:hover{
width: 155px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #AE0A01;
  z-index: 9;
}

#container {
  width: 100%;
  min-height: 73%;
  float: left;
  z-index:2;
}

#content{
  padding-top: 2%;
  padding-bottom: 2%;
}

  h1{ /*   Seiten Titel    */
      font-family: 'vollkorn-boldItalic', Arial, sans-serif;
      color: #262626;
      font-size: 40px;
      padding-left: 20px;
      padding-bottom: 11px;
  }

  h2{  /*   Artikel Titel     */
      font-family: 'vollkorn-medium', Arial, sans-serif;
      color: #262626;
      font-size: 20px;
      padding-left: 20px;
  }

  p{   /*   Text ausrichtung     */
      padding-left: 20px;
      padding-right: 10px;

  }

  a{    /*   Link Design im Text    */
      text-decoration: none;
      color: #262626;
    }

footer{
  width: 100%;
  height: 3%;
  float: left;
  padding-top: 2px;
  z-index: 2;
  text-align: center;
  border-top: solid 1px #c1c1c1;
}

@media only screen and (min-width: 700px ) {/* Tablet */

#cookiedingsbums{

min-height: 2%;
padding-bottom:2%;
}

.OK_Button{
top:10%;
right: 2%;
	}



header{
  min-height: 10%;
  height: 162px;
  background: no-repeat url(../images/header-tablet.png);
  background-position: center;
}

nav #navi ul  {
  width: 720px;
  margin-left: -285px;
  height:38px;
  }

nav #navi ul li a{
  width: 161px;
  height: 15px;
  padding-left: 7px;
  text-align: center;
}

#container {
  min-height: 78%;
  }

  #content{
    padding-top: 3%;
  }

footer{
  height: 3%;
  width: 100%;
  float: left;
  padding-top: 15px;
padding-bottom: 7px;
  z-index: 2;
  border-top: solid 1px #C0C0C0;
}
  }

@media only screen and (min-width: 1400px  ) { /* Notebook programmieren 1100px / Notebook  1400px voll*/

#cookiedingsbums{
width: 80%;
min-height: 1%;
margin-top: 1%;
margin-left: 10%;
padding-bottom:1%;
}

.OK_Button {
top: 15%;
}

#wrapper{
width: 80%;
margin-left: 10%;
  }

.menu_icon{
  display: none;
  }

#navigation{
  width: 18%;
  min-height: 65%;
  float: left;
  border-right: solid 1px #C0C0C0;
  padding-left: 4%;
}

nav{
  width: 18%;
  height: 66%;
  padding-top: 20px;
  display: block;
  float: left;
  z-index: auto;
  background-color: transparent;
}

nav #navi{
  width: 110px;
}
     /* Dropdownmenüpunkte  */

nav #navi ul {
  height: auto;
  line-height:43px;
  margin-left:10px;
  border: none;
}

nav #navi ul li a{
  float: none;
}

#container {
  float: left;
  width: 77%;
  min-height: 71%;
  border-left: solid 1px #C0C0C0;
}

footer{
  height:4%;
  width: 100%;
  float: left;
  border-top: solid 1px #C0C0C0;
}
  }

/*################### Desktop-PCS #################*/
@media only screen and (min-width: 1920px) {

#navigation{
min-height: 78%;
}

#container {
min-height: 78%;
}

footer{
height: 3%;
}
    }
/*################### LIGHTBOX-Modul #################*/

  html, body{
  height: 100%;
  overflow-x: hidden;
}

/*################### Phone #################*/

.gallery img{
    width:25%;
    height: auto;
    float: left;
    padding-top: 1.5%;
    padding-left: 4%;
    padding-right: 3%;
    padding-bottom: 1.5%;

}

.picture img{
  width:100px;
  height: auto;
  float: right;
  padding-right: 14%;
}
/*################### LIGHTBOX #################*/

#lightbox_overlay{
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    display: none
}

#lightbox_overlay #lightbox_inhalt{
    width: 84%;
    min-height: 100%;
    position:absolute;
    background: rgba(235,128,0,0.9);
    padding: 0% 8% 0 8%;
  }

#lightbox_overlay #lightbox_inhalt img{
    width: 98%;
    min-height: 100%;
    padding-top: 16%;
    padding-left:1%;
    padding-right: 1%;
  }

#lightbox_overlay #lightbox_inhalt #nav{
  width: 100%;
  margin: 3% 0 20px 0;
  padding-top: 2%;
  font-size: 18px;
  color: #262626;
  text-align: center;
}

#lightbox_overlay #lightbox_inhalt #nav .back{
float: left;
}

#lightbox_overlay #lightbox_inhalt #nav .next{
float: right;
padding-right:4%;
}

#lightbox_overlay #lightbox_inhalt #nav span{
  cursor: pointer;
}

/*################### Tablet Hochformat #################*/
@media only screen and (min-width: 700px ) {

#lightbox_overlay #lightbox_inhalt img{
  padding-top: 8%;
  }

#lightbox_overlay #lightbox_inhalt #nav{
    color: #262626;
    font-size: 27px;
  }
}

/*################### Notebook  1400px #################*/
@media only screen and (min-width: 1400px  ) {

#lightbox_overlay #lightbox_inhalt{
  width: 78%;
  padding: 0% 10% 0 12%;
  }

  #lightbox_overlay #lightbox_inhalt img{
    width: 75%;
    padding-left: 12%;
    padding-top: 1%;
    padding-bottom: 1%;
    }

#lightbox_overlay #lightbox_inhalt #nav{
  padding-top: 1%;
    margin: 1% 0 0px 0;
  }
}