@font-face {
	font-family: headline_font;
	src: url(font.ttf);
}

@font-face {
	font-family: text_font;
	src: url(font_text.otf);
}			

.projects_container {
	position: relative;
	display: inline-block;
	left: 0%;
	width: 98%;
	margin-left: 1%;
	margin-top: 0.5%;
}

.image_container {
	position: relative;
	vertical-align: text-top;
	width: 20em;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin: 1em;
	transition: all .5s;
	display: inline-block;
}

.image_container:hover {
	width: 22em;
	margin: 0em;
}

.text_container {
	text-align: center;
	padding: 10px 20px;
	font-family: text_font;
	color: #000000;
}

.text {
	margin: 3em 0 3em 2%;
	padding: 1em 0 1em 1em;
	font-family: text_font;
	border-left: 5px solid #000000;
	background-color: rgba(86, 255, 0, 0.2);
}

.projects_headline {
	margin: 0 2% 0 2%;
	font-family: headline_font;
	border-bottom: 5px solid #004400;
	font-size: 1.5em;
}

.headline {
	position: absolute;
	background-color: #002500;
	top: 0%;
	left: 0%;
	right: 0%;
	color: #ffffff;
	font-family: headline_font;
	font-size: 3em;
	padding: 1em 1em 0em 2%;
	border-bottom: 5px solid #000000;
}

.content {
	position: absolute;
	background-color: #ffffff;
	top: 7em;
	left: 0%;
	right: 0%;
	bottom: 0%;
}

@media screen and (max-width: 1024px) {

.headline {
	font-size: 2em;
}

.content {
	top: 5em;
}


.text {
	margin: 1em 0 2em 2%;
	padding: 1em 0 1em 1em;
}
}

a {
	text-decoration: none;
}