*{box-sizing:border-box}html,body,#main{height:100%;width:100%;padding:0;margin:0}::-moz-selection{color:#fff;background-color:#098aff}::selection{color:#fff;background-color:#098aff}h1,h2,h3,h4,h5,p,ul,li{margin:0;padding:0}ul li{list-style:none}.clearfix:after{clear:both;display:block;content:" "}.social{position:absolute;left:20px;bottom:15px;display:none;z-index:1051}.social .fb-share-button{float:left;margin-right:5px}#main .brand-headline{position:absolute;left:20px;top:20px;z-index:103}#main .brand-headline h1{font-family:'Shrikhand',sans-serif;font-weight:normal;color:#fff}#main .brand-headline h1 span{font-size:14px;font-family:'Affogato-Medium',sans-serif;display:inline-block;margin-left:5px}#main .color-mover{height:100%;position:absolute;width:1px;background-color:rgba(255,255,255,0.3);left:50%;z-index:101}#main .color-mover .color-grab{height:26px;width:26px;border-radius:100px;background-color:#fff;box-shadow:0 3px 10px rgba(0,0,0,0.2);position:absolute;left:50%;top:50%;margin-top:-13px;margin-left:-13px;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);cursor:pointer}#main .color-mover .color-grab.color-grab-in{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}#main .color-container{height:100%;width:50%;position:absolute;top:0}#main .color-container.container-1{left:0}#main .color-container.container-2{right:0}#main .color-container .color-panel{width:100%;height:100%;position:relative;z-index:100;transition:width 0.3s ease-in-out,opacity 0.25s ease-in-out}#main .color-container .color-panel.color-panel-1{background-color:#1687ED;position:absolute;left:0}#main .color-container .color-panel.color-panel-2{background-color:#14375A;position:absolute;right:0}#main .color-container .color-panel.color-panel-minimize{width:0;opacity:0}#main .color-blend{position:absolute;top:40%;left:50%;margin-left:-80px;padding:20px 35px;background-color:#fff;color:#098aff;font-family:'Affogato-Medium',sans-serif;border-radius:5px;box-shadow:0 30px 30px -20px rgba(0,0,0,0.3);z-index:102;font-size:18px;border:none;outline:none;cursor:pointer;transition:all 0.2s ease-in-out}#main .color-blend:hover,#main .color-blend:focus{box-shadow:0 20px 20px -20px rgba(0,0,0,0.2)}#main .color-blend.color-blend-minimize{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}#main .controls{position:absolute;right:20px;top:-100px;z-index:103;transition:all 0.2s cubic-bezier(0.42, 0, 0.31, 1.29);font-family:'Affogato-Medium',sans-serif;opacity:0}#main .controls.controls-in{top:20px;opacity:1}#main .controls .reset-color-blend{cursor:pointer;color:#098aff;padding:0 20px;background-color:#fff;border-radius:4px;float:left;margin-right:10px;font-size:18px;height:45px;line-height:45px;box-shadow:0 3px 10px rgba(0,0,0,0.1)}#main .controls .control-center{border-radius:4px;display:inline-block;height:45px;box-shadow:0 3px 10px rgba(0,0,0,0.1)}#main .controls .control-center .control{float:left;padding:0 11px;cursor:pointer;display:inline-block;position:relative;height:45px;background-color:#fff}#main .controls .control-center .control.color-linear{border-radius:4px 0 0 4px}#main .controls .control-center .control.color-radial{border-radius:0 4px 4px 0}#main .controls .control-center .control img{margin-top:11px}#main .controls .control-center .control.control-active{background-color:#c9e3ff}#main .controls .control-center .control.control-active svg path,#main .controls .control-center .control.control-active svg circle{fill:#098aff}#main .controls .color-download{cursor:pointer;padding:0 15px;background-color:#fff;border-radius:4px;height:45px;box-shadow:0 3px 10px rgba(0,0,0,0.1);display:inline-block;float:right;margin-left:10px}#main .controls .color-download svg{margin-top:11px}.color-reverse{position:absolute;left:50%;margin-left:-65px;padding:15px;background:rgba(255,255,255,0.4);border-radius:6px;box-shadow:0 5px 20px rgba(0,0,0,0.05);opacity:0;top:30px;transition:all 0.2s ease-in-out;width:120px}.color-reverse.color-reverse-in{top:48px;opacity:1}.slider-container{position:absolute;left:50%;margin-left:-75px;padding:15px;background:rgba(255,255,255,0.4);border-radius:6px;box-shadow:0 5px 20px rgba(0,0,0,0.05);top:54px}.slider-container:before{content:" ";border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(255,255,255,0.4);position:absolute;top:-6px;left:50%;margin-left:-6px}.slider-container .adjuster#adjustLinear{width:120px;background-color:#fff;border:none;border-radius:100px;height:4px}pre{margin:0;font-size:15px;line-height:24px}.select-gradient{border:none;outline:none;background-color:#098aff;border-radius:4px;color:#fff;padding:15px 20px;display:inline-block;margin-top:10px;font-family:'Affogato-Medium',arial,sans-serif;font-size:16px;cursor:pointer}.select-gradient:hover{background-color:#0074dc}#gradient-output{position:absolute;left:50%;top:50%;margin:-150px 0 0 -425px;width:850px;background-color:#fff;border-radius:3px;box-shadow:0 3px 10px rgba(0,0,0,0.15);padding:20px 0 20px 20px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);transition:all 0.2s ease-in-out;-ms-transform-origin:center top;transform-origin:center top;-webkit-transform-origin:center top;z-index:1050}#gradient-output.gradient-output-in{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-ms-transform-origin:center top;transform-origin:center top;-webkit-transform-origin:center top}.ui-slider .ui-slider-handle{border-radius:100px;top:-8px !important;height:20px !important;width:20px !important;border:none !important;box-shadow:0 1px 3px rgba(0,0,0,0.2)}.ui-slider .ui-slider-handle:focus{outline:none !important}.ui-slider .ui-slider-handle.ui-state-active{background-color:#b7d4ff !important}@font-face{font-family:'Affogato-Medium';src:url('../fonts/Affogato-Medium.eot');src:url('../fonts/Affogato-Medium.eot?#iefix') format('embedded-opentype'),url('../fonts/Affogato-Medium.woff') format('woff'),url('../fonts/Affogato-Medium.woff2') format('woff2'),url('../fonts/Affogato-Medium.ttf') format('truetype');font-weight:normal;font-style:normal;}@font-face{font-family:'Affogato-Regular';src:url('../fonts/Affogato-Regular.eot');src:url('../fonts/Affogato-Regular.eot?#iefix') format('embedded-opentype'),url('../fonts/Affogato-Regular.woff') format('woff'),url('../fonts/Affogato-Regular.woff2') format('woff2'),url('../fonts/Affogato-Regular.ttf') format('truetype');}