:root{
    --transition-time:1.5s;
    --cubic:cubic-bezier(.53,.09,.42,.99);
}

/* Center the content */
body,html{
    margin:0;
    padding:0;
    background-color: #48484d;
}
/* Loader */
.center{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#loader {
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 2px solid cyan;
    border-radius: 50%;
    animation: expand var(--cubic) var(--transition-time) infinite;
    -webkit-animation: expand var(--cubic) var(--transition-time) infinite;
    }
#loader1 {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid cyan;
    border-radius: 50%;
    animation: expand var(--cubic) var(--transition-time) infinite;
    -webkit-animation: expand var(--cubic) var(--transition-time) infinite;
    animation-delay: .5s; /* delay 1 third 1/3 * 1.5 = .5 of transition time */
    }
#c1 {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 10px solid cyan;
    border-radius: 50%;
    }
@-webkit-keyframes expand {
    from {
        -webkit-transform: scale(1);opacity:1;
        }
    to { 
        -webkit-transform: scale(5);opacity:0; 
    }
}
@keyframes expand {
    from {
        -webkit-transform: scale(1);opacity:1;
        }
    to { 
        -webkit-transform: scale(5);opacity:0; 
    }
}
    
/* Animate to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s;
    }
@-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
    }
@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
    }
#page-body {
    display: none;
    text-align: center;
    }