/*************
* Animations *
*************/
.page-rotateTopSideFirst {
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: rotateTopSideFirst 0.8s both ease-in;
  -moz-animation: rotateTopSideFirst 0.8s both ease-in;
  -o-animation: rotateTopSideFirst 0.8s both ease-in;
  -ms-animation: rotateTopSideFirst 0.8s both ease-in;
  animation: rotateTopSideFirst 0.8s both ease-in;
}
.page-moveFromTop {
  -webkit-animation: moveFromTop 0.6s ease both;
  -moz-animation: moveFromTop 0.6s ease both;
  -o-animation: moveFromTop 0.6s ease both;
  -ms-animation: moveFromTop 0.6s ease both;
  animation: moveFromTop 0.6s ease both;
}
.page-delay200 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
/****************
* Base elements *
****************/
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
table tr,
table td {
  padding: 0;
}
html,
body,
body > table {
  height: 100%;
  width: 100%;
}
* {
  font-family: "open sans";
  font-weight: 300;
}
b {
  font-weight: 400;
}
/********
* Icons *
********/
@font-face {
  font-family: 'colourcode-icomoon';
  src: url("/css/fonts/icomoon.eot?20130621");
  src: url("/css/fonts/icomoon.eot?20130621#iefix") format('embedded-opentype'), url("/css/fonts/icomoon.woff?20130621") format('woff'), url("/css/fonts/icomoon.ttf?20130621") format('truetype'), url("/css/fonts/icomoon.svg?20130621#icomoon") format('svg');
  font-weight: normal;
  font-style: normal;
}
*[class*=icon],
*[class*=icon] * {
  font-family: 'colourcode-icomoon';
  font-weight: normal;
  font-style: normal;
  height: 1em;
}
.menu-item .icon-scheme {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-item .icon-scheme li {
  position: absolute;
  font-weight: 700 !important;
}
.menu-item .icon-scheme.scheme-none li:nth-child(1):before {
  content: 'a';
}
.menu-item .icon-scheme.scheme-none li:nth-child(2):before {
  content: 'c';
}
.menu-item .icon-scheme.scheme-none li:nth-child(3):before {
  content: 'e';
}
.menu-item .icon-scheme.scheme-none li:nth-child(4):before {
  content: 'g';
}
.menu-item .icon-scheme.scheme-none li:nth-child(5):before {
  content: 'i';
}
.menu-item .icon-scheme.scheme-none li:nth-child(6):before {
  content: 'k';
}
.menu-item .icon-scheme.scheme-none li:nth-child(7):before {
  content: 'm';
}
.menu-item .icon-scheme.scheme-none li:nth-child(8):before {
  content: 'o';
}
.menu-item .icon-scheme.scheme-none li:nth-child(9):before {
  content: 'q';
}
.menu-item .icon-scheme.scheme-none li:nth-child(10):before {
  content: 's';
}
.menu-item .icon-scheme.scheme-none li:nth-child(11):before {
  content: 'u';
}
.menu-item .icon-scheme.scheme-none li:nth-child(12):before {
  content: 'w';
}
.menu-item .icon-scheme.scheme-monochrome li:nth-child(1):before {
  content: 'u';
}
.menu-item .icon-scheme.scheme-monochrome li:nth-child(2):before {
  content: 'w';
}
.menu-item .icon-scheme.scheme-monochrome li:nth-child(3):before {
  content: 'a';
}
.menu-item .icon-scheme.scheme-monochrome li:nth-child(4):before {
  content: 'c';
}
.menu-item .icon-scheme.scheme-monochrome li:nth-child(5):before {
  content: 'e';
}
.menu-item .icon-scheme.scheme-monochrome-dark li:nth-child(1):before {
  content: 't';
}
.menu-item .icon-scheme.scheme-monochrome-dark li:nth-child(2):before {
  content: 'v';
}
.menu-item .icon-scheme.scheme-monochrome-dark li:nth-child(3):before {
  content: 'b';
}
.menu-item .icon-scheme.scheme-monochrome-dark li:nth-child(4):before {
  content: 'd';
}
.menu-item .icon-scheme.scheme-monochrome-dark li:nth-child(5):before {
  content: 'f';
}
.menu-item .icon-scheme.scheme-monochrome-light li:nth-child(1):before {
  content: 't';
}
.menu-item .icon-scheme.scheme-monochrome-light li:nth-child(2):before {
  content: 'v';
}
.menu-item .icon-scheme.scheme-monochrome-light li:nth-child(3):before {
  content: 'x';
}
.menu-item .icon-scheme.scheme-monochrome-light li:nth-child(4):before {
  content: 'd';
}
.menu-item .icon-scheme.scheme-monochrome-light li:nth-child(5):before {
  content: 'f';
}
.menu-item .icon-scheme.scheme-analogic li:nth-child(1):before {
  content: 's';
}
.menu-item .icon-scheme.scheme-analogic li:nth-child(2):before {
  content: 'v';
}
.menu-item .icon-scheme.scheme-analogic li:nth-child(3):before {
  content: 'a';
}
.menu-item .icon-scheme.scheme-analogic li:nth-child(4):before {
  content: 'd';
}
.menu-item .icon-scheme.scheme-analogic li:nth-child(5):before {
  content: 'g';
}
.menu-item .icon-scheme.scheme-analogic-complement li:nth-child(1):before {
  content: 'v';
}
.menu-item .icon-scheme.scheme-analogic-complement li:nth-child(2):before {
  content: 'a';
}
.menu-item .icon-scheme.scheme-analogic-complement li:nth-child(3):before {
  content: 'd';
}
.menu-item .icon-scheme.scheme-analogic-complement li:nth-child(4):before {
  content: 'l';
}
.menu-item .icon-scheme.scheme-analogic-complement li:nth-child(5):before {
  content: 'n';
}
.menu-item .icon-scheme.scheme-complement li:nth-child(1):before {
  content: 'w';
}
.menu-item .icon-scheme.scheme-complement li:nth-child(2):before {
  content: 'a';
}
.menu-item .icon-scheme.scheme-complement li:nth-child(3):before {
  content: 'c';
}
.menu-item .icon-scheme.scheme-complement li:nth-child(4):before {
  content: 'l';
}
.menu-item .icon-scheme.scheme-complement li:nth-child(5):before {
  content: 'n';
}
.menu-item .icon-scheme.scheme-triad li:nth-child(1):before {
  content: 'w';
}
.menu-item .icon-scheme.scheme-triad li:nth-child(2):before {
  content: 'a';
}
.menu-item .icon-scheme.scheme-triad li:nth-child(3):before {
  content: 'c';
}
.menu-item .icon-scheme.scheme-triad li:nth-child(4):before {
  content: 'j';
}
.menu-item .icon-scheme.scheme-triad li:nth-child(5):before {
  content: 'p';
}
.menu-item .icon-scheme.scheme-quad li:nth-child(1):before {
  content: 'x';
}
.menu-item .icon-scheme.scheme-quad li:nth-child(2):before {
  content: 'b';
}
.menu-item .icon-scheme.scheme-quad li:nth-child(3):before {
  content: 'g';
}
.menu-item .icon-scheme.scheme-quad li:nth-child(4):before {
  content: 'm';
}
.menu-item .icon-scheme.scheme-quad li:nth-child(5):before {
  content: 's';
}
.menu-item:hover .scheme-none li:nth-child(1):before,
.menu-item.active .scheme-none li:nth-child(1):before {
  color: #bf4040;
}
.menu-item:hover .scheme-none li:nth-child(2):before,
.menu-item.active .scheme-none li:nth-child(2):before {
  color: #bf8040;
}
.menu-item:hover .scheme-none li:nth-child(3):before,
.menu-item.active .scheme-none li:nth-child(3):before {
  color: #bfbf40;
}
.menu-item:hover .scheme-none li:nth-child(4):before,
.menu-item.active .scheme-none li:nth-child(4):before {
  color: #80bf40;
}
.menu-item:hover .scheme-none li:nth-child(5):before,
.menu-item.active .scheme-none li:nth-child(5):before {
  color: #40bf40;
}
.menu-item:hover .scheme-none li:nth-child(6):before,
.menu-item.active .scheme-none li:nth-child(6):before {
  color: #40bf80;
}
.menu-item:hover .scheme-none li:nth-child(7):before,
.menu-item.active .scheme-none li:nth-child(7):before {
  color: #40bfbf;
}
.menu-item:hover .scheme-none li:nth-child(8):before,
.menu-item.active .scheme-none li:nth-child(8):before {
  color: #407fbf;
}
.menu-item:hover .scheme-none li:nth-child(9):before,
.menu-item.active .scheme-none li:nth-child(9):before {
  color: #4040bf;
}
.menu-item:hover .scheme-none li:nth-child(10):before,
.menu-item.active .scheme-none li:nth-child(10):before {
  color: #7f40bf;
}
.menu-item:hover .scheme-none li:nth-child(11):before,
.menu-item.active .scheme-none li:nth-child(11):before {
  color: #bf40bf;
}
.menu-item:hover .scheme-none li:nth-child(12):before,
.menu-item.active .scheme-none li:nth-child(12):before {
  color: #bf4080;
}
.menu-item:hover .scheme-monochrome li:nth-child(1):before,
.menu-item.active .scheme-monochrome li:nth-child(1):before {
  color: #8f3d3d;
}
.menu-item:hover .scheme-monochrome li:nth-child(2):before,
.menu-item.active .scheme-monochrome li:nth-child(2):before {
  color: #a63f3f;
}
.menu-item:hover .scheme-monochrome li:nth-child(3):before,
.menu-item.active .scheme-monochrome li:nth-child(3):before {
  color: #bf4040;
}
.menu-item:hover .scheme-monochrome li:nth-child(4):before,
.menu-item.active .scheme-monochrome li:nth-child(4):before {
  color: #cb4d4d;
}
.menu-item:hover .scheme-monochrome li:nth-child(5):before,
.menu-item.active .scheme-monochrome li:nth-child(5):before {
  color: #d65c5c;
}
.menu-item:hover .scheme-monochrome-dark li:nth-child(1):before,
.menu-item.active .scheme-monochrome-dark li:nth-child(1):before {
  color: #333;
}
.menu-item:hover .scheme-monochrome-dark li:nth-child(2):before,
.menu-item.active .scheme-monochrome-dark li:nth-child(2):before {
  color: #595959;
}
.menu-item:hover .scheme-monochrome-dark li:nth-child(3):before,
.menu-item.active .scheme-monochrome-dark li:nth-child(3):before {
  color: #bf4040;
}
.menu-item:hover .scheme-monochrome-dark li:nth-child(4):before,
.menu-item.active .scheme-monochrome-dark li:nth-child(4):before {
  color: #cb4d4d;
}
.menu-item:hover .scheme-monochrome-dark li:nth-child(5):before,
.menu-item.active .scheme-monochrome-dark li:nth-child(5):before {
  color: #d65c5c;
}
.menu-item:hover .scheme-monochrome-light li:nth-child(1):before,
.menu-item.active .scheme-monochrome-light li:nth-child(1):before {
  color: #8f3d3d;
}
.menu-item:hover .scheme-monochrome-light li:nth-child(2):before,
.menu-item.active .scheme-monochrome-light li:nth-child(2):before {
  color: #a63f3f;
}
.menu-item:hover .scheme-monochrome-light li:nth-child(3):before,
.menu-item.active .scheme-monochrome-light li:nth-child(3):before {
  color: #bf4040;
}
.menu-item:hover .scheme-monochrome-light li:nth-child(4):before,
.menu-item.active .scheme-monochrome-light li:nth-child(4):before {
  color: #a6a6a6;
}
.menu-item:hover .scheme-monochrome-light li:nth-child(5):before,
.menu-item.active .scheme-monochrome-light li:nth-child(5):before {
  color: #ccc;
}
.menu-item:hover .scheme-analogic li:nth-child(1):before,
.menu-item.active .scheme-analogic li:nth-child(1):before {
  color: #3d3d8f;
}
.menu-item:hover .scheme-analogic li:nth-child(2):before,
.menu-item.active .scheme-analogic li:nth-child(2):before {
  color: #a63fa6;
}
.menu-item:hover .scheme-analogic li:nth-child(3):before,
.menu-item.active .scheme-analogic li:nth-child(3):before {
  color: #bf4040;
}
.menu-item:hover .scheme-analogic li:nth-child(4):before,
.menu-item.active .scheme-analogic li:nth-child(4):before {
  color: #cbcb4d;
}
.menu-item:hover .scheme-analogic li:nth-child(5):before,
.menu-item.active .scheme-analogic li:nth-child(5):before {
  color: #5cd65c;
}
.menu-item:hover .scheme-analogic-complement li:nth-child(1):before,
.menu-item.active .scheme-analogic-complement li:nth-child(1):before {
  color: #a63fa6;
}
.menu-item:hover .scheme-analogic-complement li:nth-child(2):before,
.menu-item.active .scheme-analogic-complement li:nth-child(2):before {
  color: #bf4040;
}
.menu-item:hover .scheme-analogic-complement li:nth-child(3):before,
.menu-item.active .scheme-analogic-complement li:nth-child(3):before {
  color: #cbcb4d;
}
.menu-item:hover .scheme-analogic-complement li:nth-child(4):before,
.menu-item.active .scheme-analogic-complement li:nth-child(4):before {
  color: #3d8f8f;
}
.menu-item:hover .scheme-analogic-complement li:nth-child(5):before,
.menu-item.active .scheme-analogic-complement li:nth-child(5):before {
  color: #5cd6d6;
}
.menu-item:hover .scheme-complement li:nth-child(1):before,
.menu-item.active .scheme-complement li:nth-child(1):before {
  color: #783a3a;
}
.menu-item:hover .scheme-complement li:nth-child(2):before,
.menu-item.active .scheme-complement li:nth-child(2):before {
  color: #bf4040;
}
.menu-item:hover .scheme-complement li:nth-child(3):before,
.menu-item.active .scheme-complement li:nth-child(3):before {
  color: #e06c6c;
}
.menu-item:hover .scheme-complement li:nth-child(4):before,
.menu-item.active .scheme-complement li:nth-child(4):before {
  color: #3d8f8f;
}
.menu-item:hover .scheme-complement li:nth-child(5):before,
.menu-item.active .scheme-complement li:nth-child(5):before {
  color: #5cd6d6;
}
.menu-item:hover .scheme-triad li:nth-child(1):before,
.menu-item.active .scheme-triad li:nth-child(1):before {
  color: #783a3a;
}
.menu-item:hover .scheme-triad li:nth-child(2):before,
.menu-item.active .scheme-triad li:nth-child(2):before {
  color: #bf4040;
}
.menu-item:hover .scheme-triad li:nth-child(3):before,
.menu-item.active .scheme-triad li:nth-child(3):before {
  color: #e06c6c;
}
.menu-item:hover .scheme-triad li:nth-child(4):before,
.menu-item.active .scheme-triad li:nth-child(4):before {
  color: #5cd65c;
}
.menu-item:hover .scheme-triad li:nth-child(5):before,
.menu-item.active .scheme-triad li:nth-child(5):before {
  color: #5c5cd6;
}
.menu-item:hover .scheme-quad li:nth-child(1):before,
.menu-item.active .scheme-quad li:nth-child(1):before {
  color: #783a3a;
}
.menu-item:hover .scheme-quad li:nth-child(2):before,
.menu-item.active .scheme-quad li:nth-child(2):before {
  color: #e06c6c;
}
.menu-item:hover .scheme-quad li:nth-child(3):before,
.menu-item.active .scheme-quad li:nth-child(3):before {
  color: #99d65c;
}
.menu-item:hover .scheme-quad li:nth-child(4):before,
.menu-item.active .scheme-quad li:nth-child(4):before {
  color: #5cd6d6;
}
.menu-item:hover .scheme-quad li:nth-child(5):before,
.menu-item.active .scheme-quad li:nth-child(5):before {
  color: #995cd6;
}
.icon-colourcode:before {
  content: 'C';
  padding-left: 1px;
}
.icon-convert:before {
  content: 'y';
}
.icon-save:before {
  content: '_';
}
.icon-menu:before {
  content: 'R';
}
.icon-link:before {
  content: 'X';
}
.icon-author:before {
  content: 'z';
}
.icon-social:before {
  content: 'Y';
}
.icon-saturation:before {
  content: 'B';
}
.icon-less:before {
  content: 'K';
}
.icon-image:before {
  content: 'E';
}
.icon-image:before {
  content: 'E';
}
.icon-help:before {
  content: '?';
}
.icon-git:before {
  content: 'G';
}
.icon-bugs:before {
  content: 'A';
}
.icon-mail:before {
  content: 'M';
}
.icon-legal:before {
  content: '§';
  font-family: "open sans";
  display: block;
  margin-top: -2px;
}
.icon-twitter:before {
  content: 'T';
}
.icon-web:before {
  content: 'W';
}
.icon-codepen:before {
  content: 'H';
}
.icon-dribbble:before {
  content: 'D';
}
.icon-commercial:before {
  content: 'Z';
}
.icon-trash:before {
  content: 'P';
}
.icon-left:before {
  content: '<';
}
.icon-right:before {
  content: '>';
}
.icon-up:before {
  content: '^';
}
.icon-down:before {
  content: 'V';
}
.icon-plus:before {
  content: '+';
}
.icon-minus:before {
  content: '-';
}
.icon-lock:before {
  content: 'L';
}
.icon-marker:before {
  content: '0';
}
.icon-mouse-h:before {
  content: 'y';
}
.icon-mouse-v:before {
  content: 'I';
}
.icon-mouse-s:before {
  content: 'O';
}
.icon-mouse-clk:before {
  content: '1';
}
/***************
* Base classes *
***************/
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.perspective {
  background-color: #222;
  position: relative;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
}
.pointer {
  cursor: pointer;
}
/********
* Pages *
********/
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -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);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.page-current,
.no-js .page {
  visibility: visible;
  z-index: 1;
}
.page-ontop {
  z-index: 999;
}
/* Text Styles, Colors, Backgrounds */
.page h1 {
  padding-top: 0.5em;
  font-size: 4.4em;
  line-height: 1;
  letter-spacing: 6px;
  margin: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  word-spacing: -0.3em;
}
.page h1 span {
  font-size: 40%;
  text-transform: none;
  word-spacing: 0;
  letter-spacing: 0;
  display: block;
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
}
.page h1 b {
  color: rgba(0,0,0,0.1);
  font-weight: 300;
}
.page-scheme {
  background: #000;
}
.page-scheme .scheme {
  position: absolute;
  width: 100%;
  height: 100%;
}
.page-scheme .scheme .swatches {
  height: 100%;
  width: 100.1%;
  overflow: hidden;
}
.page-scheme .scheme .swatch {
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  -ms-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  height: 100%;
  float: left;
  position: relative;
}
.page-scheme .scheme .swatch .icon-marker {
  position: absolute;
  margin-top: -0.5em;
  margin-left: -0.75em;
  cursor: default;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
}
.page-scheme .scheme .swatch .preview,
.page-scheme .scheme .swatch .details {
  height: 100%;
  width: 100%;
  z-index: 2;
}
.page-scheme .scheme .swatch .preview:first-child,
.page-scheme .scheme .swatch .details:first-child {
  z-index: 3;
}
.page-scheme .scheme .swatch .preview:last-child,
.page-scheme .scheme .swatch .details:last-child {
  z-index: 1;
}
.page-scheme .scheme .swatch .details {
  position: absolute;
}
.page-scheme .scheme .swatch .details .edit-color {
  width: 9.5em;
  margin: 0 auto;
  text-align: left;
  color: #777;
}
.page-scheme .scheme .swatch .details .edit-color.active {
  color: #ccc;
}
.page-scheme .scheme .swatch .details .edit-color span {
  display: inline-block;
  width: 2.5em;
  text-align: left;
}
.page-scheme .scheme .swatch .details .edit-color input[type=text] {
  width: 2em;
  padding-left: 0;
  padding-right: 0;
  color: #aaa;
  border: none;
  text-align: center;
  background-color: #333;
}
.page-scheme .scheme .swatch .details .edit-color input[type=text][data-type=hex] {
  width: 6em;
}
.page-scheme .scheme .swatch .details table {
  width: 100%;
}
.page-scheme .scheme .swatch .details table input[type=range] {
  width: 100%;
}
.page-scheme .scheme .swatch .details table td {
  padding: 0 0.25em;
}
.page-scheme .scheme .swatch [class*=icon-],
.page-scheme .scheme .swatch [data-type] {
  cursor: pointer;
}
.page-scheme .scheme .swatch [class*=icon-] {
  font-size: 1.25em;
}
.page-scheme .scheme .swatch.lifted .preview {
  height: 42%;
}
.page-scheme .scheme .swatch.lifted .preview .pos-b {
  top: 40%;
  margin-top: -1.25em;
}
.page-scheme .scheme .swatch a {
  color: inherit;
  text-decoration: none;
}
.page-scheme .scheme .swatch [class*=pos-] {
  position: absolute;
  height: 1em;
  font-size: 1.1em;
  text-align: center;
  width: 100%;
}
.page-scheme .scheme .swatch [class*=pos-].pos-t {
  top: 2%;
}
.page-scheme .scheme .swatch [class*=pos-].pos-t [class*=icon-] {
  margin: 0 0.25em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-tc {
  top: 25%;
  margin-top: -0.5em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-c {
  top: 50%;
  margin-top: -1.5em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-c .icon-trash {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-c .icon-trash.no-first {
  margin-left: 1.5em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-c .icon-trash.no-last {
  margin-right: 1.5em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-bc {
  top: 75%;
  margin-top: -0.5em;
}
.page-scheme .scheme .swatch [class*=pos-].pos-b {
  top: 98%;
  margin-top: -1.25em;
}
.page-scheme .scheme .swatch .removed {
  width: 0% !important;
}
.page-scheme .scheme.count-1 .swatch {
  width: 95%;
}
.page-scheme .scheme.count-2 .swatch {
  width: 47.5%;
}
.page-scheme .scheme.count-3 .swatch {
  width: 31.66%;
}
.page-scheme .scheme.count-4 .swatch {
  width: 23.75%;
}
.page-scheme .scheme.count-5 .swatch {
  width: 19%;
  font-size: 0.9em;
}
.page-scheme .scheme.count-6 .swatch {
  width: 15.83%;
  font-size: 0.85em;
}
.page-scheme .scheme.count-7 .swatch {
  width: 13.57%;
  font-size: 0.8em;
}
.page-scheme .scheme.count-8 .swatch {
  width: 11.87%;
  font-size: 0.75em;
}
.page-scheme .scheme.count-9 .swatch {
  width: 10.55%;
  font-size: 0.55em;
}
.page-scheme .scheme.count-9 .swatch .edit-color {
  width: 12em;
}
.page-scheme .scheme.count-10 .swatch {
  width: 10%;
  font-size: 0.45em;
}
.page-scheme .scheme.count-10 .swatch:last-child {
  display: none;
}
.page-scheme .scheme.count-10 .swatch .edit-color {
  width: 14em;
}
.page-scheme .scheme .swatch:last-child {
  width: 5%;
  background-color: #333;
  color: #aaa;
}
.page-scheme .scheme.edit-active.count-0 .swatch {
  width: 100%;
}
.page-scheme .scheme.edit-active.count-1 .swatch {
  width: 50%;
}
.page-scheme .scheme.edit-active.count-2 .swatch {
  width: 33.33%;
}
.page-scheme .scheme.edit-active.count-3 .swatch {
  width: 25%;
}
.page-scheme .scheme.edit-active.count-4 .swatch {
  width: 20%;
}
.page-scheme .scheme.edit-active.count-5 .swatch {
  width: 16.66%;
}
.page-scheme .scheme.edit-active.count-6 .swatch {
  width: 14.28%;
}
.page-scheme .scheme.edit-active.count-7 .swatch {
  width: 12.5%;
}
.page-scheme .scheme.edit-active.count-8 .swatch {
  width: 11.11%;
}
.page-scheme .scheme.edit-active.count-9 .swatch {
  width: 10%;
}
.page-scheme .scheme.edit-active.count-10 .swatch {
  width: 10%;
}
.page-scheme .scheme.scheme-mode.count-1 .swatch {
  width: 95%;
}
.page-scheme .scheme.scheme-mode.count-1 .swatch:first-child {
  display: none;
}
.page-scheme .scheme.scheme-mode.count-2 .swatch {
  width: 47.5%;
}
.page-scheme .scheme.scheme-mode.count-2 .swatch:first-child {
  display: none;
}
.page-scheme .scheme.scheme-mode.count-3 .swatch {
  width: 31.66%;
}
.page-scheme .scheme.scheme-mode.count-3 .swatch:first-child {
  display: none;
}
.page-scheme .scheme.scheme-mode.count-4 .swatch {
  width: 23.75%;
}
.page-scheme .scheme.scheme-mode.count-4 .swatch:first-child {
  display: none;
}
.page-scheme .scheme.scheme-mode.count-5 .swatch {
  width: 18%;
}
.page-scheme .scheme.scheme-mode.count-6 .swatch {
  width: 15%;
}
.page-scheme .scheme.scheme-mode.count-7 .swatch {
  width: 12.85%;
}
.page-scheme .scheme.scheme-mode.count-8 .swatch {
  width: 11.25%;
}
.page-scheme .scheme.scheme-mode.count-9 .swatch {
  width: 10%;
}
.page-scheme .scheme.scheme-mode.count-10 .swatch {
  width: 9.5%;
}
.page-scheme .scheme.scheme-mode.count-10 .swatch:last-child {
  display: none;
}
.page-scheme .scheme.scheme-mode .swatch:last-child {
  width: 5%;
  background-color: #333;
  color: #aaa;
}
.page-scheme .scheme.scheme-mode .swatch:first-child {
  width: 5%;
  background-color: #333;
  color: #aaa;
}
.page-legal {
  overflow: auto;
}
.page-legal > div {
  font-size: 0.7em;
  padding: 0.5em 2em;
}
.page-legal > div:first-child {
  padding-top: 15em;
}
.page-help,
.page-legal,
.page-loading {
  background: #fdc162;
}
.page-help > table,
.page-legal > table,
.page-loading > table {
  width: 90%;
  margin: 0 auto;
}
.page-help > table > tbody > tr > th,
.page-legal > table > tbody > tr > th,
.page-loading > table > tbody > tr > th,
.page-help > table > tr > th,
.page-legal > table > tr > th,
.page-loading > table > tr > th {
  text-align: left;
}
.page-help > table > tbody > tr > td,
.page-legal > table > tbody > tr > td,
.page-loading > table > tbody > tr > td,
.page-help > table > tr > td,
.page-legal > table > tr > td,
.page-loading > table > tr > td,
.page-help > table > tbody > tr > th,
.page-legal > table > tbody > tr > th,
.page-loading > table > tbody > tr > th,
.page-help > table > tr > th,
.page-legal > table > tr > th,
.page-loading > table > tr > th {
  width: 33%;
  vertical-align: top;
}
.page-help > table > tbody > tr > td > table,
.page-legal > table > tbody > tr > td > table,
.page-loading > table > tbody > tr > td > table,
.page-help > table > tr > td > table,
.page-legal > table > tr > td > table,
.page-loading > table > tr > td > table,
.page-help > table > tbody > tr > th > table,
.page-legal > table > tbody > tr > th > table,
.page-loading > table > tbody > tr > th > table,
.page-help > table > tr > th > table,
.page-legal > table > tr > th > table,
.page-loading > table > tr > th > table {
  width: 100%;
}
.page-help > table > tbody > tr > td > table > tbody > tr > th,
.page-legal > table > tbody > tr > td > table > tbody > tr > th,
.page-loading > table > tbody > tr > td > table > tbody > tr > th,
.page-help > table > tr > td > table > tbody > tr > th,
.page-legal > table > tr > td > table > tbody > tr > th,
.page-loading > table > tr > td > table > tbody > tr > th,
.page-help > table > tbody > tr > th > table > tbody > tr > th,
.page-legal > table > tbody > tr > th > table > tbody > tr > th,
.page-loading > table > tbody > tr > th > table > tbody > tr > th,
.page-help > table > tr > th > table > tbody > tr > th,
.page-legal > table > tr > th > table > tbody > tr > th,
.page-loading > table > tr > th > table > tbody > tr > th,
.page-help > table > tbody > tr > td > table > tr > th,
.page-legal > table > tbody > tr > td > table > tr > th,
.page-loading > table > tbody > tr > td > table > tr > th,
.page-help > table > tr > td > table > tr > th,
.page-legal > table > tr > td > table > tr > th,
.page-loading > table > tr > td > table > tr > th,
.page-help > table > tbody > tr > th > table > tr > th,
.page-legal > table > tbody > tr > th > table > tr > th,
.page-loading > table > tbody > tr > th > table > tr > th,
.page-help > table > tr > th > table > tr > th,
.page-legal > table > tr > th > table > tr > th,
.page-loading > table > tr > th > table > tr > th {
  width: 15%;
}
.page-help > table > tbody > tr > td > table > tbody > tr > td,
.page-legal > table > tbody > tr > td > table > tbody > tr > td,
.page-loading > table > tbody > tr > td > table > tbody > tr > td,
.page-help > table > tr > td > table > tbody > tr > td,
.page-legal > table > tr > td > table > tbody > tr > td,
.page-loading > table > tr > td > table > tbody > tr > td,
.page-help > table > tbody > tr > th > table > tbody > tr > td,
.page-legal > table > tbody > tr > th > table > tbody > tr > td,
.page-loading > table > tbody > tr > th > table > tbody > tr > td,
.page-help > table > tr > th > table > tbody > tr > td,
.page-legal > table > tr > th > table > tbody > tr > td,
.page-loading > table > tr > th > table > tbody > tr > td,
.page-help > table > tbody > tr > td > table > tr > td,
.page-legal > table > tbody > tr > td > table > tr > td,
.page-loading > table > tbody > tr > td > table > tr > td,
.page-help > table > tr > td > table > tr > td,
.page-legal > table > tr > td > table > tr > td,
.page-loading > table > tr > td > table > tr > td,
.page-help > table > tbody > tr > th > table > tr > td,
.page-legal > table > tbody > tr > th > table > tr > td,
.page-loading > table > tbody > tr > th > table > tr > td,
.page-help > table > tr > th > table > tr > td,
.page-legal > table > tr > th > table > tr > td,
.page-loading > table > tr > th > table > tr > td {
  width: 85%;
}
/*******
* Menu *
*******/
.menu {
  background-color: #222;
  color: #aaa;
  vertical-align: top;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  -ms-transition: width 0.5s;
  transition: width 0.5s;
  overflow: hidden;
  width: 34px;
}
.menu a {
  text-decoration: none;
}
.menu .menu-item {
  width: 250px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  transition: opacity 0.5s;
  position: absolute;
  margin-left: 6px;
}
.menu .menu-item.active {
  border-left-color: #bf4040;
}
.menu .menu-item *[class*=icon] {
  font-size: 16px;
  padding: 2px 2px 2px 4px;
  width: 24px;
  float: left;
}
.menu .menu-item *[class*=icon][class*=scheme] {
  font-size: 20px;
  margin-left: -3px;
}
.menu .menu-item *[class*=icon]:before,
.menu .menu-item *[class*=icon] *:before {
  color: #aaa;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.menu .menu-item > span {
  font-size: 0.8em;
}
.menu .menu-item > span input[type=text] {
  width: 15px;
  font-size: 8px;
  font-weight: 400;
}
.menu .menu-item.menu-static {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.menu .menu-item.menu-static:first-child > div {
  padding-top: 10px;
  margin-left: -0.15em;
  -webkit-transition: margin-left 0.5s ease-in-out;
  -moz-transition: margin-left 0.5s ease-in-out;
  -o-transition: margin-left 0.5s ease-in-out;
  -ms-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  font-size: 1.5em;
}
.menu .menu-item.menu-static:first-child > span {
  -webkit-transition: margin-left 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -moz-transition: margin-left 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -o-transition: margin-left 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -ms-transition: margin-left 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out, opacity 0.5s ease-in-out;
  display: inline-block;
  margin-left: 4em;
  margin-top: 0.4em;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.menu .menu-item.menu-static > span {
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.menu .menu-item.menu-convert > span {
  vertical-align: 6px;
}
.menu .menu-item.menu-saturation > span {
  vertical-align: 3px;
}
.menu .menu-item.menu-saturation > span > span {
  vertical-align: 5px;
}
.menu .menu-item.menu-links > div {
  float: left;
}
.menu .menu-item.menu-links a {
  text-decoration: none;
  width: auto;
}
.menu .menu-item.menu-commercial > div {
  float: left;
}
.menu .menu-item.menu-commercial > div.ads {
  font-size: 0.8em;
  width: 160px;
}
.menu .menu-item.menu-commercial > div.ads a {
  text-decoration: none;
  color: #aaa;
}
.menu .menu-item.menu-commercial > div.ads .influads_powered_link {
  font-size: 0.8em;
}
.menu .menu-item:nth-child(1) {
  top: 0px;
}
.menu .menu-item:nth-child(2) {
  top: 40px;
}
.menu .menu-item:nth-child(3) {
  top: 65px;
}
.menu .menu-item:nth-child(4) {
  top: 90px;
}
.menu .menu-item:nth-child(5) {
  top: 115px;
}
.menu .menu-item:nth-child(6) {
  top: 140px;
}
.menu .menu-item:nth-child(7) {
  top: 165px;
}
.menu .menu-item:nth-child(8) {
  top: 190px;
}
.menu .menu-item:nth-child(9) {
  top: 215px;
}
.menu .menu-item:nth-child(10) {
  top: 240px;
}
.menu .menu-item:nth-child(11) {
  top: 270px;
}
.menu .menu-item:nth-child(12) {
  top: 280px;
}
.menu .menu-item:nth-child(13) {
  top: 310px;
}
.menu .menu-item:nth-child(14) {
  top: 320px;
}
.menu .menu-item:nth-child(15) {
  top: 350px;
}
.menu .menu-item:nth-child(16) {
  top: 360px;
}
.menu .menu-item:nth-child(17) {
  top: 415px;
}
.menu .menu-item:nth-child(18) {
  top: 427px;
}
.menu .menu-item:nth-child(19) {
  top: 578px;
}
.menu .menu-item:nth-child(20) {
  top: 590px;
}
.menu hr.menu-item {
  border: 0;
  border-bottom: 1px solid #000;
  width: 215px;
  margin: 0;
}
.menu:hover {
  width: 215px;
}
.menu:hover .menu-item {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.menu:hover .menu-item:first-child > div {
  margin-left: 1em;
}
.menu:hover .menu-item:first-child > span {
  margin-left: 0em;
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.menu:hover .menu-item.menu-static > span {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
/*******************
* Browser Specific *
*******************/
html.-moz- .page {
  width: 98%;
}
html.-moz- .details .pos-c {
  display: none;
}
html.-o- .menu:hover .menu-item,
html.-ms- .menu:hover .menu-item {
  height: 100%;
  z-index: 100;
  background-color: #222;
}
html.-o- .perspective,
html.-ms- .perspective {
  -webkit-perspective: none;
  -moz-perspective: none;
  -ms-perspective: none;
  perspective: none;
  width: 100%;
  position: inherit;
}
html.-o- .page,
html.-ms- .page {
  right: 0;
  width: 97%;
}
html.-o- .icon-up,
html.-ms- .icon-up {
  display: none;
}
@-moz-keyframes rotateTopSideFirst {
  40% {
    -webkit-transform: rotateX(15deg);
    -moz-transform: rotateX(15deg);
    -o-transform: rotateX(15deg);
    -ms-transform: rotateX(15deg);
    transform: rotateX(15deg);
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    -moz-transform: scale(0.8) translateZ(-200px);
    -o-transform: scale(0.8) translateZ(-200px);
    -ms-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes rotateTopSideFirst {
  40% {
    -webkit-transform: rotateX(15deg);
    -moz-transform: rotateX(15deg);
    -o-transform: rotateX(15deg);
    -ms-transform: rotateX(15deg);
    transform: rotateX(15deg);
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    -moz-transform: scale(0.8) translateZ(-200px);
    -o-transform: scale(0.8) translateZ(-200px);
    -ms-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes rotateTopSideFirst {
  40% {
    -webkit-transform: rotateX(15deg);
    -moz-transform: rotateX(15deg);
    -o-transform: rotateX(15deg);
    -ms-transform: rotateX(15deg);
    transform: rotateX(15deg);
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    -moz-transform: scale(0.8) translateZ(-200px);
    -o-transform: scale(0.8) translateZ(-200px);
    -ms-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes rotateTopSideFirst {
  40% {
    -webkit-transform: rotateX(15deg);
    -moz-transform: rotateX(15deg);
    -o-transform: rotateX(15deg);
    -ms-transform: rotateX(15deg);
    transform: rotateX(15deg);
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: scale(0.8) translateZ(-200px);
    -moz-transform: scale(0.8) translateZ(-200px);
    -o-transform: scale(0.8) translateZ(-200px);
    -ms-transform: scale(0.8) translateZ(-200px);
    transform: scale(0.8) translateZ(-200px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes moveFromTop {
  from {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes moveFromTop {
  from {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-o-keyframes moveFromTop {
  from {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes moveFromTop {
  from {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}