/* Author: Hello Human Client: Blackcap Education Lead dev: James Cooke Dev site: http://hellohuman.com.au */ /* Author: Hello Human Client: Blackcap Education Lead dev: James Cooke Dev site: http://hellohuman.com.au What is dis: Variables, colors and a bunch of other fun stuff */ /** * Page * * @color * @section Body */ /** * Primary * * @color * @section Base */ /** * Secondary * * @color * @section Base */ /** * Tertiary * * @color * @section Base */ /** * Confirm > Green * * @color * @section Base */ /** * Dark * * @color * @section Base */ /** * Dark Grey * * @color * @section Base */ /** * Grey * * @color * @section Base */ /** * Light Grey * * @color * @section Base */ /** * White * * @color * @section Base */ /** * Border * * @color * @section Border */ /** * Simple font mixin * * @mixin font */ /** * Font styles for body * * @mixin font-body */ /** * Font styles for inputs * * @mixin font-input */ /** * Default shadow used for cards * * @mixin card-shadow */*,:after,:before{padding:0;border:0;margin:0;font:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}div:focus{outline:0}img,svg,video{display:block;max-width:100%}em,i{font-style:italic}hr{border-bottom:1px solid #e9e9ea}ul{padding:0;list-style:none}dd,dl,ul{margin:0}.hidden{display:none}::-ms-clear{display:none}::-webkit-search-cancel-button,::-webkit-search-decoration,::-webkit-search-results-button,::-webkit-search-results-decoration{display:none} /* Author: Hello Human Client: Blackcap Education Lead dev: James Cooke Dev site: http://hellohuman.com.au What is dis: Variables, colors and a bunch of other fun stuff */ /** * Page * * @color * @section Body */ /** * Primary * * @color * @section Base */ /** * Secondary * * @color * @section Base */ /** * Tertiary * * @color * @section Base */ /** * Confirm > Green * * @color * @section Base */ /** * Dark * * @color * @section Base */ /** * Dark Grey * * @color * @section Base */ /** * Grey * * @color * @section Base */ /** * Light Grey * * @color * @section Base */ /** * White * * @color * @section Base */ /** * Border * * @color * @section Border */.button,button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#4056f4;border:2px solid #4056f4;border-radius:50px;padding:10px 22px 12px;font-size:18px;font-weight:700;color:#fffffe;outline:none;cursor:pointer;min-height:auto;text-transform:none;line-height:1;-webkit-transition:all .5s cubic-bezier(.175,.885,.32,1.275);transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.button:hover,button:hover{text-decoration:none;border-color:#40b0f4;background:#40b0f4}.button.button--red,button.button--red{background-color:#ce2d4f;border-color:#ce2d4f}.button.button--red:hover,button.button--red:hover{border-color:#ce2d85;background:#ce2d85}.button.button-spinner,button.button-spinner{position:relative;color:transparent;width:30px;overflow:hidden;text-overflow:clip;white-space:nowrap;pointer-events:none}.button.button-spinner:before,button.button-spinner:before{display:block;content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border:2px solid #fffffe;border-radius:100%;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;-webkit-animation:rotate-button .6s linear infinite;animation:rotate-button .6s linear infinite}.button.button-secondary,button.button-secondary{border:2px solid #4056f4;background:#fffffe;color:#4056f4}.button.button-secondary:hover,button.button-secondary:hover{color:#fffffe;border-color:#40b0f4;background:#40b0f4}.button.button-small,button.button-small{font-size:16px;padding:8px 18px 9px}.button.button-tiny,button.button-tiny{font-size:14px;padding:6px 14px 7px}.button.button-micro,button.button-micro{font-size:13px;padding:4px 10px 5px}.button:disabled,.button:disabled:hover,button:disabled,button:disabled:hover{color:#a3a9ad;background-color:#e9e9ea;border-color:#e9e9ea}button.button-micro bc-icon-plus{margin:-1px;margin-right:5px}.button-container button+button{margin-left:5px}.icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .6s cubic-bezier(.175,.885,.32,1.275);transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.icon svg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;max-height:100%}.icon[size=base]{width:20px;height:20px;line-height:20px}.icon[size=xss]{height:12px;width:12px;line-height:12px}.icon[size=xs]{height:14px;width:14px;line-height:14px}.icon[size=s]{height:16px;width:16px;line-height:16px}.icon[size=m]{height:32px;width:32px;line-height:32px}.icon[size=l]{height:50px;width:50px;line-height:50px}.icon[size=xl]{height:60px;width:60px;line-height:60px}.icon[size=blackcap-logo-large]{height:59px;width:96px;line-height:60px}.icon[color=red]{color:#ce2d4f}.icon[color=white]{color:#fffffe}.icon[color=blue]{color:#4056f4}.icon[color=dark]{color:#303030}.icon[cahhover=true]:active,.icon[canhover=true]:focus,.icon[canhover=true]:hover,a:active .icon[canhover=true],a:focus .icon[canhover=true],a:hover .icon[canhover=true],button:active .icon[canhover=true],button:focus .icon[canhover=true],button:hover .icon[canhover=true]{color:#4056f4}.icon[cahhover=true]:active[color=red],.icon[canhover=true]:focus[color=red],.icon[canhover=true]:hover[color=red],a:active .icon[canhover=true][color=red],a:focus .icon[canhover=true][color=red],a:hover .icon[canhover=true][color=red],button:active .icon[canhover=true][color=red],button:focus .icon[canhover=true][color=red],button:hover .icon[canhover=true][color=red]{color:#ce2da0}.icon[cahhover=true]:active[color=blue],.icon[canhover=true]:focus[color=blue],.icon[canhover=true]:hover[color=blue],a:active .icon[canhover=true][color=blue],a:focus .icon[canhover=true][color=blue],a:hover .icon[canhover=true][color=blue],button:active .icon[canhover=true][color=blue],button:focus .icon[canhover=true][color=blue],button:hover .icon[canhover=true][color=blue]{color:#40b0f4} /** * Simple font mixin * * @mixin font */ /** * Font styles for body * * @mixin font-body */ /** * Font styles for inputs * * @mixin font-input */ /** * Default shadow used for cards * * @mixin card-shadow */.card{background:#fffffe;border-radius:8px;border:1px solid #e9e9ea;position:relative}.card.card--dark{background-color:#e9e9ea}.card.card-shadow{-webkit-box-shadow:0 5px 15px 0 rgba(0,0,0,.02);box-shadow:0 5px 15px 0 rgba(0,0,0,.02)}.card.card-no-rounded-corners{border-radius:0}.card.card--red{background-color:#ce2d4f;color:#fffffe;border-color:#ce2d4f}.card.card--blue{border-color:#4056f4}.card.card--blue,.card .card-content--blue{background-color:#4056f4;color:#fffffe}.card .card-content--blue:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.card .card-content--blue:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.card .card-content-highlight{background-color:#4056f4;color:#fffffe}.card .card-content-highlight:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.card .card-content-highlight:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.card .card-content{padding:15px 20px}.card .card-content+.card-content{padding-top:0}.card .card-content--large{padding:30px 20px}.card .card-content--no-pading-bottom{padding-bottom:0}.card .card-content--slim{padding:15px;font-size:14px}.card .card-content--light-grey{background-color:#f7f7f6}.card .card-content--light-grey:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.card .card-content--light-grey:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.card .card-list-item--slim{padding:10px 15px;font-size:14px}.card .card-list-item--slim+.card-list-item--slim{padding-top:0}.card .card-action-container{padding:10px 10px 10px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.card .card-action-container button+button{margin-left:10px}.card .card-action-container .spacer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.card .card-action-container.card-action-container--top-overlay{position:absolute;top:0;right:0;left:0;border-top-left-radius:8px;border-top-right-radius:8px}.card .card-action-container.card-action-container--red-background{background-color:#ce2d4f;color:#fffffe}.card-avatar-container{display:-webkit-box;display:-ms-flexbox;display:flex}.card-avatar-container>.avatar{display:block;margin-right:15px;-ms-flex-negative:0;flex-shrink:0}.card-avatar-container>.avatar--small{margin-right:5px}.card-avatar-container>.content{display:block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:1px}.card-options{position:absolute;right:0;top:0;width:40px;height:30px;text-align:center}.card-options .toggle{cursor:pointer;font-weight:700;color:#303030}.card-options .toggle:hover{color:#4056f4}.card-options-dropdown{-webkit-box-shadow:0 5px 15px 0 rgba(0,0,0,.02);box-shadow:0 5px 15px 0 rgba(0,0,0,.02);width:100%;font-size:14px}.card-options-dropdown li{border-bottom:1px solid #e9e9ea;font-weight:600}.card-options-dropdown li:hover{background-color:#f7f7f6}.card-options-dropdown li:last-child{border-bottom:none}.card-options-dropdown li a{display:block;padding:10px}.card-edit-button{position:absolute;top:12px;right:12px} /* Author: Hello Human Client: Blackcap Education Lead dev: James Cooke Dev site: http://hellohuman.com.au What is dis: Variables, colors and a bunch of other fun stuff */ /** * Page * * @color * @section Body */ /** * Primary * * @color * @section Base */ /** * Secondary * * @color * @section Base */ /** * Tertiary * * @color * @section Base */ /** * Confirm > Green * * @color * @section Base */ /** * Dark * * @color * @section Base */ /** * Dark Grey * * @color * @section Base */ /** * Grey * * @color * @section Base */ /** * Light Grey * * @color * @section Base */ /** * White * * @color * @section Base */ /** * Border * * @color * @section Border */.list-dot-separator li{display:inline-block}.list-dot-separator li:after{content:"";width:4px;height:4px;background:#303030;border-radius:50%;margin-left:7.5px;margin-right:7.5px;margin-bottom:3px;display:inline-block}.list-dot-separator li:last-child:after{display:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],select,textarea{display:block;padding:10px 15px 11px;border:1px solid transparent;border-bottom-color:#e9e9ea;line-height:1.2;background-color:#fffffe;color:#303030;font-weight:400}input[type=email]:placeholder,input[type=number]:placeholder,input[type=password]:placeholder,input[type=search]:placeholder,input[type=text]:placeholder,select:placeholder,textarea:placeholder{color:#61676f}input[type=email]:disabled,input[type=number]:disabled,input[type=password]:disabled,input[type=search]:disabled,input[type=text]:disabled,select:disabled,textarea:disabled{color:#a3a9ad;background-color:#e9e9ea}input[type=email].input-validation-error,input[type=email].invalid,input[type=email].ng-touched.ng-invalid,input[type=number].input-validation-error,input[type=number].invalid,input[type=number].ng-touched.ng-invalid,input[type=password].input-validation-error,input[type=password].invalid,input[type=password].ng-touched.ng-invalid,input[type=search].input-validation-error,input[type=search].invalid,input[type=search].ng-touched.ng-invalid,input[type=text].input-validation-error,input[type=text].invalid,input[type=text].ng-touched.ng-invalid,select.input-validation-error,select.invalid,select.ng-touched.ng-invalid,textarea.input-validation-error,textarea.invalid,textarea.ng-touched.ng-invalid{border-bottom-color:#cf0101}input[type=email].input-validation-error.no-validation,input[type=email].invalid.no-validation,input[type=email].ng-touched.ng-invalid.no-validation,input[type=number].input-validation-error.no-validation,input[type=number].invalid.no-validation,input[type=number].ng-touched.ng-invalid.no-validation,input[type=password].input-validation-error.no-validation,input[type=password].invalid.no-validation,input[type=password].ng-touched.ng-invalid.no-validation,input[type=search].input-validation-error.no-validation,input[type=search].invalid.no-validation,input[type=search].ng-touched.ng-invalid.no-validation,input[type=text].input-validation-error.no-validation,input[type=text].invalid.no-validation,input[type=text].ng-touched.ng-invalid.no-validation,select.input-validation-error.no-validation,select.invalid.no-validation,select.ng-touched.ng-invalid.no-validation,textarea.input-validation-error.no-validation,textarea.invalid.no-validation,textarea.ng-touched.ng-invalid.no-validation{border-bottom-color:#e9e9ea}input[type=email].ng-touched.ng-valid,input[type=email].valid,input[type=number].ng-touched.ng-valid,input[type=number].valid,input[type=password].ng-touched.ng-valid,input[type=password].valid,input[type=search].ng-touched.ng-valid,input[type=search].valid,input[type=text].ng-touched.ng-valid,input[type=text].valid,select.ng-touched.ng-valid,select.valid,textarea.ng-touched.ng-valid,textarea.valid{border-bottom-color:#2b9e85}input[type=email].ng-touched.ng-valid.no-validation,input[type=email].valid.no-validation,input[type=number].ng-touched.ng-valid.no-validation,input[type=number].valid.no-validation,input[type=password].ng-touched.ng-valid.no-validation,input[type=password].valid.no-validation,input[type=search].ng-touched.ng-valid.no-validation,input[type=search].valid.no-validation,input[type=text].ng-touched.ng-valid.no-validation,input[type=text].valid.no-validation,select.ng-touched.ng-valid.no-validation,select.valid.no-validation,textarea.ng-touched.ng-valid.no-validation,textarea.valid.no-validation{border-bottom-color:#e9e9ea}input[type=email].ng-touched:active,input[type=email].ng-touched:focus,input[type=email]:active,input[type=email]:focus,input[type=number].ng-touched:active,input[type=number].ng-touched:focus,input[type=number]:active,input[type=number]:focus,input[type=password].ng-touched:active,input[type=password].ng-touched:focus,input[type=password]:active,input[type=password]:focus,input[type=search].ng-touched:active,input[type=search].ng-touched:focus,input[type=search]:active,input[type=search]:focus,input[type=text].ng-touched:active,input[type=text].ng-touched:focus,input[type=text]:active,input[type=text]:focus,select.ng-touched:active,select.ng-touched:focus,select:active,select:focus,textarea.ng-touched:active,textarea.ng-touched:focus,textarea:active,textarea:focus{outline:none;border-color:#e9e9ea;border-bottom-color:#4056f4}input[type=email].ng-touched:active.no-validation,input[type=email].ng-touched:focus.no-validation,input[type=email]:active.no-validation,input[type=email]:focus.no-validation,input[type=number].ng-touched:active.no-validation,input[type=number].ng-touched:focus.no-validation,input[type=number]:active.no-validation,input[type=number]:focus.no-validation,input[type=password].ng-touched:active.no-validation,input[type=password].ng-touched:focus.no-validation,input[type=password]:active.no-validation,input[type=password]:focus.no-validation,input[type=search].ng-touched:active.no-validation,input[type=search].ng-touched:focus.no-validation,input[type=search]:active.no-validation,input[type=search]:focus.no-validation,input[type=text].ng-touched:active.no-validation,input[type=text].ng-touched:focus.no-validation,input[type=text]:active.no-validation,input[type=text]:focus.no-validation,select.ng-touched:active.no-validation,select.ng-touched:focus.no-validation,select:active.no-validation,select:focus.no-validation,textarea.ng-touched:active.no-validation,textarea.ng-touched:focus.no-validation,textarea:active.no-validation,textarea:focus.no-validation{border-bottom-color:#e9e9ea}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],select{width:100%;max-width:500px}input[type=email].fullwidth,input[type=number].fullwidth,input[type=password].fullwidth,input[type=search].fullwidth,input[type=text].fullwidth,select.fullwidth{max-width:none}input[type=checkbox]{margin-right:5px}textarea{width:100%;resize:none}select,textarea{border-color:#e9e9ea}.faux-label,label{line-height:1.33;font-weight:600;display:inline-block;width:100%;margin-bottom:20px;position:relative}.faux-label input,.faux-label textarea,label input,label textarea{margin-top:8px}.faux-label>*,label>*{font-weight:400}.field-validation-error,.form-error{display:block;margin-top:5px;color:#ce2d4f;font-weight:400}.main-container{max-width:1100px;margin:0 auto 45px;padding:0 20px}.main-container.main-container--spacing-top{margin-top:30px}@media (min-width:768px){.main-container.main-container--two-columns{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-container.main-container--two-columns>.hero{width:100%}.main-container.main-container--two-columns>.side{width:30%;padding-right:30px}.main-container.main-container--two-columns>.content{width:70%}}.fullscreen-wrapper{min-width:100%;min-height:100vh;overflow:auto;background-image:linear-gradient(313deg,#2a12b9,#4056f4);display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width:767px){.fullscreen-wrapper .fullscreen-wrapper__content--slim{width:100%;min-height:100vh}}@media (min-width:768px){.fullscreen-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fullscreen-wrapper .fullscreen-wrapper__content--slim{width:380px;margin:15px}} /* Author: Hello Human Client: Blackcap Education Lead dev: James Cooke Dev site: http://hellohuman.com.au What is dis: Headings, paragraphs, all those lovely types go in here */body{font-family:Source Sans Pro,sans-serif;line-height:1.4;color:#303030;background-color:#f3f3f3;-webkit-font-smoothing:antialiased;overflow-y:scroll}.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5{font-weight:600;line-height:1.4}.h1,h1{font-size:26px}.h2,h2{font-size:22px}.h3,h3{font-size:18px}.h4,h4{font-size:16px}.h5,h5{font-size:14px}b,dt,strong{font-weight:600}p{margin:0}a{text-decoration:none;color:#4056f4;cursor:pointer;-webkit-transition:color .6s cubic-bezier(.175,.885,.32,1.275);transition:color .6s cubic-bezier(.175,.885,.32,1.275)}a.underline,a:hover{text-decoration:underline}a.dark{color:#303030}a.dark:hover{text-decoration:none;color:#4056f4}a.grey{color:#767676}a.white{color:#fffffe}time{font-size:14px}.post-description{word-wrap:break-word}@-webkit-keyframes fade-in-delayed{0%{opacity:0}75%{opacity:0}to{opacity:1}}@keyframes fade-in-delayed{0%{opacity:0}75%{opacity:0}to{opacity:1}}@-webkit-keyframes rotate-button{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate-button{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}body .croppie-container .cr-viewport{border:none}.center{text-align:center}.popup-container{position:relative}.html-overlay{overflow:hidden}@-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}@keyframes shake{10%,90%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}20%,80%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}40%,60%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}}.animation-shake-once{-webkit-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.softskill-pill{color:#767676;background-color:#dbdbdb;font-size:14px;padding:3px 15px 5px;display:inline-block;border-radius:20px;margin-right:10px;margin-bottom:10px}.croppie-container{width:100%;height:100%}.croppie-container .cr-image{z-index:-1;position:absolute;top:0;left:0;-webkit-transform-origin:0 0;transform-origin:0 0;max-height:none;max-width:none}.croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1;width:100%;height:100%}.croppie-container .cr-resizer,.croppie-container .cr-viewport{position:absolute;border:2px solid #fff;margin:auto;top:0;bottom:0;right:0;left:0;-webkit-box-shadow:0 0 2000px 2000px rgba(0,0,0,.5);box-shadow:0 0 2000px 2000px rgba(0,0,0,.5);z-index:0}.croppie-container .cr-resizer{z-index:2;-webkit-box-shadow:none;box-shadow:none;pointer-events:none}.croppie-container .cr-resizer-horisontal,.croppie-container .cr-resizer-vertical{position:absolute;pointer-events:all}.croppie-container .cr-resizer-horisontal:after,.croppie-container .cr-resizer-vertical:after{display:block;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #000;background:#fff;width:10px;height:10px;content:""}.croppie-container .cr-resizer-vertical{bottom:-5px;cursor:row-resize;width:100%;height:10px}.croppie-container .cr-resizer-vertical:after{left:50%;margin-left:-5px}.croppie-container .cr-resizer-horisontal{right:-5px;cursor:col-resize;width:10px;height:100%}.croppie-container .cr-resizer-horisontal:after{top:50%;margin-top:-5px}.croppie-container .cr-original-image{display:none}.croppie-container .cr-vp-circle{border-radius:50%}.croppie-container .cr-overlay{z-index:1;position:absolute;cursor:move;-ms-touch-action:none;touch-action:none}.croppie-container .cr-slider-wrap{width:75%;margin:15px auto;text-align:center}.croppie-result{position:relative;overflow:hidden}.croppie-result img{position:absolute}.croppie-container .cr-image,.croppie-container .cr-overlay,.croppie-container .cr-viewport{-webkit-transform:translateZ(0);transform:translateZ(0)} /*************************************/ /***** STYLING RANGE INPUT ***********/ /*************************************/ /*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */ /*************************************/.cr-slider{-webkit-appearance:none; /*removes default webkit styles*/ /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */width:300px; /*required for proper track sizing in FF*/max-width:100%;padding-top:8px;padding-bottom:8px;background-color:transparent}.cr-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:rgba(0,0,0,.5);border:0;border-radius:3px}.cr-slider::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px}.cr-slider:focus{outline:none} /* .cr-slider:focus::-webkit-slider-runnable-track { background: #ccc; } */.cr-slider::-moz-range-track{width:100%;height:3px;background:rgba(0,0,0,.5);border:0;border-radius:3px}.cr-slider::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px} /*hide the outline behind the border*/.cr-slider:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.cr-slider::-ms-track{width:100%;height:5px;background:transparent; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */border-color:transparent;/*leave room for the larger thumb to overflow with a transparent border */border-width:6px 0;color:transparent/*remove default tick marks*/}.cr-slider::-ms-fill-lower,.cr-slider::-ms-fill-upper{background:rgba(0,0,0,.5);border-radius:10px}.cr-slider::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:1px}.cr-slider:focus::-ms-fill-lower,.cr-slider:focus::-ms-fill-upper{background:rgba(0,0,0,.5)} /*******************************************/ /***********************************/ /* Rotation Tools */ /***********************************/.cr-rotate-controls{position:absolute;bottom:5px;left:5px;z-index:1}.cr-rotate-controls button{border:0;background:none}.cr-rotate-controls i:before{display:inline-block;font-style:normal;font-weight:900;font-size:22px}.cr-rotate-l i:before{content:"\21BA"}.cr-rotate-r i:before{content:"\21BB"}