.jagged{display:none}#demos{padding:0;background:#333;color:#ddd;border-bottom:#111 20px solid}.demo-container{background:#111;padding:2px;margin-bottom:1em;position:relative}.demo{padding:2em 2em 0;border-top:#111 20px solid}.demo h2,.demo h2 a,.demo h3{color:#fff;padding:0}.controls{padding:10px 10px 0;font-size:90%;background:#222;border-radius:10px;margin-bottom:2em}.controls .control{padding-top:6px;padding-bottom:11px;border-top:#444 1px dashed;clear:both}.controls .control:first-child{padding-top:0;border-top:0}.controls .control:last-child{margin-bottom:0;border-bottom:none}.controls .control.border{padding-right:10px;border-right:#333 1px dashed}.controls select{width:100%;overflow-y:hidden}.controls label{padding:0;text-align:left;display:block;margin-bottom:0!important}.controls label.control-label:after{content:" :";float:right}.controls .slider{display:inline-block;width:calc(100% - 185px);border:0;text-align:left;transform:translateZ(0);height:6px;padding:12px 0 11px}.controls .slider div{position:absolute;width:15px;height:15px;background:white;border:#000 1px solid;border-radius:50%;z-index:10;top:7px;margin-left:1px}.controls .slider.filled span{display:block;position:absolute;background:#3ea9f5;border-top-left-radius:3px;border-bottom-left-radius:3px;z-index:5;border:1px solid #c5c5c5;height:6px}.controls .slider.filled span:last-child{background:#222;border-top-right-radius:3px;border-bottom-right-radius:3px}.controls .slidervalue{width:45px;float:left;background:#222;border:1px solid #3ea9f5;border-radius:2px;-webkit-box-shadow:inset 0 20px 20px -20px rgba(0,0,0,.8);-moz-box-shadow:inset 0 20px 20px -20px rgba(0,0,0,.8);box-shadow:inset 0 20px 20px -20px #000c;text-align:center;color:#777;margin:0 12px 0 10px;transform:translateZ(0)}.fullsize .controls{margin-bottom:1.2em}.timeline td:first-child{text-align:center;vertical-align:middle;font-size:90%;cursor:pointer}.timeline td:last-child{width:100%;padding:7px 7px 0 0;transform:translateZ(0)}.timeline .slider{width:100%;border-radius:3px;text-align:left;transform:translateZ(0);height:15px;background:#222;border:1px solid #c5c5c5}.timeline .slider div{position:absolute;top:-2px;width:10px;height:17px;background:white;border:#000 1px solid;border-radius:2px;z-index:10}.checkbox input[type=checkbox]{visibility:hidden}.checkbox{position:relative;overflow:hidden;vertical-align:top;width:22px;height:22px;display:inline-block;margin-right:5px}.checkbox label{cursor:pointer;position:absolute;width:20px;height:20px;top:0;left:0;background:#222;border:1px solid #3ea9f5;border-radius:2px;-webkit-box-shadow:inset 0 20px 20px -20px rgba(0,0,0,.8);-moz-box-shadow:inset 0 20px 20px -20px rgba(0,0,0,.8);box-shadow:inset 0 20px 20px -20px #000c}.checkbox label:after{opacity:.2;content:"";position:absolute;width:9px;height:5px;background:transparent;top:4px;left:4px;border:3px solid #666;border-top:none;border-right:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.checkbox label:hover:after{border-color:#ccc;opacity:.3}.checkbox input[type=checkbox]{margin:0}.checkbox input[type=checkbox]:checked+label:after{opacity:1;border-color:#3ea9f5}.controls .btn{text-decoration:none;color:#fff;border-radius:5px;border:1px solid #111;border-bottom-color:transparent;line-height:1;font-weight:400;font-size:100%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#333",endColorstr="#222",GradientType=0);text-shadow:none;box-shadow:none;display:block;margin-bottom:0;margin-top:3px;height:40px;padding:0 20px}.controls .select-container select{padding:5px;border-radius:5px;background:#333;border:1px solid #3ea9f5;-webkit-box-shadow:inset 0 20px 20px -20px rgba(0,0,0,.8);-moz-box-shadow:inset 0 20px 20px -20px rgba(0,0,0,.8);box-shadow:inset 0 20px 20px -20px #000c;color:#fff}.controls .select-container select:focus{outline:none}.controls .select-container select option{outline:none;border:none}.controls .select-container{overflow:hidden}.controls .control-label{width:110px;float:left}.transformCircle:hover{opacity:1}.demo-container{transition:width .5s ease}.fullsize{width:100%!important;margin-left:0!important}.description.fullsize .controls{width:50%!important}.resize{width:30px;height:30px;float:right;position:absolute;bottom:35px;right:8px;background:url(/img/core/resize-up.png);opacity:.75;z-index:100}.resize:hover{opacity:1;cursor:pointer}.resize.checked{background:url(/img/core/resize-down.png)}.no-controls .resize{bottom:8px}.no-controls .spine-widget{margin-bottom:-8px}.no-controls canvas{margin-bottom:-8px}canvas{transition:all .5s ease}.overlay{opacity:1;transition:opacity .5s ease;z-index:10}.overlay-hide{opacity:0}.overlay-label{display:block;position:absolute;text-align:center;bottom:.9em;color:#1c2022;text-shadow:1px 1px 1px rgba(50,50,50,.3);transition:bottom .5s ease}.demo canvas{border-radius:8px}.demo-container{border:#333 1px solid;border-radius:8px}.demo-container .title{background:#333;padding:.5em}.demo-container h3{margin:0;padding:0;color:#aaa}.demo-container a .description{opacity:0;display:block;height:100%;width:100%;position:absolute;top:0;background:rgba(0,0,0,.5);border:#333 10px solid;border-top-width:0;box-sizing:border-box;transition:opacity .3s ease-out}.demo-container a:hover .description{opacity:1}.demo-container .description p{padding:.5em;color:#fff;display:block}#content .demo-container a img{box-shadow:none;border:#333 10px solid;border-top-width:0;box-sizing:border-box;margin:0}#below{display:none}@media screen and (min-width: 0px) and (max-width: 870px){.overlay-label{font-size:80%}}@media screen and (min-width: 0px) and (max-width: 767px){.page-demos article .units-row{margin-bottom:0}.demo{padding:2em 0 0}.demo-container{border:0;border-radius:0;padding-left:0;padding-right:0}.demo canvas{border:0;border-radius:0}.description,.controls,.demo h2{padding-left:.5em;padding-right:.5em}#below{display:block}.resize{display:none}.description.fullsize .controls{width:100%!important}}@media screen and (min-width: 0px) and (max-width: 390px){.hide-small{display:none}}.aspect{position:relative;padding-bottom:70.14%}.aspect canvas{position:absolute;inset:0;width:100%;height:100%}.play{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E);width:40px;height:30px}.pause{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M26.94%2C6.978v17.045h-5.249V6.978H26.94z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M18.975%2C6.978v17.045h-5.249V6.978H18.975z%22%2F%3E%3C%2Fsvg%3E);width:40px;height:30px;margin:0}.compare{float:left;width:45px;height:45px;margin-right:10px;position:relative;top:-3px;border:1px solid #3ea9f5}a:hover .compare{border:1px solid #ef6465}