html, body {
    height: 100%;
    font-size: 100%;
}

body {
    font-family: Univers, sans-serif;
    margin: 0;
}
.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
a {
    text-decoration: none;
}
img {
    border: none;
}
em {
    font-style: normal;
    color: black;
    opacity: 0.5;
}
.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background-color: black;
    color: white;
    font-family: 'Super Grotesk', sans-serif;
    letter-spacing: 0.05em;
    font-size: 1em;
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 28px;
    position: relative;
    z-index: 3;
}
a.cta {
    display: block;
    width: 120px;
    height: 50px;
    border-radius: 25px;
    line-height: 50px;
    font-size: 1.33em;
    background-position: 110px center;
    background-repeat: no-repeat;
    background-size: 19px auto;
    text-align: left;
    padding-left: 30px;
    margin: auto;
    margin-bottom: 25px;
}

/* Modifying placeholder styles: https://css-tricks.com/snippets/css/style-placeholder-text/
 */
::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.6);
}

:-moz-placeholder { /* Firefox 18- */
   color: rgba(255, 255, 255, 0.6);
}

::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(255, 255, 255, 0.6);
}

:-ms-input-placeholder {  
   color: rgba(255, 255, 255, 0.6);
}
#header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 60px;
    background-color: black;
    color: #D8D8D8;
    font-family: 'Super Grotesk', sans-serif;
    letter-spacing: 0.05em;
    font-size: 1em;
    text-transform: uppercase;
    white-space: nowrap;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}
    #header .left-curve {
        height: 60px;
        line-height: 60px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }
    #header .circle {
        position: relative;
        left: 10px;
        top: 10px;
        background-color: #D8D8D8;
        background-image: url('/public/assets/icons/bolt-grey.svg');
        float: left;
        margin-right: 18px;
        color: black;
    }
    #header > #logo {
        -webkit-flex: 0 0 80px;
        -moz-flex: 0 0 80px;
        -ms-flex: 0 0 80px;
        flex: 0 0 80px;

        height: 60px;
        line-height: 60px;
        text-align: center;
        position: relative;
        top: 9px;
    }
    #header > #kit-name-outer {
        background-color: black;
        float: left;
        position: relative;
    }
        #header > #kit-name-outer > a {
            color: #D8D8D8;
        }
            #header > #kit-name-outer #kit-name-inner {
                background-color: #4D4D4D;
                padding-right: 20px;
            }
    #header > #manual-name-outer {
        background-color: #4D4D4D;
        float: left;
    }
        #header > #manual-name-outer #manual-name-inner {
            background-color: black;
        }
        #header > #manual-name-outer #manual-name-inner > .circle {
            background-image: none;
        }
        #header > #kit-name-outer #kit-name-inner > .mobile-overflow {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    #header > #manual-buttons {
        flex: 1;
        padding: 13px;
        background-color: black;
        text-align: right;
    }
        #header > #manual-buttons .manual-button:hover {
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 15px;
        }
        #header > #manual-buttons .manual-button:active {
            background-color: white;
        }
        #header > #manual-buttons img {
            height: 30px;
            width: 30px;
        }
    #header > #helpasaurus-link {
        float: right;
        font-family: Univers, sans-serif;
        text-transform: none;
        font-size: 0.9em;
        height: 60px;
        line-height: 60px;
        padding-right: 20px;
        cursor: pointer;
    }
        #header > #helpasaurus-link > #helpasaurus-icon {
            background-color: #D8D8D8;
            background-image: url('/public/assets/icons/helpasaurus.svg');
            background-position: 3px 8px;
            width: 32px;
            height: 32px;
            position: relative;
            top: 14px;
            margin-right: 20px;
        }
#helpasaurus-gap { /* As the user hovers away from #helpasaurus-section, there's a gap to #helpasaurus-overlay. This keeps the overlay open */
    display: none;
    position: absolute;
    right: 0px;
    top: 60px;
    width: 390px;
    height: 420px;
}
#helpasaurus-overlay {
    display: none;
    position: absolute;
    right: 5px;
    top: 65px;
    border: 4px solid black;
    z-index: 12;
    padding: 10px;
    background-color: white;
    width: 350px;
}
    #helpasaurus-overlay > #emoticons {
        margin-bottom: 20px;
    }
    #helpasaurus-overlay > #emoticons > img {
        margin-top: 5px;
        width: 60px;
        height: 60px;
    }
    #helpasaurus-overlay textarea {
        margin-top: 5px;
        border: 4px solid #CCCCCC;
        width: 340px;
        height: 200px;
        font-family: Univers, sans-serif;
        font-size: 1em;
        resize: vertical;
    }
    #helpasaurus-overlay input[type="button"] {
        background-color: black;
        color: white;
        width: 70px;
        height: 30px;
        border-radius: 15px;
        border: none;
        font-size: 0.8em;
        float: right;
    }
    
    #content {
        height: calc(100% - 120px);
        margin-top: 60px;
    }
        #content img {
            width: 100%;
            height: auto;
        }

    #cover {
        height: 100%;
    }
         #cover > #left {
            float: left;
            width: 50%;
            height: 100%;
            min-height: 680px;
            text-align: center;
        }
             #cover > #left > #kit-cover {
                width: 100%;
                height: 55%;
                margin-top: 60px;
            }
                 #cover > #left > #kit-cover > .title {
                    font-size: 2.33em;
                    font-family: 'Super Grotesk', sans-serif;
                    letter-spacing: 0.05em;
                    font-weight: bold;
                    color: white;
                    text-transform: uppercase;
                    margin-bottom: 30px;
                }
                 #cover > #left > #kit-cover > #image {
                    background-size: contain;
                    background-position: center center;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 100%;
                }
                

         #cover > #right {
            float: right;
            width: 50%;
            height: 100%;
            text-align: center;
        }
             #cover > #right > #manual-cover {
                width: 90%;
                max-width: 600px;
                margin: auto;
                margin-top: 60px;
            }
                 #cover > #right > #manual-cover > .circle {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    margin-bottom: 20px;
                    font-size: 1.33em;
                }
                 #cover > #right > #manual-cover > .title {
                    font-size: 2.33em;
                    font-family: 'Super Grotesk', sans-serif;
                    letter-spacing: 0.05em;
                    font-weight: bold;
                    color: black;
                    text-transform: uppercase;
                    margin-bottom: 20px;
                }
                 #cover > #left > #manual-cover > .divider {
                    background-image: url('/public/assets/icons/squiggle.svg');
                    background-size: contain;
                    width: 95%;
                    margin-left: 2.5%;
                    height: 66px;
                    background-repeat: no-repeat;
                }
                #cover > #right > #manual-cover > .description {
                    font-size: 1.33em;
                    padding: 0 40px;
                    margin-bottom: 30px;
                }
                 #cover > #right > #manual-cover > a {
                    width: 120px;
                    background-position: 110px center;
                }
                 #cover > #right > #manual-cover > #time {
                    width: 200px;
                    height: 30px;
                    margin: auto;
                    background-position: 10px center;
                    background-repeat: no-repeat;
                    background-size: 20px 20px;
                    color: black;
                    opacity: 0.3;
                    font-size: 1.1em;
                 }

                #cover > #right > #manual-cover > #time .time-text{
                    line-height: 30px;
                }

                #cover > #right > #manual-cover > #time img{
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                    margin-top: -4px;
                    margin-right: 5px;   
                }

     #instruction {
        height: 100%;
    }
         #instruction > #left {
            float: left;
            width: 33%;
            min-height: 600px;
            height: 100%;
        }
             #instruction > #left .table {
                height: 100%;
            }
             #instruction > #left #title {
                font-family: 'Super Grotesk', sans-serif;
                letter-spacing: 0.05em;
                font-size: 1.84em;
                text-transform: uppercase;
                margin: 40px 30px 10px 30px;
            }
             #instruction > #left .divider {
                background-image: url('/public/assets/icons/squiggle-white.svg');
                height: 15px;
                margin: 0 30px 20px 30px;
                background-repeat: repeat;
            }
             #instruction > #left #text {
                font-size: 1.25em;
                margin: 10px 30px;
                margin-bottom: 50px;
            }
             #instruction > #left #tip {
                background-image: url('/public/assets/icons/led-tip.svg');
                background-size: 40px 40px;
                background-position: 0 15px;
                background-repeat: no-repeat;
                border-top: 1px solid white;
                padding: 15px 5px 15px 50px;
                border-bottom: 1px solid white;
                color: white;
                font-size: 1em;
                margin: 10px 30px;
                min-height: 40px
            }
             #instruction > #left .debug.cell {
                vertical-align: bottom;
            }
                 #instruction > #left .debug.cell > .debug-container {
                    border-top: 1px solid white;
                    margin: 0 30px;
                    height: 40px;
                }
                 #instruction > #left .debug.cell > .debug-container .debug-clickable-area {
                    height: 40px;
                    cursor: pointer;
                }
                     #instruction > #left .debug.cell > .debug-container .label {
                        padding-top: 10px;
                        color: white;
                        float: left;
                        padding-bottom: 10px;
                        padding-left: 35px;
                        background-image: url('/public/assets/icons/debug-content-help-icon.svg');
                        background-repeat: no-repeat;
                        background-size: 25px auto;
                        background-position: left center;
                    }
                     #instruction > #left .debug.cell > .debug-container .icon {
                        float: right;
                        background-size: contain;
                        background-repeat: no-repeat;
                        width: 12px;
                        height: 12px;
                        position: relative;
                        top: 7px;
                        margin-top: 7px;
                    }
                         #instruction > #left .debug.cell > .debug-container .icon.debug {
                            background-image: url('/public/assets/icons/debug-content-state-closed.svg');
                        }
                         #instruction > #left .debug.cell > .debug-container .icon.close {
                            background-image: url('/public/assets/icons/debug-content-state-open.svg');
                        }
                     #instruction > #left .debug.cell > .debug-container .debug-content {
                        clear: both;
                        padding-top: 0;
                        float: left;
                        padding-bottom: 10px;
                    }
                     #instruction > #left .debug.cell > .debug-container .debug-content ul {
                        padding-left: 30px;
                    }
                     #instruction > #left .debug.cell > .debug-container .debug-content ul li {
                        margin-bottom: 10px;
                    }
         #instruction > #right {
            float: right;
            width: 67%;
            height: 100%;
            position: relative;
        }
             #instruction > #right > .main-image {
                
                width: 100%;
                height: 100%;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
             #instruction > #right > .overlay-image {
                width: 100%;
                height: 100%;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: auto 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
     #instruction.full-screen {
        height: 100%;
        background-position: center center;
        background-size: cover;
    }
        
     #recipe {
        height: 100%;
        background-color: #F9E848;
    }
         #recipe > #title {
            font-family: 'Super Grotesk', sans-serif;
            letter-spacing: 0.05em;
            font-size: 1.84em;
            text-transform: uppercase;
            padding: 40px 30px 10px 30px;
        }
         #recipe > .divider {
            background-image: url('/public/assets/icons/squiggle.svg');
            background-size: contain;
            height: 20px;
            margin: 0 30px;
            background-repeat: no-repeat;
        }
             #recipe > .table {
                margin: 30px 0px;
                width: 100%;
            }
                 #recipe > .table > .row > #steps-left {
                    font-size: 1.25em;
                    vertical-align: top;
                    width: 400px;
                    max-width: 40%;
                    padding-left: 20px;
                    margin-left: 40px;
                    display: block;
                    float: left;
                }
                 #recipe > .table > .row > #steps-right {
                    font-size: 1.25em;
                    vertical-align: top;
                    width: 400px;
                    max-width: 40%;
                    padding-left: 20px;
                    margin-left: 40px;
                    display: block;
                    float: left;

                }
         #recipe ol > li{
            padding-bottom: 20px;
        }

    #signup {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        height: 100%;
        width: 100%;

        align-items: center;
        justify-content: center;
    }

    #signup > div {
        display: inherit;
        flex-direction: column;
        text-align: center;
    }

    #signup p {
        font-size: 20px;
        max-width: 800px;
        margin-bottom: 8px;
        color: white;
    }

    #signup p.signup-subtitle {
        font-weight: bold;
    }

    #signup .maker-quest-mast-head {
        max-width: 1000px;
        margin: 0 auto 40px auto;
        padding: 0 20px;
        text-align: center;
    }

    #signup .maker-quest-mast-head > img {
        max-width: 1000px;
        max-height: 20vh;
        margin: 0 auto;
        padding: 0;
    }

    #signup > div > #signup-before > #signup-form {
        display: inherit;
        flex-direction: inherit;
        margin: 20px auto;
        padding: 0 20px;
        text-align: center;
    }

    #signup > div > #signup-before > #signup-form > div > input {
        color: white;
        font-family: Univers, sans-serif;
    }

    #signup > div > #signup-before > #signup-form > #signup-form-email > input {
        width: 307px;
        margin: 0 auto;
    }

    #signup > div > #signup-before > #signup-form > div > input,
    #signup > div > #signup-before > #signup-form > div > input:-webkit-autofill,
    #signup > div > #signup-before > #signup-form > div > input:-webkit-autofill:hover,
    #signup > div > #signup-before > #signup-form > div > input:-webkit-autofill:focus
    {
        width: 150px;
        font-family: Univers, sans-serif;
        -webkit-text-fill-color: white;
        color: white;
    }

    #signup > div > #signup-before > #signup-form input,
    #signup > div > #signup-before > #signup-form input[type=submit] {
        color: black;
        border: 3px solid white;
        height: 40px;
        border-radius: 40px;
        margin: 10px 0;
        font-size: 20px;
        padding: 0 20px;
        outline: none;
    }

    #signup > div > #signup-before > #signup-form input[type=submit] {
        height: 46px;
        border-radius: 46px;
        border: none;
        cursor: pointer;
    }

    @-webkit-keyframes shake {
        from, to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
        }

        20%, 40%, 60%, 80% {
            -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
        }
    }

    @keyframes shake {
        from, to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
        }

        20%, 40%, 60%, 80% {
            -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
        }
    }

    #signup-form-email.shake,
    #FNAME.shake {
        -webkit-animation-name: shake;
        animation-name: shake;
    }

    #signup-form-email.animated,
    #FNAME.animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    @media (max-width: 920px) {

        #signup .maker-quest-mast-head {
            margin: 0 auto 10px auto;
        }

        #signup .maker-quest-mast-head > img {
            margin: 10px auto;
        }

        #signup p {
            font-size: 16px;
            margin: 0px;
            padding: 0 10px;
        }

        #signup > div > #signup-before > #signup-form {
            margin: 20px auto;
            padding: 0px;
        }

        #signup > div > #signup-before > #signup-form > #signup-form-email > input {
            width: 240px;
            margin: 0 auto;
        }

        #signup > div > #signup-before > #signup-form > div > input,
        #signup > div > #signup-before > #signup-form input[type=submit] {
            width: 120px;
        }

        #signup > div > #signup-before > #signup-form input,
        #signup > div > #signup-before > #signup-form input[type=submit] {
            height: 30px;
            border-radius: 30px;
            font-size: 16px;
        }

        #signup > div > #signup-before > #signup-form input[type=submit] {
            height: 36px;
            border-radius: 36px;
        }
    }

    @media (max-height: 480px) {
        #signup .maker-quest-mast-head {
            display: none
        }

        #signup > div > #signup-before > #signup-form {
            margin: 10px auto;
        }
    }

    .diy-electro-dough-kit #signup {
        background: rgb(253, 60, 31);
    }

    .diy-electro-dough-kit #signup > div > #signup-before > #signup-form input,
    .diy-electro-dough-kit #signup > div > #signup-before > #signup-form input:focus,
    .diy-electro-dough-kit #signup > div > #signup-before > #signup-form input:-webkit-autofill {
        background-color: rgb(253, 60, 31);
        -webkit-box-shadow: 0 0 0px 1000px rgb(253, 60, 31) inset;
    }

    .diy-electro-dough-kit #signup > div > #signup-before > #signup-form input {
        background-color: rgb(253, 60, 31);
    }

    .diy-electro-dough-kit #signup >  div > #signup-before > #signup-form input[type=submit] {
        background: rgb(249, 232, 72);
        color: rgb(253, 60, 31);
        -webkit-box-shadow: none;
    }

    .diy-gamer-kit #signup {
        background: #f39433;
    }

    .diy-gamer-kit #signup > div > #signup-before > #signup-form input,
    .diy-gamer-kit #signup > div > #signup-before > #signup-form input:focus,
    .diy-gamer-kit #signup > div > #signup-before > #signup-form input:-webkit-autofill {
        background-color: #f39433;
        -webkit-box-shadow: 0 0 0px 1000px #f39433 inset;
    }

    .diy-gamer-kit #signup > div > #signup-before > #signup-form input {
        background-color: #f39433;
    }

    .diy-gamer-kit #signup >  div > #signup-before > #signup-form input[type=submit] {
        color: white;
        -webkit-box-shadow: none;
        background: #0bbbef;
    }

    .diy-speaker-kit #signup {
        background: #FDC300;
    }

    .diy-speaker-kit #signup > div > #signup-before > #signup-form input,
    .diy-speaker-kit #signup > div > #signup-before > #signup-form input:focus,
    .diy-speaker-kit #signup > div > #signup-before > #signup-form input:-webkit-autofill {
        background-color: #FDC300;
        -webkit-box-shadow: 0 0 0px 1000px #FDC300 inset;
    }

    .diy-speaker-kit #signup > div > #signup-before > #signup-form input {
        background-color: #FDC300;
    }

    .diy-speaker-kit #signup >  div > #signup-before > #signup-form input[type=submit] {
        background: #A1DAF8;
        color: white;
        -webkit-box-shadow: none;
    }

    .diy-synth-kit #signup {
        background: #28C873;
    }

    .diy-synth-kit #signup > div > #signup-before > #signup-form input,
    .diy-synth-kit #signup > div > #signup-before > #signup-form input:focus,
    .diy-synth-kit #signup > div > #signup-before > #signup-form input:-webkit-autofill {
        background-color: #28C873;
        -webkit-box-shadow: 0 0 0px 1000px #28C873 inset;
    }

    .diy-synth-kit #signup > div > #signup-before > #signup-form input {
        background-color: #28C873;
    }

    .diy-synth-kit #signup >  div > #signup-before > #signup-form input[type=submit] {
        background: #F7C1C5;
        color: #28C873;
        -webkit-box-shadow: none;
    }

    .diy-thirsty-plant-kit #signup {
        background: #FF0064;
    }

    .diy-thirsty-plant-kit #signup > div > #signup-before > #signup-form input,
    .diy-thirsty-plant-kit #signup > div > #signup-before > #signup-form input:focus,
    .diy-thirsty-plant-kit #signup > div > #signup-before > #signup-form input:-webkit-autofill {
        background-color: #FF0064;
        -webkit-box-shadow: 0 0 0px 1000px #FF0064 inset;
    }

    .diy-thirsty-plant-kit #signup > div > #signup-before > #signup-form input {
        background-color: #FF0064;
    }

    .diy-thirsty-plant-kit #signup >  div > #signup-before > #signup-form input[type=submit] {
        background: #7EDEAB;
        color: white;
        -webkit-box-shadow: none;
    }

    .creative-coder-kit #signup {
        background: #A05AFF;
    }

    .creative-coder-kit #signup > div > #signup-before > #signup-form input,
    .creative-coder-kit #signup > div > #signup-before > #signup-form input:focus,
    .creative-coder-kit #signup > div > #signup-before > #signup-form input:-webkit-autofill {
        background-color: #A05AFF;
        -webkit-box-shadow: 0 0 0px 1000px #A05AFF inset;
    }

    .creative-coder-kit #signup > div > #signup-before > #signup-form input {
        background-color: #A05AFF;
    }

    .creative-coder-kit #signup >  div > #signup-before > #signup-form input[type=submit] {
        background: #FDD51D;
        color: #A05AFF;
        -webkit-box-shadow: none;
    }

    #conclusion {
        height: 100%;
        min-height: auto;
        text-align: center;
        min-height: 700px;
        color: white;
    }
             #conclusion > .table {
                height: calc(100% - 120px);
                width: 90%;
                max-width: 600px;
                margin: auto;
            }
                 #conclusion > .table > .row > .cell {
                    height: 100%;
                    vertical-align: middle;
                }
                 #conclusion > .table #main > #title {
                    padding: 20px;
                    font-size: 2.33em;
                    font-family: 'Super Grotesk', sans-serif;
                    letter-spacing: 0.05em;
                    color: white;
                    text-transform: uppercase;
                }
                 #conclusion > .table #main > .divider {
                    background-image: url('/public/assets/icons/squiggle-white.svg');
                    background-size: contain;
                    background-position: center center;
                    height: 20px;
                    margin: 0 30px;
                    background-repeat: no-repeat;
                }
                 #conclusion > .table #main > #description {
                    color: white;
                    font-size: 1.17em;
                    padding: 0 40px;
                    margin-top: 30px;
                    margin-bottom: 30px;
                }
                     #conclusion > .table #share > .title {
                        font-size: 1em;
                        font-family: 'Super Grotesk', sans-serif;
                        letter-spacing: 0.05em;
                        text-transform: uppercase;
                    }
                     #conclusion > .table #share > .divider {
                        border-top: 1px solid white;
                        width: 444px;
                        margin: auto;
                        padding-bottom: 30px;
                    }
                     #conclusion > .table #share > .icons {
                        width: 240px;
                        margin: 20px auto 100px auto;
                    }
                         #conclusion > .table #share > .icons > .icon {
                            width: 50px;
                            height: 50px;
                            background-size: cover;
                            background-position: center center;
                            float: left;
                            margin: 5px;
                        }
                         #conclusion > .table #share > .icons > .facebook {
                            background-image: url('/public/assets/images/manuals/share-facebook.png');
                        }
                         #conclusion > .table #share > .icons > .twitter {
                            background-image: url('/public/assets/images/manuals/share-twitter.png');
                        }
                         #conclusion > .table #share > .icons > .instagram {
                            background-image: url('/public/assets/images/manuals/share-instagram.png');
                        }
                         #conclusion > .table #share > .icons > .youtube {
                            background-image: url('/public/assets/images/manuals/share-youtube.png');
                        }
                     #conclusion > .table #share > .hashtag {
                        clear: both;
                        margin: 30px;
                        font-family: Univers, sans-serif;
                    }
             #conclusion a.cta {
                width: 150px;
                background-position: 140px center;
            }
             #conclusion > a.cta {
                width: 150px;
                background-position: 140px center;
            }
             #conclusion > a.cta.with-suggestions {
                width: 200px;
                background-position: 190px center;
            }
     #components {
        height: calc(100% - 120px);
    }
         #components > #missing-components-link {
            position: absolute;
            right: 0;
            top: 0;           
            padding: 50px 30px 10px 30px;
        }
          
         #components > #missing-components-link > a {
            color: black;
            font-weight: bold;
            text-decoration: underline;
        }
         #components > #title {
            font-family: 'Super Grotesk', sans-serif;
            letter-spacing: 0.05em;
            font-size: 1.84em;
            text-transform: uppercase;
            padding: 40px 30px 10px 30px;
        }
         #components > .divider {
            background-image: url('/public/assets/icons/squiggle.svg');
            background-size: contain;
            height: 20px;
            margin: 0 30px;
            background-repeat: no-repeat;
        }
        
        #components > #components-grid {
            margin: 4em 0 4em 0;
        }

        #components > #components-grid > .cell {
            float: left;
            text-align: center;
            border: 2px solid rgba(0, 0, 0, 0.1);
            border-top: none;
            border-left: none;
        }
        
        #components > #components-grid > .cell {
            vertical-align: middle;
            width: 200px;
            height: 200px;
            padding-left: 20px;
            padding-right: 20px;
        }
        
        #components > #components-grid > .cell img {
            max-width: 150px;
            max-height: 150px;
            display: block;
            margin: auto;
        }
     #success {
        height: 100%;
        background-color: #F9E848;
        text-align: center;
        margin-top: 60px;
        height: calc(100% - 120px);
    }
         #success .table {
            position: relative;
            width: 40%;
            max-width: 600px;
            margin: auto;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
             #success .table .cell {
                height: 100%;
                vertical-align: middle;
            }
                 #success #title {
                    font-size: 2.33em;
                    font-family: 'Super Grotesk', sans-serif;
                    letter-spacing: 0.05em;
                    font-weight: bold;
                    text-transform: uppercase;
                }
                 #success .divider {
                    background-image: url('/public/assets/icons/squiggle.svg');
                    background-size: contain;
                    height: 20px;
                    background-repeat: no-repeat;
                    margin-top: 10px;
                    margin-bottom: 20px;
                }
                 #success #description {
                    font-size: 1.25em;
                    margin-bottom: 40px;
                }
                 #success #image {
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center center;
                    width: 400px;
                    height: 200px;
                    margin: auto;
                }
                 #success .table #share > .icons {
                    width: 220px;
                    margin: auto;
                }
                     #success > .table #share > .icons > a > .icon {
                        width: 40px;
                        height: 40px;
                        background-size: contain;
                        background-position: center center;
                        background-repeat: no-repeat;
                        float: left;
                        margin: 5px;
                        border: 2px solid black;
                        border-radius: 50%;
                        opacity: 0.5;
                        cursor: pointer;
                    }
                     #success > .table #share > .icons > a > .icon:hover {
                        opacity: 1;
                    }
                     #success > .table #share > .icons > a > .facebook {
                        background-image: url('/public/assets/icons/share-success-facebook.svg');
                        background-size: 13px auto;
                    }
                     #success > .table #share > .icons > a > .twitter {
                        background-image: url('/public/assets/icons/share-success-twitter.svg');
                        background-size: 23px auto;
                    }
                     #success > .table #share > .icons > a > .instagram {
                        background-image: url('/public/assets/icons/share-success-instagram.svg');
                        background-size: 20px auto;
                    }
                     #success > .table #share > .icons > a > .youtube {
                        background-image: url('/public/assets/icons/share-success-youtube.svg');
                        background-size: 25px auto;
                    }
                     #success > .table #share > .hashtag {
                        clear: both;
                        margin: 30px;
                        font-family: Univers, sans-serif;
                        color: #7C7323;
                    }
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 60px;
    background-color: black;
}
    #footer > .table {
        height: 100%;
    }
        #footer > .table #back-button {
            height: 100%;
            min-width: 100px;
        }
            #footer > .table #back-button .circle {
                margin: auto;
                position: relative;
                background-color: white;
                background-image: url('/public/assets/icons/footer-back.svg');
                background-size: 40px auto;
                transition: transform ease-in-out 0.1s;
            }
            
            #footer > .table #back-button .inactive-button {
                opacity: 0.3;
            }

            #footer > .table #back-button .active-button:hover {
                cursor: pointer;
                transform: scale(1.1);
            }
        #footer > #progress-arrow {
            float: left;
            width: 0;
            position: relative;
            z-index: 0;
        }
        #footer > .table #journey {
            width: 100%;
            padding: 10px;
            border-radius: 30px;
            background-color: #4D4D4D;
        }
            #footer > .table #journey .step > a > .circle {
                background-color: #B3B3B3;
            }
            #footer > .table #journey #home-button {
                float: left;
            }
                #footer > .table #journey a > .circle {
                    background-size: 35px auto;
                }
                #footer > .table #journey .selected > a > .circle {
                    background-color: #3C3C3B;
                }
                #footer > .table #journey .unvisited > a > .circle {
                    background-color: #666666;
                }
                #footer > .table #journey  > a:hover > .circle {
                    background-color: white;
                    box-shadow: 0 0 0 3px black;
                }
                #footer > .table #journey #home-button > a > .circle {
                    background-image: url('/public/assets/icons/footer-icon-home-B.svg');
                    background-size: 40px auto;
                }
                #footer > .table #journey #home-button.selected > a > .circle {
                    background-image: url('/public/assets/icons/footer-icon-home-A.svg');
                }
                #footer > .table #journey #home-button > a:hover > .circle {
                    background-image: url('/public/assets/icons/footer-icon-home-C.svg');
                }
                #footer > .table #journey #finish-button > a > .circle {
                    background-image: url('/public/assets/icons/footer-icon-finish-B.svg');
                    background-size: 40px auto;
                }
                #footer > .table #journey #finish-button.selected > a > .circle {
                    background-image: url('/public/assets/icons/footer-icon-finish-A.svg');
                }
                #footer > .table #journey #finish-button > a:hover > .circle {
                    background-image: url('/public/assets/icons/footer-icon-finish-C.svg');
                }
                #footer > .table #journey #quest-button > a > .circle {
                    background-image: url('/public/assets/icons/footer-icon-quest-B.svg');
                    background-size: 40px auto;
                }
                #footer > .table #journey #quest-button.selected > a > .circle {
                    background-image: url('/public/assets/icons/footer-icon-quest-A.svg');
                }
                #footer > .table #journey #quest-button > a:hover > .circle {
                    background-image: url('/public/assets/icons/footer-icon-quest-C.svg');
                }
            #footer > .table #journey #remaining-steps {
                margin: -40px 0 0 40px;
            }
                #footer > .table #journey #remaining-steps .step {
                    float: left;
                }
                    #footer > .table #journey #remaining-steps .step#checklist-button > a > .circle {
                        background-image: url('/public/assets/icons/footer-checklist.png');
                        background-size: 25px auto;
                    }
                    #footer > .table #journey #remaining-steps .step > a > .circle {
                        float: right;
                    }
                    #footer > .table #journey #remaining-steps .step > .substeps-container {
                        width: calc(100% - 40px); /* IE9 could not calculate the width in the .table element */
                    }
                    #footer > .table #journey #remaining-steps .step > .substeps-container > .table {
                        width: 100%;
                        float: left;
                        padding-top: 16px;
                    }
                    #footer > .table #journey #remaining-steps .step > .substeps-container > .table .circle {
                        width: 8px; height: 8px;
                        background-color: #7B7B7B;
                    }
    #footer > .table #next-button {
        height: 100%;
        min-width: 100px;
    }
        #footer > .table #next-button .circle {
            position: relative;
            background-color: white;
            background-image: url('/public/assets/icons/footer-next.svg');
            background-size: 40px auto;
            transition: transform ease-in-out 0.1s;
        }
        @keyframes seek-attention {
            0%, 16%, 32%, 100% {
                transform: scale(1);
            }
            8%, 24% {
                transform: scale(1.25);
            }
        }
        #footer > .table #next-button .circle.attention-seeker {
            animation-name: seek-attention;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        #footer > .table #next-button .inactive-button {
            opacity: 0.3;
        }
        #footer > .table #next-button .active-button:hover {
            cursor: pointer;
            transform: scale(1.1);
        }
/* ----------------------------------------------------------------------------


Above this, general or Electro Dough


TODO
We can create styles specifically for each kit that group things
E.g., things with the red background colour in Electro Dough, make it .highlight-1
And that way we don't have to have entries here all the time
---------------------------------------------------------------------------- */
#content.diy-electro-dough-kit {
    background-color: #F9E848;
}
    #content.diy-electro-dough-kit a.cta {
        background-color: white;
        color: #FD3C1F;
        background-image: url('/public/assets/icons/cta-arrow-ed.svg');
    }
    #content.diy-electro-dough-kit a.cta:hover {
        background-color: white;
    }  
    #content.diy-electro-dough-kit a.cta:active {
        background-color: #FD3C1F;
    }
    #content.diy-electro-dough-kit > .slides > section > #cover > #left {
        background-color: #FD3C1F;
    }
    #content.diy-electro-dough-kit > .slides > section > #cover > #left {
        background-color: #FD3C1F;
    }
    #content.diy-electro-dough-kit > .slides > section > #cover > #right {
        background-color: #F9E848;
    }
    #content.diy-electro-dough-kit > .slides > section > #cover > #right > #manual-cover > .circle {
        color: #F9E848;
    }
    #content.diy-electro-dough-kit > .slides > section > #components {
        background-color: #F9E848;
    }
    #content.diy-electro-dough-kit > .slides > section > #instruction > #left {
        background-color: #FD3C1F;
        color: white;
    }
        #content.diy-electro-dough-kit > .slides > section > #instruction > #left #text a {
            color: white;
            text-decoration: underline;
        }

        #content.diy-electro-dough-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #debug-content {
            color: white;
        }
    #content.diy-electro-dough-kit > .slides > section > #conclusion {
        background-color: #FD3C1F;
    }
    /* Recipe */
    #content.diy-electro-dough-kit ~ #footer > .table #journey.recipe #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/recipe-icon-01-B.svg');
    }
    #content.diy-electro-dough-kit ~ #footer > .table #journey.recipe #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/recipe-icon-01-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.recipe #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/recipe-icon-01-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.recipe #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/recipe-icon-02-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.recipe #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/recipe-icon-02-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.recipe #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/recipe-icon-02-C.svg');
    }
    /* Circuits */
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-01-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-01-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-01-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-02-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-02-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-02-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-03-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-03-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-03-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-04-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-04-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-04-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-05-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-05-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-05-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-06-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-06-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-06-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-07-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-07-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-07-C.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-08-B.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-08-A.svg');
    }
    .diy-electro-dough-kit ~ #footer > .table #journey.circuits #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-electro-dough-kit/steps/circuits-icon-08-C.svg');
    }
#content.diy-thirsty-plant-kit {
    background-color: #7EDEAB;
}
    #content.diy-thirsty-plant-kit a.cta {
        background-color: white;
        color: #FF0064;
        background-image: url('/public/assets/icons/cta-arrow-tp.svg');
    }
    #content.diy-thirsty-plant-kit a.cta:active {
        background-color: #FF0064;
    }
    #content.diy-thirsty-plant-kit > .slides > section > #cover > #left {
        background-color: #FF0064;
    }
    #content.diy-thirsty-plant-kit > .slides > section > #cover > #right {
        background-color: #7EDEAB;
    }
    #content.diy-thirsty-plant-kit > .slides > section > #cover > #right > #manual-cover > .circle {
        color: #7EDEAB
    }
    #content.diy-thirsty-plant-kit > .slides > section > #components {
        background-color: #7EDEAB;
    }
    #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left {
        background-color: #FF0064;
        color: white;
    }
   
    #content.diy-thirsty-plant-kit > .slides > section > #instruction.full-screen > #left #title {
        font-family: Univers, sans-serif;
        font-weight: bold;
        text-transform: none;
        color: black;
    }
    #content.diy-thirsty-plant-kit > .slides > section > #instruction.full-screen > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-thirsty-plant-kit > .slides > section > #instruction.full-screen > #left #text {
        color: black;
    }
        #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left #text a {
            color: white;
            text-decoration: underline;
        }
    #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container {
        border-top: 1px solid black;
    }
        #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
            color: black;
        }
            #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #debug-content {
                color: black;
            }
            #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                background-image: url('/public/assets/icons/debug-content-state-closed.svg');
            }
            #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                background-image: url('/public/assets/icons/debug-content-state-open.svg');
            }
            #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
                background-image: url('/public/assets/icons/debug-content-help-icon-black.svg');
            }
                #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                    background-image: url('/public/assets/icons/debug-content-state-closed-black.svg');
                }
                #content.diy-thirsty-plant-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                    background-image: url('/public/assets/icons/debug-content-state-open-black.svg');
                }
    #content.diy-thirsty-plant-kit > .slides > section > #conclusion {
        background-color: #FF0064;
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.sensor #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/sensor-icon-01-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.sensor #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/sensor-icon-01-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.sensor #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/sensor-icon-01-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-01-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-01-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-01-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-02-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-02-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-02-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-03-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-03-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-03-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-04-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-04-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-04-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-05-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-05-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-05-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-06-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-06-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-06-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-07-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-07-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-07-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-08-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-08-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-08-C.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-09-B.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-09-A.svg');
    }
    .diy-thirsty-plant-kit ~ #footer > .table #journey.circuits #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-thirsty-plant-kit/steps/manual-icon-09-C.svg');
    }
#content.diy-synth-kit {
    background-color: #f7c1c5;
}
    #content.diy-synth-kit a.cta {
        background-color: white;
        color: #28C873;
        background-image: url('/public/assets/icons/synth/cta-arrow-sy.svg');
    }
    #content.diy-synth-kit a.cta:active {
        background-color: #28C873;
    }
    #content.diy-synth-kit > .slides > section > #cover > #left {
        background-color: #28C873;
    }
    #content.diy-synth-kit > .slides > section > #cover > #right {
        background-color: #f7c1c5;
    }
    #content.diy-synth-kit > .slides > section > #cover > #right > #manual-cover > .circle {
        color: #f7c1c5
    }
    #content.diy-synth-kit > .slides > section > #instruction > #left {
        background-color: #28C873;
    }
    #content.diy-synth-kit > .slides > section > #instruction > #left #text {
        color: black;
    }
        #content.diy-synth-kit > .slides > section > #instruction > #left #text a {
            color: black;
            text-decoration: underline;
        }

        #content.diy-synth-kit > .slides > section > #instruction.full-screen > #left #title {
                font-family: Univers, sans-serif;
                font-weight: bold;
                text-transform: none;
                color: black;
        }

    #content.diy-synth-kit > .slides > section > #instruction > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-synth-kit > .slides > section > #instruction.full-screen > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-synth-kit > .slides > section > #instruction.full-screen > #left #text {
        color: black;
    }
    #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container {
        border-top: 1px solid black;
    }
        #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
            color: black;
        }
            #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #debug-content {
                color: black;
            }
            #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                background-image: url('/public/assets/icons/debug-content-state-closed.svg');
            }
            #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                background-image: url('/public/assets/icons/debug-content-state-open.svg');
            }
            #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
                background-image: url('/public/assets/icons/debug-content-help-icon-black.svg');
            }
                #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                    background-image: url('/public/assets/icons/debug-content-state-closed-black.svg');
                }
                #content.diy-synth-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                    background-image: url('/public/assets/icons/debug-content-state-open-black.svg');
                }
    #content.diy-synth-kit > .slides > section > #conclusion {
        background-color: #28C873;
    }

	/*STUTTER*/
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-C.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-A.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-C.svg');
    }
	#content.diy-synth-kit ~ #footer > .table #journey.stutter #step-10-button > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-B.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.stutter #step-10-button.selected > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-A.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.stutter #step--button > a:hover > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-C.svg');
	}
	/*ATARI*/
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-C.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-A.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.atari #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-C.svg');
    }
	#content.diy-synth-kit ~ #footer > .table #journey.atari #step-10-button > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-B.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.atari #step-10-button.selected > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-A.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.atari #step--button > a:hover > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-C.svg');
	}
	/*STUTTER*/
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-C.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-A.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.stutter #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-C.svg');
    }
	#content.diy-synth-kit ~ #footer > .table #journey.stutter #step-10-button > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-B.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.stutter #step-10-button.selected > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-A.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.stutter #step--button > a:hover > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-C.svg');
	}
	/*DUB*/
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-01-C.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-02-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-03-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-04-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-06-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-05-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-A.svg');
	}
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-07-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-08-C.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-B.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-A.svg');
    }
    #content.diy-synth-kit ~ #footer > .table #journey.dub #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-09-C.svg');
    }
	#content.diy-synth-kit ~ #footer > .table #journey.dub #step-10-button > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-B.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.dub #step-10-button.selected > a > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-A.svg');
	}
	#content.diy-synth-kit ~ #footer > .table #journey.dub #step--button > a:hover > .circle {
	    background-image: url('/public/assets/images/manuals/diy-synth-kit/steps/manual-icon-10-C.svg');
	}
#content.diy-gamer-kit {
    background-color: #0bbbef;
}
    #content.diy-gamer-kit a.cta {
        background-color: white;
        color: #f39433;
        background-image: url('/public/assets/icons/cta-arrow-ga.svg');
    }
    #content.diy-gamer-kit a.cta:active {
        background-color: #f39433;
    }
    #content.diy-gamer-kit > .slides > section > #cover > #left {
        background-color: #f39433;
    }
    #content.diy-gamer-kit > .slides > section > #cover > #right {
        background-color: #0bbbef;
    }
    #content.diy-gamer-kit > .slides > section > #cover > #right > #manual-cover > .circle {
        color: #0bbbef;
    }
    #content.diy-gamer-kit > .slides > section > #components {
        background-color: #0bbbef;
    }
    #content.diy-gamer-kit > .slides > section > #instruction > #left {
        background-color: #f39433;
    }
    #content.diy-gamer-kit > .slides > section > #instruction > #left #text {
        color: black;
    }
        #content.diy-gamer-kit > .slides > section > #instruction > #left #text a {
            color: black;
            text-decoration: underline;
        }

    #content.diy-gamer-kit > .slides > section > #instruction.full-screen > #left #title {
        font-family: Univers, sans-serif;
        font-weight: bold;
        text-transform: none;
        color: black;
    }
    #content.diy-gamer-kit > .slides > section > #instruction > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-gamer-kit > .slides > section > #instruction.full-screen > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-gamer-kit > .slides > section > #instruction.full-screen > #left #text {
        color: black;
    }
    #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container {
        border-top: 1px solid black;
    }
        #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
            color: black;
        }
            #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #debug-content {
                color: black;
            }
            #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                background-image: url('/public/assets/icons/debug-content-state-closed.svg');
            }
            #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                background-image: url('/public/assets/icons/debug-content-state-open.svg');
            }
            #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
                background-image: url('/public/assets/icons/debug-content-help-icon-black.svg');
            }
                #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                    background-image: url('/public/assets/icons/debug-content-state-closed-black.svg');
                }
                #content.diy-gamer-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                    background-image: url('/public/assets/icons/debug-content-state-open-black.svg');
                }
    #content.diy-gamer-kit > .slides > section > #conclusion {
        background-color: #f39433;
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-1-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-1-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-1-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-2-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-2-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-2-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-3-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-3-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-3-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-4-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-4-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-4-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-5-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-5-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-5-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-6-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-6-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-6-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-7-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-7-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-7-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-8-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-8-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-8-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-9-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-9-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-9-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-10-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-10-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-10-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-10-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-10-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-10-C.svg');
    }
     .diy-gamer-kit ~ #footer > .table #journey #step-11-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-11-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-11-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-11-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-11-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-11-C.svg');
    }
     .diy-gamer-kit ~ #footer > .table #journey #step-12-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-12-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-12-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-12-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-12-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-12-C.svg');
    }
     .diy-gamer-kit ~ #footer > .table #journey #step-13-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-13-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-13-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-13-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-13-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-13-C.svg');
    }
     .diy-gamer-kit ~ #footer > .table #journey #step-14-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-14-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-14-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-14-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-14-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-14-C.svg');
    }
     .diy-gamer-kit ~ #footer > .table #journey #step-15-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-15-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-15-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-15-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-15-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-15-C.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-16-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-16-B.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-16-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-16-A.svg');
    }
    .diy-gamer-kit ~ #footer > .table #journey #step-16-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-gamer-kit/icons/icon-16-C.svg');
    }
    
#content.diy-speaker-kit {
    background-color: #A1DAF8;
}
    #content.diy-speaker-kit a.cta {
        background-color: white;
        color: #FDC300;
        background-image: url('/public/assets/icons/cta-arrow-sp.svg');
    }
    #content.diy-speaker-kit a.cta:active {
        background-color: #FDC300;
    }
    #content.diy-speaker-kit > .slides > section > #cover > #left {
        background-color: #FDC300;
    }
    #content.diy-speaker-kit > .slides > section > #cover > #right {
        background-color: #A1DAF8;
    }
    #content.diy-speaker-kit > .slides > section > #cover > #right > #manual-cover > .circle {
        color: #A1DAF8;
    }
    #content.diy-speaker-kit > .slides > section > #components {
        background-color: #A1DAF8;
    }
    #content.diy-speaker-kit > .slides > section > #instruction > #left {
        background-color: #FDC300;
    }
    #content.diy-speaker-kit > .slides > section > #instruction > #left #text {
        color: black;
    }
        #content.diy-speaker-kit > .slides > section > #instruction > #left #text a {
            color: black;
            text-decoration: underline;
        }

    #content.diy-speaker-kit > .slides > section > #instruction.full-screen > #left #title {
        font-family: Univers, sans-serif;
        font-weight: bold;
        text-transform: none;
        color: black;
    }
    #content.diy-speaker-kit > .slides > section > #instruction > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-speaker-kit > .slides > section > #instruction.full-screen > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }
    #content.diy-speaker-kit > .slides > section > #instruction.full-screen > #left #text {
        color: black;
    }
    #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container {
        border-top: 1px solid black;
    }
        #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
            color: black;
        }
            #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #debug-content {
                color: black;
            }
            #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                background-image: url('/public/assets/icons/debug-content-state-closed.svg');
            }
            #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                background-image: url('/public/assets/icons/debug-content-state-open.svg');
            }
            #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #label {
                background-image: url('/public/assets/icons/debug-content-help-icon-black.svg');
            }
                #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.debug {
                    background-image: url('/public/assets/icons/debug-content-state-closed-black.svg');
                }
                #content.diy-speaker-kit > .slides > section > #instruction > #left .debug.cell > #debug-container #icon.close {
                    background-image: url('/public/assets/icons/debug-content-state-open-black.svg');
                }
    #content.diy-speaker-kit > .slides > section > #conclusion {
        background-color: #FDC300;
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-01-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-01-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-01-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-02-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-02-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-02-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-03-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-03-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-03-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-4-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-04-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-4-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-04-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-4-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-04-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-5-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-05-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-5-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-05-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-5-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-05-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-6-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-06-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-6-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-06-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-6-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-06-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-7-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-07-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-7-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-07-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-7-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-07-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-8-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-08-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-8-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-08-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-8-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-08-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-9-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-09-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-9-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-09-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-9-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-09-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-10-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-10-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-10-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-10-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-10-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-10-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-11-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-11-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-11-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-11-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-11-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-11-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-12-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-12-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-12-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-12-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-12-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-12-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-13-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-13-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-13-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-13-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-13-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-13-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-14-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-14-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-14-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-14-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-14-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-14-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-15-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-15-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-15-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-15-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-15-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-15-C.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-16-button > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-16-B.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-16-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-16-A.svg');
    }
    .diy-speaker-kit ~ #footer > .table #journey.circuits #step-16-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/diy-speaker-kit/steps/icon-16-C.svg');
    }

    /* creative-coder Kit */

    #content.creative-coder-kit {
        background-color: #FDD51D;
    }

    #content.creative-coder-kit > .cover {
        background-color: #A05AFF;
    }

    #content.creative-coder-kit a.cta {
        background-color: white;
        color: #A05AFF;
        background-image: url('/public/assets/icons/cta-arrow-mo.svg');
    }

    #content.creative-coder-kit a.cta:active {
        background-color: #FDD51D;
    }
    
    #content.creative-coder-kit > .slides > section > #cover > #left {
        background-color: #FDD51D;
    }

    #content.creative-coder-kit > .slides > section > #cover > #left .title {
        color: black;
    }

    #content.creative-coder-kit > .slides > section > #cover > #right {
        background-color: #A05AFF;
        color: white;
    }

    #content.creative-coder-kit > .slides > section > #cover > #right a {
        text-decoration: underline;
        color: #fff;
    }

    #content.creative-coder-kit #cover > #left > #manual-cover > .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }

    #content.creative-coder-kit #cover > #right > #manual-cover > #time {
        color: white;
        opacity: 1;
    }

    #content.creative-coder-kit > .slides > section > #cover > #right > #manual-cover > .circle {
        color: #A05AFF;
        background: white;
    }

    #content.creative-coder-kit > .slides > section > #cover > #right > #manual-cover > .title {
        color: white;
    }

    #content.creative-coder-kit > .slides > section > #components {
        background-color: #A05AFF;
    }
    #content.creative-coder-kit > .slides > section > #instruction > #left {
        background-color: #FDD51D;
    }
    #content.creative-coder-kit > .slides > section > #instruction > #left #text {
        color: black;
    }
        #content.creative-coder-kit > .slides > section > #instruction > #left #text a {
            color: black;
            text-decoration: underline;
        }
    
    #content.creative-coder-kit > .slides > section > #instruction.full-screen > #left #title {
        font-family: Univers, sans-serif;
        font-weight: bold;
        text-transform: none;
        color: white;
    }

    #content.creative-coder-kit > .slides > section > #instruction.full-screen > #left #text {
        color: white;
    }

    #content.creative-coder-kit > .slides > section > #instruction.full-screen > #left #text a {
        color: white;
    }

    #content.creative-coder-kit > .slides > section > #instruction > #left .divider {
        background-image: url('/public/assets/icons/squiggle.svg');
    }

    #content.creative-coder-kit > .slides > section > #instruction.full-screen > #left .divider {
        background-image: url('/public/assets/icons/squiggle-white.svg');
    }

    #content.creative-coder-kit > .slides > section > #instruction > #left .divider {
         background-image: url('/public/assets/icons/squiggle.svg');
    }

    #content.creative-coder-kit > .slides > section > #conclusion {
        background-color: #A05AFF;
    }

    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-1-button > a > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/build-it-2.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-1-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/build-it-1.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-1-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/build-it-1.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-2-button > a > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/Master_Move_it_icon-2.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-2-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/Master_Move_it_icon-1.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-2-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/Master_Move_it_icon-1.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-3-button > a > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/Master_Code_it_icon-2.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-3-button.selected > a > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/Master_Code_it_icon-1.svg');
    }
    .creative-coder-kit ~ #footer > .table #journey.creative-coder #step-3-button > a:hover > .circle {
        background-image: url('/public/assets/images/manuals/creative-coder-kit/icons/Master_Code_it_icon-1.svg');
    }

    .creative-coder-kit #conclusion a.cta.with-suggestions {
        background: white;
        color: #A05AFF;
        padding: 0;
        width: 170px;
        text-align: center;
    }

   .slides {
        position: absolute;
        top: 0;
        left: 0;
    }

    .reveal .slides {
       margin: 60px 0 0px 0;
    }

    section {
        width: 100%;
        height: 100%;

    }

    .reveal .slides > section, .reveal .slides > section {
        padding: 0;
    }

    .reveal .slide-background {
        z-index: 0;
    }

    .flip-background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        visibility: hidden;
    }

    body .circle {
        margin: auto;
    }

    .circle {
         -webkit-font-feature-settings: "lnum";
        font-feature-settings: "lnum";
        font-kerning: normal;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0;
    }

    .table {
        width: 100%;
    }

    #right > video {
        display: block;
        width: 95%;
        margin: 40px auto 0 auto;
        border: 5px solid #000;
        border-radius: 15px;
    }

    .reveal {
        -ms-touch-action: auto;
        touch-action: auto;
    }

    .reveal-section {
        overflow: auto;
        height: calc(100% - 120px);
    }

    #content.diy-gamer-kit > .slides > section > #instruction > #right {
        background-color: #0bbbef;
    }
    
    #content.diy-gamer-kit > .slides > section > #instruction.full-screen > #right {
        background-color: transparent;
    }

    #content.diy-speaker-kit > .slides > section > #instruction > #right {
        background-color: #A1DAF8;
    }
    
    #content.diy-speaker-kit > .slides > section > #instruction.full-screen > #right {
        background-color: transparent;
    }

    #content.diy-synth-kit > .slides > section > #instruction > #right {
        background-color: #f7c1c5;
    }
    
    #content.diy-synth-kit > .slides > section > #instruction.full-screen > #right {
        background-color: transparent;
    }


    @media (min-width: 920px) {
        #content > .slides > section > #instruction.full-screen > #left.transparent {
            background-color: transparent;
        }
    }

    @media (max-width: 920px) {
        body {
            font-size: 80%;
        }

        .reveal .slides {
            margin: 50px 0 0px 0;
        }

        .reveal-section {
            overflow: auto;
            height: calc(100% - 100px);
        }

        .reveal .backgrounds {
            height: calc(100% - 100px);
            top: 50px;
            left: 0;
        }

        .reveal .slide-background, .flip-background {
            background-size: 170%;
            background-position: 86% 0%;
        }

        #cover > #right .start-button {
            display: none;
        }

        #cover > #right > #manual-cover > .description {
            padding: 0;
        }

        #cover > #left, #cover > #right {
            width: 100%;
            min-height: 340px;
        }

        #cover > #right {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            margin: auto;
            height: auto;
            vertical-align: middle;
        }

        #cover > #left {
            display: none;
        }

        #cover > #right > #manual-cover {
            margin-top: 1.33em;
        }

        #components > #missing-components-link {
            position: relative;
            float: left;
            padding-top: 20px;
        }

        #content {
            margin-top: 50px;
            height: calc(100% - 100px);
        }

        .divider {
            display: none;
        }

        #header {
            height: 50px;
        }

        #header #logo, #header .circle {
            top: 5px;
        }
        #header .circle {
            left: 5px;
        }

        #header .left-curve {
            height: 50px;
            line-height: 50px;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
        }

        #manual-name-outer {
            display: none;
        }

        #header > #kit-name-outer {
            float: none;
            width: 100%;
            border-radius: 25px 0 0 25px;
            background-color: #4D4D54;
        }   

        #kit-name-inner {
            margin: 0;
        }

        #header > #kit-name-outer #kit-name-inner {
            padding-right: 0;
        }

        #header > #manual-buttons {
            padding: 8.5px;
            background-color: #4D4D4D;
        } 

        #content {
            margin-top: 50px;
        }

        #instruction {
            display: -webkit-box; 
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        #instruction > #left {
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -ms-flex-order: 2;
            -webkit-order: 2;
            order: 2;
            height: 33%;
            min-height: 33%;
        }

        #instruction > #left > .table{
            background-color: inherit;
            border-bottom: 10px solid inherit;
        }

        #instruction > #right {
            min-height: 67%;
            order: 1;
        }

        #instruction > #right > .main-image {
            height: calc(67%);
        }

        #instruction > #left, #instruction > #right {
            width: 100%;
        }

        #instruction > #left #tip {
            border-bottom: none;
        }

        .reveal .slide-background {
            padding-top: 20%;
            overflow: auto;
        }
        
        #instruction > #left #title {
            margin-top: 1em;
        }

        #instruction > #left #text {
            margin-bottom: 1em;
        }

        #success .table {
            width: 70%;
        }

        #success #image {
            width: 80%;
            margin: 2em auto;
        }

        #recipe > .table > .row > #steps-left, #recipe > .table > .row > #steps-right {
            width: 70%;
            max-width: 80%;

        }

        #conclusion {
            width: 100%;
            height: auto;
            text-align: center;
        }

        #footer {
            height: 0px;
            padding-bottom: 50px;
        }

        #back-button, #next-button {
            margin-top: 5px;
            display: block;
        }

        #back-button {
            float: left;
        }   

        #next-button {
            float: right;
        }       
    
        #footer > #progress-arrow {
            height: 10px;
            margin-top: 20px;
        }

        #journey, .step {
            display: none;
        }

        /* Font Size tweeks */
        #components > #title, #success #title {
            font-size: 1.84em;
        }

        #cover > #right > #manual-cover > .circle {
            font-size: 1.8em;
        }

        #content.diy-gamer-kit > .slides > section > #instruction.full-screen > #left #title,
        a.cta, #cover > #right > #manual-cover > .description {
            font-size: 1.5em;
        }

        #content.diy-synth-kit > .slides > section > #instruction.full-screen > #left #title {
            font-size: 1.5em;
        }
          
        #cover > #right > #manual-cover > #time, 
        #components > #components-grid > .cell,
        #instruction > #left #text,

        #instruction > #left #tip,
        #instruction > #left .debug.cell > .debug-container .label {
            font-size: 1.15em;
        }

        #components > #missing-components-link {
            font-size: 1.1em;
        }
    }

    @media (max-height: 640px){
        #success .table {
            margin-top: 50px;
            width: 80%;
        }

        #success #image {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            width: 200px;
            height: 100px;
            margin: auto;
        }
    }

    @media (max-height: 768px) and (min-width: 921px)  {
        #instruction > #left {
            min-height: 700px;
        }        

        #conclusion {
            min-height: 700px;
        }
    }

    @media (max-width: 375px) {
        #header > #manual-buttons .print-hide-mobile {
            display: none;
        }
    }