/*

 * A Person - Responsive Single Page Vcard

 * Copyright (c) 2008-2013 99Square

 * Version 1.1 (3/19/2013)

 ***** New Version 1.2 ( 19 May 2013 ) ******

 * Designed By 99Square

 */

 



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

@import url(http://fonts.googleapis.com/css?family=Lato:700,900);

/** font-family: 'Lobster', cursive;

font-family: 'Fugaz One', cursive; **/



body { margin:0; overflow:hidden; padding:0;font-family: 'Open Sans', sans-serif; background-image:url(images/hintergrund.jpg); background-size:cover; background-attachment:fixed; color:#fff; font-size:13px; }

.background-pattern { width:100%; height:100%; top:0;  background-attachment:fixed;  position:fixed; background-image:url(images/pattern.png); z-index:-9999; opacity:0.2; }











/*======================================================

/*	General Style

/*====================================================*/



.copyright 								{	width:100%; background-color:#f3f3f3; padding:20px 0; color:#555; font-size:11px; }

.copyright a							{	color:#444; }





:Focus 									{	outline: none;}



img  									{ 	border:0; }



p 										{ 	line-height:28px; font-family: 'Open Sans', sans-serif; font-size:13px;  margin-bottom:20px;}



h1,h2,h3 								{ 	font-family: 'Lato';  font-weight:900;   text-transform:uppercase;  }



h1 										{ 	font-size:34px;    line-height:48px; margin-top:100px; }



h2 										{ 	font-size:32px;   line-height:28px; margin-top:50px; margin-bottom:50px;  }



h3 										{ 	font-size:18px;   font-weight:800;  line-height:22px; margin-top:50px; margin-bottom:50px; text-transform:uppercase; }



.h2-small 								{ 	font-size:18px;   text-align:center; color:#111; line-height:22px; margin-top:50px; margin-bottom:50px; text-transform:uppercase;}



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



a:hover 								{ 	color:#999; text-decoration:none;}



.h1-description 						{ 	text-align:center; font-size:14px; color:#223848; line-height:30px; font-family: 'Open Sans', sans-serif; margin-top:-13px; font-weight:400; margin-bottom:50px; }



strong 									{ 	padding:4px 10px; margin:0 2px;  background-color:#ffee9f; color:#2f2f2f; }



.center 								{ 	margin:auto!important; float:none!important; text-align:center!important; }



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



hr 										{ 	width:90%; height:0; border:0; border-bottom:2px #ddd dotted; margin:auto; margin-top:80px; margin-bottom:80px; }



.clear 									{ 	clear:both; }



.container 								{ 	margin:auto; }



.span4 p 								{ 	text-align:center;}



.span 									{ 	margin-bottom:20px;}



.picture	img							{	border-radius:6px; }



img 									{	max-width:100%; }

.btn									{	padding:12px 18px; border-radius:4px; background-color:#b2092d; color:#fff; border-bottom:3px #6c192b solid; 

border-top:0.5px #ffeaee  solid;  	 transition: all 0.4s ;}

.btn:hover								{	background-color:rgba(0,0,0,0.6); color:#fff; border-bottom:3px #333 solid; }



/*======================================================

/*	header

/*====================================================*/



.top-pic-body 							{ 	width:320px; height:auto; margin:auto; margin-top:10%; }



.top-pic 								{  	width:230px; height:230px; padding:24px;  margin:auto;-moz-border-radius: 255px; /* Firefox */ -khtml-border-radius: 255px; -webkit-border-radius: 255px; /* Safari, Chrome */ border-radius: 255px; /* CSS3 */  border-bottom:2px #afafaf dotted; border-top:2px #afafaf dotted; }



.top-pic img							{	transition: all 1s ;



-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.3);

-moz-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.3);

box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.3);

}



.top-pic:hover img					{	



-webkit-box-shadow:  0px 0px 30px 1px rgba(0, 0, 0, 0.6);

-moz-box-shadow:  0px 0px 30px 1px rgba(0, 0, 0, 0.6);

box-shadow:  0px 0px 30px 1px rgba(0, 0, 0, 0.6);

}



.top-pic img 							{	text-align:centere; max-width:230px; max-height:230px; margin:auto; -moz-border-radius: 255px; /* Firefox */ -khtml-border-radius: 255px; -webkit-border-radius: 255px; /* Safari, Chrome */ border-radius: 255px; /* CSS3 */}



.title-name 							{ 	text-align:center; font-size:28px; font-family: 'Lato';  font-weight:900;   text-transform:uppercase;  color:#111; padding:10px 20px; margin:auto;  z-index:9999; position:relative; }



.title-description 						{ 	text-align:center; font-family: 'Open Sans', sans-serif; font-size:13px; text-transform:uppercase; font-weight:600; color:#042d49; margin-bottom:20px;}



/*======================================================

/*	Container

/*====================================================*/



.line-box 								{ 	width:100%; height:auto; border:2px #afafaf dotted; margin-bottom:10px; -moz-border-radius: 7px; /* Firefox */ -khtml-border-radius: 7px; -webkit-border-radius: 7px; /* Safari, Chrome */ border-radius: 7px; /* CSS3 */}



.white-body 							{ 	width:96%; height:auto; margin:auto; background-color:#fff; color:#111; margin-top:1%; margin-bottom:1%; padding:30px 1%;  -moz-border-radius: 5px; /* Firefox */ -khtml-border-radius: 5px; -webkit-border-radius: 5px; /* Safari, Chrome */ border-radius: 5px; /* CSS3 */ }





.full-width-line						{	border-top:2px #afafaf dotted; padding:10px 0!important; border-bottom:2px #afafaf dotted; width:100%!important; height:auto;  }



.full-width								{	width:100%; padding:70px 0; }

.full-width	h1 ,

.full-width	h2 ,

.full-width	h3 							{	margin-top:0; }



/*======================================================

/*	full bg

/*====================================================*/



.full-bg								{	width:100%;  }





/*======================================================

/*	Circles social 

/*====================================================*/



.circle-body 							{ 	width:150px; height:150px; float:left;  border-top:2px #afafaf dotted; border-bottom:2px #afafaf dotted; padding:10px; margin:auto; -moz-border-radius: 95px; /* Firefox */ -khtml-border-radius: 95px; -webkit-border-radius: 95px; /* Safari, Chrome */ border-radius: 95px; /* CSS3 */ }



.circle 								{ 	width:100%; height:65%;  color:#111; font-family: 'Open Sans', sans-serif; padding-top:35%;  text-align:center; margin:auto;  -moz-border-radius: 120px; /* Firefox */ -khtml-border-radius: 120px; -webkit-border-radius: 120px; /* Safari, Chrome */ border-radius: 120px; /* CSS3 */ background-color:#333; color:#fff;transition:all 0.5s; -webkit-transition:all 0.5s; /* Safari */  }



.circle strong							{	background-color:transparent; padding:0; color:#fff; text-transform:uppercase; }

.circle:hover 							{ 	background-color:#11bfad; color:#fff;  }



.responsive-circle-body	 				{	width:870px; height:auto; margin:auto; text-align:center;  }



.social-icon 							{ 	width:32px; height:32px;    opacity:1!important;

 }

.social-icon i							{	font-size:33px!important; color:#111; }



.social-icon1 							{ 	float:left; margin-top:-150px; margin-left:-37px; }



.social-icon2 							{ 	float:left; margin-top:-76px; margin-left:-25px; }



.social-icon3 							{ 	float:left; margin-top:-13px; margin-left:15px; }



.social-icon4 							{ 	float:left; margin-top:15px; margin-left:43px; }



.social-icon5 							{ 	float:left; margin-top:15px; margin-left:63px; }



.social-icon6 							{ 	float:right; margin-top:-16px; margin-right:25px; }



.social-icon7 							{ 	float:right; margin-top:-80px; margin-right:-70px; }



.social-icon8 							{ 	float:right; margin-top:-150px; margin-right:-80px; } 



.line 									{ 	border-left:2px #afafaf dotted; height:50px; margin:auto; width:0; } 







.facebook,

.twitter,

.linkedin,

.googleplus,

.github,

.vimeo,

.pinterest,

.skype									{	transition: all 0.4s ; }

.facebook:hover							{	color:#3b5998; }

.instagram								{	transition: all 0.4s ; }

.instagram:hover						{	color:#bc2a8d; }

.twitter:hover							{	color:#2daae1; }

.linkedin:hover							{	color:#0073b2; }

.googleplus:hover						{	color:#f63e28; }

.github:hover							{	color:#a6d785; }

.pinterest:hover						{	color:#cb2027; }

.vimeo:hover							{	color:#2daae1; }

.skype:hover							{	color:#00aff0; }

.xing									{	transition: all 0.4s ; }

.xing:hover								{	color:#006667; }

.amazon									{	transition: all 0.4s ; }

.amazon:hover							{	color:#fd9b18; }

.youtube								{	transition: all 0.4s ; }

.youtube:hover							{	color:#cc181e; }













.center-circle 	{}						



.center-circle-final {}	



/*======================================================

/*	Skills

/*====================================================*/				



.skills-body 							{ 	width:150px!important; height:70px; margin:auto;    float:left; margin-bottom:20px; margin-right:22px;}



.skills-circle-body 					{ 	width:100%; height:25px; margin:auto; border-top:2px #afafaf dotted; border-bottom:2px #afafaf dotted;  padding:10px;  -moz-border-radius: 205px; /* Firefox */ -khtml-border-radius: 205px; -webkit-border-radius: 205px; /* Safari, Chrome */ border-radius: 205px; /* CSS3 */}



.skill-circle 							{  	background-color:#333; margin:auto; text-align:center;  font-family: 'Open Sans', sans-serif; line-height:100%; z-index:0; padding:5px 0; color:#fff; font-weight:700; -moz-border-radius: 205px; /* Firefox */ -khtml-border-radius: 205px; -webkit-border-radius: 205px; /* Safari, Chrome */ border-radius: 205px; /* CSS3 */ transition:background-color 0.5s; -webkit-transition:background-color 0.5s; /* Safari */}



.skill-circle:hover 					{ 	background-color:#11bfad; }

.skills-body p							{	text-transform:uppercase; font-weight:600; }



/*======================================================

/*	Resume

/*====================================================*/



.resume-body 							{ 	width:100%; height:auto; margin-bottom:10px; }



.resume-circle-two-body 				{ 	width:135px; height:auto; margin:auto; }



.resume-circle-body  					{ 	width:55px; height:55px; border-top:2px #afafaf dotted; border-bottom:2px #afafaf dotted; padding:4px; margin:auto;  -moz-border-radius: 35px; /* Firefox */ -khtml-border-radius: 35px; -webkit-border-radius: 35px; /* Safari, Chrome */ border-radius: 35px; /* CSS3 */ }



.resume-circle 							{ 	width:100%; height:100%; background-color:#333; color:#fff; margin:auto; text-align:center; line-height:55px;   font-family: 'Open Sans', sans-serif; font-weight:700; -moz-border-radius: 35px; /* Firefox */ -khtml-border-radius: 35px; -webkit-border-radius: 35px; /* Safari, Chrome */ border-radius: 35px; /* CSS3 */}



.resume-circle 							{	transition:all 0.5s; -webkit-transition:all 0.5s; /* Safari */  }



.resume-body:hover .resume-circle 		{ 	background-color:#11bfad; }



.resume-body .popover 					{ 	width:100%; margin:auto;  color:#111;}



.resume-body .popover-content 			{	padding:2px 10px; }



.resume-body .popover p 				{ 	font-size:12px; line-height:17px; }



.resume-body .popover h3 				{ 	color:#111; font-family: 'Open Sans', sans-serif; font-weight:700; text-shadow: 1px 1px 0 rgba(0,0,0,0.0);}





/*======================================================

/*	Map

/*====================================================*/



.map-body 								{ 	width:300px; height:300px; border-top:2px #afafaf dotted; border-bottom:2px #afafaf dotted; padding:10px; margin:auto; -moz-border-radius: 205px; /* Firefox */ -khtml-border-radius: 205px; -webkit-border-radius: 205px; /* Safari, Chrome */border-radius: 205px; /* CSS3 */ }



.map-body iframe 						{ 	width:100%; height:100%; opacity:0.6; -moz-border-radius: 205px; /* Firefox */ -khtml-border-radius: 205px; -webkit-border-radius: 205px; /* Safari, Chrome */border-radius: 205px; /* CSS3 */ transition:opacity 0.5s; -webkit-transition:opacity 0.5s; /* Safari */ }



.map-body iframe:hover 					{ 	opacity:1; }



/*======================================================

/*	Form & Contact Us

/*====================================================*/



.form 									{	margin-top:60px; }



.form-label 							{ 	font-family: 'Open Sans', sans-serif; text-align:left; margin-left:7px; margin-top:2px; margin-bottom:2px; }



input ,textarea 						{ 	width:100%; height:20px; background-color:#fff; border:0; border-top:2px #ccc dotted; border-bottom:2px #ccc dotted; padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px; color:#777; margin-bottom:10px; -moz-border-radius: 15px; /* Firefox */ -khtml-border-radius: 15px; -webkit-border-radius: 15px; /* Safari, Chrome */ border-radius: 15px; /* CSS3 */ }



textarea 								{ 	max-width:100%!important; min-width:100%!important; height:200px; }



input:Focus 							{ 	outline: none;}



textarea:Focus 							{	outline: none; }



form .button 							{	 width:100px; height:40px; line-height:10px; font-size:13px; margin:auto; background-color:#333; border:2px #014270 solid; color:#fff;  transition:all 0.5s; -webkit-transition:all 0.5s; /* Safari */ -moz-border-radius: 0px; /* Firefox */ -khtml-border-radius: 0px; -webkit-border-radius: 0px; /* Safari, Chrome */ border-radius:0px; /* CSS3 */ text-transform:uppercase;}  



label 									{ 	font-family: 'Open Sans', sans-serif;  }



form .button:hover 						{ 	background-color:#11bfad; border:2px #11bfad solid; color:#fff; cursor:pointer; }



h3.popover-title 						{ 	font-family: 'Anton', sans-serif; font-weight:normal; }



.two-circle 							{ 	float:left; }



#message 								{ 	margin: 10px auto; padding: 0; }



.error_message 							{ 	text-align:center; color:#d72912; font-family: 'Open Sans', sans-serif; font-weight:700; margin:auto; display:block;}



.loader 								{ 	padding: 0 10px; }



#contact #success_page h1 				{ 	background: url('assets/success.gif') left no-repeat; padding-left:22px;  }



fieldset 								{ 	border:0; }





/*======================================================

/*	new-skill

/*====================================================*/



.new-skill-body							{	width:100%; height:23px; background-color:#ddd; border-radius:10px; margin:10px 0;



-webkit-box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.2);

box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.2); }



.new-skill								{	background-color:#f88c00; height:23px;  float:left; border-radius:10px; color:#fff; text-align:left; line-height:23px; font-size:12px; }

.new-skill span							{	padding-left:10px; }





/*======================================================

/*	Responsive

/*====================================================*/







@media (min-width: 1200px) {

	

.container 										{	width: 1170px; margin:auto!important;  

												}

	

.row-fluid 										{ 	width: 100%; *zoom: 1; 

												}

	

.row-fluid:before , .row-fluid:after 			{ 	display: table; line-height: 0; content: ""; 

												}

	

.row-fluid:after 								{	clear: both; 

												}

	

.row-fluid [class*="span"] 						{ 	display: block; float: left; width: 100%; min-height: 30px; margin-left: 2.564102564102564%; *margin-left: 2.5109110747408616%; -webkit-box-sizing: border-box;     -moz-box-sizing: border-box; box-sizing: border-box; 

												}

	

.row-fluid [class*="span"]:first-child 			{	margin-left: 0; 

												}

  

.row-fluid .controls-row [class*="span"] + [class*="span"] 

												{ 	margin-left: 2.564102564102564%; 

												}

  

.row-fluid .span12 								{ 	width: 100%; *width: 99.94680851063829%; 

												}

  

.row-fluid .span11 								{ 	width: 91.45299145299145%; *width: 91.39979996362975%; 

												}



.row-fluid .span10 								{ 	width: 82.90598290598291%; *width: 82.8527914166212%; 

												}



.row-fluid .span9 								{ 	width: 74.35897435897436%; *width: 74.30578286961266%; 

												}



.row-fluid .span8 								{	width: 65.81196581196582%; *width: 65.75877432260411%; 

												}



.row-fluid .span7 								{ 	width: 57.26495726495726%; *width: 57.21176577559556%; margin-top:60px;

												}



.row-fluid .span6 								{ 	width: 48.717948717948715%; *width: 48.664757228587014%; 

												}



.row-fluid .span5 								{ 	width: 40.17094017094017%; *width: 40.11774868157847%; 

												}



.row-fluid .span4 								{ 	width: 31.623931623931625%; *width: 31.570740134569924%; 

												}



.row-fluid .span3 								{ 	width: 23.076923076923077%; *width: 23.023731587561375%; 

												}



.row-fluid .span2 								{ 	width: 14.52991452991453%; *width: 14.476723040552828%; 

												}



.row-fluid .span1 								{ 	width: 5.982905982905983%; *width: 5.929714493544281%; 

												}

												





}



@media (min-width: 980px) and (max-width: 1199px) {	

	

.container 										{ 	width:940px; margin:auto!important;  

												}

	

.row-fluid 										{ 	width: 100%; *zoom: 1; 

												}



.row-fluid:before , .row-fluid:after 			{ 	display: table; line-height: 0; content: ""; 

												}



.row-fluid:after 								{ 	clear: both; 

												}



.row-fluid [class*="span"] 						{	display: block; float: left; width: 100%; min-height: 30px; margin-left: 2.127659574468085%; *margin-left: 2.074468085106383%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; 

 												}



.row-fluid [class*="span"]:first-child 			{ 	margin-left: 0; 

												}



.row-fluid .controls-row [class*="span"] + [class*="span"] 

												{ 	margin-left: 2.127659574468085%; 

												}



.row-fluid .span12 								{ 	width: 100%; *width: 99.94680851063829%; 

												}



.row-fluid .span11 								{ 	width: 91.48936170212765%; *width: 91.43617021276594%; 

												}



.row-fluid .span10 								{ 	width: 82.97872340425532%; *width: 82.92553191489361%; 

												}



.row-fluid .span9 								{ 	width: 74.46808510638297%; *width: 74.41489361702126%; 

												}



.row-fluid .span8 								{ 	width: 65.95744680851064%; *width: 65.90425531914893%; 

												}



.row-fluid .span7 								{ 	width: 57.44680851063829%; *width: 57.39361702127659%; margin-top:20px;

												}



.row-fluid .span6 								{ 	width: 48.93617021276595%; *width: 48.88297872340425%; 

												}



.row-fluid .span5 								{ 	width: 40.42553191489362%; *width: 40.37234042553192%; 

												}



.row-fluid .span4 								{ 	width: 31.914893617021278%; *width: 31.861702127659576%; 

												}



.row-fluid .span3 								{ 	width: 23.404255319148934%; *width: 23.351063829787233%; 

												}

		

.row-fluid .span2 								{ 	width: 14.893617021276595%; *width: 14.840425531914894%; 

												}

	



.row-fluid .span1 								{ 	width: 6.382978723404255%; *width: 6.329787234042553%; 

												}

									

}





@media (max-width: 980px) {



body									{	padding:0!important; }





.container 										{ 	width:350px; margin:auto!important; 

												}

	

input ,textarea 						{ 	width:80%!important; }



textarea 								{ 	max-width:80%!important; min-width:80%!important; margin-left:-10px;}



form .button 							{ width:100px!important; height:40px; margin:auto; background-color:#014270; border:2px #014270 solid; color:#fff;  transition:all 1s; -webkit-transition:all 1s; /* Safari */ -moz-border-radius: 0px; /* Firefox */-khtml-border-radius: 0px; -webkit-border-radius: 0px; /* Safari, Chrome */border-radius: 0px; /* CSS3 */}  



.form-label 							{ 	margin-left:50px; }



textarea 								{ 	margin-left:5px; }



.responsive-circle-body 				{ 	width:350px; height:auto; margin:auto; text-align:center;}



.center-circle-final 					{ 	margin-left:85px; margin-top:-22px; }



}







@media (max-width: 767px) { 



	

.container 										{ 	width:350px!important; margin:auto!important; 

												}

												

.responsive-circle-body { width:175px; height:auto; margin:auto!important; float:none; text-align:center;}

.center-circle-final{margin:0;}												

}

@media (max-width: 480px) { 



body									{	padding:0; margin:0; }

p,h1,h2,h3,h4,h5,h6						{	text-align:center!important; }







.container 										{ 	width:290px!important; margin:auto!important; float:none!important;  }





.top-pic-body 							{	width:208px; margin:auto; margin-top:10%; }



.top-pic 								{ 	width:180px; height:180px; }



.top-pic img 							{ 	max-width:180px; max-height:180px; }



.social-icon img 						{ 	width:24px; height:24px; }



.social-icon i							{	font-size:24px!important;  }



.social-icon1 { float:left;  margin-top:-100px;  margin-left:-50px; }

.social-icon2 { float:left;  margin-top:-50px;   margin-left:-30px; }

.social-icon3 { float:left;  margin-top:-10px;   margin-left:0px; }

.social-icon4 { float:left;  margin-top:15px;    margin-left:17px; }

.social-icon5 { float:left; margin-top:15px;    margin-left:35px; }

.social-icon6 { float:left; margin-top:-50px;   margin-left:170px; }

.social-icon7 { float:left; margin-top:-85px;   margin-left:210px; }

.social-icon8 { float:left; margin-top:-140px;  margin-left:230px; } 



.map-body 								{ 	width:220px; height:220px; }



.form 									{ 	margin:auto; margin-top:40px; }





.span4 									{ 	padding:0 4%;  }





form .button 							{ 	width:100px!important; height:40px; margin:auto; background-color:#014270; border:2px #014270 solid; color:#fff;  transition:all 1s; -webkit-transition:all 1s; /* Safari */ -moz-border-radius: 0px; /* Firefox */ -khtml-border-radius: 0px; -webkit-border-radius: 0px; /* Safari, Chrome */ border-radius: 0px; /* CSS3 */ }



.form-label 							{ 	margin-left:25px; }

}