*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #000000;
}

li{
    list-style: none;
}

.body{
    position: relative;
    overflow: hidden;
    /* filter: grayscale(); */
}

.body>div{
    margin:0 auto;
}

/* loading */
#loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color:#dedede; 
    z-index: 9999;
    /* filter: grayscale(); */
}

.base {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 4.5rem;
    width: 4.5rem;
    margin: -3.75rem;
    padding: 1.5rem;
    -webkit-transform: rotateX(45deg) rotateZ(45deg);
    -moz-transform: rotateX(45deg) rotateZ(45deg);
    -o-transform: rotateX(45deg) rotateZ(45deg);
    -ms-transform: rotateX(45deg) rotateZ(45deg);
    transform: rotateX(45deg) rotateZ(45deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
  
.cube,.cube:after,.cube:before {
    content: '';
    float: left;
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
}

.cube {
    background-color: rgba(5,175,209,0.8);
    position: relative;
    box-shadow: 6.5rem 6.5rem 0.75rem rgba(0, 0, 0, 0.1);
    -webkit-transform: translateZ(1.5rem);
    -moz-transform: translateZ(1.5rem);
    -o-transform: translateZ(1.5rem);
    -ms-transform: translateZ(1.5rem);
    transform: translateZ(1.5rem);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
    -webkit-animation: anim 1s infinite;
    -moz-animation: anim 1s infinite;
    -o-animation: anim 1s infinite;
    animation: anim 1s infinite;
}

.cube:after {
    background-color: rgba(4,157,188,0.8);
    -webkit-transform: rotateX(-90deg) translateY(1.5rem);
    -moz-transform: rotateX(-90deg) translateY(1.5rem);
    -o-transform: rotateX(-90deg) translateY(1.5rem);
    -ms-transform: rotateX(-90deg) translateY(1.5rem);
    transform: rotateX(-90deg) translateY(1.5rem);
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
  
.cube:before {
    background-color: rgba(4,140,167,0.8);
    -webkit-transform: rotateY(90deg) translateX(1.5rem);
    -moz-transform: rotateY(90deg) translateX(1.5rem);
    -o-transform: rotateY(90deg) translateX(1.5rem);
    -ms-transform: rotateY(90deg) translateX(1.5rem);
    transform: rotateY(90deg) translateX(1.5rem);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
  
.cube:nth-child(1) {
    -webkit-animation-delay: 0.05s;
    -moz-animation-delay: 0.05s;
    -o-animation-delay: 0.05s;
    animation-delay: 0.05s;
}
  
.cube:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
  
.cube:nth-child(3) {
    -webkit-animation-delay: 0.15s;
    -moz-animation-delay: 0.15s;
    -o-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
  
.cube:nth-child(4) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.cube:nth-child(5) {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    -o-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
  
.cube:nth-child(6) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
  
.cube:nth-child(7) {
    -webkit-animation-delay: 0.35s;
    -moz-animation-delay: 0.35s;
    -o-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
  
.cube:nth-child(8) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.cube:nth-child(9) {
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    animation-delay: 0.45s;
}
  
@keyframes anim {
    50% {
        -webkit-transform: translateZ(0.25rem);
        -moz-transform: translateZ(0.25rem);
        -o-transform: translateZ(0.25rem);
        transform: translateZ(0.25rem);
    }
}