/*  ---------------------------------------------------------------
    general style
    --------------------------------------------------------------- */

/* apply a natural box layout model to all elements  - http://www.paulirish.com/2012/box-sizing-border-box-ftw/*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box; 
            box-sizing: border-box;
 }

*:focus {
    outline: 0;
}



::-moz-focus-inner { padding:0; border:0 }  /* ! removes focus line */

html, body {
    width: 99%;
    min-height: 100%;
	font-size:1.2em; 
color:#000;
font-family:'Open Sans', sans-serif; 
font-weight: 400;
line-height: 1.0em;
letter-spacing: 1px;
}

.wrapper2 {
    margin: 15% auto 0;
}
.subtitel {
	font-size:0.7em; 
	}


a {
	text-decoration: none;
	color:#444;
	}
	
#verena {
	width:44%;
	height: auto;
	float: left;
	margin: 0 0 15% 5%;
	}
	
#verena img {
	border: 0;
	}
#nicolas img {
	border: 0;
	}
	
#nicolas { 
width:44%;
height: auto;
	float: right;
	margin: 0 5% 0 0;
}

@media only screen and (max-width: 800px) and (orientation: landscape){
	#verena {
	width:30%;
	height: auto;
	float: left;
	margin: 0 0 15% 100px;
	}

#nicolas { 
width:30%;
height: auto;
	float: right;
	margin: 0 100px 15% 0;
}


.subtitel {
	font-size:0.5em; 
	}
	
.wrapper2 {
    margin: 15% auto 0;
}

}


@media only screen and (max-width:48em) and (orientation: portrait) {
	
	.wrapper2 {
		  margin: 15% auto 0;
		}
		
	#verena {
		float: none;
		width:100%;
		margin: 0 0 15% 0;
		}
	
	#nicolas {
		float: none;
		width:100%;
		margin: 0 0 0 0;
		}
		
		#abstand {
	clear: both;
	}	
	}	
	
@media only screen and (max-width:30em) {
.wrapper2 {
		 margin: 0 auto 0;
	
		}

#verena {
		float: none;
		width:90%;
		  margin: 15% auto 50px;

		}
	
	#nicolas {
		float: none;
		width:90%;
		margin: 0 auto 0;
		}
	#abstand {
	clear: both;
	}	
	p {
		margin:0;
		padding:0;
		}
	}