/******************* Viewport Attributes *******************/

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/******************* Font Import *******************/

@font-face {
    font-family: 'NettoOT';
    src: url('../fonts/nettoot/nettoot.eot');
    src: url('../fonts/nettoot/nettoot.eot') format('embedded-opentype'),
         url('../fonts/nettoot/nettoot.woff') format('woff'),
         url('../fonts/nettoot/nettoot.ttf') format('truetype'),
         url('../fonts/nettoot/nettoot.svg#NettoOTRegular') format('svg');
}


/******************* General Styles *******************/

* {
	margin: 0;
	padding: 0;
	/* -webkit-font-smoothing: antialiased; */
	-webkit-box-sizing:	border-box;
    -moz-box-sizing:	border-box;
    -ms-box-sizing:		border-box;
    box-sizing:			border-box;
}

*,
*:after,
*:before {
	-webkit-box-sizing:	border-box;
	-moz-box-sizing:	border-box;
	box-sizing:			border-box;
}

html {
	min-height: 100%;
	font: 100%/1.5em 'NettoOT', Helvetica, Arial, sans-serif;
}

body, html {
	height: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
}

body {
	font-size: 1em;
    font-weight: 400;
    line-height: 1.5em;
    color: #fff;
    text-rendering: optimizelegibility;
    background: #DAB189 url('../img/bg.png') repeat-x;
	background-size: 1px 100%;
	background-attachment: fixed;
}

a,
a:active,
a:focus {
	color: #fff;
	text-decoration: none;
	outline: 0;
}

a:hover {
	color: #4af786;
}

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

svg {
	display: block;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

/* Mozilla based browsers */
::-moz-selection {
	background-color: #F75D4D;
	color: #fff;
}

/* Works in Safari */
::selection {
	background-color: #F75D4D;
	color: #fff;
}


/******************* Text Styles *******************/

h1 {
	font-size: 56px;
	font-size: 3.5rem;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 2.5rem;
}

h2 {
	font-size: 40px;
	font-size: 2.55rem;
	font-weight: 100;
	line-height: 1.3;
}


h3 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	padding-bottom: 10px;
}

p {
	font-size: 19px;
	font-size: 1.2rem;
	margin-top: 0.5rem;
	line-height: normal;
}
p.smaller {
	font-size: 14px;
	font-size: 0.875rem;
}
p.bigger {
	font-size: 20px;
	font-size: 1.3rem;
	font-weight: 300;
	margin-top: 0.5rem;
}

.txt_center {
	text-align: center;
}


.section_titel {
	width: 100%;
	padding: 30px 0 0;
	text-align: center;
}
.section_titel h1 {
	font-size: 41px;
	font-size: 2.6rem;
	margin-bottom: 1rem;
}

.page_titel {
	width: 100%;
	padding: 20px 0 0 0;
	text-align: center;
}
.page_titel h1 {
	font-size: 41px;
	font-size: 2.6rem;
	padding: 0;
	margin: 0 0 0 0;
}


/******************* Navigation Styles *******************/

#navigation {
	margin-bottom: 10px;
}

nav {
	position: relative;
	padding-top: 10px;
	text-align: center;
}
nav ul {
	list-style: none;
	text-align: center;
}
nav li {
	display: inline;
	
}
nav li a {
	display: inline-block;
	font-family: 'NettoOT';
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 17px;
	font-size: 1.1rem;
	font-weight: 100;
	line-height: 1;
	margin: 0 5px;
	padding: 0 5px;
	border: 0px;
	
	text-rendering: optimizeLegibility;
	
	-webkit-transition: all 0.5s ;
    -moz-transition:	all 0.5s ;
    -ms-transition:		all 0.5s ;
    -o-transition:		all 0.5s ;
    transition:			all 0.5s ;
}
nav li a:hover {
	color: #fffaf7;
	
	-webkit-transform:	none;
    -moz-transform:		none;
    -ms-transform:		none;
    -o-transform:		none;
     transform:			none;
}

nav .icon {
	display: inline;
}
nav .icon img {
	width: 40px;
	height: 39px;
}
nav .text {
	display: none;
}
@media all and (min-width : 410px) {
	#navigation {
		margin-bottom: 20px;
	}
	nav {
		padding-top: 20px;
	}
	nav li a {
		margin: 0 10px;
	}
}
@media all and (min-width : 630px) {	
	#navigation {
		margin-bottom: 35px;
	}
	
	nav {
		padding-top: 30px;
	}
	
	nav li a {
		margin: 0 2px;
		padding: 10px 25px 11px;
	    border: 2px #fff solid;
	       -moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		        border-radius: 0px;
	}
	nav li a:hover {
		-moz-box-shadow:    inset 200px 0 0 #fff;
		-webkit-box-shadow: inset 200px 0 0 #fff;
		box-shadow:         inset 200px 0 0 #fff;
		color: #d49873;
	}
	nav .divider {
		display: inline;
	}
	nav .icon {
		display: none;
	}
	nav .text {
		display: inline;
	}	

}


/******************* Landing Page Styles *******************/

section#landing_page {
	position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#titel {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 0 10px;
	margin-top: 4%;
}
#titel h1 {
	margin: 0 0 15px 0;
	font-size: 35px;
	font-size: 2.2rem;
	line-height: 2rem;
}
#titel h2 {
	margin-bottom: 3%;
	font-size: 19px;
	font-size: 1.2rem;
	line-height: 1.6rem;
}
@media all and (min-width : 410px) {
	#titel h1 {
		margin: 0 0 15px 0;
		font-size: 41px;
		font-size: 2.6rem;
		line-height: 2.2rem;
	}
}
@media all and (min-width : 630px) {
	#titel h1 {
		margin: 0 0 15px 0;
		font-size: 48px;
		font-size: 3rem;
		line-height: 2.7rem;
	}
	#titel h2 {
		font-size: 25px;
		font-size: 1.6rem;
		line-height: 1.8rem;
	}
}

#logo {
	display: none;
	position: relative;
	width: 100%;
	text-align: center;
}
#logo img {
	width: 250px;
	max-width: 25%;
}
@media all and (min-width : 680px) {
	#logo {
		display: block;
	}
}

#arrow_down {
	position: absolute;
	width: 100%;
	bottom: 10px;
	text-align: center
}
#arrow_down p {
	
}
#arrow_down a {
	position: relative;
	top: 0;
	-webkit-transition: all 0.3s ;
    -moz-transition:	all 0.3s ;
    -ms-transition:		all 0.3s ;
    -o-transition:		all 0.3s ;
    transition:			all 0.3s ;

}
#arrow_down a:hover {
	color: #fff;
	top: 5px;
}


/******************* Aktuelles Styles *******************/

#aktuelles {
	background: #fff;
	color: #4C4F54;
	padding: 40px 0 30px;
}
@media all and (min-width : 630px) {
	#aktuelles {
		padding: 0 0 30px;
	}
}
#aktuelles .section_titel {
	padding: 0;
}
#aktuelles .section_titel h2 {
	display: ;
}
#aktuelles .section_titel img {
	width: 100px;
}
#aktuelles p {
	font-size: 19px;
	font-size: 1.2rem;
}


/******************* Über... Styles *******************/

.top_bg_wrapper {
	background: #E5AB83 url('ghj.png');
}
.halfcircle {
	display: none;
}
.halfcircle path {
	fill: #fff;
	stroke: #fff;
}
@media all and (min-width : 630px) {
	.top_bg_wrapper {
		background: #DAB189 url('../img/bg.png') repeat-x;
		background-size: 1px 270px;
		background-attachment: fixed;
	}
	.halfcircle {
		display: block; 
	}
}

.ueber {
	background: #fff;
	color: #4C4F54;
	padding: 40px 0 30px;
	margin: 0;
}
@media all and (min-width : 630px) {
	.ueber {
		padding: 0 0 30px;
	}
}
.ueber a {
	color: #67c7aa;
}
.ueber .page_titel {
	padding: 0;
}
.ueber h3 {
	font-size: 24px;
	font-size: 1.7rem;
}
.ueber p {
	font-size: 19px;
	font-size: 1.2rem;
}
.ueber .portrait {
	text-align: center;
}
.ueber ul {
	font-size: 19px;
	font-size: 1.2rem;
	list-style-type: none;
	list-style-image: url('../img/bullet.gif');
	list-style-position: outside;
}
.ueber ul li {
	display: list-item;
}


/******************* Contact Styles *******************/
.triangle_down {
	width: 100%;
	background: #4C4F54;
}
#triangle_down {
	margin: 0 auto;
	width: 0; 
	height: 0; 
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-top: 70px solid #fff;
}
#contact {
	position: relative;
	width: 100%;
	background: #4C4F54;
}
#contact .section_titel {
	padding: 30px 0 20px;
}

#contact .one p {
	text-align: center;
	padding: 0 0 40px;
}

#contact .two {
	width: 100%;
	max-width: 600px;
}
#contact #mail,
#contact #telefon {
	font-size: 17px;
	font-size: 1.1rem;
	padding: 0 0 40px;
	text-align: center;
}
#contact #mail a img,
#contact #telefon a img {
	display: block;
	width: 50px;
	margin: 0 auto 5px;
}

.form {
	margin-bottom: 50px;
}

#address {
	display: inline-block;
	margin: 0 auto 30px auto;
}
#address img {
	display: block;
	margin: 0 auto 5px auto;
}
#address address {
	display: block;
	font-size: 17px;
	font-size: 1.1rem;
	margin: 0 auto;
}


/******************* Mao Styles *******************/

#map {
	padding: 0 0 0px;
	background: #4C4F54;
}

#my_map{
	height: 200px;
	width: 100%;
	margin: 0 auto;
	color: #4C4F54;
	border-top: 5px #fff solid;
	border-bottom: 1px #DFDBD4 solid;
}
@media all and (min-width : 480px) {
	#my_map {
		height: 250px;
	}
}
@media all and (min-width : 650px) {
	#my_map {
		height: 300px;
	}
}
@media all and (min-width : 780px) {
	#my_map {
		height: 400px;
	}
}

/******************* Footer Styles *******************/


footer {
	position: relative;
	padding: 40px 0 50px 0;
	text-align: center;
	color: #4C4F54;
	background: #fff;
}
footer a {
	display: inline-block;
	color: #4C4F54;
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease; 
	     -o-transition: all 0.3s ease; 
	    -ms-transition: all 0.3s ease;
}
footer a:hover {
	color: #4C4F54;
	-webkit-transform:	scale(1.25);
    -moz-transform:		scale(1.25);
    -ms-transform:		scale(1.25);
    -o-transform:		scale(1.25);
    transform:			scale(1.25);
}
footer a.impressum {
	font-size: 19px;
	font-size: 1.2rem;
}
footer .copyright {
	font-size: 12px;
	font-size: 0.8rem;
	line-height: 1.3rem;
}