/* ==========================================================================
FORMS
========================================================================== */
p.formnotes {
margin:0 auto;
padding-top:50px;
width:70%;
}

p.certify {
    font-size: .8em;
    margin:0 auto;
    }

#contactform,
#careersform,
#fuelform {
padding-top:10px;
width:100%;
text-align: center;
margin-bottom: 50px;
}

#contactform fieldset,
#careersform fieldset,
#fuelform fieldset {
margin:0;
padding:0;
border:none;	
float:left;
display:inline;
width:100%;
}
/* 
#contactform legend,
#careersform legend,
#fuelform legend  {
}	 */

/* #contactform p,
#careersform p,
#fuelform p {
margin:.5em 0;
width:100%;
}	 */

#contactform label,
#careersform label,
#fuelform label {
display:block;
font-family: "OpenSansLight", sans-serif;
color: #58585b;
font-size: 1.1em;
line-height: 1.5em;
margin: 10px 0 8px 0;
}

#contactform label span,
#careersform label span,
#fuelform label span {
font-family: "OpenSansLight", sans-serif;
color: #58585b;
font-size: .8em;
line-height: 1.5em;
margin: 0 0 8px 0;
font-style: italic;
}


/* checkboxes & radio buttons
--------------------------------------------------------- */

#contactform .checkbox span, #contactform .radio span,
#careersform .checkbox span, #careersform .radio span,
#fuelform .checkbox span, #fuelform .radio span {
padding-left: 10px;
padding-right: 20px;
}



/* input highlights
--------------------------------------------------------- */

textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"]
{
font-family: "OpenSansLight", sans-serif;
text-align: center;
display: inline-block;
height: 70px;
padding: 6px 6px;
margin-bottom: 50px;
/* font-size: 1em;
line-height: 20px; */
color: #999;
vertical-align: middle;
padding:10px 0 10px 0px;
border-radius: 0;
padding:10px;
width:100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;/*removes inner shadow from mobile*/
}

textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"]
{
font-family: "OpenSansLight", sans-serif;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;/*removes inner shadow from mobile*/
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus
{
outline: none;
border: none;
border: 1px solid #00A1E4;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
color: #58585b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;/*removes inner shadow from mobile*/
}


/* This is used for styling the file upload input */
/* input[type="file"] {
font-family: "OpenSansLight", sans-serif;
text-align: left;
display: inline-block;
height: 60px;
padding: 0;
margin-bottom: 50px;
font-size: 1em;
line-height: 0px;
color: #999;
vertical-align: middle;

border-radius: 0;

width:100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-appearance: none;
}

input[type="file"] {
font-family: "OpenSansLight", sans-serif;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;
}

input[type="file"]:focus {
border: 1px solid #00A1E4;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
color: #00A1E4;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;
} */

/* set height of text area */
#contactform textarea,
#careersform textarea,
#fuelform textarea {		
height:210px;
}



/* -------------------------------- 

Select Dropdown

-------------------------------- */

select {
font-family: "OpenSansLight", sans-serif;
font-size: .85em;
color: #58585b;
text-align: center;
outline: 0;
margin-top: 10px;
margin-bottom: 50px;
padding: 0;
height: 70px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

select,
legend {
display: block;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}

select {
/* general style for input elements */
padding: 12px;
border: 1px solid #cfd9db;
background-color: #ffffff;
color: #c1c1c1;
}

/* changes color of text in the dropdown */
select .option {
color: #666;
}

select:hover {
outline: none;
border-color: #00A1E4;
}

select:focus {
outline: none;
border-color: #00A1E4;color: #58585b;text-align: center;
}

.contact-form-select {
/* select element wapper */
position: relative;
}

.contact-form-select::after {
/* arrow icon for select element */
content: '';
position: absolute;
z-index: 1;
right: 16px;
top: 50%;
margin-top: -8px;
display: block;
width: 16px;
height: 16px;
background: url("../../images/cd-icon-arrow.svg") no-repeat center center;
pointer-events: none;
}

select {
cursor: pointer;
}

select::-ms-expand {
display: none;
}



/* -------------------------------- 

Radios & Checkmarks

-------------------------------- */


.contact-form-list {
margin-top: 20px;
margin-bottom: 20px;
}

.contact-form-list::after {
clear: both;
content: "";
display: table;
}

.contact-form-list li{
/* wrapper for radio and checkbox input types */
display: inline-block;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0 26px 16px 0;
/*float: left;*/
}

input[type=radio],
input[type=checkbox] {
/* hide original check and radio buttons */
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
padding: 0;
opacity: 0;
z-index: 2;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
cursor: pointer;
padding-left: 24px;
}

input[type="radio"] + label::before,
input[type="radio"] + label::after,
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after {
/* custom radio and check boxes */
content: '';
display: block;
position: absolute;
left: 0;
top: 50%;
margin-top: -5px;
width: 16px;
height: 16px;

}

/* controls the border of radios and checkboxes when not selected */
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
border: 1px solid #cfd9db;
background: #fff;
}

input[type="radio"] + label::before,
input[type="radio"] + label::after  {
border-radius: 50%;
}

input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after {
border-radius: .25em;
}

/* the background color of radios and checkboxes when selected */
input[type="radio"] + label::after,
input[type="checkbox"] + label::after {
background-color: #2c97de;
background-position: center center;
background-repeat: no-repeat;
display: none;
}

input[type="radio"] + label::after,
input[type="radio"] + label::after {
/* custom image for radio button */
background-image: url("../../images/cd-icon-radio.svg");
}

input[type="checkbox"] + label::after ,
input[type="checkbox"] + label::after {
/* custom image for checkbox */
background-image: url("../../images/cd-icon-check.svg");
}

input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before {
/* add focus effect for radio and check buttons */
box-shadow: 0 0 5px rgba(44, 151, 222, 0.6);
}

input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
display: block;
}

input[type="radio"]:checked + label::before,
input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + label::after {
-webkit-animation: cd-bounce 0.3s;
-moz-animation: cd-bounce 0.3s;
animation: cd-bounce 0.3s;
}



/* -------------------------------- 

Radio & Checkmark Animations

-------------------------------- */
@-webkit-keyframes cd-bounce {
0%, 100% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.8);}
}
@-moz-keyframes cd-bounce {
0%, 100% {-moz-transform: scale(1);}
50% {-moz-transform: scale(0.8);}
}

@keyframes cd-bounce {
0%, 100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
50% {-webkit-transform: scale(1.5);/* was 0.8 */-moz-transform: scale(1.5);/* was 0.8 */-ms-transform: scale(1.5);/* was 0.8 */-o-transform: scale(1.5);/* was 0.8 */transform: scale(1.5);/* was 0.8 */}
}



/* -------------------------------- 

Custom icons

-------------------------------- */


[required] {
background: url("../../images/cd-required.svg") no-repeat top right 15px;
}

@media only screen and (max-width: 55em) {
[required] {
background: url("../../images/cd-required.svg") no-repeat top right;
}
}




/* ==========================================================================
Contact Form Caution, Invalid and Valid Styles
==========================================================================*/
/* invalid class applied to inputs by formprocessors.js in encrypted forms */
[required].invalid {
background: url("../../images/Alert.svg") no-repeat ;
background-size: 20px 20px;
background-position: right 10px bottom 50%;
border: 2px solid #ffa4a4;
}

/* invalid class applied to select dropdowns by formprocessors.js in encrypted forms */
select[required].invalid {
background: url("../../images/Alert.svg") no-repeat ;
background-size: 20px 20px;
background-position: right 40px bottom 50%;
border: 2px solid #ffa4a4;
}

/* invalid class applied to textarea by formprocessors.js in encrypted forms */
textarea[required].invalid {
background: url("../../images/Alert.svg") no-repeat ;
background-size: 20px 20px;
background-position: right 10px top 10px;
border: 2px solid #ffa4a4;
}

/* invalid class applied to invalid focused input */
#contactform input:focus:invalid,
#careersform input:focus:invalid,
#fuelform input:focus:invalid {
background: url("../../images/Caution.svg") no-repeat;
background-size: 20px 20px;
background-position: right 10px bottom 50%;
border: 1px solid #FDBA12;
}

/* valid class applied to valid focused input */
#contactform input:required:focus:valid,
#careersform input:required:focus:valid,
#fuelform input:required:focus:valid {
background: url("../../images/Check-Mark.svg") no-repeat;
background-size: 20px 20px;
background-position: right 10px bottom 50%;
}

/* valid class applied to valid required form input */
#contactform input:required:valid,
#careersform input:required:valid,
#fuelform input:required:valid {
background: url("../../images/Check-Mark.svg") no-repeat;
background-size: 20px 20px;
background-position: right 10px bottom 50%;
border: 1px solid #1bc100;
}



/* invalid class applied to invalid focused textarea */
#contactform textarea:focus:invalid,
#careersform textarea:focus:invalid,
#fuelform textarea:focus:invalid {
background: url("../../images/Caution.svg") no-repeat;
background-size: 20px 20px;
background-position: right 10px top 10px;
border: 1px solid #FDBA12;
}

/* valid class applied to valid focused textarea */
#contactform textarea:required:focus:valid,
#careersform textarea:required:focus:valid,
#fuelform textarea:required:focus:valid {
background: url("../../images/Check-Mark.svg") no-repeat;
background-size: 20px 20px;
background-position: right 10px top 10px;
border: 1px solid #1bc100;
}

/* valid class applied to valid required form textarea */
#contactform textarea:required:valid,
#careersform textarea:required:valid,
#fuelform textarea:required:valid {
background: url("../../images/Check-Mark.svg") no-repeat;
background-size: 20px 20px;
background-position: right 10px top 10px;
border: 1px solid #1bc100;
}





/* invalid class applied to invalid focused select dropdowns */
#contactform select:focus:invalid,
#careersform select:focus:invalid,
#fuelform select:focus:invalid {
background: url("../../images/Caution.svg") no-repeat;
background-size: 20px 20px;
background-position: right 40px bottom 50%;
border: 1px solid #FDBA12;
}

/* valid class applied to valid focused select dropdowns */
#contactform select:required:focus:valid,
#careersform select:required:focus:valid,
#fuelform select:required:focus:valid {
background: url("../../images/Check-Mark.svg") no-repeat;
background-size: 20px 20px;
background-position: right 40px bottom 50%;
}

/* valid class applied to valid required form select dropdowns */
#contactform select:required:valid,
#careersform select:required:valid,
#fuelform select:required:valid {
background: url("../../images/Check-Mark.svg") no-repeat;
background-size: 20px 20px;
background-position: right 40px bottom 50%;
border: 1px solid #1bc100;
}


/* submit button
--------------------------------------------------------- */
#contactform p.submit,
#careersform p.submit,
#fuelform p.submit {
clear:both;
padding:20px 0 0 0;
margin:0 0 50px 0;
text-align:center;
}

#contactform button,
#careersform button,
#fuelform button {
font-family: "OpenSansLight", sans-serif;
text-align:center;
width:50%;
padding: 12px;
border: none;
background: #24c050;
color: #fff;
text-decoration: none;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
}

#contactform button:hover,
#careersform button:hover,
#fuelform button:hover {
width:50%;
padding: 12px;
background-color: #b5d9bf;
color: #fff;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

@media only screen and (max-width: 55em) {
#contactform button,
#careersform button,
#fuelform button {
width:100%;
}

#contactform button:hover,
#careersform button:hover,
#fuelform button:hover {
width:100%;
}
}


/* Hints, Errors & Messages
--------------------------------------------------------- */
#contactform .hint,
#careersform .hint,
#fuelform .hint {
font-weight: normal;
color: #01b169; /* green 01b169 was blue #2076c8 */
margin-left: 10px;
}

/* The form error code setup */
#contactform .error,
#careersform .error,
#fuelform .error {
font-size: 1em;
font-weight: normal;
color: #e74c3c;/* control text color */
height: 30px;
margin-top: -30px;
text-align: left;
text-align: center;
}

/* Add icon to the error text using icon font */
#contactform .error:before,
#careersform .error:before,
#fuelform .error:before {
font-family: "fontello";/* call the icon font */
font-size: 1.1em;/* control icon size */
content: "\e817";/* icon font base encode code */
color: #e74c3c;/* control icon color */
display: inline-block;
text-align: left;
padding-right: 8px;
speak: none;
}

@media only screen and (max-width: 55em) {
/* The form error code setup */
#contactform .error,
#careersform .error,
#fuelform .error {
font-size: .9em;/* control icon size */
margin-top: 20px;
margin-bottom: 40px;
}
}

/* controls message after someone signs up or fills out a form - */
#formmessage {
width: 100%;
margin: 0 auto;
}

/* Hide the security question on forms [ honeypot ]
--------------------------------------------------------- */
.verifyemail {display: none;}


/* Over-Ride Placeholder Copy Color & Opacity */
::-webkit-input-placeholder {
color: #b6b6b6;
opacity: 1 !important; /* for chrome */
}

:-moz-placeholder { /* Firefox 18- */
color: #b6b6b6;
opacity: 1 !important;
}

::-moz-placeholder {  /* Firefox 19+ */
color: #b6b6b6;
opacity: 1 !important;
}

:-ms-input-placeholder {  
color: #b6b6b6;
opacity: 1 !important;
}





/* -------------------------------- 

Employment Form Stuff

-------------------------------- */
#careersform h4 {
margin: 10px 0 30px 0;
padding: 20px 0 20px 0;
color: #fff;
background-color: #00833e;
clear: both;
border-top: 1px solid #00833e;
border-bottom: 1px solid #00833e;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

#careersform h3 {
margin: 10px 0 30px 0;
padding: 20px 0 20px 0;
color: #0582c0;
background-color: #f1f1f1;
clear: both;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

p.formLegal {
font-size: .85em;
padding: 20px 0 20px 0;
text-align: center;
clear: both;
}

.file {
border: 1px solid #ccc;
padding: 20px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;
/* background-color: #e6faf0; */
}

.file input {
color: #00833e;
}