@font-face {
    font-family: 'Univers Next Pro';
    font-weight: bold;
    src: url('UniversNextPro-BoldCond.ttf') format('truetype');
}
@font-face {
    font-family: 'Univers Next Pro';
    font-weight: normal;
    src: url('UniversNextPro-Regular.ttf') format('truetype');
}

/* colours:
purple: #b288b9
yellow: #fbdb65
blue: #71c5e8
pink: #ff808b
green: #6dcdb8
*/


/* overrides for Enfold theme */
#main > .container_wrap:nth-child(2) > .container {
    width: 100% !important;
    max-width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}
#main > .container_wrap:nth-child(2) > .container > .content { padding: 0; }
p { margin: unset; }
.main_color .ingenium-implicit-bias .heading-color, .main_color .ingenium-implicit-bias a.iconbox_icon:hover, .main_color .ingenium-implicit-bias h1, .main_color .ingenium-implicit-bias h2, .main_color .ingenium-implicit-bias h3, .main_color .ingenium-implicit-bias h4, .main_color .ingenium-implicit-bias h5, .main_color .ingenium-implicit-bias h6, .main_color .ingenium-implicit-bias .sidebar .current_page_item > a, .main_color .ingenium-implicit-bias .sidebar .current-menu-item > a, .main_color .ingenium-implicit-bias .pagination .current, .main_color .ingenium-implicit-bias .pagination a:hover, .main_color .ingenium-implicit-bias strong.avia-testimonial-name, .main_color .ingenium-implicit-bias .heading, .main_color .ingenium-implicit-bias .toggle_content strong, .main_color .ingenium-implicit-bias .toggle_content strong a, .main_color .ingenium-implicit-bias .tab_content strong, .main_color .ingenium-implicit-bias .tab_content strong a, .main_color .ingenium-implicit-bias .asc_count, .main_color .ingenium-implicit-bias .avia-testimonial-content strong, .main_color .ingenium-implicit-bias div .news-headline, #top .main_color .ingenium-implicit-bias .av-related-style-full .av-related-title, .main_color .ingenium-implicit-bias .av-default-style .av-countdown-cell-inner .av-countdown-time, .main_color .ingenium-implicit-bias .wp-playlist-item-meta.wp-playlist-item-title, #top .main_color .ingenium-implicit-bias .av-no-image-slider h2 a, .main_color .ingenium-implicit-bias .av-small-bar .avia-progress-bar .progressbar-title-wrap {
    color: unset;
}
.main_color .ingenium-implicit-bias, .main_color .ingenium-implicit-bias div, .main_color .ingenium-implicit-bias header, .main_color .ingenium-implicit-bias main, .main_color .ingenium-implicit-bias aside, .main_color .ingenium-implicit-bias footer, .main_color .ingenium-implicit-bias article, .main_color .ingenium-implicit-bias nav, .main_color .ingenium-implicit-bias section, .main_color .ingenium-implicit-bias span, .main_color .ingenium-implicit-bias applet, .main_color .ingenium-implicit-bias object, .main_color .ingenium-implicit-bias iframe, .main_color .ingenium-implicit-bias h1, .main_color .ingenium-implicit-bias h2, .main_color .ingenium-implicit-bias h3, .main_color .ingenium-implicit-bias h4, .main_color .ingenium-implicit-bias h5, .main_color .ingenium-implicit-bias h6, .main_color .ingenium-implicit-bias p, .main_color .ingenium-implicit-bias blockquote, .main_color .ingenium-implicit-bias pre, .main_color .ingenium-implicit-bias a, .main_color .ingenium-implicit-bias abbr, .main_color .ingenium-implicit-bias acronym, .main_color .ingenium-implicit-bias address, .main_color .ingenium-implicit-bias big, .main_color .ingenium-implicit-bias cite, .main_color .ingenium-implicit-bias code, .main_color .ingenium-implicit-bias del, .main_color .ingenium-implicit-bias dfn, .main_color .ingenium-implicit-bias em, .main_color .ingenium-implicit-bias img, .main_color .ingenium-implicit-bias ins, .main_color .ingenium-implicit-bias kbd, .main_color .ingenium-implicit-bias q, .main_color .ingenium-implicit-bias s, .main_color .ingenium-implicit-bias samp, .main_color .ingenium-implicit-bias small, .main_color .ingenium-implicit-bias strike, .main_color .ingenium-implicit-bias strong, .main_color .ingenium-implicit-bias sub, .main_color .ingenium-implicit-bias sup, .main_color .ingenium-implicit-bias tt, .main_color .ingenium-implicit-bias var, .main_color .ingenium-implicit-bias b, .main_color .ingenium-implicit-bias u, .main_color .ingenium-implicit-bias i, .main_color .ingenium-implicit-bias center, .main_color .ingenium-implicit-bias dl, .main_color .ingenium-implicit-bias dt, .main_color .ingenium-implicit-bias dd, .main_color .ingenium-implicit-bias ol, .main_color .ingenium-implicit-bias ul, .main_color .ingenium-implicit-bias li, .main_color .ingenium-implicit-bias fieldset, .main_color .ingenium-implicit-bias form, .main_color .ingenium-implicit-bias label, .main_color .ingenium-implicit-bias legend, .main_color .ingenium-implicit-bias table, .main_color .ingenium-implicit-bias caption, .main_color .ingenium-implicit-bias tbody, .main_color .ingenium-implicit-bias tfoot, .main_color .ingenium-implicit-bias thead, .main_color .ingenium-implicit-bias tr, .main_color .ingenium-implicit-bias th, .main_color .ingenium-implicit-bias td, .main_color .ingenium-implicit-bias article, .main_color .ingenium-implicit-bias aside, .main_color .ingenium-implicit-bias canvas, .main_color .ingenium-implicit-bias details, .main_color .ingenium-implicit-bias embed, .main_color .ingenium-implicit-bias figure, .main_color .ingenium-implicit-bias fieldset, .main_color .ingenium-implicit-bias figcaption, .main_color .ingenium-implicit-bias footer, .main_color .ingenium-implicit-bias header, .main_color .ingenium-implicit-bias hgroup, .main_color .ingenium-implicit-bias menu, .main_color .ingenium-implicit-bias nav, .main_color .ingenium-implicit-bias output, .main_color .ingenium-implicit-bias ruby, .main_color .ingenium-implicit-bias section, .main_color .ingenium-implicit-bias summary, .main_color .ingenium-implicit-bias time, .main_color .ingenium-implicit-bias mark, .main_color .ingenium-implicit-bias audio, .main_color .ingenium-implicit-bias video, #top .main_color .ingenium-implicit-bias .pullquote_boxed, .responsive #top .main_color .ingenium-implicit-bias .avia-testimonial, .responsive #top.avia-blank #main .main_color .ingenium-implicit-bias.container_wrap:first-child, #top .main_color .ingenium-implicit-bias.fullsize .template-blog .post_delimiter, .main_color .ingenium-implicit-bias .related_posts.av-related-style-full a {
    border-color: unset;
}
.ingenium-implicit-bias h1, .ingenium-implicit-bias h2, .ingenium-implicit-bias h3, .ingenium-implicit-bias h4, .ingenium-implicit-bias h5, .ingenium-implicit-bias h6, .ingenium-implicit-bias #top .title_container .main-title, .ingenium-implicit-bias tr.pricing-row td, .ingenium-implicit-bias #top .portfolio-title, .ingenium-implicit-bias .callout .content-area, .ingenium-implicit-bias .avia-big-box .avia-innerbox, .ingenium-implicit-bias .av-special-font, .ingenium-implicit-bias .av-current-sort-title, .ingenium-implicit-bias .html_elegant-blog #top .minor-meta, .ingenium-implicit-bias #av-burger-menu-ul li { font-family: unset; }
.ingenium-implicit-bias * { box-sizing: content-box; }
.template-page .entry-content-wrapper .ingenium-implicit-bias h1 {
    letter-spacing: unset;
} 
.template-page .entry-content-wrapper .ingenium-implicit-bias h2 {
    text-transform: unset;
    letter-spacing: unset;
}


.ingenium-implicit-bias {
    font-family: 'Univers Next Pro', sans-serif;
    background-color: #aaa;
    color: black;
    font-size: 32px;
    font-size: 24px;
    font-size: 16px;
    /*
    width: 60em;
    height: 33.75em;
    */
    overflow: visible;
    margin: 0 !important;
    position: relative;
    max-width: none !important;
    min-height: calc(100vh - 90px); /* 90px is from the site header */
    box-sizing: content-box;
    overflow: hidden;
}

    body.admin-bar .ingenium-implicit-bias {
        min-height: calc(100vh - 90px - 32px);
    }

        @media screen and (max-width: 989px) {
            .ingenium-implicit-bias { min-height: 100vh; }
            body.admin-bar .ingenium-implicit-bias { min-height: calc(100vh - 32px); }
        }

        @media screen and (max-width: 782px) {
            body.admin-bar .ingenium-implicit-bias { min-height: calc(100vh - 46px); }
        }

        @media screen and (max-width: 600px) {
            body.admin-bar .ingenium-implicit-bias { min-height: 100vh; }
        }

.ingenium-implicit-bias ul {
    font-family: 'Univers Next Pro', sans-serif;
}

#keyMap {
    position: absolute;
    top: 33.75em;
    width: 60em;
    left: 0;
    padding-top: 0.5em;
    text-align: center;
}

    #keyMap ul {
        padding: 0.25em 0;
        margin: 0.25em 0;
        list-style-type: none;
        border-top: 1px solid black;
    }

    #keyMap li {
        display: inline-block;
        padding: 1em 2em;
        cursor: pointer;
    }

body.en .fr,
body.fr .en {
    display: none;
}

.hidden {
    display: none !important;
}

.screen {
    /*
    position: absolute;
    top: 0;
    left: 0;
    width: 60em;
    height: 33.75em;
    */
    width: 100%;
    height: 100%;
    padding: 1px 0;
    min-height: calc(100vh - 90px);
    box-sizing: border-box;
}

    .screen > * { box-sizing: content-box; }

    body.admin-bar .screen {
        min-height: calc(100vh - 90px - 32px);
    }

        @media screen and (max-width: 989px) {
            .screen { min-height: 100vh; }
            body.admin-bar .screen { min-height: calc(100vh - 32px); }
        }

        @media screen and (max-width: 782px) {
            body.admin-bar .screen { min-height: calc(100vh - 46px); }
        }

        @media screen and (max-width: 600px) {
            body.admin-bar .screen { min-height: 100vh; }
        }

    .screen > div > p,
    .question > div > p {
        padding: 0 18.85% 0 20%;
        font-size: 1.3340625em;
        line-height: 1.4em;
        max-width: none;
        margin: 1em 0;
    }

        .screen > div.fr > p,
        .question > div.fr > p {
            padding-right: 17.85%;
            padding-left: 19%;
            letter-spacing: -0.02em;
        }

        @media screen and (max-width: 480px) {
            .screen > div > p,
            .question > div > p { 
                padding-right: calc(18.85% - 1em);
                font-size: 1.25em;
            }
            .screen > div.fr > p,
            .question > div.fr > p {
                padding-right: calc(17.85% - 1em);
            }

            html[lang="de-DE"] .screen > div > p,
            html[lang="de-DE"] .question > div > p {
                hyphens: auto;
            }
        }

    .graphTitle {
        text-align: center;
        font-size: 1.3340625em;
        line-height: 1.4em;
        margin: 0;
    }

        .fr .graphTitle { letter-spacing: -0.015em; }

.ingenium-implicit-bias h1 {
    font-family: 'Univers Next Pro', sans-serif;
    text-transform: uppercase;
    background-color: white;
    border-color: black;
    border-style: solid;
    border-width: 0.375em 0.375em 0.375em 0;
    font-size: 1em !important;
    font-weight: 700;
    /* padding: 0 0 0 20%; */
    padding: 32px 32px 32px 20%;
    margin: 1.25em 20% 3.375em 0;
    /* height: 7em; */
    /* line-height: 6.25em; */
    line-height: normal;
    text-align: center;
    box-sizing: border-box;

    position: relative;
    z-index: 3;
    -webkit-hyphens: none;
    hyphens: none;
}

    @media screen and (max-width: 580px) {
        .ingenium-implicit-bias h1 { 
            -webkit-hyphens: manual;
            hyphens: manual;
        }
    }

    @media screen and (max-width: 480px) {
        .ingenium-implicit-bias h1 { 
            margin-right: calc(20% - 1.5em); 
            padding-left: calc(20% - 1.125em); 
        }
    }

    .fr h1,
    .de h1 {
        padding-left: 19%;
        margin-right: 19%
    }
        .fr #age h1,
        .fr #gender h1,
        .de #age h1,
        .de #gender h1 {
            padding-left: 15%;
            margin-right: 15%;
            letter-spacing: -0.02em;
        }
    
        @media screen and (max-width: 480px) {
            .fr h1,
            .de h1 {
                margin-right: calc(19% - 1.5em);
            }
                .fr #age h1,
                .fr #gender h1,
                .de #age h1,
                .de #gender h1 {
                    margin-right: calc(15% - 1.5em);
                }
        }

    .ingenium-implicit-bias h1::after {
        content: '';
        position: absolute;
        right: calc(100% - 3.855em);
        top: -0.375em;
        bottom: -0.375em;
        width: 3.855em;
        box-sizing: border-box;
        background-color: red;
        background-image: url('stripes.png');
        background-repeat: repeat;
        background-size: 3.03125em 3.03125em;
        border-color: black;
        border-style: solid;
        border-width: 0.375em 0.375em 0.375em 0;

        transform: translateX(-120%);   
        animation: slideInFromLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.375s 1 forwards;
    }

    @media screen and (max-width: 420px) {
        .ingenium-implicit-bias h1::after { 
            width: 2.855em; 
            right: calc(100% - 2.855em);
        }
    }

    .ingenium-implicit-bias h1 span { 
        font-size: 2.3125em;
        line-height: 0.9595em;
    }
    
        @media screen and (max-width: 512px) {
            .ingenium-implicit-bias .de h1 span { font-size: 2.1875em; }
        }
    
        @media screen and (max-width: 420px) {
            .ingenium-implicit-bias .fr h1 span { font-size: 2em; }
            .ingenium-implicit-bias .de h1 span { font-size: 1.875em; }
        }
    
        @media screen and (max-width: 360px) {
            .ingenium-implicit-bias .en h1 span { font-size: 2em; }
            .ingenium-implicit-bias .fr h1 span { font-size: 1.75em; }
            .ingenium-implicit-bias .de h1 span { font-size: 1.65em; }
        }

.ingenium-implicit-bias h2 {
    /*
    font-size: 1em !important;
    padding: 0 0 0 20%;
    margin: -1.375em 20% -0.875em 0;
    margin: -1.375em 20% 3em 0;
    */
    text-align: center;
    
    font-size: 1.33406em !important;
    /*
    margin: 3em 20% 3em 0;
    margin: 0 20% 0 0;
    padding: 2em 0 0em 20%;
    */

    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400;

    position: relative;
    left: 1.452em;
    max-width: calc(100% - 2.905em - 1em);
    padding: 2em 1em 0 1em;
    margin: 0 auto;
}

    @media screen and (max-width: 420px) {
        .ingenium-implicit-bias h2 {
            left: 1.078em;
            max-width: calc(100% - 2.905em);
        }
    }
    /*
    .ingenium-implicit-bias .fr h2 {
        padding-left: 10%;
        margin-right: 10%
    }
    */

    h2 span { font-size: 2.134375em; }

div.graph {
    display: inline-block;
    position: relative;
    width: 24em;
    height: 15.375em;
    margin: 3em 2em 1em;

    max-width: calc(100% - 64px);
}

    html[lang="fr-CA"] div.graph { margin-bottom: 2.25em; }
    html[lang="de-DE"] div.graph { margin-bottom: 2.25em; }

    /*
    @media screen and (max-width: 572px) {
        div.graph {
            max-width: calc(100% - 188px);
        }
    }
    */

    div.graph .canvasContainer {
        width: 100%;
        height: 100%;
    }

    div.graph .bottomLabel {
        position: relative;
        margin: 0 1.25em 0 2.375em;
        text-transform: uppercase;
        margin-top: 0.375em;
    }

        div.graph .bottomLabel > span {
            position: absolute;
            width: 42%;
            font-size: 0.625em;
            text-align: center;
            border-top: 0.2em solid black;
            padding-top: 0.3em;
            box-sizing: border-box;
            line-height: 1em;
            hyphens: auto;
        }

            .fr div.graph .bottomLabel > span { letter-spacing: -0.02em; }

            div.graph .bottomLabel > span:first-child { 
                padding-left: 1.4em; 
                left: 0.1em; 
            }
            div.graph .bottomLabel > span:last-child { 
                padding-right: 1.4em; 
                right: -0.5em; 
                right: 0;
            }

                div.graph .bottomLabel > span::before {
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: 0.5em solid transparent;
                    border-bottom: 0.5em solid transparent;
                    position: absolute;
                    top: -0.6em;
                }

                    div.graph .bottomLabel > span:first-child::before {
                        border-right: 1em solid black;
                        left: -0.5em;
                    }
                    div.graph .bottomLabel > span:last-child::before {
                        border-left: 1em solid black;
                        right: -0.5em;
                    }

#wordCloud {
    width: 100%;
    height:100%;
}

.arrow-down {
    width: 0px;
    height: 0px;
    border-left: 0.8125em solid transparent !important;
    border-right: 0.8125em solid transparent !important;
    border-top: 1.375em solid white !important;
}

.arrow-up {
    width: 0px;
    height: 0px;
    border-left: 0.8125em solid transparent !important;
    border-right: 0.8125em solid transparent !important;
    border-bottom: 1.375em solid white !important;
}

.mainTitle {
    background-color: white;
    border: 0.375em solid black;
    position: absolute;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 1em 0;
    box-sizing: border-box;
    width: 17.75em;
    /* height: 9.25em;
    top: 13.0625em; */
    z-index: 2;

    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

    @media screen and (max-width: 480px) {
        .mainTitle { font-size: 0.8em; }
    }

    .mainTitle span { 
        font-size: 2.3125em; 
        line-height: 0.9595em;
    }

        html[lang="de-DE"] .mainTitle span { 
            font-size: 2em;
        }

    button.btnContinue {
        background-color: black !important;
        border: none !important;
        outline: 0.162em solid transparent;
        color: white !important;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        padding: 0.432em;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 2.3125em; 
        line-height: 0.9595em;
        display: block;
        margin: 0.5em auto;
        cursor: pointer;
    }

        /*
        @media screen and (max-width: 480px) {
            .fr button.btnContinue { font-size: 1.85em; }
        }

        @media screen and (max-width: 400px) {
            .fr button.btnContinue { font-size: 1.3875em; }
        }    
        */

        button.btnContinue:hover { outline-color: #fbdb65; }

.instructions {
    position: absolute;
    z-index: 2;
    bottom: 0;
    /* height: 4.625em; */
    box-sizing: border-box;
    left: 0;
    right: 0;
    border-top: 0.375em solid black !important;
    background-color: black;
    color: white;
    text-align: center;

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

    .instructions > div,
    .instructions > p {
        font-size: 1.0625em !important;
        /* margin: 0; */
    }
        @media screen and (max-height: 480px) {
            .instructions > div,
            .instructions > p {
                font-size: 0.8em !important;
            }
        }

    .instructions .en {
        width: 50%;
        position: absolute;
        left: 0;
    }

    .instructions .fr {
        width: 50%;
        position: absolute;
        right: 0;
    }
        #graphs .instructions .en {
            position: unset;
            right: unset;
            width: unset;
        }

        #graphs .instructions .fr {
            position: unset;
            left: unset;
            width: unset;
        }

    .instructions .arrow-down,
    .instructions .arrow-up {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* bottom: 1em; */
    }

#screensaver {
    background-color: black;
    height: calc(100vh - 90px);
}

    body.admin-bar #screensaver {
        height: calc(100vh - 90px - 32px);
    }

        @media screen and (max-width: 989px) {
            #screensaver { min-height: 100vh; }
            body.admin-bar #screensaver { min-height: calc(100vh - 32px); }
        }

        @media screen and (max-width: 782px) {
            body.admin-bar #screensaver { height: calc(100vh - 46px); }
        }

        @media screen and (max-width: 600px) {
            body.admin-bar #screensaver { min-height: 100vh; }
        }

    #screensaver .instructions {
        background-color: white;
        color: black;
        padding: 0.5em;
    }

        #screensaver .instructions .arrow-down { border-top-color: black; }
        #screensaver .instructions .arrow-up { border-bottom-color: black; }

#intro.screen > div::after,
#demographics.screen > div::after,
#results.screen > div::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3.5em;
    border-right: 0.375em solid black;
    z-index: 2;
}

    @media screen and (max-width: 420px) {
        #intro.screen > div::after,
        #demographics.screen > div::after,
        #results.screen > div::after { width: 2.5em; }
    }

/*
.nextScreen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3.5em;
    border-right: 0.375em solid black;
    z-index: 2;

    opacity: 0.5;
    display: none;
}

    .nextScreen::after {
        content: '';
        position: absolute;
        left: 0;
        top: 1.25em;
        width: 3.5em;
        height: 7em;
        box-sizing: border-box;
        background-color: white;
        background-image: url('stripes.png');
        background-repeat: repeat;
        background-size: 3.03125em 3.03125em;
        border-color: black;
        border-style: solid;
        border-width: 0.375em 0;
    }
*/

#intro { background-color: #b288b9; }
#intro .nextScreen,
#intro.screen > div::after,
#intro2 { background-color: #fbdb65; }
#intro2 .nextScreen,
#intro3 { background-color: #71c5e8; }
#intro3 .nextScreen { background-color: #ff808b; }

#intro h1 { margin-bottom: 1.125em; }
#intro p img {
    width: 1.1875em;
    height: 1.3125em;
    vertical-align: middle;
    margin: 0 0.25em;
}
#intro p img:nth-child(1) { margin-right: 0.375em; }
#intro p img:nth-child(2) { margin-left: 0.375em; }


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInFromLeft {
    from { transform: translateX(-120%); } 
    to { transform: translateX(0%); }
}

@keyframes slideInFromTop {
    from { transform: translateY(-120%); }
     to { transform: translateY(0%); }
}

/* animated transitions */

#intro h1 {
    transform: translateX(-120%);        
    animation: slideInFromLeft 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
}

#intro.screen > div::after {
    transform: translateX(-120%);        
    animation: slideInFromLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.375s 1 forwards;
}

#intro p,
#intro ul {
    opacity: 0;        
    animation: fadeIn 0.5s ease-out 0.5s 1 forwards;
}

#intro3 ul { animation-delay: 0.75s; }
#intro3 p:nth-of-type(2) { animation-delay: 1s; }

#intro .instructions p {
    opacity: 0;        
    animation: fadeIn 0.5s ease-out 0.75s 1 forwards;
}




#countdown {
    background-color: white;
    background-image: url('stripes.png');
    background-repeat: repeat;
    background-size: 3.03125em 3.03125em;
    /* line-height: 33.75em; */
}

    #countdown::before,
    #countdown::after {
        content: '';
        position: absolute;
        display: block;
        border-color: black;
        border-style: solid;
        box-sizing: border-box;
    }

    @keyframes horizOpen {
        from {   
            left: 30em;
            right: 30em;      
        } to {
            left: 14.75em;
            right: 14.75em;
        }
    }

    @keyframes horizOpenSmall {
        from {   
            left: 50%;
            right: 50%;      
        } to {
            left: 30%;
            right: 30%;
        }
    }

    @keyframes vertOpen {
        from {   
            top: 16.875em;
            bottom: 16.875em; 
        } to {
            top: 1.625em;
            bottom: 1.625em;
        }
    }

    #countdown::before {
        top: 0;
        bottom: 0;
        left: 30em;
        right: 30em;
        border-width: 0 0.375em;
        animation: horizOpen 0.375s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
    }

    #countdown::after {
        top: 16.875em;
        bottom: 16.875em;
        left: 0;
        right: 0;
        border-width: 0.375em 0;
        animation: vertOpen 0.375s cubic-bezier(0.23, 1, 0.32, 1) 0.05s 1 forwards;
    }

    @media screen and (max-width: 960px) {
        #countdown::before {
            left: 50%;
            right: 50%;
            animation: horizOpenSmall 0.375s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
        }
    }

    #countdown .number,
    #countdown .start {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        text-transform: lowercase;
        z-index: 2;

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

        #countdown .number { font-size: 12em; }
        #countdown .start { font-size: 8em; }

        @media screen and (max-width: 640px) {
            #countdown .number { font-size: 9em; }
            #countdown .start { font-size: 6em; }
        }

        @media screen and (max-width: 480px) {
            #countdown .number { font-size: 6em; }
            #countdown .start { font-size: 4em; }
        }

    #countdown.state_3::before { background-color: #6dcdb8; }
    #countdown.state_3::after { background-color: #ff808b; }
    #countdown.state_2::before { background-color: #b288b9; }
    #countdown.state_2::after { background-color: #6dcdb8; }
    #countdown.state_1::before { background-color: #fbdb65; }
    #countdown.state_1::after { background-color: #b288b9; }
    #countdown.state_0::before { background-color: #71c5e8; }
    #countdown.state_0::after { background-color: #fbdb65; }

#test {
    background-color: #6dcdb8;
    padding-top: 16em;
    text-align: center;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    /* align-items: flex-start; */
    /* align-content: flex-start; */
}

        @media screen and (max-height: 560px) {
            #test { 
                padding-top: 13em; 
                align-items: flex-start;
            }
        }

        @media screen and (max-height: 480px) {
            #test { 
                padding-top: 9em; 
                align-items: flex-start;
            }
        }

    #test .categoryWrapper {
        /*
        margin: 1em auto;
        display: flex;
        min-height: 5.0625em;
        */
        outline: 0.375em solid transparent;
        cursor: pointer;

        height: auto;
        min-height: 5.5em;
        max-height: 10em;
        width: 40%;
        margin: 1em 4%;
        box-sizing: border-box;
    }

        #test .categoryWrapper:hover { outline-color: #fbdb65; }

    #test #wordWrapper {
        position: absolute;
        top: 1.625em;
        left: 3em;
        right: 3em;
        height: 12em;
        line-height: 12em;
        text-align: center;
        vertical-align: middle;
        background-color: white;
        border: 0.375em solid black;
    }

        @media screen and (max-width: 480px) {
            #test #wordWrapper {
                left: 2em;
                right: 2em;
            }
        }

        @media screen and (max-height: 560px) {
            #test #wordWrapper {
                height: 9em;
                line-height: 9em;
            }
        }

        @media screen and (max-height: 480px) {
            #test #wordWrapper {
                height: 5em;
                line-height: 5em;
            }
        }

        #test #wordWrapper #timer {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            bottom: 0;
            background-color: #fbdb65;
            z-index: 1;
        }
            #test #wordWrapper #timer.timing {
                transition: width 2.875s linear, background-color 0s linear 2.875s;
                width: 100%;
                background-color: #ff808b;
            }

        #test #wordWrapper #word {
            position: relative;
            z-index: 2;
        }


        #test #word span { 
            font-size: 8em; 
            font-weight: bold;
        }

            html[lang="fr-CA"] #test #word span { font-size: 7em; }
            html[lang="de-DE"] #test #word span { font-size: 5.5em; }

            @media screen and (max-width: 960px) {
                html[lang="de-DE"] #test #word span { font-size: 4.5em; }
            }

            @media screen and (max-width: 768px) {
                #test #word span { font-size: 5.75em; }
                html[lang="fr-CA"] #test #word span { font-size: 4.5em; }
                html[lang="de-DE"] #test #word span { font-size: 2.75em; }
            }

            @media screen and (max-width: 540px) {
                #test #word span { font-size: 4.75em; }
                html[lang="fr-CA"] #test #word span { font-size: 3.75em; }
                html[lang="de-DE"] #test #word span { font-size: 2.5em; }
            }

            @media screen and (max-width: 480px) {
                #test #word span { font-size: 4em; }
                html[lang="fr-CA"] #test #word span { font-size: 3.25em; }
                html[lang="de-DE"] #test #word span { font-size: 2.25em; }
            }

            @media screen and (max-width: 400px), (max-height: 480px) {
                #test #word span { font-size: 3.5em; }
                html[lang="fr-CA"] #test #word span { font-size: 3em; }
                html[lang="de-DE"] #test #word span { font-size: 1.75em; }
            }

            @media screen and (max-width: 360px) {
                #test #word span { font-size: 3em; }
                html[lang="fr-CA"] #test #word span { font-size: 2.5em; }
                html[lang="de-DE"] #test #word span { font-size: 1.5em; }
            }

    #test .instructions p { 
        margin-top: 0.5em; 
        padding: 0 calc(20% + 1.625em); 
        line-height: 1.125em;
    }
        @media screen and (max-height: 480px) {
            #test .instructions p { 
                margin-top: 0.25em; 
                margin-bottom: 0.5em; 
            }
        }
    /*
    #test .instructions .arrow-down,
    #test .instructions .arrow-up { bottom: 1.75em; }
    */
    #test .instructions .arrow-down:nth-of-type(1),
    #test .instructions .arrow-up:nth-of-type(1) { left: 20%; }
    #test .instructions .arrow-down:nth-of-type(2),
    #test .instructions .arrow-up:nth-of-type(2) { left: 80%; }

    #test .instructions.fr p { margin-top: 0.25em; line-height: 1.125em; }
    #test .instructions.fr .arrow-down:nth-of-type(1),
    #test .instructions.fr .arrow-up:nth-of-type(1) { left: 15%; }
    #test .instructions.fr .arrow-down:nth-of-type(2),
    #test .instructions.fr .arrow-up:nth-of-type(2) { left: 85%; }

#halfway {
    background-color: #6dcdb8;
}

    #halfway > div > p:first-child { margin-top: 2.5em; }

    #halfway .columnHeaders {
        /*
        position: absolute;
        top: 21.75em;
        */
        margin: 0 0 3em;
    }

    #halfway p,
    #halfway ul,
    #halfway .btnContinue {
        opacity: 0;        
        animation: fadeIn 0.5s ease-out 0.75s 1 forwards;
    }

    #halfway ul { animation-delay: 2.5s; }
    #halfway p:nth-of-type(2) { animation-delay: 1.5s; } 
    #halfway .btnContinue { animation-delay: 4.5s; }    

.stripeEdge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3.5em;
    border-right: 0.375em solid black;
    background-color: white;
    background-image: url('stripes.png');
    background-repeat: repeat;
    background-size: 3.03125em 3.03125em;
}
    @media screen and (max-width: 420px) {
        .stripeEdge { width: 2.5em; }
    }

#noresults {
    background-color: #fbdb65;
}

    #noresults button.btnContinue:hover { outline-color: #b288b9; }

    #noresults > div > p:first-child { margin-top: 6.37em; }

    #noresults .btnContinue {
        display: inline-block;
        margin-right: 18.85%;
        margin-left: 20%;
    }

        #noresults div.fr .btnContinue {
            margin-right: 17.85%;
            margin-left: 19%;
        }

        @media screen and (max-width: 420px) {
            #noresults .btnContinue {
                margin-right: calc(18.85% - 1em);
            }
            #noresults div.fr .btnContinue {
                padding-right: calc(17.85% - 1em);
            }
        } 


.demographicsSelect {
    list-style-type: none;
    /* padding: 0 18.85% 0 20%; */
    margin-top: 2.125em;
    text-align: center;

    position: relative;
    left: 1.9375em;
    max-width: calc(100% - 3.875em - 1em);
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto;
}

    /*
    .fr .demographicsSelect {
        padding-right: 17.85%;
        padding-left: 19%;
    }

        @media screen and (max-width: 480px) {
            .demographicsSelect { 
                padding-right: calc(18.85% - 1em);
                font-size: 1.25em;
            }
            .fr .demographicsSelect {
                padding-right: calc(17.85% - 1em);
            }
        } 
    */
        @media screen and (max-width: 420px) {
            .demographicsSelect {
                left: 1.4375em;
                max-width: calc(100% - 3.875em);
            }
        }


    /* #gender .demographicsSelect { padding: 0 5%; } */

    .demographicsSelect li {
        display: inline-block;
        background-color: white;
        /*
        padding: 0 1.75em;
        height: 3.5em;
        border: 0.25em solid black;
        line-height: 3.125em;
        margin: 0.875em 0.875em 1em;
        */
        box-sizing: border-box;
        position: relative;
        font-weight: bold;
        cursor: pointer;

        padding: 0.125em 0.75em !important;
        min-height: 2.75em;
        border: 6px solid #000;
        line-height: 1em;
        margin: 0.5em !important;
        font-size: 1.875em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        @media screen and (max-width: 480px) {
            .demographicsSelect li { font-size: 1.5em; }
        }

        .demographicsSelect li:hover { background-color: #ff808b; }
        #age .demographicsSelect li:hover { background-color: #b288b9; }
        #gender .demographicsSelect li:hover { background-color: #fbdb65; }

        .demographicsSelect li:hover,
        .demographicsSelect li.selected {
            box-shadow: 0.25em 0.25em 0 black;
            left: -0.25em;
            /* margin-right: 0.65em; */
            top: -0.25em;
            /* margin-bottom: 0.25em; */
        }    

            .demographicsSelect li.selected::after {
                position: absolute;
                content: '';
                width: 2.6875em;
                height: 2.0625em;
                top: -0.75em;
                right: -1.5em;
                background-image: url('checkmark.png');
                background-repeat: no-repeat;
                background-size: 2.6875em 2.0625em;
            }
        
        /*
        .demographicsSelect li span {
            font-size: 1.77875em;
        }
        */


#demographics { 
    background-color: #71c5e8; 
    padding-bottom: 2.5em;
}

    #demographics > div::after { background-color: #fbdb65; }

    /* #demographics #permission > div > p { margin-top: 7.125em; } */

    #demographics .stripeEdge,
    #noresults .stripeEdge {
        transform: translateX(-120%);        
        animation: slideInFromLeft 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
    }

    #demographics h1 {
        transform: translateX(-120%);        
        animation: slideInFromLeft 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
    }

    #demographics.screen > div::after {
        transform: translateX(-120%);        
        animation: slideInFromLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.375s 1 forwards;
    }

    #demographics button.btnContinue { 
        left: 0.838em;
        position: relative;
        max-width: calc(100% - 1.676em - 1em);
    }
        @media screen and (max-width: 420px) {
           #demographics button.btnContinue { 
                left: 0.622em;
                max-width: calc(100% - 1.676em);
            }
        }

    #demographics p,
    #demographics ul,
    #demographics h2,
    #demographics .instructions > *,
    #noresults p,
    #noresults .instructions > * {
        opacity: 0;        
        animation: fadeIn 0.5s ease-out 0.5s 1 forwards;
    }

    #demographics ul { animation-delay: 0.75s; }
    #demographics p:nth-of-type(2),
    #noresults p:nth-of-type(2) { animation-delay: 1s; }
    #demographics .instructions > *,
    #noresults .instructions > * { animation-delay: 1.25s; }    

#intro .instructions > *,
#intro2 .instructions > *,
#intro3 .instructions > * {
    opacity: 0;        
    animation: fadeIn 0.5s ease-out 0.75s 1 forwards;
}


    div.question {
        padding-bottom: 2.5em;
        border-bottom: 0.375em solid #000;
    }
    #demographics #permission { border-bottom: none; }

    .questions { border-top: 0.375em solid #000; }

    #demographics #age { background-color: #ff808b; margin-bottom: 3.5em; }
    #demographics #age .nextScreen,
    #demographics #gender { background-color: #6dcdb8; }
    #demographics #gender .nextScreen { background-color: #b288b9; }



#results { 
    background-color: #fbdb65; 
    padding-bottom: 2.5em;
}

    #results h1 {
        transform: translateX(-120%);        
        animation: slideInFromLeft 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
    }

    #results.screen > div::after {
        transform: translateX(-120%);        
        animation: slideInFromLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.375s 1 forwards;
        background-color: #b288b9;
    }

    #graphs div.group {
        padding-bottom: 3.5em;
        border-bottom: 0.375em solid #000;
    }

.resultsTitleBar {
    /* height: 6.5em; */
    background-color: black;
    border-bottom: 0.375em solid black !important;
    box-sizing: border-box;
    color: white;
    position: relative;
    z-index: 2;

    transform: translateY(-120%);
    animation: slideInFromTop 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s 1 forwards;
}

    html[lang="de-DE"] .resultsTitleBar { hyphens: auto; }

    .resultsTitleBar .label {
        float: left;
        height: 100%;
        color: black;
        background-color: white;
        width: 14.75em;
        text-align: center;
        line-height: 6.125em;
        text-transform: uppercase;
        font-weight: bold;
        margin-right: 2em;
    }

        .resultsTitleBar .label span { font-size: 2.3125em; }

    /*
    .resultsTitleBar .messages {
        margin: 0;
        padding: 0.875em calc(20% - 62px) 0.875em 20%;
    }
    */

    .resultsTitleBar .messages,
    #results #graphs p.graphTitle {
        position: relative;
        left: 31px;
        max-width: calc(100% - 62px - 1em);
        margin: 0 auto;        
    }

        #results #graphs p.graphTitle { padding: 2em 2em 0 2em; }
        .resultsTitleBar .messages { padding: 2em 3em 2em 4em; }

        /*
        html[lang="fr-CA"] .resultsTitleBar .messages,
        html[lang="fr-CA"] #results #graphs p.graphTitle {
            padding-right: 17.85%;
            padding-left: 19%;
        }
        */

        @media screen and (max-width: 420px) {
            /*
            .resultsTitleBar .messages,
            #results #graphs p.graphTitle {
                padding-right: calc(18.85% - 1em);
            }
            html[lang="fr-CA"] .resultsTitleBar .messages,
            html[lang="fr-CA"] #results #graphs p.graphTitle {
                padding-right: calc(17.85% - 1em);
            }
            */
            .resultsTitleBar .messages,
            #results #graphs p.graphTitle {
                left: 23px;
                max-width: calc(100% - 62px);
            }
        } 



        .resultsTitleBar .messages li {
            font-weight: bold;
            margin: 0.75em 0;
            line-height: 1.75em;
            opacity: 0;
            animation: fadeIn 1s ease-out 0.5s 1 forwards;
        }

            .resultsTitleBar .messages li:nth-of-type(1) { animation-delay: 0.5s; }
            .resultsTitleBar .messages li:nth-of-type(2) { animation-delay: 1.25s; }

            .resultsTitleBar .messages li span { font-size: 1.6em; }
            .resultsTitleBar .messages li span.fr { 
                font-size: 1.3em; 
                line-height: 0.8em;
            }

#results .graphsContainer {
    padding: 0 0 0 3.875em;
    text-align: center;
}

    @media screen and (max-width: 420px) {
        #results .graphsContainer {
            padding: 0 0 0 2.875em;
        }
    }
}

#results #graphs {
    /*
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    */
}

    #results #graphs .group {
        display: none;
    }

        #results #graphs .group.hasData {
            display: block;
        }

    #graphs #genderGraphs { background-color: #71c5e8; }
    #graphs #ageGraphs { background-color: #ff808b; }
    #graphs #everyoneGraphs { background-color: #fbdb65; }

    #graphs button.btnContinue { 
        margin-top: 1.5em;
        left: 0.838em;
        position: relative;
        max-width: calc(100% - 1.676em - 1em);
    }
    #graphs button.btnContinue:hover { outline-color: #ff808b; }

    @media screen and (max-width: 420px) {
       #graphs button.btnContinue { 
            left: 0.622em;
            max-width: calc(100% - 1.676em);
        }
    }


    #results #graphs p.graphTitle,
    #results #graphs div.graph {
        opacity: 0;        
        animation: fadeIn 0.5s ease-out 0.75s 1 forwards;
    }
    #results #graphs div.graph { animation-duration: 0.75s; }
    /*
    #results #graphs div.graph:nth-of-type(1) { animation-delay: 2.0s; }
    #results #graphs div.graph:nth-of-type(2) { animation-delay: 2.75s; }
    */
    #results #graphs div.graph { animation-delay: 1.75s; }

    #results .instructions > * {
        opacity: 0;        
        animation: fadeIn 0.5s ease-out 2.75s 1 forwards;
    }


    #results #graphs #everyoneGraphs.firstTime p.graphTitle,
    #results #graphs #everyoneGraphs.firstTime div.graph { animation-delay: 2.5s; }
    /*
    #results #graphs #everyoneGraphs div.graph:nth-of-type(1) { animation-delay: 3.75s; }
    #results #graphs #everyoneGraphs div.graph:nth-of-type(2) { animation-delay: 4.50s; }
    */
    #results #graphs #everyoneGraphs.firstTime div.graph { animation-delay: 4.0s; }

    #results #everyoneGraphs.firstTime .instructions > * { animation-delay: 5s; }

.columnHeaders {
    list-style-type: none;
    padding: 0;
    margin: 0 1.875em 0 3.875em;
    margin: 0 3.875em;
    text-align: center;
    -webkit-hyphens: none;
    hyphens: none;
}

    .columnHeaders li,
    .categoryWrapper {
        /* display: inline-block;
        line-height: 5.0625em; */
        background-color: black;
        text-transform: uppercase;
        color: white;
        font-weight: bold;
        text-align: center;
        height: 5.0625em;
        width: 22.375em;
        vertical-align: middle;

        padding: 0 1em;
        margin: 0.5em 2.3125em;
        display: inline-flex;
        line-height: normal;
        align-items: center;
        justify-content: center;
        -webkit-hyphens: none;
        hyphens: none;
    }

        @media screen and (max-width: 480px) {
            .columnHeaders { margin-left: 20%; }
            .columnHeaders li,
            .categoryWrapper { margin: 0.5em 0; }
        }

        .categoryWrapper { 
            text-shadow: 0 0 0 transparent;
            transition: color 0.25s, background-color 0.25s, text-shadow 0.25s;
        }

        .categoryWrapper.pressed {
            color: black;
            background-color: #fbdb65;
            text-shadow: 0 0 5px #fcecb1; 
            transition: color 0s, background-color 0s, text-shadow 0s;
        }

        /*
        .columnHeaders li:first-child,
        .categoryWrapper:first-child {
            margin-left: 5.3125em;
            margin-right: 4.625em;
        }
        */

        .columnHeaders span,
        .categoryWrapper .category { font-size: 2.2234375em; }

            html[lang="de-DE"] .columnHeaders span,
            html[lang="de-DE"] .categoryWrapper .category { font-size: 1.875em; }

        @media screen and (max-width: 900px) and (min-height: 481px) {
            html[lang="de-DE"] .categoryWrapper { 
                -webkit-hyphens: auto;
                hyphens: auto; 
            }
        }

        @media screen and (max-width: 540px) and (max-height: 480px) {
            html[lang="de-DE"] .categoryWrapper { 
                -webkit-hyphens: auto;
                hyphens: auto; 
            }
        }

        @media screen and (max-width: 600px) {
            .columnHeaders li, .categoryWrapper { font-size: 0.875em; }
        }

        @media screen and (max-width: 480px) {
            .columnHeaders li, .categoryWrapper { font-size: 0.75em; }
        }

        @media screen and (max-width: 400px), (max-height: 480px) {
            .columnHeaders li, .categoryWrapper { font-size: 0.6em; }
        }

        .columnHeaders em {
            font-style: normal;
            color: #fbdb65;
            animation: pulse 0.5s linear 0s infinite alternate;
        }

        @keyframes pulse {
            from { color: #fbdb65; text-shadow: 0 0 0 transparent; }
            to { color: #ffffff; text-shadow: 0 0 5px #fcecb1;  }
        }

.timeout.overlay {
    position: absolute;
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    top:0;
    left:0;
}
.timeout.prompt {
    width: 14em;
    background-color: rgb(255, 255, 255);
    border: 0.375em solid black;
    position: absolute;
    padding: 1em;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
    text-align: center;
}
.timeout.prompt > span { font-size: 1.3340625em; }

.timeout.prompt .progress {
    height: 1em;
    position: relative;
    margin-top: 1em;
    background-color: #aaa;
}

.timeout.prompt .progress .bar {
    height: 100%;
    background-color: black;
    width: 0;
}

.timeout.prompt .progress .bar.transition {
    transition: width 15s linear;
}