html,body{
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
   }
   a, a:visited{
    color: #FFF;
    text-decoration: none;
   }
a:hover{
    text-decoration: none;
    color:rgb(255, 0, 0);
    text-decoration: none;
  }
.header {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  z-index: 4;
  margin-top:-20px;
  display: flex;
  padding-top:20px;
  background-color:#000;
  border-bottom: 1px solid #FFF;
}
.header div {
  background-color:#000;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFF;
  font-size: 0.82em;
  /*   letter-spacing: 0.16em; */
  text-decoration: none;
 }
 .row{display:block;margin-left: 17px;}

 label.hamburg { 
  display:block;
  background: #555; width: 50px; height: 50px; 
  position: relative; 
  margin-left:20px; margin-right: auto;
  margin-top: 22px;
  border-radius: 24px; 
}

input#hamburg {display:none;}
.line { 
  position: absolute; 
  left:12px;
  
  height: 4px; width: 26px; 
  background: #fff; border-radius: 2px;
  display: block; 
  transition: 0.5s; 
  transform-origin: center; 
}
label.hamburg:hover{ 
 
  background:#ad0606;}
.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
  transform: translateY(12px) rotate(-45deg);

}

#hamburg:checked + .hamburg .line:nth-child(2){
  opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
  transform: translateY(-12px) rotate(45deg);
 
}
#hamburg:checked + .hamburg .line
hr{
  border: 1px solid #FFF;
}
@keyframes example {
  from {top:-100px;opacity: 0;}
  to {top:0px;opacity:1;}
}
#menu {
  background-color: #000;
  z-index: 3;
  position: fixed;
  left: 0;
  top:0px;
  width: 100%;
  height: 100%;
  overflow:hidden;
  background-color: #000;
  height:auto;
  width:16.5%;
  float: left;
padding-left: 7px;
padding-right: 7px;
  padding-top: 90px;
  line-height: 30px;
  animation-name: example;
  animation-duration: 2s;
}
.main {
width: 84%;
float: right;
padding-top: 110px;
background-color: #000;
z-index: 0;
}

 .gallery{
display:block;
padding-bottom: 40px;
padding-top: 60px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight:normal;
line-height: 22px;
letter-spacing: 0.05em;
text-align: justify;
  color:#FFF;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: auto;
  z-index: 0;
 }
#button{width:50px;
height: 50px;
background-image: url(../assets/aus.jpg);
background-repeat: no-repeat;
border:0;
z-index: 2;
margin-left: 40px;
border:1px solid #FFF;border-radius: 20%;
}
#button:hover{
background-image: url(../assets/an.jpg);
background-repeat: no-repeat;
border:0;
z-index: 2;
border:1px solid #fa0707;border-radius: 20%;
}
ul{line-height: 30px;}
.emo_face{list-style-type:"\1F60D";font-size:24px;} /* Face */
.emo_daumen{list-style-type:"\1F44D";font-size:24px;} /* Daumen nach oben */
.emo_lach{list-style-type:"\1F601";font-size: 24px;}   /* Laughing*/
.emo_zirkus{list-style-type:"\1F3AA";font-size: 24px;}  /* Zirkuszelt */
.emo_clown{list-style-type:"\1F921";font-size: 24px;}  /* Clown */
.emo_hg{list-style-type:"\2614";font-size: 24px;}  /* Regenschirm */
.emo_herz{list-style-type:"\1F9E1";font-size: 24px;}   /* Herz */
.emo_herz2{list-style-type:"\1F498";font-size: 24px;}   /* Herz2 */
.emo_kuss{list-style-type:"\1F48B";font-size: 24px;}   /* Kuss */
.emo_brief{list-style-type:"\1F4E9";font-size: 24px;}   /* Brief */
.emo_santa{list-style-type:"\1F385";font-size: 24px;}   /* Weihnachtsmann */
.emo_netz{list-style-type:"\1F310";font-size: 24px;}   /* Weltkugel */
.emo_baum{list-style-type:"\1F333";font-size: 24px;}   /* Baum */
.emo_cam{list-style-type:"\1F4F7";font-size: 24px;}   /* Kamera*/
.emo_welt{list-style-type:"\1F30D";font-size: 24px;}   /* Weltkugel*/
.emo_bulb{list-style-type:"\1F4A1";font-size: 24px;}   /* Glühbirne*/
.emo_fire{list-style-type:"\1F525";font-size: 24px;}   /* Feuer*/

.wort{font-family: Arial, Helvetica, sans-serif;font-size: 14px;letter-spacing: 0.09em;}
.marquee {
  max-width: 100vw; /* iOS braucht das */
      width:100%;
  white-space: nowrap;
  margin-left: -30px;
  overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #fff;
      letter-spacing: 0.1em;
      background-color: #000;
}
.contactdiv{
  width:100%;
  height:170px;
}

.tablecontact{
  display:block;
  margin-top: 160px;
  padding-right: 30px;
  padding-left: 0px;
  width:auto;
  height:auto;

}
.flipbox {
float:left;

  perspective: 2000px; 
  max-width: 180px; 
  margin-left:0px; 
  margin-top: -80px;
}
.flipbox:hover .flipper, .flipbox.hover .flipper { 
  transform: rotateY(180deg); 
}
.flipbox, .front, .back {
  width: 180px;height:180px; 
}

/** Für größere Viewports **/
@media (min-width: 640px) {
  .row{display: none;}
  label.hamburg{display: none;}
  .flipbox, .front, .back {
    width: 180px;height: 187px; 
  }
}

.flipper {
  position: relative;
  transition: 3s;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;top: 0;left: 0;
  backface-visibility: hidden;
}

.front {transform: rotateY(0deg);}
.back {transform: rotateY(180deg);}
@-webkit-keyframes example {
  from {top:-100px;opacity: 0;}
  to {top:0px;opacity:1;}
}



/* Grösse 1104px Ganz kleines Display---------------------------------------------*/
@media (max-width:375px) {}
label.hamburg{display:block;}
.row{display:block;}
#button{display:block;}
#menu{display:none;position:relative;width:100%;margin-top: 10px;z-index: 3;} 
.main{display:block;float:left;width:95%;margin-left:0px;padding-left: 60px;} 

.gallery{
  font-weight: normal;
}
/* Grösse 1104px Kleines Display---------------------------------------------*/
@media (max-width:1104px) {}
label.hamburg{display:block;}
.row{display:block;}
#button{display:block;}
#menu{display:none;position:relative;width:100%;margin-top: 10px;z-index: 3;} 
.main{float:left;width:95%;margin-left:-50px;} 
.gallery{
    margin-top: -60px;
    font-weight: normal;
}

/* Grösse 1104px Grosses Display---------------------------------------------*/
 @media (min-width:1105px) {
  #menu {
  display: block;
  z-index: 3;
  width:16.5%; 
  background-color: #000;
  z-index: 1;
  height:500px;
  float: left;
  position: fixed;
  padding: 16px;
  padding-top: 90px;
  line-height: 30px;
}
.main{
width: 84%;
float: right;
padding-top: 110px;
background-color: #000;
z-index: 0;}
#button{
display:none;}   
}