@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/lato-regular.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(../fonts/lato-bold.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(../fonts/lato-black.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(../fonts/lato-italic.woff) format('woff');
}

body {
  margin: 0px;
  overflow: hidden;
}
* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.hidden { display: none; }
.share:before { content: none !important;}
.share { width: 225px; }
.colorAdd { width: 18px; height: 16px; display: block; }
.color { width: 18px; height: 16px; display: block; }
.demo-text-box { margin-right: 24px; }
.demo-panel-title { margin-bottom: 10px !important; padding-top: 10px !important; }
.demo-panel-title a { color: black; text-decoration: none; }
#logo-container{ margin:10px 20px;}
#logo-container a{ display: block; width: 150px;  height: 50px;  background: url('../img/cklogo.png') no-repeat; background-size: contain; }
#instructions { width: 250px; position: absolute; top: 0px; right: 0px; }
.instructions { background: white; border: 2px solid #1abc9c; border-radius: 6px; padding: 6px 1px 1px 6px; overflow-y: auto; text-align: left;}
.actionsMenu { width: 224px; }
.animationControls { width: 100%; position: absolute; bottom: 0px; display: none; }
.animationControls .sliderContainer { margin: 0px 340px; }
.animationControls .playback { font-size: 22px; margin: 0px 0 0 290px; position: relative; float: left; top: -7px; }
.animationControls .addRemove { font-size: 22px; margin: 0px 270px 0 0; position: relative; float: right; top: -41px; }
.animationControls .addRemove span { margin: 0px 0 0 6px; } 
.animationControls .fui-cross { font-size: 23px; top: 1px; position: relative; }
.pagination ul > li.previous > a { margin-right: 4px !important; }
.pagination ul > li.next > a { margin-left: 4px !important; }
.pagination { margin: 0 0 10px 0 !important; }
.ui-slider-segment { margin: 3px -6px 0 33% !important; }
.tile.controls p { margin: 0 0 5px 0 !important; text-align: left; }
#welcome .hello { margin-left: 35px !important; }
.share .tile-image.big-illustration { margin: 10px 0; }
.share p { margin-bottom: 10px !important; }
.voxel-share { clear: both; }
.voxel-share img { float: left; height: 200px; }
.voxel-share input { width: 480px; }
.voxel-share textarea { width: 480px; height: 120px; }
.voxel-login input { width: 754px; }
.voxel-hint { margin-bottom: 8px; font-size: 12px; color: #666; }
.voxel-help { float: left; }
.voxel-help a { margin-right: 8px; font-size: 12px; }
.dk_options_inner, .dk_touch .dk_options { max-height: 300px !important; }
.color-container { margin: 5px 0 5px -20px; }
.modal-body .control-group .login-field { width: 248px !important; }
.modal-body .control-group { display: inline-block; }
#paperstackExport canvas {width: 700px;}

#browse .demo-browser-content { background-color: transparent; }
#browse .demo-browser-content img { border: 1px solid #7F8B97; }

.color-picker {white-space:normal;}

.btn-group > .btn {border-radius:4px; margin-right:2px; margin-left:0; margin-top:1px;}
.btn-group > .btn + .btn {margin-left:0;}

.toggle .toggle-radio {
  position: static;
  left: auto;
  -webkit-transform: translateX(120%);
  -ms-transform: translateX(120%);
  transform: translateX(120%);
}
.toggle .toggle-radio:first-child {
  left: auto;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.toggle.toggle-off .toggle-radio {
  left: auto;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.toggle.toggle-off .toggle-radio:first-child {
  left: auto;
  -webkit-transform: translateX(-120%);
  -ms-transform: translateX(-120%);
  transform: translateX(-120%);
}

#shareButton {
  -webkit-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}

i.icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
i.icon-eraser {
  background-image: url("../img/icon-eraser.png");
}
i.icon-zoomin {
  background-image: url("../img/icon-zoom-in.png");
}
i.icon-zoomout {
  background-image: url("../img/icon-zoom-out.png");
}
i.icon-turnleft {
  background-image: url("../img/icon-rotate-left.png");
}
i.icon-turnright {
  background-image: url("../img/icon-rotate-right.png");
}
#toolbuttons {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 52px;
}
#toolbuttons .btn,
#turnbuttons .btn {
  margin-bottom: 10px;
  padding: 8px 12px;
  outline: none;
}
#toolbuttons .btn.btn-primary:hover, #toolbuttons .btn.btn-primary:focus,
#turnbuttons .btn.btn-primary:hover, #turnbuttons .btn.btn-primary:focus {
  background-color: #1abc9c;
}
#toolbuttons .btn.btn-primary:active, 
#turnbuttons .btn.btn-primary:active {
  background-color: #16a085;
}
#toolbuttons .btn.btn-primary.active,
#turnbuttons .btn.btn-primary.active {
  background-color: #2fe2bf;
}

#toolturnleft {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
#toolturnright {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
#cnzz_stat_icon_1255727926 {
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
}
@media (max-device-width: 480px) {
  #logo-container{
    margin: 15px;
    float: right;
  }
  #logo-container a{
    display: inline-block;
    width: 90px;
    height: 50px;
    background: url('../img/cklogo.png') no-repeat;
    background-size: contain;
  }
}