/* SASS CLASSES */
* {
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

html,
body {
  height: 100vh;
  background: #000;
  position: absolute; }

body {
  margin: 0; }

::selection {
  background-color: transparent;
  color: #a4fa3e; }

::-moz-selection {
  background-color: transparent;
  color: #a4fa3e; }

.loading {
  pointer-events: none; }
  .loading .nav-link-text {
    text-shadow: 0 0 20px #fff;
    transition: all 0.8s; }

.nav-link-text {
  text-shadow: none;
  background-color: transparent;
  transition: all 0.8s;
  margin-bottom: 0; }

.nav-link {
  padding: 1rem 1.5rem; }

a {
  pointer-events: auto; }

a:hover {
  text-decoration: none;
  color: #a4fa3e; }

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0; }

/* -----------------------------------------------------------------------------
                           - - - >>> TYPOGRAPHY <<< - - -
----------------------------------------------------------------------------- */
p,
a,
h1,
h2,
h3,
h4,
h5 {
  font-family: "Arial", sans-serif;
  color: #fff; }

p {
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.03em; }

/* -----------------------------------------------------------------------------
                         - - - >>> SCROLLHINTER <<< - - -
----------------------------------------------------------------------------- */
#scrollhintdiv,
#scrollhintdiv.active {
  opacity: 1;
  transition: all 2s;
  color: #fff;
  margin: 1rem auto 2rem auto;
  bottom: 0;
  left: 50%;
  position: fixed;
  min-width: 200px;
  transform: translate(-50%, 0);
  max-width: 300px;
  text-align: center;
  height: 88px; }
  #scrollhintdiv div,
  #scrollhintdiv.active div {
    margin-bottom: 1rem; }
  #scrollhintdiv .moveUpDown,
  #scrollhintdiv.active .moveUpDown {
    animation: MoveUpDown 3s linear infinite;
    margin: 0 auto;
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #fff;
    width: 100%; }

#scrollhintdiv.inactive {
  opacity: 0;
  transition: all 3s; }

@keyframes MoveUpDown {
  0%,
  100% {
    bottom: 0; }
  50% {
    bottom: 20px; } }

.scene {
  height: 100vh;
  width: 100vw;
  display: block; }

.trigger {
  opacity: 0;
  min-height: 1px;
  max-height: 1px;
  width: 100%; }

/* -----------------------------------------------------------------------------
                         - - - >>> MOBILEHINTER <<< - - -
----------------------------------------------------------------------------- */
#mobilehintdiv {
  z-index: 9999;
  display: flex;
  text-align: center;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  height: 32px;
  width: 100%;
  background: #404040; }
  #mobilehintdiv div {
    display: flex;
    text-align: center;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 20px;
    line-height: 32px;
    text-align: center;
    width: 100%; }
    #mobilehintdiv div p {
      font-size: 10px;
      text-transform: uppercase;
      text-align: center;
      margin: 0; }
    #mobilehintdiv div i {
      margin-left: 20px; }

/* -----------------------------------------------------------------------------
                           - - - >>> INTROSCENES <<< - - -
----------------------------------------------------------------------------- */
.introdiv {
  position: absolute;
  display: block;
  transition: all 3s;
  margin: 0 0 10vh 0; }

.introimg {
  height: 100vh;
  width: 100vw;
  background-position: center;
  background-size: 165%;
  background-repeat: no-repeat;
  position: fixed;
  opacity: 0;
  z-index: 1;
  padding: 10vh 10vw; }

.introimg.current {
  z-index: 3; }

.introdiv.inactive {
  z-index: 0;
  opacity: 0;
  display: none;
  height: 0;
  transition: all 3s;
  display: none; }

#blank.introimg {
  background-color: #000; }

/* -----------------------------------------------------------------------------
                           - - - >>> TITLE SCENE <<< - - -
----------------------------------------------------------------------------- */
.titlediv {
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 1;
  z-index: 9000;
  position: fixed;
  padding: 20px;
  transition: all 3s; }
  .titlediv .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2vw;
    height: 4vw; }

.cloudtext,
.titlediv > .row {
  height: 10vw;
  line-height: 10vw; }

.titlediv.inactive {
  display: none;
  opacity: 0;
  transition: all 3s; }

.cloudtext,
.cloudtext.dummy {
  position: relative; }

.cloudtext {
  margin-left: -2vw; }

.cloudtext.dummy {
  margin: 0 2vw;
  width: 1vw; }

.titleDiv.inactive {
  display: none; }

/* -----------------------------------------------------------------------------
                              - - - >>> MAIN <<< - - -
----------------------------------------------------------------------------- */
.main.inactive {
  opacity: 0;
  display: none; }

.image-wrapper {
  opacity: 0;
  top: auto;
  left: auto;
  transition: position 0s;
  height: 50px; }
  .image-wrapper .image-thumb {
    max-width: 30px; }

.main {
  display: block;
  margin: 0;
  position: absolute;
  z-index: 2000;
  padding: 20px;
  width: 100%; }

.main.grid-view {
  display: flex;
  justify-content: flex-start;
  text-align: center;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 10px 10px 18% 10px; }

.main.visible {
  opacity: 1;
  z-index: 8000;
  position: fixed; }
  .main.visible .image-wrapper {
    z-index: 9000; }

#page-title {
  text-align: center;
  font-size: 24px; }

.fancybox-container,
.fancybox-infobar,
.fancybox-button {
  font-family: "Arial", sans-serif; }

.fancybox-is-open .fancybox-bg,
.fancybox-button,
.fancybox-infobar {
  background: #000;
  opacity: 1; }

.fancybox-slide {
  padding: 0; }

.fancybox-infobar {
  display: none; }

.fancybox-button {
  background: none; }

.fancybox-thumbs {
  background: #fff;
  width: 326px;
  padding: 0;
  background: linear-gradient(1deg, #f9f9f9, #99d5e2);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 20s ease infinite;
  -moz-animation: AnimationName 20s ease infinite;
  animation: AnimationName 20s ease infinite; }

@-webkit-keyframes AnimationName {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 51% 100%; }
  100% {
    background-position: 50% 0%; } }

@-moz-keyframes AnimationName {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 51% 100%; }
  100% {
    background-position: 50% 0%; } }

@keyframes AnimationName {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 51% 100%; }
  100% {
    background-position: 50% 0%; } }

.fancybox-button--thumbs {
  display: none; }

.fancybox-show-thumbs .fancybox-inner {
  right: 346px; }

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 0; }

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
  border-radius: 0;
  box-shadow: none; }

.fancybox-thumbs__list a {
  background-color: rgba(0, 0, 0, 0);
  height: 108px; }

.fancybox-thumbs__list a:before {
  border: 1px red dotted; }

#closebutton {
  right: 5vw;
  position: fixed; }
  #closebutton p {
    transition: all 1s; }

#closebutton:hover p {
  color: #a4fa3e;
  text-decoration: none;
  transition: all 1s; }

/* -----------------------------------------------------------------------------
                           - - - >>> INFOBOX <<< - - -
----------------------------------------------------------------------------- */
#infobox {
  display: block;
  height: 100%;
  width: 100vw;
  padding: 2vw;
  margin: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 1s;
  background-color: #131412;
  position: fixed;
  z-index: 9000;
  overflow: scroll;
  z-index: 9999; }
  #infobox p {
    color: #fff; }
  #infobox #infotitle {
    width: 100%;
    font-size: 2.2em; }
    #infobox #infotitle .row {
      text-align: center; }
      #infobox #infotitle .row h5 {
        font-weight: bold;
        margin-bottom: 4vh; }
  #infobox .dummy {
    width: 20px; }

#infobox.inactive {
  visibility: hidden;
  opacity: 0;
  transition: all 1s; }

.infotext {
  width: 30px; }

#infobox::-webkit-scrollbar {
  width: 10px; }

#infobox::-webkit-scrollbar-track {
  border-color: #fff; }

#infobox::-webkit-scrollbar-thumb {
  background-color: #fff; }

/* -----------------------------------------------------------------------------
                         - - - >>> NAVBAR-DIV <<< - - -
----------------------------------------------------------------------------- */
.navbar-div {
  padding: 0 0 20px 20px;
  position: fixed;
  bottom: 0;
  margin: 0;
  opacity: 0;
  width: 100%;
  text-align: center;
  justify-content: left;
  list-style: none; }
  .navbar-div .nav-item {
    background: none;
    margin-right: 20px; }
  .navbar-div .nav-item:last-child {
    margin-right: 0; }

.nav-item:first-child:hover p {
  color: red; }

.nav-item:nth-child(2):hover p {
  color: blue; }

.nav-item:nth-child(3):hover p {
  color: green; }

.navbar-div.visible {
  opacity: 1;
  transition: all 5s;
  z-index: 9500; }

/* #############################################################################
   #############################################################################
                         - - - >>> BIG SCREENS <<< - -
   #############################################################################
   ########################################################################## */
@media (min-width: 829px) {
  /* #############################################################################
                         - - - >>> MOBILEHINTER <<< - - -
############################################################################# */
  #mobilehintdiv {
    display: none; }
  /* #############################################################################
                           - - - >>> INTROSCENES <<< - - -
############################################################################# */
  .introimg {
    height: 100vh;
    width: 100vw;
    padding: 10vh 10vw;
    background-size: 95%; }
  .introimg.current {
    z-index: 3; }
  .introdiv.inactive {
    z-index: 0;
    opacity: 0;
    height: 0;
    transition: all 1s; }
  /* #############################################################################
                           - - - >>> TITLE SCENE <<< - - -
############################################################################# */
  .cloudtext,
  .titlediv > .row {
    height: 8vw; }
  .cloudtext.dummy {
    margin: 0 1vw;
    width: 0.5vw; }
  #infobox {
    min-height: 100vh;
    padding: 4vw; }
  /* #############################################################################
                         - - - >>> MAIN SCENE <<< - - -
############################################################################# */
  .main.grid-view {
    padding: 6%; }
  .image-wrapper {
    margin: 10px; }
    .image-wrapper .image-thumb {
      max-width: 50px; }
  .fancybox-button--thumbs {
    display: inline-block; }
  /* ############################################################################
                         - - - >>> NAVBAR-DIV <<< - - -
############################################################################  */ }