html {
    height:100%;
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(45, 41, 39, 0);
}

@-ms-viewport {
    width: device-width;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

body {
    height:100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

[tabindex="-1"]:focus {
    outline: 0 !important;
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0;
}

dt {
    font-weight: 700;
}

dd {
    margin-bottom: .5rem;
    margin-left: 0;
}

blockquote {
    margin: 0 0 1rem;
}

dfn {
    font-style: italic;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

a {
    color: #7E352C;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a:hover {
    color: #451d18;
    text-decoration: underline;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
    outline: 0;
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar;
}

figure {
    margin: 0 0 1rem;
}

img {
    vertical-align: middle;
    border-style: none;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
}

caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom;
}

th {
    text-align: inherit;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

button {
    border-radius: 0;
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

.container {
    width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-right: auto;
    margin-left: auto;
}
@media(min-width:1155px) {
    .container{
        position:absolute;
        bottom:20%;
        left:50%;
        transform:translateX(-50%);
    }
    @media(max-height:750px){
        .container {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    @media(max-height:600px) {
        .container {
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

    .container-fluid {
        width: 100%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        margin-right: auto;
        margin-left: auto;
    }

    .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -0.5rem;
        margin-left: -0.5rem;
    }

    .farbtastic {
        position: relative;
    }

        .farbtastic * {
            position: absolute;
            cursor: crosshair;
        }

        .farbtastic,
        .farbtastic .wheel {
            width: 195px;
            height: 195px;
        }

            .farbtastic .color,
            .farbtastic .overlay {
                top: 47px;
                left: 47px;
                width: 101px;
                height: 101px;
            }

            .farbtastic .wheel {
                background: url(../images/wheel.png) no-repeat;
                width: 195px;
                height: 195px;
            }

            .farbtastic .overlay {
                background: url(../images/mask.png) no-repeat;
            }

            .farbtastic .marker {
                width: 17px;
                height: 17px;
                margin: -8px 0 0 -8px;
                overflow: hidden;
                background: url(../images/marker.png) no-repeat;
            }

    .sprite {
        max-width: 100%;
    }

    .sprite {
        display: inline-block;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        height: auto;
    }

        .sprite.autosize {
            width: 100%;
        }

        .sprite:before {
            content: '';
            display: block;
        }

    .ico--blink {
        width: 48px;
        background-image: url(../images/ico--blink.png);
    }

        .ico--blink:before {
            padding-top: 81.25%;
        }

    .ico--bounce {
        width: 44px;
        background-image: url(../images/ico--bounce.png);
    }

        .ico--bounce:before {
            padding-top: 118.18181818181819%;
        }

    .ico--breathing {
        width: 50px;
        background-image: url(../images/ico--breathing.png);
    }

        .ico--breathing:before {
            padding-top: 82%;
        }

    .ico--comet {
        width: 47px;
        background-image: url(../images/ico--comet.png);
    }

        .ico--comet:before {
            padding-top: 108.51063829787233%;
        }

    .ico--cycle {
        width: 48px;
        background-image: url(../images/ico--cycle.png);
    }

        .ico--cycle:before {
            padding-top: 100%;
        }

    .ico--heartbeat {
        width: 68px;
        background-image: url(../images/ico--heartbeat.png);
    }

        .ico--heartbeat:before {
            padding-top: 75%;
        }

    .ico--rainbow {
        width: 49px;
        background-image: url(../images/ico--rainbow.png);
    }

        .ico--rainbow:before {
            padding-top: 100%;
        }

    .ico--solid {
        width: 42px;
        background-image: url(../images/ico--solid.png);
    }

        .ico--solid:before {
            padding-top: 100%;
        }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        *:before,
        *:after {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    html,
    body {
        margin: 0;
        padding: 0;
        background-color: #000;
    }

    #container {
        position: relative;
        width: 100%;
        max-width: 1024px;
        min-height: 35%;
        margin: auto;
    }

    @media(min-width:1155px) {
        #container {
            height: 40%;
            top: 20%;
        }
        @media(max-height:750px){
            #container {
                top: 15%;
            }
        }
        @media(max-height:600px) {
            #container {
                top: 10%;
            }
        }
    }

    #svg {
        position: relative;
        z-index: 2;
        mix-blend-mode: multiply;
    }

    #bg-image,
    .bg-image {
        position: absolute;
        top: 0%;
        left: 0;
        width: 100%;
        height: auto;
    }

    .jscolor {
        position: fixed;
        bottom: 4em;
        right: 4em;
        z-index: 3;
        padding: 1em;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        cursor: pointer;
    }

    .mouseEffects {
        list-style: none;
        margin: 0em 0 1em;
        position: relative;
        padding: 0;
        font-size: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        z-index: 2;
        width: 100%;
    }

        .mouseEffects li {
            margin: 0 0 0.25rem;
            width: 25%;
            position: relative;
            word-wrap: break-word;
            padding: 0;
            margin-bottom: 0.5rem;
        }

            .mouseEffects li a {
                display: block;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                color: #fff;
                font-size: 87.5%;
            }

                .mouseEffects li a.active .mouseEffects__link {
                    background-color: #310E0E;
                }

    .mouseEffects__link {
        background-color: #161616;
        padding: .5rem 0;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

        .mouseEffects__link span:before {
            content: '';
            display: block;
            position: relative;
            width: 36px;
            height: 1px;
            background-color: #fff;
            text-align: center;
            margin: auto;
            margin-bottom: 0.8rem;
            opacity: 0.3;
        }

    .mouseEffects__link__icon {
        height: 3.5em;
        width: 3.5em;
        position: relative;
        margin: auto;
    }

        .mouseEffects__link__icon svg {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 2em;
            height: 2em;
        }

            .mouseEffects__link__icon svg#colorRing {
                width: 3.2em;
                height: 3.2em;
            }

            .mouseEffects__link__icon svg#colorRandom {
                width: 1.3em;
                height: 1.3em;
            }

        .mouseEffects__link__icon + * {
            line-height: 1.2;
            margin: 0.25em;
            padding: 0.25em 0 0;
            text-align: center;
            display: block;
        }

    .button--container {
        max-width: 1200px;
    }

    @media screen and (max-width: 991.98px) {
        .button--container {
            max-width: 80%;
        }
    }

    @media screen and (min-width: 34em) {
        .mouseEffects li {
            width: 25%;
        }
    }

    @media screen and (min-width: 41.25em) {
        .mouseEffects li {
            width: 25%;
        }
    }

    @media screen and (min-width: 992px) {
        .mouseEffects li {
            -webkit-box-flex: 0;
            -ms-flex: 0;
            flex: 0;
            width: auto;
        }

            .mouseEffects li a {
                font-size: 100%;
            }
    }

    #btnColor {
        position: relative;
    }

    @media (min-width: 992px) {
        #btnColor form {
            position: relative;
        }
    }

    @media (max-width: 991.98px) {
        #btnColor {
            width: 100%;
            text-align: center;
        }

            #btnColor form {
                display: inline-block;
            }
    }

    .is-a-cycle #btnColor,
    .is-a-rainbow #btnColor {
        opacity: 0;
        visibility: hidden;
    }


    #container {
        -webkit-perspective: 1200px;
        perspective: 1200px;
    }

    .mouseEffects li:hover {
        z-index: 2;
    }

        .mouseEffects li:hover .mouseEffects__link {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            background-color: #2B2B2B;
        }

    .button--title {
        color: #7E7E7E;
        font-size: 125%;
        font-weight: 600;
    }

    @media (max-width: 991.98px) {
        .button--title {
            text-align: center;
        }
    }

    .mouseEffects a {
        display: block;
        position: relative;
        width: 120px;
        height: auto;
        background-image: url(../images/outline.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        max-width: 100%;
    }

        .mouseEffects a:after {
            display: block;
            content: "";
            padding-bottom: 108.33333%;
        }

        .mouseEffects a i {
            position: absolute;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            top: 40%;
        }

        .mouseEffects a span {
            position: absolute;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            top: 62%;
            font-size: 87.5%;
            color: #f20d00;
            /*color: #54F5FF;*/
            font-weight: 600;
        }

        .mouseEffects a:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: url(../images/btn--hover.png);
            background-position: center center;
            background-size: contain;
            opacity: 0;
            -webkit-transition: 0.35s ease;
            transition: 0.35s ease;
        }

        .mouseEffects a:hover:before,
        .mouseEffects a.active:before {
            opacity: 1;
        }

    #SVG {
        background-position: center center;
        background-size: cover;
    }

    #light {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        mix-blend-mode: soft-light;
    }

    #colorPicker {
    }

    @media (max-width: 1155px) {
        #colorPicker {
            position: relative;
            top: 20%;
        }
    }

    .reinvented-color-wheel {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    @media (max-width: 767.98px) {
        .mouseEffects a span {
            font-size: 1vw;
            -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
        }

        .mouseEffects a i {
            -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
        }
    }

    .is-a-rainbow {
        height: 100%;
    }

    #memory {
        position: absolute;
        top: 50%;
        left: 5%;
        width: 90%;
    }