@font-face {
  font-family: 'dejavuextralight';
  src: url('../fonts/DejaVuSans-ExtraLight-webfont.eot');
  src: url('../fonts/DejaVuSans-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DejaVuSans-ExtraLight-webfont.ttf') format('truetype'),
       url('../fonts/DejaVuSans-ExtraLight-webfont.svg#dejavu_sansextralight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dejavubook';
  src: url('../fonts/DejaVuSans-Book-webfont.eot');
  src: url('../fonts/DejaVuSans-Book-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DejaVuSans-Book-webfont.ttf') format('truetype'),
       url('../fonts/DejaVuSans-Book-webfont.svg#dejavu_sansextralight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bizmeud';
  src: url('../fonts/bizmeud-webfont.eot');
  src: url('../fonts/bizmeud-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/bizmeud-webfont.ttf') format('truetype'),
       url('../fonts/bizmeud-webfont.svg#dejavu_sansextralight') format('svg');
  font-weight: normal;
  font-style: normal;
}

html{
  display: flex;
  width:100vw;
  justify-content: center;
  font-size: 19px;
  color:#FFF;
  background-color: #181818;
  font-family: 'dejavubook', sans-serif;
  font-weight: 200;
  overflow-x:hidden;
}
body{
  width:100vw;
  margin:0;
  padding:0;
  overflow-x:hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
a:hover, [onclick]:hover{cursor: pointer;}
p, figure{margin: 0 0 1em 0;line-height: 1.5em}
h1,h2,h3,h4{font-family: 'Bizmeud', sans-serif;font-weight: normal;margin:0}
h1{font-size: 80px;text-transform: uppercase;}
h2{font-size: 66px;text-transform: uppercase;}
h3{font-size: 32px;text-transform: uppercase;}

section.top{
  width: 100%;
  height:70vh;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
section.cover{
  width: 100%;height:100%;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
section.cover>img{
  width:100%;
  height:100%;
  display: block;
  object-fit: cover;
  object-position: center;
  position: absolute;
  opacity: .7
}
section.cover>svg{
  height: 35vh;
  position: absolute;
}
.cover>svg path{fill:#181818;}

section.insertwrapper{
  display: flex;
  justify-content:flex-end;
  align-self: flex-end;
  position: absolute;bottom: -65px;
}
section.insert{
  width:330px;
  padding: 12px;
  position: relative;
  background: #FFF;
  margin-right: 52px;
  color:#181818
}
span.category{font-family:'dejavuextralight', sans-serif;font-size: 14px;text-transform: uppercase;}
section.insert::after{
  content:'';
  position:absolute;
  top:-12px;left:100%;
  width:12px;height:100%;
  background-color: #181818
}
section.insert::before{
  content:'';
  position:absolute;
  top:-12px;left:12px;
  width:100%;height:12px;
  background-color: #181818
}
section.insert .button{float: right;}
.cover + .insertwrapper{bottom: -110px;transition: bottom 200ms linear}
.cover:hover + .insertwrapper,.insertwrapper:hover{bottom: -80px;}

.sociallinks{height:80px;line-height: 80px;font-size: 28px;}
.sociallinks a{padding-right: 20px;color:#FFF}

.cover .sociallinks{position: absolute;top:0;right:30px;}
.cover .sociallinks a{color:#181818}

.button{
  display: inline-block;
  padding: 0 20px;
  font-family: 'Bizmeud', sans-serif;font-weight: normal;
  background-color: #181818;color:#FFF;
  height:42px;line-height: 42px;
  font-size: 22px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .02em;
}

header{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding:0 20px;
  height: 80px;
  align-items: center;
  justify-content: flex-start;
}
header .branding svg{
  height:32px;
  margin-right: 55px;
}
header .branding,header nav a{transition: opacity 150ms linear}
header .branding:hover,header nav a:hover{opacity:.75;}
header nav a{
  color: #FFF;
  text-decoration: none;
  font-size: 22px;
  text-transform: uppercase;
  font-family: 'Bizmeud', sans-serif;font-weight: normal;
  letter-spacing: .02em;
}
header nav .separator{padding: 0 20px;}

main{padding-bottom: 60px}

main.projectlist{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  padding-top: 70px;
}

.projectlist .project{
  width: 50%;
  height: 28vw;
  margin-bottom: 140px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.projectlist .project img{
  width:100%;height:100%;
  object-fit: cover;
  object-position: center;
  transition: width 700ms linear;
}
main.projectlist .project:hover img {
  width: 130%;
  transition: width 20000ms linear;
}
.projectlist .project .insertwrapper{transition: bottom 200ms linear;}
.projectlist .project:hover .insertwrapper{bottom:-80px;}

main.single{
  max-width: 900px;
  width:100%;
}
main.single a{color:#DDD}
main.single h2{font-size: 32px;}
main.single img{width:100%;}
main.single iframe{width: 900px; height:510px}

table.insert{
  background-color: #FFF;
  color:#222;
  width: 100%;
  font-size: 14px;
  margin-bottom: 30px;
}
table tr{
  padding:0 20px;
  display: flex;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
}
table tr td, table tr th{
  width: 50%;
  padding:12px 0;

  box-sizing: border-box;
}
table tr:not(:last-child) td, table tr:not(:last-child) th{
  border-bottom: solid 1px #DDD;
}
table tr p:last-child{margin-bottom:0;}
table tr th{text-align: left;}

section.projectsection{margin-top: 2em;}

footer{font-size: 12px;text-align: center;}
footer a{color: #DDD!important}

section.banner{position: relative;min-height: 50px;}
section.banner>img, section.banner::after{
  width: 100vw;
  display: block;
  max-height: 50vh;
  object-fit: cover;
  position: relative;
  left: calc((100% - 100vw) / 2)
}
section.banner::after{
  content: '';
  height:150px;
  bottom: 0;
  position: absolute;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
section.banner[banimage='']::after{display:none}
section.banner .buybuttons{
  position: absolute;
  bottom:20px;
  right: 0;
  z-index: 1;
  display: flex;flex-wrap: wrap;
  justify-content: flex-end;
}
section.banner .buybuttons a{position:relative;margin: 0 8px 8px 0;}

section.banner .buybuttons a img{height:32px;width: auto;margin-right:8px}
section.banner .buybuttons a.limitedrun{display: flex;align-items: center;}
section.banner .buybuttons a::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;height:100%;
  top:0;left:0;
}
section.banner .buybuttons a:hover::after{
  background-color: rgba(255,255,255,.1);
  transition: background 300ms;
}
section.banner .buybuttons a{color:#FFF;}
section.banner .buybuttons a.steam{background-color:rgba(121,153,5,1)}
section.banner .buybuttons a.xbox{background-color:#52b043}
section.banner .buybuttons a.playstation{background-color:#003087}
section.banner .buybuttons a.google{background-color:#689f38}
section.banner .buybuttons a.switch{background-color:#E60012}
section.banner .buybuttons a.apple{background-color:#0070c9}
section.banner .buybuttons a.limitedrun{background-color:#EC008C}
.single .projectlist .project{
  height:30vh;
}

@media (max-width:1023px) {
  .mobilehide{display: none}
  section.top{height:auto}
  h1{font-size: 70px;text-transform: uppercase;}
  h2{font-size: 50px;text-transform: uppercase;}
  h3{font-size: 30px;text-transform: uppercase;}
  header{
    position: fixed;
    top:0;left:0;
    z-index: 200;
    height:64px;
    background: #181818;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  header.open::after{
    content: '';display: block;position: absolute;
    top:100%; left: 0;
    width:100vw; height:100vh;
    background-color: rgba(0,0,0,.3)
  }
  header .branding{height:64px;}
  header .branding svg{margin:16px 0;}
  header:not(.open)>*:not(.branding){display:none}
  header.open{height:auto;}
  header.open nav{
    display: flex;
    flex-direction: column;
    margin:40px 0;
    text-align: center;
  }
  main{padding-top: 64px;}
  section.cover{height:80vh}
  section.insertwrapper{
    display: flex;
    justify-content:flex-end;
    align-self: flex-start;
    position: static;
    width: 100%;
  }
  section.insert{
    margin-top:0;
    width:100%;
    margin-right: 0;
  }

  .projectlist .project{
    width: 100%;
    height:auto;
    margin-bottom: 40px;
  }
  .projectlist .project img{
    height:55vw;
    transition: width 700ms linear;
  }

  main.single h1, main.single h2,main.single h3{padding-left: 20px}
  main.single p{padding: 0 10px 0 20px;box-sizing: border-box;}
  main.single iframe{width: 100vw;height:56vw;}
}
@media (min-width:1024px) {
  header .branding.switch{display:none;}
  .desktophide{display: none}
  header nav .separator:first-of-type{display: none}
}

input.email{
  line-height: 42px;
  margin-top: 10px;
  background: #1F1F1F;
  border:none;
  padding: 0 10px;
  top:-3px;
  margin-right: 10px;
  position: relative;
  display:inline-block;
  outline: none!important;
  font-size: 16px;
  color: #FAFAFA
}
input.email:focus{background: #111;}
input[name="subscribe"]{
  width:114px;
  background-color: #FAFAFA;
  color: #181818;
  border: none;
  outline: none!important;
}
input[name="subscribe"]:hover{
  background-color: #E4E4E4;
}

.wrap{padding:0 10px}