/* Allgemeine Attribute für Seite (Hintergrundfarbe, Schrift, maximale Breite der Seite usw.) */

body {
  font-family:  "Lucida Sans", Tahoma, sans-serif;
  background: white;
  width: 99%;
  max-width: 1600px;
  margin: 10px auto;
  }

/* Attribute für Bannerbereich (Hintergrund, Text usw.) */
  
header{
	background-color: #EEF3FB;
  min-height: 100px;
	text-align: center;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 1.4); 
	moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
}

/* Attribute für Bild ganz oben maximale Bildbreite und Höhe kann hier eingestellt werden*/

header img.banner{
  	width: 100%;
  	max-width: 1000px;
  	max-height: 100px;
    vertical-align: middle;
  }

a.header{
  display:block;
}

/* START > Hauptnavigation (oben) Style */ 

/* Allgemeine Attribute für Hauptnavi (Hintergrundfarbe usw.) */ 
nav.haupt {
  margin: 0px;
  padding: 0px;
  background-color: #434F68;
  overflow-y: hidden;
  width: 100%;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 1.4); 
	moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
  }
  
nav.haupt ul{
  text-align: justify;
	margin: 0;
	padding: 0;
}

/* Attribute für Button in Hauptnavi bei Maus NICHT drüber (Hintergrundfarbe) */ 
nav.haupt li{
	float: left;
  width: 33.33%;  /* Breite der Linkbuttons in der Navi 100/Anzahl Links */
  text-align: center;
	list-style: none;
  background-color: #434F68;
  transition: background-color .2s;
}

/* Attribute für Button in Hauptnavi bei Maus drüber  (Hintergrundfarbe) */

nav.haupt li:hover{
	list-style: none;
  background-color: #6A768F;
  transition: background-color .2s;
}

/* Attribute für Schrift in Hauptnavi bei Maus NICHT drüber */

nav.haupt a.main{
  color: white;
	font-weight: bold;
	text-decoration: none;
	line-height: 300%;
  display: block;
	display:block; width: 100%; height: 100%;
}

/* Attribute für Schrift in Hauptnavi bei Maus drüber */

nav.haupt a.main:hover{
  color: white;
	text-decoration: none;
}

/* ENDE > Hauptnavigation (oben) Style */


#main {
  min-height: 800px;
  margin: 0px;
  padding: 0px;
  clear: left;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
          flex-flow: row;         
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 1.4); 
	moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
  }
 
#main > article {
  margin: 0px;
  background: white;
  border-color: #df6c20;
  padding: 5px;
  -webkit-flex: 3 1 60%;
          flex: 3 1 60%;
  -webkit-order: 2;
          order: 2;
  }

/* Attribute für das Hauptbild (hier kann Schrift für unter dem Bild angepasst werden, Hintergrundfarbe, Rahmen usw. erstellt werden) */

#main > article > .hauptbild{
  text-align: center;
  width: 99%;
}

.hauptbild > .bild{
  text-align: center;
  width: 90%;
}

/* Startseite START */

/* Allgemeine Attribute für Seitenabschnitt (Hintergrundfarbe usw.) */ 

section.starts{
  width: 99%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 5px;
  font-size:1.0em;
  color: black;
  font-weight: normal;
  text-align: center;
  background-color: white;
  border-top: solid 2px #DAE6FF;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; /* Standard */
  flex-direction: row;
  -webkit-flex-wrap: wrap;
	flex-wrap: wrap;
  justify-content: space-around; 
  align-content: space-around;
  align-items: stretch;
}

/* Attribute für Seitenabschnitt Überschriftcontainer (Textposition) */ 
section.starts > .t1{
  padding: 2px;
  text-align: left;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
}

/* Attribute für Seitenabschnitt Überschrift (Textposition) */ 

h3{
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  letter-spacing: 2px;
  font-weight: normal;
  font-style: italic;
	color: #2E415F;
  line-height: 120%;
}

.starts > .wgbox{
	position: relative;
	transition: font-size .3s;
	margin: 6px;
	padding-bottom: 5px;
	text-align: center;
  width: 100%;
  min-width: 180px; /* Minimale Wert Bildboxbreite größer gleich max-width von .wgboxen > img */
	color: Black;
	background-color: white;
	transition: box-shadow .2s;
	border: thin solid #E4E4E4;
  -webkit-flex-basis: 30%;
  flex-basis: 30%; 
}

.starts > .wgbox:hover{
	transition: font-size .3s;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 1.4); 
	-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
	transition: box-shadow .2s;
}

.wgboxen > img{
  max-width: 174px;   /* Maximale Wert Bildbreite kleiner gleich min-width von .starts > .wgbox */
  max-height: 174px;
  margin: 3px; 
}

/* Attribute für Text unterhalb des Bildes bei Maus NICHT drüber*/
 
a.wgboxen{
	color:black;
	transition: font-size .3s;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* Attribute für Text unterhalb des Bildes bei Maus drüber*/

a.wgboxen:hover{
	color: #7C1300;
	transition: font-size .3s;
	text-decoration: none;
}

/* Startseite ENDE */

/* Attribute für Absatz Text unterhalb des Bildes bei Maus drüber*/

article p.absatz{
	font-size: 14px;
	color: #2E415F;
	width:98%;
}

   
/* START FOOTER */   
footer{
  font-size: 0.8em;
  color: white;
	border-top: solid 5px #434F68; 
  background-color: #434F68;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 1.4); 
	moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
}

footer a{
  color: white;
	font-weight: normal;
	text-decoration: none;
  font-style: italic;
	display:block; width: 100%; height: 100%;
}
footer a:hover{
  color: #DAE6FF;
	text-decoration: underline;
  font-style: italic;
}
footer div{
  float: left;
  padding: 10px;
  width: 230px;
}
footer ul{
	margin: 0;
	padding: 0;
  width: 100%;
  list-style-position: inside;
}
footer li.top{
  font-size: 1.1em;
  font-weight: bold;
  line-height: 250%;
  list-style: none;
	padding-left: 3px;
  background-color: #434F68;
  transition: background-color .2s;
}

footer il.links{
	list-style-type: disc;
  margin: 1px;
  transition: background-color .2s;
  line-height: 150%;
}

footer p{  
  clear: left;
  text-align: center;
  line-height: 250%;
  border-top: solid 1px white;
} 

/* ENDE FOOTER */


/* Slideshow START */

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
/*	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;*/
	pointer-events: none;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 1.4); 
  moz-box-shadow: 0px 1px 5px rgba(23, 69, 88, .5);
}
 
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 90%;
  height: 90%;
	position: relative;
	margin: 2% auto;
	padding: 5px;
  text-align: center;
	background: #fff;
}

.modalDialog > div img{ /*CSS for enlarged image*/
max-width: 100%;
max-height: 100%;
}


.close, .nex, .prev {
	background: #2E415F;
	color: #FFFFFF;
	line-height: 30px;
	text-align: center;
	width: 30px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close {
  position: absolute;
	right: -12px;
	top: -10px;
  }
.nex {
  position: absolute;
	right: 4%;
	top: 45%;
  }
.prev {
  position: absolute;
	left: 4%;
	top: 45%;
  }  

/* Slidebox ENDE */


/* Spezifische Einstellungen für Bildschirme mit Auflösung Breite > 1200 px */
   @media all and (min-width:1201px){
   
    section.starts{justify-content:center}
    h1 {font-size: 25px}
    h2 {font-size: 21px}
    body {font-size: 17px; margin: 1 auto}
    nav.haupt a.main{line-height: 280%;font-size: 0.85em;}
    
  }


/* Spezifische Einstellungen für Bildschirme mit Auflösung Breite <= 1200 px aber > 800 px*/
 
 @media all and (min-width:801px) and (max-width:1200px){  
       
    section.starts{justify-content:center;}
    h1 {font-size: 23px}
    h2 {font-size: 19px}
    body {font-size: 15px;margin: 1 auto}
    header{min-height: 100px;} 
    nav.haupt a.main{line-height: 280%;font-size: 0.85em;}     
  }
  
/* Spezifische Einstellungen für Tablets mit Auflösung bis 800 px*/
  
  /* 720px Too narrow to support three columns */
  @media all and (max-width: 800px) {
  
   #main, #page {
    -webkit-flex-flow: row-reverse;
    flex-direction: row-reverse;
    flex-wrap:wrap;
   }

   #main > article, #main > aside {
    -webkit-order: 0;
            order: 0;
   }
   
    nav.haupt a.main{font-size:0.8em;}  
    div.warengruppe{width: 95%;}
    div.top{width: 95%;}                      
    section.starts{justify-content:center;}    
    h1 {font-size: 22px}
    h2 {font-size: 17px}
    body {font-size: 14px;margin: 0 auto}
    header{min-height: 100px;}
  }
 
/* Spezifische Einstellungen für Smartphones mit Auflösung bis 480 px (in der Regel Hochkant bei Handys)*/

  @media all and (max-width: 480px) {
  
  
   #main, #page {
    -webkit-flex-flow: column;
    flex-direction: column;
   }

   #main > article, #main > aside {
    -webkit-order: 0;
            order: 0;
   }
  
  nav.haupt li{
    clear: left;
    width: 100%;
    border-bottom: solid  1px #EEF3FB;
  }
  nav.haupt a.main{
    line-height: 250%;
    font-size: 0.8em;
  }
        
  section.starts{justify-content:center;}
  h1 {font-size: 20px}
  h2 {font-size: 16px}
  body {font-size: 14px;margin: 0 auto;}
  #main > nav, #main > aside, header, footer {min-height: 50px}
  }