/* FONTS */

@font-face {
  font-family: 'Standard';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/standard-book-webfont.eot'); /* IE9 Compat Modes */
  src: url('fonts/standard-book-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/standard-book-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/standard-book-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/standard-book-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/standard-book-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: "Standard";
  font-weight: normal;
  font-style: italic;
  src: url('fonts/standard-book-italic-webfont.eot'); /* IE9 Compat Modes */
  src: url('fonts/standard-book-italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/standard-book-italic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/standard-book-italic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/standard-book-italic-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/standard-book-italic-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: "Standard";
  font-weight: bold;
  font-style: normal;
  src: url('fonts/standard-bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('fonts/standard-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/standard-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/standard-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/standard-bold-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/standard-bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: "Standard";
  font-weight: bold;
  font-style: italic;
  src: url('fonts/standard-bold-italic-webfont.eot'); /* IE9 Compat Modes */
  src: url('fonts/standard-bold-italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/standard-bold-italic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/standard-bold-italic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/standard-bold-italic-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/standard-bold-italic-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* GLOBAL */
:root {
  --bd-theme-color: rgb(255, 39, 138); /* brighter */
  --bd-theme-color: rgb(229,0,105); /* darker */
}

*,
*:before,
*:after {
  box-sizing                 : border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html {
  height                  : 100%;
  font-family: "Standard", sans-serif;
  color: var(--bd-theme-color);
  -ms-text-size-adjust    : 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #fff;
}

body {
  margin          : 0;
  background-color: #fff;
}

a {
  background-color: transparent;
}

a:active,
a:hover,
a:focus {
  outline: 0;
}

img {
  border: 0;
}


/* LAYOUT */

.header {
  position: fixed;
  width: 100%;
  display: block;
  z-index: 2;
}

.stage {
  display        : flex;
  flex-direction : column;
  justify-content: flex-start;
  align-content  : center;
  align-items    : center;
  align-content  : center;
  position       : absolute;
  bottom         : 0;
  left           : 0;
  right          : 0;
  top            : 0;
  width          : 100%;
  height         : 100%;
  z-index        : 1;
}

.content-container {
  flex-grow        : 0;
  flex-shrink      : 1;
  flex-basis       : auto;
  align-self       : auto;
  position         : absolute;
  position         : relative;
  display          : none;
  width            : 100%;
  /* max-width        : 768px; */
  /* height: 100%; */
  margin           : auto;
  padding      : 0;
}


.debug-bug {
  position: fixed;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 10;
}
.debug-bug a {
  color: var(--bd-theme-color);
  display: block;
}


/* HEADER / NAVIGATION */

.logo {
  position: relative;
  left: 0;
  top: 0;
  display: inline-block;
  z-index: 1;
  color: var(--bd-theme-color);
  margin: 0;
  padding: 1rem;
  font-size: 3vmin; /* 2rem; */ /* 32px */
  line-height: 1.2em;
  font-weight: normal;
  text-decoration: none;
}


.menu-main {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 1rem;
  font-size: 3vmin; /* 2rem; */ /* 32px */
  line-height: 1.2em;
  font-weight: normal;
  text-decoration: none;
}

.menu-main-burger {
  color: var(--bd-theme-color);
}


.menu-main-links {
  display: none;
}

.menu-main-links-item {
  color: var(--bd-theme-color);
  text-decoration: none;
  display: block;
}

.menu-main-links-item:hover,
.menu-main-links-item:active {
  text-decoration: underline;
}



/* HOME */

.home-words {
  position: relative;
  z-index: 1;
  /* pointer-events: none; */
  overflow: hidden;
  /* outline: 1px dotted rgba(229,0,105,.25); */
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 15vmin 12vmin;
}

.home-words .home-word {
  position: relative;
  font-size: 3vmin;
  line-height: 1.2em;
  padding: 3vmin;
}

@media (max-width: 414px) {
  .home-words {
    padding: 15vmin 12vmin;
  }
  .home-words .home-word {
    padding: 3vmin;
  }
}

.home-words .home-word a {
  pointer-events: visible;
  text-decoration: none;
  opacity: 1;
  color: var(--bd-theme-color);
  transition: opacity 750ms ease-out;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}


.home-words .home-word a:hover,
.home-words .home-word a:active {
  text-decoration: underline;
}

.home-words .home-word.active a {
  opacity: 1;
}

/* DETAIL - WORDS */

.words-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  padding: 15vmin 12vmin;
  pointer-events: none;
}

#words {
  width: 100%;
  height: 100%;
  position: relative;
  /* outline: 1px dotted rgba(229,0,105,.25); */
}

.words-item {
  position: absolute;
  font-size: 4vmin;
  line-height: 1.2em;
}

.is-wrapped {
  word-wrap: break-word;
  overflow-wrap: anywhere;  
}

@media (max-width: 600px) { /* TODO: Typo */
  .words-item {
    font-size: 5vmin;
  }
  
}
.words-item a {
  pointer-events: none;
  text-decoration: none;
  opacity: 0;
  color: var(--bd-theme-color);
  transition: opacity 3000ms ease-out;
}
.words-item a:hover,
.words-item a:active {
  text-decoration: underline;
}

.words-item.is-active a {
  opacity: 1;
  pointer-events: visible;
}


section#home {

}
#home-words a {
  display: inline-block;

}


.btn-credits {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 11;
  color: var(--bd-theme-color);
  margin: 0;
  padding: 1rem;
  font-size: 3vmin;
  line-height: 1.2em;
  font-weight: normal;
  text-decoration: none;
}

/* OVERVIEW */

#overview header.ov-header-container {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 80vmax;
  margin: 0;
  padding: 0;
  pointer-events: none;
  text-align: center;
  z-index: 5;
}

#overview h1.ov-header {
  transition: font-size 250ms ease-in-out;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1em;

  /* NEW Styles */
  -webkit-text-stroke: 1px rgb(229,0,105);
  text-stroke: 1px rgb(229,0,105);
  color: transparent;
  font-style: italic;
  
}

@media (orientation: portrait) {
  #overview header.ov-header-container {
    left: 0vw;
    transform: translate(-50%, -50%);
  }

  #overview h1.ov-header {
    transform: rotate(90deg) translate(0%, -60%);
  }
}


#overview .cluster {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 4;
   -webkit-column-gap:   0px;
   -moz-column-count:    4;
   -moz-column-gap:      0px;
   column-count:         4;
   column-gap:           0px;  
}

#overview h1.ov-header.is-active {
  filter: blur(0px);
}

/* Create two equal columns that sits next to each other */
#overview .cluster a {
  /* Just in case there are inline attributes */
  position: relative;
  display: block;
  width: 100% !important;
  transition: all 1000ms ease;
  overflow: hidden;
  transform: scale(1);
  z-index: 3;
}

#overview .cluster a::after {
  content: "here";
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  color: var(--bd-theme-color);
  right: 25px;
  bottom: 25px;
  width: 50px;
  height: 50px;
  background-color: rgba(229,0,105,.1);
  outline: 0.5px var(--bd-theme-color) dotted;
  z-index: 12;
  border-radius: 50%;
  transform: translate(0, 0);
}


#overview .cluster a img {
  position: relative;
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  transition: all 1000ms ease;
  filter: blur(0px);
  transform: scale(1);
  z-index: 2;
}

#overview .cluster a:hover,
#overview .cluster a:active {
  z-index: 4;
}

#overview .cluster a:hover img,
#overview .cluster a:active img {
  filter: blur(0);
  transform: scale(1.15);
  z-index: 1;
}


@media (max-width: 1915px) {
  #overview .cluster {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}

@media (max-width: 1279px) {
  #overview .cluster {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 955px) {
  #overview .cluster {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 414px) {
  #overview .cluster {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}


/* DETAIL */

section#detail aside {
  padding: 10vmin;
}


section#detail aside h1 {
  font-size: 3vmin;
  font-weight: 400;
}

section#detail aside p {
  color: black;
}

section#detail aside a {
  pointer-events: visible;
  text-decoration: none;
  color: var(--bd-theme-color);
  transition: opacity 750ms ease-out;
  display: inline-block;
  border-bottom: 1px dotted var(--bd-theme-color); /* darker */
}
section#detail aside a:hover,
section#detail aside a:active {
  border-bottom-style: solid;
}

/* DETAIL - SWIPER */

.swiper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}

.swiper-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 1000ms ease-out;
  opacity: 1;
  will-change: background-position; /* TODO: check if it's used in final version */
}

.swiper-slide-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20vmin;
  color: var(--bd-theme-color);
  filter: drop-shadow(4px 5px 10px rgba(0,0,0,1)) brightness(.8);
  /* -webkit-text-stroke: 2px rgb(229,0,105);
  color: transparent; */
}

.swiper-slide-img.focus {
  background-size: contain;
  transition: none;
}

.swiper-button-hidden {
  opacity: 0;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
}



.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}