@import url("https://fonts.googleapis.com/css?family=Raleway:900");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.pop {
    display: none;
    min-width: 300px;
    max-width: calc(100% - 48px);
    overflow: hidden;
    position: absolute;
    background: #2a415a;
    padding: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    text-align: center;
    font-size: 35px;
    color: white;
    box-shadow: 2px 2px 4px #00000063;
}
h1 {
    font-size: 35px;
}
.pop h1 {
    margin-bottom: 21px;
    
}
h1 + p {
    margin-bottom: 14px;
    font-size: 21px;
}
body {
    background-image: url(https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1600);
    background-size: cover;
    background-position: 50% 50%;
    min-height: 100vh;
    font-family: Raleway, serif;
}

body:after {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

svg {
    width: 80vw;
    position: fixed;
    top: 50vh;
    left: 50vw;
    max-width: 430px;
    transform: translateY(-50%) translateX(-50%);
    z-index: 2;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.3));
}

svg path {
    cursor: pointer;
    animation: blob 2s infinite forwards;
    transform-origin: 50% 50%;
}

svg path:hover {
    fill: #fafafa;
}

svg text {
    font-size: 33px;
}

.question-number,
.btn, video {
    background: white;
    box-shadow: 2px 2px 4px #00000047;
    color: #2b415a;
    line-height: 1;
}


.question,
.btn {
    font-size: 21px;
    letter-spacing: 1px;
}
video, .btn, .pop{
border-radius: 4px;
}
video {
    max-width: 100%;
}
.question-number {
	position: relative;
    margin: 0 auto 14px;
    border-radius: 100%;
    font-size: 78px;
    padding-top: 0;
    width: 100px;
    height: 100px;
}
.question-number.blk {
    background-color: black;
    color: white;
}
.question-number p{
	font-family: Droid, sans-serif;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.btn {
    cursor: pointer;
    margin: 14px auto 0;
    padding: 14px 0;
    width: 320px;
} 
 .loading-dots:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
            .5em 0 0 rgba(0, 0, 0, 0);
    }

    40% {
        color: #fff;
        text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
            .5em 0 0 rgba(0, 0, 0, 0);
    }

    60% {
        text-shadow:
            .25em 0 0 #fff,
            .5em 0 0 rgba(0, 0, 0, 0);
    }

    80%,
    100% {
        text-shadow:
            .25em 0 0 #fff,
            .5em 0 0 #fff;
    }
}
/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.hvr-wobble-horizontal {
    /*display: inline-block;*/
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-horizontal:hover,
.hvr-wobble-horizontal:focus,
.hvr-wobble-horizontal:active {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes blob {
    25% {
        d: path("M 90 210 C 90 180 110 160 130 160 C 160 160 180 140 200 130 C 230 120 270 100 290 140 C 310 170 340 100 360 140 C 370 160 390 180 390 210 C 390 240 380 290 350 280 C 330 270 300 280 280 290 C 260 300 230 300 220 290 C 200 270 160 310 140 280 C 130 260 90 240 90 210 "
            );
        transform: rotate(-5deg);
    }

    50% {
        d: path("M 90 210 C 90 180 100 150 120 130 C 150 100 180 140 200 130 C 230 120 270 100 290 140 C 300 160 330 130 360 140 C 390 150 390 180 390 210 C 390 240 380 300 350 280 C 330 270 320 230 280 260 C 260 280 220 310 200 290 C 180 270 160 280 140 280 C 110 280 90 240 90 210"
            );
    }

    75% {
        d: path("M 90 210 C 90 180 110 180 130 170 C 150 160 170 130 200 130 C 240 130 260 150 290 140 C 310 130 340 120 360 140 C 380 160 390 180 390 210 C 390 240 380 260 350 270 C 320 280 290 270 270 260 C 240 250 230 280 210 290 C 180 310 130 300 110 280 C 90 260 90 240 90 210"
            );
        transform: rotate(5deg);
    }
}