html, body {
        font-family: Arial, sans-serif;
        background-color: #73675b;
        color: #000000;
        margin:0;
}

/* Textformate */

h1,
h2,
h3, {	
	color: #333;
	font-weight:bold;
	line-height: 1.2rem;
	margin: 0 0 16px;
}

h1 {
	font-size: 1.6em;
}

h2 {    
	font-size: 1.2em;
	font-weight: normal;
	/*letter-spacing: 0.15rem;  */
	color: #ffffff; /*#FAFAD2 #C69E32;*/
	padding-bottom: 2%;
}

h3 {
	font-size: 1.2em;
}

p { font-family: Arial, sans-serif;
	font-size: 1.05em;
	color: #ffffff; /*#FAFAD2*/
    	line-height: 2rem;}
    	
p.impress { font-family: Arial, sans-serif;
            font-size: 0.8em; 
            line-height: 1.0rem;
            letter-spacing: 0;
             
}
    	
p.footer { font-size: 0.9em; line-height: 1rem; }


/* Navi */

#navi {
 text-align:center;
}

#navi a {
font-family: Arial, sans-serif;
  font-size: 1em;
 display:block;
 padding:0.25em;
 color:#ffffff; /*#FAFAD2;*/
}

#navi a:hover {color: #494036;}

a, a:hover {
	font-family: Arial, sans-serif;
        text-decoration: underline;
        color: #ffffff;  /*#FAFAD2 #494036;*/
        letter-spacing: 0.15rem;
        display: block;
}

a:hover {color: #494036;}

a.imp, a.imp:hover {color: #ffffff; letter-spacing:0; text-decoration: none; display: inline;}

a.footer { font-family: Arial, sans-serif;
	color: #ffffff;
	font-weight:normal;
	text-decoration: underline;
	font-size: 0.9em;
  letter-spacing: 0;
  display: inline; }

ul {
        list-style-type:none;
        padding:0;
        margin:0;
}


ul li.insta {width:8%;}
        
ul li {
        width:18%;    /*25%*/
       /* padding:12px 0px;*/
        display: inline-block;
        text-align: center;
        /*border-bottom: 1px solid #817569;
    border-top: 1px solid #817569;  */
    padding: 58px 0;
        /*background: #817569;
        border: 1px solid #FAFAD2; /*#685c50*/
        /*box-sizing:border-box;
        border-radius: 15px 15px 15px 15px;*/
        cursor:pointer;
}



ul li:hover { }

/* Hilfe  */

.clearfix {
	display: block;
	clear: both;
}

/* Container */

#container{
	margin: 0 auto;
	max-width: 1200px;
}

/* Kopfbereich  */

header {
	padding: 1%;
	background-color: #73675b;
}

header #title {
	font-size: 50px;
	color: #fff;
}


/* Inhalt */

#content {
	float: left;
	/*padding-top: 3%; */
	width: 95%; /*64%;*/
}

navi {/*padding:5%;*/}

#box {  background-image: url(grafik/Mode-Labels.jpg);
 background-repeat: no-repeat;
 background-position: center;
/* background-color: yellow;   */
	float: left;
	width: 50%;
	height: 25em;
	margin-top: 3%;
}

#box2 { background-image: url(grafik/Designermode.jpg);
	background-repeat: no-repeat;
	 background-position: center;
/*	background-color: yellow;     */
	float: left;
	width: 50%;
	height: 25em;
		margin-top: 3%;
}
/*#box, #box2 {  background: #73675b;
	float: left;
	width: 50%;
	padding-top: 3%;
	padding-bottom: 3%;
}
*/

#logobox  {  background: #73675b;
	float: left;
	width: 30%;
	padding-top: 1%;
	padding-bottom: 1%;
}

#navibox     {  background: #73675b;
	float: left;
	width: 70%;
	padding-top: 1%;
	padding-bottom: 1%;
}

img {
	width: 100%;
	height: auto;
}

img.Navilogo {width: 86%; height: auto;}

img.anfahrt {width: auto; height: auto;}

img.designer-labels { width: auto; padding: 0 3%;}

img.klein {width: 28%; height: auto;}

/* Sidebar  */

aside {
	float: right;
	padding: 3%;
	width: 24%;
	background-color: #eee;
}



/* Fussbereich  */

footer{	/*background-color: #817569;
	padding: 1%;  */
	border-top: 0.2rem solid #685C50;
	/*border-right: 0.2rem solid #685C50; */
	color: #fff;
	text-align: center;
}


/* Fotoslider */

#show1 {
    position: relative;
   /* background: #001144; */
    height: 40em;
    width: 100%;
    margin: auto; /*1em auto -2em; */
    /*border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777; */
    cursor: pointer;
    overflow: hidden;
}

#show1 img {
    position: absolute;
    margin: 0;
    height: 40em;
    width: 100%;
    opacity: 0;
}


#show1 img:nth-of-type(1) {
    animation: bild 24s ease-in-out infinite;
}
#show1 img:nth-of-type(2) {
    animation: bild 24s 6s ease-in-out infinite;
}
#show1 img:nth-of-type(3) {
    animation: bild 24s 12s ease-in-out infinite;
}
#show1 img:nth-of-type(4) {
    animation: bild 24s 18s ease-in-out infinite;
}


#show1:hover img,
#show1:hover .laden {
    /*animation-play-state: paused;  */
}

@keyframes bild {
      0%,    {right:-100%; opacity:0; z-index:0;}
      8.33%, {right:0;      opacity:1; z-index:1;}
     25%     {right:0;      opacity:1; z-index:1;}
     33.33%  {right: 100%; opacity:0; z-index:0;}
    100%     {right:-100%; opacity:0; z-index:0;}
}



/* Media Queries  */

@media screen and (max-width: 1125px) {
img.Navilogo {width: 100%; height: auto;}

}

@media screen and (max-width: 1040px) {
img.klein {width: 35%; !important;}
}

@media screen and (max-width: 900px) {

#box {background-image: url(grafik/Mode-Labels_450.jpg);
 background-repeat: no-repeat;
 background-position: center; }

 #box2 {background-image: url(grafik/Designermode_450.jpg);
 background-repeat: no-repeat;
 background-position: center;
background-size: 98%;}
 
#logobox {width: 50%; }
#navibox {width: 50%;	}
}

@media screen and (max-width: 820px) {

#content {float: none;}
#logobox {width: 50%; }
#navibox {width: 50%; padding-bottom: 8%;}
#navibox navi ul li  {padding-right: 8px; padding-top: 60px;}
#navibox navi ul li a {font-size: 0.9em; letter-spacing: 0;}

ul#navi li a {font-size: 0.9em; letter-spacing: 0; padding: 0;}
#show1 {height: 29.95em; width: 48.75em;}
#show1 img {height: 29.95em; width: 48.75em;}

img.Navilogo {width: 76%; height: auto;}

}

@media all and (max-width: 775px) {
ul {margin-bottom: 10%;}
}

@media all and (max-width: 768px) {

	header {
		text-align: center;
	}

       /*	navi {
		text-align: center;
	}*/

	#content {
		width: 94%;
		float: none;
	/*	padding: 3%; */
	}

#logobox {width: 50%;}
#navibox {width: 50%;}

#show1 {height: 28.8125em; width: 48em; padding-top: 5%;}
#show1 img {height: 28.8125em; width: 48em;}

/*	#sidebar {
		width: 94%;
		padding: 3%;
		border-top: 3px solid #E64A19;
	}   */
}

@media all and (max-width: 768px) and (orientation: landscape) {
	#box, #box2 {width: 100% !important;	}

}

@media screen and (max-width: 670px) {

#box, #box2 {width: 100%;	}

#box {background-image: url(grafik/Mode-Labels_300.jpg);
 background-repeat: no-repeat;
 background-position: center; }

#box2 {background-image: url(grafik/Designermode_300.jpg);
 background-repeat: no-repeat;
 background-position: center;
 margin-bottom: 2%;}
 
img.Navilogo {width: 95%;}
}


@media screen and (max-width: 620px) {

#show1 {height: 22.125em; width: 36.875em; }
#show1 img {height: 22.125em; width: 36.875em;}

img.Navilogo {width: 100%;}
}

@media screen and (max-width: 560px) {
#box {background-size: 420px auto;}
#content {float: none;}
img.Navilogo {width: 100%;}
img.anfahrt {width: 100%;}
img.klein {width: 65%; padding-top: 8%;}
#logobox {width: 100%;}
#navibox {width: 100%; padding-bottom: 1%;}
#navibox navi ul li  {padding: 20px 0;}
#navibox navi ul li a {font-size: 1em; }
ul#navi  li  {padding: 20px 0;}
ul#navi li a {font-size: 1em; letter-spacing: 0; padding: 0;}
ul {padding-bottom: 8%; }
ul li.insta {float: none; width:100%;}
ul li { float:none; width:100%; }

#show1 {height: 18em; width: 30em; }
#show1 img {height: 18em; width: 30em;}
}

@media screen and (max-width:500px) {
#content {float: none;}
#box {height: 15em;}
#logobox {padding-bottom: 8%;}
#show1 {height: 15em; width: 25em;}
#show1 img {height: 15em; width: 25em;}
}

@media screen and (max-width: 380px) {

#show1 {height: 13.5em; width: 22.5em;}
#show1 img {height: 13.5em; width: 22.5em;}
}

@media screen and (max-width: 325px) {

img.klein {width: 65%; padding-top: 8%;}

ul#navi  li  {padding: 0;}
ul#navi li a {font-size: 0.9em; letter-spacing: 0; line-height: 3.5em; padding: 0;}

#navibox navi ul li  {padding: 0;}
#navibox navi ul li a { font-size: 0.9em; line-height: 3.5em;}

#show1 {height: 12em; width: 20em;}
#show1 img {height: 12em; width: 20em;}
}