@font-face {
  font-family: 'icomoon';
  src:  url('icomoon.eot?v2so3t');
  src:  url('icomoon.eot?v2so3t#iefix') format('embedded-opentype'),
    url('icomoon.ttf?v2so3t') format('truetype'),
    url('icomoon.woff?v2so3t') format('woff'),
    url('icomoon.svg?v2so3t#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html, body { width:100%; height:100%; margin:0; padding:0; background:#020709; font-family:'Josefin Sans'; min-width:320px; }
body { background-image:url(bg.jpg); background-size:1200px auto; background-repeat:no-repeat; background-position:top 140px center; }
body > .wrapper.main { margin-top:100px; margin-bottom:40px; text-align:center; }
body > .wrapper.main > span:last-child { width:100%; float:left; color:#000; }
.wrapper { width:100%; padding:0 10px; float:left; max-width:1260px; position:relative; left:50%; margin-left:-640px; box-sizing:border-box; text-align:center; }
video { width:100%; float:left; position:relative; top:0; left:0; margin:-150px 0 -110px 0; }
nav { width:100%; height:70px; float:left; border-top:1px solid #2e2e2e; border-bottom:1px solid #2e2e2e; z-index:1; position:relative; }
footer .button { background:#999; color:#000; text-decoration:none; border-radius:5px; padding:11px 10px 10px 10px; width:160px; text-align:center; float:left; font-size:14px; margin:17px 0; cursor:pointer; }
footer .button:hover { background:#ccc; }
footer .button.press { width:80px; margin-left:10px; }
a.logo.frictional { width:300px; height:103px; background:url(logo.png); position:absolute; left:50%; top:-18px; margin-left:-150px; border:none; margin-bottom:20px; }
a.logo:not(.frictional) { width:332px; height:268px; background:url(amnesia_logo.png) no-repeat center; border:none; display:inline-block; margin:40px 0 340px 0; }
nav p { display:none; }
footer .social { float:right; margin:19px 0; }
footer .social span { float:left; color:#666; margin:8px 18px 8px 0; font-size:16px; }
footer .social a { width:32px; height:32px; font-family:icomoon; float:left; color:#999; font-size:32px; text-decoration:none; margin-right:12px; cursor:pointer; }
footer .social a:hover { color:#ccc; }
footer .social a:last-child { margin-right:0; }
footer .social a.instagram::after { content:"\e904"; }
footer .social a.twitter::after { content:"\e903"; }
footer .social a.tumblr::after { content:"\e902"; }
footer .social a.facebook::after { content:"\e901"; }
footer .social a.discord::after { content:"\e905"; }
footer .social a.eye::after { content:"\e906"; }
footer { width:100%; height:70px; float:left; border-top:1px solid #2e2e2e; z-index:1; position:relative; }
.content { width:100%; float:left; color:#fff;}
.content.middle { margin:10px 0 50px 0; }
.content.bottom { margin:20px 0; }
.content p { width:100%; float:left; font-size:36px; line-height:42px; margin:40px 0 20px 0; text-shadow:rgba(0,0,0,0.8) 0 2px 3px; }
.content p a { color:#fff; }
.content p a:hover { opacity:0.8; }
.content p .nobr { white-space:nowrap; }
.content iframe { width:100%; float:left; margin-top:10px; margin-bottom:20px; }
.trailerButton { background:#000; color:#fff; padding:12px 8px 4px 8px; cursor:pointer; text-transform:uppercase; font-size:36px; border:1px solid #999; text-decoration:none; }
.trailerButton:hover { background:rgba(255,255,255,0.1); }
.copyright { width:100%; float:left; color:#fff; margin-top:40px; font-size:14px; color:#ccc; }
.newStores { width:100%; float:left; margin-bottom:50px; }
.newStores a { height:46px; display:inline-block; cursor:pointer; margin-right:10px; margin-bottom:10px; background-repeat:no-repeat; }
.newStores a:last-chid { margin-right:0; }
.newStores a.gog { width:38px; background-image:url(store_gog.png);  }
.newStores a.epic { width:30px; background-image:url(store_epic.png); }
.newStores a.steam { width:46px; background-image:url(store_steam.png); }
.newStores a.ps4 { width:176px; background-image:url(store_ps4.png); background-size:auto 38px; background-position:0 4px; margin-right:0; }
.newStores a:hover { opacity:0.8; }
.screenshots { width:100%; float:left; }
.screenshots a { width:48.5%; float:left; margin-bottom:3%; border:1px solid #2e2e2e; box-sizing:border-box; }
.screenshots a:hover { opacity:0.9; }
.screenshots a:nth-child(even) { margin-left:3%; }
.screenshots a img { width:100%; float:left; }
.content.bottom a { height:80px; display:inline-block; cursor:pointer; margin-right:20px; margin-bottom:10px; background-repeat:no-repeat; }
.content.bottom a:hover { opacity:0.9; }
.content.bottom a.esrb { width:166px; background-image:url(logo_esrb.png); }
.content.bottom a.pegi { width:66px; background-image:url(logo_pegi.png); margin-right:0; }
@media screen and (max-width: 1280px){
	.wrapper { width:100%; left:0; margin-left:0; }
}
@media screen and (max-width: 1000px){
	body { background-size:1000px auto; }
	header.wrapper { overflow:hidden; }
	video { width:1400px; left:50%; margin:-280px 0 -210px -700px; }
	body > .wrapper.main { margin-top:100px; }
	nav { border:none; }
	footer .social { position:absolute; left:50%; margin-left:-106px; top:90px; }
	footer .social span { display:none; }
	footer .button { position:absolute; left:50%; margin-left:-90px; top:145px; }
	footer .button.press { top:195px; margin-left:-50px; }
	.copyright { margin-top:210px; }
	.screenshots a { width:100%; margin-left:0 !important; margin-bottom:20px; }
}
@media screen and (max-width: 580px){
	body { background-size:700px auto; background-position:top 210px center; }
	a.logo:not(.frictional) { margin:20px 0 220px 0; }
	.content { width:100%; left:0; margin-left:0; }
	.content.middle { margin:30px 0 50px 0; }
}
