.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.desaturate {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(resources.svg#desaturate);
  filter: gray;
  -webkit-filter: grayscale(1);
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.loading-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.1)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(255, 255, 255, 0.1)), color-stop(0.75, transparent), to(transparent));
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
  background-size: 60px 60px;
  -moz-background-size: 60px 60px;
  -webkit-background-size: 60px 60px;
  -webkit-animation: animate-stripes 2s linear infinite;
}

@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -60px 0;
  }
}

@-moz-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -60px 0;
  }
}

@-ms-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -60px 0;
  }
}

@-o-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -60px 0;
  }
}

@keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -60px 0;
  }
}

body.iphone {
  overflow: hidden;
}

body.iphone #iphone-image-link {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1000;
  overflow: hidden;
  background: url(../img/iphone-horizontal.jpg) center top no-repeat;
  background-size: 568px 240px;
  display: block !important;
}

body.iphone.right-side-up #iphone-image-link {
  background: url(../img/iphone-vertical.jpg) center top no-repeat;
  background-size: 320px 568px;
}

body.iphone * {
  display: none;
}

@font-face {
  font-family: DINWeb;
  src: url("../font/DINWeb.eot");
}

@font-face {
  font-family: DINWeb;
  src: url("../font/DINWeb.woff") format("woff");
}

#replay-thumbnail {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  position: absolute;
  z-index: 1000;
  bottom: 25px;
  left: 25px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 15px #000000;
  -moz-box-shadow: 0 0 15px #000000;
  box-shadow: 0 0 15px #000000;
  width: 150px;
  height: 150px;
  border: 1px solid #4d415b;
  cursor: pointer;
}

#replay-thumbnail.visible {
  opacity: 1;
  pointer-events: all;
}

#replay-thumbnail:hover {
  border: 1px solid #60497b;
}

#replay-thumbnail:active {
  border: 1px solid #5a4574;
}

#replay-thumbnail img {
  border-radius: 5px;
}

#replay-thumbnail .tt {
  left: 0px !important;
  width: 150px !important;
  text-align: center;
  padding: 0;
  bottom: auto;
  top: -30px;
}

#appstore-badge {
  position: absolute;
  bottom: 20px;
  right: 30px;
  z-index: 5;
  text-decoration: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  pointer-events: none;
  width: 262px;
  height: 125px;
  width: 165px;
  height: 300px;
  overflow: hidden;
  overflow: visible;
}

#appstore-badge #announcement {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -webkit-transition: all 0.1 ease-in-out !important;
  -moz-transition: all 0.1 ease-in-out !important;
  -ms-transition: all 0.1 ease-in-out !important;
  -o-transition: all 0.1 ease-in-out !important;
  transition: all 0.1 ease-in-out !important;
  height: 245px;
  width: 170px;
}

#appstore-badge #announcement.visible {
  opacity: 1;
  pointer-events: all;
}

#appstore-badge #announcement img {
  -webkit-transition: all 0.1 ease-in-out !important;
  -moz-transition: all 0.1 ease-in-out !important;
  -ms-transition: all 0.1 ease-in-out !important;
  -o-transition: all 0.1 ease-in-out !important;
  transition: all 0.1 ease-in-out !important;
}

#appstore-badge #announcement .close-button {
  color: #aeaed6;
  border-radius: 5px;
  display: block;
  position: absolute;
  right: -6px;
  top: 249px;
  z-index: 10000;
  text-align: center;
  font-size: 14px;
  line-height: 26px;
  width: 26px;
  height: 26px;
  background: #222222;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#111111));
  background-image: -moz-linear-gradient(top, #222222, #111111);
  z-index: 1000;
  -webkit-box-shadow: 0 0 5px #000000;
  -moz-box-shadow: 0 0 5px #000000;
  box-shadow: 0 0 5px #000000;
  -webkit-transition: 0.8s all ease-in-out;
  -moz-transition: 0.8s all ease-in-out;
  -ms-transition: 0.8s all ease-in-out;
  -o-transition: 0.8s all ease-in-out;
  transition: 0.8s all ease-in-out;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

#appstore-badge #announcement .close-button:active {
  opacity: 1;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

#appstore-badge #announcement .close-button.ad-showing-unnecessarily {
  opacity: 1;
  opacity: 0.7;
  pointer-events: all;
}

#appstore-badge #announcement .close-button.close-pressed {
  opacity: 0;
  pointer-events: none;
}

#appstore-badge #announcement:hover .close-button {
  opacity: 1;
}

#appstore-badge #announcement img {
  margin-bottom: 5px;
  position: absolute;
}

#appstore-badge #announcement.visible #app-announcement {
  opacity: 1;
  z-index: 1;
}

#appstore-badge #announcement.visible #app-announcement-hover {
  opacity: 0;
  z-index: 2;
}

#appstore-badge #announcement.visible:hover #app-announcement {
  opacity: 0;
}

#appstore-badge #announcement.visible:hover #app-announcement-hover {
  opacity: 1;
}

#appstore-badge #badge {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  margin: 0 auto;
  width: 135px;
  height: 40px;
  margin-top: 5px;
  position: relative;
  left: 3px;
  bottom: -10px;
  -webkit-box-shadow: 0 0 15px #000000;
  -moz-box-shadow: 0 0 15px #000000;
  box-shadow: 0 0 15px #000000;
  z-index: 100;
}

#appstore-badge #badge.visible {
  opacity: 1;
  pointer-events: all;
}

#share-options .direct-link {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  font-size: 12px;
  color: #ccc;
  margin-top: 5px;
  padding: 10px 0;
  text-indent: 10px;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  -o-user-select: text !important;
  user-select: text !important;
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
  margin-left: 10px;
  background: #382c49;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#382c49), to(#2d233b));
  background-image: -moz-linear-gradient(top, #382c49, #2d233b);
  -webkit-box-shadow: 0 0 15px #000, inner 0 0 5px #000;
  -moz-box-shadow: 0 0 15px #000, inner 0 0 5px #000;
  box-shadow: 0 0 15px #000, inner 0 0 5px #000;
  border: none;
  border: 1px solid #111;
  width: 220px;
  outline: none !important;
  display: inline-block;
  cursor: text;
}

#share-options .direct-link.visible {
  opacity: 1;
  pointer-events: all;
}

#share-options .direct-link:focus {
  border: 1px solid #276f9b;
}

#copy-to-clipboard-wrap {
  position: relative;
}

#btn-new,
#btn-share,
#share-options .btn {
  background: #53416c !important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#53416c), to(#261d32)) !important;
  background-image: -moz-linear-gradient(top, #53416c, #261d32) !important;
  border-top: 1px solid #5f96e1;
}

#btn-new:hover,
#btn-share:hover,
#share-options .btn:hover,
#btn-new.hover,
#btn-share.hover,
#share-options .btn.hover {
  border-top-color: #35c9ff;
}

#btn-new:hover .text,
#btn-share:hover .text,
#share-options .btn:hover .text,
#btn-new.hover .text,
#btn-share.hover .text,
#share-options .btn.hover .text {
  color: #fff;
}

#btn-new:active,
#btn-share:active,
#share-options .btn:active,
#btn-new.active,
#btn-share.active,
#share-options .btn.active {
  background: #3a2d4c !important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3a2d4c), to(#53416c)) !important;
  background-image: -moz-linear-gradient(top, #3a2d4c, #53416c) !important;
}

#btn-new.disabled,
#btn-share.disabled,
#share-options .btn.disabled {
  background: #53416c !important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#53416c), to(#261d32)) !important;
  background-image: -moz-linear-gradient(top, #53416c, #261d32) !important;
  border-top: 1px solid #5f96e1 !important;
}

#intro-center {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opacity 1.5s ease-in-out;
  -ms-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none !important;
  z-index: 100;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 150px;
  line-height: 100px;
  width: 300px;
  margin-left: -150px;
  margin-top: -275px;
  color: #ccc;
}

#intro-center.visible {
  opacity: 1;
  pointer-events: all;
}

#intro-draw-something {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opacity 1.5s ease-in-out;
  -ms-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none !important;
  z-index: 101;
  position: absolute;
  top: 50%;
  margin-top: 170px;
  width: 100%;
  height: 20px;
  text-align: center;
  font-size: 14px;
  color: #a48dc4;
}

#intro-draw-something.visible {
  opacity: 1;
  pointer-events: all;
}

#intro-mute-option {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opacity 1.5s ease-in-out;
  -ms-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none !important;
  z-index: 100;
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 20px;
  text-align: center;
  font-size: 14px;
  color: #a48dc4;
  color: #a288c3;
  color: #79698e;
}

#intro-mute-option.visible {
  opacity: 1;
  pointer-events: all;
}

#intro-mute-option #instructions {
  margin-bottom: 15px;
  color: #c4b2dc;
}

#intro-mute-option a {
  pointer-events: all;
  color: #a48dc4;
  color: #947fb1;
  text-decoration: none;
  border-bottom: 1px dotted #a48dc4;
}

#intro-mute-option a:hover {
  color: #eadbff;
  border-bottom-style: solid;
}

#intro-mute-option a:active {
  color: #d1bbef;
}

* {
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

html {
  background: #000;
}

body {
  font-family: DINWeb, Helvetica, sans-serif;
  font-size: 16px;
  overflow: hidden;
  background: #000;
}

.text-drop-shadow {
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
}

:hover>.tt {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.tt {
  z-index: 100;
  color: #fff;
  padding: 10px;
  height: 20px;
  white-space: nowrap;
  position: absolute;
  bottom: -30px;
  font-size: 14px;
  width: 200px;
  left: -85px;
  text-align: center;
  opacity: 0;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
  pointer-events: none;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
}

#main-controls {
  top: 20px;
  left: 20px;
  z-index: 1000;
}

#sound-and-about {
  top: 10px;
  right: 20px;
}

#sound-and-about .app-link-container {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  color: #ccc !important;
  width: 265px;
  pointer-events: all;
  font-size: 13px;
  position: relative;
}

#sound-and-about .app-link-container.visible {
  opacity: 1;
  pointer-events: all;
}

#sound-and-about .app-link-container a {
  width: 135px;
  height: 40px;
  display: block;
  float: right;
}

#sound-and-about .app-link-container a {
  text-decoration: none;
  color: #d7c3f2;
}

#sound-and-about .app-link-container a:hover {
  color: #fff;
}

#sound-and-about .app-link-container a:active {
  color: #d7c3f2;
}

#sound-and-about .social-row {
  width: 265px;
}

#sound-and-about .social-row .silk-icon {
  height: auto;
  line-height: auto;
}

#sound-and-about .social-row .social {
  float: right;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  display: inline-block;
  position: relative;
  top: 12px;
  right: 10px;
  z-index: 1;
  padding-left: 15px;
}

#sound-and-about .social-row .social.visible {
  opacity: 1;
  pointer-events: all;
}

#sound-and-about .social-row .social .fb-like {
  display: inline-block;
  overflow: hidden;
  position: relative;
  left: -5px;
  top: -1px;
}

#sound-and-about .social-row .social .fb-like {
  vertical-align: text-top !important;
}

#sound-and-about .social-row .social .fb-like * {
  vertical-align: text-top !important;
}

#sound-and-about .social-row .social .twitter-follow-button[style] {
  vertical-align: text-top !important;
}

#sound-and-about .social-row .social .twitter-follow-button {
  display: inline-block;
  font-style: 10px;
  color: #8976a4;
  position: relative;
  text-decoration: none;
  top: -1px;
}

#sound-and-about .silk-icon {
  float: right;
}

#sound-and-about .about-row {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  margin-top: position: relative;
  width: 200px;
  color: #8976a4;
  padding: 20px;
  background: #231c2c;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#231c2c), to(#130f18));
  background-image: -moz-linear-gradient(top, #231c2c, #130f18);
  font-size: 13px;
  line-height: 1.5;
}

#sound-and-about .about-row.visible {
  opacity: 1;
  pointer-events: all;
}

#sound-and-about .about-row a {
  color: #b8a3d6;
  text-decoration: none;
}

#sound-and-about .about-row a:hover {
  color: #f3e9ff;
}

#sound-and-about .about-row a:active {
  color: #dbd0e9;
}

#sound-and-about .about-row p {
  margin-bottom: 8px;
}

.controls-container {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.controls-container .row {
  clear: both;
  pointer-events: none;
  *zoom: 1;
}

.controls-container .row:before,
.controls-container .row:after {
  display: table;
  content: "";
}

.controls-container .row:after {
  clear: both;
}

.controls-container .row .btn {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -webkit-transition: opacity 0.7s ease-in-out, color 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out, color 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out, color 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out, color 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out, color 0.7s ease-in-out;
  position: relative;
  width: 95px;
  height: 45px;
  line-height: 45px;
  float: left;
  background: #261d32;
  color: #cbb2ec;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 1px solid #130e19;
  font-size: 14px;
}

.controls-container .row .btn.visible {
  opacity: 1;
  pointer-events: all;
}

.controls-container .row .btn:last-child {
  border-right: none;
}

.controls-container .row .btn.mini {
  width: 55px;
}

.controls-container .row .btn .loading-stripes {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -ms-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.controls-container .row .btn.disabled {
  color: #7f6e94 !important;
  background: #261d32 !important;
  cursor: default !important;
}

.controls-container .row .btn.disabled .text {
  color: inherit !important;
}

.controls-container .row .btn.disabled.loading {
  color: #fff !important;
}

.controls-container .row .btn.disabled.loading .text {
  color: #fff !important;
}

.controls-container .row .btn.loading {
  color: #fff !important;
}

.controls-container .row .btn.loading .loading-stripes {
  opacity: 1;
}

.controls-container .row .btn.loading .text {
  color: #fff !important;
}

.controls-container .row .btn:hover {
  background: #362a47;
  cursor: pointer;
}

.controls-container .row .btn:active {
  background: #322742;
  color: #c4ade4;
}

.controls-container .row .btn.silk-icon {
  width: 47px;
  background: transparent !important;
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
  font-size: 14px;
  border-right: none;
  text-align: center;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}

.controls-container .row .btn.silk-icon .tt {
  margin-left: -2px;
}

.controls-container .row .btn.silk-icon:hover {
  color: #fff !important;
}

.controls-container .row .btn.silk-icon:active {
  color: #dbd0e9 !important;
}

.controls-container .row .btn.silk-icon i {
  display: inline-block;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.controls-container .row .btn.silk-icon.flip-icon i {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.controls-container .row .btn.silk-icon:hover i {
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.controls-container .row .btn.silk-icon .tt {
  bottom: -7px;
}

.controls-container .row #share-wrap {
  position: relative;
  float: left;
}

.controls-container .row #share-wrap #btn-share {
  position: absolute;
  z-index: 5;
  border-right: none;
}

.controls-container .row #share-options {
  position: relative;
  white-space: nowrap;
  float: left;
  z-index: 4;
  pointer-events: none;
}

.controls-container .row #share-options .btn,
.controls-container .row #share-options .direct-link {
  opacity: 0;
  pointer-events: none;
}

.controls-container .row #share-options.show-share-options .btn,
.controls-container .row #share-options.show-share-options .direct-link {
  opacity: 1;
  pointer-events: all;
}

.controls-container .download-row {
  position: absolute;
}

.controls-container .download-row img {
  width: 100%;
  border: 1px solid #2c233a;
  -webkit-box-shadow: 0 0 25px #000000;
  -moz-box-shadow: 0 0 25px #000000;
  box-shadow: 0 0 25px #000000;
}

.controls-container .download-row p.instructions {
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: #b8a3d6;
}

.controls-container .download-row p.instructions em {
  white-space: nowrap;
  color: #d3c1ed;
}

.controls-container .controls-row {
  font-size: 14px;
  margin-top: 15px;
  width: 195px;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}

.controls-container .controls-row.visible {
  opacity: 1;
  pointer-events: all;
}

.controls-container .controls-row.color-and-symmetry-row {
  margin-top: 10px;
}

.controls-container .controls-row.color-and-symmetry-row .silk-icon {
  cursor: pointer;
}

.controls-container .controls-row .label {
  margin: 15px 5px 25px 5px;
  color: #8976a4;
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
  cursor: default;
}

.controls-container .controls-row .control {
  *zoom: 1;
}

.controls-container .controls-row .control:before,
.controls-container .controls-row .control:after {
  display: table;
  content: "";
}

.controls-container .controls-row .control:after {
  clear: both;
}

.controls-container .controls-row .control.toggle {
  padding: 0 5px 15px 5px;
  cursor: pointer;
  text-shadow: 0 0 5px #000, 1px 1px 0 #000;
  color: #8976a4;
}

.controls-container .controls-row .control.toggle:hover {
  color: #f3e9ff;
}

.controls-container .controls-row .control.toggle:active {
  color: #dbd0e9;
}

.controls-container .controls-row .control.toggle .state-on {
  display: none;
}

.controls-container .controls-row .control.toggle .state-off {
  display: block;
}

.controls-container .controls-row .control.toggle.on {
  color: #cbb2ec;
}

.controls-container .controls-row .control.toggle.on:hover {
  color: #f3e9ff;
}

.controls-container .controls-row .control.toggle.on:active {
  color: #dbd0e9;
}

.controls-container .controls-row .control.toggle.on .state-on {
  display: block;
}

.controls-container .controls-row .control.toggle.on .state-off {
  display: none;
}

.controls-container .controls-row .description {
  float: left;
}

.controls-container .controls-row .state {
  float: right;
  text-align: right;
}

.controls-container .controls-row #colorpicker {
  display: block;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
  width: 100%;
  height: 185px;
}

.controls-container .controls-row #colorpicker g {
  cursor: pointer !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
}

.controls-container .controls-row #colorpicker path {
  cursor: pointer !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
  cursor: pointer;
}

.controls-container .controls-row #colorpicker path:hover {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 4;
}

.controls-container .controls-row #colorpicker path.selected {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 6;
}

.controls-container .slider.one-d {
  position: relative;
  height: 30px;
  background: #231c2c;
  cursor: pointer;
  border-radius: 30px;
}

.controls-container .slider.one-d .slider-bg {
  position: relative;
  top: 10px;
  height: 10px;
  margin: 0 10px;
  background: #15111c;
  border-radius: 30px;
  overflow: hidden;
}

.controls-container .slider.one-d .slider-bg .slider-bg-pc {
  position: absolute;
  z-index: 2;
  height: 10px;
  border-radius: 30px;
  background: #757ab2;
}

.controls-container .slider.one-d .handle,
.controls-container .slider.one-d .ghost-handle {
  position: absolute;
  z-index: 5;
  top: 6px;
  height: 18px;
  width: 18px;
  background: #9e95cb;
  background: #8572af;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8572af), to(#6f6091));
  background-image: -moz-linear-gradient(top, #8572af, #6f6091);
  -webkit-box-shadow: 0 0 25px #000000;
  -moz-box-shadow: 0 0 25px #000000;
  box-shadow: 0 0 25px #000000;
  border-radius: 30px;
}

.controls-container .slider.one-d:active .handle {
  background: #6f6091;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6f6091), to(#8572af));
  background-image: -moz-linear-gradient(top, #6f6091, #8572af);
}

.controls-container .slider.one-d .ghost-handle {
  -webkit-transition: opacity 0.25s ease-out;
  -moz-transition: opacity 0.25s ease-out;
  -ms-transition: opacity 0.25s ease-out;
  -o-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  opacity: 0;
  pointer-events: none;
}

.controls-container .slider.one-d:hover .ghost-handle {
  opacity: 0.75;
  pointer-events: all;
}

.controls-container .slider.one-d:active .ghost-handle {
  opacity: 0;
}

.controls-container .slider.two-d {
  position: relative;
  height: 145px;
  background: #231c2c;
  cursor: pointer;
  border-radius: 30px;
}

.controls-container .slider.two-d .slider-bg {
  position: relative;
  top: 10px;
  height: 125px;
  margin: 0 10px;
  background: #15111c;
  border-radius: 30px;
  overflow: hidden;
}

.controls-container .slider.two-d .slider-bg .slider-bg-pc {
  position: absolute;
  z-index: 2;
  height: 125px;
  border-radius: 30px;
  background: #757ab2;
}

.controls-container .slider.two-d .handle,
.controls-container .slider.two-d .ghost-handle {
  position: absolute;
  z-index: 5;
  top: 63.5px;
  height: 18px;
  width: 18px;
  background: #9e95cb;
  background: #8572af;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8572af), to(#6f6091));
  background-image: -moz-linear-gradient(top, #8572af, #6f6091);
  -webkit-box-shadow: 0 0 25px #000000;
  -moz-box-shadow: 0 0 25px #000000;
  box-shadow: 0 0 25px #000000;
  border-radius: 30px;
}

.controls-container .slider.two-d:active .handle {
  background: #6f6091;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6f6091), to(#8572af));
  background-image: -moz-linear-gradient(top, #6f6091, #8572af);
}

.controls-container .slider.two-d .ghost-handle {
  -webkit-transition: opacity 0.25s ease-out;
  -moz-transition: opacity 0.25s ease-out;
  -ms-transition: opacity 0.25s ease-out;
  -o-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  opacity: 0;
  pointer-events: none;
}

.controls-container .slider.two-d:hover .ghost-handle {
  opacity: 0.75;
  pointer-events: all;
}

.controls-container .slider.two-d:active .ghost-handle {
  opacity: 0;
}

.controls-container #symmetry-controls {
  margin-top: 15px;
}

.controls-container #sym-num-rotations .ticks {
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}

.controls-container #sym-num-rotations .ticks .tick {
  position: absolute;
  width: 1px;
  height: 100%;
  background: #333;
  background: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#332940));
  background-image: -moz-linear-gradient(top, transparent, #332940);
}

.controls-container #sym-num-rotations .ticks .tick.one {
  left: 16.666666666666668%;
}

.controls-container #sym-num-rotations .ticks .tick.two {
  left: 33.333333333333336%;
}

.controls-container #sym-num-rotations .ticks .tick.three {
  left: 50%;
}

.controls-container #sym-num-rotations .ticks .tick.four {
  left: 66.66666666666667%;
}

.controls-container #sym-num-rotations .ticks .tick.five {
  left: 83.33333333333333%;
}

.controls-container #sym-num-rotations .ticks .tick.six {
  left: 100%;
}

body.silk-active #main-controls {
  pointer-events: none !important;
}

body.silk-active #main-controls .btn,
body.silk-active #main-controls .row *,
body.silk-active #main-controls .row,
body.silk-active #main-controls .control,
body.silk-active #main-controls .slider,
body.silk-active #main-controls #colorpicker,
body.silk-active #main-controls #colorpicker * {
  pointer-events: none !important;
}

body.silk-active #appstore-badge,
body.silk-active #announcement,
body.silk-active #app-announcement,
body.silk-active #app-announcement-hover,
body.silk-active #badge {
  pointer-events: none !important;
}

body.mouse-down-on-slider .toggle.control {
  pointer-events: none !important;
}

body.mouse-over-previewable-controls #sparks,
body.mouse-down-on-slider #sparks {
  pointer-events: none;
}

#canvii-container {
  left: 0;
  position: relative;
}

#silk-1,
#silk-2,
#sparks {
  position: absolute;
  top: 0;
  left: 0;
}

.silk-canvas {
  z-index: 1;
  opacity: 1;
  -webkit-transition: opacity 0.75s ease-out;
  -moz-transition: opacity 0.75s ease-out;
  -ms-transition: opacity 0.75s ease-out;
  -o-transition: opacity 0.75s ease-out;
  transition: opacity 0.75s ease-out;
}

.silk-canvas.onepacity {
  opacity: 1;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

.silk-canvas.active {
  z-index: 2;
  pointer-events: all;
}

.silk-canvas.active.zeropacity {
  opacity: 0;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

#sparks {
  cursor: pointer;
  z-index: 3;
}

#tips {
  position: absolute;
  pointer-events: none;
  width: 100%;
  z-index: 3;
  color: #fff;
  top: 50%;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
}

#tips .tip {
  color: #373547;
  color: #454259;
  color: #64607e;
  font-size: 18px;
  text-shadow: 0 0 5px #000;
  position: absolute;
  text-align: center;
  width: 100%;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#tips .tip a {
  color: #96bc7b;
  border-bottom: 1px solid #5a5579;
  text-decoration: none;
}

#tips .tip a:hover {
  color: #bbe59c;
  border-bottom: 1px solid #79749d;
}

#tips .tip a:active {
  color: #a8d488;
}

#tips .tip.showing {
  opacity: 1;
}

#tips .tip.showing a {
  pointer-events: all;
}