@media screen and (min-width: 768px) {
    .c-button {
/*        width: 360px;*/
/*        padding: 30px 0;*/
/*        text-align: center;*/
/*        border: solid 1px #2e2930;*/
        display: inline-block;
        position: relative;
        transition: 0.3s ease-out;
    }
    
    .c-button span {
        position: relative;
    }
    
    .c-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
/*        background: #2e2930;*/
        transition: 0.3s;
    }
    
    .c-button::after {
/*        background: #2e2930;*/
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
/*        width: 40px;*/
        height: 1px;
        transition: 0.3s;
    }
    
    .c-button:hover {
/*        color: white;*/
    }
    
    .c-button:hover::before {
        width: 100%;
    }
    
    .c-button:hover::after {
/*        right: -40px;*/
    }
    
    .c-button.--red {
        text-align: center;
        border: solid 1px #1D2051;
        color: #DA251D;
    }
    
    .c-button.--red::before {
        background: #1D2051;
    }
    
    .c-button.--red::after {
        width: 40px;
        background: #1D2051;
    }
    
    .c-button.--red:hover {
        color: white;
    }
    
    .c-button.--red:hover::after {
        right: -40px;
    }
    
    .c-button.--white {
        text-align: center;
        border: solid 1px white;
        color: white;
        text-align: center;
    }
    
    .c-button.--white::before {
        background: white;
    }
    
    .c-button.--white::after {
        width: 3vw;
        background: white;
    }
    
    .c-button.--white:hover {
        color: #231815;
    }
    
    .c-button.--white:hover::after {
        right: -3vw;
    }
}


@media screen and (max-width: 767px) {
    .c-button {
/*        width: 360px;*/
/*        padding: 30px 0;*/
/*        text-align: center;*/
/*        border: solid 1px #2e2930;*/
        display: inline-block;
        position: relative;
        transition: 0.3s ease-out;
    }
    
    .c-button span {
        position: relative;
    }
    
    .c-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
/*        background: #2e2930;*/
        transition: 0.2s;
    }
    
    .c-button::after {
/*        background: #2e2930;*/
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
/*        width: 40px;*/
        height: 1px;
        transition: 0.3s;
    }
    
    .c-button:active {
/*        color: white;*/
    }
    
    .c-button:active::before {
        width: 100%;
    }
    
    .c-button:active::after {
/*        right: -40px;*/
    }
    
    .c-button.--red {
        text-align: center;
        border: solid 1px #1D2051;
        color: #DA251D;
        text-align: center;
    }
    
    .c-button.--red::before {
        background: #1D2051;
    }
    
    .c-button.--red::after {
        width: 7.5vw;
        background: #1D2051;
    }
    
    .c-button.--red:active {
        color: white;
    }
    
    .c-button.--red:active::after {
        right: -7.5vw;
    }
    
    .c-button.--white {
        text-align: center;
        border: solid thin white;
        color: white;
        text-align: center;
    }
    
    .c-button.--white::before {
        background: white;
    }
    
    .c-button.--white::after {
        width: 10vw;
        background: white;
    }
    
    .c-button.--white:active {
        color: #231815;
    }
    
    .c-button.--white:active::after {
        right: -10vw;
    }
}