/*==========  Non-Mobile First Method  ==========*/
@media only screen and (min-width : 850px) {
    .header-button a.button.primary {
        color: #000;
        background: linear-gradient(to bottom, var(--fs-color-primary) 50%, #FFFF00);
        height: 40px;
        width: 150px;
        padding-top: 2.5px;
        position: relative;
    }

    .header-button a.button.primary:hover {
        color: #909;
        background: linear-gradient(to bottom, #FFFF00 50%, #990099);
    }

    .header-button a.button.primary::before,
    .header-button a.button.primary::after {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border-radius: 7px;
        transition: all .5s;
        animation: clippath 3s infinite linear;
    }

    .header-button a.button.primary::before {
        border: 2px solid #ffce21;
    }

    .header-button a.button.primary::after {
        border: 2px solid #909;
        animation-delay: -1.5s;
    }

    @keyframes clippath {

        0%,
        100% {
            clip-path: inset(0 0 98% 0);
        }

        25% {
            clip-path: inset(0 98% 0 0);
        }

        50% {
            clip-path: inset(98% 0 0 0);
        }

        75% {
            clip-path: inset(0 0 0 98%);
        }
    }
}



/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}