@font-face { font-family: "FameRe"; src: url("../fonts/fa-regular-400.woff2") format("woff2"); font-weight: normal; }
@font-face { font-family: "FameSo"; src: url("../fonts/fa-solid-900.woff2") format("woff2"); font-weight: bold; }
@font-face { font-family: "FameBr"; src: url("../fonts/fa-brands-400.woff2") format("woff2"); font-weight: normal; }

@font-face { font-family: 'manrope'; src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'manrope'; src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; }

a { color: rgb(237,117,29); cursor: pointer; }
strong { font-weight: bold; }
html { min-height: 100%; }
body { background: #000; min-height: 800px; text-align: center; font-family: "manrope"; color: rgb(180,180,180); }
body#start { background: no-repeat center center #fff; background-size: cover; min-height: 100vh; }
.wrapper { position: relative; width: 1180px; margin: auto; text-align: left; }
header { height: 90px; width: 100%; border-top: 15px solid rgb(25,80,96); }
#nav__panel { position: absolute; left: 0; top: 4.5em;  z-index: 100; background: rgba(0,0,0,0.5); border-radius: 1em; }
#navicon { display: none; }
.back { display: inline-block; font-size: 2.4em; font-family: "FameSo"; margin-top: 1.2rem; text-decoration: none; }
#mara { max-width: 75px; height: auto; border-radius: 50%; }
#main__nav { list-style: none; margin: 0.5em 14px 0 14px; padding: 0; font-size: 1.5em; text-align: center; }
#main__nav li.fb { font-family: "FameBr"; }
#main__nav li.fs { font-family: "FameSo"; }
#main__nav li.fr { font-family: "FameRe"; }
#main__nav a { display: block; padding: 0.5em 0; color: rgb(180,180,180); text-decoration: none; }
#main__nav a:hover { color: rgb(237,117,29); }
#meta__nav { list-style: none; margin: 0; padding: 0; margin-top: 1.5em; font-size: 1.5em; text-align: center; }
#meta__nav li { font-family: "FameSo"; }
#meta__nav a { display: block; padding: 0.5em 0; color: rgb(180,180,180); text-decoration: none; }
#meta__nav a:hover { color: rgb(237,117,29); }
footer { width: 100%; height: 170px; margin-top: -170x; font-size: 1.2em; line-height: 1.2em; background: url("/static/images/foot-black-grad.png") repeat-x; color: #fff; box-sizing: border-box; padding-top: 2em; }
body#start footer { position: absolute; bottom: 0; left: 0; }
footer a { color: rgb(180,180,180); }
.leveler, .leveler * { vertical-align: middle }
blockquote { font-size: 1.2em; margin: 1em 2em; }


#gal__nav { list-style: none; margin: 0; padding: 0; margin-top: 1.5em; text-align: center; background: rgba(0,0,0,0.5); border-radius: 1em; padding-top: 1em; }
#gal__nav li { display: inline-block; margin: 0 1em 1em 1em; }
#gal__nav li a:before { content: " "; font-family: "FameSo"; }

.nav__caption { display: none; position: absolute; font-family: 'manrope'; text-wrap: nowrap; padding-left: 0.5em; font-size: 0.9em; white-space: nowrap; }

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

article { min-height: 1500px; padding-bottom: 200px; box-sizing: border-box; }
section { margin-left: 300px; width: 600px; text-align: left; float: left; margin-right: 40px; }
h1 { font-size: 1.75em; line-height: 1.2em; font-family: "manrope"; font-weight: normal; margin-top: 0; text-transform: uppercase; }
section h2 { font-size: 2.2em; line-height: 1.2em; font-family: "Marker"; color: rgb(35,121,189); font-weight: normal; margin: 1em 0 0.7em; }
section h3 { font-size: 1.8em; line-height: 1.2em; font-family: "Marker"; color: rgb(35,121,189); font-weight: normal; margin: 1em 0 0.7em; }
section h4 { font-size: 1.5em; line-height: 1.2em; font-family: "Marker"; color: rgb(35,121,189); font-weight: normal; margin: 1em 0 0.7em; }
section h5 { font-size: 1.3em; line-height: 1.2em; font-family: "Marker"; color: rgb(35,121,189); font-weight: normal; margin: 1em 0 0.7em; }
section ul { list-style: none; padding: 0; margin: 1em 0; }
section ul li { text-indent: -1.7em; padding-left: 2.7em; margin: 1em 0; }
section ul li:before { content: "- "; font-family: "Marker"; font-size: 1.8em; color: rgb(35,121,189); }
section img { max-width: 100%; height: auto; }
div.full { position: relative; }
div.full a { display: inline-block; position: relative; }
div.full a:hover { opacity: 0.7; filter:alpha(opacity=70); }
div.full a:after { content: " "; position: absolute; top: 12px; right: 12px; height: 30px; width: 30px; background: url("/static/images/icon-fullscreen.gif") no-repeat; }
.pic__sub { display: block; font-size: 0.875em; line-height: 1.2em; padding-top: 0.5em; font-style: italic; }
.center { text-align: center; }
nav{ display: block; }
.center { text-align: center; padding: 0.5em; }


.hint { text-decoration: none; background: #fff; display: inline-block; padding: 1em 2em; color: #000; border-radius: 0.5em; line-height: 1.4; margin-top: 40vh; rotate: -7.5deg; }
.hint .cta { text-transform: uppercase; color: #d9965e; font-size: 3em; }
.hint .date { font-size: 1.5em; font-weight: 700; }
.hint .title { font-size: 2em; }
.hint .pin_tl { position: absolute; width: 6px; height: 6px; background: #000; border-radius: 3px; top: 10px; left: 10px; }
.hint .pin_tr { position: absolute; width: 6px; height: 6px; background: #000; border-radius: 3px; top: 10px; right: 10px; }
.hint .pin_bl { position: absolute; width: 6px; height: 6px; background: #000; border-radius: 3px; bottom: 10px; left: 10px; }
.hint .pin_br { position: absolute; width: 6px; height: 6px; background: #000; border-radius: 3px; bottom: 10px; right: 10px; }

@media only screen and (max-width: 1200px) {
	.wrapper { width: 970px; }
	section { margin-left: 250px; width: 490px; line-height: 1.5em; margin-right: 30px; }
	section img { max-width: 490px; height: auto; }
}

@media only screen and (max-width: 990px) {
	.wrapper { width: 700px; }
	section { width: 450px; line-height: 1.5em; margin-right: 0; float: none; }
	section img { max-width: 450px; height: auto; }
}

@media only screen and (max-width: 767px) {
	body#start {  background-size: auto calc(100%); min-height: 100%; }
	body#start:before { content: " "; position: absolute; bottom: 0; left: 0; width: 100%; height: 320px; background: url("/static/images/start-text-bg.png") left bottom repeat-x; }
	body#start footer { height: auto; padding: 1em 5%; bottom: 0px; margin: 0; }
	.wrapper { width: 100%; }
	#nav__panel { left: 1em; }

	#main__nav a { padding: 0.6em 0; }
	article { margin-left: 0; }
	section { width: 90%; margin-left: 0; padding: 5%; line-height: 1.5em; }
	section img { max-width: 100%; width: auto; }
	footer { width: 100%; padding: 2em 5% 0 5%; }
	
header { height: 50px; }
#nav__panel { top: 2em; }

	.hint { width: 60%; margin-left: 15%; text-decoration: none; background: #fff; display: inline-block; padding: 0.5em; color: #000; border-radius: 0.5em; line-height: 1.4; margin-top: 25vh; rotate: -7.5deg; }
	.hint .cta { text-transform: uppercase; color: #d9965e; font-size: 1.5em; }
	.hint .date { font-size: 1em; font-weight: 700; }
	.hint .title { font-size: 1.2em; }
	

}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	body#start { background-position: center 0; background-size: cover; }
}