/**********************
      Loading screen
***********************/

#loadingScreen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: #ffffff;
    z-index: 999999999;
    transition: all 500ms ease;
    opacity: 1;
}

.circle {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    border: black 3px dashed;
    border-radius: 50%;
    margin: -100px 0 0 -100px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 10s linear infinite;
    text-align: center;
}

.bee-image {
    height: 50px;
    width: 50px;
    transform: translateY(165px);
}

.beehive-image {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;
    animation: zoom 5s ease-in-out infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes zoom {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.7);
    }
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.7);
    }
}

@keyframes zoom {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.7);
    }
}