* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root   {  font-size: 8px;}

html    {    
	margin: 0;	
	padding: 0;
	width: 100%;
	height: 100%;
}

body    {    
	margin: 0;	
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #f4f3f0;
	font-family: 'Hind';
}

#container {
    width: 100%;
    margin: 1rem 0 0 0;
    padding: 0 2rem 0 2rem;
	position: relative;
}

@media only screen and (max-width:1023px) {
	header {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		height: 5rem;
		float: left;
		margin: 0;
		background-color: #f4f3f0;
	}
	
	#logo	{
		position: absolute;
		left: 2rem;
		top: 1.3rem;
		z-index: 2222;
		height: 4rem;
    	font-family: 'Hind';
    	font-style: normal;
		font-weight: 300;
		color: #222222;
		font-size: 2.7rem;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: -0.01rem;
	}
}

main {
    width: 100%;
    margin: 6rem 0 0 0;
    padding: 2rem 0 0 0;    
    border-top: solid 2px #999999;
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: stretch;
 	-ms-align-items: stretch;
 	align-items: stretch;
 	-webkit-flex-wrap: wrap;
 	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  	flex-grow: 1;
  	-webkit-flex-justify-content: space-between;
	-webkit-justify-content: space-between;
    -ms-flex-justify-content: space-between;
    -ms-justify-content: space-between;
  	justify-content: space-between;
}

.box3, .box5, .box6, .box10 {
 	-webkit-flex-basis: 100%;
 	-ms-flex-basis: 100%;
 	flex-basis: 100%;
	margin-bottom: 2.5rem;
	position:relative;
}


#top    {
     position:absolute;  
     top: 0;
     padding: 0;
     margin-top: -6rem;
}

article {
    margin: 1rem 0 3rem 0;
    border-bottom: solid 1px #666666;
}

img {
	width:100%;
}

h1	{
	font-style: normal;
	font-weight: 300;
	color: #222222;
	font-size: 3.5rem;
	line-height: 1;
	text-transform: uppercase;
	margin-top: 0;
}

h2	{
    font-style: normal;
	font-weight: 500;
	color: #222222;
	font-size: 2.5rem;
	line-height: 1;
	text-transform: uppercase;
	margin: 1.5rem 0 1rem 0;
}

p {	
	font-style: normal;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.5;
	margin-top: 0.5rem;
	margin-bottom: 2rem;
	color: #666;
	}

p.hinweis	{	
	visibility: hidden;
	font-size: 0.1rem;
	line-height: 1;
	letter-spacing: 1px;
	margin: -0;
	text-align:right;
} 
    
p.bt  {	
	font-size: 2rem;
	letter-spacing: 1px;
	line-height: 1.3;
	margin: 1rem 0 2rem 0;
	color: #666666;
	}

dl	{
	list-style: none outside none;
	padding:  3px 0;
	margin: 1.5rem 0 0 0;
	}
	
dt	{
	font-size: 2rem;	
	line-height: 24px;
	color: #666;
	margin: 1.5rem 0 0 0;
	float: left;
}
	
dd	{
	font-size: 2rem;	
	line-height: 1.5;
	color: #666666;
	margin: 1.5rem 0 0 15rem;
}	
		
main a:link,  main a:visited 	{
	font-weight: normal;
	color: #336699;
	text-decoration: none;
}
	
main a:hover 	{
	color: #ffffff;
	background-color: #000000;
	padding: 0 3px 0 3px;
}	

main a.zoom:link, main a.zoom:visited, main a.zoom:hover, main a.zoom:focus, main a.zoom:active 	{
	text-decoration : none;
    background: none;	
    padding : 0;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	outline: 0;
	border-bottom:0;
}

footer {
	width: 100%;
	height: 40px;
	border-top: solid 1px #aaaaaa;
	float: left;
	margin: 1rem 0 2rem 0;
	padding-bottom: 2rem;
}
 
footer  p {
	color: #666666;
	font-size: 1.75rem;
	letter-spacing: 1px;
	line-height: 100%; 	
	margin: 0.5rem 0 1rem 0;  
	text-align:left;	
}	

footer p span	{
	float:right;
}

footer a:link, footer a:visited	{
	color:#666666;
	text-decoration: none;
	padding: 0 2px 0 2px;
}

footer a:hover	{
	color:#ffffff;
	background-color: #000000;
}

.popup-gallery  {
    margin:5px 0 15px 0;
}	

 .serie 	{
	width:100%;
	margin: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: stretch;
 	align-items: stretch;
 	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	flex-grow: 1;
  	-webkit-flex-justify-content:space-between;
	-webkit-justify-content:space-between;
    -ms-flex-justify-content:space-between;
    -ms-justify-content:space-between;
  	justify-content: space-between;
  	list-style:none;
  	padding:0;
} 
	
 .serie .bild3  {
 	-webkit-flex-basis: 100%;
 	flex-basis: 100%;
	margin: 0 0 1.5rem 0;
	padding: 0;
}	
 
  .serie .bild10   {
 	-webkit-flex-basis: 100%;
 	flex-basis: 100%;
	margin: 0 0 1.5rem 0;
	padding: 0;
}
 
img  {
	width:100%;
}	


@media only screen and (min-width:600px) {

	.serie  .bild3	{
 		-webkit-flex-basis: 49%;
 		flex-basis: 49%;
		margin: 0 0 15px 0;
		padding: 0;
	}	

	p.hinweis	{
		visibility: visible;
		font-size: 1.5rem;
		line-height: 1;
		color:#666;
		letter-spacing: 1px;
		margin: -5px 0 20px 0;
		text-align:right;
	}
}

@media only screen and (min-width:1024px) {

    :root   { font-size: 9px;}

    #container {
        width: 100%;
        max-width: 1536px;
        margin: 10px auto;
        padding: 0 3rem 0 3rem;
        position: relative;
    }	
    
    header {
    	width: 16.66%;
    	height: 100vH;
    	position: fixed;
    	margin: 0;
    	padding: 0;
    	z-index: 40;
    }

    #logo	{
    	position: absolute;
    	margin: 10vh 0 2rem 0;
    	height: 6rem;
		font-style: normal;
	    font-weight: 300;
	   	color: #222222;
		font-size: 3rem;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: -0.01rem;
    }

    main {
    	padding: 3rem 0 0 0;
    	width: 83.33%;
    	margin: 0 0 0 17%;
    	border-top: solid 5px #999999;
    }
    
    #top    {
     	position:absolute;  
     	top:0;
     	padding: 0;
	}
   
   
   
    .box5 {
        -webkit-flex-basis: 47.5%;
        -ms-flex-basis: 47.5%;
        flex-basis: 47.5%;
        margin-bottom: 1rem;
    }
    
    dd	{
    	margin: 0 0 0 15rem;
    }
    
    dl	{
    	margin: 0 0 0 0;
    	padding: 0 0 0 0;	
    }
    
    dt	{
        margin: 0 0 0 0;
    	padding: 0 0 0 0;	
   	
    }
     
	 p.hinweis	{
	   font-size : 1.75rem;
	   line-height : 1;
	   color:#666;
	   font-weight:300;
	   letter-spacing:1px;
	   margin: -0.5rem 0 1rem 0;
	   text-align:right;
    }
    
	.serie .bild3 {
 		-webkit-flex-basis: 32%;
 		flex-basis: 32%;
		margin: 0 0 15px 0;
		padding: 0;
	}	
    
}