<style type="text/css">

/* ============================================
Grundeinstellungen und Hintergrund
============================================ */

body {
}

/* kein Abstand vor und nach Header und Footer (margin collapsing) */
header p, header h3, footer h4, footer p {
  margin: 0;
}

header,footer {
  background-color: #8B4513;
}

article {
  /* maximale Breite und Höhe ohne Scrollbars */
  position: absolute;
  top: 0; 
  left: 0;
  
  /* alle nicht-float Elemente zentrieren (auch Bilder) */
  text-align: center;
  
  background-color: #EFFFC0;  
}


.left-floating, .right-floating {
  margin-left: 15vw;
  margin-right: 15vw;
}
.left-floating p {
  text-align: left;
}
.right-floating p {
  text-align: right;
}
.left-floating img {
  float: left;
  margin-right: 1vw;
}
.right-floating img {
  float: right;
  margin-left: 1vw;
}
/* bei "about" nur schmale Ränder */
#about .left-floating {
  margin-left: 1vw;
  margin-right: 1vw;
}


/* ============================================
Schriftart
============================================ */
h1, h2, h3, h4, h5, h6, p, ul, li, form, span, a {
  font-family: 'Dosis', Verdana, Geneva, Arial, sans-serif;
  text-align: center;
  color: black;	  
}
h2 {
  margin-top: 8vw;
}
header h3, header p {
  color: #EFFFC0;
}
header h3 {
  margin-top: 3vw;
}
header p {
  text-align: right;
  margin-right: 20px;
}
footer h4, footer p {
  color: #EFFFC0;
}
footer p {
  font-size: 12px;
  text-align: left;
  margin-left: 20px;
}
header a, footer a, aside a {
  color: #EFFFC0;
}


/************ Bereiche für Responsive Einstellungen ab hier ************/

@media only screen {}

@media only screen and (min-width: 1025px) { /* fullsize */
article {
  /* Maximalbreite von "article" und zentrieren */
  width: 1024px;
  position: relative;
  margin-left: auto;
  margin-right: auto;

}

h1 {
  font-size: 64px;
}
h2 {
  font-size: 24px;
}

#topProduct img {
  max-width: 30%;
}

/* Formular-Labels (für alte Browser) mit Zeilenumbruch anzeigen */
#contact label {
  display: block;
}

/* ============================================
Hyperlinks (fullsize)
============================================ */

a {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* ============================================
Formular
============================================ */

#form-buttons input[type=submit]:hover {
  text-decoration: none;
}

/* ============================================
Navigation
============================================ */

aside {
  float: right;
  width: 50px;
  height: 100px;	  
  background: transparent;
}

/* Position des Menüs */
#flyoutmenu {
  position: fixed;
  margin-left: 50px;
  width: 50px;
  height: 50px;	  
  background: #8B4513;
}

/* Menü bei Mausover leicht verschieben */
#flyoutmenu:hover > ul {
  margin-left: -20px;
}

/* Formatierung der 1. Ebene -> Symbol */
#flyoutmenu ul {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  width: 50px; /* main menu width */
  background: #8B4513;
}

/* Elemente 1.+2. Ebene: Symbol bis 50px auffüllen und einmitten */
#flyoutmenu ul li {
  margin: 0;
  padding-top: 8px;
  padding-bottom: 6px;
}

/* Formatierung der 2. Ebene -> Menüeinträge */
#flyoutmenu ul ul {
  /* Position gegenüber Ancestor festlegen */
  position: absolute;
  top: 0;
  right: 50px;
  width: 120px; /* sub menu width */
  
  /* 2. Ebene ist standardmässig unsichtbar */
  visibility: hidden;
  opacity: 0;
}

/* Elemente 2. Ebene: rechtsbündig mit Abstand */
#flyoutmenu ul ul li {
  text-align: right;
  margin-right: 10px;
}

/* 2. Ebene sichtbar machen, wenn Menü angewählt */
#flyoutmenu:hover > ul li ul {
  visibility: visible;
  opacity: 1; /* used for animation */
}

/* Position der Facebook-Schaltfläche */
#facebookbox {
  position: fixed;
  margin-top: 50px;
  margin-left: 50px;
  width: 50px;
  height: 50px;	  
  background-image: url('facebook-background.png');
}

#facebookbox img {
  border-radius: 0;
  padding: 0;
  color: black;
  background-color: #FFDEAC;
  text-decoration: none;
}

/* Facebook-Schaltfläche bei Mauseover leicht verschieben */
#facebookbox:hover > img {
  /* unklar, wieso doppeltes Mass; bei -1px passiert nichts.. */
  margin-left: -40px;
}

/* Verschiebung bei Mousover verzögern */
.delay-shift {
  transition-property: margin-left;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: margin-left;
  -webkit-transition-duration: 200ms;
  -webkit-transition-timing-function: ease-out;
}

/* Einblenden der 2. Menüebene verzögern */
.delay-opacity {
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 200ms;
  -webkit-transition-timing-function: ease-in;
}

/* Position der hide/show-menu controls und unsichtbar */
#show-menu-control {
  position: fixed;
  margin-top: 0px;
  margin-left: 0px;
  visibility: hidden;
}
#hide-menu-control {
  position: fixed;
  margin-top: 100px;
  margin-left: 50px;
  visibility: hidden;
}

}

@media only screen and (max-width: 1124px) {
/* Menü nach innen klappen und Pfeile für Ein-/Ausblenden */

/* ============================================
Navigation
============================================ */

/* Position des Menüs */
#flyoutmenu {
  margin-left: 0px;
}
#facebookbox {
  margin-left: 0;
}

/* Position des hide-aside Pfeils und sichtbar */
#show-menu-control {
  visibility: visible;
}
#hide-menu-control {
  margin-left: 0px;
  visibility: visible;
}

}


@media only screen and (min-width: 481px) and (max-width: 1024px) { /* tablet size */

article {
  width: 100%;
}

h1 {
  font-size: 56px;
}
h2 {
  font-size: 20px;
}

#logo img {
  width: 400px;
}

#topProduct img {
  max-width: 40%;
}

.left-floating img, .right-floating img {
  max-width: 60%;
}

/* bei neueren Browser funktionieren die Formular-Platzhalter immer */
#contact label {
  display: none;
}

/* ============================================
Hyperlinks (tablet size)
============================================ */

a {
  border-radius: 12px;
  padding: 2px;
  border: 1px solid #8B4513;
  text-decoration: none;
}

/* bei Hyperlinks mit Bildern kein Rahmen */
a.imageLink {
  padding: 0;
  border-style: none;
}

header a, footer a, aside a {
  border-color: #EFFFC0;
  line-height: 2;
}


/* ============================================
Navigation
============================================ */

/* alles unsichtbar */
aside {
  display: none;
}

}


@media only screen and (min-width: 481px) and (max-width: 640px) { /* tablet size */
/* Spezialfall schmale Tablets: Rand muss für float Elemente abnehmen */

.left-floating, .right-floating {
  margin-left: 3vw;
  margin-right: 3vw;
}

}


@media only screen and (max-width: 480px) { /* smartphone size */
article {
  width: 100%;
}

h1 {
  font-size: 48px;
}
h2 {
  font-size: 18px;
}

#logo img {
  width: 250px;
}

#topProduct img {
  max-width: 60%;
}

/* Bild und Text immer auf getrennten Zeilen */
.left-floating img, .right-floating img {
  float: none;
  max-width: 90%;  
}
/* und Text zentrieren */
.left-floating p, .right-floating p {
  text-align: center;
  margin-top: 0;
}
/* bei "about" weiterhin linksbündiger Text */
#about .left-floating p {
  text-align: left;
}

/* bei neueren Browser funktionieren die Formular-Platzhalter immer */
#contact label {
  display: none;
}

/* ============================================
Hyperlinks (smartphone size)
============================================ */

a {
  border-radius: 12px;
  padding: 2px;
  border: 1px solid #8B4513;
  text-decoration: none;
}

/* bei Hyperlinks mit Bildern kein Rahmen */
a.imageLink {
  padding: 0;
  border-style: none;
}

header a, footer a, aside a {
  border-color: #EFFFC0;
  line-height: 2;
}

/* ============================================
Navigation
============================================ */

/* alles unsichtbar */
aside {
  display: none;
}

}

/************ Bereiche für Responsive Einstellungen bis hier ************/



/* ============================================
Video-Link auf Kollektionen
============================================ */
#overlay {
  position: relative;
  width: 320px;
  heigth: 180px;
  margin-left: auto;
  margin-right: auto;
}
#overlay:after, #overlay:before { /* hide box and text */
  position: absolute;
  opacity:0;
  transition: all 300ms;
  -webkit-transition: all 300ms;
}
#overlay:after { /* brown box */
  margin-top: -2px;
  width:320px; height:180px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  background:rgba(97,48,13,0.8);
  content:'\A';
}
#overlay:before { /* text content */
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  font-family: 'Dosis', sans-serif;
  font-size: 20px;
  color: #EFFFC0;
  text-align: center;
  z-index: 800;
  content:'soley Kollektionen präsentieren...';
}
#overlay:hover:after, #overlay:hover:before {
  opacity:1;
}


/* ============================================
Formular
============================================ */

/* gesamten Formularbereich zentrieren mit Rand */
#contact {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#contact input, #contact textarea {
  /* ganze Breite des Formularbereichs verwenden */
  width: 100%;
  
  /* Schrift und Schriftgrösse der Eingabefelder */
  font-family: 'Dosis', Verdana, Geneva, Arial, sans-serif;
  font-size: 14px;
  
  /* Layout der Formularfelder */
  border: 1px solid #8B4513;
  margin-bottom: 15px;
  margin-top: 5px;
  outline: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

/* Höhe des Mitteilungsfeldes ist proportional zur Breite */
#contact textarea {
  min-height: 25vw;
}

/* Captcha Elemente linksbündig nebeneinander */
#captcha-controls, #captcha-image {
  float: left;
}

#captcha-controls input {
  margin: 0;
  max-width: 60px;
}

/* Controls gleich hoch wie Bild und vertikal zentriert */
#captcha-controls {
  line-height: 32px;
}

/* refresh Symbol positionieren */
#captcha-controls img {
  float: right;
  margin-top: 4px;
  margin-right: 2px;
}

/* Buttons rechtsbündig nebeneinander*/
#form-buttons {
  margin-top: 0.5em;
  text-align: right;
}

/* Layout der Buttons */
#form-buttons input {
  color: black;
  background-color: #FFDEAC;
  max-width: 130px;
  padding: 3px;
  border-radius: 12px;
  cursor: pointer;
}

#form-buttons input[type=submit] {
  text-decoration: underline;
}


/* ============================================
allgemeine Klassen
============================================ */
.clear {
  clear: both;
}

.nowrap {
  white-space: nowrap;
}


</style>
