@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

/*----------------------------------------------------------------------------
RESET CSS
------------------------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, var,
b, i,
dl, dtlogo, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:bottom;
background:transparent;
list-style:none;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

input, select { vertical-align:middle; }

/*----------------------------------------------------------------------------
END RESET CSS
------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------
Allgemein
------------------------------------------------------------------------------*/

html { overflow-y: scroll; height:100%;}


a:hover, a:active { outline: none; }
a, a:active, a:visited { color:#112176; }

a {
    transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
}

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

/* IE7 image resizing
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


/* Labels ausrichten */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Input-Felder zum anklicken */
label, input[type=button], input[type=submit], button { cursor: pointer; }


p {
	padding-bottom:20px;
}

.clear 	{
	clear:both;
	line-height:0;
	font-size:0;
	height:0;
}

.center {text-align:center;}
.right {text-align:right;}


h1, h2, h3, h4, h5, h6 {font-family:'Calibri W01 Light'; text-decoration:none;}

h1 {color:#fb9a2d; font-size:48px; line-height:58px; padding-bottom:50px;}
h2 {color:#4d4c4b; font-size:20px; line-height:30px; font-weight:bold; padding-bottom:20px;}



.w75 {width:75%; float:left;}
.w70 {width:70%; float:left;}
.w66 {width:66%; float:left;}
.w65 {width:65%; float:left;}
.w60 {width:60%; float:left;}
.w50 {width:50%; float:left;}
.w40 {width:40%; float:left;}
.w35 {width:35%; float:left;}
.w33 {width:33.3%; float:left;}
.w30 {width:30%; float:left;}
.w25 {width:25%; float:left;}

/*----------------------------------------------------------------------------
Content
------------------------------------------------------------------------------*/
body {
	font-family:'Calibri W01 Light';
	font-size:20px;
	line-height:30px;
	color:#4d4c4b;
	height:100%;
	background-color:#dddddd;
}


.rahmen {
	width:1346px;
	height:auto;
	text-align:left;
	margin:70px auto;
}






/*----------------------------------------------------------------------------
Header
------------------------------------------------------------------------------*/
header {background-color:#ffffff;}
#logo {position:absolute; top:74px; left:46%; z-index:995;}

.covertext {position:absolute; top:150px; text-align:center; width:100%; font-family: 'Open Sans', sans-serif; font-size:72px; color:#FFFFFF; line-height:72px; text-shadow: 1px 1px 1px rgba(148, 148, 148, 1);}
/*----------------------------------------------------------------------------
Content
------------------------------------------------------------------------------*/
section {background-color:#FFFFFF;}
.startseite {padding:60px 20%;}
.grau {background-color:#F1F1F1;}

.zusatztext { background-color:#292929; color:#e8e8e8; background-image:url(images/Atriumhaus-Seitenansicht.jpg); padding:60px 0;}

.kasten {width:23%; margin:0 5%; float:left;}
a.mehr {border:solid 1px #fb9a2d; line-height:30px; padding:3px 20px; color:#fb9a2d; text-decoration:none;}


.startbilder {padding:30px 30px;}
.startbilder img {width:100%; height:auto;}
.bild1 {width:40%; margin-right:1%; float:left; height:340px; overflow:hidden;}
.bild2 {width:38%; margin-right:1%; float:left; height:340px; overflow:hidden;}
	.bild50 {height:170px; overflow:hidden; margin-bottom:2%;}
.bild3 {width:20%; float:left; height:340px; overflow:hidden;}
	.bild33 {height:110px; overflow:hidden; margin-bottom:2%;}


.abstand {height:50px;}

/*----------------------------------------------------------------------------
Footer
------------------------------------------------------------------------------*/
footer { background-color:#292929; color:#e8e8e8; padding:60px; font-size:15px;}
#footerNavi li {float:right;}
#footerNavi a {color:#FFFFFF; padding:0 15px; text-decoration:none;}

#adresse {width:35%; margin-right:5%; float:left;}
#maps {width:60%; float:left; margin-bottom:20px;}
#copy {text-align:center; margin-top:20px; padding-top:20px; border-top:solid 1px #A2A2A2;}

iframe {width:100% !important;}

/*----------------------------------------------------------------------------
Form
------------------------------------------------------------------------------*/

form {margin-top:10px;} 

input, textarea {width:90%; background-color:#fff; border:dashed 1px #cfd0ce; padding:2%;
	font-family: 'Open Sans', sans-serif;
	font-size:15px; margin:8px 0;
	line-height:22px;
	color:#3a3a3a;
	opacity: 0.8;
}

textarea {width:94%; height:80px;}

input[type="submit"] {width:200px; background-color:#ff7f00; color:#FFFFFF; padding:1%; text-align:center;}

.ajax-loader {display:none;}

.mobil {display:none;}

.listeimg {width:30%; float:left;}
.listedetails {width:70%; float:left;}

.article{padding: 25px 0px; border-bottom: 1px solid #a8a8a8}
h2.article-title{padding-bottom: 0;}
h2.article-title a{color: #FB9A2D; font-size: 32px; text-decoration: none;}
a.article-more{background: #FB9A2D; display: inline-block; color: #fff; padding: 2px 10px; text-decoration: none;}



.gallery-caption {position:absolute; top:0px; left:0; font-size:15px; color:#FFFFFF; background-color:#303030; padding:0 10px 4px 10px; opacity: 0.8;}







/*----------------------------------------------------------------------------
accordion
------------------------------------------------------------------------------*/

.accordion-toggle {cursor: pointer; font-size:28px; line-height: 38px; position:relative;
padding: 10px 20px 10px 0px; color:#000; border-bottom:solid 5px #e6ebf6; }

.accordion-content .accordion-toggle:last-of-type {border-bottom:none !important;}


.accordion-content {display: none; padding:10px; border-bottom:solid 1px #e6ebf6;}
.accordion-content.default {display: block;}


.accordion-toggle:hover {color: #fb9a2d;}
.accordion-toggle.aktiv {color: #fb9a2d;}


.accordion-toggle:before {
    -webkit-transition: all 300ms 0s ease-in-out;
    transition: all 300ms 0s ease-in-out;
  content: "\FF1E";
  position:absolute;
  right: 10px;
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
display: inline-block;
color: #fb9a2d;

}


.accordion-toggle.aktiv:before {
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
}

#accordion {margin: 5px 0 65px 0;}
#accordion h2 {text-transform:none; font-size:24px;}



/*------------------------------------*\
    Responsiv
\*------------------------------------*/


@media screen and (max-width: 1366px) {
	.rahmen {width:1100px;}
	.covertext {top:120px;}
	
		.bild1 {width:49.5%; margin-right:1%; margin-bottom:1%;}
		.bild2 {width:49.5%; margin-right:0%;  margin-bottom:1%;}

		.bild3 {width:100%; float:none; height:auto}
			.bild33 {width:31.3%; margin:0 1%; float:left;}
}

@media screen and (max-width: 1130px) {
		.rahmen {width:990px;}
		#nav a {padding:0 15px !important; font-size: 22px !important;}
		#adresse {width:40%; margin-right:5%; float:left;}
		#maps {width:55%; float:left; margin-bottom:20px;}
		#logo {left:44%;}
		
		.bild1 {height:306px;}
		.bild2 {height:306px;}
		.bild50 {height:150px; overflow:hidden; margin-bottom:2%;}
		
}


@media screen and (max-width: 990px) {
	.rahmen {width:680px;}
	.covertext {top:150px; font-size:34px; line-height:38px;}
	#logo {left:43%;}
	h1 {padding-bottom:30px;}
	.kasten {width:100%; margin:0 0 20px 0; float:none;}
	.zusatztext { background-color:#292929; color:#e8e8e8; background-image:url(images/mobilehg.jpg); padding:60px 0;}
	#adresse {width:100%; margin-right:0%; float:none; margin-bottom:20px; text-align:center;}
	#maps {width:100%; float:none; margin-bottom:20px;}
	#nav li:nth-child(4n), #nav li:nth-child(5n), #nav li:nth-child(6n) {float:left !important;}
	
	
.bild1 {width:100%; margin-right:0%; float:none;}
.bild2 {width:100%; margin-right:0%; float:none; height:auto; }
	.bild50 {width:48%; margin:0 1%; height:auto; float:left;}
	

	#logo img {width:80px !important; height:auto;}

	
	
}
@media screen and (max-width: 720px) {
	.rahmen {width:460px; }
	.covertext { display:none;}
	.bild1 { height:auto;}
	
}
@media screen and (max-width: 500px) {
	.rahmen {width:290px; }
	#menu-icon {width: 88% !important;padding: 8px 0 0 12% !important;}

	h1 {color:#fb9a2d; font-size:38px; line-height:48px; padding-bottom:20px;}
	.startseite {padding:40px 5%;}
	footer {padding:40px 5%; font-size:14px; line-height:20px;}
	#footerNavi a {padding:0 10px;}
	
	.bild2 { margin-bottom:0%;}
	.bild50 {width:100%; margin:0 0 1% 0;float:none; height:auto;}
	.bild33 {width:100%; margin:0 0 1% 0;float:none; height:auto;}
	
}