html.wf-loading * {
    color: transparent !important;
}

 @font-face {
    font-family: Amatic;
    src: url("../fonts/AmaticSC-Regular.ttf");
}

 @font-face {
    font-family: Bold;
    src: url("../fonts/AmaticSC-Bold.ttf");
}

 @-webkit-keyframes fadein { 
    from { opacity:0; }
    to { opacity:0,9; }
}

 body {
  font-family: 'Bold';
  animation: fadein 3s;
  -webkit-animation: fadein 3s;
}

 #wrapper { 
  width: 1280px;
}

 a:link  { 
  color: Black;
  text-decoration: none;
}

 a:hover  { 
  color: red; 
  font-weight: 900;
  transition: all 1s;
}

 a:visited  { 
  color: black;
  text-decoration: none;
}

 b  { 
  font-family: 'Amatic';
  font-weight: bold;
  color: red;
}

 #menu { 
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  border-bottom: 1px solid black;
  text-align: center;
  font-family: 'Amatic';
  font-size: 180%;
  z-index: 1;
  animation: fadein 5s;
  -webkit-animation: fadein 5s;
}

 #menu_item { 
  padding-left: 20px;
  padding-right: 20px; 
}

 .menu {
   padding: 0px;
   margin: 0px;
   list-style-type: none;
   display: block
}

 .menu ul {
   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   list-style-type: none;
}

 .menu li {
   float: left;
   white-space: nowrap;
}

 .menu a {
   text-align: left;
   padding-left: 15px;
   padding-right: 15px;
   background-color: #fff;
   display: block;
   text-decoration: none;
}

 .menu ul a:link {
   border-bottom: none;
   background-color: gainsboro;
}

 .menu ul a:visited {
   border-bottom: none;
   background-color: gainsboro;
}

 .menu ul a:hover {
   background-color: WhiteSmoke;
}

 .menu li:hover ul, ul.menu li.hover ul {
   visibility: visible;
}

 .menu li li {
   float: none;
   border: none;
   padding: 0px;
   margin: 0px;
}

 #logo { 
  position: relative;
  margin-top: 30px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}

 #text { 
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
  width: 900px;
  font-family: 'Bold';
  font-size: 140%;
  animation: fadein 3s;
  -webkit-animation: fadein 3s; 
}

 #frame { 
  width: 900px;
  height: 600px; 
}

 #galerie { 
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
  width: 890px;
  animation: fadein 3s;
  -webkit-animation: fadein 3s; 
}

 #item  {
  width: 200px;
  height: 265px;
  vertical-align: bottom;
  text-align: center;
  background-repeat: no-repeat;
  display: table-cell;
}  

 #pic  {
  width: 200px;
  height: 200px;
  vertical-align: bottom;
  text-align: center;
  background-repeat: no-repeat;
  display: table-cell;
  border: 1px solid black;
}

 #title {
  margin-left: auto;
  margin-right: auto;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: gainsboro;
  border: 1px solid black;
  font-family: 'Bold';
  font-size: 140%;
  color: black;
  filter: Alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9;
  transition: all 1s;
}

 #title:hover {
  background-color: WhiteSmoke;
  color: red;
  filter: Alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;
}

 #order {
  margin-left: auto;
  margin-right: auto;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: white;
  font-family: 'Bold';
  font-size: 120%;
  color: black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  filter: Alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6;
  transition: all 1s;
}

 #order:hover {
  filter: Alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;
}

 #footer { 
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3px;
  padding-left: 30px;
  padding-right: 30px;
  width: 960px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-family: 'Amatic';
  font-size: 160%;
}

 #footer1 { 
  position: relative;
  top: 60px;
}

 #footer2 { 
  position: relative;
  top: 368px;
} 

 #footer3 { 
  position: relative;
  top: 127px;
} 

 #footer4 { 
  position: relative;
  top: 318px;
} 

 #footer5 { 
  position: relative;
  top: 164px;
} 

 #footer6 { 
  position: relative;
  top: 239px;
}

 #f1 { 
  text-align: left;
}

 #f2 { 
  position: absolute;
  left: 440px;
}

 #f3 { 
  text-align: right;
}

 #f4 { 
  position: absolute;
  left: 325px;
  font-family: 'Bold';
  font-size: 80%;
} 


 @media screen and (max-width: 768px) {
 #wrapper { 
  width: 735px; 
  margin-top: 2px; 
  margin-left: 0px;
}

 #menu {width: 735px;
  font-size: 160%;
}

 #menu_item { 
  padding-left: 8px;
  padding-right: 8px; 
}

 .menu ul a:link {
   visibility: hidden;
   
}

 #logo { 
  margin-top: 10px;
  margin-bottom: 10px;
}

 #text {
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  width: 715px;
  font-size: 130%; 
}

 #frame { 
  width: 715px; 
}

 #galerie { 
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  width: 715px; 
}

 #title {
  
  font-size: 130%;
}

 #order {
  font-size: 110%;
}

 #footer { 
  padding-left: 10px;
  padding-right: 10px;
  width: 735px;
  font-size: 140%;
}

 #footer1 {
  top: 20px;
}

 #footer2 { 
  position: relative;
  top: 194px;
} 

 #footer3 { 
  position: relative;
  top: 20px;
} 

 #footer4 { 
  position: relative;
  top: 154px;
} 

 #footer5 { 
  position: relative;
  top: 20px;
} 

 #footer6 { 
  position: relative;
  top: 75px;
}

 #f2 {
  left: 340px;
}

 #f4 {
  left: 225px;
}
}