@charset "ISO-8859-1";

/* alternatives Boxmodell */

html { 
  	box-sizing: border-box; 
} 

*, ::before, ::after { 
  	box-sizing: inherit; 
}

body {
    	max-width: 52em;
    	margin: 0 auto; 
	font-family: arial, helvetica, clean, sans-serif;
   	font-size: 1.2em ; 
	
	background-color: ;
	background-image: url("../mastena/pics/backgr.JPG"); 
	background-position: center;
	background-repeat: repeat-y;  
	background-position: 50% 0%;
	background-attachment: fixed; 
	color: black;
}
/* ===== header ===== */

header.banner {
	background: #f4d2a8;
	padding: 0.2em 0.2em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 0 0 0.5em 0.5em;
	text-align: center;
}


#logo {
	margin: 0 0 0 0;	
	color: #585858;
	font-size:1em;
	font-style: ;
	font-weight:normal;
	text-decoration: none;
}



img.start {
  	width: calc(100% - 2em);
  	margin: 0.3em 0.3em;
}


/* ===== content / Inhalt ===== */
	
main {
	padding: 2em 1em;
}


div.box  {
	text-align: justify;
	margin: 0;
	padding: 0px;
}


/* Page */



h1, h2, h3, h4, p, td { 
	font-family: arial, helvetica, clean, sans-serif;
	
}


h1 {
	font-size: 2.5em;
}

h3 {
	font-style: italic;
	color: green;
}

a:link {
	color: #000000;
}

a:visited {
	color: #000000;
}

a:hover {
	color: #FF0000;
	font-weight: bold;
}

.whitebox {
   background-color: #FFFFFF;
   color: black;
   padding: 6px;
   margin: 0;
}

.klein {	
	font-style: italic;
	font-size: 75%;
}

.buspic {
	width: 100%;
	height: auto;
}


.picstop {	
	width: 250px;
	text-align: center;
	font-size: 75%;
	color: #8B4513;		
}

.picsli {
	float:left;
	width: 252px;
	margin-right: 30px;
	margin-bottom: 15px;
}


.pics15re {
	float:right;
	width: 150px;
	margin-left: 30px;
	margin-bottom: 1,5em;
}

.pics15li {
	float:left;
	width: 150px;
	margin-right: 30px;
	margin-bottom: 1,5em;
}


.floatstop {
	clear: both;
}

/* --- Katalog Bilderwechsel --- */

#katalog {
	box-sizing: border-box;
	background-color: silver;
		height: auto;
		padding: 5px 5px 5px 5px;
}

#katalog figure {
	background: #FFF;
	vertical-align: middle;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	height: 5em;
	margin: 0 0 1em 1em;
	overflow: hidden;
	padding: 0;
	width: 5em;
	transition: all 0.25s ease-in;
}

#katalog figure img {
	width: 100%;
	height: auto;
}

#katalog figure:hover,
#katalog figure:focus {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
	margin: -1em 0px 0 20px;
	padding: 5px 5px 15px 5px; /* Rand um Bild */
	width: 15em;
	height: auto;
	z-index: 2;
	transform: scale(1.5);
}

#katalog figcaption {
	color: #333;
	font-family: "Raleway";
	font-style: italic;
	position: relative;
	text-align: center;
	width: 14em;
	
}

#katalog figure:nth-child(3n-2):hover,
#katalog figure:nth-child(3n-2):focus {
	transform: scale(1.5) rotate(-2deg);
}

#katalog figure:nth-child(5n):hover,
#katalog figure:nth-child(5n):focus {
	transform: scale(1.5) rotate(2deg);
}

#katalog:after {
	clear: both;
	content: " ";
	display: block;
}

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


/* ===== responsives Layout ===== */

/* Mobile first! 1-Spaltenlayout  */	

@media only screen and (max-width: 40em) {
	#katalog {
		width: 100%;
		margin: 1.5em auto;
		
	}
	h1, header h1 {
	font-size: 1.5em;
	}

}

@media only screen and (min-width: 40em) {

	main {
		position: relative;
		padding: 2em 2em;

  	}
	
	#katalog {
		width: 620px;
		height: auto;
		margin: 20px auto;
		padding: 0.1em 2em;
	}

	#katalog figure {	
		height: 8em;	
		width: 8em;
		margin: 1em 3em 1em auto;
	}

}