#toolbar {
  display: inline-block;
  position: fixed;
  top: 14vh;
  width: 4.5rem;
  z-index: 99;
  left: 2rem;
  text-align: center;
  pointer-events: none;
}
.tool {
  display: inline-block;
  background-color: rgba(242,242,242,0.98);
  border-radius: 50%;
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  width: 4.5rem;
  height: 4.5rem;
  margin: 1rem 0;
  pointer-events: auto;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.tool:first-child {
  margin-top: 0;
}
.tool img {
  width: 100%;
}
.tool label {
  position: absolute;
  pointer-events: none;
  background-color: rgba(242,242,242,0.98);
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 1.2rem;
  font-size: 1.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
}
.tool.active {
  background-color: #000;
}
.tool.disabled {
  cursor: not-allowed;
}
.tool.disabled img {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}
.tool.pointer {
  margin-bottom: 4vh;
}
.tool.swatch {
  padding: 2px;
}
.tool.swatch,
.tool.zoom {
  margin-top: 4vh;
}
.nontouch .tool:hover {
  background-color: #e6e6e6;
}
.nontouch .tool:hover.active {
  background-color: #000;
}
.nontouch .tool:hover.disabled {
  background-color: rgba(242,242,242,0.98);
}
.swatch-fill {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#menu-trigger {
  width: 2.3rem;
  margin-right: 6rem;
}
#swatches {
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 6rem;
}
#swatches > div {
  background-color: rgba(242,242,242,0.98);
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  padding: 1rem;
  border-radius: 4.2rem;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#swatches > div img {
  height: 1.8rem;
  width: 2rem;
}
#swatches > div img:first-child {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#swatches > div img.disabled {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  cursor: not-allowed;
}
#swatch-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 21rem;
  overflow: hidden;
  position: relative;
  padding: 0.2rem;
}
#swatch-wrap > div {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  -ms-transition: -ms-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
#swatch-wrap .swatch {
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid #fff;
  margin-right: 0.4rem;
  border-radius: 50%;
  min-width: 2.2rem;
}
#swatch-wrap .swatch.active {
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25), 0 0 0 1px #000;
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25), 0 0 0 1px #000;
}
.nontouch #swatch-wrap .swatch:hover {
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25), 0 0 0 1px #b3b3b3 !important;
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25), 0 0 0 1px #b3b3b3 !important;
}
.nontouch #swatch-wrap .swatch:hover.active {
  -webkit-box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25), 0 0 0 1px #000 !important;
  box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.25), 0 0 0 1px #000 !important;
}
#tools {
  width: 5.6rem;
}
#tools img {
  display: block;
  width: 100%;
}
.weight-slider {
  position: relative;
}
.weight-slider img {
  width: 112%;
  left: -4%;
  position: absolute;
  pointer-events: none;
  z-index: -1;
  -webkit-transform: translateY(-23%);
  -moz-transform: translateY(-23%);
  -o-transform: translateY(-23%);
  -ms-transform: translateY(-23%);
  transform: translateY(-23%);
}
.weight-slider input {
  width: 100%;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  margin: 0.5rem 0;
  background-color: transparent;
}
.weight-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2.4rem;
  width: 1rem;
  background-color: #3897f0;
  border: none;
  border-radius: 0.2rem;
}
.weight-slider input::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2.4rem;
  width: 1rem;
  background-color: #3897f0;
  border: none;
  border-radius: 0.2rem;
}
.weight-slider input::-moz-range-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  outline: none;
}
.weight-slider input::-moz-focus-outer {
  border: none;
}
#settings-bar {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  height: 6rem;
  white-space: nowrap;
  z-index: 100;
  padding-left: 3rem;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#settings-bar h1 {
  margin-right: 3rem;
  font-weight: normal;
}
input[type="text"] {
  background-color: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #aaa;
  font-family: 'Roboto Mono', monospace;
  color: #666;
  padding: 0;
  font-size: 1.4rem;
  width: 20rem;
  margin-right: 2rem;
  height: 2.4rem;
}
input[type="text"]:focus {
  outline: none;
}
.settings-panel {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  height: 100%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}
#type-panel > div {
  margin-right: 1rem;
}
#type-panel > div:first-child {
  width: 22rem;
}
#type-panel > div:nth-child(2) {
  width: 7rem;
}
.autodraw-panel h1.active {
  color: #3897f0;
}
.search-icon {
  width: 3.8rem;
  -webkit-transform: translateY(5%);
  -moz-transform: translateY(5%);
  -o-transform: translateY(5%);
  -ms-transform: translateY(5%);
  transform: translateY(5%);
}
#autodraw-search {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: none;
}
#autodraw-suggestions {
  overflow: hidden;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#autodraw-suggestions p {
  font-size: 1.4rem;
  padding: 0 1rem;
  margin-right: 1rem;
  min-width: 11rem;
}
#autodraw-suggestions .thumbs {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  margin-bottom: 4px;
}
#autodraw-suggestions .thumbs::-webkit-scrollbar {
  height: 8px;
}
#autodraw-suggestions .thumbs::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0);
  border-radius: 5px;
}
#autodraw-suggestions .thumbs::-webkit-scrollbar-track {
  background: transparent;
}
#autodraw-suggestions .thumbs:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
}
#autodraw-suggestions .thumbs div {
  position: relative;
  height: 70%;
  margin-right: 1rem;
  margin-top: 12px;
  border: 1px solid transparent;
  padding: 0.2rem;
  min-width: 3.8rem;
  max-width: 3.8rem;
  height: 3.8rem;
  text-align: center;
}
#autodraw-suggestions .thumbs div.active {
  border-color: #aaa;
}
#autodraw-suggestions .thumbs div img {
  height: 100%;
  max-width: 100%;
}
.nontouch .thumbs div:hover {
  border-color: #aaa !important;
}
.zoom-preset {
  background-color: #ccc;
  color: #fff;
  font-size: 1.6rem;
  padding: 0.2rem 0.8rem;
  margin-right: 1.6rem;
  border-radius: 0.4rem;
  cursor: default;
}
.zoom-preset.active {
  background-color: #000;
}
#shape-panel img {
  width: 3.8rem;
  padding: 0.2rem;
  margin-right: 1rem;
  border: 1px solid transparent;
}
#shape-panel img.active {
  border-color: #ccc;
}
#main-menu {
  position: fixed;
  z-index: 500;
  -webkit-transform: translateX(-110%);
  -moz-transform: translateX(-110%);
  -o-transform: translateX(-110%);
  -ms-transform: translateX(-110%);
  transform: translateX(-110%);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  -ms-transition: -ms-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  width: 26em;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #ededee;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  background-color: #fafafa;
  -webkit-box-shadow: 0.4rem 0 0 0 rgba(0,0,0,0.1);
  box-shadow: 0.4rem 0 0 0 rgba(0,0,0,0.1);
}
#main-menu.open {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
#main-menu > header {
  background-color: #3897f0;
  color: #fff;
  height: 6rem;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 2rem;
  padding-right: 1rem;
}
#main-menu > header h1 {
  font-weight: lighter;
  display: inline-block;
  font-size: 1.6rem;
}
#main-menu ul {
  list-style: none;
  color: #808080;
  padding: 0;
  margin: 0;
}
#main-menu li {
  padding: 0 2rem;
  border-bottom: 1px solid #eee;
  cursor: default;
}
#main-menu li:hover {
  background-color: #f2f2f2;
}
#main-menu li header {
  position: relative;
  font-size: 1.6rem;
  padding: 1.5rem 0;
}
#main-menu li.open:hover {
  background-color: #fafafa;
}
#main-menu li.open .drawer-content {
  display: block;
}
#main-menu li.disabled {
  pointer-events: none;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
}
#main-menu li .linkout {
  width: 3rem;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#main-menu footer {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: absolute;
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem;
}
#main-menu footer img {
  width: 12rem;
}
#terms-link {
  text-decoration: none;
  color: #b3b3b3;
  margin-bottom: 1.3rem;
  font-size: 7px;
  margin-right: 5px;
}
#terms-link:hover {
  text-decoration: underline;
}
#main-menu-close {
  display: inline-block;
}
#main-menu-close img {
  width: 4rem;
  height: 4rem;
}
.nontouch #main-menu-close:hover {
  background-color: #386cc0;
}
.drawer-content {
  padding-bottom: 2rem;
  text-align: center;
  display: none;
  font-size: 1.6rem;
  color: #999;
}
.drawer-content p {
  text-align: left;
  margin-bottom: 3rem;
}
#orientation-picker img {
  height: 6rem;
  margin: 0 0.2rem;
}
#orientation-picker img:hover {
  background-color: #f2f2f2;
}
.social-buttons li {
  border-bottom: none !important;
  display: inline-block;
  background-color: #777;
  color: #fff;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0 !important;
  text-align: center;
  line-height: 2.2;
  border-radius: 50%;
  margin-right: 1rem;
  margin-bottom: 1.2rem;
}
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.phone #menu-trigger {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 4rem;
  height: 4rem;
  padding: 1rem;
  z-index: 9998;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}
.phone #menu-trigger.faded {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  pointer-events: none;
}
.phone #main-menu {
  width: 100%;
  max-width: 35vmax;
  z-index: 9999;
}
#toolbar.mobile {
  top: auto;
  left: 1.5rem;
  bottom: 0.5rem;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  z-index: 50;
}
#toolbar.mobile .tool {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  pointer-events: none;
}
#toolbar.mobile .tool label {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#toolbar.mobile .tool.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  background-color: #eee;
  pointer-events: auto;
}
#toolbar.mobile .tool.pointer {
  margin-bottom: 1rem;
}
#toolbar.mobile .tool.delete,
#toolbar.mobile .tool.undo,
#toolbar.mobile .tool.swatch {
  pointer-events: auto;
  position: fixed;
  bottom: 0.5rem;
  opacity: 1 !important;
  -ms-filter: none !important;
  filter: none !important;
}
#toolbar.mobile .tool.delete label,
#toolbar.mobile .tool.undo label,
#toolbar.mobile .tool.swatch label {
  display: none;
}
#toolbar.mobile .tool.swatch {
  right: 1.5rem;
}
#toolbar.mobile .tool.undo {
  right: 7.5rem;
}
#toolbar.mobile .tool.delete {
  right: 13.5rem;
}
#toolbar.mobile .tool.disabled {
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
}
#toolbar.mobile .tool.disabled img {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#toolbar.mobile.open .tool {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  pointer-events: auto;
}
#toolbar.mobile.open .tool label {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#toolbar.mobile.hidden {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#toolbar.mobile.hidden .tool {
  pointer-events: none;
}
#toolbar.mobile #swatches {
  width: 100%;
  top: auto;
  bottom: 4.8rem;
  padding: 0;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}
#toolbar.mobile #swatches.hidden {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  pointer-events: none;
}
#toolbar.mobile #swatches > div {
  display: block;
  padding: 0;
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#toolbar.mobile #swatches img {
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
  -moz-transform: rotate3d(0, 0, 1, -90deg);
  -o-transform: rotate3d(0, 0, 1, -90deg);
  -ms-transform: rotate3d(0, 0, 1, -90deg);
  transform: rotate3d(0, 0, 1, -90deg);
  margin: 0 auto;
  height: 3rem;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  margin-bottom: -4px;
}
#toolbar.mobile #swatches img:last-child {
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
  -moz-transform: rotate3d(0, 0, 1, 90deg);
  -o-transform: rotate3d(0, 0, 1, 90deg);
  -ms-transform: rotate3d(0, 0, 1, 90deg);
  transform: rotate3d(0, 0, 1, 90deg);
}
#toolbar.mobile #swatches img.disabled {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#toolbar.mobile #swatch-wrap {
  padding: 0;
  display: block;
  width: auto;
  overflow: hidden;
  height: 37rem;
}
#toolbar.mobile #swatch-wrap > div {
  display: block;
  padding: 0.4rem 0;
}
#toolbar.mobile #swatch-wrap .swatch {
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  margin-bottom: 0.6rem;
}
#toolbar.mobile #swatch-wrap .swatch:last-child {
  margin-bottom: 0;
}
#settings-bar-mobile {
  background-color: rgba(242,242,242,0.98);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  border-bottom: 1px solid #ccc;
}
#settings-bar-mobile.hidden {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#settings-bar-mobile .handle {
  background-color: rgba(242,242,242,0.98);
  padding: 0.8rem;
  width: 6rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border-radius: 1rem;
}
#settings-bar-mobile .handle > div {
  height: 0.8rem;
  background-color: #ccc;
  border-radius: 0.4rem;
}
#settings-bar-mobile #pencil-panel,
#settings-bar-mobile #shape-panel,
#settings-bar-mobile #type-panel {
  padding: 1.8rem;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
#settings-bar-mobile #shape-panel img {
  width: 4.6rem;
  margin-right: 2rem;
  padding: 0.4rem;
}
#settings-bar-mobile #type-panel {
  padding-left: 6rem;
}
#settings-bar-mobile #type-panel > div {
  width: auto;
}
#settings-bar-mobile #type-panel > div:first-child {
  -webkit-box-flex: 3;
  -moz-box-flex: 3;
  -o-box-flex: 3;
  box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
#settings-bar-mobile #type-panel > div:nth-child(2) {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
}
#settings-bar-mobile #autodraw-panel {
  display: block;
}
#settings-bar-mobile #autodraw-search {
  display: none;
  border: 1px solid #ccc;
  margin: 1.5rem;
  padding: 0;
}
#settings-bar-mobile #autodraw-search input {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 1.5rem;
}
#settings-bar-mobile #autodraw-suggestions {
  display: block;
}
#settings-bar-mobile #autodraw-suggestions p {
  display: block;
  text-align: center;
  padding: 0;
  padding-left: 1.5rem;
  margin-top: 1.9rem;
  margin-bottom: 0.2rem;
}
#settings-bar-mobile #autodraw-suggestions .thumbs {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
}
#settings-bar-mobile #autodraw-suggestions img {
  height: 3.4rem;
}
#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
}
#modal >:not(.rotate-your-phone) {
  padding-top: 4rem;
}
#modal h2 {
  padding-bottom: 2rem;
}
#modal.open {
  display: block;
}
#modal .close {
  color: transparent;
  outline: none;
  border: 0;
  background-color: transparent;
  background-image: url("/assets/images/x-gray.svg");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 6rem;
  height: 6rem;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#modal .close:hover {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
#modal .share-image {
  margin: 0 auto 2rem auto;
  padding: 0;
  display: block;
  width: auto;
  max-height: 66%;
  -webkit-box-shadow: 4px 4px 0 #b3b3b3;
  box-shadow: 4px 4px 0 #b3b3b3;
}
#modal ul {
  display: block;
  list-style-type: none;
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
#modal ul li {
  display: inline-block;
}
#modal .icon {
  outline: none;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  color: transparent;
  height: 4.599rem;
}
#modal .share {
  background-color: rgba(179,179,179,0.8);
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#modal .share .share-social-button {
  cursor: pointer;
  width: 4.599rem;
  margin-left: 1.375rem;
}
#modal .share .share-social-button.twitter {
  margin-left: 0;
  background-image: url("/assets/images/twitter.svg");
}
#modal .share .share-social-button.twitter:hover {
  background-image: url("/assets/images/twitter-hover.svg");
}
#modal .share .share-social-button.facebook {
  background-image: url("/assets/images/facebook.svg");
}
#modal .share .share-social-button.facebook:hover {
  background-image: url("/assets/images/facebook-hover.svg");
}
#modal .share .share-social-button.google-plus {
  background-image: url("/assets/images/gplus.svg");
}
#modal .share .share-social-button.google-plus:hover {
  background-image: url("/assets/images/gplus-hover.svg");
}
#modal .share .share-social-button.copy-link {
  background-image: url("/assets/images/copylink.svg");
  width: 14.3rem;
}
#modal .share .share-social-button.copy-link:hover {
  background-image: url("/assets/images/copylink-hover.svg");
}
#modal .share .share-social-button.copy-link:active {
  background-image: url("/assets/images/copylink-press.svg");
}
#modal .share .share-social-button.copy-link.success,
#modal .share .share-social-button.copy-link.success:hover {
  background-image: url("/assets/images/linkcopied.svg");
}
#modal .share.pre {
  height: 100%;
  position: relative;
}
#modal .share.pre .pill {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 1.5rem 1rem;
  display: inline-block;
  background-color: #fff;
  border-radius: 500px;
  text-align: center;
  min-width: 32rem;
}
#modal .share.pre .pill h2 {
  margin: auto;
  display: inline-block;
  position: relative;
  padding: 0 2rem;
  top: -0.5rem;
  left: 0.66rem;
}
#modal .share.pre .pill .elipsis {
  position: relative;
  top: 1.1rem;
  left: -1rem;
  width: 5rem;
  height: auto;
}
#modal .share.return {
  background-color: #ddd;
}
#modal .share.return h2 {
  position: relative;
  top: 0;
  left: -0.75rem;
}
#modal .share.return h2:before {
  position: relative;
  top: 5px;
  left: 10px;
  display: inline-block;
  content: '';
  background-image: url("/assets/images/autodraw-icon.svg");
  background-repeat: no-repeat;
  width: 50px;
  height: 25px;
}
#modal .share.return a.start-drawing {
  content: '';
  background-image: url("/assets/images/startdrawing.svg");
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 280px;
  color: transparent;
}
#modal .share.return a.start-drawing:hover {
  background-image: url("/assets/images/startdrawing-hover.svg");
}
.rotate-your-phone {
  background-color: #fff;
  width: 100%;
  height: 100%;
  background-image: url("/assets/images/rotate-your-phone.jpg");
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-repeat: none;
  background-position: center;
}
.phone #modal .icon {
  height: 5rem;
}
.phone #modal .share-social-button {
  margin-left: 1.3rem;
  width: 5rem;
}
.phone #modal .share-social-button.copy-link {
  width: 12rem;
}
#intro,
#tutorial {
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: #fff;
  padding: 0 !important;
}
#intro h1,
#tutorial h1 {
  font-weight: normal;
}
#intro p,
#tutorial p {
  font-size: 2rem;
  margin: 0;
  margin-top: 2vh;
}
#intro p em,
#tutorial p em {
  font-style: normal;
  background-color: #e6e6e6;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}
#intro > div,
#tutorial > div {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 2rem;
  max-width: 120rem;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#intro.phone > div,
#tutorial.phone > div {
  height: 100vh;
  padding: 0;
}
#intro.phone > div > div,
#tutorial.phone > div > div {
  width: 80vw;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
#intro.phone .tutorial-pager,
#tutorial.phone .tutorial-pager {
  width: 7vw;
  position: relative;
  top: 31.5vh;
  left: 2rem;
}
#intro.phone .tutorial-pager:last-child,
#tutorial.phone .tutorial-pager:last-child {
  left: -2rem;
}
#intro.phone #vid-wrap,
#tutorial.phone #vid-wrap {
  width: 80vw;
  height: 80vw;
}
#intro.phone #tutorial-video,
#tutorial.phone #tutorial-video {
  height: auto;
  width: 100%;
}
#intro.phone p,
#tutorial.phone p {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  -ms-flex-item-align: end;
  height: 24vh;
  line-height: 1.8;
}
#intro.phone .dots,
#tutorial.phone .dots {
  margin-top: 2vh;
}
.tutorial-pager {
  width: 5rem;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}
.tutorial-pager:first-child {
  -webkit-transform: scale(-1);
  -moz-transform: scale(-1);
  -o-transform: scale(-1);
  -ms-transform: scale(-1);
  transform: scale(-1);
}
.tutorial-pager.disabled {
  visibility: hidden;
  pointer-events: none;
}
.tutorial-pager:hover {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
#vid-wrap,
#tutorial-video {
  height: 40vh;
}
#skip-tutorial {
  color: #3897f0;
  font-size: 1.6rem;
  font-weight: normal;
  cursor: default;
}
#skip-tutorial:hover {
  text-decoration: underline;
}
.dots {
  margin-top: 6rem;
}
.dots span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #e6e6e6;
  display: inline-block;
  margin: 0 0.4rem;
}
.dots span.active {
  background-color: #3897f0;
}
.dots span:hover {
  background-color: #4285f4;
}
#intro > div {
  display: block;
  max-width: 50rem;
}
#intro .buttons {
  margin-top: 5vh;
  font-size: 0;
}
#intro .button {
  width: 40%;
  margin-right: 1rem;
  margin-bottom: 2vh;
  width: 20rem;
}
#intro-image {
  width: 85%;
  margin-top: -35%;
}
#intro-type {
  width: 70%;
}
#aix-intro {
  position: fixed;
  bottom: 1vmax;
  left: 1vmax;
  width: 20rem;
  max-width: 30vw;
}
.button {
  display: inline-block;
  padding: 1.4rem;
  font-size: 1.8rem;
  background-color: #fff;
  -webkit-box-shadow: 2px 2px 0 #d1d1d1;
  box-shadow: 2px 2px 0 #d1d1d1;
  cursor: default;
}
.button sup {
  position: absolute;
  margin-top: -5px;
}
.button.blue {
  background-color: #3897f0;
  color: #fff;
}
.button.blue:hover {
  background-color: #117adc;
}
.button.green {
  background-color: #01c853;
  color: #fff;
}
.button.green:hover {
  background-color: #01a042;
}
.button:hover {
  background-color: #eee;
}
#disclaimer {
  font-size: 1.3rem;
  margin-top: 8vh;
}
.phone #disclaimer,
.phone sup {
  display: none !important;
}
.phone .buttons {
  margin-top: 1vh !important;
}
#artists {
  background-color: #fff;
  color: #1a1a1a;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 0 !important;
  padding-bottom: 4rem;
}
#artists > div {
  margin: 0 auto;
  max-width: 108rem;
  padding: 4rem;
}
#artists h1 {
  font-size: 4rem;
}
#artists p {
  font-size: 1.5rem;
  line-height: 1.8rem;
}
#artists a {
  color: #3897f0;
}
.artist-section {
  margin-top: 8rem;
  max-width: 100vw;
}
.artist-section header {
  border-bottom: 3px solid #e8e8e8;
  text-align: left;
  padding-bottom: 1.5rem;
}
.artist-section header a {
  color: #000 !important;
  text-decoration: none;
  font-style: italic;
  font-size: 1.5rem;
}
.artist-section header a:hover {
  text-decoration: underline;
}
.artist-section h2 {
  font-size: 2.4rem;
  font-weight: normal;
  margin: 0;
  display: inline;
  margin-right: 2rem;
}
.artist-section img {
  height: 10rem;
  margin: 2rem;
  max-width: 70vw;
}
#shortcuts {
  background-color: #fff;
  color: #1a1a1a;
  height: 100vh;
  font-size: 1.8rem;
}
#shortcuts > div {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  padding: 4rem;
  max-width: 100rem;
  min-width: 70rem;
}
#shortcuts h1 {
  font-size: 3rem;
}
#shortcuts .column {
  width: 40%;
  display: inline-block;
  min-width: 30rem;
  margin-bottom: 2rem;
}
#shortcuts h3 {
  text-transform: uppercase;
  text-align: left;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 1.6rem;
  margin: 0;
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
}
#shortcuts h4 {
  font-weight: normal;
  margin: 0;
}
#shortcuts .row {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 1rem;
}
#shortcuts .key {
  color: #fff;
  display: inline-block;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  min-width: 3.2rem;
  text-align: center;
  margin-left: 0.4rem;
}
body.phone-landscape {
  pointer-events: none;
}
body.phone-landscape #menu-trigger,
body.phone-landscape #main-menu,
body.phone-landscape #settings-bar-mobile,
body.phone-landscape #toolbar {
  display: none;
}
body.phone-landscape > {
  pointer-events: none !important;
}
body.phone-landscape #main-canvas-container canvas {
  left: 100%;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-family: 'Roboto Mono', monospace;
  font-size: 57%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #666;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
body {
  padding: 0;
  margin: 0;
  background-color: #ededee;
}
body > div {
  height: 0;
}
#root {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.select-menu {
  position: relative;
}
.select-menu span {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  line-height: 0;
  pointer-events: none;
  font-size: 1.6rem;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  border-radius: 0;
  background-color: transparent;
  padding: 0.5rem;
  outline: none;
  color: #666;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 1.4rem;
  position: relative;
  margin: 0;
  border: 1px solid #b3b3b3;
}
#main-app-content.blurred {
  filter: blur(10px);
}
#main-canvas-container {
  position: absolute;
  background-color: #b3b3b3;
  top: 6rem;
  left: 0;
  right: 0;
  bottom: 0;
}
#main-canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.phone #main-canvas-container {
  top: 0;
}
.scrollbar {
  position: absolute;
  background-color: #d3d3d3;
}
.scrollbar-handle {
  position: relative;
  background-color: #333;
}
textarea::-moz-selection {
  background: rgba(180,213,255,0.5);
}
noscript {
  text-align: center;
  display: block;
  padding: 5rem;
  font-size: 2rem;
}
h2 {
  color: #1a1a1a;
  font-size: 1.7em;
}
/*# sourceMappingURL=artlab.css.map */