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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Slabo+13px);

@-ms-viewport { width: device-width; zoom: 1; }
@-o-viewport { width: device-width; zoom:1; }
@viewport { width: device-width; zoom:1; }

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header, footer, section, aside, nav, article {
	display: block;
}


/*--- body ---*/


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.7;
	color: #403830;
	background-color: #F2E7DB;
}

.bearbeitung {
    width:100%;
    height:100%;
    color:#333;
    font-size: 1.4em;
     text-align: center;
     vertical-align: center;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	line-height: 1.5;
	font-weight: lighter;
	color: #333;
	padding: 0 0 3% 0;
}

h2 {
	font-family: 'Slabo 13px', sans-serif;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.8;
	color: #FF6633;
}

h3 {
	font-family: 'Slabo 13px', sans-serif;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.6;
	color: #FFF;
	padding: 36px 0;
}

h4 {
	font-family: 'Slabo 13px', sans-serif;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.6;
	color: #403830;
	padding-bottom: 10px;
}

h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.6;
	color: #F63;
	padding: 10px 0;
}	

a {
    color: #FFF;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    color: #344c59;
}


/* ----------header für logo-------------- */



.bannertop {
	width: 100%;
	height: auto;
	background: #FFF;
	border-bottom: 1px solid #998773;
	box-shadow: -10px 0 10px rgba(107,83,62,0.8);
	overflow: hidden;
}

.kopf {
	max-width: 1200px;
	min-width: 320px;
	margin: 0 auto;
	min-height: 120px;
	height: auto;
	position: relative;
}

.logo {
	float: left;
	width: 280px;
	height: auto;
	padding: 8px 0 0 0;
}

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

 
/* --- navigation --- */


nav {
	width: auto;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
} 
  
nav ul {
	list-style-type: none;
} 
  
nav ul > li {
	float: left;
}

nav ul > li > a {
	color: #403830;
	display: block;
	padding: 0px 30px 6px 30px;
	text-decoration: none;
	border-bottom: 4px solid #FFF;
}

nav ul a:link {
    text-decoration: none;
}

nav a:hover {
	color: #F63;
	border-bottom: 4px solid #F63;
}

nav a.selected {
	color: #F63;
	border-bottom: 4px solid #F63;
} 

/* MenüLink ausblenden */
	a.toggle-nav {
	display: none;
}

/*Menü wieder einblenden */
	.js-on #navMain {
	display: block;
}


/* --- main angebot --- */


section {}

.container {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.content {
	max-width: 1200px;
	min-width: 320px;
	background: #FFF;
	margin: 0% auto;
	overflow: hidden;
}

.sliderbanner {
	max-width: 1200px;
	min-width: 320px;
	height: 400px;
	position: relative;
	margin: 10px auto;
	overflow: hidden;
}

.sliderbanner figure {
	width: 64%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(064,056,048,0.8);
	border-radius: 0 20px 0 0;
}

.sliderbanner figcaption {
	color: #FFF;
	font-size: 2.2em;
	line-height: 1.3;
	font-family: 'Slabo 13px', sans-serif;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.7);
	padding: 12px 150px 12px 50px;
}

.sliderbanner img {
	width: 100%;
	min-height: 400px;
	float: right;
}

.sliderbanneruebermich {
	max-width: 1200px;
	min-width: 320px;
	height: 400px;
	position: relative;
	margin: 10px auto;
	overflow: hidden;
}

.sliderbanneruebermich img {
	width: 100%;
	min-height: 400px;
	float: right;
}

article {}

.eindrittel {
	width: 35%;
	height: auto;
	overflow: hidden;
}

.eindrittelmini {
	width: 35%;
	height: auto;
	overflow: hidden;
}

.zweidrittel {
	width: 65%;
	height: auto;
	overflow: hidden;
}

.dreidrittel {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.oben {
	border-top: 10px solid #F2E7DB;
}

.rechts {
	border-right: 10px solid #F2E7DB;
}

.unten {
	border-bottom: 10px solid #F2E7DB;
}

.links {
	border-left: 10px solid #F2E7DB;
}

.flinks {
	float: left;
}

.frechts {
	float: right;
}

/*.einzugsmart {
	margin-right: 0;
	margin-left: 0;
}*/

.abstand {
	padding: 50px;
}

.rot {
	background: #FF6633;
}

.mitte {
	text-align: center;
}

.position {
	position: relative;
}	

.position figure {
	margin-top: 50px;
}

.schriftweiss {
	color: #FFF;
}

.hg {
	background: #F2E7DB;
}

.einzug {
	padding-right: 90px;
}

.rechte {
	font-size: .8em;
}

.linie {
	border-top: 2px solid #F63;
	padding-top: 30px;
}
	
.referenzenlogo {
	padding: 50px;
}

.referenzenlogo img {
	width: 25%;
	height: auto;
	border-radius: 7px;
	float: left;
	margin: 0 5% 5% 0;
	padding: 1%;
	background-color: #FFF;
	border: 1px solid #998773;
	box-shadow: 2px 2px 5px rgba(153,135,115,0.5);
}

figcaption.aktuellbeschreibung {
	font-size: 1em;
	color: #FFF;
}

.bild {
	width: 100%;
	height: auto;
	border: 1px solid #998773;
	box-shadow: 2px 2px 5px rgba(153,135,115,0.5);
	margin: 20px 0;
}

.responsive {
	width: 100%;
	height: 330px;
	/*overflow: hidden;*/
	background-image: url(../bilder/webdesign.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/*.responsive img {
	width: 100%;
	height: 100%;
}*/

.anfrage {
	padding: 50px;
}

.anfrage p {
	color: #FFF;
}

.anfrage img {
	width: 48%;
	height: auto;
	margin: 15% 15% 0 37%;
	border: 2px solid #FFF;
	box-shadow: 2px 2px 5px rgba(64,56,48,0.4);
	transform: rotate(15deg);
	border-radius: 10px;
}

.anfrage a {
	color: #FFF;
}

.anfrage a:hover {
	color: #403830;
}

.auffuellen {
	margin-bottom: -9999px;
	padding-bottom: 9999px;
}

.rund {
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid #403830;
	box-shadow: 2px 2px 5px rgba(64,56,48,0.4);
	padding: 25px;
}

.webkriterien li {
	text-decoration: none;
	list-style: none;
}

.webmaxi {
	display: block;
}

.webmini {
	display: none;
}


/*-- Über mich --*/


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

.portrait p {
	color: #FFF;
}

.portrait img {
	width: 50%;
	height: auto;
	margin: 15px 25% 20px 35%;
	transform: rotate(15deg);
	border: 2px solid #FFF;
	box-shadow: 2px 2px 5px rgba(64,56,48,0.4);
	border-radius: 10px;
}

.name {
	display: block;
	color: #403830;
	line-height: 1.4;
	padding: 0;
	border-bottom: 2px solid #FFF;
}


/* --- Tabelle Kunden --- */


.kundenstamm-maxi {
	display: block;
	width: 100%;
	height: auto;
}

.kundenstamm-maxi p {
	padding-bottom: 10px;
	border-bottom: 1px solid #403830;
}

.kundenstamm-maxi ul {
	width: 40%;
	height: auto;
	float: left;
	padding-top: 15px;
	margin: 0 50px 0 0;
	text-decoration: none;
	list-style: none;
}

.kundenstamm-mini {
	display: none;
	width: 100%;
	height: auto;
}

.kundenstamm-mini p {
	padding-bottom: 10px;
	border-bottom: 1px solid #403830;
}

.kundenstamm-mini ul {
	width: 100%;
	height: auto;
	float: none;
	padding-top: 15px;
	text-decoration: none;
	list-style: none;
}


/*-- Bildgalerie Atelier --*/


.fotogalerie {
	width: 100%;
	height: auto;
	padding: 40px 50px 50px 50px;
	overflow: hidden;
	clear: both;
}	

.fotogalerie img {
	display: block;
	border: 2px solid #FFF;
	width: 100%;
	height: auto;
	box-shadow: 2px 2px 5px rgba(64,56,48,0.4);
	border-radius: 10px;
}

.fotogalerie img:hover {
	opacity: .5;
}

.fotogalerie p {
	font-size: .8em;
	color: #FFF;
	float: left;
	margin: 11px 0 0 50px;
}

.fotogalerie h4 {
	color: #FFF;
}

.fotogalerie ul {
	list-style: none;
	clear: both;
}

.fotogalerie li {
	float: left;
	margin: 1.5% 1.5% 0 0;
	width: 11%;
	height: auto;
	background: #FFF;
	border-radius: 10px;
}


/* --- Grafikgalerie --- */


.referenzgrafik {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 40px 50px 50px 50px;
	clear: both;
}

.referenzgrafik ul {
	width: 100%;
	height: auto;
	list-style: none;
}

.referenzgrafik li {
	width: 22%;
	height: auto;
	margin: 2% 3% 0 0;
	float: left;
}

.referenzgrafik li a {
	width: 40%;
	height: auto;
	text-decoration: none;
}

.referenzgrafik img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid #998773;
	box-shadow: 2px 2px 5px rgba(153,135,115,0.5);
}

.referenzgrafik img:hover {
	opacity: .5;
}


/* -----------footer--------------------------- */


footer {
	width: 100%;
	height: auto;
	color: #FFF;
	font-size: .8em;
	line-height: 1.5;
	background-color: #403830;
	padding: 1.2%;
	overflow: hidden;
	margin: 10px 0 0 0;
}

.abstandmini {
	margin-top: 0;
}

.banner_fuss {
	max-width: 1200px;
	min-width: 320px;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}	
	
.map {
	width: 30%;
	height: 200px;
	float: left;
}

.map iframe {
	width: 100%;
	height: 200px;
}

.impressum {
	width: 25%;
	height: 200px;
	float: left;
	margin: 0 0 0 15%;
}

.impressum a {
	color: #FFF;
	text-decoration: none;
}

.impressum a:hover, a:focus {
	color: #F63;
}

.recht {
	width: 25%;
	height: auto;
	float: left;
	margin: 0 0 18px 0;
}

.recht a {
	color: #FFF;
	text-decoration: none;
}

.recht a:hover, a:focus {
	color: #F63;
}

.aktualisiert {
	width: 25%;
	height: auto;
	float: left;
}

}