/*
Theme Name: Fated
Author: Transistor Design
Text Domain: splash
*/

/* ==================================================== */
/* NORMALISATION
/* ==================================================== */
* { box-sizing: border-box; }

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block; }
audio, canvas, progress, video {display: inline-block; vertical-align: baseline; }
audio:not([controls]) {display: none; height: 0; }
[hidden], template {display: none; }

sub, sup { line-height: 0; }

img { border: 0; }
svg:not(:root) { overflow: hidden; }

hr { box-sizing: content-box; height: 0; }

pre { overflow: auto; }
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0; }
button {overflow: visible; }
button, select {text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] {cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0; }
input {line-height: normal; }
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }
textarea {overflow: auto; }
input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0; }



/* ==================================================== */
/* BASE
/* ==================================================== */
#accelerometer-data { display: none }

#spritesheet { display: none; }

html { 
  background: #0f1120;
  padding: 0; 
  overflow-x: hidden;

  font: 200 1.1875em/1.26 'proxima-nova';
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  overflow: hidden;
}

:first-child { margin-top: 0; }
:last-child { margin-bottom: 0; }

h1, h2 { 
  color: #5ebaae; 
  text-transform: uppercase;
}

h1 { font: 200 3.6em/1 'hypatia-sans-pro'; }

h2 {
  font-weight: 100;
  font-size: 1.5em;
}

a { 
  color: #63c5b7;
  text-decoration: none; 
  -webkit-transition: all 0.2s; 
          transition: all 0.2s;
}
a:hover { color: inherit; }

a.more { 
  font-weight: bold; 
  text-transform: uppercase;
}

.button {
  display: inline-block;
  padding: 0.3em 0.3em 0.05em;
  border: 1px solid;

  text-transform: uppercase;
  line-height: 1;
  color: inherit;
}
.button:hover {
  color: #63c5b7;
}

.button .icon {
  width: 1em;
  height: 1em;
}

ul { padding-left: 1em; }

label { display: none; }

input[type="text"], button {
  padding: 0.5em;
}

button {
  border: none;
  background: #fff;
  padding-left: 1em; padding-right: 1em;

  font-weight: bold;
  color: #111325;
  text-transform: uppercase;
}
button:hover { background: #63c5b7; }

input {
  background: none;
  border: 1px solid;
  border-radius: 0;
  width: 15em;
  text-align: left;
}

abbr[title] { border-bottom: none; text-decoration: none; }

.owl-prev, .owl-next {
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}
.owl-prev:hover, .owl-next:hover { color: #fff; }

@-webkit-keyframes glow-pulse {
  0% { text-shadow: 0 0 0 #fff; }
  100% { text-shadow: 0 0 50px rgba(255,255,255,0) }
}

@keyframes glow-pulse {
  0% { text-shadow: 0 0 0 rgba(255,255,255,1); }
  100% { text-shadow: 0 0 50px rgba(255,255,255,0); }
}



/* ==================================================== */
/* LAYOUT
/* ==================================================== */
.home > header {
  vertical-align: middle;
  position: relative;
  background: no-repeat center;
  background-size: cover;

  text-align: center;
}

.siteHeader {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.siteHeader__center {
  width: 100%; 
  position: relative;
}

body > header h1 {
  position: relative;
  margin: 0 auto 10vh;
  font-size: 1.3em;
}
body > header h1 img { 
  height: 25vh;
/*   max-height: 180px; */
  max-width: 70%;
}

body > header a {
  color: inherit;
}

body > header a:hover, body > header .button:hover { color: #0f1120; }

.header-cta {
  padding: 0.4em 0.6em 0.45em;

  font-family: 'hypatia-sans-pro';
  font-weight: normal;
  font-size: 0.95em;
}

.header-cta .icon {
  margin-left: 0.25em;
  vertical-align: -0.15em;
}


.release-banner {
  position: absolute;
  right: 0; bottom: 10%; left: 0;
}
.release-banner * { 
  display: inline-block; 
  vertical-align: middle;
  margin: 0; padding: 0;

  line-height: 1;
}

.release-banner h2 {
  padding-right: 1em;
  border-right: 1px solid;

  color: #fff;
  font-size: 1.26em;
  font-weight: bold;
  text-transform: uppercase;
}

.release-banner li { margin-left: 1em; }

.release-banner img { height: 1em; }

body > header a[href="#main"] {
  display: block;
  position: absolute;
  right: 0; bottom: 2vh; left: 0;
  margin: auto;
  width: 1.5em;
  height: 1.5em;
}
body > header a[href="#main"] svg { width: 100%; height: 100%; }


/* Navigation
/* ---------------------------------------------------- */
nav[role="banner"] {
  position: absolute;
  top: 0; right: 0; left: 0;
  z-index: 100;
  padding: 0.7em 1em 1em;

  text-align: center;
}

nav[role="banner"] > * { display: inline-block; vertical-align: middle; }

nav[role="banner"] h1 {
  position: absolute;
  left: 1em; top: 0; bottom: 0;
  margin: auto;
  height: 2.5em;
  width: 3.5em;
  display: none;

  font-size: 1em;
}

nav[role="banner"] h1 img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}

nav[role="banner"] ul { margin: 0; padding: 0; }
nav[role="banner"] li { display: inline-block; vertical-align: middle; }

nav[role="banner"].fixed a:hover { color: #63c5b7; }

.nav-main {
  font-family: 'hypatia-sans-pro';
  font-weight: normal;
  text-transform: uppercase;
  font-size: 0.95em;
}

.nav-main li {
  margin: 0 0.75em;
}

.nav-meta {
  position: absolute;
  right: 1em; top: 0.55em;
}

.nav-meta li { display: table-cell; margin-top: 0; }

.nav-meta a { display: block; }

.nav-meta .button {
  font-size: 0.68em;
  line-height: 1.4em;
}

.nav-meta .icon {
  height: 1.25em;
  width: 1.25em;
  margin-top: 0.25em;
}

.nav-meta .social,
.nav-meta [href="#newsletter"] {
  margin-left: 0.25em;
}

#bgm-toggle { 
  width: 1.9em; 
  margin-left: 4.5em; 
}

#bgm-toggle .icon { 
  margin: 0;
  height: 1em; 
}

#bgm-toggle.on { background: #0f1120; }
nav[role="banner"].fixed #bgm-toggle.on { background: #63c5b7; }
#bgm-toggle.on:hover { color: inherit; }


.language-wrapper { 
  position: absolute;
  top: 0; right: 0; left: 0;
  text-align: right;
}
.language-chooser {
  display: inline-block;
}
.language-chooser li { display: inline-block; }
.language-chooser a {
  display: block;
  background: #053d6f;
  padding: 0.75em 0.5em 0.5em;

  font-family: 'Lexia Ad', 'lexia-advertising';
  font-size: 0.8em;
  line-height: 1;
  color: #fff;
}
.language-chooser .active { display: none; }

/* Fond en parallax
/* ---------------------------------------------------- */
.parallax-container {
  position: absolute;
  height: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  overflow: hidden;
}

.parallax-container .layer {
  position: absolute;
  top: -2.5%;right: -5%; bottom: -2.5%; left: -5%;
  background: no-repeat center bottom;
  background-size: cover;
  -webkit-transition: -webkit-transform 0.1s;
          transition: transform 0.1s;
}

.parallax-container .layer-5 { background-image: url('media/parallax/fond.jpg'); }
.parallax-container .layer-4 { background-image: url('media/parallax/layer4.png'); }
.parallax-container .layer-3 { background-image: url('media/parallax/layer3.png'); }
.parallax-container .layer-2 { background-image: url('media/parallax/layer2.png'); }
.parallax-container .layer-1 { background-image: url('media/parallax/layer1.png'); }

.parallax-container .particles {
  position: absolute;
  top: 0 ; right: 0; bottom: 0; left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}



/* ---------------------------------------------------- */
/* CONTENU
/* ---------------------------------------------------- */
main {
  position: relative;
}
main::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -3;
}



/* ---------------------------------------------------- */
/* Sections
/* ---------------------------------------------------- */
.section-wrapper {
  position: relative;
  padding: 0 10vw;
}

.align-right { text-align: right; }

.section-wrapper .illustration {
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.section-wrapper .particles {
  position: absolute; top: 0; bottom: 0; width: 60%; height: 100%;
}

.align-left .illustration { background-position: center right; }
.align-left .particles { right: 0; }
.align-right .illustration { background-position: center left; }
.align-right .particles { left: 0; }

.section-wrapper section { position: relative; }

.section-wrapper section > h1 {
  position: absolute;
  top: -0.15em;
}

.align-left section > h1 { 
  right: 100%;
  margin-right: 0.75em;
  text-align: right; 
}

.align-right section > h1 { 
  left: 100%; 
  margin-left: 0.75em;
  text-align: left;
}

.freya .illustration {
  background-image: url('media/characters/freya.png');
  min-height: 85vh;
  top: 15%; bottom: -20%; right: -5%;
}

.ulfir .illustration {
  background-image: url('media/characters/ulfir.png');
  min-height: 80vh;
  top: 17%; left: -7%; bottom: -12%;
}

.lif .illustration {
  background-image: url('media/characters/lif.png');
  min-height: 80vh;
  top: 20%;
  bottom: -15%;
}

.sven .illustration { background-image: url('media/characters/sven.png'); }
.edda .illustration { background-image: url('media/characters/edda.png'); }


/* About
/* ---------------------------------------------------- */
.about {
  padding-top: 27vh;
}

.about > section {
  width: 23.6em;
  margin-left: 10em;
}

.about > section + section { margin-top: 6.68em }


/* Press
/* ---------------------------------------------------- */
.press {
  padding-top: 30vh;
}

.press section {
  width: 27em; 
  margin: 0 0 0 auto; 
}

.press section > h1 {
  position: static;
  text-align: right;
}

.press blockquote {
  border-right: 1px solid;
  padding-right: 2.35em;
  margin: 0;
}
.press blockquote + blockquote { margin-top: 3.16em; }

.press blockquote a { color: inherit; }

.press blockquote h1 { font-size: 1em; }
.press blockquote h1 img { height: 2.5em; margin-top: -1em; margin-bottom: -0.4em }

.press blockquote p { 
  margin: 0.5em 0;
  font-style: italic; 
}

.press blockquote footer {
  font-size: 0.68em;
  color: #63c5b7;
}


/* Medias
/* ---------------------------------------------------- */
.media { padding: 10% 3.25% 0; margin-top: 10%; }

.block-screenshots { overflow: hidden; }

.block-screenshots img { 
  display: block; 
  width: 100%; 
  height: auto; 
}

.block-screenshots .description { display: none; }

.block-screenshots .block-screenshots__grid{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.media .block-screenshots h1 { 
  position: static;
  text-align: left;
}


.block-screenshots .media-item {
  position: relative;
  display: block;
}

.block-screenshots a { color: #fff; display: block; position: relative }
.block-screenshots img { width: 100%; height: auto; }

.block-screenshots [data-type="youtube"] .icon {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 20%;
  height: 20%;
  margin: auto;
}

.block-screenshots [data-type="youtube"]:hover { color: #63c5b7; }


/* Blog
/* ---------------------------------------------------- */
.blog {
  padding-top: 15em;
  padding-left: 30%;
}
.blog:last-child { margin-bottom: 6em; }

.blog > section { width: 23.68em; }

.blog .featured { margin-top: 4em }

.blog article {
  overflow: hidden;
  border-left: 1px solid;
  padding-left: 2.4em;

  font-size: 0.79em;
}
.blog article + article { margin-top: 2em; }

.blog article h1 {
  color: inherit;
  font-family: inherit;
  font-weight: bold;
  font-size: 1em;
}
.blog article h1 span {
  text-transform: none;
  font-weight: normal;
}

.blog article img {
  float: left;
  width: 5em;
  height: auto;
}

.blog article p {
  float: left;
  width: 20em;
  margin: 0 0 0 0.5em;

  font-style: italic;
}
.blog article .more { font-style: normal; }


/* Download
/* ---------------------------------------------------- */
.downloads {
  padding-top: 40vh;
}

.downloads.sven .illustration {
  top: 13%;
  bottom: -13%;
  min-height: 90vh;
}

.downloads > section h1 {
  position: static;
  float: right;
}

.downloads > section > p {
  float: right;
  width: 22em;
}

.download-points {
  padding: 0;
  clear: both;
  margin-top: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.download-points li {
  position: relative;
  display: block;
  width: 12.5em;
  margin-top: 4em;
}

.download-points .sales-text {
  position: absolute;
  right: 0; bottom: 100%; left: 0;
  margin: 0 0 0.5em;
  
  text-align: center;
  color: #63c5b7;
  font-weight: 100;
}

.download-points .button {
  display: block;
  padding: 0.5em 1.5em;
  height: 3em;
}

.download-points img {
  display: block;
  max-width: 100%;
  max-height: 2em;
  width: auto;
  height: auto;
  margin: auto;
}


/* Mailing list
/* ---------------------------------------------------- */
.newsletter { padding-top: 20em; padding-bottom: 20em; }
.newsletter.align-left { padding-left: 30%; }
.newsletter.align-right { padding-right: 30%; }

.newsletter.sven .illustration {
  top: 15%;
  min-height: 90vh;
}

.newsletter.edda .illustration {
  top: 13%;
  min-height: 80vh;
}
.newsletter.align-left.edda .illustration { right: 5vw; }

.newsletter > section { width: 23.68em; }
.newsletter.align-right > section { margin: 0 0 0 auto; }

.form-newsletter input, .form-newsletter button { 
  padding: 0 0.5em;
  height: 2em; 
  line-height: 2em; 
  vertical-align: middle;
}

.form-newsletter button { padding-left: 1em; padding-right: 1em; }


/* Marchandise
/* ---------------------------------------------------- */
.marchandise { padding-top: 20em; padding-bottom: 20em; }
.marchandise.align-left { padding-left: 30%; }
.marchandise.align-right { padding-right: 30%; }

.marchandise.sven .illustration {
  top: 15%;
  min-height: 90vh;
}

.marchandise.edda .illustration {
  top: 13%;
  min-height: 80vh;
}
.marchandise.align-left.edda .illustration { right: 5vw; }

.marchandise > section > p { max-width: 20em; }
.marchandise.align-right > section > p { margin-left: auto; }

.logo-button {
  display: inline-block;
  padding: 0.65em 2.25em;
}

.logo-button img {
  display: block;
  max-width: 100%;
  max-height: 2em;
  width: auto;
  height: auto;
  margin: auto;
}


/* ---------------------------------------------------- */
/* Footer
/* ---------------------------------------------------- */
body > footer {
  position: relative;
  margin-top: 0;
  padding: 0 0 5em;

  text-transform: uppercase;
  text-align: center;
}

.crazy-vh body > footer{
  margin-top: 40%;
}

body > footer > * {
  position: relative;
  z-index: 2;
}

.sponsors { margin-bottom: 6em; }
.sponsors img {
  display: inline-block;
  max-width: 100%;
  max-height: 3em;
  margin: 1em;
  vertical-align: middle;
}

.footer-nav {
  margin-bottom: 3em;

  font-size: 0.95em;
  font-weight: bold;
  line-height: 1;
}

.footer-nav li { display: inline-block; }
.footer-nav li + li { 
  margin-left: 1em;
  padding-left: 1em;
  border-left: 1px solid;
}

.footer-nav a { color: inherit; }

.footer-nav a:hover { color: #63c5b7; }

.copyright { font-size: 0.68em; }



/* ==================================================== */
/* LIGHTBOX
/* ==================================================== */
body.vbox-open { overflow: hidden; }

.vbox-overlay {
  position: fixed;
  z-index: 999;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.9);
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.vbox-preloader {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
}

.vbox-container {
  position: relative;
  margin: 15vh 10vw;
  max-width: 80%;
  max-height: 80%;
}

.vbox-container .icon { color: inherit; }
.vbox-container .icon:hover { color: #63c5b7; }
.vbox-container .icon svg { max-width: 100%; max-height: 100%; }

.vbox-close,
.vbox-prev,
.vbox-next,
.vbox-title,
.vbox-num,
.vbox-caption {
  position: absolute;
  cursor: pointer;
}

.vbox-close { 
  bottom: 100%; right: 0; 
  width: 1em; height: 1em;  
  margin-bottom: 0.5em;
}

.vbox-prev, .vbox-next { 
  top: 0; bottom: 0; 
  height: 2em;
  width: 1em;
  margin: auto 0.5em;
  
}
.vbox-prev { right: 100%; }
.vbox-next { left: 100%; }

.vbox-caption, .vbox-num {
  top: 100%;
  margin-top: 0.5em;
}
.vbox-caption { left: 0; right: 5em; }
.vbox-num { right: 0; }

.vbox-content > * {
  max-width: 70vw;
  max-height: 80vh;
}

.vbox-content img { display: block; }

.venoframe {
  border: none;
  width: 80vw;
  height: 45vw;
}




/* ==================================================== */
/* MAX, À NETTOYER
/* ==================================================== */
.section-wrapper > section + section {
  margin-top: 6.68em;
}

#about.section-wrapper > section {
  width: 25em;  
}

#about.section-wrapper > section + section{
  margin-left: 22vw;  
}


/* BEGIN : Un fix pour couvrir un style qui devra partir dans style.css */
section.block-screenshots .gallery {
  float: none !important;
  width: auto !important;
  margin: auto !important;
}
/* END */


a {
  outline: none;
}



/* ==================================================== */
/* RESPONSIVE
/* ==================================================== */
@media screen and (min-width: 100em) {
  #about.section-wrapper > section { width: 25vw; }
  
  .freya .illustration { right: 5%; }
  .ulfir .illustration { left: 5%; }
  .lif .illustration { right: 7%; }
}

@media (max-width: 90em) {
  .marchandise.align-left { padding-left: 10vw; }
  .marchandise.align-right { padding-right: 10vw; }
  .marchandise section > h1 { position: static; }
  .marchandise.align-left section > h1 { text-align: left; }
  .marchandise.align-right section > h1 { text-align: right; }
}

@media screen and (max-width: 768px) {
  .section-wrapper.media { padding: 0; }
}