/* basic settings */
/* line 13, ../../styles/087.scss */
body {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

/* line 21, ../../styles/087.scss */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* line 27, ../../styles/087.scss */
html {
  box-sizing: border-box;
  font-family: sans-serif;
}

/* line 31, ../../styles/087.scss */
*, *:before, *:after {
  box-sizing: inherit;
}

/* line 35, ../../styles/087.scss */
body {
  background: #f47169;
  padding-left: 320px;
  background: linear-gradient(135deg, #f47069 0%, #f05755 100%);
}
/* line 41, ../../styles/087.scss */
body:after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: -moz-radial-gradient(bottom, ellipse cover, #e74f71 0%, rgba(231, 79, 113, 0) 100%);
  background: -webkit-radial-gradient(bottom, ellipse cover, #e74f71 0%, rgba(231, 79, 113, 0) 100%);
  z-index: 1;
}

/* the very basic outline */
/* line 55, ../../styles/087.scss */
aside {
  position: relative;
  float: left;
  width: 320px;
  height: 100%;
  margin-left: -320px;
}

/* line 63, ../../styles/087.scss */
nav {
  position: relative;
  height: 100%;
  z-index: 2;
}
/* line 68, ../../styles/087.scss */
nav ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style-type: none;
  margin: 0 auto;
  max-width: 125px;
  width: 14vh;
  padding: 0;
  box-shadow: -1px 13px 58px -14px rgba(0, 0, 0, 0.75);
}
/* line 81, ../../styles/087.scss */
nav li {
  position: relative;
  height: 0;
  padding-bottom: 100%;
}
/* line 86, ../../styles/087.scss */
nav li.active {
  background: #fff !important;
}
/* line 90, ../../styles/087.scss */
nav li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
  height: 20px;
}
/* line 100, ../../styles/087.scss */
nav li.active:before, nav li:first-child:before {
  display: none;
}
/* line 105, ../../styles/087.scss */
nav li:nth-child(1) {
  background: #f0807d;
}
/* line 109, ../../styles/087.scss */
nav li:nth-child(2) {
  background: #e4807f;
}
/* line 113, ../../styles/087.scss */
nav li:nth-child(3) {
  background: #de858b;
}
/* line 117, ../../styles/087.scss */
nav li:nth-child(4) {
  background: #e46979;
}
/* line 121, ../../styles/087.scss */
nav li:nth-child(5) {
  background: #e65c75;
}

/* line 127, ../../styles/087.scss */
.main {
  position: relative;
  background: #fff;
  z-index: 2;
  height: 100%;
  width: 100%;
  float: left;
  box-shadow: -20px 2px 100px -20px rgba(0, 0, 0, 0.3);
  overflow-x: hidden;
}

/* line 139, ../../styles/087.scss */
.container {
  padding: 80px 0;
}

/* line 145, ../../styles/087.scss */
.control {
  position: relative;
  min-height: 360px;
}

/* the note meter */
/* line 151, ../../styles/087.scss */
.note-meter {
  padding: 70px 0 50px 0;
  position: relative;
}
/* line 155, ../../styles/087.scss */
.note-meter .needle {
  position: absolute;
  top: 0;
  left: 49%;
  width: 2px;
  height: 185px;
  background: #e75863;
  z-index: 5;
}
/* line 164, ../../styles/087.scss */
.note-meter .needle:after {
  position: absolute;
  top: -4px;
  left: -10px;
  content: '';
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 22px solid #e75863;
}
/* line 177, ../../styles/087.scss */
.note-meter ul {
  list-style-type: none;
  height: 150px;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 0 0 6px;
}
/* line 184, ../../styles/087.scss */
.note-meter ul li {
  height: 150px;
  width: 9%;
  float: left;
  text-align: center;
  position: relative;
  height: 150px;
  font-size: 13px;
  color: #dadada;
}
/* line 194, ../../styles/087.scss */
.note-meter ul li:before {
  position: absolute;
  content: '';
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 3;
}
/* line 204, ../../styles/087.scss */
.note-meter ul li:after {
  position: absolute;
  content: '';
  width: 2px;
  left: 50%;
  top: 0;
  background: #ebebeb;
  height: 100%;
  margin-left: -1px;
  display: block;
  z-index: 1;
}
/* line 217, ../../styles/087.scss */
.note-meter ul li:first-child:before, .note-meter ul li:last-child:before {
  height: 100px;
}
/* line 222, ../../styles/087.scss */
.note-meter ul li:nth-child(2):before, .note-meter ul li:nth-child(10):before {
  height: 80px;
}
/* line 227, ../../styles/087.scss */
.note-meter ul li:nth-child(3):before, .note-meter ul li:nth-child(9):before {
  height: 60px;
}
/* line 232, ../../styles/087.scss */
.note-meter ul li:nth-child(4):before, .note-meter ul li:nth-child(8):before {
  height: 40px;
}
/* line 237, ../../styles/087.scss */
.note-meter ul li:nth-child(5):before, .note-meter ul li:nth-child(7):before {
  height: 20px;
}
/* line 243, ../../styles/087.scss */
.note-meter ul li p {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 20px 0 0 0;
  z-index: 2;
}

/* the note dail */
/* line 258, ../../styles/087.scss */
.note-dail {
  perspective-origin: 0% 0%;
  display: block;
  margin: 0 auto;
  width: 360px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

/* numeric belt */
/* line 270, ../../styles/087.scss */
.numeric {
  width: 360px;
  height: 360px;
  position: absolute;
  border-radius: 50%;
  -webkit-clip-path: polygon(50% 0%, 50% 50%, 100% 0%);
  clip-path: polygon(50% 0%, 50% 50%, 100% 0%);
}
/* line 277, ../../styles/087.scss */
.numeric:after {
  content: '';
  position: absolute;
  width: 359px;
  height: 359px;
  border-radius: 50%;
  -webkit-clip-path: polygon(50% 0%, 50% 50%, 100% 0%);
  clip-path: polygon(50% 0%, 50% 50%, 100% 0%);
  cursor: pointer;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(1) {
  transform: rotateZ(45deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(1):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(1).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(45deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(1).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(1).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(45deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(2) {
  transform: rotateZ(90deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(2):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(2).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(90deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(2).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(2).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(90deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(3) {
  transform: rotateZ(135deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(3):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(3).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(135deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(3).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(3).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(135deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(4) {
  transform: rotateZ(180deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(4):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(4).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(180deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(4).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(4).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(180deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(5) {
  transform: rotateZ(225deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(5):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(5).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(225deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(5).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(5).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(225deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(6) {
  transform: rotateZ(270deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(6):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(6).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(270deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(6).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(6).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(270deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(7) {
  transform: rotateZ(315deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(7):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(7).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(315deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(7).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(7).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(315deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 290, ../../styles/087.scss */
.numeric:nth-of-type(8) {
  transform: rotateZ(360deg) rotateY(180deg);
}
/* line 292, ../../styles/087.scss */
.numeric:nth-of-type(8):after {
  background: #eeeeee;
  transform: translate(2px, -2px);
}
/* line 297, ../../styles/087.scss */
.numeric:nth-of-type(8).selected {
  width: 500px;
  height: 500px;
  transform: translate(-70px, -70px) rotateZ(360deg) rotateY(180deg);
}
/* line 302, ../../styles/087.scss */
.numeric:nth-of-type(8).selected:after {
  transition: background .5s ease;
  width: 499px;
  height: 499px;
  background: #c7c7c7;
}
/* line 310, ../../styles/087.scss */
.numeric:nth-of-type(8).selected:before {
  content: attr(title);
  display: block;
  position: absolute;
  transform: rotateZ(360deg) rotateY(180deg);
  right: 168.85563px;
  margin-right: -5px;
  width: 20px;
  text-align: center;
  top: 45px;
  color: #fff;
  z-index: 8;
}

/* line 328, ../../styles/087.scss */
.plate {
  width: 340px;
  height: 340px;
  left: 10px;
  top: 10px;
  position: absolute;
  border-radius: 50%;
  border: 60px solid #fff;
  z-index: 3;
}

/* scales shame here - solved by using svg */
/* line 340, ../../styles/087.scss */
.scale-outer,
.scale-inner {
  position: absolute;
  z-index: 2;
  width: 220px;
  height: 220px;
  top: 70px;
  left: 70px;
}

/* line 350, ../../styles/087.scss */
.scale-inner {
  background: #fff;
}

/* note belt */
/* line 355, ../../styles/087.scss */
.notes {
  position: absolute;
  width: 240px;
  height: 240px;
  left: 60px;
  top: 60px;
  z-index: 5;
}
/* line 363, ../../styles/087.scss */
.notes .note {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  -webkit-clip-path: polygon(50% 50%, 35% 0%, 65% 0%);
  clip-path: polygon(50% 50%, 35% 0%, 65% 0%);
}
/* line 373, ../../styles/087.scss */
.notes .note.selected {
  background: rgba(0, 0, 0, 0.1);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(1) {
  z-index: 6;
  transform: rotateZ(30deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(2) {
  z-index: 7;
  transform: rotateZ(60deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(3) {
  z-index: 8;
  transform: rotateZ(90deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(4) {
  z-index: 9;
  transform: rotateZ(120deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(5) {
  z-index: 10;
  transform: rotateZ(150deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(6) {
  z-index: 11;
  transform: rotateZ(180deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(7) {
  z-index: 12;
  transform: rotateZ(210deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(8) {
  z-index: 13;
  transform: rotateZ(240deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(9) {
  z-index: 14;
  transform: rotateZ(270deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(10) {
  z-index: 15;
  transform: rotateZ(300deg);
}
/* line 381, ../../styles/087.scss */
.notes .note:nth-of-type(11) {
  z-index: 16;
  transform: rotateZ(330deg);
}

/* line 388, ../../styles/087.scss */
.notes-label {
  position: absolute;
  width: 240px;
  height: 240px;
  left: 60px;
  top: 60px;
  z-index: 4;
}
/* line 396, ../../styles/087.scss */
.notes-label .note {
  position: absolute;
  color: #999999;
  width: 20px;
  text-align: center;
}
/* line 403, ../../styles/087.scss */
.notes-label .note:nth-of-type(1) {
  left: 50%;
  transform: translateX(-48%);
  top: 30px;
}
/* line 409, ../../styles/087.scss */
.notes-label .note:nth-of-type(2) {
  left: 68%;
  transform: translateX(-48%);
  top: 40px;
}
/* line 415, ../../styles/087.scss */
.notes-label .note:nth-of-type(3) {
  left: 80%;
  transform: translateX(-48%);
  top: 72px;
}
/* line 421, ../../styles/087.scss */
.notes-label .note:nth-of-type(4) {
  left: 85%;
  transform: translate(-48%, -50%);
  top: 50%;
}
/* line 427, ../../styles/087.scss */
.notes-label .note:nth-of-type(5) {
  left: 79%;
  transform: translateX(-48%);
  bottom: 68px;
}
/* line 433, ../../styles/087.scss */
.notes-label .note:nth-of-type(6) {
  left: 68%;
  transform: translateX(-48%);
  bottom: 40px;
}
/* line 439, ../../styles/087.scss */
.notes-label .note:nth-of-type(7) {
  left: 50%;
  transform: translateX(-35%);
  bottom: 30px;
}
/* line 445, ../../styles/087.scss */
.notes-label .note:nth-of-type(8) {
  right: 68%;
  transform: translateX(48%);
  bottom: 40px;
}
/* line 451, ../../styles/087.scss */
.notes-label .note:nth-of-type(9) {
  right: 79%;
  transform: translateX(48%);
  bottom: 68px;
}
/* line 457, ../../styles/087.scss */
.notes-label .note:nth-of-type(10) {
  right: 85%;
  transform: translate(48%, -50%);
  top: 50%;
}
/* line 463, ../../styles/087.scss */
.notes-label .note:nth-of-type(11) {
  right: 80%;
  transform: translateX(48%);
  top: 72px;
}
/* line 470, ../../styles/087.scss */
.notes-label .note:nth-of-type(12) {
  right: 68%;
  transform: translateX(48%);
  top: 40px;
}

/* line 479, ../../styles/087.scss */
.button {
  position: absolute;
  left: 120px;
  top: 120px;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background: #f47a75;
  color: #fff;
  cursor: pointer;
  border: 3px solid #ececec;
  z-index: 6;
}
/* line 493, ../../styles/087.scss */
.button span:first-child {
  display: none;
}
/* line 497, ../../styles/087.scss */
.button.play {
  background: #fff;
  color: #f47a75;
}
/* line 500, ../../styles/087.scss */
.button.play span:last-child {
  display: none;
}
/* line 503, ../../styles/087.scss */
.button.play span:first-child {
  display: block;
}
/* line 508, ../../styles/087.scss */
.button span {
  width: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.4;
}

/* line 519, ../../styles/087.scss */
.info-box {
  color: #222;
  padding: 20px;
  font-size: .85em;
  line-height: 1.5;
  z-index: 5;
}
/* line 526, ../../styles/087.scss */
.info-box a {
  color: inherit;
}
/* line 530, ../../styles/087.scss */
.info-box span {
  color: #f47169;
}

/* line 535, ../../styles/087.scss */
#splash {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 30;
}
/* line 545, ../../styles/087.scss */
#splash div {
  width: 50%;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #f47069 0%, #f05755 100%);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* line 563, ../../styles/087.scss */
  #splash {
    display: none;
  }
}