/*button*/

.btn {
    @include font($font1, 200, 0.75em, normal, normal, normal, #FFFFFF);
    text-align: center;
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 184px;
    padding: 13px 0;
    margin: 0 auto;
    box-sizing: border-box;
    span.text {
        position: relative;
        z-index: 2
    }
    span.background {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: #FFFFFF;
        transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    &:hover {
        color: $secondary-color;
        span.background {
            width: 225%;
            height: 562.5px;
        }
    }
    &:active {
        background-color: #46535f;
    }
    &-transparent {
        border: 1px solid #FFFFFF;
        background: none;
    }
    &--primary {
        background: $primary-color;
        border-radius: 50px;
        border: 1px solid transparent;
        max-width: 212px;
        padding: 18px 10px;
    }
}