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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


	body {
		background: #fff;
		font: 14px/21px "Hind",HelveticaNeue,"Helvetica Neue",Helvetica,Sans-Serif;
		color: #33384c;
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: 100%;
	}


	h1, h2, h3, h4, h5, h6 {
		color: #33384c;
		font-family: "Hind",HelveticaNeue,"Helvetica Neue",Helvetica,Sans-Serif;
		font-weight: 700; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 32px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 10px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 30px; margin-bottom: 4px;}
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { 
		line-height: 1.5;
	}

	a {
		color: #33384c;
	}

	
	.headline {
		color: #fff;
		margin-top: 25%;
		font-weight: 800;
	}

	.center {
		text-align: center;
	}

	.foto {
		width: 100%;
		background: url('foto.jpg') no-repeat center center fixed;
		height: 699px;
		background-size: cover;		
	}

	.project {
		position: relative;
		width: 100%;
		margin: 64px 0;
	} 

	.project a span {
		display: block;
		position: absolute;
		width: 60%;
		left: 20%;
		top: 50%;
		background-color: rgba(34, 34, 34, 0.95);
		opacity: 0;
		-webkit-transition: all 0.5s ease;
    	-moz-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    	transition: all 0.5s ease;
    	border-radius: 6px;
    	padding: 10px 0;
	}

	 .project a span h4, .project a span p {
		color: #fff;
	}

	.project a:hover span {
		opacity: 1;
	}

	.project a img {
		display: block;
		width: 100%;
	} 

	.divider {
		margin: 31px auto 32px auto;
		width: 100%;
		border-top: 2px solid #33384c;
	}

	.cta {
		border: 4px solid #a9d8b2;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		display: inline-block;
		font-size: 21px;
		text-decoration: none;
		cursor: pointer;
		margin-bottom: 20px;
		line-height: normal;
		padding: 8px 10px;
		color: #a9d8b2;
		font-family: "Hind", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 700;
		left: 50%;
	}

	.cta:hover {
		color: #A3D1AC;
		border: 4px solid #A3D1AC;
	}

	.divider {
		margin: 63px auto 64px auto;
		width: 100%;
		border-top: 1px solid #d8d8d8;
	}

	.projects, .technicalSkills {
		width: 100%;
		background-color: #fff;
		padding: 64px 0;
	}

	.projects h2 {
		margin-bottom: 0;
	}

	.header {
		width: 100%;
	}


	.workEducation {
		width: 100%;
		background-color: #f2f3f5;
		padding: 64px 0;
	}

	.personalSkills {
		width: 100%;
		background-color: #434242;
		padding: 64px 0;
	}

	.contact {
		width: 100%;
		background-color: #fff;
		padding: 128px 0;
	}


	.personalSkills h2, .personalSkills h5, .personalSkills p {
		color: #fff;
	}

	.logos {
		width: 100%;
	}

	@media only screen and (max-width: 952px) {
		.foto {
			background-size: contain;
			background-position: center top;
			height: 412px;
		}

		.headline {
			margin-top: 15%;
			margin-left: 10%;
		}

		.foto h1 {
			font-size: 35px;
			line-height: 40px;
		}

	}	


	@media only screen and (max-width: 773px) {
		.project a span {
			width: 50%;
			left: 25%;
		}

		.project a span h4 {
			margin-bottom: 0;
		}
		.project span p {
			display: none;
		}	

		.foto {
			height: 300px;
		}
		
	}

	@media only screen and (max-width: 664px) {
		.headline {
			margin-top: 15%;
			margin-left: 20%;
		}

		.foto h1 {
			font-size: 28px;
			line-height: 34px;
		}

		.foto {
			height: 250px;
		}

	}

	@media only screen and (max-width: 508px) {
		.foto h1 {
			font-size: 21px;
			line-height: 24px;
		}

		.headline {
			margin-top: 10%;
		}

		.foto {
			height: 150px;
		}
	}