@charset "UTF-8";
/* CSS Document */

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

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

.img-start
{
/*    width: 300px;*/
    height: auto;
}

.button-anfrage
{
    width: 200px;
    height: auto;
}

/***********************/
/*     Navigation      */
/***********************/

.site-nav, 
.site-header,
.site-inhalt,
.site-about,
.site-sendmail,
.site-slideshow,
.site-prj,
.site-footer,
.site-galerie,
.site-workshops {
	width:100%;
	float:left;
}

.site-nav {
	background:#A0A0A0;
}

.site-nav ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.site-nav a {
	padding: 1em;
	display: block;
	background: #666;
	margin-bottom: 1px;
	color: white;
	text-decoration: none;
}

.site-nav a:active, 
.site-nav a:hover {
	outline: 0;
	background: #444;
}

/***********************/
/* Mediaquery >= 535px */
/***********************/

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

/* nav slider */

a.nav-show,
a.nav-hide {float: right;}

a.nav-hide {display:none;}

.nav-slider {display:none;}

#nav-open:target .nav-slider,
#nav-open:target a.nav-hide {display:block;}

#nav-open:target a.nav-show {display:none;}

}

/***********************/
/* Mediaquery >= 535px */
/***********************/

@media screen and (min-width:535px) {
	
	a.nav-show,
	a.nav-hide {display:none;}
	
	.site-nav li {
		float:left;			
	}	
}

/***********************/
/*       Site          */
/***********************/

.site-header {
	background:#eee;
	padding-top:2em;
	padding-bottom:2em;
	text-align:center;
}

.site-footer {
	background:#333;
	color:white;
	padding-top:2em;
	padding-bottom:2em;
}

.site-slideshow {
/* 	background:#880;*/
/*    margin-top: 1em;*/
 	padding-top:1em;
/*	padding-bottom:2em;*/
	text-align:center;
}

.site-inhalt {
/*	background:#088;*/
/*	padding-top:1em;*/
	padding-bottom:1em;
	text-align:center;
}

.site-galerie {
	background:white;
	padding-top:2em;
	padding-bottom:2em;
}

.site-workshops{
	background:white;
	padding-top:2em;
	padding-bottom:2em;
}

.site-about{
 	padding-top:1em;
	text-align:center;   
}

.site-sendmail{
	text-align:center;       
}

.site-prj{
	padding-top:1em;
	text-align:center;       
}

/***********************/
/*      Raster         */
/***********************/

.container {
	max-width:960px;
	margin:0 auto;
}

.row {
	width:100%;
	float:left;
	padding-top:1em;
	padding-bottom:1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.columns {
	float:left;
	padding-left:1em;
	padding-right:1em;	
	text-align: center;
}

.columns-left {
	float:left;
	padding-left:1em;
	padding-right:1em;	
	text-align: left;
}

.columns-right {
	float:right;
	padding-left:1em;
	padding-right:1em;
	text-align: right;
}

.columns-center {
	text-align: center;
	padding-left:1em;
	padding-right:1em;
}

/***********************/
/*      Sonstiges      */
/***********************/

.slideshow{
	max-height: 630px;
	background-color: #999;
    padding-left: 1em;
    padding-right: 1em;
 	padding-top:1em;
    padding-bottom: 1em;
}

.colorgrey{
	background-color: #999;
	padding-top:2em;	
	padding-bottom: 1em;
}

.box-grey{
 	background-color: #999;
	padding-top:1em;	
	padding-bottom: 1em; 
    padding-left: 1em;
    padding-right: 1em;
    margin-top:1em;
}

.box-grey-slider{
 	background-color: #999;
	padding-top:1em;	
	padding-bottom: 1em; 
    padding-left: 1em;
    padding-right: 1em;
    margin-top:1em;
    margin-left: 1em;
}

.imp-mariga-menu{
   color:firebrick; 
    font-weight: bold;
	font-size: 120%;
}
/***********************/
/*      Impressum      */
/***********************/

.imp-mar{
    text-align: left;
	font-size: 150%;
	font-weight: bold;
	line-height: 150%;
    color:firebrick;
}

.imp-mariga{
    text-align: left;
	font-size: 150%;
	line-height: 150%;

}

.imp-info{
    text-align: left;
	font-size: 100%;
	font-weight: bold;
	line-height: 150%;

}


.impressum-v{
    text-align:center;
    padding-top: 1em;
}

/***********************/
/* Mediaquery <= 600px */
/***********************/

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

/* 2 spaltiges Raster in der kleinen Layout-Version */
.small-1 {width:50%;}
.small-2 {width:100%;}

}

/***********************/
/* Mediaquery >= 600px */
/***********************/

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

/* 12-spaltiges Raster in der großen Layout-Version */
.large-1 {width:8.333333%;}
.large-2 {width:16.666666%;}
.large-3 {width:25%;}
.large-4 {width:33.333333%;}
.large-5 {width:41.666666%;}
.large-6 {width:50%;}
.large-7 {width:58.333333%;}
.large-8 {width:66.666666%;}
.large-9 {width:75%;}
.large-10 {width:83.333333%;}
.large-11 {width:91.666666%;}
.large-12 {width:100%;}

}