@font-face {
    font-family: nbs-medium;
    src: url(../fonts/NBS-Medium-Embedded.ttf);
}

@font-face {
    font-family: vince-hand;
    src: url(/fonts/VinceHandII.OTF);
}

#html5Loader .fallback {
    top: 50%;
    position: absolute;
    text-align: center;
    width: 100%;
    color: white;
    vertical-align: middle;
    display: block;
    font-style: normal;
}

div#wrapper > * {
    width: 400px;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background: white;
    font-family: 'nbs-medium';
    color: white;
    display: none;
}

body.single-page {
    width: 100%;
}

.slide {
    /*position: absolute;
    width: 100%;
    height: 62.5vw;
    3:2 is the aspect ratio the slides have been delivered 1280px x 800px */
    position: fixed;
    top: 0;
    left: 0;
    float: left;
    width: 100%;
    padding-bottom: 62.5%;
}

.svg {
    position: absolute;
}

.next {
    position: absolute;
    right: 6%;
    bottom: 9%;
    transition: transform .1s;
    width: 12%;
    opacity: 0.5;
    cursor: default;
}

label.next {
    width: 12%;
}

.next-enabled {
    opacity: 1 !important;
    cursor: pointer;
    transform: scale(1.1);
}

.next-enabled:hover {
    transform: scale(1.2);
}

.next:active {
    transform: scale(1);
}

.input {
    display: none;
}

.label {
    position: absolute;
    width: 25%;
    transition: transform .1s, opacity .1s;
}

.label:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.question-square-speech-marks .label-q-a {
    top: 32%;
    left: 8%;
}

.question-square-speech-marks .label-q-b {
    top: 56%;
    left: 8%;
}

.question-square-speech-marks .label-q-c {
    top: 32%;
    left: 67%;
}

.question-square-speech-marks .label-q-d {
    top: 56%;
    left: 67%;
}

.question-left-right .label-q-a {
    bottom: 28%;
    left: 7%;
}

.question-left-right .label-q-b {
    top: 11%;
    left: 68%;
}

.input + .label.speech-bubble svg > g {
    fill: rgba(0, 74, 143, 0) !important;
    /* invisible dark blue */
    transition: fill .1s, stroke .2s;
}

.input + .label.speech-bubble svg > g > path {
    fill: rgba(0, 74, 143, 0) !important;
    /* dark blue */
    stroke: rgba(255, 255, 255, 1) !important;
    /* invisible white */
    transition: fill .1s, stroke .2s;
}

.input:checked + .label.speech-bubble svg > g {
    fill: rgba(0, 74, 143, 1) !important;
    /* dark blue */
}

.input:checked + .label.speech-bubble svg > g > path {
    fill: rgba(0, 74, 143, 1) !important;
    /* invisible dark blue */
    stroke: rgba(255, 255, 255, 0) !important;
    /* white */
}

.question-text {
    color: white;
    font-size: 2vw;
    text-align: center;
}

.pride-image {
    position: absolute;
    bottom: 5%;
    right: 2.7%;
    width: 16.3%;
}

@keyframes show {
    0% {
        transform: scale(0) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes show-delay {
    0% {
        transform: scale(0) rotate(0deg);
    }
    50% {
        transform: scale(0) rotate(0deg);
    }
    75% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}


.pop-in svg {
    transform: scale(0) rotate(0deg);
}

.pop-in svg.show {
    animation: show .5s forwards;
}

.pop-in svg.show-delay {
    animation: show-delay .75s forwards;
}

.label .svg {
    width:100%;
}