@charset "windows-1252";   
@import url('fonts/fonts.css');
* {margin:0; padding:0;}  
body {font-size:16px; font-weight:300; font-family:museo_sans_500regular,proxima-nova, helvetica, arial; background-color:#FFF;}
a img {border:0;}

object {z-index:0;}		
 
container:before {content:''; display:block; position:absolute; width:100%; background:#FFF; height:40px;}
container {display:block; position:relative; margin:0; border:0px solid #CCC; border-bottom:0px dotted #FFF;} 
  
header {width:100%; margin:0 auto; background-color:#FFF;}	 
main p {margin-bottom:20px;}
#hdr:before {content:''; display:block; position:absolute; top:50px; width:100%; background:none; height:40px; opacity:.9; border-bottom:2px solid #000;}
#hdr {clear:both; padding:0; margin:0; position:relative; overflow:hidden; height:140px;}	
#hdr h1 {font-size:16px; display:inline; float:left; margin-left:20px; position:absolute; top:30px;}
#hdr h1 a {display:block; height:70px;}
#hdr h2	{font-size:12px; display:block; clear:left; padding:0 10px 0 25px; position:absolute; top:100px; font-weight:300; letter-spacing:2px;} 
 
#nav {display:block; position:fixed; top:130px; width:100%; height:24px; z-index:9999; background:#EEE; border:2px solid #000; border-width:2px 0; font-size:15px;} 
#nav:hover {opacity:1!important;} 
#nav a {display:inline-block; position:relative; background:#EEE; top:-9px; color:#000; padding:10px 30px 10px 10px; border:2px solid #000;}
#nav a:first-child {margin-left:25px;}
#nav a:hover, #nav a.on {color:#FFF; background:#369; border-color:#369; text-decoration:none;}		 

slides {display:table; width:120%; z-index:9999; margin:10px 0;}
slides slide {display:table-cell; width:16%; border:2px solid #000; border-width:1px 0 1px 0;}
slides slide img {display:block; width:100%; height:auto;}
slides:nth-of-type(1) {margin-top:40px;}	
slides:nth-of-type(2) {margin-left:-20%;}
slides:nth-of-type(2):hover {animation:scroll-r 1s linear;}
slides:nth-of-type(1):hover,slides:nth-of-type(3):hover {animation:scroll-l 1s linear;}
@keyframes scroll-l {
	0% {margin-left:0;}
	50% {margin-left:-20%;}
	100% {margin-left:-20%;}
}
@keyframes scroll-r {
	0% {margin-left:-20%;}
	50% {margin-left:0;}
	100% {margin-left:0;}
}
																						  
 
section {position:relative; overflow:hidden; z-index:1; opacity:1; padding:180px 0 0 0; background:url('../img/_spc.gif');}
section#contact {padding-bottom:180px;}
 
section article {text-align:left; margin:0; padding:35px 20px 30px 25px; overflow:hidden; background:#FFF; border:2px solid #000;}

section article h1 {text-transform:uppercase; font-size:30px; font-weight:normal; margin:0;}		
section article h2 {font-size:20px; font-weight:normal; margin:20px 0 0px 0;}	
section article ul li {display:inline; float:left;}
section article p {padding:0 0 20px 0; line-height:20px; font-weight:normal;}	

.item > img {box-shadow:4px 4px 3px #CCCCCC; margin-bottom:8px;}
.item {font-size:14px;}		   

#about {margin-top:800px; clear:both; position:relative;}

#about desc, clients {color:#000; /*font-family:'Lucida Console';*/ font-size:.8em; text-align:justify;}  

#about item:nth-of-type(1) h2:first-child:after {display:inline-block; content:'(Sascha)'; margin-left:5px;} 

#about clients li {margin:2px 10px 2px 0; line-height:18px;}
#about clients li:before {display:inline-block; content:'•'; margin-right:10px;}

#about article {display:table; width:100%;}
#about article > div > item:nth-of-type(1) {display:table-cell; width:55%; padding-right:30px;}
#about article > div > item:nth-of-type(2) {display:table-cell; width:45%;}

#portfolio article ul {display:table; width:100%;}
#portfolio article ul li {display:table-cell; width:50%; position:relative;}	
#portfolio article ul li .item:before {content:''; display:inline-block; float:left; width:3px; height:250px; background:#69c url('../img/bg_line.gif') center center; margin:0 20px 0 10px; border:1px solid #369; border-radius:0%;}
#portfolio article ul li .item {display:inline-block; width:380px; margin:10px auto 20px auto; font-size:12px;}

#portfolio article ul li .item img {display:block; margin:15px 0 15px 0;}
#portfolio article h2 {font-size:24px;} 
#portfolio article h4 {padding-right:50px; font-weight:normal;}

#contact article {background:#369 url('../img/bg_contact.jpg') no-repeat center center; background-size:cover; color:#FFF;}
#contact fieldset {border:0; margin:10px 0px;}
#contact fieldset:last-child {margin-top:15px;}
#contact label {color:#FFF; font-size:15px; display:inline-block; width:160px;}
#contact input[type='text'] {font-size:15px; padding:3px 5px; margin-right:30px; border-radius:1px; width:238px;}
#contact input[type='checkbox'] {margin-left:10px;}
#contact textarea {width:400px; font-size:15px; padding:3px 5px; margin-right:30px; border-radius:1px;}
#contact input, #contact textarea {background-color:#FFF;}
#contact input[type='button'] {border-radius:1px; padding:3px 5px; margin:20px 0; cursor:pointer; vertical-align:top;}
#contact input[type='button']:hover {border:3px solid #00FF00; background:#CCFFCC; padding:2px 4px; font-weight:bold; letter-spacing:-1px;}
#contact input[type='submit'] {width:0px; height:0px; position:relative; top:-9000px;}

	
@media screen and (min-width:1200px) {	   											 
	#about article {width:1000px; margin:0 auto;} 
	#portfolio article {width:1000px; margin:0 auto;}   
	#contact article {width:1000px; margin:0 auto;} 
	#about article,#portfolio article,#contact article {border-left:2px solid #000; border-right:2px solid #000;}						  
}				
					  										  
@media screen and (max-width:720px) {	
	header {top:10px;}
	slides:nth-of-type(1) {margin-top:0px;}
	container #nav {display:block; width:100%; position:fixed; top:0; left:0; text-align:center;}
	container #nav > a:link {display:inline-block; width:25%; text-decoration:none; margin:0; opacity:1!important; padding:10px;}
	section {border-width:2px 0;}
	#about {margin-top:120px;}	 
	#about article {display:block; width:auto;} 
	#about article > div > item {display:block!important; width:100%!important;}
	#portfolio article ul li {display:block; width:100%; }	  
	#portfolio article ul li .item:before {display:none;}
	#contact textarea {width:100%;}
}