@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700|Roboto+Condensed:300&subset=latin,greek-ext,greek,latin-ext);

.strong { font-weight: 700; }
.em { font-style: italic; }
.underline { text-decoration: underline; }

.left { text-align: left !important; }
.center { text-align: center !important; }
.right { text-align: right !important; }

.hidden { display: none !important; }

body {
	font-size: 100%;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0;
	text-align: center;
	background-color: black;
	color: white;
}

a { color: #74A3C2; }
h1 { color: #CCC; font-weight: 400; }
h2 { color: #AAA; font-weight: 400; }
h3 { color: #f15822; font-weight: 400; }
h4 { color: #74A3C2; font-weight: 400; }

div.img-block { display: -moz-inline-stack; display: inline-block !important; vertical-align: top; margin: .75em; }
div.img-block-45 { width: 45%; }
div.img-block-55 { width: 55%; }
div.img-block-70 { width: 70%; }
div.img-block-90 { width: 90%; }

div.video-block { display: -moz-inline-stack; display: inline-block !important; vertical-align: top; margin: .75em; }

div.caption { margin: .5em 1em 1em 1em; color: #74A3C2; font-size: 1em; text-align: justify; }
div.biblio { margin-top: 7px; opacity: .8; }

img.thumb { width: 100%; }
img.caption { width: 65%; margin-bottom: 20px; }
iframe.video-1 { width: 560px; height: 315px; }

img.back-to-top-icon { width: 40px; text-align: center; margin-bottom: 40px; opacity: .5; cursor: pointer; }
img.back-to-top-icon:hover { opacity: 1; }
img.menu-icon { width: 40px; position: fixed; top: 10px; left: 10px; cursor: pointer; }
div.main-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; padding-bottom: 5em; opacity: .9; }
div.main-menu li { list-style: none; padding: 1em 2em 0 70px; text-align: right; }
div.main-menu li a { font-size: 1.2em; text-decoration: none !important; }
div.main-menu li a.active, div.main-menu li a:hover { color: #f15822; }

.paragraph { font-family: Arial; font-weight: 700; color: #f15822; }
.paragraph:before { content: '¶' }

@media only screen and (min-width: 900px) {
	h1 { font-size: 4em; }
	h2 { font-size: 3em; }
}
@media only screen and (max-width: 900px) {
	h1 { font-size: 3em; }
	h2 { font-size: 2.2em; }
}
@media only screen and (max-width: 640px) {
	h1 { font-size: 2em; }
	h2 { font-size: 1.7em; }
	div.img-block { width: 90% !important; }
	img.caption { width: 75% !important; }
}
@media only screen and (max-width: 320px) {
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.2em; }
	iframe.video-1 { width: 300px; height: 169px; }
}