/* WELCOME */

.welcome {
    background: url(/SVGs/1welcome/Welcome%20Screen-01.svg);
}

.welcome .get-started {
    position: absolute;
    right: 24%;
    bottom: 25%;
    width: 24%;
    transition: all .1s;
}

.welcome .get-started:hover {
    transform: scale(1.1);
}

.welcome .get-started:active {
    transform: scale(1);
}

.welcome .get-started svg path,
.welcome .get-started svg g path {
    transition: fill .1s;
}

.welcome .get-started:hover svg path {
    fill: #005CB3 !important;
}

.welcome .get-started:hover svg g path {
    fill: white !important;
}

/* DIRECTORATE */

.directorate {
    background: url(/SVGs/2directorate/Directorate%20Screen%20-%20BG-02.svg);
}

.directorate .select {
    position: absolute;
    top: 55%;
    left: 25%;
    font-size: 1.7vw !important;
}

.directorate .selectBox-dropdown {
    width: 50% !important;
    min-width: 50% !important;
    height: 11%;
    background: rgb(68, 149, 209);
    border: 4px solid white;
    box-shadow: none;
    border-radius: 2px;
    color: white;
    font-size: 15px !important;
    cursor: pointer;
}

.directorate .selectBox-dropdown .selectBox-arrow {
    border-left: 4px solid white;
    background-color: rgb(0, 74, 143);
    width: 20%;
    background-size: 50%;
}

.directorate .selectBox-label {
    width: 77% !important;
    padding: 5%;
}

.selectBox-options LI A {
    color: rgb(68, 149, 209);
    padding: 3% 6%;
}

/* QUESTION 1 */

.question1 {
    background: url(/SVGs/3q1/Question%201%20-%20BG-03.svg);
}

.question1 #time-machine-fill-div {
    left: 36%;
    top: 42%;
    width: 27%;
}

.question1 #time-machine-stroke-div {
    left: 35.1%;
    top: 39.8%;
    width: 26.5%;
}

.question1 .input + .label svg > g > path {
    fill: rgba(68, 149, 209, 0) !important;
    /* invisible light blue */
}

.question1 .input:checked + .label svg > g > path {
    fill: #4495D1 !important;
    /* light blue */
}

/* QUESTION 2 */

.question2 {
    background: url(/SVGs/4q2/4%20-%20Question%202%20-%20BG-04.svg);
}

.question2 .bean {
    position: absolute;
    left: 18%;
    top: 28%;
    width: 23%;
    height: 37%;
    background:url(../SVGs/4q2/4%20-%20Question%202%20-%20Keen%20Bean%20Standard%20State.svg) no-repeat;
    background-size: contain;
}

.question2 .bean:hover {
    background:url(../SVGs/4q2/4%20-%20Question%202%20-%20Keen%20Bean%20Hover%20State.svg) no-repeat;
    background-size: contain;
}

.question2 .atom {
    position: absolute;
    right: 15%;
    top: 35%;
    width: 24%;
    height: 40%;
    background:url(../SVGs/4q2/4%20-%20Question%202%20-%20Atom%20Standard%20State.svg) no-repeat;
    background-size: contain;
}

.question2 .atom:hover {
    background:url(../SVGs/4q2/4%20-%20Question%202%20-%20Atom%20Hover%20State.svg) no-repeat;
    background-size: contain;
}

/*
.question2 #label-q2-a {
    bottom: 11%;
    left: 7%;
}

.question2 #label-q2-b {
    top: 11%;
    right: 7%;
}
*/

/* QUESTION 3 */

.question3 {
    background: url(/SVGs/5q3/5%20-%20Question%203%20-%20BG-05.svg);
}

.question3 #q3-question-number {
    left: 45%;
    top: 2%;
    width: 5%;
}

.question3 #q3-question-text {
    position:absolute;
    left: 28%;
    top: 7%;
    width: 40%;
}

.question3 #island {
    left: 41%;
    top: 62%;
    width : 19%;
}

.question3 #island-trimming {
    left: 39%;
    top: 50%;
    width: 23%;
}

/* QUESTION 4 */

.question4 {
    background: url("/SVGs/6q4/6%20-%20Question%204%20-%20BG.svg");
}

.question4 #q4-question-number {
    left: 4%;
    top: 3%;
    width: 5%;
}

.question4 #q4-question-text {
    position: absolute;
    left: 7%;
    top: 5%;
    width: 32%;
}

.question4 .label {
    transition: transform .1s, opacity .1s;
    opacity: 1;
}

.question4 .label div {
    width: 100%;
}

.question4 .top-row {
    top: 29%;
}

.question4 .bottom-row {
    top: 57%;
}

.question4 #label-q4-a {
    left: 13%;
    width: 24%;
}

.question4 #label-q4-b {
    left: 30%;
    width: 17%;
}

.question4 #label-q4-c {
    left: 44%;
    width: 14%;
}

.question4 #label-q4-d {
    left: 56%;
    width: 19%;
}

.question4 #label-q4-e {
    left: 69%;
    width: 20%;
}

/* QUESTION 5 */

.question5 {
    background: url(/SVGs/7q5/7%20-%20Question%205%20-%20BG.svg);
}

.question5 #float-fill-div {
    left: 18%;
    top: 34%;
    width: 17%;
}

.question5 #float-stroke-div {
    left: 16.4%;
    top: 29.25%;
    width: 20.1%;
}

.question5 #compass-fill-div {
    right: 18%;
    top: 35%;
    width: 18%;
}

.question5 #compass-stroke-div {
    right: 18.8%;
    top: 31.7%;
    width: 16.4%;
}

/* 

.question5 #label-q5-a {
    bottom: 11%;
    left: 7%;
}

.question5 #label-q5-b {
    top: 11%;
    right: 7%;
}

*/

/* QUESTION 6 */

.question6 {
    background: url("/SVGs/8q6/305NAT_Pride_v6-08-%20BG.svg");
}

.question6 #q6-question-number {
    left: 45%;
    top: 2%;
    width: 5%;
}

.question6 #q6-question-text {
    position:absolute;
    left: 32%;
    top: 7%;
    width: 32%;
}

.question6 #mask {
    left: 39%;
    top: 41%;
    width: 22%;
}

.question6 #mask-trimming {
    left: 37%;
    top: 42.5%;
    width: 26.5%;
}

/* QUESTION 7 */

.question7 {
    background: url("/SVGs/9q7/9%20-%20Question%207%20-%20BG-09.svg");
}

.question7 .scratch-card {
    top: 37%;
    left: 40%;
    width: 23%;
}

/* QUESTION 8 */

.question8 {
    background: url("/SVGs/10q8/Background-10.svg");
}

.question8 .history-hero {
    width: 17%;
}

.question8 #scroll {
    width: 26%;
    top: 39%;
    left: 38%;
}

.question8 #scroll-trimming {
    top: 32%;
    left: 37%;
    width: 28%;
}

.question8 #label-q8-a {
    top: 17%;
    left: 17%;
}

.question8 #label-q8-b {
    left: 10%;
    top: 39%;
}

.question8 #label-q8-c {
    left: 16%;
    top: 64%;
}

.question8 #label-q8-d {
    left: 70%;
    top: 23%;
}

.question8 #label-q8-d {
    left: 70%;
    top: 21%;
}

.question8 #label-q8-e {
    left: 75%;
    top: 48%;
}

.question8 .input + .label.speech-bubble svg > g > g:first-of-type > path {
    stroke: rgba(255, 255, 255, 1) !important;
    fill: rgba(0, 74, 143, 0) !important;
    transition: fill .1s, stroke .2s;
}

.question8 .input:checked + .label.speech-bubble svg > g > g:first-of-type > path {
    stroke: rgba(255, 255, 255, 0) !important;
    fill: rgba(0, 74, 143, 1) !important;
}

.question8 .input:checked + .label.speech-bubble svg > g > g:first-of-type > path > g > path {
    stroke: rgba(255, 255, 255, 1) !important;
}

/* QUESTION 9 */

.question9 {
    background: url(/SVGs/11q9/Background-11.svg);
}

.question9 #even-fill-div {
    left: 23.8%;
    top: 44.6%;
    width: 4.5%;
}

.question9 #even-stroke-div {
    left: 10.4%;
    top: 35.25%;
    width: 31.1%;
}

.question9 #level-fill-div {
    right: 18%;
    top: 35%;
    width: 18%;
}

.question9 #level-stroke-div {
    right: 18%;
    top: 34.9%;
    width: 18%;
}

/*

.question9 #label-q9-a {
    bottom: 11%;
    left: 7%;
}

.question9 #label-q9-b {
    top: 11%;
    right: 7%;
}

*/

.question9 .input + .label svg > g > path {
    fill: rgba(68, 149, 209, 0) !important;
    /* invisible light blue */
}

.question9 .input:checked + .label svg > g > path {
    fill: #4495D1 !important;
    /* light blue */
}

/* QUESTION 10 */

.question10 {
    background: url("/SVGs/12q10/Background-12.svg");
}

.question10 #label-q10-a {
    top: 41%;
    left: 10%;
    width: 14%;
}

.question10 #label-q10-b {
    top: 32.4%;
    left: 25%;
    width: 14%;
}

.question10 #label-q10-c {
    top: 38.1%;
    left: 40%;
    width: 14%;
}

.question10 #label-q10-d {
    top: 31.2%;
    left: 56%;
    width: 14%;
}

.question10 #label-q10-e {
    top: 42.4%;
    left: 72%;
    width: 14%;
}

.question10 .label {
    transform-origin: center bottom;
}