@font-face {
    font-family: 'exolight';
    src: url('../fonts/exo-light-webfont.eot');
    src: url('../fonts/exo-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-light-webfont.woff') format('woff'),
         url('../fonts/exo-light-webfont.ttf') format('truetype'),
         url('../fonts/exo-light-webfont.svg#exolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exolightitalic';
    src: url('../fonts/exo-lightitalic-webfont.eot');
    src: url('../fonts/exo-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-lightitalic-webfont.woff') format('woff'),
         url('../fonts/exo-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/exo-lightitalic-webfont.svg#exolightitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'exoregular';
    src: url('../fonts/exo-regular-webfont.eot');
    src: url('../fonts/exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-regular-webfont.woff') format('woff'),
         url('../fonts/exo-regular-webfont.ttf') format('truetype'),
         url('../fonts/exo-regular-webfont.svg#exoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'droid_sansbold';
    src: url('../fonts/droidsans-bold-webfont.eot');
    src: url('../fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droidsans-bold-webfont.woff') format('woff'),
         url('../fonts/droidsans-bold-webfont.ttf') format('truetype'),
         url('../fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'droid_sansregular';
    src: url('../fonts/droidsans-webfont.eot');
    src: url('../fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droidsans-webfont.woff') format('woff'),
         url('../fonts/droidsans-webfont.ttf') format('truetype'),
         url('../fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* CSS RESET */
*																			{ margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 							{ margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent;}
html, body 																	{ min-height: 100%; height: auto; height: 100%;}
ol, ul 																		{ list-style: none;}
blockquote, q 																{ quotes: none;}
blockquote:before, blockquote:after, q:before, q:after						{ content: ''; content: none;} /* remember to highlight inserts somehow! */
ins 																		{ text-decoration: none;}
del 																		{ text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */
table 																		{ border-collapse: collapse; border-spacing: 0;}

@media screen, projection {	
/* ---------------------------------------------------- */
/* --------------------- STANDARDS -------------------- */
/* ---------------------------------------------------- */
/* Revision: AD, Sascha Rudolph --> 30.07.2012, Version 2.3 - Handmade in Germany */

body									{ font-family:'droid_sansregular'; background:url(../images/bg-body.jpg) no-repeat top center #fff; color: #2c2c2c; line-height: 150%; font-size: 76%;}
p 										{ font-size: 1em; margin-bottom:20px; line-height: 140%;}
ul 										{ list-style:none;}
a, a:visited							{ text-decoration: underline; color: #868686;}
a:hover	 								{ text-decoration: none; color: #868686;}
/* a:hover img	 						{ -moz-opacity: 0.85; opacity: 0.85; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85);} */
/* a[href$=".pdf"]						{ padding-right: 20px; background: url(pdf.png) no-repeat center right;} */
.float-left								{ float:left;}
.float-right							{ float:right;}
.hidden									{ display:none !important;}
.clear									{ clear: both; font-size: 0.0001em; line-height: 0.00001em;}
:focus 									{ outline: 0;} /* remember to define focus styles! */
.noM									{ margin:0 0 0 0!important;}
.noML									{ margin-left:0!important;}
.noMR									{ margin-right:0!important;}
.noP									{ margin:0 0 0 0!important;}
.noPL									{ margin-left:0!important;}
.noPR									{ margin-right:0!important;}

.MR35									{ margin-right:35px;}
::-moz-selection { color:#fff;  background:#ff4700; }
::selection      { color:#fff;  background:#ff4700; } 

/* ----------------- */
/* - LAYOUELEMENTS - */
/* ----------------- */

/* GENERAL */
div#container 	    				{ width:1000px; margin:0 auto; }
header								{ height:235px; position:relative; z-index:0;}
div#content	 						{}

/* HEADER */
a#branding							{ padding:35px 0 0 15px; display:block; width:200px;}
a#branding span								{ display:block; text-indent:-9999px; overflow:hidden;}

a#mobile							{ display:none;}
/* MAIN-NAVIGATION */
nav  		   					{ position:absolute; top:121px; right:20px; font-family:'exoregular';}
nav a   						{ display:block; font-size:1.3em; transition:all 0.3s ease-in-out; padding-left:25px; text-decoration:none; float:left;}
nav a:hover, nav a.active 					{ color:#ff3c00;}

/* HEADLINES */

div#content h1 							{ padding:20px; color:#474747; font-size:2.1em; font-weight:normal; font-family:'exolight'; background: #ffffff; background: -moz-linear-gradient(left,  #ffffff 0%, #ededed 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#ededed)); background: -webkit-linear-gradient(left,  #ffffff 0%,#ededed 100%); background: -o-linear-gradient(left,  #ffffff 0%,#ededed 100%); background: -ms-linear-gradient(left,  #ffffff 0%,#ededed 100%); background: linear-gradient(to right,  #ffffff 0%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 );}
div#content h1 a						{ font-family:'exolightitalic'; margin-top:-10px; transition:all 0.3s ease-in-out; font-size:0.6em; color:#ff3c00; text-decoration:none; float:right; display:inline-block; padding:10px;}
div#content h1 a:hover					{ background:#ff3c00; color:#fff;}
body#photography h1						{ margin-bottom:20px;}

div#content h3 							{ padding:10px 10px 10px 15px; color:#474747; font-size:1.3em; font-weight:normal; font-family:'exolight'; background: #ffffff; background: -moz-linear-gradient(left,  #ffffff 0%, #ededed 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#ededed)); background: -webkit-linear-gradient(left,  #ffffff 0%,#ededed 100%); background: -o-linear-gradient(left,  #ffffff 0%,#ededed 100%); background: -ms-linear-gradient(left,  #ffffff 0%,#ededed 100%); background: linear-gradient(to right,  #ffffff 0%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 );}
div#content h4 							{ margin-bottom:20px; color:#ff3c00; font-size:1.3em; font-weight:normal; font-family:'exolight';}

body#contact #imagecontent				{  background:none;}

/* ----------- */
/* - CONTENT - */
/* ----------- */

div.contentcolumn 	 						{ width:300px; float:left; margin-right:20px;}
div.contentcolumn .last						{ margin-right:0;}

div#recent									{ background:url(../images/recent-works/recent-klugzumflug.jpg) no-repeat;height:351px; width:998px; margin-bottom:10px;}
div#recent-teaser							{ margin-bottom:80px;}

div.image									{ position:relative; z-index:0; border:1px solid #fff; width:332px; height:168px;}
div.image a									{ background:url(../images/zoom.png) center no-repeat; position:absolute; z-index:10; display:block; height:100%; width:100%; text-indent:-9999px;opacity:0; -webkit-transition: opacity 0.5s ease-in-out;-moz-transition: opacity 0.5s ease-in-out ;-o-transition: opacity 0.5s ease-in-out;-ms-transition: opacity 0.5s ease-in-out;transition: opacity 0.5s ease-in-out}
div.image a:hover							{ opacity:1;}
div.image.left								{ float:left;}
div.image.nobordl							{ border-left:none!important;}

ul#brandings a								{ text-indent:-9999px; background:url(../images/logos.png) no-repeat;-webkit-transition: background 0.1s ease-in-out;-moz-transition: background 0.1s ease-in-out ;-o-transition: background 0.1s ease-in-out;-ms-transition: background 0.1s ease-in-out;transition: background 0.1s ease-in-out; display:block; padding-top:11px; float:left;}

ul#brandings a.xing						{ width:105px;}
ul#brandings a.xing:hover				{ background-position:0 -29px;}

ul#brandings a.behance						{ width:122px; background-position:-106px 0;}
ul#brandings a.behance:hover				{ background-position:-106px -29px;}

ul#brandings a.deviantart					{ width:142px; height:18px; background-position:-229px 0;}
ul#brandings a.deviantart:hover				{ background-position:-229px -29px;}

ul#brandings a.fivehundretpx						{ width:70px; background-position:-375px 0;}
ul#brandings a.fivehundretpx:hover					{ background-position:-375px -29px;}


/* Galeries */

div#about									{ background:url(../images/sascha-rudolph-profile.jpg) no-repeat top; padding:20px; color:#fff; height:400px;}
div#about section							{ width:480px; margin-bottom:40px; display:block;}
div#about section a							{ color:#fff;}

div.referenz, div.instagram					{ float:left; margin:0 42px 20px 0;}
div.referenz.nospace, .nospace				{ margin-right:0!important;}
body#webdesign div.image					{ width:303px; height:131px; border:1px solid #fff;}
body#photography div.image					{ width:303px; height:200px; border:1px solid #fff;}

body#photography div.instagram div.image	{ width:303px; height:303px; border:1px solid #fff;}

div.barrow									{ margin-bottom:40px;}


/* Webdesign References */
p.project-headline							{ font-family:'exolightitalic';  font-size:1.6em; color:#ff3c00;font-weight:lighter; margin-bottom:20px;}

div#imagecontent						{ float:left; background:#fff; width:660px; padding:10px; margin-right:30px;}
div#imagecontent img					{ margin-bottom:15px; border-bottom:1px solid #dbdbdb; padding-bottom:20px;}
div#imagecontent img:last-child			{ border:none; padding-bottom:0; margin-bottom:0;}

div#bside								{ float:left; width:209px; padding:10px 20px; background:#f2f2f2; color:#666666; border-left:1px solid #ff3c00; background:url(../images/bg-partner.png) no-repeat right -300px; }

div#subcontent							{ background:url(../images/bg-partner.png) no-repeat top center #f6f6f6; padding:20px;}
body#clients div#content img			{ float:left; margin:0 22px 20px 0; border:1px solid #e2e2e2;}
body#clients div#content img:hover		{ border:1px solid #ff3c00;-webkit-transition: border 0.5s ease-in-out;-moz-transition: border 0.5s ease-in-out ;-o-transition: border 0.5s ease-in-out;-ms-transition: border 0.5s ease-in-out;transition: border 0.5s ease-in-out;}
body#clients div#content img.last		{ margin-right:0;}

div#subcontent ul li					{ background:url(../images/bg-ul-li.gif) no-repeat 0 7px; padding:0 0 0 12px;}
div#subcontent ul						{ margin-bottom:20px;}

a.visit		{-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
											background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');background-color:#ededed;
											-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#ff3c00;font-size:13px;font-weight:bold;padding:6px 24px;text-decoration:none;
											text-shadow:1px 1px 0px #ffffff;}
											
div#topcontrol img				{ display:none;}
div#topcontrol					{ width:60px; height:30px; cursor:pointer; background:url(../images/top.gif) no-repeat;}
div#topcontrol:hover			{ background-position:0 -30px;}									
	
a.visit:hover	{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
				background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
				background-color:#dfdfdf;}
				
span.small				{ font-size:0.9em; font-style:italic;}				
/* definition-list */
dl											{ margin:0 0 0 0;}
dl dt										{ float:left; width:80px; font-weight:bold; margin:0 0 0 0;}


/* FOOTER */

footer								{ border-top:1px solid #c3c3c3; color:#b1b1b1; margin-top:80px;}
footer a							{ text-decoration:underline; color:#b1b1b1!important;}
footer a:hover,
footer a.active						{ text-decoration:none;}

footer span.spacer					{ padding-right:18px;}
footer span.spacer2					{ padding-right:8px;}
footer p, footer img				{ float:left; margin-right:40px;}

ul#subnav							{ float:right;}
ul#subnav li						{ display:inline;}
ul#subnav a							{ padding:0 2px;}
div#footerMain						{ width:960px; padding:15px 20px 0 20px; height:100px; margin:0 auto;}


}


/* --------- */
/* - PRINT - */
/* --------- */

@media print {
@charset "utf-8";
/* CSS PRINT */
body										{ font-size: 76%; font-family: Verdana; color: #000; line-height: 150%;}

ul#nav, ul#nav-add, form.Form, #recent, #recent-teaser, ul#subnav, #branding img, nav, .print, div.image a, h1 a, .btTop, div.instagram							{ display: none;}

.clear										{ clear: both; font-size: 0.0001em; line-height: 0.00001em;}

#branding									{ font-size:2em;}
h1											{ margin-bottom:20px; font-size:1em; text-transform:uppercase; color:#ccc;}
h2 strong									{ color:#f20000;}
h3											{ margin-bottom:15px; font-size:0.8em; color:#f20000;}
h3 strong									{ color:#f20000;}	

div#content									{ margin-top:3em;}
div.referenz								{ float:left; width:180px; margin:0 10px 10px 0!important;}
div.referenz img						{ height:70%; width:70%;}
div.referenz.nospace, .nospace				{ margin-right:0;}
/*div#contentMain a[href]:after 	{ content:" <"attr(href)">"; color: #888; font-style:italic; size:80%;} <-- Use for showing Links below images*/

#bside										{ margin-top:1em;}
p.project-headline							{ color:#FF3C00; font-size:1.3em;}
p 											{ font-size: 1em; line-height:150%; margin-bottom:15px;}
p strong									{ color:#ccc;}
a, a:visited								{ text-decoration: none; color: #f20000;}

footer										{ border-top:1ox solid #ccc; padding-top:20px; margin-top:20px;}
footer p									{ float:left; margin-right:40px;}
footer img									{ float:left;}

ul li										{ padding-left:20px; list-style-type:circle; list-style:inside;}
dl											{ width:300px; margin-bottom:15px; float:left; line-height:20px;}
dl dt										{ font-weight:bold; width:60px; float:left;}
dl dd										{ width:240px;}

}



@media only screen and (min-width: 480px) and (max-width: 1024px) and (orientation : landscape) {
#recent, #recent-teaser, .print, ul#brandings, footer img, a#branding					{ display:none;}
.clear										{ clear: both; font-size: 0.0001em; line-height: 0.00001em;}

div#container 	    			{ width:400px; margin:0 auto; }
div#about						{ width:360px; height:360px; background:#ff6c00;}
div#about section				{ width:330px;}
div#content h1								{ font-size:1.35em;}

div#footerMain					{ width:400px; margin:0 auto;}
div#footerMain p				{ margin-right:15px;}
div#footerMain p.nomargin		{ margin-right:0!important;}

a#mobile						{ padding:35px 0 0 15px; display:block; width:200px;}
a#mobile span					{ display:block; text-indent:-9999px; overflow:hidden;}

#content						{ margin-top:100px;}
nav								{ background:#fff; width:400px; padding:5px 0; position:static; top:60%; left:0%}
nav	a							{ float:none; margin:5px 0;}

body#photography div.referenz					{ float:none; margin:45px auto; height:250px;}
div.referenz					{ float:none; margin:0 auto; height:240px;}
div.referenz img					{ width:131.5%; height:131.5%}

div.image a						{ background:none;}

#imagecontent					{ float:none; width:340px!important;}
#imagecontent img				{ width:100%;}
#bside							{ float:none; width:320px!important;}

form.Form label, form.Form input, form.Form textarea, form.Form select
{ width:320px!important;}
body#webdesign div.image		{ width:99.5%!important; height:70%!important;}
body#webdesign div.image img		{ width:100%!important; height:100%;}

body#photography div.image		{ width:99.5%!important; height:100%!important;}
body#photography div.image img	{ width:100%!important; height:100%;}
	}

@media only screen and (max-width: 480px) {/* iphone */
#recent, #recent-teaser, .print, ul#brandings, footer img, a#branding					{ display:none;}
.clear										{ clear: both; font-size: 0.0001em; line-height: 0.00001em;}

div#container 	    			{ width:300px; margin:0 auto; }
div#content 	    			{ width:300px;}
div#about						{ width:260px!important; padding-bottom:30px!important; background:#ff6c00;}
div#about section				{ width:260px;}
div#content h1								{ font-size:1.15em;}

div#footerMain					{ width:320px;}

a#mobile						{ padding:35px 0 0 15px; display:block; width:200px;}
a#mobile span					{ display:block; text-indent:-9999px; overflow:hidden;}

#content						{ margin-top:100px;}
nav								{ background:#fff; width:300px; padding:5px 0; position:static; top:60%; left:0%}
nav	a							{ float:none; margin:5px 0;}

body#photography div.referenz					{ float:none; margin:0 auto; height:320px;margin-bottom:-50px!important; width:300px!important;}
div.referenz					{ float:none; margin:0 auto; height:210px;}
div.referenz img					{ width:131.5%; height:131.5%}

body#webdesign div.image		{ width:99.5%!important; height:140px!important;}
body#photography div.image img, body#webdesign div.image img		{ width:100%!important; height:100%;}

body#photography div.image		{ width:298px!important; height:200px!important; }
	

div.image a						{ background:none;}

#imagecontent					{ float:none; width:240px!important;}
#imagecontent img				{ width:100%;}
#bside							{ float:none; width:220px!important;}

form.Form label, form.Form input, form.Form textarea, form.Form select
{ width:220px!important;}

#subnav		{ float:none!important;}
div#subcontent a img		{ width:250px; height:108px}
}


@media only screen and (max-width: 320px) {/* iphone */
#recent, #recent-teaser, .print, ul#brandings, footer img, a#branding					{ display:none;}
.clear										{ clear: both; font-size: 0.0001em; line-height: 0.00001em;}

div#container 	    			{ width:400px; margin:0 auto; }
div#about						{ width:360px; height:360px; background:#ff6c00;}
div#about section				{ width:330px;}
div#content h1								{ font-size:1.35em;}

div#footerMain					{ width:440px;}

a#mobile						{ padding:35px 0 0 15px; display:block; width:200px;}
a#mobile span					{ display:block; text-indent:-9999px; overflow:hidden;}

#content						{ margin-top:100px;}
nav								{ background:#fff; width:400px; padding:5px 0; position:static; top:60%; left:0%}
nav	a							{ float:none; margin:5px 0;}

body#photography div.referenz					{ float:none; margin:0 auto; height:320px;}
div.referenz					{ float:none; margin:0 auto; height:240px;}
div.referenz img					{ width:131.5%; height:131.5%}

div.image a						{ background:none;}

#imagecontent					{ float:none; width:340px!important;}
#imagecontent img				{ width:100%;}
#bside							{ float:none; width:320px!important;}

form.Form label, form.Form input, form.Form textarea, form.Form select
{ width:320px!important;}

#subnav		{ float:none!important;}

}