/* Allgemeine Angaben
--------------------------------------*/
* {
	/* drinnen lassen -- wichtig! */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font: 100%/1.5 "Helvetica Neue",Helvetica,Verdana,Sans-Serif;
}

a {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px dotted;
}

a:hover {
	border-bottom: 1px solid;
}

img {
	max-width: 100%;
	height: auto;
}

h1 {
	font-weight: 100;
	font-size: 600%;
	line-height: 1.1;
	color: #fff;
}

h2 {
	font-weight: normal;
	font-size: 100%;
}

h3 { 
		font-weight: bold;
		padding: 10px;
}

article {
	padding: 10px 10% 20px 10%;
}

p, ul, figure {
	padding: 10px 10px;
}

blockquote {
	font-size: larger;
	font-style: italic;
}

/* Header
--------------------------------------*/

header {
	background-image: url(../p/ocean.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20px 10%;
}

.headerArticle {
	background-color: rgba(255, 255, 255, 0.7);
		min-width: 30%;
		max-width: 80%;
		margin: 20px auto;
		padding: 20px 20px 40px;
		box-sizing: border-box;	
}

.niepce {
	/* kreisForm via CSS generieren -- border-radius */

	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px 4px black;
	
}

section {
	padding: 20px 10%;
}

/* Footer
--------------------------------------*/

footer {
	padding: 5px 10% 5px 10%;
	background-color: black;
	color: white;
}

/* spezielle Angaben für Elemente mit Klassen
---------------------------------------------*/

.sand {
	background-image: url(../p/Sand-3.jpg);
		background-repeat: no-repeat;
		background-size: cover
}

.aufSand, .aufManhattan {
		background-color: rgba(255, 255, 255, 0.7);
			min-width: 30%;
			max-width: 80%;
			margin: 20px auto;
			padding: 20px;
			box-sizing: border-box;
}

.manhattan {
		background-image: url(../p/Buildings-NYC.jpg);
			background-repeat: no-repeat;
			background-size: cover
}

.mitSchatten {
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}