.service-animated {
    border: 15px solid #ffa900;
}

.service-animated:hover {
    service-animated: square-to-circle 0.5s .83s infinite cubic-bezier(1, .015, .295, 1.225) alternate;
}

@keyframes square-to-circle {
    0% {
        border-radius: 0 0 0 0;
        background: black;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 25% 25% 25% 25%;
        background: black;
        transform: rotate(45deg);
    }
    50% {
        border-radius: 50% 50% 50% 50%;
        background: black;
        transform: rotate(90deg);
    }
    75% {
        border-radius: 75% 75% 75% 75%;
        background: black;
        transform: rotate(180deg);
    }
    100% {
        border-radius: 100% 100% 100% 100%;
        background: black;
        transform: rotate(360deg);
    }
}

.service-square {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px auto;
    /*width: 250px;*/
    /*height: 250px;*/
    background: white;
    border-radius: 75px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: lighter;
    letter-spacing: 2px;
    transition: 1s box-shadow;
}

.service-square:hover {
    box-shadow: 0 5px 35px 0px rgba(0, 0, 0, .1);
}

.service-square:hover::before,
.service-square:hover::after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FDA8CF;
    border-radius: 75px;
    z-index: -1;
    animation: 1s clockwise infinite;
}

.service-square:hover:after {
    background: #F3CE5E;
    animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
    0% {
        top: -5px;
        left: 0;
    }
    12% {
        top: -2px;
        left: 2px;
    }
    25% {
        top: 0;
        left: 5px;
    }
    37% {
        top: 2px;
        left: 2px;
    }
    50% {
        top: 5px;
        left: 0;
    }
    62% {
        top: 2px;
        left: -2px;
    }
    75% {
        top: 0;
        left: -5px;
    }
    87% {
        top: -2px;
        left: -2px;
    }
    100% {
        top: -5px;
        left: 0;
    }
}

@keyframes counterclockwise {
    0% {
        top: -5px;
        right: 0;
    }
    12% {
        top: -2px;
        right: 2px;
    }
    25% {
        top: 0;
        right: 5px;
    }
    37% {
        top: 2px;
        right: 2px;
    }
    50% {
        top: 5px;
        right: 0;
    }
    62% {
        top: 2px;
        right: -2px;
    }
    75% {
        top: 0;
        right: -5px;
    }
    87% {
        top: -2px;
        right: -2px;
    }
    100% {
        top: -5px;
        right: 0;
    }
}

.hover-zoom {
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.hover-zoom:hover {
    transform: scale(1.15);
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);*/
}

.hover-zoom-nc {
    transition: all .2s ease-in-out;
}

.hover-zoom-nc:hover {
    transform: scale(1.10);
}

.hover-zoomout {
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.hover-zoomout:hover {
    transform: scale(0.95);
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);*/
}