html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
/* SPLASH SCREEN */

.splash-container {
    position: fixed;
    background-color: #ffffff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.logo-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.logo-container .logo {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background-color: #e08d8d;
    border-radius: 50%;
    border: 5px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.logo-container .logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.blue-lines {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border-radius: 50%;
}

.clockwise {
    width: 110px;
    height: 110px;
    border-left: 5px solid #083685;
    border-bottom: 5px solid #083685;
    animation: rotateClockwise 4s linear infinite reverse;
}

.anticlockwise {
    width: 125px;
    height: 125px;
    animation: rotateAnticlockwise 4s linear infinite;
}

@keyframes rotateClockwise {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}

@keyframes rotateAnticlockwise {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        border-right: 5px solid #083685;
        border-top: 5px solid #083685;
    }
    50% {
        transform: translate(-50%, -50%) rotate(360deg);
        border-right: 5px solid #088538;
        border-top: 5px solid #088538;
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg);
        border-right: 5px solid #083685;
        border-top: 5px solid #083685;
    }
}

/* SPLASH SCREEN */