.btn {
    display: inline-block;

    padding: 7px 7px;

    cursor: pointer;
    text-transform: uppercase;

    border: 0;
    border-radius: .3em;
    background: transparent;

    font-size: 14px;
    font-weight: bold;
}

.btn:hover,
.btn:focus {
    opacity: .9;
    outline: 0;
}



/* default */
.btn-default {
    color: #333;
}

.btn-solid-default {
    color: #333;
    background: #d1d8de;
}



/* red */
.btn-red {
    color: #ef0040;
}

.btn-solid-red {
    color: #fff;
    background: #ef0040;
}



/* cyan */
.btn-cyan {
    color: #35b6de;
}

.btn-solid-cyan:hover,
.btn-solid-cyan:focus,
.btn-solid-cyan {
    color: #fff;
    background: #35b6de;
}

.btn-with-offset {
    margin: 15px;
}

/* Small Devices, Tablets */
@media (min-width: 720px) {
    .btn {
        padding: 10px 10px;

        font-size: 20px;
    }

    .btn-with-offset {
        margin: 30px;
    }
}



/* Large Devices, Wide Screens */
@media (min-width: 1020px) {
    .btn {
        padding: 10px 10px;

        font-size: 16px;
    }

    .btn-with-offset {
        margin: 20px;
    }
}