/*** FIELDS & BOXES ***/

.field, .fbox, .fbsmall, .fselect {
padding: 10px;
font-size: 18px;
font-style: normal;
font-weight: 500;
color: var(--anthracite);
display: block;
}

.field {
height: 46px;
}

.fselect { height: 24px; }

.fbox {
height: 240px;
}

.fbsmall {
height: 100px;
}

.longform, .longred {
width: 100%;
}

.shortform, .shortred {
width: 48px;
}

.miniform, .minired {
width: 100%;
max-width: 100px;
}

.midiform, .midired {
width: 100%;
max-width: 250px;
}

.demiform, .demired {
width: 100%;
max-width: 400px;
}

.longform, .shortform, .midiform, .miniform, .demiform {
background-color: var(--white);
border: 1px solid var(--white);
}

/* RED */

.lfred { border: 1px solid var(--red) !important;}

.longred, .shortred, .midired, .minired, .demired {
background-color: var(--lightred);
border: 1px solid var(--red);
color: var(--white);
}

.longform:hover, .longform:focus, .shortform:hover, .shortform:focus, .midiform:hover, .midiform:focus , .miniform:hover, .miniform:focus , .demiform:hover, .demiform:focus {
border: 1px solid var(--blue);
}

.longred:hover, .longred:focus, .shortred:hover, .shortred:focus, .midired:hover, .midired:focus, .minired:hover, .minired:focus, .demired:hover, .demired:focus {
border: 1px solid var(--red);
background-color: var(--medred);
}


/*** BUTTONS ***/

.button {
width: auto;
height: 46px;
padding: 10px 16px 8px;
font-style: normal;
font-weight: var(--semibold);
color: var(--white);
display: inline-block;
white-space: nowrap;
text-decoration: none;
line-height: 100%;
background-color: var(--blue);
border: 0;
line-height: 1;
}

.button:hover {
background-color: var(--lightyellow);
color: var(--anthracite);
}


/*** CHECKBOXES ***/

.fcspan {
display: inline-block;
margin-bottom: 5px;
}

input[type="checkbox"].fcheck, input[type="radio"].fcheck {
    display:none;
}

input[type="checkbox"].fcheck + label span, input[type="radio"].fcheck + label span {
    display:inline-block;
    width:22px;
    height:22px;
	border: 1px solid var(--white);
	border-radius: 3px;
	cursor: pointer;
	vertical-align: middle;
	margin-top: -3px;
	background-color: var(--white) !important;
	background-size: 16px;
-webkit-transition: border .5s;
-moz-transition: border .5s;
-o-transition: border .5s;
transition: border .5s;
}

input[type="checkbox"].fcheck + label span:hover, input[type="radio"].fcheck + label span:hover {
    border: 1px solid var(--blue);
}
input[type="checkbox"].fcheck:checked + label span, input[type="radio"].fcheck:checked + label span {
    background: url('../images/checked.png') center center no-repeat;
	background-size: 16px;
}

/*** FIELDMARGINS ***/

.fieldmargin {
margin-bottom: 14px;
}

.fieldmtop {
margin-top: 14px;
}

.fieldmright, .fieldmrm {
margin-right: 14px;
display: inline-block !important;
}

.fieldmrl {
display: inline-block !important;
}


/*** VARIOUS ***/

::placeholder {
color: var(--lightgrey);
font-weight: var(--normal);
}

.subtext, .sublabel {
display: block;
padding-bottom: 14px;
color: var(--grey);
}

.sublabel {
padding-left: 5px;
padding-right: 5px;
}




/*** RESPONSIVE ***/


@media only screen and (max-width: 1080px) {
.field, .button { height: 44px; }
.fselect { height: 22px; }
.fbox { height: 200px; }
}


@media only screen and (max-width: 768px) {
.field, .fbsmall, .button { font-size: 16px; height: 38px; padding: 8px; }
.fbox  { font-size: 16px; height: 180px; padding: 8px; }
.fselect { height: 20px; }
}


@media only screen and (max-width: 680px) {
.fieldmrm { margin-right: 0px;}
}


@media only screen and (max-width: 480px) {
.field, .fbsmall, .button { font-size: 16px; height: 34px; padding: 6px; }
.fbox { font-size: 16px; height: 140px; padding: 6px; }
.fieldmright { margin-right: 10px; }	
}