html {
	font-family:  'ronnia', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5em;
	color: #404040;
	background-color: #FFF;}
	
body {margin: 1.5em;
    text-align: center;}
	
	
/* Allgemeine Typo*/	
	
a {
	color: #404040;
	text-decoration: none;}
	
a:hover, button:hover, a:hover h2, a:hover h1, textarea:hover {color: #083f79;}

strong {font-weight: 700;}		

h1, h2, h3{
    font-weight: 300;
	/*letter-spacing: .03em;
	letter-spacing: .02em;*/
	color: #454545;
	margin: 0;}	
	
h1 {
    font-size: 28px;
	line-height: 1.25em;
    margin: 0 0 .75em;}  

h2, a.turn {
    font-size: 24px;
	line-height: 1.25em;}	

h3 {
    font-size: 18px;
	line-height: 1.25em;
    margin: 1.5em 0 0;}

p, dl, #home a:nth-of-type(2) h2 {margin: .75em 0 0;}

time {margin: 1em 0 0}	

dt {clear: both;
	text-align: right;
	margin-right: 1em;
	width: 15%;}
	
dd {margin: 0;
	width: 80%;}

.portfolio dt {width: 30%;}
.portfolio dd {width: 60%;}
	
dt, dd {
	float: left;
	margin-top: .375em;}	
	
	
/* Section Styling */ 		

section, #rightofway, #touchpoint, #industrie, section.turn:target, #musicalchairs:target {
    text-align: left;
	float: left;
    /*display: inline-block;*/
    position: relative;
    vertical-align: top;
	width: 235px;
	height: 338px;
	padding: 0 15px 15px 0;
	margin: 10px;}

section.turn, .project {
    padding: 15px;
    width: 220px;
    height: 323px;
}

.bio {
	width: 490px;
	height: auto;}	
	
.quer {
	width: 490px;
	height: 323px;
    padding: 15px;}		


/* Content */
	
h2 {
	position: relative;
	z-index: 2;}	
	
section p a, section dd a, .back {
	background-position: right .275em;
    background-size: 1em;
    background-repeat: no-repeat;
    padding: 0 1.1em 0 0;
    background-size: .9em;
	margin: 0;}	
	
.back {
    background-image: url("bilder/back.svg");}	

section a h2, section p a, section dd a {
    background-image: url("bilder/forward.svg");}		
	
.back, #home h2  {
	background-position: left .275em; 
    padding: 0 0 0 1.2em;} 		
	
section img, section iframe {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;}	

section.project:hover img, section.project:hover time, section.turn:hover img, section.turn p,
section.project:target img, section.project:target time, section.turn:target img, section.turn p {
    display: none;}	

section:hover p, section:hover .turn, section:target p, section:target .turn {
    display: block;}			



/* Portfolio */

#musicalchairs h2 {
    color: white;}

#musicalchairs:hover h2, #musicalchairs:target h2 {
    color: #404040;}