/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * require settings
 * require_directory ./blocks
 * require_directory ./custom
 */
@font-face {
  font-family: "Graphit";
  font-weight: 600;
  src: url(/assets/398BAC_0_0-6b239b00005aaa374991b6527146018ec570b84194f4df0853de400546e51c96.eot);
  src: url(/assets/398BAC_0_0-6b239b00005aaa374991b6527146018ec570b84194f4df0853de400546e51c96.eot?#iefix) format("embedded-opentype"), url(/assets/398BAC_0_0-092540cf3263a3963d13ce10181b25359093b6b746763615e3696e966b7115ce.woff2) format("woff2"), url(/assets/398BAC_0_0-117106939d248ae873d7544e03065eb8fa9e0e72a09b78a5ca41a26b37bbddcd.woff) format("woff"), url(/assets/398BAC_0_0-4292e77d8325657b1a9ebb3878725c5f061a750d23c86b2b15afb5020240e7a9.ttf) format("truetype");
}

@font-face {
  font-family: "Graphit";
  font-weight: 40;
  src: url(/assets/398BAC_1_0-c5ac891ef6bbe7d2e71e4ffd17e838e35ee1f903ffc8ba1d6a18283f9f359f6a.eot);
  src: url(/assets/398BAC_1_0-c5ac891ef6bbe7d2e71e4ffd17e838e35ee1f903ffc8ba1d6a18283f9f359f6a.eot?#iefix) format("embedded-opentype"), url(/assets/398BAC_1_0-15e143963ae8ea9cc06472e6b8452b5db6bf36a8d4258e05b4955641dc6986b5.woff2) format("woff2"), url(/assets/398BAC_1_0-047417892e27ba8ab4d31c89e43af6a37d768a081559abb5a3d11644f388e7c7.woff) format("woff"), url(/assets/398BAC_1_0-baabfbd923c9106432163fc693713838eee52931d4ddc5f7192cd1e10425a24a.ttf) format("truetype");
}

@font-face {
  font-family: "Ivar Display";
  src: url(/assets/IvarDisplay-Regular-36e84a734e04075da0cd7f332575e362cd4a45cb3b4646fb9e839623ef46c841.woff2) format("woff2"), url(/assets/IvarDisplay-Regular-a510e12c823e18fb10d49656120de44cb46cd40db937699c3c0f488772725e47.woff) format("woff");
}

@font-face {
  font-family: "Ivar Soft";
  src: url(/assets/IvarSoft-Regular-14b3716efe5c1be824499d61507844997e65c698506d1f3f787c20905240758b.woff2) format("woff2"), url(/assets/IvarSoft-Regular-9ae0cbda4c0d206f86b5e7e479b5d085816604d5df10b3c8dadfa0c1098ea239.woff) format("woff");
}

@font-face {
  font-family: "Ivar Text";
  src: url(/assets/IvarText-Regular-df034f2cb05e541b00f153f7bd4653aab1f2509771f6f2d2e143cba4b4550a5c.woff2) format("woff2"), url(/assets/IvarText-Regular-50f68a0b47266c2b08caef679f79d138f4f0b31a72a6f98a4dcf1e578ff124f4.woff) format("woff");
}

@font-face {
  font-family: "Ivar Text";
  font-weight: bold;
  src: url(/assets/IvarText-Bold-e3681f423cc540b290e3ce8c4384e5bd1fb39b0b2d129714c8defeab58a11ad7.woff2) format("woff2"), url(/assets/IvarText-Bold-cdc99cbad29ac9d3856eeaae1e700078b486ea2f297ced5b80cc739b58ca5afe.woff) format("woff");
}

/* line 2, app/assets/stylesheets/blocks/_navbar.css.scss */
.navbar--translucent::after {
  background: -moz-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  /* IE6-9 */
  position: absolute;
  display: block;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
}

/* line 1, app/assets/stylesheets/custom/_keyboard.css.scss */
.keyboard {
  display: flex;
  justify-content: center;
  margin: 0 5vw;
  background-color: #343434;
  height: 20vw;
  width: 90vw;
  border-radius: 10px;
  position: relative;
  align-items: flex-start;
}

/* line 13, app/assets/stylesheets/custom/_keyboard.css.scss */
.keyboard__keys {
  justify-content: space-between;
  display: flex;
  position: absolute;
  left: 5%;
  right: 5%;
  top: 17%;
  bottom: -2%;
}

/* line 23, app/assets/stylesheets/custom/_keyboard.css.scss */
.octave {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-self: center;
}

/* line 33, app/assets/stylesheets/custom/_keyboard.css.scss */
.octave-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* line 42, app/assets/stylesheets/custom/_keyboard.css.scss */
.black-key {
  width: 12.52%;
  height: 60%;
  margin: 0 0.25%;
  background-color: #242424;
  border-radius: 2%;
}

/* line 50, app/assets/stylesheets/custom/_keyboard.css.scss */
.white-key {
  width: 12.52%;
  height: 100%;
  margin: 0 0.5%;
  background-color: #ffffff;
  border-radius: 2%;
}

/* line 58, app/assets/stylesheets/custom/_keyboard.css.scss */
.white-chonk {
  height: 39%;
  margin: 0 0.5%;
  background-color: #ffffff;
  border-radius: 2%;
}

/* line 65, app/assets/stylesheets/custom/_keyboard.css.scss */
.white-chonk--skinny {
  width: 21.3%;
}

/* line 69, app/assets/stylesheets/custom/_keyboard.css.scss */
.white-chonk--thicc {
  width: 22.4%;
}

/* line 1, app/assets/stylesheets/custom/_main.css.scss */
.static_pages.main {
  /* Text animation */
}

/* line 2, app/assets/stylesheets/custom/_main.css.scss */
.static_pages.main .lik-gray {
  background-color: #5f5f5f;
}

/* line 6, app/assets/stylesheets/custom/_main.css.scss */
.static_pages.main .hero-content-padding {
  padding-top: 200vh;
}

/* line 11, app/assets/stylesheets/custom/_main.css.scss */
.static_pages.main .is-hidden {
  color: #5f5f5f;
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* line 38, app/assets/stylesheets/custom/_main.css.scss */
.static_pages.main .fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
  animation-duration: 500ms;
  animation-fill-mode: both;
  -webkit-animation-duration: 500ms;
  -webkit-animation-fill-mode: both;
}