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


/*======================================================= 
				 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:"Yanone Kaffeesatz";
	color:#ece3d1; 
}

@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:90px; 
	width:345px;
	margin:auto;
	background-image:url(../images/circle_bottom.png); 
	background-position:right;
	background-repeat:no-repeat;
	position:relative;
	z-index:2;
	margin-top:-2px;
	margin-bottom:50px;
}

@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:32%; 
	margin-bottom:-25px;
	padding-right:2%;
	float:left;
}					
.line-grey-last {
	width:32%; 
	margin-bottom:-25px;
	float:left;
}
					
.line-grey-full {
	width:100%; 
	margin-bottom:-25px;
}						

.line-grey img, .line-grey-full img, .line-grey-last img {
	width:100%;
	margin-top:-7%;
} /*-- 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:130px;
	top:-25px;
	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;
	width:100%;
	height:166px;
	text-align:center;
	z-index:100;
}

/*--- 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:40em) {
	#header-mobil {
		 display:block; 
	}
} 

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

#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:45px;
}
		
#header-middle p:first-child {
	font-size:20px;
	padding-top:10px;
}
		
#header-middle p img {
	padding-bottom:8px;
}
	
#header img {
	position:relative;
} /*- end A 1 -*/
	
/* Creating the Banderole Responsive */
#banderole-fixed {
	position:relative;
	float:left;
	width:805px;
	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: 60em) {
	#header-middle { 
		width: 100%; 
	}
	
	#banderole-fixed { 
		width: 100%; 
	}
	
	#Pennant-right-fixed, #Pennant-left-fixed { 
		display:none;
	}
}

@media all and (max-width:40em) {
	#header {
		display:none;
	}
}
			
						
@media all and (max-width: 39em) {
	#banderole-fixed { 	
	}
}	
				
	
.menue-text-fixed {
	padding-top:103px;
	position:relative;
	width:530px;
	margin:auto;
}

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

#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: 60em) {
	#outer-zeiger { display:none; }
}			
/* end Header */

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

/*--- Content ---*/
#content { padding-top:155px;}
	
@media all and (max-width: 40em) {
	#content { 
		margin-top:-100px; 
	}
} /*--- END ---*/

#welcome {
	background-color:#333;
	margin-top:-5px;
}

#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: 95%; 
	}
}						
						
/*======================================================= 
			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:70px;
}
				
#about-me .column-first ul {
	font-size:1.3em;
	height:100%;
}

#about-me .column-first ul li {
	color:#333;  
	float:left; 
	list-style-type:none;
	text-align:justify; 
}		

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

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

/*--- Media Queries ---*/						
@media all and (max-width: 60em) {
	h4 {
		margin-bottom:20px;
	}
		
}	
						
@media all and (max-width: 52em) {
	#about-me .column-first ul li { 
		clear:both; 
		width:99%;
		margin-bottom:50px;
	}
	
	#about-me .column-first ul li img:first-child {
		margin-left: 4px;
		margin-bottom: -25%;
	}
		
	#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, #about-me .heading-grey-910 .line-grey-last  {
		width:97%; 
		margin:auto;
	}
	
	#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:912px; 
	position:relative; 
	margin:auto;
	margin-bottom:70px;
}

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

#options {
	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;
}
#options ul.option-set {
	display:inline;
}

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

.element a{
	text-decoration:none;
}

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

}

.customer-picture {
	position:absolute;
	z-index:1; 
	left:20px; 
	top:100px; 
}				

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

.p-50, .p-60, .p-70, .p-80, .p-90, .p-100 {
	position:relative; 
	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;
}

.p-50 {	width:50px; }
.p-60 {	width:60px; }
.p-70 {	width:70px; }
.p-80 {	width:80px; }
.p-90 {	width:90px; }
.p-100 {	width:100px; }


/* Media Queries */
@media all and (max-width: 60em) {
	#container, #wrapper {
		width:100%; 
	}
	#menu_wrapper {
		width:100%;
		margin:auto;
	}
	#options ul.option-set {
		display:block; 
		clear:both;
	}
	#options {
		background-image:url(../images/wide_portfolio_ribbon_middle.png);
	}
	#test-left {
		height:94px;
		background-image:url(../images/wide_portfolio_ribbon_left.png);
	}

	#test-right {
		height:94px;
		background-image:url(../images/wide_portfolio_ribbon_right.png);
	}
}

@media all and (max-width: 35em) {
	#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;
	}
	#options ul.option-set {
		display:inline;
	}
}


/*======================================================= 
			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; 
}

a.overview-button {
	color:#eee;
	text-align:center;
	width:100%;
	background: #1C1C1C;
	padding: 10px 0;
	text-decoration:none;
	margin:auto;
	display:inline-block;
	transition-duration: 1s;
}
a.overview-button:hover {
	color:#1C1C1C;
	background:#eee;
}

/*--- 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 {
	width:100%;
	height:100%;
	background-color:#333;
}

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

#features ul {
	margin:0; padding:0;
	max-width:963px;
	margin:auto;
	font-size:1.2em;
	letter-spacing:0.04em;
}

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

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

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

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


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

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

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


#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:99.8%;
	}
	
	#features ul li.left-50, #features ul li.right-50, #features ul li.left-large {
		width:99.8%;
	}
}





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

#contactFormular {
	width:910px;
	position:relative;
	margin:auto;
}

#left-contact  {
	width:420px; 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:420px; 
	float:left; 
	margin-left:70px;
}

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

#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;
}

.input-contact { display:none; }

.touch-wb {
	padding-top:50px; 
	display:inline-block; 
}

.touch-wb  a{
	text-decoration:none;
	color:#333;
}

#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; width:105px;
	}
	
	#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:-88px;
}

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

.test {
		position:relative;
		width:80px;
		height:70px; 
		z-index:1;
		margin:auto; 
		clear:both; 
		margin-bottom:-45px;
}						
						
#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; }

.fancybox-overlay { z-index:8020 !important; }