@font-face {
font-family: myFirstFont;
src: url(ABeeZee-Regular.otf);
}
* {
font-family: myFirstFont;
}

#f1 {
 background: transparent url(praeg.png) no-repeat fixed right top;
 position: fixed; 
top: 0px;
left: 550px;
width: 135px;
height: 60px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
 opacity: 0.35; 

}





div.gallery {
  border: 4px solid #ccc;
  border-radius: 4pt;
  /* background-color: #fefecb; */
}

div.gallery:hover {
  /* border: 4px solid #0066cc; */
  box-shadow: -8px 0px 20px #555;
  transform: rotate(-2deg);
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 10px;
  text-align: center; letter-spacing: 1px;

   /* background-color: #fefecb;  */
}

* {
  box-sizing: border-box;
  background-color: #fefecb; /* ganze Seite */
  text-align: letter-spacing: 1px;

}

.responsive {
  padding: 0 12px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}