/*! 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"] {
    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: transparent
}

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);
    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;
    line-height: 1.618;
}

h1 {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    font-size: 60px;
    font-size: 3.75rem
}

h2 {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.025em;
    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;
    letter-spacing: 0.025em;
    font-size: 22px;
    font-size: 1.375rem
}

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 {
        letter-spacing: 0.025em;
        font-size: 36px;
        font-size: 2.25rem
    }
    h2 {
        font-size: 27px;
        font-size: 1.6875rem
    }
    p {
        font-size: 16px;
        font-size: 1rem
    }
}

.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% {
        transform: translateY(-100%)
    }
    100% {
        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% {
        transform: translateY(0)
    }
    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;
    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% {
        transform: rotate(45deg)
    }
    70% {
        transform: rotate(225deg)
    }
    100% {
        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% {
        transform: rotate(-45deg)
    }
    30% {
        transform: rotate(45deg)
    }
    100% {
        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% {
        transform: rotate(-45deg)
    }
    70% {
        transform: rotate(112.5deg)
    }
    100% {
        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% {
        transform: rotate(-45deg)
    }
    70% {
        transform: rotate(180deg)
    }
    100% {
        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% {
        transform: rotate(-45deg)
    }
    70% {
        transform: rotate(247.5deg)
    }
    100% {
        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% {
        transform: rotate(-45deg)
    }
    70% {
        transform: rotate(320deg)
    }
    100% {
        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;
    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% {
        transform: rotate(90deg)
    }
    60% {
        transform: rotate(-135deg)
    }
    100% {
        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;
    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% {
        transform: rotate(45deg)
    }
    60% {
        transform: rotate(225deg)
    }
    100% {
        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;
        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-left: 0.75em
    }
    #nav ul li.color-codes span {
        margin-left: 1.25em
    }
    #nav ul li.color-codes span #htmlcolorcodes {
        width: 27px;
        height: 27px
    }
    #nav ul li.color-tutorials h3 span {
        margin-left: 0.55em
    }
    #nav ul li.color-border span {
        display: block;
        float: right;
        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;
        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: right;
        margin-right: 2.5em;
        margin-left: 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: 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: right;
        margin-left: 0.5em
    }
    #nav ul li.color-codes,
    #nav ul li.color-shop {
        margin-left: 0
    }
    #nav ul li.credit {
        margin-left: -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-left: 1.5em
    }
    #nav ul li.color-codes,
    #nav ul li.color-shop {
        margin-left: 0
    }
    #nav ul li.credit {
        margin-left: 0.5em
    }
}

@media only screen and (min-width: 75em) {
    #nav ul li {
        margin-left: 3.375em
    }
    #nav ul li.color-codes,
    #nav ul li.color-shop {
        margin-left: 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% {
        transform: translate3d(0, -100%, 0)
    }
    100% {
        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-style: normal;
    font-weight: 700;
    color: #c3c3c3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px;
    font-size: 0.875rem
}

#header p {
    font-weight: 700;
    font-size: 36px;
    font-size: 2.25rem
}

@-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: 7.75em 0 5.25em;
    -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: right
}

#header .header-group .header-content aside {
    position: relative;
    width: 348px;
    padding: 0 1.5em;
    float: right
}

#header .header-group .header-group__social {
    position: relative;
    float: right;
    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: right
}

@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.414;
    font-size: 32px;
    font-size: 2rem
}

#header .header-group .header-group__aside {
    position: relative;
    padding: 0 1.5em;
    width: 348px;
    max-height: 250px;
    float: right;
    z-index: 10
}

#header .home-group {
    position: relative;
    padding: 0.75em 0 6em;
    z-index: 1;
    -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: 1.5em 0 5.5em
    }
}

#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 {
    line-height: 1.414;
    font-size: 32px;
    font-size: 2rem
}

#header .home-group .home-group__aside {
    position: relative;
    padding: 0 1.5em;
    width: 348px;
    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% {
        transform: translateY(1200px)
    }
    20% {
        transform: translateY(80px)
    }
    100% {
        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
    }
    #header .header-group {
        padding: 3.5em 0 3em
    }
}

@media only screen and (min-width: 40.063em) and (max-width: 48em) {
    #header .header-group {
        padding: 4.5em 0
    }
}

@media only screen and (max-width: 48em) {
    #header {
        padding: 3em 0 0 0
    }
    #header .header-group .header-content {
        width: 100%;
        margin: 0
    }
    #header .header-group .header-content aside {
        display: none
    }
    #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% {
        transform: translate3d(0, 1200px, 0)
    }
    20% {
        transform: translate3d(0, 120px, 0)
    }
    100% {
        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>article {
    position: relative;
    padding: 3em 1.5em 0;
}

#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.color-names h2 {
    padding-top: 1.5em
}

#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 {
    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
}

@keyframes itemFade {
    0% {
        opacity: 0
    }
    70% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes itemASlide {
    0% {
        transform: translate3d(0, 1200px, 0)
    }
    5% {
        transform: translate3d(0, 120px, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes itemBSlide {
    0% {
        transform: translate3d(0, 1200px, 0)
    }
    10% {
        transform: translate3d(0, 180px, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes itemCSlide {
    0% {
        transform: translate3d(0, 1200px, 0)
    }
    15% {
        transform: translate3d(0, 240px, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes itemDSlide {
    0% {
        transform: translate3d(0, 1200px, 0)
    }
    20% {
        transform: translate3d(0, 300px, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes itemESlide {
    0% {
        transform: translate3d(0, 1200px, 0)
    }
    25% {
        transform: translate3d(0, 360px, 0)
    }
    100% {
        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 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-tutorials 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-resources 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.color-names,
    #main>article.fixed.color-names {
        padding-bottom: 3em
    }
    #main>article.resource,
    #main>article.tutorial {
        padding: 1.5em 1.5em 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 1.5em 0
    }
}

@media only screen and (max-width: 48em) {
    #main {
        padding: 0;
        margin: 0
    }
    #main>article {
        width: 100%;
        margin: 0;
        padding: 1.5em 1.5em 0
    }
    #main>article.fixed {
        padding: 6.375em 1.5em 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% - 208px)
    }
    #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;
    box-shadow: 0 0 1em rgba(136, 136, 136, 0.5);
    border-radius: 0.25em;
    z-index: 100;
    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
    }
}

@keyframes alertSlideUp {
    0% {
        transform: translate3d(0, 2em, 0);
        opacity: 0
    }
    75% {
        transform: translate3d(0, 2em, 0);
        opacity: 0
    }
    100% {
        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;
    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;
    transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1)
}

.body-alert__button:hover {
    background-color: #3f3844
}

#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.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 nav ul li 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
}

#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 header h5,
#footer section h5 {
    margin-bottom: 0.75em
}

#footer header {
    padding-top: 3em
}

#footer header aside.social {
    width: 8%;
    margin: 0 0 -2.25em;
    padding: 0 1.5em;
    float: left
}

#footer header aside.social a {
    display: block;
    margin-bottom: 0.75em
}

#footer header aside.social a .button-svg {
    width: 27px
}

#footer header div.credits {
    position: relative;
    width: 61.33333%;
    padding: 0 1.5em;
    float: left
}

#footer header div.contact,
#footer header div.profiles {
    position: relative;
    width: 15.33333%;
    padding: 0 1.5em;
    float: left
}

#footer section {
    padding-bottom: 3em
}

#footer section div.about {
    position: relative;
    width: 61.33333%;
    margin-left: 8%;
    padding: 0 1.5em;
    float: left
}

#footer section div.partners,
#footer section div.colophon {
    position: relative;
    width: 15.33333%;
    padding: 0 1.5em;
    float: left
}

#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 header div.credits {
        width: 100%;
        margin-bottom: 3em
    }
    #footer header div.contact,
    #footer header div.profiles {
        width: 50%;
        margin-bottom: 1.5em
    }
    #footer header div.contact h4,
    #footer header div.profiles h4 {
        margin-bottom: 0.75em
    }
    #footer section div.about {
        width: 100%;
        margin: 0
    }
}

@media only screen and (min-width: 40.063em) and (max-width: 48em) {
    #footer header div.credits {
        width: 50%;
        margin-bottom: 3em
    }
    #footer header div.contact,
    #footer header div.profiles {
        width: 25%;
        margin-bottom: 1.5em
    }
    #footer header div.contact h4,
    #footer header div.profiles h4 {
        margin-bottom: 0.75em
    }
    #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.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;
    margin-bottom: 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: 1.625em
}

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-family: "proxima-nova-soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.0375em;
    line-height: 1.618;
    text-transform: uppercase;
    color: #3f3844;
    font-size: 18px;
    font-size: 1.125rem
}

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: 80%;
        margin: 0
    }
    nav.color-nav div.color-palette {
        width: 100%;
        margin-top: 3em;
        padding-bottom: 2.25em
    }
    nav.color-nav div.mobile-palette {
        width: 20%
    }
    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: 76%;
        margin: 0
    }
    nav.color-nav div.color-palette {
        width: 100%;
        margin-top: 3em;
        padding-bottom: 2.25em
    }
    nav.color-nav div.mobile-palette {
        width: 24%
    }
}

@media only screen and (max-width: 48em) {
    nav.color-nav,
    nav.static-nav {
        top: 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);
        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)
    }
    nav.color-nav div.mobile-palette,
    nav.static-nav div.mobile-palette {
        padding-right: 1.5em;
        float: left;
        cursor: pointer
    }
    nav.color-nav div.mobile-palette>div,
    nav.static-nav div.mobile-palette>div {
        width: calc(100% / 6);
        height: 27px;
        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("/assets/images/button-unlock-9b2e5485.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("/assets/images/button-lock-39f7f620.svg")
    }
    nav.color-nav.fixed {
        top: 59px
    }
    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("/assets/images/button-unlock-9b2e5485.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("/assets/images/button-unlock-9b2e5485.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("/assets/images/button-lock-39f7f620.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("/assets/images/button-lock-39f7f620.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;
    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);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), z-index 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);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), z-index 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);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), z-index 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);
    transition: 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);
    transition: 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);
    transition: 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: 6;
    -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: 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
}

.modal-active #modal {
    position: fixed;
    top: 0;
    z-index: 6;
    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;
    text-align: right;
}

.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-nova-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: #4e4e4e;
    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, #fff 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fff), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%)
}

.colorPicker .twod .bg2 {
    z-index: 1;
    background: -moz-linear-gradient(top, transparent 0%, #000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, #000));
    background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
    background: -o-linear-gradient(top, transparent 0%, #000 100%);
    background: linear-gradient(to bottom, transparent 0%, #000 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: 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-nova-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.1875em 0.75em 0.125em;
    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
}

.color-group {
    width: 5%;
    float: left;
    display: block
}

.color-block {
    float: left;
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%
}

.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) {
    .color-group {
        width: 5%;
        float: left;
        display: block
    }
    .color-block {
        float: left;
        display: block;
        position: relative;
        width: 100%;
        padding-bottom: 100%
    }
    .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: -1.5em;
    margin-left: -1.5em
}

#names>section#how-to {
    margin-right: 0;
    margin-left: 0
}

table {
    width: 100%
}

table tr {
    width: 100%;
    padding: 0 1.5em;
    display: block;
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    background-color: white
}

table tr.head {
    padding: 0.75em 1.5em
}

table tr th.color-swatch,
table tr td.color-swatch {
    width: 50px;
    height: 72px
}

table tr th.color-swatch div,
table tr td.color-swatch div {
    cursor: pointer;
    width: 50px;
    height: 27px;
    border-radius: 3px
}

table>tbody tr:nth-child(1) {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px
}

table>tbody tr:nth-last-child(1) {
    border-bottom: 1px solid #eaeaea;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px
}

table tr th,
table tr td {
    font-family: "proxima-nova-soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif;
    line-height: 1.618;
    font-style: normal;
    font-weight: 700;
    color: #3f3844;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px;
    font-size: 0.875rem
}

table tr th.color-name {
    text-align: left;
    width: 230px;
    padding-left: 1.25em
}

table tr td.color-name {
    width: 240px;
    padding-left: 1.5em
}

table tr th.color-hex {
    text-align: left;
    width: 180px;
    padding-left: 1.5em
}

table tr td.color-hex {
    width: 180px;
    padding-left: 1.5em
}

table tr th.color-rgb {
    text-align: left;
    width: 240px;
    padding-left: 1.5em
}

table tr td.color-rgb {
    width: 240px;
    padding-left: 1.5em
}

@media only screen and (max-width: 40em) {
    table tr td.color-hex,
    table tr td.color-rgb {
        display: none
    }
}

@media only screen and (max-width: 48em) {
    article#names>section {
        margin: 0
    }
    article#names>section:nth-last-child(1) {
        margin-top: 3em
    }
    table tr {
        width: 100%;
        padding: 0;
        display: block;
        border-right: none;
        border-left: none;
        border-top: none;
        border-bottom: 1px solid #eaeaea
    }
    table tr.head {
        padding: 0.75em 0
    }
}

@media only screen and (max-width: 64em) {
    table tr th.color-hex,
    table tr td.color-hex {
        width: 120px
    }
    table tr th.color-rgb,
    table tr td.color-rgb {
        width: 180px
    }
}

.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 (max-width: 48em) {
    .tutorials section>p {
        margin-bottom: 1em
    }
    .tutorials section>div {
        margin: 0.75em 0
    }
}

.resource div,
.resources div {
    margin-bottom: 2.25em
}

.resource figure .image,
.resources figure .image {
    border-radius: 3px
}

.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 (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-nova-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-nova-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 {
    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% {
        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)
    }
}

@-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% {
        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)
    }
}

.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-nova-soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif
}

.affiliate-list__item-link {
    display: block;
    margin-top: 6px;
    font-weight: 700;
    font-family: "proxima-nova-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% {
        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)
    }
}

@-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% {
        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)
    }
}

.cssgradient-card {
    position: relative;
    height: 250px;
    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;
    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: linear-gradient(-90deg, #5400FF 0%, #72C8FF 100%)
}

.cssgradient-card__square-2 {
    top: 30px;
    left: 88px;
    background-image: linear-gradient(0deg, #522DB8 0%, #1C7CE0 100%)
}

.cssgradient-card__square-3 {
    top: 120px;
    left: 88px;
    background-image: linear-gradient(-90deg, #00C9FF 0%, #92FE9D 100%)
}

.cssgradient-card__square-4 {
    left: 176px;
    background-image: linear-gradient(90deg, #09198A 0%, rgba(31, 38, 103, 0.9) 100%)
}

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
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/eot/iranyekanwebbold.eot);
    src: url('../fonts/eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/iranyekanwebbold.woff2) format('woff2'), url(../fonts/woff/iranyekanwebbold.woff) format('woff'), url(../fonts/ttf/iranyekanwebbold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/eot/iranyekanweblight.eot);
    src: url('../fonts/eot/iranyekanweblight.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/iranyekanweblight.woff2) format('woff2'), url(../fonts/woff/iranyekanweblight.woff) format('woff'), url(../fonts/ttf/iranyekanweblight.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/eot/iranyekanwebregular.eot);
    src: url('../fonts/eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/iranyekanwebregular.woff2) format('woff2'), url(../fonts/woff/iranyekanwebregular.woff) format('woff'), url(../fonts/ttf/iranyekanwebregular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: iranyekandigits;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/eot/iranyekanwebregular.eot);
    src: url('../fonts/eot/iranyekandigits.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/iranyekandigits.woff2) format('woff2'), url(../fonts/woff/iranyekandigits.woff) format('woff'), url(../fonts/ttf/iranyekandigits.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/eot/robotobold.eot);
    src: url('../fonts/eot/robotobold.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/robotobold.woff2) format('woff2'), url(../fonts/woff/robotobold.woff) format('woff'), url(../fonts/ttf/robotobold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/eot/robotolight.eot);
    src: url('../fonts/eot/robotolight.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/robotolight.woff2) format('woff2'), url(../fonts/woff/robotolight.woff) format('woff'), url(../fonts/ttf/robotolight.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/eot/robotoregular.eot);
    src: url('../fonts/eot/robotoregular.eot?#iefix') format('embedded-opentype'), url(../fonts/woff2/robotoregular.woff2) format('woff2'), url(../fonts/woff/robotoregular.woff) format('woff'), url(../fonts/ttf/robotoregular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'fa-iconlist';
    src: url('../fonts/woff/fa-iconlist.woff') format('woff'), url('../fonts/ttf/fa-iconlist.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.popover,
.tooltip {
    font-family: IRANYekan;
}

body {
    font-family: iranyekan, roboto, Arial;
    font-weight: 500;
    font-style: inherit;
    /*-webkit-font-smoothing: subpixel-antialiased;*/
    -webkit-font-smoothing: antialiased;
    transition: all ease-in-out 0.2s;
}

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

.roboto {
    font-family: roboto;
}

ul {}

.num {
    font-family: iranyekandigits, roboto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: iranyekan;
    font-weight: 700;
}

.text-right {
    text-align: right;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}