/**
 * Fix for vw, vh, vmin, vmax on iOS 7.
 * http://caniuse.com/#feat=viewport-units
 *
 * This fix works by replacing viewport units with px values on known screen sizes.
 *
 * iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix.
 * Target devices running iOS 8+ will incidentally execute the media query,
 * but this will still produce the expected result; so this is not a problem.
 *
 * As an example, replace:
 *
 *   height: 50vh;
 *   font-size: 5vmin;
 *
 * with:
 *
 *   @include viewport-unit(height, 50vh);
 *   @include viewport-unit(font-size, 5vmin);
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.clearfix {
  *zoom: 1; }
  .clearfix:after {
    content: "";
    display: table;
    clear: both; }

.home > header {
  height: 700px;
  height: 100vh;
  width: 100%; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    .home > header {
      height: 1024px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    .home > header {
      height: 768px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
    .home > header {
      height: 480px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
    .home > header {
      height: 320px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
    .home > header {
      height: 568px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
    .home > header {
      height: 320px; } }

.parallax-container {
  height: 100vh; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    .parallax-container {
      height: 1024px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    .parallax-container {
      height: 768px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
    .parallax-container {
      height: 480px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
    .parallax-container {
      height: 320px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
    .parallax-container {
      height: 568px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
    .parallax-container {
      height: 320px; } }

body > header h1 {
  margin-bottom: 10vh; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    body > header h1 {
      margin-bottom: 102.4px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    body > header h1 {
      margin-bottom: 76.8px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
    body > header h1 {
      margin-bottom: 48px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
    body > header h1 {
      margin-bottom: 32px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
    body > header h1 {
      margin-bottom: 56.8px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
    body > header h1 {
      margin-bottom: 32px; } }

.crazy-vh .siteHeader__center {
  -webkit-transform: translateX(-60px);
      -ms-transform: translateX(-60px);
          transform: translateX(-60px); }

body > header h1 img {
  height: 25vh;
  max-height: 100%; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    body > header h1 img {
      height: 256px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    body > header h1 img {
      height: 192px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
    body > header h1 img {
      height: 120px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
    body > header h1 img {
      height: 80px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
    body > header h1 img {
      height: 142px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
    body > header h1 img {
      height: 80px; } }

body > header a[href="#main"] {
	bottom: 20px;
  bottom: 2vh; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    body > header a[href="#main"] {
      bottom: 20.48px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    body > header a[href="#main"] {
      bottom: 15.36px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
    body > header a[href="#main"] {
      bottom: 9.6px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
    body > header a[href="#main"] {
      bottom: 6.4px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
    body > header a[href="#main"] {
      bottom: 11.36px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
    body > header a[href="#main"] {
      bottom: 6.4px; } }

/*.release-banner {
  bottom:102px;
  bottom: 10vh; }*/
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    .release-banner {
      bottom: 102.4px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    .release-banner {
      bottom: 76.8px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
    .release-banner {
      bottom: 48px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
    .release-banner {
      bottom: 32px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
    .release-banner {
      bottom: 56.8px; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
    .release-banner {
      bottom: 32px; } }

@media (max-width: 40em) {
  .state--open.nav-container nav[role="banner"] h1 {
    display: none; } }

nav[role="banner"].fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #0f1120;
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s; }

nav[role="banner"].hidden {
  -webkit-transition: none;
          transition: none; }

nav[role="banner"].hidden, nav[role="banner"].up {
  -webkit-transform: translateY(-5em);
      -ms-transform: translateY(-5em);
          transform: translateY(-5em); }

nav[role="banner"].down {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none; }

nav[role="banner"].fixed h1 {
  display: block; }

@media (max-width: 95em) {
  .downloads > section h1 {
    float: none;
    text-align: right;
    margin-bottom: 0.3em; }
/*  .newsletter {
    padding-right: 30%; }*/ }

@media (max-width: 81.25em) {
  #bgm-toggle {
    margin-left: 1.5em; }
  .about {
    padding-top: 8%; }
  #about.section-wrapper > section, #about.section-wrapper > section + section {
    margin-left: 0;
    margin-top: 3em;
    width: 28em; }
  #about.section-wrapper section > h1 {
    margin-right: 0;
    margin-bottom: 0.5em;
    position: static;
    text-align: left; }
  .blog {
    padding-top: 8%;
    padding-left: 10%; }
    .blog .block-blog {
      margin-left: 0;
      margin-top: 3em;
      width: 28em; }
    .blog section > h1 {
      margin-right: 0;
      margin-bottom: 0.5em;
      position: static;
      text-align: left; }
  .newsletter.align-right { padding-right: 10%;  }
  .newsletter.align-left { padding-left: 10%;  }
    .newsletter > section > h1 {
      margin-right: 0;
      margin-bottom: 0.5em;
      position: static;
      text-align: right; } }

@media (max-width: 71.25em) {
  .crazy-vh .illustration {
    min-height: 0 !important;
    height: 900px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0; }
  .sven .illustration.illustration.illustration {
    min-width: 100%; } }

@media (max-width: 62em) {
  .nav-main.nav-main.nav-main {
    display: none; }
  .nav-meta.nav-meta.nav-meta {
    position: static;
    display: inline-block; }
  nav[role="banner"] {
    text-align: right; }
  .section-wrapper section > h1 {
    text-align: center;
    width: 100%;
    margin-left: 0; }
  #about.section-wrapper section {
    width: 100%; }
  #about.section-wrapper section > h1 {
    text-align: center;
    width: 100%; }
  #about.section-wrapper > .block-text.block-text {
    padding: 0;
    width: auto;
    max-width: 30em;
    margin: 3em auto 0; }
  .press .block-press {
    width: auto;
    max-width: 27em;
    margin: 0 auto; }
  .press blockquote {
    border-right: none;
    text-align: left;
    padding-right: 0;  }
    .press blockquote footer {
      text-align: right; }
  .blog .featured {
    margin-top: 3em; }
  .blog .block-blog {
    margin: 4.2em auto 0;
    width: auto;
    max-width: 28em; }
  .blog article {
    border-left: none;
    padding-left: 0; }
  .downloads > section > p {
    float: none;
    text-align: left;
    width: auto;
    max-width: 22em;
    margin: 1em auto; }
  .download-points {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
  .section-wrapper {
    padding: 0 1.57895em; }
    .section-wrapper .illustration {
      position: relative;
      top: 0; right: 0; bottom: 0; left: 0;;
      margin-left: -1.57895em;
      margin-right: -1.57895em;
      height: 850px;
      background-position: center center;
      background-size: cover; 
	}
  .section-wrapper .particles { width: 100%; }
  .freya .illustration {
    background-image: url('media/characters/freya-ld.jpg'); }
  .ulfir .illustration {
    background-image: url('media/characters/ulfir-ld.jpg'); }
  .lif .illustration {
    background-image: url('media/characters/lif-ld.jpg'); }
  .sven .illustration {
    background-image: url('media/characters/sven-ld.jpg'); }
  .edda .illustration {
    background-image: url('media/characters/edda-ld.jpg'); }
  body > footer {
    margin-top: 40%; } 
  .newsletter .block-newsletter {
    width: auto;
    max-width: 24em;
    margin: 0 auto;
    text-align: center; } 
   }

.newsletter .block-newsletter p{
}

@media (max-width: 48em) {
  nav[role="banner"] h1 { left: 0.4em; }
  nav[role="banner"] h1 img { margin: 0; }
  .siteHeader__center {
    margin-top: -35%;
    margin-top: -15vh;
  }
  .parallax-container .layer {
    right: -15%;
    left: -15%; }
  .parallax-container .layer-5 {
    background-image: url('media/parallax/fond-ld.jpg'); }
  .parallax-container .layer-4 {
    background-image: url('media/parallax/layer4-ld.png'); }
  .parallax-container .layer-3 {
    background-image: url('media/parallax/layer3-ld.png'); }
  .parallax-container .layer-2 {
    background-image: url('media/parallax/layer2-ld.png'); }
  .parallax-container .layer-1 {
    background-image: url('media/parallax/layer1-ld.png'); }
  .release-banner {
    background-color: #0f1120;
    bottom: 0;
    padding: 20px 10px; }
    .release-banner h2 {
      display: block;
      border-right: none;
      padding-right: 0;
      margin-bottom: 5px; 
      font-size: 1em;
    }
    .release-banner img { height: 0.75em; }
	
	.section-wrapper .illustration {
 height: 700px;
	}
  body > header a[href="#main"] {
    bottom: 150px;
    bottom: calc(2vh + 100px); }
  h1 {
    font-size: 2.125em; }
  .about > section {
    margin: 0 auto; }
  #about.section-wrapper > .block-text.block-text {
    margin-top: 3em; }
	
	#about.section-wrapper .block-text__title.block-text__title,
	.block-text__title,
	.blog .block-blog .block-text__title,
	.newsletter .block-newsletter__title{
		margin-bottom: 0.7em
	}
  #media h1 { text-align: center; }
	.featured h2{
		font-size: 1.15em;
	}
.sponsors {
    margin-bottom: 4em;
}
  body > footer {
    margin-top: 30%; } }

.footer-nav {
  padding-left: 0; }

/* Fallback iOS 7 */
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (max-width: 48em) {
  .siteHeader__center { margin-top: -35%; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (max-width: 48em) {
  .siteHeader__center { margin-top: -17%; }
}

@media (max-width: 40em) {
  .nav-meta__item--newsletter.nav-meta__item--newsletter.nav-meta__item--newsletter, .nav-meta__item--music.nav-meta__item--music.nav-meta__item--music {
    display: none; }
  .footer-nav.footer-nav {
    text-align: left;
    padding-left: 2em; }
  .footer-nav__item.footer-nav__item {
    display: block;
    border: none;
    margin: 0 0 1em;
    padding: 0; }
  .section-wrapper .illustration {
    height: 600px; } }

@media (max-width: 32.5em) {
  .blog article img { margin-right: -6em; }
  .blog article p {
    width: auto; 
    margin-left: 5.5em; }
  .newsletter input[type="text"] {
    width: 12em; }
  .sponsors img {
    max-width: 90%;
    max-width: calc(100% - 2em); }
  .section-wrapper .illustration {
    height: 500px; }

  body > footer {
    margin-top: 20%; 
	padding-bottom: 3em;
}
	.sponsors {
    margin-bottom: 3em;
}
 }

@media (max-width: 31.25em) {
  .form-newsletter input, .form-newsletter button { display: block; width: 100%; text-align: center; }
  .form-newsletter button { margin-top: 0.25em; }
}

@media (max-width: 23.75em) {
  .newsletter input[type="text"] {
    margin-bottom: 0.5em; }
  .section-wrapper .illustration {
    height: 400px; } 
	
	body > footer {
    	margin-top: 10%; 
		padding-bottom: 2em;
	} 
}

@media (max-height: 500px) {
  body > header a[href="#main"] {
    display: none; } }

@media (max-height: 350px) {
  .release-banner {
    padding: 5px; }
    .release-banner h2 {
      font-size: 1em; } }

.block-screenshots__title.block-screenshots__title.block-screenshots__title {
  width: 100%;
  margin: 0 0 0.83em 0; }