@charset "utf-8";

.form-right{width:68%;float:left;}
.form-right p{margin:0px;}
.form-left{float:left; width:20%; margin-right:2%; text-align:right;}
.form-left-large{float:left; width:28%; margin-right:2%; text-align:right;}

/*Contact Form*/
.cf-input{width:50%}
.cf-comments{width:100%}
.EmailForm{visibility:hidden; display:none;}

input{font-size:16px;}
input[type=text], input[type=password], select, textarea{width: 100%; padding: 18px 12px; margin: 8px 0; border-radius: 6px; box-sizing: border-box; border: thin solid #cccccc; font-size:17px;  font-weight:400;  color: #999999; line-height: 150%;  letter-spacing: .02em;}

::placeholder{color: #333333}
input[type=text]:focus {background-color: #F4F4F4; border-radius: 6px; outline: none;}
textarea:focus {background-color: #F4F4F4; outline: none;}
input:focus::placeholder{color:#F4F4F4;}
textarea:focus::placeholder{color:#F4F4F4;}
/*Removing and styling first option of select box*/

select, select option {/*color:#cccccc;*/}
select option:disabled {color: #CCCCCC;}
[hidden] {display: none;}
select::-ms-expand {display: none;} /*Hide button*/

.form-container-field {max-width:600px}
.form-container-field select { /*Add styled arrow to select dropdown*/
  -webkit-appearance: none;-moz-appearance: none;appearance: none; background-image: url(../layout/graphics/down-arrow-alt.png) ; background-repeat: no-repeat;background-position: center right; cursor:pointer; 
}

/*Handle Attractive Checkbox Styling*/
/*Example <input type="checkbox" class="css-checkbox" id="THIS" value="VAL" name="NAME"/> <label for="THIS" class="css-label check-image">TEXT</label>*/

label {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

input[type=checkbox].css-checkbox {position: absolute; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; }
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px; margin-bottom: 15px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; vertical-align:middle; cursor:pointer; }
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -15px; }

.css-label{background-image: url(../layout/graphics/dark-check-green.png); }
.check-image{background-image: url(../layout/graphics/lite-green-check.png); }

/*Submit Button Styling*/

input[type=submit].formbut{background-color: transparent; border: 0; color: transparent; width: 70px; height: 70px; cursor: pointer; vertical-align:top;}		
input[type=submit].formbut:hover{ opacity: 0.8; filter: alpha(opacity=80);}

.radio-toolbar input[type="radio"] {opacity: 0; width: 0;}.radio-toolbar label {  display: inline-block;  background-color: #ddd;  padding: 10px;  border: 2px solid #ccc;  border-radius: 20px;}.radio-toolbar input[type="radio"]:checked + label {	border: 2px solid #394F98;	background-image: url(../graphics/tick.png);}.radio-toolbar input[type="radio"]:focus + label {  border: 2px solid #ccc;}.radio-toolbar label:hover {	border: 2px solid #394F98; background:#394F98;  cursor: pointer;}

.checkbox-toolbar input[type="checkbox"] {opacity: 0; width: 0;}.checkbox-toolbar label {  display: inline-block;  background-color: #ddd;  padding: 10px;  border: 2px solid #ccc;}.checkbox-toolbar input[type="checkbox"]:checked + label {	border: 2px solid #394F98;	background-image:url(../graphics/tick.png);}.checkbox-toolbar input[type="checkbox"]:focus + label {  border: 2px solid #ccc;}.checkbox-toolbar label:hover {	border: 2px solid #394F98;	background:#394F98;  cursor: pointer;}

.radio-toolbar input[type="radio"] {opacity: 0; width: 0;}.radio-toolbar label {  display: inline-block;  background-color: #ddd;  padding: 10px;  font-family: sans-serif, Arial;  border: 2px solid #ccc;  border-radius: 20px;}.radio-toolbar input[type="radio"]:checked + label {	border: 2px solid #394F98;	background-image: url(../graphics/tick.png);}.radio-toolbar input[type="radio"]:focus + label {  border: 2px solid #ccc;}.radio-toolbar label:hover {	border: 2px solid #394F98; background:#394F98;  cursor: pointer;}

.checkbox-toolbar input[type="checkbox"] {opacity: 0; width: 0;}.checkbox-toolbar label {  display: inline-block;  background-color: #ddd;  padding: 10px;  font-family: sans-serif, Arial;  border: 2px solid #ccc;}.checkbox-toolbar input[type="checkbox"]:checked + label {	border: 2px solid #394F98;	background-image:url(../graphics/tick.png);}.checkbox-toolbar input[type="checkbox"]:focus + label {  border: 2px solid #ccc;}.checkbox-toolbar label:hover {	border: 2px solid #394F98;	background:#394F98;  cursor: pointer;}

@media screen and (max-width:990px)
{ 
.cf-input{width:70%}
.form-container-field {margin:auto;}
}

@media screen and (max-width:600px)
{ 
.cf-input{width:90%;}
}