html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
body {
    font: normal 16px Segoe UI,Open Sans,San Francisco,PT Sans Caption,Verdana,Tahoma,sans-serif; color: #000;
    background: #0e1724 url(../jpg/bg.jpg) center center no-repeat fixed; background-size:cover;
}
#container { max-width: 1200px; margin:0 auto; padding: 0; }

header { padding: 3em; color: #fff; margin: 0 auto; }
header h1 { display: block; text-align: center; font-size: 2em; padding: 0; margin: 0 0 0.5em 0; clear: both; font-weight: 300; }
header h2 { display: block; text-align: center; font-size: 1.3em; padding: 0; margin: 0 0 0.5em 0; clear: both; font-weight: 300; }
header p { display: block; text-align: center; font-size: 1em; padding: 0; margin: 0 0 0.5em 0; }

.about, .past { padding: 2em; background: #ecf0f5; clear:both; text-align:justify; }
.past { color: #444; font-size: 0.9em; }
.past b { color: #727272; }

#projects { background: #fff; }
.project { padding: 0; clear:both; }
.project .block, .project .image { display: block; width: 50%; }
.project .image { float: left; }
.project .block { float: right; }
.project:nth-child(odd) .image { float: right; }
.project img { display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.project article { padding: 3em 3em 1em 3em; }

.project h2 { padding: 0; margin: 0 0 0.5em; font-size: 2em; font-weight: 300; }
.project p { padding: 0;  margin: 1em 0; text-align: justify; }
.project p.descr { font-size: 0.9em; }
.project a.button { display:inline-block; padding: 1em 1.5em; background:#2b3442; color:#fff; text-decoration:none; }
.project a.button:hover { background: #4b5462; }
.project a.button.top { display: none; padding: 0.7em 1.1em; font-size: 0.8em; }

.contact-us { display: block; text-align: center; color: #eee; padding: 5px; margin: 0; font-size: 0.95em; }
.contact-us li { display: inline-block; padding: 0.8em; margin: 0; list-style: none; }
.contact-us a { color: #fff; }
footer { text-align: center; color: #ddd; padding: 10px 10px 25px 10px; font-size: 0.8em;}

@media(max-width:1250px) {
	#container { max-width: 1000px; }
	body { font-size: 14px; }
	.project article { padding: 1.5em 2em 0.5em 2em; }	
	.project { font-size: 14px; }
}

@media(max-width:1000px) {
	#container { max-width: 600px; }
	.project .block, .project .image { float: none;; width: 100%; }
	.project:nth-child(odd) .image { float: none; }
	.project article { padding: 2em 2em 1.5em 2em; }	
	.project a.button.top { display: inline-block; float: right; }
	.project a.button.bottom { display: none; }
}

@media(max-width: 600px) {
	header { padding: 2em 1em; }
	header h1 { font-size: 1.4em; }
	header h2 { font-size: 1em; }
	header p { font-size: 0.85em; }
}

@media(max-width: 450px) {
	.project h2 { font-size: 1.5em; }
	.project article { padding: 1.5em 1.3em 1em 1.3em; }
	.project a.button.top { padding: 0.5em 1em; }
	.contact-us li { padding: 0.5em; }
}

@media(max-width: 380px) {
	header { max-width: 250px; }
	header p { display: none; }
	.project a.button.top { display:none; }
	.project a.button.bottom { display: inline-block; font-size: 0.8em; }
	.project article { padding: 1.3em; }
}