/* Buttons */

button,
input[type=button], 
input[type=submit], 
input[type=reset],
.button {
    border:0;
    -webkit-transition: color 0.3s, background-color 0.3s;
    -moz-transition: color 0.3s, background-color 0.3s;
    -o-transition: color 0.3s, background-color 0.3s;
    transition: color 0.3s, background-color 0.3s;
    cursor: pointer;
    color: var(--second-color);
    background-color: var(--first-color);
    padding: 8px 16px;
    font-size: 16px;
}

button:hover, 
input[type=button]:hover, 
input[type=submit]:hover, 
input[type=reset]:hover,
.button:hover
{
    color: #fff;
    background-color: var(--second-color);
}

.largecta {
    padding: 8px 32px;
}
.medcta {
    padding: 5px 5px;
    font-size: 15px;
}
.smallcta {
    padding: 4px 12px;
    font-size: 12px;
}



.button-pos, 
input[type=button].button-pos, 
input[type=submit].button-pos, 
input[type=reset].button-pos,
.button.button-pos {
    color: #fff;
    background-color: var(--pos-button);
}

input[type=button].button-pos:hover, 
input[type=submit].button-pos:hover, 
input[type=reset].button-pos:hover
.button.button-pos:hover {
    color: #fff;
    background-color: var(--pos-button-hover);
}

.button-neg,
input[type=button].button-neg, 
input[type=submit].button-neg, 
input[type=reset].button-neg,
.button.button-neg {
    color: #fff;
    background-color: var(--neg-button);
}

input[type=button].button-neg:hover, 
input[type=submit].button-neg:hover, 
input[type=reset].button-neg:hover,
.button.button-neg:hover {
    background-color: var(--neg-button-hover);
}

/* Inputs */

input, 
select, 
textarea { 
    padding: 8px;
    vertical-align: middle;
    margin-bottom: 8px;
    font-size: 16px;
}

/* Text Inputs */

input[type=text], 
input[type=password], 
textarea {
    font-family: inherit;
    border: 1px solid lightgrey;
    resize: none;
    width: 100%;
    max-width: 300px;
}