form p {
    margin: 0;
}

form fieldset {
    border-radius: var(--border-radius);
}

form legend {
    font-size: 1.2rem;
    font-weight: bold;
}

button, input, select, textarea {
    color: var(--color-text);
    font-family: var(--font)
}

textarea {
    resize: vertical;
}

label {
    margin: 18px 32px 6px 10px;
    font-size: .8rem;
    display: inline-block;
    vertical-align: middle;
}

label~label {
    margin: 0 10px 10px;
}

label+input, label+select, label+textarea {
    margin-top: 4px;
    margin-bottom: 20px
}

button, input, select, textarea, .btn {
    border: 0;
    outline: 0;
    font-size: var(--font-size);
    padding: 8px 14px;
    /* width: 100%; */
    margin: 10px 0;
    border-radius: var(--border-radius);
    transition: all .2s ease-in-out
}

input, select, textarea {
    width: 100%;
    background-color: var(--color-bg-light);
    box-sizing: border-box
}

input:focus, select:focus, textarea:focus {
    background-color: var(--color-bg-light);
}

input+small, select+small, textarea+small {
    display: block;
    margin: -16px 0 10px 10px;
    font-size: 80%;
    opacity: .6;
    margin-left: 24.5%;
    font-weight: 500
}

input[type="radio"], input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}

select {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAUCAMAAAAtBkrlAAAAMFBMVEUAAAD///9DQ0M4ODg3Nzc0NDQzMzMqKioVFRUTExMREREPDw8MDAwKCgoBAQH///826JvAAAAAEHRSTlP///////////////////8A4CNdGQAAAAlwSFlzAAALEwAACxMBAJqcGAAABchpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMS0wNi0wNVQxNDoxMjoxNyswNzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wNi0wNVQxNDoxMjoxNyswNzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDYtMDVUMTQ6MTI6MTcrMDc6MDAiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjIiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQzNzlhOTAtMWUzYy0zOTQ1LTg0ODMtZjUyODQzNDljODVkIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OGI3MWI0MzAtYWQ2NS03MjRiLTkwNDQtOTY3NGVlMWVlNTk1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NDQzNzlhOTAtMWUzYy0zOTQ1LTg0ODMtZjUyODQzNDljODVkIj4gPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4gPHJkZjpCYWc+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjhiNzFiNDMwLWFkNjUtNzI0Yi05MDQ0LTk2NzRlZTFlZTU5NTwvcmRmOmxpPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0Mzc5YTkwLTFlM2MtMzk0NS04NDgzLWY1Mjg0MzQ5Yzg1ZCIgc3RFdnQ6d2hlbj0iMjAyMS0wNi0wNVQxNDoxMjoxNyswNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pvw+dPoAAAChSURBVDjLrdLLDsMgDETRqzSBPDv//7ddQJMWyAI7bC0dzWCjhx+S4nA3HaIFBEJ7GODdDx7ciQHg6AZnAF71aARg7q+8ADC2vcWylJQxNPp250ug1lpM3mo7G2kvW6e+u6xgbn2Kk7HvBWZxcnsn+PuPwbbfAtT2bT1a91GAWYwRgE1+MLd25fsHL3HRM2Bu7chXgunCNz0HavXlq0H3+wCs5lOmj4OLewAAAABJRU5ErkJggg==) no-repeat;
    background-position: right 18px;
    background-color: rgba(0, 0, 0, .05);
    appearance: none;
    padding: 12px 48px 12px 14px;
    background-size: 34px;
}

button, .btn {
    font-weight: 500;
    transition: all .2s ease-in-out;
    background-color: rgba(0, 0, 0, .05);
    cursor: pointer;
    /* text-transform: uppercase; */
    background: var(--color-primary);
    color: var(--color-text-light);
}

button:hover,
.btn:hover {
    background: var(--color-primary-light);
    color: var(--color-text-light);
}

button:active,
.btn:active {
    background: var(--color-primary-dark);
    /* color: var(--color-text-light); */
    transform: scale(.99);
    transition: .1s;
}

button:focus {
    outline: none;
    border: 1px solid var(--color-accent);
}

button[disabled], section.pagination a[disabled], .btn[disable] {
    pointer-events: none;
    background: rgba(0, 0, 0, .1);
    color: var(--color-text-mute);
}