/* CSS3-Document */
/* Copyright by © 2014 ThemeArts */
/* #ece3d1 */


/*======================================================= 
				 S I M P L E   R E S E T 
=======================================================*/
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, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
/* end Reset */
					

					
/*======================================================= 
				  M A I N   S T Y L E S  
=======================================================*/

body	 {
	font-family:"Open Sans";
	color:#ece3d1; 
}

.content {
	width: 100%;
}

@font-face{
  font-family:'FontAwesome';
  src:url('../fonts/fonts/fontawesome-webfont.eot?v=3.0.1');
  src:url('../fonts/fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('../fonts/fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('../fonts/fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal 
  }

		
.head {
	height:20px; 
	width:345px;
	margin:auto;
	position:relative;
	z-index:2;
	margin-top:-2px;
	margin-bottom:10px;
}

@media all and (max-width:23em) {
	.head {
		width:90%;
		background-size:100%;
		background-position:top;
	}
}					

.bottom {
	position:relative;
	background-image:url(../images/pattern_spacer.png);
	background-repeat:repeat-x;
	height:30px;
	top:15px;
	z-index:18;
	clear:both;
}	


h1 {
	color:#333; 
	font-size:1.8em; 
	font-weight:500;
}

h2 {
	color:#333;
	font-size:1.3em;
}

h3 {
	position:relative; 
	z-index:4; 
	top:230px; 
	font-size:1.8em; 
	text-align:center; 
	color:#333; 
	font-weight:800;
}


h3:hover { color:red; }

h4 { 
	margin-top:55px; 
	color:#333; 
	font-size:1.3em; 
	font-weight:500;
	text-align:center; 
}
						
						
h5 {
	font-family: 'Yanone Kaffeesatz';
	font-style:italic;
	font-weight:500;
	letter-spacing:1px;
	color:#fbefda; 
	font-size:1.6em;
	padding-top:17px; 
	text-align:center;
}
						
h6 {
	text-align:center; 
	margin-top:-100px; 
	font-size:2.3em; 
	font-weight:500;
}

/*--------------------------------------- 
   Headings with Line left and right 
----------------------------------------*/
/*--- lines grey 910px---*/						
.heading-grey-910 {
	width:910px;
	position:relative;
	margin:auto; 
}		
	
.heading-grey-415 {
	width:415px;
	position:relative;
	margin:auto; 
	margin-bottom:50px;
}	

.heading-grey-415 img {
 margin-bottom:-4px;
}	
						
.line-grey {
	width:100%; 
	margin-bottom:-25px;
}						

.line-grey img {
	width:100%;
} /*-- end grey --*/


/*--- lines bright ---*/						
.heading-bright {
	width:910px;
	position:relative;
	margin:auto; 
	clear:both;
}		
						
.line-bright {
	width:100%; 
	margin-bottom:-25px;
}						

.line-bright img {
	width:100%;
} /*-- end bright --*/

/*-- text between the lines --*/
/* about-me column-first */
.line-text-first {
	position:relative; 
	width:370px; 
	background-color:#ece3d1;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#333;
}	

/* about-me column-second */
.line-text-second {
	position:relative; 
	width:220px; 
	background-color:#ece3d1;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#333;
	 
}		

/* contact */
.line-text-third {
	position:relative; 
	width:170px; 
	background-color:#ece3d1;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#333;
	clear:both
}

/* features bright1 */
.line-text-first-bright-1 {
	position:relative; 
	width:170px; 
	background-color:#333;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#ECE3D1;
}	

/* features bright2 */
.line-text-first-bright-2 {
	position:relative; 
	width:260px; 
	background-color:#333;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#ECE3D1;
}					


/* features bright3 */
.line-text-first-bright-3 {
	position:relative; 
	width:160px; 
	background-color:#333;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#ECE3D1;
}	
				

/* features bright4 */
.line-text-first-bright-4 {
	position:relative; 
	width:150px; 
	background-color:#333;
	text-align:center; 
	margin:auto; 
	font-size:1.8em; 
	color:#ECE3D1;
}

/* Media Queries */						
@media all and (max-width: 63em) {
	.heading-bright { 
		width: 94.5%; 
	}
}
						
@media all and (max-width: 60em) {
	.heading-grey-910 { 
		width: 95%; 
	}
	
	.heading-grey-415 { 
		width: 95%; 
	}
}
/*--- end Headings ---*/
/*=== end Mainstyles ===*/

/*======================================================= 
						H E A D E R
=======================================================*/	
#header {
	position:fixed;
	/*background-image:url(../images/pattern_header.png);
	background-repeat:repeat-x;*/
	height:166px;
	text-align:center;
	z-index:100;
}

@media all and (min-width: 50em) {
	.header-wrapper {
		position:fixed;
		/*background-image:url(../images/pattern_header.png);
		background-repeat:repeat-x;*/
		height:166px;
		text-align:center;
		z-index:100;
		background: -webkit-linear-gradient(top, rgba(255,255,255, 1), rgba(255,255,255, 0));
		width: 100%;
	}
}

@media all and (min-width:1200px) {
	#header {
		left: 50%;
		transform: translateX(-50%);
		width: 1200px;
	}
}

/*--- Header Mobil ---*/
#header-mobil { 
	position:fixed; 
	display:none; 
	z-index:100;
}

#header-mobil nav { 
	width:100%
}

#header-mobil a { 
	z-index:1000;
}


@media all and (max-width:50em) {
	#header-mobil {
		 display:block; 
	}
} 

.one-page {
	z-index:500; 
	width:100%;
}
/*--- End Header Mobil ---*/

#logo-middle {
	position: absolute;
	left: 20px;
	padding: 5px;
}

#contact-middle {
	/*position: absolute;
	top: 300px;
	left: 20px;*/
	position: absolute;
	bottom: 60px;
	left: 2.5%;
	z-index: 99;
	width: auto;
}

@media all and (max-width:1200px) {
	#contact-middle {
		/*position: absolute;
		top: 300px;
		left: 20px;*/
/*		position: absolute;*/
		bottom: 20px;
		/*left: 2.5%;*/
		z-index: 99;
	}
}

#contact-middle .entry {
	border-radius: 15px;
	background: rgba(255,255,255,0.85);
	padding: 5px 10px; 
	/*display: flex;*/
	/*justify-content: center;*/
	align-items: center;
	margin-top: 10px;
}

#contact-middle .entry img {
	/*position: absolute;*/
	/*margin-top: 6px;*/
	margin-right: 10px;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

#contact-middle .entry a {
	font-size: 26px;
	text-decoration: none;
	font-weight: 600;
	vertical-align: middle;
	letter-spacing: 0.03em;
}

@media all and (min-width: 50em) {
	#message-box {
		position: absolute;
		background: rgba(255,255,255,0.8);
		border: 2px solid #F88;
		margin-left: 5%;
		margin-right: 5%;
		top: 80px;
		padding: 10px 20px;
		z-index: 99;
		letter-spacing: 0.03em;
	}

	#message-box h4 {
		text-align: center;
		color: #333;
		font-size:32px;
		margin: 0 0 10px 0;
	}

	#message-box p {
		text-align: justify;
		font-size:20px;
		color: #333;
	}
}

#message-box a {
	text-decoration: none;
	font-weight: 600;
	color: blue;
}

@media all and (min-width: 1200px) {
	#message-box {
		width: 1008px;
		left: 50%;
		transform: translateX(-50%);
		margin-left: auto;
		margin-right: auto;
	}
}

.page-wrapper-dark {
	width:100%;
	background: #333;
	color: #ece3d1;

}

.page-wrapper-light {
	width:100%;
	background: #ece3d1;
	color: #333;
}

.slider-section {
	width:100%;
	max-height: 410px;
	overflow: hidden;
}

@media all and (min-width: 1200px) {
	.slider-section {
		width:100%;
		overflow: hidden;
	}
}

.page-section {
	position:relative;
	width:100%;
	left: 0px;
}

@media all and (min-width: 1200px) {
	.page-section {
		width: 1200px;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media all and (min-width: 1200px) {
	.contact-section {
		top: 450px;
		z-index: 99;
		position: absolute;
		width: 1200px;
		left: 50%;
		transform: translateX(-50%);
		margin-left: auto;
		margin-right: auto;
	}
}


#header-middle {
	position:relative; 
	/*width:945px; */
	/*height:155px; */
	margin:auto; 
	/*background-image:url(../images/header_middle.png);
	background-repeat:no-repeat;
	background-position:center bottom;*/
	text-align:center;
}
		
#header-middle p {
	font-size:20px;
	color: #333;
}
		
#header-middle .first-name {
	font-size:30px;
}
		
#header-middle p img {
	padding-bottom:8px;
}
	
#header img {
	position:relative;
} /*- end A 1 -*/
	
/* Creating the Banderole Responsive */
#banderole-fixed {
	position:relative;
	float:right;
	width:945px;
	/*height:155px;*/
	/*background-image:url(../images/header_flexible.png);
	background-repeat:repeat-x;
	background-position:center; */
	top:-90px;
}

#Pennant-left-fixed {
	position:relative;
	float:left;
	width:70px; 
	height:155px;
	text-align:right;
	top:-90px;
}
	
#Pennant-right-fixed {
	position:relative;
	width:70px;	
	float:right;
	height:155px;
	left:0; 
	text-align:left;
	top:-90px;
}

/* Media Queries */
@media all and (max-width: 50em) {
	#header-middle { 
		width: 100%; 
	}
	
	#banderole-fixed { 
		width: 100%; 
	}
	
	#Pennant-right-fixed, #Pennant-left-fixed { 
		display:none;
	}
}

@media all and (max-width:50em) {
	#header {
		display:none;
	}
}
			
						
@media all and (max-width: 49em) {
	#banderole-fixed { 	
	}
}	
				
	
.menue-text-fixed {
	padding-top:112px;
	position:absolute;
	right: 0px;
	width:495px;
	margin:auto;
}

.menue-text-fixed a:first-child  {
	margin-left:-1%;
}
	
.menue-text-fixed a {
	font-size:24px;
	margin-left:5%;
	text-decoration:none;
	font-family:"Yanone Kaffeesatz";
	font-weight:400;
	/*color:#ece3d1;*/
	color: #333;
}
	

#outer-zeiger {
	width: 850px;
	position:fixed;
	margin:auto;
	top:0px;
}
	
#zeiger 	{ 
	position:absolute;
	top:125px;
	left:22%;
	z-index:1000; 
	border:0px solid blue; 
	text-align:right; 
}	

@media all and (max-width: 50em) {
	#outer-zeiger { display:none; }
}			
/* end Header */

/*======================================================= 
				C O N T E N T:  W E L C O M E
=======================================================*/


@media all and (max-width: 50em) {
	#welcome {
		background: #ece3d1;

		/*background: url(images/header/2.jpg) no-repeat center center fixed;*/
		background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../images/header/3.jpeg);
			

		background-size: cover; 
		background-position:center center; 
		padding: 0 0 20px 0;
	}
	.slider-wrapper {
		display:none;
	}
	.message-box-spacer {
		height: 60px;
	}
	#message-box {
		background: rgba(255,255,255,0.8);
		border: 4px solid #F88;
		margin: 20px;
		padding: 10px 15px;
		color: #333;
		letter-spacing: 0.03em;
	}
	#message-box h4 {
		margin: 0 0 5px 0;
	}
	#message-box p {
		text-align: justify;
	}
	#contact-middle {
		position: inherit;
		margin: 10px 20px 0 20px;
	}
	
}

#welcome {
	/*background-color:#ECE3D1;*/
	/*height:660px;*/
	position:relative;
}

#welcome .bottom {
	margin-top:100px;
}
			
#slider {
	width:900px; 
	margin:auto; 
	/*border:5px solid #ece3d1;
    -webkit-box-shadow: 0px 2px 5px 0px #111;
    -moz-box-shadow: 0px 2px 5px 0px  #111;
    box-shadow: 0px 2px 5px 0px #111;*/
}
	
/*@media all and (max-width: 60em) {*/
	#slider { 
		width: 100%; 
	}
}						
						
/*======================================================= 
			C O N T E N T:  A B O U T  -  M E 
=======================================================*/						
#about-me {
	background-color:#ece3d1;
	width:100%;
	height:100%;
}
							
#about-me .column-first {
	position:relative;  
	height:100%;
}	
							
#about-me .column-second {
	position:relative;  
	height:100%; 
	clear:both; 
	padding-top:50px;
}
				
#about-me .column-first ul {
	width:920px; 
	margin:auto; 
	padding-left:10px; 
	font-size:1.3em;
	height:100%;
}

#about-me .column-first ul:last-child  li {
	position:relative;
	top:20px;
	margin-bottom:-20px;
	list-style-image:url(../images/arrow.png);
	list-style-position:inside;
}

#about-me .column-first ul li {
	width:285px;
	color:#333;  
	margin-right:20px; 
	float:left; 
	list-style-type:none;
	margin-top:20px;
	text-align:justify; 
}		

#about-me .column-first ul li:first-child {
	margin-top:5px; 
}

#about-me .column-first ul li:last-child {
	width:300px; margin-right:-15px;
}

#about-me .column-first ul li img:first-child {
	width:98%; 
	margin-left:-3px; 
	margin-top:-2px; 
	margin-bottom:-32%; 
}

#about-me .column-first ul li img:last-child {
	width:100%; 
	margin-left:-5px; 
	margin-top:-2px; 
	margin-bottom:15px;
}		

#skills {
	position:relative;
	height:100%; 
	margin-bottom:250px;
}

/*--- Media Queries ---*/						
@media all and (max-width: 60em) {
	h4 {
		margin-bottom:20px;
	}
	
	#about-me .column-first ul  { 
		width: 95%; 
	}
	
	#about-me .column-first ul li  { 
		width: 30%; 
	}
	
	#about-me .column-first ul li:last-child  { 
		width:34%;
	}
}	
						
@media all and (max-width: 52em) {
	#about-me .column-first ul li:last-child  { 
		width:97%;
	}
	
	#about-me .column-first ul li { 
		clear:both; 
		width:99%;
	}
	
	#about-me .column-first ul li img:first-child { 
		width: 50%; 
		float:left; 
		margin-top:10px; 
		padding-right:10px;
	}
	
	#about-me .column-first ul li img:last-child { 
		width: 51%; 
		float:left;
		margin-top:7px; 
		padding-right:10px; 
	}
	
	#about-me .column-second {
		padding-top:100px;
	}
	
	#skills {
		padding-bottom:250px; 
	}
}

@media all and (max-width:40em) {
	#about-me .heading-grey-910  {
		width:98%; 
		font-size:0.8em; 
		left:0px; 
		margin:0; 
		padding:0; 
		left:1%;
	}

	#about-me .heading-grey-910 .line-grey  {
		width:97%; 
		margin:auto;
	}
	
	#about-me .heading-grey-910 .line-text-first  {
		margin-bottom:20px;
		width:300px;
		margin-top:-20px;
	}
	
	#about-me .heading-grey-910 .line-text-second  {
		margin-bottom:20px; 
		width:170px;
		margin-top:-20px;
	}
}

@media all and (max-width:37em) {
	#skills ul {
		width:250px;
	}
	
	#skills ul li img {
		width:70px; height:70px;
	}
	
	#skills h6 {
		margin-top:-55px; font-size:1.3em; 
	}
	
	#skills h4 {
		margin-top:30px; 
		font-size:1.3em; 
		color:#333;
	}
}

/*======================================================= 
			C O N T E N T:  P O R T F O L I O
=======================================================*/	
#portfolio {
	width:100%;
	height:100%;
	background-color:#333;
}

#wrapper {
	width:910px; 
	position:relative; 
	margin:auto;
	margin-bottom:70px;
}

#container {
	width:100%; 
	position:relative; 
	height:100%; 
	clear:both;
}

#options {
	width:60%; 
	z-index:20; 
	padding-top:55px; 
	font-size:1.5em; 
	float:left;
	color:#ece3d1;
	margin-left:0;
	padding-bottom:60px;
	background-image:url(../images/portfolio_ribbon_middle.png);
	background-repeat:repeat-x;
	background-position:50px 40px;
}

#test-left {
	float:left; 
	padding-top:86px;
	width:70px; 
	height:60px;
	background-image:url(../images/portfolio_ribbon_left.png);
	background-position:right;
	background-repeat:no-repeat;
}

#test-right {
	float:left; 
	padding-top:86px;
	width:70px; 
	height:60px;
	background-image:url(../images/portfolio_ribbon_right.png);
	background-position:left;
	background-repeat:no-repeat;
}

#options ul li {
	float:left;
	list-style-type:none;
	margin-right:20px;
}

#options ul li a {
	color:#ece3d1;
	text-decoration:none;
}

.element {
	position:relative; 
	width:210px; 
	height:282px; 
	float:left; 
	margin-bottom:10px;
	padding-right:5px; 
	padding-left:10px;
    margin-left: auto;
    margin-right: auto;}

.element h3 {
	font-size: 20px;
}

.element a{
	text-decoration:none;
}

.frame-picture {
	z-index:2; 
	position:absolute;

}

.customer-picture {
	position:absolute;
	z-index:1; 
	left:20px; 
	top:100px; 
    width: 188px;
    height: 125px;
    background: #333;
    text-align: center;
    padding-top: 30px;
	color: #ece3d1;
	font-weight: 700;
	font-size: 44px;
}				

.line-grey-picture img {
	width:180px; 
	position:relative; 
	left:15px; 
	margin:auto; 
	z-index:4; 
	top:30px;
} 

.webdesign-p {
	position:relative; 
	width:90px; 
	margin:auto; 
	color:#333; 
	font-weight:800; 
	background-image:url(../images/frame_portfolio_pice.png); 
	background-repeat:no-repeat; 
	z-index:50; top:10px; 
	font-size:1.3em; 
	text-align:center;
}


#offer p.element-p {
	position:relative; 
	line-height: 95%;	
	margin:auto; 
	color:#333; 
	font-weight:800; 
	z-index:50; 
	top:24px; 
	font-size:24px; 
	text-align:center;
	margin-bottom: 0;
}


.logo-p {
	position:relative; 
	width:50px; 
	margin:auto; 
	color:#333; 
	font-weight:800; 
	background-image:url(../images/frame_portfolio_pice.png); 
	background-repeat:no-repeat; 
	z-index:50; top:10px; 
	font-size:1.3em; 
	text-align:center;
}


.branding-p {
	position:relative; 
	width:90px; 
	margin:auto; 
	color:#333; 
	font-weight:800; 
	background-image:url(../images/frame_portfolio_pice.png); 
	background-repeat:no-repeat; 
	z-index:50; top:10px; 
	font-size:1.3em; 
	text-align:center;
}

.video-p {
	position:relative; 
	width:50px; 
	margin:auto; 
	color:#333; 
	font-weight:800; 
	background-image:url(../images/frame_portfolio_pice.png); 
	background-repeat:no-repeat; 
	z-index:50; top:10px; 
	font-size:1.3em; 
	text-align:center;
}


/* Media Queries */
@media all and (max-width: 60em) {
	#container, #wrapper {
		width:100%; 
	}
	#options {
		width:80%; 
	}
}

@media all and (max-width: 50em) {
	#options {
		width:98%; padding-left:2%;
	}
	#test-left, #test-right {
		display:none; 
	}
}

@media all and (max-width: 40em) {
	#container {
		width:225px; margin:auto; 
	}
}

@media all and (max-width: 35em) {
	#options {
		background-image:none;
	}
}


/*======================================================= 
			C O N T E N T:  B L O G 
=======================================================*/	
#blog {
	width:100%;
	height:100%;
	background-color:#ece3d1;
}


.ui-btn-text {display:none; }

#blog .wrapper-blog { 
	position:relative; 
	width:920px; 
	margin:auto; 
}

#left-blog { 
	float:left; 
	width:690px;
}

#nav-blog {  
	position:relative; 
	width:230px; 
	float:right; 
	color:#333; 
	top:0; 
}

#searchformular img { 
	position:relative; 
	top:-10px 
}

#searchformular input { 
	width:228px; 
	height:30px; 
	margin-top:-10px; 
}

#search-top  { 
	margin-bottom:30px; 
}

#search-top h1 { margin-bottom:-10px }

#searchformular .first-input { 
	position:relative; 
	top:-20px; 
	margin-bottom:-20px; 
}

#searchformular .send { 
	width:230px; 
	cursor:pointer;
	padding-top:1px;
	background-color:#5b5557;
}

.navi-blog img { 
	position:relative; 
	top:-10px 
}

.navi-blog { 
	margin-bottom:30px; 
	width:95%;
}

.navi-blog ul li { 
	list-style-type:none; 
	font-size:1.3em; 
}

.navi-blog ul li a { 
	text-decoration:none; 
	color:#c73618; 
}

.navi-blog ul { margin-top:-10px; }

.navi-blog p { 
	color:#c73618; 
	margin-top:-10px; 
	font-size:1.3em; 
}

.send { 
	border: 1px solid black; 
	height:30px; 
	background-color:#5b5557; 
}

.blog-inner {
	position:relative; 
	float:left; 
	width:685px; 
	height:285px; 
	color:#333;
}

.blog-inner-last {
	margin-bottom:20px;
}

.blog-head img:first-child {
	position:relative; 
	z-index:2; 
}

.blog-head img:last-of-type {
	 position:absolute; 
	 z-index:1; 
	 left:10px; 
	 top:35px; 
}

.blog-head h4 {
	position:absolute; 
	z-index:5; 
	top:115px; 
	left:10%; 
	font-size:1.6em; 
	font-weight:500;
}

.blog-head { float:left; height:270px;}

.head2 h4 {
	left:8%;
}

.head3 {
	height:270px; 
	width:200px; 
	float:left; 
	margin-right:10px;
}

.head3 h4 { 
	left:9%; 
	top:-11%; 
}

.blog-content {
	position:relative; 
	width:630px; 
	left:20px;
}

.blog-content h1 {
	color:#333; 
	font-size:1.8em; 
	font-weight:500;
}

.blog-content h2 {
	font-size:1.0em; 
	font-weight:800;
}

.blog-content h2:first-child {
	color:#333;
}

.blog-content h2 span {
	color:#c73618; 
	margin-right:20px;
}

.blog-content h2 span:last-child {
	float:right;
}

.blog-content img {
	 position:relative; 
	 width:63.5%; 
	 top:-15px;
}

.blog-content p {
	font-size:1.3em; 
	font-weight:400; 
	line-height:1.2em; 
	text-align:justify; 
	width:610px;
	margin-top:-15px;
}

.blog-content h3 {
	position:relative; 
	top:6px; 
	text-align:left; 
	font-size:1.3em; 
	font-weight:500; 
	line-height:2.0em; 
	margin-top:-10px; 
	float:left;
}


.blog-content h3 a {
	text-decoration:none;
	color:#c73618; 
}

/*--- Media Queries ---*/
@media all and (max-width: 60em) {
	#nav-blog, #blog .wrapper-blog {
		width:98%; margin:auto; 
	}
	
	.blog-inner, .blog-content, .blog-content p  {
		width:98%;  
	}

	.blog-content p {
		margin-top:10px; 
	}
	
	.blog-content img   {
		display:none;
	}
	
	.navi-blog {
		float:left; width:31%; margin-right:10px;
	}

	.blog-content h2 span:last-child {
		margin-right:2%;
	}
	
	.navi-blog img {
		width:99%;
	}
	
	#searchformular .first-input { 
		display:block;
		margin-bottom:-12px; 
		display:block; 
	}
}

@media all and (max-width: 45em) {
	#left-blog { 
		width:98%; 
		clear:both; 
	}
	
	.blog-inner {
		width:100%; 
		clear:both; 
		margin-bottom:50px; 
		right:1%;
	}
	
	.blog-content, .blog-content p  {
		width:98%; 
		margin:0; 
		padding:0; 
	}
	
	.blog-content h3 {
		clear:both;
	}
	
	.blog-content img {
		width:100%; 
		display:inline;
	}

	.blog-content h2 span:last-child {
		margin-right:0%;
	}
	
	.blog-head  {
		display:none; 
	}
	
	#blog .wrapper-blog {
		width:97%; 
		margin:0; 
		padding:0; 
		margin-left:0px;
	}
	#nav-blog {
		width:97%;
	}
	.navi-blog {
		clear:both; 
		width:100%; 
	}
}

/*======================================================= 
			C O N T E N T:  F E A T U R E S
=======================================================*/	
#features {
	position:relative;
	height:100%;
	background-color:#333;
}

.wrapper-features {
	padding-bottom:20px; 
	position:relative; 
	width:100%; 
	display:inline-block;
}

#features .features-ul {
	margin:0; padding:0;
	max-width:100%;
	margin:auto;
	font-size:1.2em;
	letter-spacing:0.03em;
}

#features ul li {
	width:30.2%;
	float:left; 
	text-align:justify;
	list-style-type:none;
	display:inline-block;
}

#features ul li.photos-col {
	width: 47.5%;
    position: relative;
	margin: 0 2.5% 0 0;
}

@media all and (max-width:40em) {
	#features ul li.photos-col {
		width: 95%;
		margin: 0 2.5%;
	}
}

#features ul li.text-col {
	width: 45%;
	padding: 0 2.5% 10px 2.5%;
}

@media all and (max-width:40em) {
	#features ul li.text-col {
		width: 95%;
		margin: 0;
	}
}

#features p {
	margin-bottom: 1em;
	font-size: 16px;
}

#features ul.dotted-list li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #ece3d1; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

#features .dotted-list li {
	float: inherit;
	text-align: inherit;
	display: inherit;
	width: inherit;
	list-style-type: circle;
	margin-left: 30px;
	font-size: 16px;
	list-style-position: outside;
	margin-bottom: 5px;
}

#features ul li.spacer-li { width:20px; }

/*
#features ul li:first-child { width:2.5%;  }
*/

.bright1, .bright2, .bright3, .bright4  {
	padding-top:20px;
	padding-bottom:15px;
}


#features ul li.left-large {
	width:62.6%;
}

#features ul li.left-50 {
	width:46.3%;
}

#features ul li.right-50 {
	width:46.3%;
}

.img-wrapper {
  position: relative;
  width: 48%;
  height: 340px;
  overflow: hidden;
  float: left;
  margin: 1%;
}

#offer .img-wrapper {
  position: relative;
  width: 98%;
  height: 200px;
  overflow: hidden;
  float: left;
  margin: 1%;
}

@media all and (max-width: 60em) {
	.img-wrapper {
	  width: 98%;
	  height: 240px;
		
	}
}

@media all and (max-width: 40em) {
	.img-wrapper {
		height: 360px;
	}
}

.img-wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

@media all and (max-width: 60em) {
	.img-wrapper img {
		height: 120%;
	}
}

@media all and (max-width: 60em) {
	.img-wrapper img.portrait {
		width: 100%;
	}
}

.img-wrapper img.portrait {
  width: 125%;
  height: auto;
}

.offer {
	display:block;
}

#offer p {
	margin-bottom: 1em;
	font-size: 16px;
}

#offer .features-ul {
	margin:0; padding:0;
	max-width:100%;
	margin:auto;
	font-size:1.2em;
	letter-spacing:0.03em;
}

#offer ul li {
	width:30.2%;
	float:left; 
	text-align:justify;
	list-style-type:none;
	display:inline-block;
}

#offer ul li.photos-col {
	width: 32.5%;
    position: relative;
	margin: 0 0 0 2.5%;
	padding-bottom: 10px;
}

@media all and (max-width:40em) {
	#offer ul li.photos-col {
		width: 95%;
		margin: 0 2.5%;
	}
}

#offer ul li.text-col {
	width: 60%;
	padding: 0 2.5% 10px 2.5%;
}

@media all and (max-width:40em) {
	#offer ul li.text-col {
		width: 95%;
		margin: 0;
	}
}


#offer ul.dotted-list li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #333; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

#offer .dotted-list li {
	float: inherit;
	text-align: inherit;
	display: inherit;
	width: inherit;
	list-style-type: circle;
	margin-left: 30px;
	font-size: 16px;
	list-style-position: outside;
	margin-bottom: 10px;
}


#high-orange {
	background-color:#ff6600;
}

#high-blue {
	background-color:#669999;
}

#high-dotted {
	border-bottom:2px #ff6600 dotted;
}

#blockquote-left {
	font-size:1.6em; 
	float:left; 
	padding-right:13px;
}

#blockquote-right {
	font-size:1.6em; 
	float:right; 
	padding-left:7px;
}

/* Media Queries */
@media all and (max-width: 60em) {
	#features ul {
		width:99%; 
	}
}

@media all and (max-width: 50em) {
	#features ul li {
		width:29.8%; 
	}
}

@media all and (max-width:40em) {
	#features ul {
		max-width:95%; margin:auto;
	}
	#features ul li {
		clear:both; width:96%; margin-left: 2%
	}
	#features ul li.spacer-li {
		display:none;
	}
	
	#features ul li.left-50, #features ul li.right-50, #features ul li.left-large {
		width:99.8%;
	}
}

.price-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	clear: both;
	padding-top: 10px;
}

@media all and (max-width:700px) {
	.price-box {
		flex-direction: column;
	}
}

.price-box-disclaimer {
	text-align: center;
	padding-top: 20px;
	letter-spacing: 0.03em;
	font-size: 16px;

}

/*=======================================================
			G A L L E R Y
=======================================================*/

#features .slider-wrapper {
	margin: 0 5%;
}

#features .theme-default .nivo-controlNav {
	display: inherit;
	clear: both;
	padding-bottom: 40px;
}

#features #slider-gallery {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%;
    float: left;
    height: 0;	
}

#features #slider-gallery img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

/*======================================================= 
			C O N T E N T:  C O N T A C T
=======================================================*/	
#contact {
	height:100%;	background-color:#ece3d1;	padding-bottom:20px;
}

#contact li {
	list-style-type: none;
}

#contactFormular {
	position:relative;
	margin:auto;
}

#left-contact  {
	width:50%; float:left;
}


#contactFormular .send-button {
	height:30px;
	background-color:#5b5557; 
	border:1px solid black; 
	width:418px;
	margin-top:5px;
	margin-left:-1px;
	cursor:pointer;
}

form p {
	font-size:1.3em; 
	color:#333;
}

#right-contact  {
	width:50%; 
	float:left; 
}

#right-contact ul {
	margin-bottom:30px;
}

#right-contact ul li a {
	color:#333;
	text-decoration:none;
	background:none;
}

#right-contact ul li a:visited {
	color:#333;
	text-decoration:none;
	background:none;
}

#right-contact ul li a:focus {
	cursor:default;
	color:#333;
	text-decoration:none;
}

#right-contact .last-ul-contact li {
	float:left;
}

#right-contact .last-ul-contact li:last-child {
	float:left; 
	margin-left:100px;
}

#right-contact .office-contact {
	padding-top: 50px;
}

#social-button {
	max-width:400px;
	margin:auto;
	padding-bottom:80px;
}

#social-button a {
	float:left; 
	margin-right:2%; 
	border-radius:100px; 
	background-color:#333;
	width:42px; 
	height:42px;
	text-align:center;
}

#social-button a i {
	color:#ece3d1; 
	font-size:1.3em; 
	padding-top:11px;
	padding-left:1px;
}

#social-button img {
	margin-right:2%;
	margin-top:0px;
}

/* Media Queries */
@media all and (max-width:60em) {
	#contactFormular {
		width:95%;
	}
	#left-contact {
		width:45%;
	}
	#contactFormular form input, #contactFormular form textarea  {
		width:100%;
	}
	#contactFormular .send-button  {
		width:100.5%;
	}
	#right-contact   {
		width:45%;
	}
}
	
@media all and (max-width:50em) {
	#left-contact {
		width:95%;
	}
	#right-contact {
		width:95%; margin-left:0px; margin:auto;
	}
	
	#right-contact ul {
		float:left; padding-left:10px; 
	}
	
	#right-contact .last-ul-contact {
		margin-left:10%;  float:left;
	}
	
	#right-contact .last-ul-contact li {
		margin-left:0%; float:left;
	}
	
	#right-contact .last-ul-contact li:last-child  {
		margin-left:1%; clear:left;
	}
	
	#right-contact .touch-wb  {
		float:right;  margin-right:2%;
	}
	#right-contact .first-ul-contact  {
		float:left;  margin-left:2%;
	}
	
	#social-button ul {
		width:100%; margin:auto; margin-bottom:40px;
	}
}

@media all and (max-width:44em) {
	#right-contact .touch-wb  {
		clear:left; float:left;  
	}
	
	#social-button  {
		clear:both; 
	}
}

/*======================================================= 
				F O O T E R
=======================================================*/	
#footer {
	height:170px;
	width:100%;
	background-image:url(../images/pattern_bottom.png);
	background-repeat:repeat;
	position:relative;
	z-index:100;
	top:-5px;
}

#footer-inner {
	margin:auto;
	width:340px;
	height:70px;
	position:relative;
	padding-top:20px;
}

@media all and (max-width: 27em) {
	#footer-inner {
		width:97%;
	}
	#footer-inner img {
		width:97%;
	}
}

#footer-inner h1 {
	text-align:center;
	color:#ece3d1;
	margin-top:-78px;
}

#footer-inner p {
	text-align:center;
	color:#333;
	margin-top:60px;
}

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

input {
	width:415px;
	height:45px;
	margin-bottom:50px;
	background-color:#ece3d1; 
}

textarea {
	width:415px;
	height:200px;
	background-color:#ece3d1; 
}


label {
display: block;
margin-bottom: 24px;
}

input, textarea {
border: 1px solid #211d1e;
background-color:#ece3d1; 
font-family:"Yanone Kaffeesatz";
font-size:1.3em;
}

input:valid, textarea:valid {
background: url(images/ribbon_alert.png) no-repeat 100% -3px #ece3d1;
outline: 0px solid transparent;
}

input:invalid:focus, textarea:invalid:focus {
background: url(../images/ribbon_alert.png) no-repeat 100% -3px #ece3d1;
outline: 0px solid transparent;
}

input[type="submit"]:valid, textarea[type="submit"]:valid  {
outline-color: transparent;
box-shadow: 0px 0px 0px rgba(0,0,0,0.3);
border-radius: 3px;
background-image: none;
padding-right: 8px;
}

input[type="submit"]:valid:hover,
input[type="submit"]:valid:focus,
textarea[type="submit"]:valid:hover,
textarea[type="submit"]:valid:focus{
cursor: pointer;
box-shadow: none;
}

.ui-input.text, .ui-body-c { position:relative; margin-top:0px;  }


.confirmation {
	position:absolute;
	top:150px;
	left:20px;
	font-size:1.8em;
	color:black; 
	display:none; 
}	

.loader {
	position:absolute;
	top:220px;
	left:180px;
	display:none;
}	

.error-message {
	position:absolute;
	top:150px;
	left:20px;
	font-size:1.8em;
	color:black; 
	display:none; 
}

/* end Form Validation */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/*-------------------- 
	J U M P S
--------------------*/					
#jumptop {
	position:relative;
	top:-80px;
}
						
#jump1, #jump2, 
#jump3,	#jump4,
#jump5	{
	position:relative;
	top:-22px;
}

@media all and (max-width: 40em) {
	#jump1, #jump2, #jump3, #jump4, #jump5 {
		top:-16px; color:blue; clear:both;
	}
}

.footer-style {
		clear:both; 
}						
						
#position1, #position2, 
#position3, #position4,
#position5	{
	position:absolute;
	float:left;
	width:80px;
	height:70px;
	background-image:url(../images/ribbon_top.png);
	background-repeat:no-repeat;
	background-position:bottom;
	z-index:0;
}

.ui-loader-fakefix { display:none; }


/*-------------------- 
	C O O K I E S
--------------------*/					

#cookie {
	border: 2px solid #ece3d1;
	padding: 5px;
	
}