/*druk*/
@font-face {
  font-family: 'Druk XXCondensed';
  src: url("../fonts/druk/Druk-XXCondSuper.otf");
}

@font-face {
  font-family: 'Druk XCondensed';
  src: url("../fonts/druk/Druk-XCondSuper.otf");
}

@font-face {
  font-family: 'Druk Medium';
  src: url("../fonts/druk/Druk-Medium.otf");
}

@font-face {
  font-family: 'Druk Bold';
  src: url("../fonts/druk/Druk-Bold.otf");
}

@font-face {
  font-family: 'Druk Heavy';
  src: url("../fonts/druk/Druk-Heavy.otf");
}

@font-face {
  font-family: 'Druk Super';
  src: url("../fonts/druk/Druk-Super.otf");
}

@font-face {
  font-family: 'DrukText Medium';
  src: url("../fonts/druk/DrukText-Medium.otf");
}

@font-face {
  font-family: 'DrukText Bold';
  src: url("../fonts/druk/DrukText-Bold.otf");
}

@font-face {
  font-family: 'DrukText Heavy';
  src: url("../fonts/druk/DrukText-Heavy.otf");
}

@font-face {
  font-family: 'DrukText Super';
  src: url("../fonts/druk/DrukText-Super.otf");
}

@font-face {
  font-family: 'DrukTextWide Medium';
  src: url("../fonts/druk/DrukTextWide-Medium.otf");
}

@font-face {
  font-family: 'DrukTextWide Bold';
  src: url("../fonts/druk/DrukTextWide-Bold.otf");
}

@font-face {
  font-family: 'DrukTextWide Heavy';
  src: url("../fonts/druk/DrukTextWide-Heavy.otf");
}

@font-face {
  font-family: 'DrukTextWide Super';
  src: url("../fonts/druk/DrukTextWide-Super.otf");
}

@font-face {
  font-family: 'DrukWide Medium';
  src: url("../fonts/druk/DrukWide-Medium.otf");
}

@font-face {
  font-family: 'DrukWide Bold';
  src: url("../fonts/druk/DrukWide-Bold.otf");
}

@font-face {
  font-family: 'DrukWide Heavy';
  src: url("../fonts/druk/DrukWide-Heavy.otf");
}

@font-face {
  font-family: 'DrukWide Super';
  src: url("../fonts/druk/DrukWide-Super.otf");
}

/* sharp grotesk */
@font-face {
  font-family: 'SharpGrotesk Black Italic';
  src: url("../fonts/sharp_grotesk/SharpGrotesk-BlackItalic.otf");
}

/* bodoni */
@font-face {
  font-family: 'Bodoni Black Italic';
  src: url("../fonts/bodoni/BodoniStd-PosterItalic.otf");
}

/* suisse */
@font-face {
  font-family: 'Suisse Light';
  src: url("../fonts/suisse/SuisseIntl-Light_0.otf");
}

@font-face {
  font-family: 'Suisse Regular';
  src: url("../fonts/suisse/SuisseIntl-Regular_0.otf");
}

@font-face {
  font-family: 'Suisse Book';
  src: url("../fonts/suisse/SuisseIntl-Book_0.otf");
}

@font-face {
  font-family: 'Suisse Medium';
  src: url("../fonts/suisse/SuisseIntl-Medium_0.otf");
}

@font-face {
  font-family: 'Suisse Semibold';
  src: url("../fonts/suisse/SuisseIntl-SemiBold_0.otf");
}

@font-face {
  font-family: 'Suisse Bold';
  src: url("../fonts/suisse/SuisseIntl-Bold_0.otf");
}

@keyframes padding_left {
  0% {
    padding-left: 10px;
  }

  100% {
    padding-left: 500px;
  }

}

@keyframes padding_right {
  0% {
    padding-right: 10px;
  }

  100% {
    padding-right: 500px;
  }

}

@keyframes padding_top {
  0% {
    padding-top: 10px;
  }

  100% {
    padding-top: 500px;
  }

}

@keyframes padding_bottom {
  0% {
    padding-bottom: 10px;
  }

  100% {
    padding-bottom: 500px;
  }

}

@keyframes stretch_h {
  0% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(2, 1);
  }

}

@keyframes stretch_v {
  0% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 3);
  }

}

@keyframes scale {
  0% {
    font-size: 5em;
  }

  100% {
    padding-bottom: 75em;
  }

}

.griddin_content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.guide .info {
  visibility: hidden !important;
}

.griddin_content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.guide .info {
  visibility: hidden !important;
}

* {
  box-sizing: border-box;
}

.box {
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
}

::selection {
  color: black;
  background: transparent;
}

.p5_deco {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}

#sliders {
  position: fixed;
  width: 350px;
  top: 2%;
  right: 4%;
  z-index: 500000000;
}

.slider_container {
  padding-top: 13%;
}

.slider {
  width: 70%;
  float: right;
  height: 2px;
  border: none !important;
  background-color: black;
}

.slider_name {
  float: right;
  font-family: 'Suisse Medium', sans-serif;
  margin-right: 1em;
  line-height: 1;
}

.name_cont {
  width: 30%;
  float: left;
  margin-top: -2%;
}

#empty_handle, #uppercase_handle, #lowercase_handle, #image_handle, #video_handle {
  width: 3.3em;
  height: 1.8em;
  top: 50%;
  margin-top: -0.9em;
  text-align: center;
  line-height: 1.6em;
  border: 2px solid black;
  border-radius: 0 !important;
  background-color: white;
  font-family: 'Suisse Medium', sans-serif;
  font-size: 0.9em;
  color: black;
  outline: none;
}

#controls {
  position: fixed;
  top: 5%;
  left: 4%;
  z-index: 5000000000;
}

#play_button {
  background-color: transparent;
  border: 3px solid white;
  border-radius: 0;
  outline: none;
  width: 36px;
  padding: 0;
  margin: 0;
}

#play_button img {
  width: 100%;
  padding: 0.7em 0.7em 0.55em 0.9em;
}

#help_button {
  position: fixed;
  width: 2%;
  bottom: 5%;
  left: 4%;
  font-family: 'Suisse Medium', sans-serif;
  font-size: 2em;
  color: white;
  cursor: default;
  z-index: 5000000000;
}

#help_screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900000000;
  background-color: rgba(0, 0, 0, 0.8);
}

.griddin_intro {
  position: absolute;
  top: 30%;
  left: 30%;
  color: white;
  font-size: 3em;
  font-family: 'Suisse Regular', sans-serif;
}

.griddin_headline {
  display: inline-block;
  border-bottom: 4px solid white;
  line-height: 1.1;
}

.griddin_shortcuts p {
  line-height: 0.5;
}

.play_help {
  position: absolute;
  top: 6%;
  left: 7.5%;
  color: white;
  font-size: 1em;
  font-family: 'Suisse Light', sans-serif;
  letter-spacing: 0.5px;
}

.guides_help {
  position: absolute;
  top: 6%;
  left: 30%;
  width: 27%;
  color: white;
  font-size: 1em;
  font-family: 'Suisse Light', sans-serif;
  line-height: 150%;
  letter-spacing: 0.5px;
}

.sliders_frame {
  position: absolute;
  width: 390px;
  top: 4%;
  right: 2.7%;
  height: 245px;
  border: 1px solid white;
}

.sliders_help {
  position: absolute;
  top: 110%;
  left: 0;
  color: white;
  font-size: 1em;
  font-family: 'Suisse Light', sans-serif;
  letter-spacing: 0.5px;
}

.question_help {
  position: absolute;
  bottom: 6%;
  left: 6%;
  color: white;
  font-size: 1em;
  font-family: 'Suisse Light', sans-serif;
  letter-spacing: 0.5px;
}

/*# sourceMappingURL=main.css.map */