#loader {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #eee;
}
    #loader {
        fill: #eee;
    }
.truck {
    min-height: 16em;
    max-height: 16em;
    width: 60.1em;
    top: 35%;
    left: 25%;
    display: flex;
    flex: 1;
    position: relative;
    background: linear-gradient(to right, #000000 2%, #0b1742 10%, #0b1742 90%, #000000 98%);
    box-shadow: 0 0 2em #454545;
    border-radius: 1em;
    overflow: hidden
}

.loading-message {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
    left: 15%;
    top: 7%;
}

    .loading-message span {
        animation: blur-letter 1.5s ease alternate infinite;
    }

        .loading-message span:nth-child(1) {
            animation-delay: 0s;
        }

        .loading-message span:nth-child(2) {
            animation-delay: .1s;
        }

        .loading-message span:nth-child(3) {
            animation-delay: .2s;
        }

        .loading-message span:nth-child(4) {
            animation-delay: .3s;
        }

        .loading-message span:nth-child(5) {
            animation-delay: .4s;
        }

        .loading-message span:nth-child(6) {
            animation-delay: .5s;
        }

        .loading-message span:nth-child(7) {
            animation-delay: .6s;
        }

        .loading-message span:nth-child(8) {
            animation-delay: .7s;
        }

        .loading-message span:nth-child(9) {
            animation-delay: .8s;
        }

        .loading-message span:nth-child(10) {
            animation-delay: .9s;
        }

        .loading-message span:nth-child(11) {
            animation-delay: 1s;
        }

        .loading-message span:nth-child(12) {
            animation-delay: 1.1s;
        }

        .loading-message span:nth-child(13) {
            animation-delay: 1.2s;
        }

@keyframes blur-letter {
    0% {
        filter: blur(1em);
    }

    5% {
        filter: blur(0%);
    }

    100% {
        filter: blur(0%);
    }
}

.shadow-box {
    position: absolute;
    width: 46em;
    height: 1em;
    background: none;
    border: none;
    border-radius: 1em;
    box-shadow: 0 4em 1.5em #000000;
    top: 53%;
    left: 15%;
}

/*Truck*/
.top {
    position: absolute;
    background: #ffffff;
    height: 3em;
    width: 4em;
    border-radius: 100% 0 0 0;
    right: 74%;
    top: 32%;
}

.right {
    position: absolute;
    background: #ffffff;
    width: 2.4em;
    height: 3em;
    border-radius: 0 .1em 0 0;
    top: 32%;
    right: 70%;
}

.bottom {
    position: absolute;
    background: linear-gradient(to top, grey, #ffffff 15%);
    height: 3em;
    width: 10em;
    border-radius: 50% 0 .1em .1em;
    top: 50%;
    right: 70%;
}

.rear {
    position: absolute;
    background: #000000;
    width: .5em;
    height: 5.6em;
    border-radius: 0 .2em .2em 0;
    top: 34%;
    left: 30%;
}

.front-bumper {
    position: absolute;
    background: linear-gradient(to right, #454545, #000000 12%, #f3f3f3 13%, grey 70%, #454545);
    height: 1.1em;
    width: 15em;
    border-radius: .1em .1em .1em .5em;
    top: 68.5%;
    right: 61.7%;
    box-shadow: inset 0 .1em .1em #454545;
}

.windshield {
    position: absolute;
    background: linear-gradient(#454545 .5%, #a7d3e2 20%, #e5e5e5 40%, grey 70%, #0b1742 100%);
    box-shadow: inset 0 0 .2em #454545;
    height: 1.7em;
    width: .7em;
    transform: skewX(160deg);
    border-radius: 5em .2em .2em .2em;
    top: 40%;
    left: 19.9%
}

.window {
    position: absolute;
    background: linear-gradient(#454545 .5%, #a7d3e2 20%, #e5e5e5 40%, grey 70%, #0b1742 100%);
    box-shadow: inset 0 0 .2em #454545;
    height: 1.7em;
    width: 1.6em;
    transform: skewX(160deg);
    border-radius: .2em;
    top: 40%;
    left: 21.6%
}

.door {
    position: absolute;
    background: none;
    height: 4.9em;
    width: 3.2em;
    box-shadow: inset -.2em .1em .2em grey;
    border-radius: 1em 0 0 0;
    top: 38%;
    left: 21.5%;
}

.panel {
    position: absolute;
    background: none;
    border: inset .2em;
    height: 2em;
    width: 1em;
    border-radius: .5em;
    box-shadow: inset 0 0 .2em grey;
    top: 43%;
    left: 27.3%;
}

.handle {
    position: absolute;
    background: linear-gradient(grey, #454545);
    box-shadow: inset 0 0 .2em #000000;
    height: .9em;
    width: .45em;
    border-radius: .4em .4em 1em .6em;
    top: 58%;
    left: 25.2%;
}

.top-window {
    position: absolute;
    background: linear-gradient(grey, #454545);
    box-shadow: inset 0 0 .2em #000000;
    height: 1em;
    width: 1em;
    border-radius: .4em .4em .4em 100%;
    top: 33.5%;
    left: 27.8%;
}

.antenna {
    position: absolute;
    background: #454545;
    height: 1.5em;
    width: .1em;
    border-radius: 50% 50% 0 0;
    top: 34%;
    left: 27%;
}

.mirror {
    position: absolute;
    background: #454545;
    box-shadow: .2em .6em .5em grey;
    width: .4em;
    height: 1.1em;
    border-radius: 1em;
    top: 45%;
    left: 21.5%;
}

.front-mirror {
    position: absolute;
    background: #454545;
    height: .7em;
    width: .3em;
    border-radius: 1em;
    transform: skewX(170deg);
    top: 51%;
    left: 15%;
}

.stripe {
    position: absolute;
    height: 0;
    width: 3.4em;
    background: none;
    border-top: .2em solid grey;
    border-bottom: .2em solid black;
    border-radius: 100% 0 100% 0;
    transform: rotate(174deg);
    top: 55%;
    left: 14.2%;
}

/*Trailer*/
.trailer-base {
    position: absolute;
    background: #ffffff;
    width: 24.2em;
    height: 4.5em;
    border-radius: .1em;
    border: .5em solid #f3f3f3;
    box-shadow: inset 0 0 .8em #454545;
    z-index: 1;
    top: 32%;
    left: 33%;
}

.refrigerator {
    position: absolute;
    background: linear-gradient(to right, #ffffff, grey 99%);
    width: .75em;
    height: 3.5em;
    border-radius: .5em 0 0 .5em;
    top: 34%;
    left: 31.8%;
}

.guard {
    position: absolute;
    background: linear-gradient(to right, #000000, grey 15%, #ffffff, grey 75%, #000000);
    width: 11em;
    height: 1.2em;
    border-radius: 0 0 .1em 2em;
    top: 66.3%;
    left: 45%;
}

.reflector {
    position: absolute;
    background: none;
    border-left: .4em solid red;
    border-right: .4em solid red;
    z-index: 1;
    height: .2em;
    width: 1em;
}

    .reflector.set-one {
        top: 62%;
        left: 35%;
    }

    .reflector.set-two {
        top: 62%;
        left: 43%;
    }

    .reflector.set-three {
        top: 62%;
        left: 51%;
    }

    .reflector.set-four {
        top: 62%;
        left: 59%;
    }

    .reflector.set-five {
        top: 62%;
        left: 67%;
    }

.brace-one-top {
    position: absolute;
    height: 1em;
    width: .3em;
    background: #000000;
    top: 66.4%;
    left: 43%;
}

.brace-one-bottom {
    position: absolute;
    height: 0;
    width: 0;
    border-bottom: .5em solid black;
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
    border-top: .4em solid transparent;
    background: none;
    top: 68.4%;
    left: 42.6%;
}

.brace-two-top {
    position: absolute;
    height: 1em;
    width: .3em;
    background: #000000;
    top: 66.4%;
    left: 70%;
}

.brace-two-bottom {
    position: absolute;
    height: .3em;
    width: .8em;
    background: #000000;
    top: 72.4%;
    left: 69.6%;
}

/*Tires*/
.tire {
    position: absolute;
    background: #000000;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    box-shadow: 0 .1em .1em #454545;
}

    .tire.one {
        top: 66%;
        left: 15%;
    }

    .tire.two {
        top: 66%;
        left: 33%;
    }

    .tire.three {
        top: 66%;
        left: 37.1%;
    }

    .tire.four {
        top: 66%;
        left: 61%;
    }

    .tire.five {
        top: 66%;
        left: 65.1%;
    }

.rim {
    position: relative;
    background: radial-gradient(#000000, #454545, #f3f3f3);
    height: 1.5em;
    width: 1.5em;
    border-radius: 50%;
}

    .rim.one {
        top: 18%;
        left: 17%;
    }

    .rim.two {
        top: 18%;
        left: 19%;
    }

    .rim.three {
        top: 18%;
        left: 20%;
    }

    .rim.four {
        top: 18%;
        left: 19%;
    }

    .rim.five {
        top: 18%;
        left: 19%;
    }

/*Truck Ramp*/
/*.ramp {
    position: absolute;
    height: 0;
    width: 0;
    border-bottom: 2.4em solid #383838;
    border-left: 0;
    border-right: 7em solid transparent;
    border-top: 0;
    background: none;
    top: 66%;
    left: 75%;
  }*/
.ramp {
    position: absolute;
    height: .3em;
    width: 8em;
    border: none;
    border-radius: .2em;
    background: linear-gradient(#454545, grey);
    transform: rotate(198deg);
    top: 74%;
    left: 74.5%;
}

.box {
    position: absolute;
    height: 1.79em;
    width: 1.79em;
    background: #6d4a21;
    border: .2em solid #563a1a;
    border-radius: .2em;
    box-shadow: inset 0 0 .2em #000000, 0 .04em;
}

.cross-one {
    position: relative;
    height: .2em;
    width: 2.4em;
    background: #563a1a;
    box-shadow: 0 0 .2em #000000;
    border-radius: 40%;
    transform: rotate(135deg);
    top: 47%;
    right: 15%;
}

.cross-two {
    position: relative;
    height: .2em;
    width: 2.4em;
    background: #563a1a;
    box-shadow: 0 0 .2em #000000;
    border-radius: 40%;
    transform: rotate(225deg);
    top: 30%;
    right: 15%;
}

.loading {
    top: 67%;
    left: 89%;
    animation: box-load 1.44s infinite;
    z-index: 0;
}

/*Trailer Loading Section*/
.trailer-fill {
    position: absolute;
    width: 24.4em;
    height: 4.5em;
    background: transparent;
    z-index: 1;
    top: 35.4%;
    left: 33.9%;
}

/*Positions each box in trailer*/
#one {
    top: 49.5%;
    animation: box-fill-1 32s infinite;
}

#two {
    animation: box-fill-2 32s infinite;
}

#three {
    top: 49.5%;
    left: 9%;
    animation: box-fill-3 32s infinite;
}

#four {
    left: 9%;
    animation: box-fill-4 32s infinite;
}

#five {
    top: 49.5%;
    left: 18%;
    animation: box-fill-5 32s infinite;
}

#six {
    left: 18%;
    animation: box-fill-6 32s infinite;
}

#seven {
    top: 49.5%;
    left: 27%;
    animation: box-fill-7 32s infinite;
}

#eight {
    left: 27%;
    animation: box-fill-8 32s infinite;
}

#nine {
    top: 49.5%;
    left: 35.9%;
    animation: box-fill-9 32s infinite;
}

#ten {
    left: 35.9%;
    animation: box-fill-10 32s infinite;
}

#eleven {
    top: 49.5%;
    left: 44.9%;
    animation: box-fill-11 32s infinite;
}

#twelve {
    left: 44.9%;
    animation: box-fill-12 32s infinite;
}

#thirteen {
    top: 49.5%;
    left: 53.9%;
    animation: box-fill-13 32s infinite;
}

#fourteen {
    left: 53.9%;
    animation: box-fill-14 32s infinite;
}

#fifteen {
    top: 49.5%;
    left: 62.8%;
    animation: box-fill-15 32s infinite;
}

#sixteen {
    left: 62.8%;
    animation: box-fill-16 32s infinite;
}

#seventeen {
    top: 49.5%;
    left: 71.8%;
    animation: box-fill-17 32s infinite;
}

#eighteen {
    left: 71.8%;
    animation: box-fill-18 32s infinite;
}

#nineteen {
    top: 49.5%;
    left: 80.8%;
    animation: box-fill-19 32s infinite;
}

#twenty {
    left: 80.8%;
    animation: box-fill-20 32s infinite;
}

#twentyone {
    top: 49.5%;
    left: 89.7%;
    animation: box-fill-21 32s infinite;
}

#twentytwo {
    left: 89.7%;
    animation: box-fill-22 32s infinite;
}

@keyframes box-load {
    0% {
        top: 67%;
        left: 89%;
    }

    10% {
        transform: translateX(-2.3em) rotate(20deg);
    }

    100% {
        transform: translate(-13.5em, -3.8em) rotate(0);
    }
}

@keyframes box-fill-1 {
    0% {
        opacity: 0;
    }

    4.4% {
        opacity: 0;
    }

    4.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-2 {
    0% {
        opacity: 0;
    }

    8.9% {
        opacity: 0;
    }

    9% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-3 {
    0% {
        opacity: 0;
    }

    13.4% {
        opacity: 0;
    }

    13.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-4 {
    0% {
        opacity: 0;
    }

    17.9% {
        opacity: 0;
    }

    18% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-5 {
    0% {
        opacity: 0;
    }

    22.4% {
        opacity: 0;
    }

    22.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-6 {
    0% {
        opacity: 0;
    }

    26.9% {
        opacity: 0;
    }

    27% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-7 {
    0% {
        opacity: 0;
    }

    31.4% {
        opacity: 0;
    }

    31.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-8 {
    0% {
        opacity: 0;
    }

    35.9% {
        opacity: 0;
    }

    36% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-9 {
    0% {
        opacity: 0;
    }

    40.4% {
        opacity: 0;
    }

    40.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-10 {
    0% {
        opacity: 0;
    }

    44.9% {
        opacity: 0;
    }

    45% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-11 {
    0% {
        opacity: 0;
    }

    49.4% {
        opacity: 0;
    }

    49.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-12 {
    0% {
        opacity: 0;
    }

    53.9% {
        opacity: 0;
    }

    54% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-13 {
    0% {
        opacity: 0;
    }

    58.4% {
        opacity: 0;
    }

    58.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-14 {
    0% {
        opacity: 0;
    }

    62.9% {
        opacity: 0;
    }

    63% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-15 {
    0% {
        opacity: 0;
    }

    67.4% {
        opacity: 0;
    }

    67.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-16 {
    0% {
        opacity: 0;
    }

    71.9% {
        opacity: 0;
    }

    72% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-17 {
    0% {
        opacity: 0;
    }

    76.4% {
        opacity: 0;
    }

    76.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-18 {
    0% {
        opacity: 0;
    }

    80.9% {
        opacity: 0;
    }

    81% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-19 {
    0% {
        opacity: 0;
    }

    85.4% {
        opacity: 0;
    }

    85.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-20 {
    0% {
        opacity: 0;
    }

    89.9% {
        opacity: 0;
    }

    90% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-21 {
    0% {
        opacity: 0;
    }

    94.4% {
        opacity: 0;
    }

    94.5% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}

@keyframes box-fill-22 {
    0% {
        opacity: 0;
    }

    98.9% {
        opacity: 0;
    }

    99% {
        opacity: .9;
    }

    100% {
        opacity: .9;
    }
}