/*! normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html,body{margin:0;padding:0;font-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{background:white;color:#3f3844;font-family:"Lato", "Helvetica", Helvetica, sans-serif}main{display:block}ol,ul,li{list-style:none;margin:0;padding:0}input{outline:none;border-radius:3px;border:1px solid #c3c3c3;padding:12px}::-webkit-input-placeholder{color:#eaeaea;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}:focus::-webkit-input-placeholder{opacity:0.5}:-ms-input-placeholder{color:#eaeaea;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-ms-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}:focus:-ms-input-placeholder{opacity:0.5}:-moz-placeholder{color:#eaeaea;opacity:1;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}:focus:-moz-placeholder{opacity:0.5}::-moz-placeholder{color:#eaeaea;opacity:1;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}:focus::-moz-placeholder{opacity:0.5}a,img,ol,ul,button{-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.image{position:relative;height:0;overflow:hidden}.image.top img{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0)}.image.center img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.contain{position:relative;height:0}.contain img{position:absolute}.natural{width:100%;max-width:100%}.empty{background-color:#f7f7f7}.landscape img{min-width:100%;height:100%}.portrait img{width:100%;min-height:100%}.height img{max-width:100%;height:100%}.width img{width:100%;max-height:100%}.ratio-1x1{padding-bottom:100%}.ratio-3x4{padding-bottom:133.334%}.ratio-4x3{padding-bottom:75%}.ratio-16x3{padding-bottom:18.75%}.ratio-16x4{padding-bottom:25%}.ratio-16x5{padding-bottom:31.25%}.ratio-16x6{padding-bottom:37.5%}.ratio-16x7{padding-bottom:43.75%}.ratio-16x86{padding-bottom:54%}.ratio-16x9{padding-bottom:56.25%}.ratio-16x10{padding-bottom:62.5%}.show-xs,.hide-xs-only,.hide-sm,.hide-sm-only,.hide-md,.hide-md-only,.hide-lg,.hide-lg-only,.hide-xl{display:block}.hide-md-inline{display:inline-block}.hide-xs,.show-xs-only,.show-sm,.show-sm-inline,.show-sm-only,.show-sm-inline-only,.show-md,.show-md-inline,.show-md-only,.show-lg,.show-lg-inline,.show-lg-only,.show-xl,.show-xl-inline{display:none !important}.text-xs-right{text-align:right}.text-xs-left{text-align:left}.text-xs-center{text-align:center}.text-sm-right,.text-sm-left,.text-sm-center,.text-md-right,.text-md-left,.text-md-center,.text-lg-right,.text-lg-left,.text-lg-center,.text-xl-right,.text-xl-left,.text-xl-center{text-align:none}@media only screen and (max-width: 40em){.show-xs-only{display:block !important}.hide-xs-only{display:none !important}}@media only screen and (min-width: 40.063em){.show-sm{display:block !important}.show-sm-inline{display:inline-block !important}.hide-sm{display:none !important}.text-sm-right{text-align:right}.text-sm-left{text-align:left}.text-sm-center{text-align:center}}@media only screen and (min-width: 40.063em) and (max-width: 48em){.show-sm-only{display:block !important}.show-sm-inline-only{display:inline-block !important}.hide-sm-only{display:none !important}}@media only screen and (min-width: 48.063em){.show-md{display:block !important}.show-md-inline{display:inline-block !important}.hide-md{display:none !important}.hide-md-inline{display:none !important}.text-md-right{text-align:right}.text-md-left{text-align:left}.text-md-center{text-align:center}}@media only screen and (min-width: 48.063em) and (max-width: 64em){.show-md-only{display:block !important}.hide-md-only{display:none !important}}@media only screen and (min-width: 64.063em){.show-lg{display:block !important}.show-lg-inline{display:inline-block !important}.hide-lg{display:none !important}.text-lg-right{text-align:right}.text-lg-left{text-align:left}.text-lg-center{text-align:center}}@media only screen and (min-width: 64.063em) and (max-width: 90em){.show-lg-only{display:block !important}.hide-xl-only{display:none !important}}@media only screen and (min-width: 90.063em){.show-xl{display:block !important}.show-xl-inline{display:inline-block !important}.hide-xl{display:none !important}.text-xl-right{text-align:right}.text-xl-left{text-align:left}.text-xl-center{text-align:center}}h1,h2,h3,h4,h5,h6,p,figcaption{margin:0;padding:0;font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;line-height:1.618}h1{font-style:normal;font-weight:700;letter-spacing:0;line-height:1.2;font-size:3.4375rem}h2{font-style:normal;font-weight:700;letter-spacing:0;font-size:36px;font-size:2.25rem}h3{font-style:normal;font-weight:700;color:#3f3844;letter-spacing:0.0375em;font-size:22px;font-size:1.375rem}h4{font-style:normal;font-weight:700;color:#3f3844;text-transform:uppercase;letter-spacing:0.1em;font-size:14px;font-size:0.875rem}h5{font-style:normal;font-weight:700;color:#c3c3c3;text-transform:uppercase;letter-spacing:0.1em;font-size:14px;font-size:0.875rem}h6{font-style:normal;font-weight:400;color:#c3c3c3;letter-spacing:0.025em;font-size:14px;font-size:0.875rem}p{font-style:normal;font-weight:400;font-size:1.3125rem}p a{color:#b0b0b0;border-bottom:2px solid #c3c3c3}p a:hover{color:#3f3844;border-bottom:2px solid #3f3844}figcaption{font-style:normal;font-weight:700;color:#c3c3c3;text-transform:uppercase;letter-spacing:0.1em;font-size:14px;font-size:0.875rem}a{font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;text-decoration:none;cursor:pointer;color:inherit}code{font-family:"Courier", Courier, monospace;font-style:normal;font-weight:400;letter-spacing:0.0375em;line-height:1.4;font-size:14px;font-size:0.875rem}@media only screen and (max-width: 40em){h1{font-size:2.125rem}h2{font-size:1.6875rem}p{font-size:1.125rem;line-height:1.5}}.animate,.animate-250,.animate-500,.animate-750{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animate{-webkit-animation-duration:375ms;-moz-animation-duration:375ms;-o-animation-duration:375ms;animation-duration:375ms}.animate-250{-webkit-animation-duration:250ms;-moz-animation-duration:250ms;-o-animation-duration:250ms;animation-duration:250ms}.animate-500{-webkit-animation-duration:500ms;-moz-animation-duration:500ms;-o-animation-duration:500ms;animation-duration:500ms}.animate-750{-webkit-animation-duration:750ms;-moz-animation-duration:750ms;-o-animation-duration:750ms;animation-duration:750ms}.delay-125{-webkit-animation-delay:125ms;-moz-animation-delay:125ms;-o-animation-delay:125ms;animation-delay:125ms}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn;overflow:hidden}@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-100%)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes slideDown{0%{-moz-transform:translateY(-100%)}100%{-moz-transform:translateY(0)}}@-o-keyframes slideDown{0%{-o-transform:translateY(-100%)}100%{-o-transform:translateY(0)}}@keyframes slideDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.slideDown{-webkit-animation-name:slideDown;-moz-animation-name:slideDown;-o-animation-name:slideDown;animation-name:slideDown}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-100%)}}@-moz-keyframes slideUp{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(-100%)}}@-o-keyframes slideUp{0%{-o-transform:translateY(0)}100%{-o-transform:translateY(-100%)}}@keyframes slideUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.slideUp{-webkit-animation-name:slideUp;-moz-animation-name:slideUp;-o-animation-name:slideUp;animation-name:slideUp}.cl.color-gray{color:#c3c3c3}.bg.color-gray{background-color:#c3c3c3}.cl.color-red{color:#c70039}.bg.color-red{background-color:#c70039}.cl.color-orange{color:#ff5733}.bg.color-orange{background-color:#ff5733}.cl.color-yellow{color:#ffc300}.bg.color-yellow{background-color:#ffc300}.cl.color-chartreuse{color:#daf7a6}.bg.color-chartreuse{background-color:#daf7a6}.cl.color-green{color:#5ae5b8}.bg.color-green{background-color:#5ae5b8}.cl.color-blue{color:#00baad}.bg.color-blue{background-color:#00baad}.cl.color-purple{color:#581845}.bg.color-purple{background-color:#581845}.red .bg.color-1{background-color:#900c3f}.red .bg.color-2{background-color:#c70039}.red .bg.color-3{background-color:#ff5733}.orange .bg.color-1{background-color:#c70039}.orange .bg.color-2{background-color:#ff5733}.orange .bg.color-3{background-color:#ffc300}.yellow .bg.color-1{background-color:#ff5733}.yellow .bg.color-2{background-color:#ffc300}.yellow .bg.color-3{background-color:#daf7a6}.chartreuse .bg.color-1{background-color:#ffc300}.chartreuse .bg.color-2{background-color:#daf7a6}.chartreuse .bg.color-3{background-color:#5ae5b8}.green .bg.color-1{background-color:#daf7a6}.green .bg.color-2{background-color:#5ae5b8}.green .bg.color-3{background-color:#00baad}.blue .bg.color-1{background-color:#5ae5b8}.blue .bg.color-2{background-color:#00baad}.blue .bg.color-3{background-color:#581845}.animation{position:absolute;right:0;left:0}@media only screen and (min-width: 48.063em){.animation{margin-top:-5.5em !important}}.animation .letter{position:relative;width:240px;height:240px;margin:0 auto;float:left}.animation .donut{position:absolute;top:0;left:0;width:80px;height:80px;margin:80px;border-radius:50%;border-top:24px solid transparent;border-bottom:24px solid transparent;border-right:24px solid transparent;border-left:24px solid transparent;-webkit-animation-timing-function:cubic-bezier(0.64, 0.57, 0.67, 1.53);animation-timing-function:cubic-bezier(0.64, 0.57, 0.67, 1.53)}@-webkit-keyframes fadeLetter{0%{opacity:0}20%{opacity:0}21%{opacity:1}100%{opacity:1}}@-moz-keyframes fadeLetter{0%{opacity:0}20%{opacity:0}21%{opacity:1}100%{opacity:1}}@-o-keyframes fadeLetter{0%{opacity:0}20%{opacity:0}21%{opacity:1}100%{opacity:1}}@keyframes fadeLetter{0%{opacity:0}20%{opacity:0}21%{opacity:1}100%{opacity:1}}.animation .letter-c .box-1{position:absolute;width:120px;height:240px;bottom:0;right:0;background-color:#eeeeee;z-index:2}.animation .letter-c .deg180-1{border-top:24px solid #581845;border-right:24px solid #581845;z-index:1;opacity:1;filter:alpha(opacity=100);-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg);-webkit-animation:fadeLetter 1.25s, rotateC_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateC_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateC_in 1.5s;-o-animation:fadeLetter 1.25s, rotateC_in 1.5s;animation:fadeLetter 1.25s, rotateC_in 1.5s}@-webkit-keyframes rotateC_in{0%{-webkit-transform:rotate(45deg)}70%{-webkit-transform:rotate(225deg)}100%{-webkit-transform:rotate(225deg)}}@-moz-keyframes rotateC_in{0%{-moz-transform:rotate(45deg)}70%{-moz-transform:rotate(225deg)}100%{-moz-transform:rotate(225deg)}}@-o-keyframes rotateC_in{0%{-o-transform:rotate(45deg)}70%{-o-transform:rotate(225deg)}100%{-o-transform:rotate(225deg)}}@keyframes rotateC_in{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}70%{-webkit-transform:rotate(225deg);transform:rotate(225deg)}100%{-webkit-transform:rotate(225deg);transform:rotate(225deg)}}.animation .letter-o .box-1{position:absolute;width:120px;height:132px;bottom:0;right:0;background-color:#eeeeee;z-index:1;-webkit-animation:boxFade 0.75s;-moz-animation:boxFade 0.75s;-ms-animation:boxFade 0.75s;-o-animation:boxFade 0.75s;animation:boxFade 0.75s}@-webkit-keyframes boxFade{0%{z-index:3}49%{z-index:3}50%{z-index:1}100%{z-index:1}}@-moz-keyframes boxFade{0%{z-index:3}49%{z-index:3}50%{z-index:1}100%{z-index:1}}@-o-keyframes boxFade{0%{z-index:3}49%{z-index:3}50%{z-index:1}100%{z-index:1}}@keyframes boxFade{0%{z-index:3}49%{z-index:3}50%{z-index:1}100%{z-index:1}}.animation .letter-o .donut{z-index:2;opacity:1;filter:alpha(opacity=100)}.animation .letter-o .deg45-1{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:fadeLetter 1.25s, rotateOa_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateOa_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateOa_in 1.5s;-o-animation:fadeLetter 1.25s, rotateOa_in 1.5s;animation:fadeLetter 1.25s, rotateOa_in 1.5s}@-webkit-keyframes rotateOa_in{0%{-webkit-transform:rotate(-45deg)}30%{-webkit-transform:rotate(45deg)}100%{-webkit-transform:rotate(45deg)}}@-moz-keyframes rotateOa_in{0%{-moz-transform:rotate(-45deg);z-index:1}70%{-moz-transform:rotate(45deg);z-index:5}100%{-moz-transform:rotate(45deg);z-index:5}}@-o-keyframes rotateOa_in{0%{-o-transform:rotate(-45deg);z-index:1}70%{-o-transform:rotate(45deg);z-index:5}100%{-o-transform:rotate(45deg);z-index:5}}@keyframes rotateOa_in{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}30%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}.animation .letter-o .deg45-2{-webkit-transform:rotate(112.5deg);-moz-transform:rotate(112.5deg);-ms-transform:rotate(112.5deg);-o-transform:rotate(112.5deg);transform:rotate(112.5deg);-webkit-animation:fadeLetter 1.25s, rotateOb_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateOb_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateOb_in 1.5s;-o-animation:fadeLetter 1.25s, rotateOb_in 1.5s;animation:fadeLetter 1.25s, rotateOb_in 1.5s}@-webkit-keyframes rotateOb_in{0%{-webkit-transform:rotate(-45deg)}70%{-webkit-transform:rotate(112.5deg)}100%{-webkit-transform:rotate(112.5deg)}}@-moz-keyframes rotateOb_in{0%{-moz-transform:rotate(-45deg);z-index:1}70%{-moz-transform:rotate(112.5deg);z-index:5}100%{-moz-transform:rotate(112.5deg);z-index:5}}@-o-keyframes rotateOb_in{0%{-o-transform:rotate(-45deg);z-index:1}70%{-o-transform:rotate(112.5deg);z-index:5}100%{-o-transform:rotate(112.5deg);z-index:5}}@keyframes rotateOb_in{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}70%{-webkit-transform:rotate(112.5deg);transform:rotate(112.5deg)}100%{-webkit-transform:rotate(112.5deg);transform:rotate(112.5deg)}}.animation .letter-o .deg45-3{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation:fadeLetter 1.25s, rotateOc_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateOc_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateOc_in 1.5s;-o-animation:fadeLetter 1.25s, rotateOc_in 1.5s;animation:fadeLetter 1.25s, rotateOc_in 1.5s}@-webkit-keyframes rotateOc_in{0%{-webkit-transform:rotate(-45deg)}70%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(180deg)}}@-moz-keyframes rotateOc_in{0%{-moz-transform:rotate(-45deg)}70%{-moz-transform:rotate(180deg)}100%{-moz-transform:rotate(180deg)}}@-o-keyframes rotateOc_in{0%{-o-transform:rotate(-45deg)}70%{-o-transform:rotate(180deg)}100%{-o-transform:rotate(180deg)}}@keyframes rotateOc_in{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}70%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}.animation .letter-o .deg45-4{-webkit-transform:rotate(247.5deg);-moz-transform:rotate(247.5deg);-ms-transform:rotate(247.5deg);-o-transform:rotate(247.5deg);transform:rotate(247.5deg);-webkit-animation:fadeLetter 1.25s, rotateOd_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateOd_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateOd_in 1.5s;-o-animation:fadeLetter 1.25s, rotateOd_in 1.5s;animation:fadeLetter 1.25s, rotateOd_in 1.5s}@-webkit-keyframes rotateOd_in{0%{-webkit-transform:rotate(-45deg)}70%{-webkit-transform:rotate(247.5deg)}100%{-webkit-transform:rotate(247.5deg)}}@-moz-keyframes rotateOd_in{0%{-moz-transform:rotate(-45deg)}70%{-moz-transform:rotate(247.5deg)}100%{-moz-transform:rotate(247.5deg)}}@-o-keyframes rotateOd_in{0%{-o-transform:rotate(-45deg)}70%{-o-transform:rotate(247.5deg)}100%{-o-transform:rotate(247.5deg)}}@keyframes rotateOd_in{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}70%{-webkit-transform:rotate(247.5deg);transform:rotate(247.5deg)}100%{-webkit-transform:rotate(247.5deg);transform:rotate(247.5deg)}}.animation .letter-o .deg45-5{-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-ms-transform:rotate(320deg);-o-transform:rotate(320deg);transform:rotate(320deg);-webkit-animation:fadeLetter 1.25s, rotateOe_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateOe_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateOe_in 1.5s;-o-animation:fadeLetter 1.25s, rotateOe_in 1.5s;animation:fadeLetter 1.25s, rotateOe_in 1.5s}@-webkit-keyframes rotateOe_in{0%{-webkit-transform:rotate(-45deg)}70%{-webkit-transform:rotate(320deg)}100%{-webkit-transform:rotate(320deg)}}@-moz-keyframes rotateOe_in{0%{-moz-transform:rotate(-45deg)}70%{-moz-transform:rotate(320deg)}100%{-moz-transform:rotate(320deg)}}@-o-keyframes rotateOe_in{0%{-o-transform:rotate(-45deg)}70%{-o-transform:rotate(320deg)}100%{-o-transform:rotate(320deg)}}@keyframes rotateOe_in{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}70%{-webkit-transform:rotate(320deg);transform:rotate(320deg)}100%{-webkit-transform:rotate(320deg);transform:rotate(320deg)}}.animation .letter-o.magenta .deg45-1,.animation .letter-o.magenta .deg45-2,.animation .letter-o.magenta .deg45-3,.animation .letter-o.magenta .deg45-4,.animation .letter-o.magenta .deg45-5{border-bottom:24px solid #900c3f}.animation .letter-o.orange .deg45-1,.animation .letter-o.orange .deg45-2,.animation .letter-o.orange .deg45-3,.animation .letter-o.orange .deg45-4,.animation .letter-o.orange .deg45-5{border-bottom:24px solid #ff5733}.animation .letter-l .box-1{position:absolute;width:136px;height:120px;top:0;right:0;background-color:#eeeeee;z-index:2}.animation .letter-l .box-2{position:absolute;width:120px;height:120px;bottom:0;right:0;background-color:#eeeeee;z-index:2}.animation .letter-l .donut{z-index:1;opacity:1;filter:alpha(opacity=100)}.animation .letter-l .line{position:absolute;top:0;left:0;width:80px;height:41px;margin:80px;border-left:24px solid #c70039;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;filter:alpha(opacity=100);-webkit-animation:fadeLetter 1.25s, heightL_in 2.5s;-moz-animation:fadeLetter 1.25s, heightL_in 2.5s;-ms-animation:fadeLetter 1.25s, heightL_in 2.5s;-o-animation:fadeLetter 1.25s, heightL_in 2.5s;animation:fadeLetter 1.25s, heightL_in 2.5s}@-webkit-keyframes heightL_in{0%{height:0}20%{height:41px}100%{height:41px}}@-moz-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:41px}100%{top:0;height:41px}}@-o-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:41px}100%{top:0;height:41px}}@keyframes heightL_in{0%{height:0}20%{height:41px}100%{height:41px}}.animation .letter-l .deg45-1{border-top:24px solid #c70039;-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg);-webkit-animation:fadeLetter 1.25s, rotateLa_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateLa_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateLa_in 1.5s;-o-animation:fadeLetter 1.25s, rotateLa_in 1.5s;animation:fadeLetter 1.25s, rotateLa_in 1.5s}@-webkit-keyframes rotateLa_in{0%{-webkit-transform:rotate(90deg)}60%{-webkit-transform:rotate(-135deg)}100%{-webkit-transform:rotate(-135deg)}}@-moz-keyframes rotateLa_in{0%{-moz-transform:rotate(90deg)}60%{-moz-transform:rotate(-135deg)}100%{-moz-transform:rotate(-135deg)}}@-o-keyframes rotateLa_in{0%{-o-transform:rotate(90deg)}60%{-o-transform:rotate(-135deg)}100%{-o-transform:rotate(-135deg)}}@keyframes rotateLa_in{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}60%{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}100%{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}}.animation .letter-r .box-1{position:absolute;width:120px;height:120px;top:0;right:0;background-color:#eeeeee;z-index:2}.animation .letter-r .box-2{position:absolute;width:136px;height:120px;bottom:0;right:0;background-color:#eeeeee;z-index:2}.animation .letter-r .donut{z-index:1;opacity:1;filter:alpha(opacity=100)}.animation .letter-r .line{position:absolute;bottom:0;left:0;width:80px;height:41px;margin:80px;border-left:24px solid #ffc300;-webkit-animation-timing-function:ease-out-quad;animation-timing-function:ease-out-quad;opacity:1;filter:alpha(opacity=100);-webkit-animation:fadeLetter 1.25s, heightR_in 2.5s;-moz-animation:fadeLetter 1.25s, heightR_in 2.5s;-ms-animation:fadeLetter 1.25s, heightR_in 2.5s;-o-animation:fadeLetter 1.25s, heightR_in 2.5s;animation:fadeLetter 1.25s, heightR_in 2.5s}@-webkit-keyframes heightR_in{0%{height:0}20%{height:41px}100%{height:41px}}@-moz-keyframes heightR_in{0%{height:0}20%{height:41px}100%{height:41px}}@-o-keyframes heightR_in{0%{height:0}20%{height:41px}100%{height:41px}}@keyframes heightR_in{0%{height:0}20%{height:41px}100%{height:41px}}.animation .letter-r .deg45-1{border-right:24px solid #ffc300;-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg);-webkit-animation:fadeLetter 1.25s, rotateR_in 1.5s;-moz-animation:fadeLetter 1.25s, rotateR_in 1.5s;-ms-animation:fadeLetter 1.25s, rotateR_in 1.5s;-o-animation:fadeLetter 1.25s, rotateR_in 1.5s;animation:fadeLetter 1.25s, rotateR_in 1.5s}@-webkit-keyframes rotateR_in{0%{-webkit-transform:rotate(45deg)}60%{-webkit-transform:rotate(225deg)}100%{-webkit-transform:rotate(225deg)}}@-moz-keyframes rotateR_in{0%{-moz-transform:rotate(45deg)}60%{-moz-transform:rotate(225deg)}100%{-moz-transform:rotate(225deg)}}@-o-keyframes rotateR_in{0%{-o-transform:rotate(45deg)}60%{-o-transform:rotate(225deg)}100%{-o-transform:rotate(225deg)}}@keyframes rotateR_in{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}60%{-webkit-transform:rotate(225deg);transform:rotate(225deg)}100%{-webkit-transform:rotate(225deg);transform:rotate(225deg)}}@media only screen and (max-width: 40em){.animation{padding:0}.animation .letter{width:60px;height:60px;margin:calc(10% - 30px)}.animation .donut{width:30px;height:30px;margin:15px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:9px solid transparent;border-left:9px solid transparent}.animation .letter-c .box-1{width:30px;height:60px}.animation .letter-c .deg180-1{border-top:9px solid #581845;border-right:9px solid #581845}.animation .letter-o .box-1{width:30px;height:33px}.animation .letter-o.magenta .deg45-1,.animation .letter-o.magenta .deg45-2,.animation .letter-o.magenta .deg45-3,.animation .letter-o.magenta .deg45-4,.animation .letter-o.magenta .deg45-5{border-bottom:9px solid #900c3f}.animation .letter-o.orange .deg45-1,.animation .letter-o.orange .deg45-2,.animation .letter-o.orange .deg45-3,.animation .letter-o.orange .deg45-4,.animation .letter-o.orange .deg45-5{border-bottom:9px solid #ff5733}.animation .letter-l .box-1{width:36px;height:30px}.animation .letter-l .box-2{width:30px;height:30px}.animation .letter-l .line{width:20px;height:15px;margin:15px;border-left:9px solid #c70039}@-webkit-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:15px}100%{top:0;height:15px}}@-moz-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:15px}100%{top:0;height:15px}}@-o-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:15px}100%{top:0;height:15px}}@keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:15px}100%{top:0;height:15px}}.animation .letter-l .deg45-1{border-top:9px solid #c70039}.animation .letter-r .box-1{width:30px;height:30px}.animation .letter-r .box-2{width:36px;height:30px}.animation .letter-r .line{width:20px;height:15px;margin:15px;border-left:9px solid #ffc300}@-webkit-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:15px}100%{bottom:0;height:15px}}@-moz-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:15px}100%{bottom:0;height:15px}}@-o-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:15px}100%{bottom:0;height:15px}}@keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:15px}100%{bottom:0;height:15px}}.animation .letter-r .deg45-1{border-right:9px solid #ffc300}}@media only screen and (min-width: 40.063em) and (max-width: 48em){.animation{padding:1.5em 0}.animation .letter{width:120px;height:120px;margin:calc(10% - 60px)}.animation .donut{width:40px;height:40px;margin:40px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:12px solid transparent;border-left:12px solid transparent}.animation .letter-c .box-1{width:60px;height:120px}.animation .letter-c .deg180-1{border-top:12px solid #581845;border-right:12px solid #581845}.animation .letter-o .box-1{width:60px;height:65px}.animation .letter-o.magenta .deg45-1,.animation .letter-o.magenta .deg45-2,.animation .letter-o.magenta .deg45-3,.animation .letter-o.magenta .deg45-4,.animation .letter-o.magenta .deg45-5{border-bottom:12px solid #900c3f}.animation .letter-o.orange .deg45-1,.animation .letter-o.orange .deg45-2,.animation .letter-o.orange .deg45-3,.animation .letter-o.orange .deg45-4,.animation .letter-o.orange .deg45-5{border-bottom:12px solid #ff5733}.animation .letter-l .box-1{width:68px;height:60px}.animation .letter-l .box-2{width:60px;height:60px}.animation .letter-l .line{width:40px;height:21px;margin:40px;border-left:12px solid #c70039}@-webkit-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}@-moz-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}@-o-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}@keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}.animation .letter-l .deg45-1{border-top:12px solid #c70039}.animation .letter-r .box-1{width:60px;height:60px}.animation .letter-r .box-2{width:68px;height:60px}.animation .letter-r .line{width:40px;height:21px;margin:40px;border-left:12px solid #ffc300}@-webkit-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}@-moz-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}@-o-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}@keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}.animation .letter-r .deg45-1{border-right:12px solid #ffc300}}@media only screen and (min-width: 48.063em) and (max-width: 64em){.animation .letter{width:140px;height:140px;margin:calc(10% - 70px)}.animation .donut{width:40px;height:40px;margin:50px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:12px solid transparent;border-left:12px solid transparent}.animation .letter-c .box-1{width:70px;height:140px}.animation .letter-c .deg180-1{border-top:12px solid #581845;border-right:12px solid #581845}.animation .letter-o .box-1{width:70px;height:75px}.animation .letter-o.magenta .deg45-1,.animation .letter-o.magenta .deg45-2,.animation .letter-o.magenta .deg45-3,.animation .letter-o.magenta .deg45-4,.animation .letter-o.magenta .deg45-5{border-bottom:12px solid #900c3f}.animation .letter-o.orange .deg45-1,.animation .letter-o.orange .deg45-2,.animation .letter-o.orange .deg45-3,.animation .letter-o.orange .deg45-4,.animation .letter-o.orange .deg45-5{border-bottom:12px solid #ff5733}.animation .letter-l .box-1{width:78px;height:70px}.animation .letter-l .box-2{width:70px;height:70px}.animation .letter-l .line{width:40px;height:21px;margin:50px;border-left:12px solid #c70039}@-webkit-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}@-moz-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}@-o-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}@keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:21px}100%{top:0;height:21px}}.animation .letter-l .deg45-1{border-top:12px solid #c70039}.animation .letter-r .box-1{width:70px;height:70px}.animation .letter-r .box-2{width:78px;height:70px}.animation .letter-r .line{width:40px;height:21px;margin:50px;border-left:12px solid #ffc300}@-webkit-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}@-moz-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}@-o-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}@keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:21px}100%{bottom:0;height:21px}}.animation .letter-r .deg45-1{border-right:12px solid #ffc300}}@media only screen and (min-width: 64.063em) and (max-width: 75em){.animation .letter{width:200px;height:200px;margin:calc(10% - 100px)}.animation .donut{width:60px;height:60px;margin:70px;border-top:18px solid transparent;border-bottom:18px solid transparent;border-right:18px solid transparent;border-left:18px solid transparent}.animation .letter-c .box-1{width:100px;height:200px}.animation .letter-c .deg180-1{border-top:18px solid #581845;border-right:18px solid #581845}.animation .letter-o .box-1{width:100px;height:110px}.animation .letter-o.magenta .deg45-1,.animation .letter-o.magenta .deg45-2,.animation .letter-o.magenta .deg45-3,.animation .letter-o.magenta .deg45-4,.animation .letter-o.magenta .deg45-5{border-bottom:18px solid #900c3f}.animation .letter-o.orange .deg45-1,.animation .letter-o.orange .deg45-2,.animation .letter-o.orange .deg45-3,.animation .letter-o.orange .deg45-4,.animation .letter-o.orange .deg45-5{border-bottom:18px solid #ff5733}.animation .letter-l .box-1{width:112px;height:100px}.animation .letter-l .box-2{width:100px;height:100px}.animation .letter-l .line{width:60px;height:31px;margin:70px;border-left:18px solid #c70039}@-webkit-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:31px}100%{top:0;height:31px}}@-moz-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:31px}100%{top:0;height:31px}}@-o-keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:31px}100%{top:0;height:31px}}@keyframes heightL_in{0%{top:0;height:0}20%{top:0;height:31px}100%{top:0;height:31px}}.animation .letter-l .deg45-1{border-top:18px solid #c70039}.animation .letter-r .box-1{width:100px;height:100px}.animation .letter-r .box-2{width:112px;height:100px}.animation .letter-r .line{width:60px;height:31px;margin:70px;border-left:18px solid #ffc300}@-webkit-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:31px}100%{bottom:0;height:31px}}@-moz-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:31px}100%{bottom:0;height:31px}}@-o-keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:31px}100%{bottom:0;height:31px}}@keyframes heightR_in{0%{bottom:0;height:0}20%{bottom:0;height:31px}100%{bottom:0;height:31px}}.animation .letter-r .deg45-1{border-right:18px solid #ffc300}}@media only screen and (max-width: 20em){#nav ul li{padding:0.25em 2.25em 0}#nav ul li.social{padding-top:1.5em;padding-bottom:0.375em}#nav ul li.social a{margin-right:1em}#nav ul li.color-border{margin-top:0.375em}}@media only screen and (min-width: 20.063em) and (max-width: 48em){#nav ul li{padding:0.75em 2.25em 0}#nav ul li.social{padding-top:2.25em;padding-bottom:0.75em}#nav ul li.social a{margin-right:1.0em}#nav ul li.color-border{margin-top:0.75em}}@media only screen and (max-width: 48em){html,body{overflow-x:hidden}#nav{position:fixed;width:256px;height:100%;top:0;bottom:0;right:0;margin:0;background-color:#f7f7f7;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow-x:auto;z-index:5}#nav ul{-webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out}#nav ul li.languages{cursor:pointer;padding-top:1em}#nav ul li.languages ul{position:relative;max-height:0;margin:0 0 0 -0.75em;padding:0.75em;overflow:hidden;background-color:#f7f7f7;z-index:1;opacity:0;filter:alpha(opacity=0)}#nav ul li.languages.open ul{max-height:36em;opacity:1;filter:alpha(opacity=100)}#nav ul li.languages ul li{padding:1em 0 0}#nav ul li h3,#nav ul li h4,#nav ul li img,#nav ul li span{display:inline-block;vertical-align:middle}#nav ul li h3 span{margin-top:8px;margin-right:0.75em}#nav ul li.color-codes span{margin-right:1.25em}#nav ul li.color-codes span #htmlcolorcodes{width:27px;height:27px}#nav ul li.color-tutorials h3 span{margin-right:0.55em}#nav ul li.color-border span{display:block;float:left;width:46px;height:1px}#nav ul li.color-border .purple{background-color:#581845;border-top-left-radius:3px;border-bottom-left-radius:3px}#nav ul li.color-border .magenta{background-color:#900c3f}#nav ul li.color-border .red{background-color:#c70039}#nav ul li.color-border .orange{background-color:#ff5733}#nav ul li.credits h3,#nav ul li.credits a{margin-left:0;margin-right:0}#nav ul li.social{width:100%;bottom:0;text-align:left;padding-left:2.25em}#mobile{position:fixed;width:100%;top:0;padding:1em 0;background-color:#f7f7f7;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:4}#mobile div{position:relative;width:100%;padding:0 1.5em}#mobile h4{padding-top:2px}#mobile ol li{float:left}#mobile ol li h4{display:inline-block}#mobile ol li a span{display:inline-block;vertical-align:top;color:#3f3844;line-height:18px;margin:0 0.375em 0 0.5em;font-weight:700;font-size:24px;font-size:1.5rem}#mobile a.mobile-logo{float:left;margin-right:1.5em}.nav-right{-webkit-transform:translate3d(256px, 0, 0);-moz-transform:translate3d(256px, 0, 0);-ms-transform:translate3d(256px, 0, 0);-o-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0)}.nav-open{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.nav-inactive{-webkit-transform:translate3d(-256px, 0, 0);-moz-transform:translate3d(-256px, 0, 0);-ms-transform:translate3d(-256px, 0, 0);-o-transform:translate3d(-256px, 0, 0);transform:translate3d(-256px, 0, 0)}#nav,#mobile,#header,#main,#footer{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);-moz-transition:-moz-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);-o-transition:-o-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);transition:-webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);transition:transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);transition:transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99)}}@media only screen and (min-width: 48.063em) and (max-width: 64em){#nav ul.row{padding-right:2.5em}}@media only screen and (min-width: 48.063em){#nav{position:absolute;top:0;left:0;right:0;display:block;z-index:4;color:#3f3844;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#f7f7f7;-webkit-animation:navSlide 1s;-moz-animation:navSlide 1s;-ms-animation:navSlide 1s;-o-animation:navSlide 1s;animation:navSlide 1s}#nav ul{width:100%;max-width:75em;margin:0 auto}#nav ul:before,#nav ul:after{content:" ";display:table}#nav ul:after{clear:both}#nav ul li{position:relative;padding:1.0em;float:left;margin-right:0.5em}#nav ul li.color-codes,#nav ul li.color-shop{margin-right:0}#nav ul li.credit{margin-right:-1.5em;float:right}#nav ul li h3{line-height:1.8;font-size:18px;font-size:1.125rem}#nav ul li .nav-desktop__list-item--new:after{content:'NEW!';color:#ff5733;font-size:12px;font-size:0.75rem;display:inline-block;vertical-align:top}#nav ul li.color-codes{width:8%;padding:1.0em 1em}#nav ul li.color-shop a{color:#900c3f}#nav ul li.social .gray .button-svg .fill{fill:#888888}#nav ul li.social .gray:hover .button-svg:hover .fill{fill:#3f3844}#nav ul li.social .button-svg{width:18px;height:18px;margin-top:0.375em;margin-left:0.75em}#nav ul li a{display:inline-block}#nav ul li a:hover{color:#c3c3c3}#nav ul li a:hover:after{width:100%;background-color:#eaeaea}#nav ul li a.active{color:#c3c3c3}#nav ul li a.active:after{width:100%;background-color:#eaeaea}#nav ul li.social.header{width:calc((92% / 6) * 3);text-align:right;padding:.5em 4%}#nav ul li.dixonandmoe{margin:0 8%;margin-left:0;margin-right:0;padding-top:.75em;padding-bottom:.75em;padding-right:0;width:calc((92% / 6) * 3)}section.subnav{border-top:1px solid #eeeeee}}@media only screen and (min-width: 64.063em){#nav ul li{margin-right:1.5em}#nav ul li.color-codes,#nav ul li.color-shop{margin-right:0}#nav ul li.credit{margin-right:0.5em}}@media only screen and (min-width: 75em){#nav ul li{margin-right:3.375em}#nav ul li.color-codes,#nav ul li.color-shop{margin-right:0}}.nav-button{position:absolute;display:block;top:0em;right:0;width:3em;height:3em;-webkit-transform:translate3d(0, 0, 0);z-index:4}.nav-button span{position:relative;display:block;width:1.25em;height:2px;margin-bottom:5px;border-radius:0.1875em;background-color:#3f3844;z-index:4}#overlay{display:none;position:fixed}.nav-active{overflow:hidden;height:100%}.nav-active #overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;background-color:rgba(63,56,68,0.875);-webkit-animation:fadeIn 0.375s;-moz-animation:fadeIn 0.375s;-ms-animation:fadeIn 0.375s;-o-animation:fadeIn 0.375s;animation:fadeIn 0.375s}@-webkit-keyframes navSlide{0%{-webkit-transform:translate3d(0, -100%, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes navSlide{0%{-moz-transform:translate3d(0, -100%, 0)}100%{-moz-transform:translate3d(0, 0, 0)}}@-o-keyframes navSlide{0%{-o-transform:translate3d(0, -100%, 0)}100%{-o-transform:translate3d(0, 0, 0)}}@keyframes navSlide{0%{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}#header{position:relative;width:100%;background-color:#eeeeee;-webkit-animation:headerColor 1s;-moz-animation:headerColor 1s;-ms-animation:headerColor 1s;-o-animation:headerColor 1s;animation:headerColor 1s}#header h1{margin-bottom:0.75em;font-size:0.875rem;font-style:normal;font-weight:700;color:#c3c3c3;text-transform:uppercase;letter-spacing:0.1em}#header p{font-size:2.125rem;font-weight:700}@-webkit-keyframes headerColor{0%{background-color:#f7f7f7}100%{background-color:#eeeeee}}@-moz-keyframes headerColor{0%{background-color:#f7f7f7}100%{background-color:#eeeeee}}@-o-keyframes headerColor{0%{background-color:#f7f7f7}100%{background-color:#eeeeee}}@keyframes headerColor{0%{background-color:#f7f7f7}100%{background-color:#eeeeee}}#header .header-group{padding:7em 0 5em;-webkit-animation:headerSlide 0.75s, headerFade 1s;-moz-animation:headerSlide 0.75s, headerFade 1s;-ms-animation:headerSlide 0.75s, headerFade 1s;-o-animation:headerSlide 0.75s, headerFade 1s;animation:headerSlide 0.75s, headerFade 1s}#header .header-group .header-content{position:relative;width:84%;margin:0 0 0 8%;padding:0 1.5em;float:left}#header .header-group .header-content aside{position:relative;width:348px;padding:0 1.5em;float:left}#header .header-group .header-group__social{position:relative;float:left;width:8%;padding-left:1.5em}#header .header-group .header-group__social a{display:block;margin-bottom:0.75em}#header .header-group .header-group__content{position:relative;width:100%;min-height:180px;padding:0 1.5em;float:left}@media only screen and (min-width: 48.063em){#header .header-group .header-group__content{width:calc(92% - 348px);padding:0 1.5em}}#header .header-group .header-group__content-description{line-height:1.25;font-size:2.125rem;letter-spacing:0}#header .header-group .header-group__aside{position:relative;overflow:hidden;padding:0 1.5em;width:348px;height:250px;max-height:250px;float:left;z-index:10}#header .home-group{position:relative;padding:0.75em 0 6em;-webkit-animation:headerSlide 0.75s, headerFade 1s;-moz-animation:headerSlide 0.75s, headerFade 1s;-ms-animation:headerSlide 0.75s, headerFade 1s;-o-animation:headerSlide 0.75s, headerFade 1s;animation:headerSlide 0.75s, headerFade 1s}@media only screen and (min-width: 48.063em){#header .home-group{padding:0.5em 0 3em}}#header .home-group .home-group__social{position:relative;float:left;width:8%;padding-left:1.5em}#header .home-group .home-group__social a{display:block;margin-bottom:0.75em}#header .home-group .home-group__content{position:relative;width:100%;min-height:180px;padding:0 1.5em;float:left}@media only screen and (min-width: 48.063em){#header .home-group .home-group__content{width:calc(92% - 348px);padding:0 1.5em}}#header .home-group .home-group__content-description{font-size:2.125rem;line-height:1.25;letter-spacing:0}#header .home-group .home-group__aside{position:relative;overflow:hidden;padding:0 1.5em;width:348px;height:250px;max-height:250px;float:left;z-index:10}#header .home-group .home-group__aside-advert{width:100%;height:250px;background:#c3c3c3}#header figure{-webkit-animation:headerSlide 0.75s, headerFade 1s;-moz-animation:headerSlide 0.75s, headerFade 1s;-ms-animation:headerSlide 0.75s, headerFade 1s;-o-animation:headerSlide 0.75s, headerFade 1s;animation:headerSlide 0.75s, headerFade 1s}@-webkit-keyframes headerSlide{0%{-webkit-transform:translateY(1200px)}20%{-webkit-transform:translateY(80px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes headerSlide{0%{-moz-transform:translateY(1200px)}20%{-moz-transform:translateY(80px)}100%{-moz-transform:translateY(0)}}@-o-keyframes headerSlide{0%{-o-transform:translateY(1200px)}20%{-o-transform:translateY(80px)}100%{-o-transform:translateY(0)}}@keyframes headerSlide{0%{-webkit-transform:translateY(1200px);transform:translateY(1200px)}20%{-webkit-transform:translateY(80px);transform:translateY(80px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes headerFade{0%{opacity:0}20%{opacity:0}100%{opacity:1}}@-moz-keyframes headerFade{0%{opacity:0}20%{opacity:0}100%{opacity:1}}@-o-keyframes headerFade{0%{opacity:0}20%{opacity:0}100%{opacity:1}}@keyframes headerFade{0%{opacity:0}20%{opacity:0}100%{opacity:1}}#header .button-list{z-index:3}@media only screen and (max-width: 40em){#header p{font-size:22px;font-size:1.375rem}}@media only screen and (max-width: 48em){#header{padding:5em 0 0 0}#header h1{color:var(--color-black);margin-bottom:0.75rem;font-size:2.625rem;line-height:1.125;text-transform:none;letter-spacing:0}#header .header-group{padding:1.5em 0 2em}#header .header-group .header-group__content{padding:0 1em}#header .header-group .header-content{width:100%;margin:0}#header .header-group .header-content aside{display:none}#header .header-group .header-group__content-description{color:var(--color-gray--dark);font-size:1.3125rem}#header .home-group .home-content{position:relative;width:100%;margin:0}}@media only screen and (min-width: 48.063em) and (max-width: 64em){#header .header-group .header-content{width:92%}#header .header-group .header-content aside{width:208px}}#main{position:relative;margin-top:-2.25em;margin-bottom:2.25em;padding:0 0 3em;border-radius:3px;background-color:white;-webkit-animation:mainSlide 1s, mainFade 1s;-moz-animation:mainSlide 1s, mainFade 1s;-ms-animation:mainSlide 1s, mainFade 1s;-o-animation:mainSlide 1s, mainFade 1s;animation:mainSlide 1s, mainFade 1s}@-webkit-keyframes mainSlide{0%{-webkit-transform:translate3d(0, 1200px, 0)}20%{-webkit-transform:translate3d(0, 120px, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes mainSlide{0%{-moz-transform:translate3d(0, 1200px, 0)}20%{-moz-transform:translate3d(0, 120px, 0)}100%{-moz-transform:translate3d(0, 0, 0)}}@-o-keyframes mainSlide{0%{-o-transform:translate3d(0, 1200px, 0)}20%{-o-transform:translate3d(0, 120px, 0)}100%{-o-transform:translate3d(0, 0, 0)}}@keyframes mainSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}20%{-webkit-transform:translate3d(0, 120px, 0);transform:translate3d(0, 120px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes mainFade{0%{opacity:0}40%{opacity:0}100%{opacity:1}}@-moz-keyframes mainFade{0%{opacity:0}40%{opacity:0}100%{opacity:1}}@-o-keyframes mainFade{0%{opacity:0}40%{opacity:0}100%{opacity:1}}@keyframes mainFade{0%{opacity:0}40%{opacity:0}100%{opacity:1}}#main>aside.social{position:absolute;pointer-events:none;top:140px;width:8%;margin:0.25em 0 0;padding:0 1.5em;z-index:1;opacity:0;filter:alpha(opacity=0);-webkit-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0.375s cubic-bezier(0.4, 0, 0.2, 1)}#main>aside.social a{display:block;margin-top:0.75em}#main>aside.social a .button-svg{width:27px}#main>aside.social.fixed{position:fixed;pointer-events:auto;top:86px;opacity:1;filter:alpha(opacity=100)}#main>article{position:relative;width:calc(92% - 348px);margin:0 0 0 8%;padding:3em 1em 0;float:left}#main>article header,#main>article section,#main>article footer{margin-bottom:4.5em}#main>article footer{border-top:1px solid #eaeaea;padding-top:3em}#main>article header p,#main>article section p{margin-top:0.375em}#main>article pre{margin:1.5em -1.5em;padding:1em 1.5em 1.25em;border-radius:3px;border:1px solid #eaeaea}#main>article.fixed{padding:7.875em 1.5em 0}#main>article.tutorials section p{margin-bottom:1.5em}#main>article.tutorial section p,#main>article.resource section p{margin-top:0.75em;margin-bottom:1.5em}#main>article.home{position:relative;width:100%;margin:0;padding:3em 0;float:left;background-color:white}#main>article.home .row{float:left}#main>article.home.color-picker{padding-top:3em}#main>article.home.color-charts,#main>article.home.color-names,#main>article.home.color-tutorials,#main>article.home.color-resources,#main>article.home.color-html{border-top:1px solid #eaeaea}#main>article.home header,#main>article.home section,#main>article.home figure{width:calc(92% - 348px);margin:0 0 0 8%;padding:0 1.5em}#main>article.home footer{width:calc(92% - 396px);margin-left:calc(8% + 1.5em);margin-right:1.5em;margin-top:0;margin-bottom:0;padding:3em 0 4.5em}#main>article.home section,#main>article.home figure{margin-bottom:3em}#main>article.home>div{margin:3em 0;border-bottom:1px solid #eaeaea}#main>article.home h2{display:inline-block}#main>article.home h2 a:after{content:'';display:block;height:3px;width:0;border-radius:2px;background:#eaeaea;-webkit-transition:width 0.375s ease-in;-moz-transition:width 0.375s ease-in;-o-transition:width 0.375s ease-in;transition:width 0.375s ease-in}#main>article.home h2 a:hover:after{width:100%;background:#eaeaea}#main>article.home.fixed{padding:7.875em 0 3em}#main>article.color-picker h2,#main>article.color-charts h2,#main>article#home_color_names h2{padding-top:1.5em}#main>article#home_color_library h2{padding-top:1.875rem}#main>article#home_color_library .color-library__swatches{margin:0 -0.75em}#main>article.color-html header{margin-bottom:3em}#main>article.color-html section>div{margin:1.5em 0 3em}#main>article.color-html section>div div:not(.color-table__color){float:left;padding:1.5em;text-align:center}#main>article.color-html section>div div:nth-child(1){border-top-left-radius:3px;border-bottom-left-radius:3px}#main>article.color-html section>div div:nth-last-child(1){border-top-right-radius:3px;border-bottom-right-radius:3px}#main>article.color-html section>div div.full{width:100%}#main>article.color-html section>div div.half{width:50%}#main>article.color-html section>div div.third{width:calc(100% / 3)}#main>article.color-html section>div div h3{font-size:36px;font-size:2.25rem}#main>article.color-html section>div div h3 span:nth-child(1){margin:0 0.1875em;color:#FF0000;border-bottom:3px solid #FF0000}#main>article.color-html section>div div h3 span:nth-child(2){margin:0 0.1875em;color:#00FF00;border-bottom:3px solid #00FF00}#main>article.color-html section>div div h3 span:nth-child(3){margin:0 0.1875em;color:#0000FF;border-bottom:3px solid #0000FF}#main>article aside.sidebar,#main>aside.sidebar{position:relative;width:348px;padding:3em 1.5em 0;float:left}#main>article aside.sidebar div.color-export.fixed,#main>aside.sidebar div.color-export.fixed{position:fixed;top:6.25em}#main>article aside.sidebar div.color-codes,#main>aside.sidebar div.color-codes{margin-top:1.5em;margin-bottom:1em;border-radius:3px;border:1px solid #eaeaea}#main>article aside.sidebar pre,#main>aside.sidebar pre{margin:0;padding:1em;color:#c3c3c3;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}#main>article aside.sidebar pre span,#main>aside.sidebar pre span{display:block}#main>article aside.sidebar ul.help-list,#main>aside.sidebar ul.help-list{display:flex;align-items:center}#main>article aside.sidebar li.help-item,#main>aside.sidebar li.help-item{display:flex;align-items:center;font-size:0.75rem;color:#888888;margin-top:0.375em;margin-bottom:2.25em;margin-right:1.5em}#main>article aside.sidebar li.help-item:last-child,#main>aside.sidebar li.help-item:last-child{margin-right:0}#main>article aside.sidebar li.help-item span,#main>aside.sidebar li.help-item span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:16px;border:1px solid #eeeeee;margin-right:4px}#main>article aside.sidebar li.help-item img,#main>aside.sidebar li.help-item img{display:inline-block;vertical-align:bottom;margin-bottom:1px}#main>article aside.sidebar h6,#main>aside.sidebar h6{margin-bottom:2em}#main>article aside.sidebar .arrow-icon .button-svg,#main>aside.sidebar .arrow-icon .button-svg{display:inline-block;vertical-align:middle}#main>article aside.sidebar .export-icon .button-svg,#main>aside.sidebar .export-icon .button-svg{width:18px;height:18px;display:inline-block;vertical-align:middle}#main>article aside.sidebar .gray:hover .button-svg .fill,#main>aside.sidebar .gray:hover .button-svg .fill{fill:#c3c3c3}#main>article.home aside.sidebar{padding:0 1.5em 0}#main>aside.sidebar.fixed{padding:7.875em 1.5em 0}@-webkit-keyframes itemFade{0%{opacity:0}70%{opacity:0}100%{opacity:1}}@keyframes itemFade{0%{opacity:0}70%{opacity:0}100%{opacity:1}}@-webkit-keyframes itemASlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}5%{-webkit-transform:translate3d(0, 120px, 0);transform:translate3d(0, 120px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes itemASlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}5%{-webkit-transform:translate3d(0, 120px, 0);transform:translate3d(0, 120px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes itemBSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}10%{-webkit-transform:translate3d(0, 180px, 0);transform:translate3d(0, 180px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes itemBSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}10%{-webkit-transform:translate3d(0, 180px, 0);transform:translate3d(0, 180px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes itemCSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}15%{-webkit-transform:translate3d(0, 240px, 0);transform:translate3d(0, 240px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes itemCSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}15%{-webkit-transform:translate3d(0, 240px, 0);transform:translate3d(0, 240px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes itemDSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}20%{-webkit-transform:translate3d(0, 300px, 0);transform:translate3d(0, 300px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes itemDSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}20%{-webkit-transform:translate3d(0, 300px, 0);transform:translate3d(0, 300px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes itemESlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}25%{-webkit-transform:translate3d(0, 360px, 0);transform:translate3d(0, 360px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes itemESlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}25%{-webkit-transform:translate3d(0, 360px, 0);transform:translate3d(0, 360px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes itemFSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}25%{-webkit-transform:translate3d(0, 420px, 0);transform:translate3d(0, 420px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes itemFSlide{0%{-webkit-transform:translate3d(0, 1200px, 0);transform:translate3d(0, 1200px, 0)}25%{-webkit-transform:translate3d(0, 420px, 0);transform:translate3d(0, 420px, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media only screen and (max-width: 40em){#main>article header,#main>article section{margin-bottom:3em}#main>article pre{margin:1.5em 0;padding:0.5em 0.75em 0.5em}#main>article.home{position:relative;width:100%;margin:0;padding:0 1.5em;float:left;background-color:#eeeeee}#main>article.home section{width:100%;margin:0 0 1.5em;padding:1em 1.5em 1.5em;border-radius:3px;background-color:white}#main>article.home h2{display:block}#main>article.home h2 span{float:right}#main>article.home h2 span svg{fill:var(--color-gray)}#main>article.home div{margin:0.75em 0 0.75em;border-bottom:1px solid #eaeaea}#main>article.home a.color-picker section{border-top:9px solid #581845;-webkit-animation:itemASlide 1s;-moz-animation:itemASlide 1s;-ms-animation:itemASlide 1s;-o-animation:itemASlide 1s;animation:itemASlide 1s}#main>article.home a.color-charts section{border-top:9px solid #900c3f;-webkit-animation:itemBSlide 1s;-moz-animation:itemBSlide 1s;-ms-animation:itemBSlide 1s;-o-animation:itemBSlide 1s;animation:itemBSlide 1s}#main>article.home a.color-names section{border-top:9px solid #c70039;-webkit-animation:itemCSlide 1s;-moz-animation:itemCSlide 1s;-ms-animation:itemCSlide 1s;-o-animation:itemCSlide 1s;animation:itemCSlide 1s}#main>article.home a.color-library section{border-top:9px solid #ff5733;-webkit-animation:itemDSlide 1s;-moz-animation:itemDSlide 1s;-ms-animation:itemDSlide 1s;-o-animation:itemDSlide 1s;animation:itemDSlide 1s}#main>article.home a.color-tutorials section{border-top:9px solid #ffc300;-webkit-animation:itemESlide 1s;-moz-animation:itemESlide 1s;-ms-animation:itemESlide 1s;-o-animation:itemESlide 1s;animation:itemESlide 1s}#main>article.home a.color-resources section{border-top:9px solid #daf7a6;-webkit-animation:itemFSlide 1s;-moz-animation:itemFSlide 1s;-ms-animation:itemFSlide 1s;-o-animation:itemFSlide 1s;animation:itemFSlide 1s}#main>article.color-names,#main>article.fixed.color-names{padding-bottom:3em}#main>article.resource,#main>article.tutorial{padding:1.5em 1em 0}}@media only screen and (min-width: 40.063em) and (max-width: 48em){#main>article pre{margin:1.5em 0}#main>article.home header,#main>article.home section,#main>article.home figure{width:100%;margin:0}#main>article.home section,#main>article.home figure{margin-bottom:3em}#main>article.color-html header{margin-bottom:3em}#main>article.color-names,#main>article.fixed.color-names{padding-bottom:4.5em}#main>article.resource,#main>article.tutorial{padding:2.25em 1em 0}}@media only screen and (max-width: 48em){#main{padding:0;margin:0}#main>article{width:100%;margin:0;padding:1.5em 1em 0}#main>article.fixed{padding:6.375em 1em 0}#main>article aside.sidebar,#main>aside.sidebar{display:none}}@media only screen and (min-width: 48.063em) and (max-width: 64em){#main>article{width:calc(92% - 348px)}#main>article.home header,#main>article.home section,#main>article.home figure{width:calc(92% - 208px);margin:0 0 0 8%;padding:0 1.5em}#main>article.home footer{width:calc(92% - 256px);margin-left:calc(8% + 1.5em);margin-right:1.5em;margin-top:3em;margin-bottom:0;padding:3em 0 4.5em}#main>article.color-html section>div div h3{font-size:27px;font-size:1.6875rem}#main>article aside.sidebar,#main>aside.sidebar{width:208px}#main>article.home.color-tutorials aside.sidebar,#main>article.home.color-resources aside.sidebar{float:right;margin-top:-336px}}@media only screen and (min-width: 48.063em){#main>article.home.color-html aside.sidebar{float:right}#main>article.home header.home-color-charts{margin-top:-180px}}@media only screen and (min-width: 64.063em){#main>article.home.color-tutorials aside.sidebar,#main>article.home.color-resources aside.sidebar{float:right;margin-top:-430px}}.hljs{display:block;color:#3f3844;overflow-x:auto;-webkit-text-size-adjust:none}.hljs-rules{color:#900c3f}.hljs-comment,.bash .hljs-shebang,.java .hljs-javadoc,.javascript .hljs-javadoc{color:#c3c3c3}.hljs-string,.apache .hljs-sqbracket,.coffeescript .hljs-subst,.coffeescript .hljs-regexp,.cpp .hljs-preprocessor,.c .hljs-preprocessor,.javascript .hljs-regexp,.json .hljs-attribute,.makefile .hljs-variable,.markdown .hljs-value,.markdown .hljs-link_label,.markdown .hljs-strong,.markdown .hljs-emphasis,.markdown .hljs-blockquote,.nginx .hljs-regexp,.nginx .hljs-number,.objectivec .hljs-preprocessor .hljs-title,.perl .hljs-regexp,.php .hljs-regexp,.xml .hljs-value,.less .hljs-built_in,.scss .hljs-built_in{color:#81c011}.hljs-keyword,.css .hljs-at_rule,.css .hljs-important,.http .hljs-request,.ini .hljs-setting,.java .hljs-javadoctag,.javascript .hljs-tag,.javascript .hljs-javadoctag,.nginx .hljs-title,.objectivec .hljs-preprocessor,.php .hljs-phpdoc,.sql .hljs-built_in,.less .hljs-tag,.less .hljs-at_rule,.scss .hljs-tag,.scss .hljs-at_rule,.scss .hljs-important,.stylus .hljs-at_rule,.go .hljs-typename,.swift .hljs-preprocessor{color:#900c3f}.apache .hljs-common,.apache .hljs-cbracket,.apache .hljs-keyword,.bash .hljs-literal,.bash .hljs-built_in,.coffeescript .hljs-literal,.coffeescript .hljs-built_in,.coffeescript .hljs-number,.cpp .hljs-number,.cpp .hljs-built_in,.c .hljs-number,.c .hljs-built_in,.cs .hljs-number,.cs .hljs-built_in,.css .hljs-value,.css .hljs-hexcolor,.css .hljs-number,.css .hljs-function,.http .hljs-literal,.http .hljs-attribute,.java .hljs-number,.javascript .hljs-built_in,.javascript .hljs-literal,.javascript .hljs-number,.json .hljs-number,.makefile .hljs-keyword,.markdown .hljs-link_reference,.nginx .hljs-built_in,.objectivec .hljs-literal,.objectivec .hljs-number,.objectivec .hljs-built_in,.php .hljs-literal,.php .hljs-number,.python .hljs-number,.ruby .hljs-prompt,.ruby .hljs-constant,.ruby .hljs-number,.ruby .hljs-subst .hljs-keyword,.ruby .hljs-symbol,.sql .hljs-number,.puppet .hljs-function,.less .hljs-number,.less .hljs-hexcolor,.less .hljs-function,.less .hljs-attribute,.scss .hljs-preprocessor,.scss .hljs-number,.scss .hljs-hexcolor,.scss .hljs-function,.stylus .hljs-number,.stylus .hljs-hexcolor,.stylus .hljs-attribute,.stylus .hljs-params,.go .hljs-built_in,.go .hljs-constant,.swift .hljs-built_in,.swift .hljs-number{color:#81c011}.apache .hljs-tag,.cs .hljs-xmlDocTag,.css .hljs-tag,.xml .hljs-title,.stylus .hljs-tag{color:#900c3f}.bash .hljs-variable,.cs .hljs-preprocessor,.cs .hljs-preprocessor .hljs-keyword,.css .hljs-attr_selector,.ini .hljs-value,.ini .hljs-keyword,.javascript .hljs-tag .hljs-title,.makefile .hljs-constant,.nginx .hljs-variable,.xml .hljs-tag,.scss .hljs-variable{color:#900c3f}.bash .hljs-title,.coffeescript .hljs-title,.cpp .hljs-title,.c .hljs-title,.cs .hljs-title,.css .hljs-id,.css .hljs-class,.css .hljs-pseudo,.css .hljs-attribute,.ini .hljs-title,.java .hljs-title,.javascript .hljs-title,.makefile .hljs-title,.objectivec .hljs-title,.perl .hljs-sub,.php .hljs-title,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-parent,.ruby .hljs-title,.xml .hljs-attribute,.puppet .hljs-title,.less .hljs-id,.less .hljs-pseudo,.less .hljs-class,.scss .hljs-id,.scss .hljs-pseudo,.scss .hljs-class,.scss .hljs-attribute,.stylus .hljs-class,.stylus .hljs-id,.stylus .hljs-pseudo,.stylus .hljs-title,.swift .hljs-title,.diff .hljs-chunk{color:#c70039}.coffeescript .hljs-reserved,.coffeescript .hljs-attribute{color:#ff5733}.diff .hljs-chunk{font-weight:bold}.diff .hljs-addition{color:#55a532;background-color:#eaffea}.diff .hljs-deletion{color:#bd2c00;background-color:#ffecec}.markdown .hljs-link_url{text-decoration:underline}.body-alert{position:fixed;bottom:0;left:0;right:0;margin:0.5em;padding:0.75em;background-color:white;-webkit-box-shadow:0 0 1em rgba(136,136,136,0.5);box-shadow:0 0 1em rgba(136,136,136,0.5);border-radius:0.25em;z-index:100;-webkit-animation:alertSlideUp 1.5s;animation:alertSlideUp 1.5s}@media only screen and (min-width: 48.063em){.body-alert{display:block;margin:0.75em;width:25em;padding:1.25em 1.5em 1.5em}}@-webkit-keyframes alertSlideUp{0%{-webkit-transform:translate3d(0, 2em, 0);transform:translate3d(0, 2em, 0);opacity:0}75%{-webkit-transform:translate3d(0, 2em, 0);transform:translate3d(0, 2em, 0);opacity:0}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}}@keyframes alertSlideUp{0%{-webkit-transform:translate3d(0, 2em, 0);transform:translate3d(0, 2em, 0);opacity:0}75%{-webkit-transform:translate3d(0, 2em, 0);transform:translate3d(0, 2em, 0);opacity:0}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}}.body-alert__title{display:none;color:#ff5733;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.075em;line-height:1}@media only screen and (min-width: 48.063em){.body-alert__title{display:inline-block}}.body-alert__close{display:inline-block;cursor:pointer;float:right;outline:none;margin:0;padding:0;background-color:transparent;border:none;color:#c3c3c3;font-size:1.5rem;line-height:0.625;-webkit-transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1)}.body-alert__close:hover{color:#3f3844}.body-alert__description{color:#3f3844;font-size:1rem;margin:0 0 0.25rem 0}@media only screen and (min-width: 48.063em){.body-alert__description{margin:0.75rem 0 1.25rem}}.body-alert__button{display:block;width:100%;color:white;font-size:0.75rem;padding:0.75rem;border-radius:0.25em;background-color:#ff5733;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:0.075em;-webkit-transition:background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 400ms cubic-bezier(0.4, 0, 0.2, 1)}.body-alert__button:hover{background-color:#3f3844}.footer-topline{display:flex;align-items:center}.footer-breadcrumbs{display:flex;align-items:center;white-space:nowrap}.footer-breadcrumbs .breadcrumbs__list{display:none}@media only screen and (min-width: 640px){.footer-breadcrumbs .breadcrumbs__list{display:flex;align-items:center}}.footer-breadcrumbs .breadcrumbs__item{line-height:1}@media only screen and (min-width: 640px){.footer-breadcrumbs .breadcrumbs__item{font-size:0.875rem}}.footer-breadcrumbs .breadcrumbs__item:before{content:"›";display:inline-block;font-size:1.125rem;font-weight:700;line-height:0.75rem}@media only screen and (min-width: 640px){.footer-breadcrumbs .breadcrumbs__item:before{margin:0 0.5rem 0 0.75rem}}.footer-breadcrumbs .breadcrumbs__link{font-size:0.875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;line-height:1}.footer-breadcrumbs .breadcrumbs__link span{pointer-events:none}#footer{background-color:#eeeeee;overflow-x:hidden}#footer nav{background-color:#f7f7f7}#footer nav>ul>li{position:relative;padding:1.5em;float:left}#footer nav>ul>li>h4,#footer nav ul li ol li h4{cursor:pointer;display:inline-block;vertical-align:middle;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}#footer nav ul li.color-codes{width:8%;margin-top:-5px}#footer nav ul li.footer-breadcrumbs{width:76.66665%}#footer nav ul li.languages{width:15.33333%}#footer nav ul li.languages ul{position:absolute;max-height:0;width:7.5em;margin:0 0 0 -0.75em;padding:0.75em;overflow:hidden;background-color:#f7f7f7;z-index:1;opacity:0;filter:alpha(opacity=0)}#footer nav ul li.languages.open ul{max-height:36em;opacity:1;filter:alpha(opacity=100)}#footer nav ul li h4:hover{color:#c3c3c3}#footer nav ul li h4:hover span.triangle{border-top:6px solid #c3c3c3}#footer nav ul li ol li{float:left}#footer>aside{width:100%;padding:1.5em;text-align:center;background-color:#f7f7f7}#footer>aside .button-svg{margin-right:2.25em;width:32px;height:32px}#footer>aside #Reddit .button-svg{width:36px;height:36px}#footer .footer-header h5,#footer .footer-section h5{margin-bottom:0.75em}#footer .footer-header{padding-top:3em}#footer .footer-header aside.social{width:8%;margin:0 0 -2.25em;padding:0 1.5em;float:left}#footer .footer-header aside.social a{display:block;margin-bottom:0.75em}#footer .footer-header aside.social a .button-svg{width:27px}#footer .footer-header div.credits{position:relative;width:61.33333%;padding:0 1.5em;float:left}#footer .footer-header div.contact,#footer .footer-header div.profiles{position:relative;width:15.33333%;padding:0 1.5em;float:left}#footer .footer-section{padding-bottom:3em}#footer .footer-section div.about{position:relative;width:61.33333%;margin-left:8%;padding:0 1.5em;float:left}#footer .footer-section div.partners,#footer .footer-section div.colophon{position:relative;width:15.33333%;padding:0 1.5em;float:left}#footer .footer-section div.partners{padding:0 0 0 1.5em}@media only screen and (max-width: 40em){#footer>aside .button-svg{margin-right:1.25em}#footer>aside :nth-last-child(1) .button-svg{margin-right:0}#footer .footer-header div.credits{width:100%;margin-bottom:3em}#footer .footer-header div.contact,#footer .footer-header div.profiles{width:50%;margin-bottom:1.5em}#footer .footer-header div.contact h4,#footer .footer-header div.profiles h4{margin-bottom:0.75em}#footer .footer-section div.about{width:100%;margin:0}}@media only screen and (min-width: 40.063em) and (max-width: 48em){#footer .footer-header div.credits{width:50%;margin-bottom:3em}#footer .footer-header div.contact,#footer .footer-header div.profiles{width:25%;margin-bottom:1.5em}#footer .footer-header div.contact h4,#footer .footer-header div.profiles h4{margin-bottom:0.75em}#footer .footer-section div.about{width:100%;margin-left:0}}@media only screen and (min-width: 48.063em) and (max-width: 64em){#footer nav ul li.footer-breadcrumbs{width:61.33333%}#footer nav ul li.languages{width:30.66666%}}@media only screen and (min-width: 48.063em){#footer a:hover{color:#c3c3c3}}.arrow,.export{cursor:pointer}.export{-webkit-transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.arrow .button-svg,.export .button-svg{display:inline-block;vertical-align:middle;margin-bottom:3px}.arrow .button-svg{margin-left:0.375em;margin-right:0.1875em;-webkit-transition:margin-left 0.375s cubic-bezier(0.4, 0, 0.2, 1),margin-right 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:margin-left 0.375s cubic-bezier(0.4, 0, 0.2, 1),margin-right 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:margin-left 0.375s cubic-bezier(0.4, 0, 0.2, 1),margin-right 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:margin-left 0.375s cubic-bezier(0.4, 0, 0.2, 1),margin-right 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.triangle{pointer-events:none;display:inline-block;vertical-align:middle;width:0;height:0;margin-top:-4px;margin-left:0.75em;border-radius:2px;border-left:6px solid transparent;border-right:6px solid transparent;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.triangle.white{border-top:6px solid white}.triangle.gray{border-top:6px solid #c3c3c3}.triangle.black{border-top:6px solid #3f3844}.buttons{margin-top:1.5em !important}.button{position:relative;float:left;cursor:pointer;padding:0.75em 1em}.button.gray.border{border-color:#eaeaea;-webkit-transition:border 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:border 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:border 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:border 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.button.gray.border:hover{border-color:#3f3844}a .button h5{-webkit-transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:color 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.button-link{padding:0}.border{border:1px solid;border-radius:3px}.button-list{position:relative;display:inline-block;float:left;margin-right:0.75em;z-index:1}.button-list.white ul{background-color:white}.button-list.white.border,.button-list.white.border ul{border-color:#eaeaea}.button-list.gray ul{background-color:#eeeeee}.button-list.gray.border,.button-list.gray.border ul{border-color:#c3c3c3}.button-list.gray ul li h5{cursor:pointer;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.button-list .button-leader{padding:0.75em 1em;cursor:pointer}.button-list ul{position:absolute;overflow:hidden;width:calc(100% + 2px);max-height:0;margin:0 -1px;border-bottom:1px solid;border-right:1px solid;border-left:1px solid;border-bottom-right-radius:3px;border-bottom-left-radius:3px;opacity:0;filter:alpha(opacity=0);-webkit-transition:max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0s cubic-bezier(0.4, 0, 0.2, 1);transition:max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1),opacity 0s cubic-bezier(0.4, 0, 0.2, 1)}.button-list ul li{padding:0.1875em 1em}.button-list ul li:nth-last-child(1){padding:0.1875em 1em 0.75em}.button-list ul li h5:hover{color:#3f3844}.button-list.open.border{border-bottom-right-radius:0px;border-bottom-left-radius:0px}.button-list.open ul{max-height:36em;opacity:1;filter:alpha(opacity=100)}#picker .button-list{min-width:12.5em}#picker .button-list ul li h5{cursor:pointer;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}#picker .button-list .triangle{float:right;margin-top:8px}.button-list.charts{min-width:14em}.button-list.charts .triangle{float:right;margin-top:8px}.button-list.chart,.button-list.names{min-width:11.25em}.button-list.chart .triangle,.button-list.names .triangle{float:right;margin-top:8px}.button-group{margin:1.5em 0 0}.button-group ul a li{float:left;padding:0.75em 1.5em;border-top:1px solid;border-bottom:1px solid;border-left:1px solid;border-color:#eaeaea}.button-group ul a:nth-child(1) li{border-top-left-radius:3px;border-bottom-left-radius:3px}.button-group ul a:nth-last-child(1) li{border-right:1px solid;border-color:#eaeaea;border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group ul a li .button-svg{margin-right:0.75em;display:inline-block;vertical-align:bottom}.button-group ul a li h5{pointer-events:none;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.button-group ul a:hover li h5{color:#3f3844}@media only screen and (min-width: 48.063em){a:hover .button .arrow,.arrow:hover,.export:hover{color:#3f3844}a:hover .button .arrow .button-svg,.arrow:hover .button-svg{margin-left:0.5625em;margin-right:0}.export .button-svg{margin-left:0.75em}}.button-svg .fill{fill:white;stroke:none;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.button-svg .stroke{fill:none;stroke:white;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.white .button-svg .fill{fill:white;stroke:none}.white .button-svg .stroke{fill:none;stroke:white}.gray .button-svg .fill{fill:#c3c3c3;stroke:none}.gray .button-svg .stroke{fill:none;stroke:#c3c3c3}.black .button-svg .fill{fill:#3f3844;stroke:none}.black .button-svg .stroke{fill:none;stroke:#3f3844}.yellow .button-svg .fill{fill:#ffc300;stroke:none}.yellow .button-svg .stroke{fill:none;stroke:#ffc300}.ruby .button-svg .fill{fill:#900c3f;stroke:none}.ruby .button-svg .stroke{fill:none;stroke:#900c3f}@media only screen and (min-width: 48.063em){.white:hover .button-svg .fill{fill:#3f3844}.white:hover .button-svg .stroke{stroke:#3f3844}.gray:hover .button-svg .fill{fill:#3f3844}.gray:hover .button-svg .stroke{stroke:#3f3844}.black:hover .button-svg .fill{fill:#c3c3c3}.black:hover .button-svg .stroke{stroke:#c3c3c3}}nav.color-nav,nav.static-nav{position:relative;top:-2.25em;width:100%;margin:0 auto;max-width:75em;max-height:78px;min-height:78px;padding:1.5em 0;overflow:hidden;z-index:2;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:1px solid #eaeaea;background-color:white;-webkit-animation:mainSlide 1s, mainFade 1s;-moz-animation:mainSlide 1s, mainFade 1s;-ms-animation:mainSlide 1s, mainFade 1s;-o-animation:mainSlide 1s, mainFade 1s;animation:mainSlide 1s, mainFade 1s}nav.color-nav div.color-data,nav.color-nav div.static-data,nav.static-nav div.color-data,nav.static-nav div.static-data{width:calc(92% - 348px);margin:0;padding:0 1.5em;float:left}nav.color-nav div.color-data div,nav.color-nav div.static-data div,nav.static-nav div.color-data div,nav.static-nav div.static-data div{display:inline-block;vertical-align:middle}nav.color-nav div.color-icon,nav.color-nav div.static-icon,nav.static-nav div.color-icon,nav.static-nav div.static-icon{width:8%;padding:0 1.5em;float:left}nav.color-nav div.color-icon,nav.static-nav div.color-icon{margin-top:5px}nav.color-nav div.static-icon.tutorial-icon,nav.static-nav div.static-icon.tutorial-icon{margin-top:3px}nav.color-nav div.color-swatch div,nav.static-nav div.color-swatch div{width:50px;height:27px;border-radius:3px}nav.color-nav div.color-label,nav.static-nav div.color-label{margin-left:1em}nav.color-nav div.color-code,nav.static-nav div.color-code{margin-left:0.5em}nav.color-nav div.color-code span,nav.static-nav div.color-code span{font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;font-style:normal;font-weight:700;line-height:1;color:#3f3844;font-size:18px;font-size:1.125rem}nav.color-nav div.color-code.hex span,nav.static-nav div.color-code.hex span{text-transform:uppercase;letter-spacing:0.025em}nav.color-nav div.color-palette,nav.static-nav div.color-palette{width:348px;padding:0 1.5em;float:left;cursor:pointer}nav.color-nav div.color-palette h5,nav.static-nav div.color-palette h5{margin-top:3px}nav.color-nav div.color-palette>div,nav.static-nav div.color-palette>div{width:calc(100% / 6);height:27px;float:left}nav.color-nav div.color-palette>div div,nav.static-nav div.color-palette>div div{width:100%;height:27px}nav.color-nav div.color-palette>div h4,nav.static-nav div.color-palette>div h4{display:none}nav.color-nav div.color-palette div:nth-child(1) div,nav.static-nav div.color-palette div:nth-child(1) div{border-top-left-radius:3px;border-bottom-left-radius:3px}nav.color-nav div.color-palette div:nth-last-child(1) div,nav.static-nav div.color-palette div:nth-last-child(1) div{border-top-right-radius:3px;border-bottom-right-radius:3px}nav.color-nav div.color-export,nav.static-nav div.color-export{float:right;margin-top:3px}nav.color-nav.fixed{position:fixed;top:0;border-top-right-radius:0;border-top-left-radius:0;z-index:4}@media only screen and (max-width: 40em){nav.color-nav div.color-data,nav.color-nav div.static-data{width:calc(100% - 144px);margin:0}nav.color-nav div.color-palette{width:100%;margin-top:3em;padding-bottom:2.25em}nav.color-nav div.mobile-palette{width:9em}nav.color-nav div.mobile-export{position:absolute;height:3em;top:12em;margin-left:1.5em}nav.color-nav div.mobile-export h5 .button-svg{margin-right:0.75em}nav.color-nav div.color-label{margin-left:1.25em}nav.color-nav.open,nav.color-nav.fixed.open{min-height:15em;overflow:auto}}@media only screen and (min-width: 40.063em) and (max-width: 48em){nav.color-nav div.color-data,nav.color-nav div.static-data{width:calc(100% - 144px);margin:0}nav.color-nav div.color-palette{width:100%;margin-top:3em;padding-bottom:2.25em}nav.color-nav div.mobile-palette{width:9em}}@media only screen and (max-width: 48em){nav.color-nav,nav.static-nav{top:0;min-height:0;max-height:3.5em;padding:1em 0;-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:-moz-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1);-ms-transition:-ms-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:-o-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99);transition:transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99), top 0.375s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.375s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.16, 0.68, 0.43, 0.99)}nav.color-nav div.color-data,nav.static-nav div.color-data{display:flex;align-items:center;padding:0 1em}nav.color-nav div.color-swatch,nav.static-nav div.color-swatch{margin-top:-1px}nav.color-nav div.color-swatch div,nav.static-nav div.color-swatch div{width:2.5rem;height:1.5rem;border-radius:0.1875rem}nav.color-nav div.color-label,nav.static-nav div.color-label{margin-left:1rem}nav.color-nav div.color-label h5,nav.static-nav div.color-label h5{font-size:0.75rem;line-height:1}nav.color-nav div.color-code,nav.static-nav div.color-code{margin-left:0.5rem}nav.color-nav div.color-code .hex,nav.static-nav div.color-code .hex{display:block;font-size:1rem;line-height:1}nav.color-nav div.mobile-palette,nav.static-nav div.mobile-palette{padding-right:1em;float:left;cursor:pointer}nav.color-nav div.mobile-palette>div,nav.static-nav div.mobile-palette>div{width:calc(100% / 6);height:1.5em;float:left}nav.color-nav div.mobile-palette div:nth-child(1),nav.static-nav div.mobile-palette div:nth-child(1){border-top-left-radius:3px;border-bottom-left-radius:3px}nav.color-nav div.mobile-palette div:nth-last-child(1),nav.static-nav div.mobile-palette div:nth-last-child(1){border-top-right-radius:3px;border-bottom-right-radius:3px}nav.color-nav div.color-palette,nav.static-nav div.color-palette{width:100%;margin-top:3em;padding-bottom:2.25em}nav.color-nav div.color-palette>div,nav.static-nav div.color-palette>div{position:relative;height:0;padding-bottom:9%}nav.color-nav div.color-palette>div div,nav.static-nav div.color-palette>div div{position:absolute;width:100%;height:100%}nav.color-nav div.color-palette div.unlocked span.color-lock,nav.static-nav div.color-palette div.unlocked span.color-lock{display:block;width:32px;height:32px;margin:65% auto 0;background-size:32px 32px;background-image:url("../image/button-unlock.svg")}nav.color-nav div.color-palette div.locked span.color-lock,nav.static-nav div.color-palette div.locked span.color-lock{display:block;width:32px;height:32px;margin:65% auto 0;background-size:32px 32px;background-image:url("../image/button-lock.svg")}nav.color-nav.fixed{top:80px;-webkit-box-shadow:0 0.5em 0.5em var(--color-shadow);box-shadow:0 0.5em 0.5em var(--color-shadow);border-top:1px solid var(--color-gray--border)}nav.color-nav.open,nav.color-nav.fixed.open{max-height:22.5em;overflow:auto}}@media only screen and (min-width: 48.063em) and (max-width: 64em){nav.color-nav div.color-data,nav.color-nav div.static-data,nav.static-nav div.color-data,nav.static-nav div.static-data{width:calc(92% - 208px);margin:0}nav.color-nav div.color-label,nav.static-nav div.color-label{margin-left:1.5em}nav.color-nav div.color-code,nav.static-nav div.color-code{margin-left:0.75em}nav.color-nav div.color-code span,nav.static-nav div.color-code span{font-size:18px;font-size:1.125rem}nav.color-nav div.color-palette,nav.static-nav div.color-palette{width:208px}}@media only screen and (min-width: 48.063em){nav.color-nav{-webkit-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1)}nav.color-nav div.color-palette div.unlocked span.color-lock{display:block;width:24px;height:24px;margin:0 auto 0;background-size:24px 24px;background-image:url("../image/button-unlock.svg");-webkit-transition:all 0.125s ease-out;-moz-transition:all 0.125s ease-out;-o-transition:all 0.125s ease-out;transition:all 0.125s ease-out;opacity:0.33;filter:alpha(opacity=33)}nav.color-nav div.color-palette div.unlocked span.color-lock:hover{display:block;width:32px;height:32px;margin:-4px auto 0;background-size:32px 32px;background-image:url("../image/button-unlock.svg");opacity:1;filter:alpha(opacity=100)}nav.color-nav div.color-palette div.locked span.color-lock{display:block;width:24px;height:24px;margin:0 auto 0;background-size:24px 24px;background-repeat:no-repeat;background-image:url("../image/button-lock.svg")}nav.color-nav div.color-palette div.locked span.color-lock:hover{display:block;width:32px;height:32px;margin:-4px auto 0;background-size:32px 32px;background-repeat:no-repeat;background-image:url("../image/button-lock.svg")}}@media only screen and (min-width: 48.063em) and (max-width: 57em){nav.color-nav div.color-label.hsl,nav.color-nav div.color-code.hsl{display:none !important}}@media only screen and (min-width: 64.063em) and (max-width: 75em){nav.color-nav div.color-label{margin-left:0.75em}}@media only screen and (min-width: 75em){nav.color-nav.fixed{left:50%;-webkit-transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0)}}.logo{position:relative;width:32px;height:32px}.logo .donut{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:9px solid transparent;border-left:9px solid transparent;-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275)}.logo .deg-hidden{position:absolute;width:52%;height:55%;bottom:0;left:-2%;background-color:#f7f7f7;z-index:0;-webkit-transition:z-index 1s;-moz-transition:z-index 1s;-o-transition:z-index 1s;transition:z-index 1s}.logo .deg45-1-gray{border-bottom:9px solid #c3c3c3;z-index:1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:z-index 1s;-moz-transition:z-index 1s;-o-transition:z-index 1s;transition:z-index 1s}.logo .deg45-1{border-bottom:9px solid #ff5733;z-index:3;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1)}.logo .deg45-2-gray{border-bottom:9px solid #c3c3c3;z-index:1;-webkit-transform:rotate(112.5deg);-moz-transform:rotate(112.5deg);-ms-transform:rotate(112.5deg);-o-transform:rotate(112.5deg);transform:rotate(112.5deg);-webkit-transition:z-index 1s;-moz-transition:z-index 1s;-o-transition:z-index 1s;transition:z-index 1s}.logo .deg45-2{border-bottom:9px solid #ff5733;z-index:3;-webkit-transform:rotate(112.5deg);-moz-transform:rotate(112.5deg);-ms-transform:rotate(112.5deg);-o-transform:rotate(112.5deg);transform:rotate(112.5deg);-webkit-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1)}.logo .deg45-3-gray{border-bottom:9px solid #c3c3c3;z-index:1;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.logo .deg45-3{border-bottom:9px solid #ff5733;z-index:3;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1),z-index 1s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1)}.logo .deg45-4-gray{border-bottom:9px solid #b6b6b6;z-index:0;-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}.logo .deg45-4{border-bottom:9px solid #c70039;z-index:1;-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg);-webkit-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1)}.logo .deg45-5-gray{border-bottom:9px solid #aaaaaa;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.logo .deg45-5{border-bottom:9px solid #900c3f;z-index:1;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);-webkit-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1)}.logo .deg45-6-gray{border-bottom:9px solid #9d9d9d;-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-ms-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg)}.logo .deg45-6{border-bottom:9px solid #581845;z-index:0;-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-ms-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg);-webkit-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1)}@media only screen and (min-width: 48.063em){.logo:hover .deg-hidden{z-index:4}.logo:hover .deg45-1-gray{z-index:4}.logo:hover .deg45-1{z-index:2;-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}.logo:hover .deg45-2-gray{z-index:4}.logo:hover .deg45-2{z-index:2;-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}.logo:hover .deg45-3{z-index:2;-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}.logo:hover .deg45-4{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}.logo:hover .deg45-5{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}.logo:hover .deg45-6{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}}#modal{top:-150%;position:fixed;width:100%;height:100%;z-index:13;visibility:hidden;-webkit-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.modal-active{overflow:hidden}.modal-active #overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:12;background-color:rgba(63,56,68,0.875);-webkit-animation:fadeIn 0.375s;-moz-animation:fadeIn 0.375s;-ms-animation:fadeIn 0.375s;-o-animation:fadeIn 0.375s;animation:fadeIn 0.375s}.modal-active #modal{position:fixed;visibility:visible;top:0;z-index:13;overflow-x:auto;-webkit-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:top 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.modal-content{position:relative;width:84%;max-width:63em;margin:3em auto;padding:0.75em 0.75em 2.25em;border-radius:3px;background-color:white}.modal-content:before,.modal-content:after{content:" ";display:table}.modal-content:after{clear:both}.modal-content>h2{margin:12px 12px 32px}.modal-content h2::first-letter,.modal-content h2:first-letter{text-transform:capitalize}.modal-content h2.no-caps::first-letter,.modal-content h2.no-caps:first-letter{text-transform:none}.modal-content>h5{margin:6px 12px 8px}.modal-content>span{position:absolute;cursor:pointer;top:8px;right:24px;color:#c3c3c3;font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;font-weight:600;font-size:36px;font-size:2.25rem;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.modal-content>span:hover{color:#3f3844}.modal-swatches{padding:0.75em}.modal-swatches>div{position:relative;float:left;width:calc(100% / 6);padding-bottom:9%}.modal-swatches>div div{position:absolute;width:100%;height:100%}.modal-swatches div:nth-child(1) div{border-top-left-radius:3px;border-bottom-left-radius:3px}.modal-swatches div:nth-last-child(1) div{border-top-right-radius:3px;border-bottom-right-radius:3px}.modal-code{width:calc(100% / 3);padding:0.75em;float:left}.modal-code div{padding:0.75em;border-radius:3px;border:1px solid #eaeaea}.modal-code h5{margin-bottom:0.75em}.modal-code span{font-family:"Courier", Courier, monospace;font-style:normal;font-weight:400;letter-spacing:0.0375em;line-height:1.4;font-size:14px;font-size:0.875rem;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);color:#c3c3c3;display:block}@media only screen and (max-width: 40em){.modal-content{margin:1.5em auto 3em}.modal-code{width:100%}}@media only screen and (min-width: 40.063em) and (max-width: 48em){.modal-content{margin:3em auto 4.5em}.modal-content div:nth-child(even){padding-right:1.5em}.modal-code{width:50%}}@media only screen and (max-width: 48em){.modal-content{width:100%;padding:0;border-radius:none}.modal-content>h2{margin:0 0 32px}.modal-content>h5{display:none}.modal-content>span{display:none}.modal-swatches{padding:0}.modal-code{padding:1.5em 0 0}}@media only screen and (min-width: 48.063em) and (max-width: 64em){.modal-code{width:50%}}article#picker section:nth-child(1){margin-bottom:1.5em}article#picker section.color-harmonies figure{float:left;margin:3em 0 1.5em;text-align:center}article#picker section.color-harmonies figure:nth-child(odd){width:40%}article#picker section.color-harmonies figure:nth-child(even){width:60%}article#picker section.color-harmonies figure img{width:100%;height:100%;padding:1.5em 1.5em 1.5em 0}article#picker section.color-shades-tints-tones figure img{width:100%;height:100%;padding:1.5em 0 0}section div#harmonies{margin-right:-0.75em;margin-left:-0.75em}.colorPicker{width:100%}.colorPicker .twod{position:relative;width:calc(87.5% - 159px);height:396px;float:left;border-radius:3px}.colorPicker .twod .bg{position:absolute;width:100%;height:100%;border-radius:3px}.colorPicker .twod .bg1{z-index:0;background:-moz-linear-gradient(left, white 0%, rgba(255,255,255,0) 100%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, white 0%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, white 0%, rgba(255,255,255,0) 100%);background:-webkit-gradient(linear, left top, right top, from(white), to(rgba(255,255,255,0)));background:linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%)}.colorPicker .twod .bg2{z-index:1;background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, black 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, black));background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, black 100%);background:-o-linear-gradient(top, rgba(0,0,0,0) 0%, black 100%);background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(black));background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 100%)}.colorPicker .twod .pointer{position:relative;z-index:2;width:8px}.colorPicker .twod .pointer .shape{position:absolute}.colorPicker .twod .pointer .shape1{margin-left:-9px;margin-top:-9px;width:18px;height:18px;border:3px solid #3f3844;-moz-border-radius:9px;border-radius:9px}.colorPicker .twod .pointer .shape2{margin-left:-6px;margin-top:-6px;width:12px;height:12px;border:3px solid white;-moz-border-radius:6px;border-radius:6px}.colorPicker .oned{width:12.5%;height:396px;padding:0 1.5em;float:left;border-radius:3px}.colorPicker .oned .bg{width:100%;height:100%;background:-moz-linear-gradient(top, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(17%, #ff0), color-stop(33%, lime), color-stop(50%, cyan), color-stop(66%, blue), color-stop(83%, #f0f), color-stop(100%, red));background:-webkit-linear-gradient(top, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);background:-o-linear-gradient(top, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);background:-webkit-gradient(linear, left top, left bottom, from(red), color-stop(17%, #ff0), color-stop(33%, lime), color-stop(50%, cyan), color-stop(66%, blue), color-stop(83%, #f0f), to(red));background:linear-gradient(to bottom, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);border-radius:3px}.colorPicker .oned .pointer{position:relative;z-index:2}.colorPicker .oned .pointer .shape{position:absolute;width:calc(100% + 6px);margin-left:-3px;margin-top:-4px;height:9px;border:3px solid #3f3844;-moz-border-radius:3px;border-radius:3px}.colorPicker .extras{position:relative;width:159px;height:396px;float:left;padding:1.5em;border-radius:3px;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;border-bottom:1px solid #eaeaea}.colorPicker .extras .currentColorContainer{margin:-1.5em -1.5em 1em}.colorPicker .extras .currentColor{cursor:pointer;width:calc(100% + 2px);height:86px;margin-left:-1px;border-top-right-radius:3px;border-top-left-radius:3px}.colorPicker .extras div.hex,.colorPicker .extras div.colorFields{padding-bottom:0.5em}.colorPicker .extras label,.colorPicker .extras input{font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;font-style:normal;letter-spacing:0.01em;text-transform:uppercase;font-size:14px;font-size:0.875rem}.colorPicker .extras label{padding-right:1.125em;font-weight:600;color:#c3c3c3}.colorPicker .extras input{width:80px;border:none;font-weight:700;padding:0.0625rem 0.75em 0.0625em;border-radius:3px;border:1px solid white;background-color:transparent;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.colorPicker .extras input:focus{outline:none;border:1px solid #eaeaea;background-color:transparent}.colorPicker .extras input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none}@media only screen and (max-width: 40em){article#picker section.color-harmonies figure,article#picker section.color-harmonies figure:nth-child(odd),article#picker section.color-harmonies figure:nth-child(even){width:100%;float:none;margin:3em 0 1.5em;text-align:center}article#picker section.color-harmonies figure img{padding:1.5em 2.25em}.colorPicker .twod{width:85%;height:240px}.colorPicker .oned{width:15%;height:240px;padding:0 0 0 1.5em}.colorPicker .extras{width:100%;height:100%;margin-top:1.5em;padding:1em 1.5em;border-top:1px solid #eaeaea}.colorPicker .extras .currentColorContainer .currentColor{height:88px}.colorPicker .extras div.hex{width:100%}.colorPicker .extras div.colorFields{width:calc(100% / 3);float:left;padding:0}.colorPicker .extras label{width:40%;padding-right:1.125em;font-weight:600;color:#c3c3c3}.colorPicker .extras input{width:60%}}@media only screen and (min-width: 40.063em) and (max-width: 48em){.colorPicker .twod{width:calc(87.5% - 162px)}.colorPicker .extras{width:162px}}article#charts h2{display:inline-block}article#charts h2 a:after{content:'';display:block;height:3px;width:0;border-radius:2px;background:#eaeaea;-webkit-transition:width 0.375s ease-in;-moz-transition:width 0.375s ease-in;-o-transition:width 0.375s ease-in;transition:width 0.375s ease-in}article#charts h2 a:hover:after{width:100%;background:#eaeaea}article#chart section>h5{margin:0 0 0.75em 0.75em}article.home.color-charts .color-group,article#charts .color-group{width:5%;float:left;display:block}article.home.color-charts .color-block,article#charts .color-block{float:left;display:block;position:relative;width:100%;padding-bottom:100%}article.home.color-charts .color-block div,article#charts .color-block div{position:absolute;cursor:pointer;width:100%;height:100%;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}#flat.chart .color-group:nth-child(1) .color-block:nth-child(1) div{border-top-left-radius:3px}#flat.chart .color-group:nth-child(1) .color-block:nth-child(10) div{border-bottom-left-radius:3px}#flat.chart .color-group:nth-child(20) .color-block:nth-child(1) div{border-top-right-radius:3px}#flat.chart .color-group:nth-child(20) .color-block:nth-child(10) div{border-bottom-right-radius:3px}#material.chart .color-group:nth-child(1) .color-block:nth-child(1) div{border-top-left-radius:3px}#material.chart .color-group:nth-child(1) .color-block:nth-child(10) div{border-bottom-left-radius:3px}#flat.chart .color-group:nth-child(20) .color-block:nth-child(1) div{border-top-right-radius:3px}#flat.chart .color-group:nth-child(20) .color-block:nth-child(10) div{border-bottom-right-radius:3px}#websafe.chart .color-group:nth-child(1) .color-block:nth-child(1) div{border-top-left-radius:3px}#websafe.chart .color-group:nth-child(1) .color-block:nth-child(12) div{border-bottom-left-radius:3px}#websafe.chart .color-group:nth-child(18) .color-block:nth-child(1) div{border-top-right-radius:3px}#websafe.chart .color-group:nth-child(18) .color-block:nth-child(12) div{border-bottom-right-radius:3px}article#chart>section{margin-right:-0.75em;margin-left:-0.75em}article#chart>section:before,article#chart>section:after{content:" ";display:table}article#chart>section:after{clear:both}.color-card{position:relative;width:25%;margin:0 0 1.5em;padding:0 0.75em;overflow:hidden;float:left}.color-card .color-swatch{position:relative;width:100%;padding-bottom:54%;cursor:pointer}.color-card .color-swatch div{position:absolute;width:100%;height:100%;border-top-right-radius:3px;border-top-left-radius:3px}.color-card .color-data{padding:0.75em 1em 0.375em;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;border-bottom:1px solid #eaeaea;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.color-card .color-data h4{height:22px;margin-bottom:0.375em}@media only screen and (max-width: 20em){.color-card{padding:0 0.375em}.color-card .color-data{padding:0.75em 0.75em 0.375em}}@media only screen and (max-width: 40em){body.index .color-group,body.color-chart .color-group{width:5%;float:left;display:block}body.index .color-block,body.color-chart .color-block{float:left;display:block;position:relative;width:100%;padding-bottom:100%}body.index .color-block div,body.color-chart .color-block div{position:absolute;cursor:pointer;width:100%;height:100%;-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.color-card{width:50%}}@media only screen and (max-width: 48em){article#chart section>h5{margin:0 0 1em 0.75em}}@media only screen and (min-width: 48.063em){.color-block:hover div{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2);border-radius:3px;z-index:4}}@media only screen and (min-width: 48.063em) and (max-width: 75em){.color-card{width:33.33333%}}#names>section{margin-right:-1em !important;margin-left:-1em !important}@media only screen and (min-width: 640px){#names>section{margin-right:-1.5em !important;margin-left:-1.5em !important}}#names>section#how-to{margin-right:0;margin-left:0}article.tutorials section>div{margin:0.75em -1.5em;padding:1.5em 1.5em 1em;border-radius:3px;border:1px solid #eaeaea}@media only screen and (min-width: 960px){.tutorials:not(.tutorials_index) #header .image,.es_tutoriales:not(.es_tutoriales_index) #header .image,.fr_tutoriels:not(.fr_tutoriels_index) #header .image,.zh_jiaocheng:not(.zh_jiaocheng_index) #header .image{height:288px;max-height:288px;padding-bottom:0}}@media only screen and (max-width: 48em){.tutorials section>p{margin-bottom:1em}.tutorials section>div{margin:0.75em 0}}.resource figure .image,.resources figure .image{border-radius:3px;margin-bottom:2.25em}.resource figure figcaption .button-svg,.resources figure figcaption .button-svg{display:inline-block;vertical-align:bottom;margin-right:0.75em}.resource figure div a h5,.resources figure div a h5{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);padding:0.75em 1em;color:#3f3844;border-radius:3px;border:1px solid #3f3844;pointer-events:none;margin:32px 0 0 0;opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)}.resource h2,.resources h2{display:inline-block}.resource section p,.resources section p{margin:0.375em 0 0 0}.resource h2{margin-bottom:0.75em}.resources h2{margin-bottom:0}@media only screen and (min-width: 960px){.resources:not(.resources_index) #header .image,.es_recursos:not(.es_recursos_index) #header .image,.fr_resources:not(.fr_resources_index) #header .image,.zh_ziyuan:not(.zh_ziyuan_index) #header .image{height:288px;max-height:288px;padding-bottom:0}}@media only screen and (max-width: 40em){.ratio-16x6{padding-bottom:62%}.resource figure{margin:0 0 1em}.resource figure h5,.resource figure figcaption{margin-top:-1.5em}.resource h2{margin-bottom:0.5em}}@media only screen and (min-width: 40.063em) and (max-width: 48em){.ratio-16x6{padding-bottom:54%}.resource figure{margin:0 0 2.25em}.resource figure h5,.resource figure figcaption{margin-top:-1em}}@media only screen and (min-width: 48.063em){.resource div a:hover img,.resources div a:hover img{opacity:0.125;filter:alpha(opacity=12.5)}.resource div a:hover h5,.resources div a:hover h5{margin:0 0 0 0;opacity:1;filter:alpha(opacity=100)}.resource h2 a:after,.resources h2 a:after{content:'';display:block;height:3px;width:0;border-radius:2px;background:#eaeaea;-webkit-transition:width 0.375s ease-in;-moz-transition:width 0.375s ease-in;-o-transition:width 0.375s ease-in;transition:width 0.375s ease-in}.resource h2 a:hover:after,.resources h2 a:hover:after{width:100%;background:#eaeaea}.resource figure{margin:0 -1.5em 2.25em;padding:1.5em 1.5em 1em;border-radius:3px;border:1px solid #eaeaea}}.privacy-policy__header{padding-top:4rem}@media only screen and (min-width: 48.063em){.privacy-policy__header{padding-top:12rem}}.responsive-ad-unit-300{width:300px;height:250px !important}.ad--lg{display:none}@media only screen and (min-width: 64.063em){.ad--lg{display:block}}.ad--md{display:none}@media only screen and (min-width: 48.063em) and (max-width: 1023px){.ad--md{display:block}}.bsa-cpc #_default_{position:relative;margin-bottom:1em;padding:1em;border:solid 1px #ebebeb;border-radius:3px;background-color:#f7f7f7;font-size:.875rem;font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;line-height:1.5}.bsa-cpc .default-ad{display:none}.bsa-cpc ._default_{display:inline;overflow:hidden;line-height:1.5}.bsa-cpc ._default_>*{vertical-align:middle}.bsa-cpc a{color:#737373;text-decoration:none}.bsa-cpc a:hover{color:#c0c0c0}.bsa-cpc .default-image{display:none}.bsa-cpc .default-title:after{content:" — "}.bsa-cpc .default-title,.bsa-cpc .default-description{display:inline}.bsa-cpc .default-title{position:relative;margin-left:8px}.bsa-cpc .default-title:before{position:relative;top:-1px;left:-8px;padding:2px 5px;border-radius:3px;background:#ff5733;color:#fff;content:"Sponsor";text-transform:uppercase;font-size:10px;font-family:Verdana, sans-serif;line-height:1}.affiliate-card{width:300px;height:300px;display:block;margin-bottom:16px}.affiliate-card__image{width:300px;height:150px;display:block;margin:0 !important;padding:0 !important}.affiliate-card__image img{width:300px;height:150px;display:block}.affiliate-card__image-ct{height:auto}.affiliate-card__image-ct img{height:auto}.affiliate-card__text{width:300px;height:150px;padding:16px;background:white;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;border-bottom:1px solid #eaeaea;border-bottom-left-radius:3px;border-bottom-right-radius:3px}.affiliate-card--ct .affiliate-card__text{height:100px}.affiliate-card__title{font-size:36px;font-size:2.25rem}.affiliate-card__link{display:block;margin-top:12px;color:#ffc300;font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;font-weight:700;letter-spacing:0.025em;font-size:22px;font-size:1.375rem}.affiliate-card__link.ruby{color:#900c3f}.cta-arrow{cursor:pointer;display:inline-block;vertical-align:middle;margin-bottom:3px}.cta-arrow .button-svg{-webkit-transform:scale(1.5) translate3d(8px, 0, 0);transform:scale(1.5) translate3d(8px, 0, 0)}.affiliate-card:hover .cta-arrow .button-svg{-webkit-animation:ctaArrowWiggle 600ms;-moz-animation:ctaArrowWiggle 600ms;-ms-animation:ctaArrowWiggle 600ms;-o-animation:ctaArrowWiggle 600ms;animation:ctaArrowWiggle 600ms}@-webkit-keyframes ctaArrowWiggle{0%{-webkit-transform:scale(1.5) translate3d(8px, 0, 0);transform:scale(1.5) translate3d(8px, 0, 0)}25%{-webkit-transform:scale(1.5) translate3d(16px, 0, 0);transform:scale(1.5) translate3d(16px, 0, 0)}50%{-webkit-transform:scale(1.5) translate3d(12px, 0, 0);transform:scale(1.5) translate3d(12px, 0, 0)}75%{-webkit-transform:scale(1.5) translate3d(16px, 0, 0);transform:scale(1.5) translate3d(16px, 0, 0)}100%{-webkit-transform:scale(1.5) translate3d(8px, 0, 0);transform:scale(1.5) translate3d(8px, 0, 0)}}@-moz-keyframes ctaArrowWiggle{0%{transform:scale(1.5) translate3d(8px, 0, 0)}25%{transform:scale(1.5) translate3d(16px, 0, 0)}50%{transform:scale(1.5) translate3d(12px, 0, 0)}75%{transform:scale(1.5) translate3d(16px, 0, 0)}100%{transform:scale(1.5) translate3d(8px, 0, 0)}}@-o-keyframes ctaArrowWiggle{0%{transform:scale(1.5) translate3d(8px, 0, 0)}25%{transform:scale(1.5) translate3d(16px, 0, 0)}50%{transform:scale(1.5) translate3d(12px, 0, 0)}75%{transform:scale(1.5) translate3d(16px, 0, 0)}100%{transform:scale(1.5) translate3d(8px, 0, 0)}}@keyframes ctaArrowWiggle{0%{-webkit-transform:scale(1.5) translate3d(8px, 0, 0);transform:scale(1.5) translate3d(8px, 0, 0)}25%{-webkit-transform:scale(1.5) translate3d(16px, 0, 0);transform:scale(1.5) translate3d(16px, 0, 0)}50%{-webkit-transform:scale(1.5) translate3d(12px, 0, 0);transform:scale(1.5) translate3d(12px, 0, 0)}75%{-webkit-transform:scale(1.5) translate3d(16px, 0, 0);transform:scale(1.5) translate3d(16px, 0, 0)}100%{-webkit-transform:scale(1.5) translate3d(8px, 0, 0);transform:scale(1.5) translate3d(8px, 0, 0)}}.affiliate-list{margin-top:32px}.affiliate-list__title{margin-bottom:8px}.affiliate-list__item{padding:12px 0;width:100%;height:80px;display:block;border-top:1px solid #eaeaea}.affiliate-list__item:hover{background:#f7f7f7}.affiliate-list__item-image{float:left;width:90px !important;display:block;margin:0 !important;padding:0 !important}.affiliate-list__item-image img{width:100%;display:block}.affiliate-list__item-text{float:left;width:210px;padding-left:12px}.affiliate-list__item-title{line-height:1}.affiliate-list__item-description{color:#c3c3c3;letter-spacing:0.025em;font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif}.affiliate-list__item-link{display:block;margin-top:6px;font-weight:700;font-family:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;letter-spacing:0.025em;color:#ffc300}.affiliate-list__link:hover .cta-arrow--small .button-svg{-webkit-animation:ctaArrowWiggleSmall 600ms;-moz-animation:ctaArrowWiggleSmall 600ms;-ms-animation:ctaArrowWiggleSmall 600ms;-o-animation:ctaArrowWiggleSmall 600ms;animation:ctaArrowWiggleSmall 600ms}@-webkit-keyframes ctaArrowWiggleSmall{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}25%{-webkit-transform:translate3d(8px, 0, 0);transform:translate3d(8px, 0, 0)}50%{-webkit-transform:translate3d(4px, 0, 0);transform:translate3d(4px, 0, 0)}75%{-webkit-transform:translate3d(8px, 0, 0);transform:translate3d(8px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-moz-keyframes ctaArrowWiggleSmall{0%{transform:translate3d(0, 0, 0)}25%{transform:translate3d(8px, 0, 0)}50%{transform:translate3d(4px, 0, 0)}75%{transform:translate3d(8px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-o-keyframes ctaArrowWiggleSmall{0%{transform:translate3d(0, 0, 0)}25%{transform:translate3d(8px, 0, 0)}50%{transform:translate3d(4px, 0, 0)}75%{transform:translate3d(8px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes ctaArrowWiggleSmall{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}25%{-webkit-transform:translate3d(8px, 0, 0);transform:translate3d(8px, 0, 0)}50%{-webkit-transform:translate3d(4px, 0, 0);transform:translate3d(4px, 0, 0)}75%{-webkit-transform:translate3d(8px, 0, 0);transform:translate3d(8px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.cssgradient-card{position:relative;height:250px;background-image:-webkit-gradient(linear, left top, right top, from(#F5F6FF), to(#A3EBFF));background-image:linear-gradient(90deg, #F5F6FF 0%, #A3EBFF 100%);border-radius:4px;padding:0 24px 24px 24px;overflow:hidden}.cssgradient-card__header{position:absolute;top:20px;left:60px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.cssgradient-card__title{padding-top:4.35em;font-size:21px}.cssgradient-card__description{font-size:16px;letter-spacing:0em}.cssgradient-card__link{display:inline-block;width:100%;height:48px;line-height:48px;margin-top:1em;background:#09198A;font-size:12px;color:#fff;text-transform:uppercase;text-align:center;letter-spacing:0.2em;border-radius:4px}.cssgradient-card__link:hover{background:#1c245d}.cssgradient-card__square-1,.cssgradient-card__square-2,.cssgradient-card__square-3,.cssgradient-card__square-4{position:absolute;width:80px;height:80px;border-radius:8px}.cssgradient-card__square-1{background-image:-webkit-gradient(linear, right top, left top, from(#5400FF), to(#72C8FF));background-image:linear-gradient(-90deg, #5400FF 0%, #72C8FF 100%)}.cssgradient-card__square-2{top:30px;left:88px;background-image:-webkit-gradient(linear, left bottom, left top, from(#522DB8), to(#1C7CE0));background-image:linear-gradient(0deg, #522DB8 0%, #1C7CE0 100%)}.cssgradient-card__square-3{top:120px;left:88px;background-image:-webkit-gradient(linear, right top, left top, from(#00C9FF), to(#92FE9D));background-image:linear-gradient(-90deg, #00C9FF 0%, #92FE9D 100%)}.cssgradient-card__square-4{left:176px;background-image:-webkit-gradient(linear, left top, right top, from(#09198A), to(rgba(31,38,103,0.9)));background-image:linear-gradient(90deg, #09198A 0%, rgba(31,38,103,0.9) 100%)}:root{--color-black: #3F3844;--color-white: #FFFFFF;--color-gray--dark: #888888;--color-gray: #C3C3C3;--color-gray--border: #EAEAEA;--color-gray--background: #F7F7F7;--color-magenta: #900C3F;--color-red: #C70039;--color-orange: #FF5733;--color-yellow: #FFC300;--color-green: #5AE5B8;--color-chartreuse: #DAF7A6;--color-blue: #00BAAD;--color-purple: #581845;--color-shadow: rgba(63, 56, 68, 0.0625);--font-body: "proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;--font-mono: "Courier", Courier, monospace}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}::-moz-selection{color:var(--color-white);background:var(--color-black)}::selection{color:var(--color-white);background:var(--color-black)}::-moz-selection{color:var(--color-white);background:var(--color-black)}html,body{color:var(--color-black);font-family:var(--font-body)}@media only screen and (-webkit-max-device-pixel-ratio: 1.9979166666666668), only screen and (max-resolution: 191.8dpi){html,body{-webkit-font-smoothing:antialiased}}a{color:inherit;text-decoration:none}.body-header{position:fixed;width:100%;top:0;left:0;right:0;z-index:12;background-color:var(--color-white)}@media only screen and (min-width: 960px){.body-header{position:absolute}}@media only screen and (min-width: 960px){.menu{display:flex;align-items:center;max-width:77em;margin:0 auto}}.menu__logo{display:flex;align-items:center;height:3em;padding:0 1em;border-bottom:1px solid var(--color-gray--border)}@media only screen and (min-width: 640px){.menu__logo{padding:0 2em}}@media only screen and (min-width: 960px){.menu__logo{justify-content:flex-start;display:inline-block;height:initial;margin:1em 1em 1em 2em;padding:0;border-bottom:none}}@media only screen and (min-width: 1280px){.menu__logo{margin:1em 2em}}.menu__icon{width:1.5em;height:1.5em}@media only screen and (min-width: 960px){.menu__icon{width:initial;height:initial}}.menu__icon .logo{display:none}@media only screen and (min-width: 960px){.menu__icon .logo{display:block}}.menu__icon .deg-hidden{background-color:var(--color-white)}.menu__icon svg{width:1.5em;height:1.5em}@media only screen and (min-width: 960px){.menu__icon svg{display:none}}.menu__title{margin-left:1em;font-size:1.125rem;font-weight:700;line-height:1;letter-spacing:0.025em}@media only screen and (min-width: 960px){.menu__title{display:none}}.menu__list{display:flex;align-items:center;justify-content:space-between;height:2em;padding:0 1em}@media only screen and (min-width: 640px){.menu__list{padding:0 2em}}@media only screen and (min-width: 960px){.menu__list{justify-content:flex-start;height:initial;padding:0}}.menu__item{position:relative;display:flex;flex-direction:column;align-items:center}@media only screen and (min-width: 1280px){.menu__item{margin:0 1em}}.menu__item:nth-child(6),.menu__item:nth-child(7){display:none}@media only screen and (min-width: 640px){.menu__item:nth-child(6),.menu__item:nth-child(7){display:list-item}}@media only screen and (min-width: 1280px){.menu__item--new{margin:0 0 0 1em}}.menu__item--new .menu__link:after{content:"New";display:none;vertical-align:top;margin-top:-0.125rem;padding:0.125rem 0.25rem;border-radius:0.25rem;color:var(--color-white);background-color:var(--color-orange);font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}@media only screen and (min-width: 960px){.menu__item--new .menu__link:after{display:inline-block}}.menu__link{padding:0.375rem 0;font-size:0.75rem;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:0.025em;-webkit-transition:color 240ms ease-in-out;transition:color 240ms ease-in-out}@media only screen and (min-width: 960px){.menu__link{padding:0.9375rem 1rem;font-size:1.125rem;text-transform:none}}.menu__item:hover .menu__link{color:var(--color-orange)}.menu__link-title{display:inline-block;vertical-align:middle}.menu__link-caret{display:none}@media only screen and (min-width: 960px){.menu__link-caret{display:inline-block;vertical-align:top;margin-left:0.25rem}}.menu__link-caret svg{fill:var(--color-gray);-webkit-transition:-webkit-transform 160ms ease-out;transition:-webkit-transform 160ms ease-out;transition:transform 160ms ease-out;transition:transform 160ms ease-out, -webkit-transform 160ms ease-out}.menu__item:hover .menu__link-caret svg{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 160ms ease-in;transition:-webkit-transform 160ms ease-in;transition:transform 160ms ease-in;transition:transform 160ms ease-in, -webkit-transform 160ms ease-in}.menu__credit{display:none;margin-left:auto;margin-right:2em;font-size:1.125rem;font-weight:700;line-height:1;letter-spacing:0.025em}@media only screen and (min-width: 960px){.menu__credit{display:block}}.menu__credit:before{content:"by";display:inline-block;margin-right:0.375em}.menu-dropdown{display:none;position:absolute;visibility:hidden;opacity:0;left:-0.5em;margin-top:48px;padding-top:16px;white-space:nowrap;-webkit-transform:translateY(1em);transform:translateY(1em);-webkit-transition:opacity 160ms ease-in, -webkit-transform 160ms ease-in;transition:opacity 160ms ease-in, -webkit-transform 160ms ease-in;transition:opacity 160ms ease-in, transform 160ms ease-in;transition:opacity 160ms ease-in, transform 160ms ease-in, -webkit-transform 160ms ease-in}@media only screen and (min-width: 960px){.menu-dropdown{display:block}}@media only screen and (min-width: 960px){.menu__item:hover .menu-dropdown{visibility:visible;opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 160ms ease-out, -webkit-transform 160ms ease-out;transition:opacity 160ms ease-out, -webkit-transform 160ms ease-out;transition:opacity 160ms ease-out, transform 160ms ease-out;transition:opacity 160ms ease-out, transform 160ms ease-out, -webkit-transform 160ms ease-out}}.menu-dropdown__list{padding:0.75em 0;border-radius:0.25em;background-color:var(--color-white)}.menu-dropdown__item{padding:0.75em 1.5em}.menu-dropdown__item:first-child{border-right:1px solid var(--color-gray--border)}.menu-dropdown__link{display:block;font-size:1.125rem;font-weight:700;line-height:1;-webkit-transition:color 160ms ease-out;transition:color 160ms ease-out}.menu-dropdown__link:hover{color:var(--color-orange);-webkit-transition:color 160ms ease-in;transition:color 160ms ease-in}.menu__button{position:relative;width:1.5em;height:1.5em;margin:-0.25em -0.125em;margin-left:auto;padding:0;border:none;background-color:transparent;line-height:1}@media only screen and (min-width: 960px){.menu__button{display:none}}.menu__button:focus{outline:none}.menu__button:before,.menu__button:after{content:"";position:absolute;pointer-events:none;display:block;width:100%;height:0.125em;padding:0;border-radius:1px;background-color:var(--color-gray);-webkit-transition:all 400ms ease-in-out;transition:all 400ms ease-in-out}.menu__button:before{top:0.375em;max-width:0.9375em;margin:0 0.125em 0 0.4375em}.menu__button:after{top:1em;max-width:0.625em;margin:0 0.125em 0 0.75em}.menu-is-open .menu__button:before{max-width:1em;-webkit-transform:translate3d(0, 0.25em, 0) rotate(45deg);transform:translate3d(0, 0.25em, 0) rotate(45deg)}.menu-is-open .menu__button:after{max-width:1em;-webkit-transform:translate3d(-0.3125em, -0.375em, 0) rotate(-45deg);transform:translate3d(-0.3125em, -0.375em, 0) rotate(-45deg)}.menu__button-line{display:block;width:1.25em;height:0.125em;margin:0 0.125em;border-radius:1px;background-color:var(--color-gray);pointer-events:none;-webkit-transition:opacity 320ms;transition:opacity 320ms}.menu-is-open .menu__button-line{opacity:0}.menu-mobile{pointer-events:none;visibility:hidden;overflow:scroll;opacity:0;max-height:0;background-color:var(--color-white);-webkit-overflow-scrolling:touch}.menu-is-open .menu-mobile{pointer-events:auto;visibility:visible;max-height:none;opacity:1;z-index:10;-webkit-transition:opacity 320ms;transition:opacity 320ms;border-top:1px solid var(--color-gray--border);-webkit-box-shadow:0 0.5em 0.5em var(--color-shadow);box-shadow:0 0.5em 0.5em var(--color-shadow)}.menu-mobile__list{margin:1.5em 1em 1.75em}@media only screen and (min-width: 640px){.menu-mobile__list{width:calc(50% - 2em);margin:1.5em 0 1.75em 2em}}.menu-mobile__item{position:relative;display:flex;align-items:flex-start;margin:1.25rem 0}.menu-mobile__item--new:after{content:"New";margin-left:0.375rem;padding:0.0625rem 0.25rem;border-radius:0.25rem;color:var(--color-white);background-color:var(--color-orange);font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}.menu-mobile__link{display:flex;align-items:center;font-size:2rem;font-weight:700;line-height:1;text-decoration:underline;-webkit-text-decoration-color:var(--color-gray--border);text-decoration-color:var(--color-gray--border)}.menu-mobile__link--secondary{display:inline-block;color:var(--color-gray);font-size:1rem;text-decoration:none}.menu-mobile__icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-right:1rem}.menu-mobile__icon svg{fill:var(--color-gray)}.menu-mobile__grid{position:absolute;top:-0.5em;right:0;width:6.75em;padding-left:1em;border-left:1px solid var(--color-gray--border)}.menu-mobile__grid--names{top:-2em}.menu-mobile__grid:before{content:"";position:absolute;display:block;width:calc(100vw - 308px);height:1px;top:1.5em;right:6.75em;background-color:var(--color-gray--border)}@media only screen and (min-width: 640px){.menu-mobile__grid:before{width:calc(50vw - 308px)}}.menu-mobile__grid--names:before{width:calc(100vw - 292px);top:3em}@media only screen and (min-width: 640px){.menu-mobile__grid--names:before{width:calc(50vw - 292px)}}.menu-mobile__footer{padding:1em;line-height:1;border-top:1px solid var(--color-gray--border)}@media only screen and (min-width: 640px){.menu-mobile__footer{padding:1em 2em}}.menu-mobile__credit,.menu-mobile__contact{display:inline-block;font-size:0.875rem;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:0.05em;text-decoration:underline;-webkit-text-decoration-color:var(--color-gray--border);text-decoration-color:var(--color-gray--border)}.menu-mobile__credit:before,.menu-mobile__contact:before{display:inline-block;margin-right:0.25rem}.menu-mobile__credit:before{content:"By"}.menu-mobile__contact:before{content:"•"}.article-header__title{margin:0 0 0.75rem;font-size:2.625rem}@media only screen and (min-width: 960px){.article-header__title{margin:0 0 1.25rem;font-size:3.4375rem}}.article-header__description{margin:0 !important}.color-hero{width:100%;height:160px}@media only screen and (min-width: 960px){.color-hero{height:288px;max-height:288px;padding-bottom:0}}article:not(.color-charts) .color-group{border-bottom:1px solid var(--color-gray--border)}@media only screen and (min-width: 960px){article:not(.color-charts) .color-group{border:1px solid var(--color-gray--border);border-radius:0.25em}}article:not(.color-charts) .color-group__title{margin:0;padding:1rem 1rem 1.25rem;font-size:1.6875rem;line-height:1.33333}@media only screen and (min-width: 640px){article:not(.color-charts) .color-group__title{padding:2rem 1.5rem 1rem;font-size:2.125rem;line-height:1.125}}.color-swatch__media{height:0;padding-bottom:56.25%;border-top-left-radius:0.25em;border-top-right-radius:0.25em}.color-swatch__image{display:block;width:100%;border:none;border-top-left-radius:0.25em;border-top-right-radius:0.25em}.color-swatch__codes{border-width:0 1px 1px 1px;border-style:solid;border-color:var(--color-gray--border);border-bottom-left-radius:0.25em;border-bottom-right-radius:0.25em}.color-swatch__title{margin:0;padding:1.25rem 1rem 0.5rem;font-size:1.6875rem;line-height:1.125}@media only screen and (min-width: 640px){.color-swatch__title{padding:2rem 1.5rem 1rem;font-size:2.125rem}}.color-swatch__codes .color-table .color-table__row{border-width:1px 0 0 0}.color-swatch__codes .color-table .color-table__head .color-table__row{border-width:0}@media only screen and (min-width: 640px){.color-swatch__codes .color-table .color-table__cell{width:33.33333%}}.color-table{width:100%;border-collapse:collapse}@media only screen and (min-width: 960px){.color-table__head .color-table__row{border-width:0}}.color-table__head .color-table__cell{height:2.5rem;color:var(--color-gray);font-size:0.75rem;text-align:left;text-transform:uppercase;letter-spacing:0.075em}@media only screen and (min-width: 640px){.color-table__head .color-table__cell{height:3rem;font-size:0.875rem}}.color-table__row{width:100%;border-width:1px 0 0 0;border-style:solid;border-color:var(--color-gray--border)}.color-table__cell{height:4rem;padding:0 1rem;font-size:0.875rem;font-weight:700;line-height:1.25}@media only screen and (min-width: 640px){.color-table__cell{height:4.5rem;padding:0 1.5rem;font-size:1rem}}.color-group--narrow .color-table__cell{padding:0 0.5rem}@media only screen and (min-width: 640px){.color-group--narrow .color-table__cell{padding:0 1.5rem}}.color-table__cell--color{padding-right:0}@media only screen and (min-width: 640px){.color-table__cell--color{width:3.375rem}}.color-group--narrow .color-table__cell--color{padding-left:1rem;padding-right:0.25em}@media only screen and (min-width: 640px){.color-group--narrow .color-table__cell--color{padding-left:1.5rem;padding-right:0}}.color-table__cell--name{padding-left:0.75rem}@media only screen and (min-width: 640px){.color-table__cell--name{padding-left:1.5rem}}.color-table__cell--hex{text-transform:none;letter-spacing:0}@media only screen and (min-width: 640px){.color-table__cell--hex{width:11.25rem}}.color-table__cell--rgb{text-transform:none;letter-spacing:0}@media only screen and (min-width: 640px){.color-table__cell--rgb{width:15rem}}.color-table__color{width:2.5rem;height:1.5rem;border-radius:0.1875rem}@media only screen and (min-width: 640px){.color-table__color{cursor:pointer;width:3.125rem;height:1.75rem;border-radius:0.25rem}}.color-table__color[data-hex="#FFFFFF"]{border:1px solid var(--color-gray--border)}article.color-names .color-table__row:first-child{border-top:none}.converter-inputs{border:1px solid var(--color-gray--border);border-radius:0.25em}.converter-options{border-bottom:1px solid var(--color-gray--border)}@media only screen and (min-width: 640px){.converter-options{padding-bottom:1.5em}}.converter-fields__title{padding:1.25rem 1rem;font-size:1.6875rem;line-height:1.125}@media only screen and (min-width: 640px){.converter-fields__title{padding:2rem 1.5rem;font-size:2.125rem}}@media only screen and (min-width: 640px){.converter-fields__group{display:flex;padding:0 0.75em}}.converter-field{display:flex;align-items:center;flex:1 0 auto;margin:0 1em 1em}@media only screen and (min-width: 640px){.converter-field{margin:0 0.75em}}.converter-field__label{display:inline-flex;margin-right:0.75rem;font-size:1rem;font-weight:700}@media only screen and (min-width: 640px){.converter-field__label{margin-right:0.75rem;font-size:1rem}}.converter-field__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1 0 auto;height:2.5rem;margin:0;padding:0 0 0 0.75rem;font-size:1rem;font-weight:700;border:1px solid var(--color-gray--border);border-radius:0.25rem;-webkit-box-shadow:none;box-shadow:none}@media only screen and (min-width: 640px){.converter-field__input{height:2.5rem;max-width:12rem;font-size:0.875rem}}.converter-actions{display:flex;padding:1em}@media only screen and (min-width: 640px){.converter-actions{padding:1.5em}}.converter-actions__button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-gray);height:2.5rem;margin:0 0.75rem 0 0;padding:0 1.5rem;font-size:0.875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.075em;border:1px solid var(--color-gray--border);border-radius:0.25rem;background-color:transparent;-webkit-transition:all 160ms ease-out;transition:all 160ms ease-out}@media only screen and (min-width: 640px){.converter-actions__button{height:2.5rem}}@media only screen and (min-width: 1280px){.converter-actions__button:hover{color:var(--color-black);border-color:var(--color-black);-webkit-transition:all 160ms ease-in;transition:all 160ms ease-in}}.converter-actions__button--primary{color:var(--color-white);border-color:var(--color-orange);background-color:var(--color-orange)}@media only screen and (min-width: 1280px){.converter-actions__button--primary:hover{color:var(--color-white);border-color:var(--color-purple);background-color:var(--color-purple);-webkit-transition:all 160ms ease-in;transition:all 160ms ease-in}}.converter-actions__button--primary:disabled,.converter-actions__button--primary[disabled],.converter-actions__button--primary.is-disabled{cursor:not-allowed;border-color:var(--color-gray--border);background-color:var(--color-gray--border)}.converter-output{margin-top:1.5em}@media only screen and (min-width: 640px){.converter-output{margin-top:3em}}.converter-output .color-swatch__codes{border-width:1px;border-radius:0.25em}body{background-color:#f7f7f7}@-webkit-keyframes bodyFade{0%{background-color:#eeeeee}75%{background-color:#eeeeee}100%{background-color:#f7f7f7}}@-moz-keyframes bodyFade{0%{background-color:#eeeeee}75%{background-color:#eeeeee}100%{background-color:#f7f7f7}}@-o-keyframes bodyFade{0%{background-color:#eeeeee}75%{background-color:#eeeeee}100%{background-color:#f7f7f7}}@keyframes bodyFade{0%{background-color:#eeeeee}75%{background-color:#eeeeee}100%{background-color:#f7f7f7}}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row{width:100%;max-width:75em;margin:0 auto}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}