@charset "UTF-8";
/* CSS Document */


html{ overflow-x: hidden; }

p{ font-family: 'Raleway', sans-serif;}

li{ list-style-type: none;}

a{text-decoration:none; font-family: 'Raleway', sans-serif; color: #DD9D5E; }
a:hover{ opacity:1; color: #000;}

img{border:none;}

body{
	margin: 0 auto;
	padding: 0 auto;
	background:url(images/background.jpg) ;}

.align-c {
    text-align: center !important;
}


.align-l {
    text-align: left !important
}

.align-r {
    text-align: right !important
}

.clear { clear:both;}

#header{
	position: fixed;
	z-index:100000;
	width: 100%;
	left: 0px; top: 0px; 
	background-color: #322f32;
	height:32px;
}

/*Turn off button*/

#turnoff{ color:#999;
	position: fixed;
	z-index:10000;
	top:8px;
	float: right;
	height: 14px;
	width: 168px;
	right: 4px;
}

#turnoff a{ 
	font-size: 13px;
	color: #FFF;
	-webkit-transition: color 200ms ease-in 100ms; 
    -moz-transition: color 200ms ease-in 100ms;
    -o-transition: color 200ms ease-in 100ms;
    transition: color 200ms ease-in 100ms;
}

#turnoff a:hover{
color: #DD9D5E;

}
a.ball{ margin:0px 10px 5px 0; }
a.sprache{ margin:2px 20px 0 10px; opacity:0.7; float:right;}
a.sprache:hover{ opacity:1;}

/*********************************************NAV*************************************************/

/* Navigation */

.jMenu {

	height:32px;
    display: table;
    margin: 0;
    padding: 0;
    list-style:none;
	width:1444px;
}


    /* First level */
    .jMenu li {
        display: table-cell;
		opacity:0.95;
        margin: 0;
        list-style:none;
		padding:0;
		}
		
	.jMenu ul {
		margin:-32px 0 0 30px;
		}

        .jMenu a {
            padding: 9px 15px;
            display: block;
            color: #FFF;
            text-transform: uppercase;
            cursor: pointer;
            font-size: 13px;
			
			
			}
			
			.jMenu a.topmenu:hover {
				color: #DD9D5E;
            }

            .jMenu a.menu:hover {

				color: #DD9D5E;
            }

	/***************************************************Menue Mobile*********************************************************/
 nav { display:none;}




/***************************************************HELLO*********************************************************/
#hello{margin:0 auto;width:880px; height:100%}

	.hello-box{}
	
	.hidden{ display:none;}
	
	img.image{ float:left; }
	
	#hello h1.silva{ 
	color: #999; 
	margin:35% auto 0 auto;
	padding: 0 0;}
	
	#hello strong{font-family: 'Raleway', sans-serif;font-weight:300; }
	#hello strong b{ color:#DD9D5E; font-weight:500;}

	#hello strong.silva{ font-size:26px;}
	#hello strong.designer{ font-size:44px;}
	#hello strong.germany{ font-size:14px;}



		
	
	/***************************************************HELLO Mobile*********************************************************/
#hellom{margin-left:-8%;width:100%; height:100%; text-align:center;}

	
	#hellom h1{ font-size:28px; font-family: 'Raleway', sans-serif;font-weight:300; color:#DD9D5E;}
	#hellom h1.silva{ 
	color: #999; 
	margin:70px auto 0 auto;
	padding: 0 0;}
	
	#hellom strong{font-family: 'Raleway', sans-serif;font-weight:300; }
	#hellom strong b{ color:#DD9D5E; font-weight:500;}

	#hellom strong.silva{ font-size:16px;}
	#hellom strong.designer{ font-size:24px;}
	#hellom strong.germany{ font-size:12px;}

/*********************************************SLIDE OUT TAB*************************************************/

.slide-out-div {
  width: 365px;
  display:block;
  }

#instruction{
	width:400px;
	height:480px;
	background:url(images/instructions_two.png) no-repeat;
	margin-top: -24px;
}

#instruction-de{
	width:400px;
	height:480px;
	background:url(images/instructions_two-de.png) no-repeat;
	margin-top: -24px;
}




/*******************************************FOOTER STARTS HERE*******************************************/




#copyrightabout, #copyright{
	
	position: absolute;
	right: 34px;
	bottom: 8px;
	height: auto !important;
	width: auto !important;
}

#copyrightabout p, #copyright p{
	font-size: 9px;
	font-family: Arial, "Helvetica", sans-serif;
	color:#333;
	
}
#workcopyright{ float:right;
margin:0;
padding:0;
	bottom: 8px;
	
	
}
#workcopyright p{
	margin:0 34px 18px 0;
	font-size: 9px;
	font-family: Arial, "Helvetica", sans-serif;
	color:#333;
	
}
/*********************************************Work*************************************************/
#workcontent{ width:100%; clear:both; 
margin:30px 0 0 0;
font-family: 'Raleway', sans-serif;
padding:0;}
section{ width:100%;
margin:0px auto;
padding:80px 0 0 0;}
#workcontent h2 {margin-bottom: .84em;
color: #111;
text-rendering: optimizelegibility;
font-weight: 400;
}
#workcontent p{ line-height:1.5em;
margin-bottom: 1.26em; }
.text-light{color:#888; }

.first { margin-bottom:170px;}
.row{ clear: both;
max-width: 1040px;
margin: 0 auto;}
.snaps{padding-top:10px;
border-top: #ddd 1px dotted;}
.snaps a{margin-right:2.5%;
margin:15px 2% -30px 0;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
display: inline-block;
text-decoration: none;
position: relative;
padding: 0px;}

h2.mobiltext { display:none;}
#preise{ width:48%; float:left;}
#preise .bild { width:22%; float:left; margin-right:10px;}
#preise .bild img{ max-width:110px; max-height:150px;}


#lead-image-container video{
width: auto !important;
height: auto !important;
max-width: 100%;}

#pictures-video-wrap{ display:none;}

/*********************************************About*************************************************/
#aboutcontent{ width:100%; clear:both;
margin: 0;
padding:0;
background:url(images/background.jpg);}
#about {max-width: 996px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
color:#777;
line-height:23px;
}


#about h1 {font-size:48px;
text-shadow: 0 0 1px rgba(51,51,51,0.2);
text-align:center;
font-weight:normal;
margin:20px 0 60px 0;

}

.grid_12 h2{text-align:left;
font-size:24px;
margin-bottom:26px;}
#about h2.skills{ margin-left:25px; margin-bottom:15px;}
.grid_6 {width: 50%;
display: inline;
float: left;
}

.grid_5 {width: 43%;
margin-right:5%;
margin-left:10px;
display: inline;
float: left;
}

.grid_2 {width: 140px;
display: inline;
float: left;
margin-left: 13px;
margin-right: 13px;}

#about p { font-weight:100;}

strong.zitat{ font:italic #CCC;}




.skill{
	-webkit-transition: all .3s ease-out; 
   	-moz-transition: all .3s ease-out; 
   	-o-transition: all .3s ease-out; 
   	transition: all .3s ease-out;
	position:relative;
	min-height:140px;
	max-width:140px;
	height:100%;
	margin:0 auto;
	margin-bottom:26px;
}
.skillZoom{
	-webkit-transition: all .3s ease-out; 
   	-moz-transition: all .3s ease-out; 
   	-o-transition: all .3s ease-out; 
   	transition: all .3s ease-out;
}
img.skillZoom, img.skillBase{
	position:absolute;
	min-width:100%;
	max-height:100%;
	max-width:100%;
}
.skillText{
	text-align:center;
	position:absolute;
	width:100%;
	top:58px;
}

.skill:hover .skillZoom{
	-moz-transform: scale(1.07);
   	-webkit-transform: scale(1.07);
   	-o-transform: scale(1.07);
  	transform: scale(1.07);
   	-ms-transform: scale(1.07);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=2, M12=-0, M21=0, M22=2);
}










#arbeiten{font: inherit;font-family: 'Raleway', sans-serif;
 margin:0; 
 padding:0; 
 width:100%;
 position:relative;}

.text-project {font-family: 'Raleway', sans-serif;
width: 45%;
margin-right:5%;
margin-left:10px;
display: inline;
float: left;
}

#arbeiten li{position: absolute;
display: block;}
#arbeiten li .titel{position: absolute;
text-align:center;}
#arbeiten li.drehen .titel{
background-size: 100%;
display: block;
top: 31px;
left: 31px;
width: 112px;
opacity:0.95;
height: 112px;
background: transparent url('images/label-bg-ill.png') no-repeat left top;
}

#arbeiten li h2{display: block;
margin: 45px 0 0 0;
font-family: 'Raleway', sans-serif;
font-weight:800;
font-size: 14px;
color: #565758;
text-transform: uppercase;
line-height:12px;}

#arbeiten li h3{margin: 0 0;
display: block;
font-family: PTSansBold, sans-serif;
font-size: 11px;
color: #dd9d5e;
text-transform: uppercase;}

#arbeiten li a {
	margin: 0;
padding: 0;
border: 0;
font-size: 12px;
font: inherit;
vertical-align: baseline;
	position: relative;
display: block;}



/*********************************************Arbeit näher beschrieben*************************************************/


#content-arbeiten1{position: relative;
margin: -40px 0 0 0px;
padding: 0 40px;
width: auto;
height: 100%;
min-width: 593px;
overflow: hidden;}

#secondary-content a{color: #DD9D5E;}
#secondary-content a:hover{color:#630;}
#lead-image-container {max-width: 100%;}

.project-page #content-arbeiten{padding: 0 0;
min-width: 593px;}

.project-page .image-wrapper{text-align: center;}

.content-container{margin: 0 auto;
max-width: 1012px;}

.project-page #content-arbeiten .content-container + .image-wrapper, .project-page #content-arbeiten .image-wrapper + .image-wrapper{margin: 2px 0 0 0;}

.project-page #lead-image-container{display: inline-block;
position: relative;
margin: 52px 0 0 0;
width: 1012px;}

.project-page #lead-image-container .image{width: 100%;
height: auto;}

.image-container{display: inline-block;
margin: 26px auto 0 auto;
width: 100%;
}

.image-container img{
width: auto !important;
  height: auto !important;
  max-width: 100%;
}

.image-caption{margin: 8px 0 0 0;
text-align: center;
font-family: PTSans, sans-serif;
font-size: 15px;
color: #565758;
line-height: 18px;}

.project-page #primary-content{float: left;
margin: 22px 0 0 0;
width: 47%;
font-family: PTSans, sans-serif;
font-size: 15px;
color: #565758;
line-height: 18px;}

.project-page #secondary-content{float: left;
margin: 22px 0 0 5%;
width: 47%;
font-family: PTSansBold, sans-serif;
font-size: 15px;
color: #565758;
line-height: 18px;}

#secondary-content p{ font-weight:bold;}


/*********************************************Video im iPhone*************************************************/

#pictures-video-wrap,#play-video-wrap{ background:url(images/kind/A-iPhone.png) no-repeat; padding:50px 50px; margin-top:20px; margin-left:38%;
border-radius:2px;width:238px;}
#pictures-video-wrap{top:60px;height:482px; width:270px;}
#play-video-wrap{position:absolute;top:60px;height:482px; width:270px;  }




.pictures-video,.play-video{height:482px; width:192px; margin: -43px 0px 0px -25px;}



/* contact
--------------------------------------------- */
#contact p{ display: none;}

#contact{ margin:0 auto; width:100%; }

p.contact { text-align:center;}
#contact > form {float:left;
text-align:center;
	margin:10px auto 60px auto;
	width:100%;
	padding:0px 0 90px 0;

}
#contact form input, #contact form textarea {
	padding: 15px 0px 15px 15px;
	font-family:'Raleway', sans-serif; 
	font-size: 18px;
	color: #6f6f6f;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.07);
	border-radius:6px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); 
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); 
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: background-color 0.2s ease; 
	-webkit-transition: background-color 0.2s ease; 
	-moz-transition: background-color 0.2s ease; 
	-o-transition: background-color 0.2s ease;
}

#contact form input:focus, #contact form textarea:focus {
	color:#363636;
	background:rgba(255, 255, 255, 0.8);
	-moz-box-shadow:0px 0px 9px #CCC; 
	-webkit-box-shadow:0px 0px 9px #CCC;

}
#contact form input {
	width:70%;
	display:block;
	margin:0px auto 10px auto;
}

#contact .nachrichten-daten{ width:70%; margin:0 auto; }
#contact form textarea {  clear:both;
	width:70%;
	height:140px;
	display:block;
	margin:0px auto 10px auto;
	resize:none;

}


#contact .nachrichten-daten p { 
	width:68%;
	color:#6b6b6b;
	text-shadow: #e9e9e9 0 1px 0;
	font-size:13px;
	font-family:'Raleway', sans-serif;
	line-height:20px;
}


#contact .button { 
	padding:15px 0px 15px 0px;
	margin:30px auto 0px auto;
	display:block;
	font-size:15px;
	font-weight:bold;
	text-align:middle;
	border-radius:4px;
	width:72%;
	font-family:'Raleway', sans-serif; 
	background:#DD9D5E;
	border:none;
	border-bottom:2px solid #A37445;
	color:#fff;
	
}
#contact .button:hover { opacity:0.9; filter: alpha(opacity=90); -moz-opacity: 0.9 }
#contact .button:active {
	border-top:1px solid #A37445;
	border-bottom:none;
	background:#DD9D5E;
}
.fehler { text-align:center; color:#F00;}

.fehler strong{ font-weight:bold;}




@media only screen and (max-width: 1024px) {
/***************************************************Menue Mobile*********************************************************/

 nav { display:table; margin:-10px 0 0 -40px;}
nav a{ color:#FFF; text-transform: uppercase; font-size: 13px;padding: 9px 12px;}
nav a:hover{ color: #DD9D5E;}
nav ul {}

nav li { float:left; 
		}
			
.jMenu {
    display: none;
}
 
#hellom { display: none;}

/***************************************************HELLO*********************************************************/
#hello{margin:0 auto;width:100%; height:100%}

	.hello-box{ margin-left:15%;}
	
	.hidden{ display:none;}
	
	img.image{ float:left; }
	
	#hello h1.silva{ 
	color: #999; 
	margin:35% auto 0 auto;
	padding: 0 0;}
	
	#hello strong{font-family: 'Raleway', sans-serif;font-weight:300; }
	#hello strong b{ color:#DD9D5E; font-weight:500;}

	#hello strong.silva{ font-size:16px;}
	#hello strong.designer{ font-size:24px;}
	#hello strong.germany{ font-size:12px;}
	
	
/*********************************************about*************************************************/
#about h1 {
font-size:40px;
line-height: 40px;
}

.skill{
	min-height:100px;
	max-width:100px;
	font-size:12px;}

.skillText{
	top:38px;}

.grid_2 {width: 100px;}

/*********************************************Preise bei Work*************************************************/

#preise{ width:48%; float:left;}
#preise .bild { width:22%; float:left; margin-right:10px;}
#preise .bild img{ max-width:80px; max-height:110px;}
/*********************************************Arbeit näher beschrieben*************************************************/


#content-arbeiten1{position: relative;
margin: -40px 0 0 0px;
padding: 0 0px;
width: 100%;
height: 100%;
overflow: hidden;
min-width:50px;}

#lead-image-container video{
width: auto !important;
height: auto !important;
max-width: 97%;}

#pictures-video-wrap{ display:none;}

.image-wrapper{ margin:0 10px;}

.image-container img{
width: auto !important;
  height: auto !important;
  max-width: 100%;
}

.image-caption{
font-size: 14px;
}

.project-page #primary-content{
margin: 22px 0 0 10px;
width: 45%;
font-size: 14px;}

.project-page #secondary-content{
margin: 22px 0 0 5%;
width: 47%;
font-size: 14px;}

.image-caption p { margin: 0 8px 0 8px;}

}

@media only screen and (max-width: 677px) {
	
	/*********************************************Preise bei Work*************************************************/

#preise{ width:48%; float:left;}
#preise .bild { width:39%; float:left; margin-right:10px;}
#preise .bild img{ max-width:110px; max-height:150px;}



	a.sprache{ margin:2px 10px 0 10px;}
	
	#about h1 {
font-size:30px; 
}
	#pictures-video-wrap{ display:none;}
	
	.image-wrapper{ margin:0 5px;}
	
	

.project-page #secondary-content a{
line-height: 20px;
}

#hellom { display: table;}
#hello { display: none;}

#workcopyright{ display:none;
	
}
#copyrightabout{
	
	position: inherit;
	float:right;
	margin-right: 34px;
	bottom: 8px;
	height: auto !important;
	width: auto !important;
}

/* contact
--------------------------------------------- */

#contact form input {
	width:90%;
	
}

#contact .nachrichten-daten{ width:90%;}
#contact form textarea {
	width:90%;
	

}
#contact .button { 
	width:92%;

	padding:15px 0px 15px 0px;
	margin:30px auto 0px auto;
	display:block;
	font-size:15px;
	font-weight:bold;
	text-align:middle;
	border-radius:0px;

	font-family:'Raleway', sans-serif; 
	background:#DD9D5E;
	border:none;

	color:#fff;
	outline:none;
	
}







	}
	
	
	@media only screen and (max-width: 515px) {
		
		/*********************************************Preise bei Work*************************************************/
.text-project{ width:90%; float:left; margin-left:15px;}
#preise{ width:95%; float:left;margin-left:5%; margin-bottom:15px; text-align:center;}
#preise .bild { width:39%; margin-left:10px;}
#preise .bild img{ width:100%; height:100%;}
	
h2.mobiltext { display: table;
text-align: center;
font-size:24px;
margin:20px auto -20px auto;}	
	.project-page #primary-content{float: left;
margin: 22px 5px 0 5px;
width: 99%;
font-family: PTSans, sans-serif;
font-size: 14px;
color: #565758;
line-height: 20px; text-align:center;}

#about{ text-align:center;}
.project-page #secondary-content{float: left;
margin: 0px 5px 0 5px;
width: 99%;
font-family: PTSansBold, sans-serif;
font-size: 14px;
color: #565758;
line-height: 20px;
text-align:center;}


#workcopyright{ display:none;
	
}

/*********************************************About*************************************************/
#aboutcontent{ width:100%; clear:both;
}
.grid_6 {width: 98%;
display: inline;
float: left;
margin-top:30px;
margin-left:2%;
}

.grid_5 {width: 90%;
margin-right:5%;
margin-left:10px;
display: inline;
float: left;
}

.grid_2 {width: 90px;
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px; text-align:left;}

section#about .text-project{ display:none;}



#about h2.skills{ margin-left:0px; margin-bottom:15px;}
.skill{
	-webkit-transition: all .3s ease-out; 
   	-moz-transition: all .3s ease-out; 
   	-o-transition: all .3s ease-out; 
   	transition: all .3s ease-out;
	position:relative;
	min-height:140px;
	max-width:140px;
	height:100%;
	margin:0 auto;
	margin-bottom:-20px;
}

.skillText{
	text-align:center;
	position:absolute;
	width:100%;
	font-size:10px;
	top:35px;
}

/*******************************************FOOTER STARTS HERE*******************************************/




#copyrightabout{
	
	position: inherit;
	float:right;
	margin-right: 34px;
	bottom: 8px;
	height: auto !important;
	width: auto !important;
}


	}
	


	/*/ ----- OLD BROWSER ----- /*/
#IE-you-are-drunk-please-go-home{
	display:none;
	visibility:hidden;
}