.base ul li {
    list-style: none;
    text-align: center;
    box-sizing: border-box;
    padding: 5%;
    display: inline-block;
    width: 100%;
    margin: 0px;
}

.base ul {
    padding: 0px;
}

/* Loader 1 */

.loader-1 {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-flex;
    background-color: transparent;
    border: 5px solid #ECEFF1;
    border-radius: 50%;
}

.loader-1:after {
    position: absolute;
    content: "";
    top: -4px;
    left: -4px;
    width: 50px;
    height: 50px;
    padding: 3px;
    border-width: 4px;
    border-style: solid;
    border-color: #f12c18 transparent transparent transparent;
    border-radius: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    animation: ringrotate .8s infinite ease-in-out;
    -webkit-animation: ringrotate .8s infinite ease-in-out;
}

/* Animation */
@keyframes ringrotate {
    0% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes ringrotate {
    0% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
    }
}

@keyframes pendulum {
    0% {
        transform: rotateZ(-20deg);
        -webkit-transform: rotateZ(-20deg);
    }
    100% {
        transform: rotateZ(20deg);
        -webkit-transform: rotateZ(20deg);
    }
}

@-webkit-keyframes pendulum {
    0% {
        transform: rotateZ(-20deg);
        -webkit-transform: rotateZ(-20deg);
    }
    100% {
        transform: rotateZ(20deg);
        -webkit-transform: rotateZ(20deg);
    }
}

/* #Animation */