/* line 1, ../../sass/_menu.sass */
.menu {
  background: black;
  width: 20%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 1em 0.25em;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
@media only screen and (min-width: 480px) {
  /* line 1, ../../sass/_menu.sass */
  .menu {
    padding: 1em 0.5em;
  }
}
/* line 12, ../../sass/_menu.sass */
.menu svg {
  height: 10%;
  min-height: 10%;
  width: 100%;
  margin: 0.25em 0;
}
@media only screen and (min-width: 480px) {
  /* line 12, ../../sass/_menu.sass */
  .menu svg {
    margin: 0.5em 0;
  }
}
@media only screen and (orientation: landscape) {
  /* line 12, ../../sass/_menu.sass */
  .menu svg {
    height: 20%;
    min-height: 20%;
  }
}

/* line 1, ../../sass/_chooser.sass */
.chooser {
  background: teal;
  width: 20%;
  display: none;
}

/* line 1, ../../sass/_content.sass */
.content {
  background: ivory;
  overflow: hidden;
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
/* line 7, ../../sass/_content.sass */
.content .drawing-area {
  -webkit-flex: 1;
  flex: 1;
  padding: 1em;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
}
/* line 12, ../../sass/_content.sass */
.content .drawing-area svg {
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  -o-transition: -o-transform 0.3s, opacity 0.3s;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-flex: 1;
  flex: 1;
}
/* line 17, ../../sass/_content.sass */
.content .drawing-area.hidden svg {
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}
/* line 21, ../../sass/_content.sass */
.content .drawing-area.hidden.removing svg {
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
/* line 23, ../../sass/_content.sass */
.content .color-area {
  min-height: 50px;
  padding: 1em 0em;
  box-sizing: content-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
/* line 33, ../../sass/_content.sass */
.content .color-area .color-block {
  white-space: nowrap;
}
/* line 36, ../../sass/_content.sass */
.content .color-area .color {
  display: inline-block;
  box-sizing: border-box;
  box-shadow: 0 2px 5px black;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  -o-transition: -o-transform 0.3s, opacity 0.3s;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  margin: 4px;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
/* line 47, ../../sass/_content.sass */
.content .color-area .color.random {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMWYzZiIvPjxzdG9wIG9mZnNldD0iNi42NjY2NyUiIHN0b3AtY29sb3I9IiMwMDc0ZDkiLz48c3RvcCBvZmZzZXQ9IjEzLjMzMzMzJSIgc3RvcC1jb2xvcj0iIzdmZGJmZiIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzljY2NjIi8+PHN0b3Agb2Zmc2V0PSIyNi42NjY2NyUiIHN0b3AtY29sb3I9IiMzZDk5NzAiLz48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iIzJlY2M0MCIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDFmZjcwIi8+PHN0b3Agb2Zmc2V0PSI0Ni42NjY2NyUiIHN0b3AtY29sb3I9IiNmZmRjMDAiLz48c3RvcCBvZmZzZXQ9IjUzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2ZmODUxYiIvPjxzdG9wIG9mZnNldD0iNjAuMCUiIHN0b3AtY29sb3I9IiNmZjQxMzYiLz48c3RvcCBvZmZzZXQ9IjY2LjY2NjY3JSIgc3RvcC1jb2xvcj0iIzg1MTQ0YiIvPjxzdG9wIG9mZnNldD0iNzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjZjAxMmJlIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNiMTBkYzkiLz48c3RvcCBvZmZzZXQ9Ijg2LjY2NjY3JSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iOTMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #001f3f), color-stop(6.66667%, #0074d9), color-stop(13.33333%, #7fdbff), color-stop(20%, #39cccc), color-stop(26.66667%, #3d9970), color-stop(33.33333%, #2ecc40), color-stop(40%, #01ff70), color-stop(46.66667%, #ffdc00), color-stop(53.33333%, #ff851b), color-stop(60.0%, #ff4136), color-stop(66.66667%, #85144b), color-stop(73.33333%, #f012be), color-stop(80%, #b10dc9), color-stop(86.66667%, #111111), color-stop(93.33333%, #aaaaaa), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(left, #001f3f, #0074d9, #7fdbff, #39cccc, #3d9970, #2ecc40, #01ff70, #ffdc00, #ff851b, #ff4136, #85144b, #f012be, #b10dc9, #111111, #aaaaaa, #dddddd);
  background-image: -webkit-linear-gradient(left, #001f3f, #0074d9, #7fdbff, #39cccc, #3d9970, #2ecc40, #01ff70, #ffdc00, #ff851b, #ff4136, #85144b, #f012be, #b10dc9, #111111, #aaaaaa, #dddddd);
  background-image: linear-gradient(to right, #001f3f, #0074d9, #7fdbff, #39cccc, #3d9970, #2ecc40, #01ff70, #ffdc00, #ff851b, #ff4136, #85144b, #f012be, #b10dc9, #111111, #aaaaaa, #dddddd);
}
/* line 49, ../../sass/_content.sass */
.content .color-area .color.selected {
  margin: 0;
  width: 28px;
  height: 28px;
}
@media only screen and (min-width: 480px) {
  /* line 36, ../../sass/_content.sass */
  .content .color-area .color {
    margin: 4px 8px;
  }
  /* line 56, ../../sass/_content.sass */
  .content .color-area .color.selected {
    margin: 0 2px;
  }
}
@media only screen and (min-width: 768px) {
  /* line 36, ../../sass/_content.sass */
  .content .color-area .color {
    margin: 8px;
    width: 48px;
    height: 48px;
  }
  /* line 64, ../../sass/_content.sass */
  .content .color-area .color.selected {
    width: 60px;
    height: 60px;
  }
}
@media only screen and (min-width: 1024px) {
  /* line 36, ../../sass/_content.sass */
  .content .color-area .color {
    width: 26px;
    height: 26px;
  }
  /* line 71, ../../sass/_content.sass */
  .content .color-area .color.selected {
    width: 38px;
    height: 38px;
  }
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-1 {
  transition-delay: 0.04s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-2 {
  transition-delay: 0.08s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-3 {
  transition-delay: 0.12s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-4 {
  transition-delay: 0.16s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-5 {
  transition-delay: 0.2s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-6 {
  transition-delay: 0.24s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-7 {
  transition-delay: 0.28s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-8 {
  transition-delay: 0.32s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-9 {
  transition-delay: 0.36s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-10 {
  transition-delay: 0.4s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-11 {
  transition-delay: 0.44s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-12 {
  transition-delay: 0.48s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-13 {
  transition-delay: 0.52s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-14 {
  transition-delay: 0.56s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-15 {
  transition-delay: 0.6s;
}
/* line 79, ../../sass/_content.sass */
.content .color-area .color.color-16 {
  transition-delay: 0.64s;
}
/* line 83, ../../sass/_content.sass */
.content .color-area.hidden .color {
  opacity: 0;
  -moz-transform: translate3d(0, 100px, 0);
  -ms-transform: translate3d(0, 100px, 0);
  -webkit-transform: translate3d(0, 100px, 0);
  transform: translate3d(0, 100px, 0);
}

/* line 26, ../../sass/main.sass */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* line 31, ../../sass/main.sass */
.menu, .chooser, .content {
  height: 100%;
}

/* line 34, ../../sass/main.sass */
body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}