::-webkit-input-placeholder {
   color: #666666;
   text-transform:uppercase;
}

:-moz-placeholder { /* Firefox 18- */
   color: #666666;
   text-transform:uppercase;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #666666;
   text-transform:uppercase;
}

:-ms-input-placeholder {  
   color: #666666; 
   text-transform:uppercase;
}

fieldset{
	margin-top:1em !Important;
	margin-bottom:1em !Important;
	padding:1em !Important;
}

legend{
	background:#FFF;
	padding:0 1em !Important;
	font-weight:600;
}

.input{
	box-sizing:border-box;
}

.input.space-left{
	padding-left:15px;
}

.input.space-right{
	padding-right:15px;
}

.input.half{
	width:50%;
}

.input.inline{
	display:block;
	float:left;
}

.input.inline + .input.inline {
	border-right:0;
}


/* First Input after inline set */
.input.inline + .input:not(.inline){
	clear:left;
}

.input.text,
.input.email, 
.input.password,
.input.textarea{
	margin-bottom: 1em;
}

.input.text:not(.content-after) .field-content,
.input.email:not(.content-after) .field-content, 
.input.password:not(.content-after) .field-content{
	border-bottom:1px solid #d3d3d3;
}

.input.text.content-after .field-content > div,
.input.email.content-after .field-content > div, 
.input.password.content-after .field-content > div{
	border-top:1px solid #d3d3d3;
}

.input label{
	display:block;
	font-weight:600;
	text-transform:uppercase;
	font-size:11px;
	color:#666;
	padding-bottom:5px;	
	text-align:left;
}


.input.file{
	padding:1em 0;
}

.input.file label{
	display:block;
	font-weight:600;
	text-transform:uppercase;
	font-size:11px;
	color:#666;
	padding-bottom:5px;	
}


.input.text label{
	display:block;
	font-weight:600;
	text-transform:uppercase;
	font-size:11px;
	color:#666;
}

.input.text.med{
	width:300px;
	max-width:100%;
}

.input.text label[data-suffix]:after{
	content:" "attr(data-suffix);
	color:#999;
}

.input.text.optional label:after{
	content:" (Optional)";
	color:#999;
}

.input.select label{
	display:block;
	font-weight:600;
	text-transform:uppercase;
	font-size:11px;
	color:#666;
	padding-bottom:5px;	
}

.input.text.focused label{
	color:#52c553
}

.input.inline.half + .input.text.inline.half{
	/* border-left:1px solid #d3d3d3; */
}
.input.inline.half:nth-child(2n+1) .field-content{
	margin-right:10px;
}
.input.inline.half:nth-child(2n+1) + .input.inline.half .field-content{
	margin-left:10px;
}

.input.inline:not(.half) + .input.inline:not(.half){
	padding-left:15px;
}

.input.text  label + input{
	
}

.input.textarea{
	
}

.input.textarea label{
	display:block;
}

textarea{
	width:100%;
}


input[type="text"].datepicker {

    border: 1px solid #D2D2D2;
   	width:300px;
    text-indent: 10px;
    padding: .5em;
    max-width: 100%;
 
    background:#FFF url(/img/forms/datepicker_field.png) no-repeat right center;
}


input[type="text"],
input[type="email"],
input[type="phone"],
input[type="password"],
input[type="tel"]{
	text-indent:0.5em;
	margin-bottom:0;
	font-size: 14px;
    padding: 7px 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    border-bottom:5px solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
 
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="phone"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus{
	 outline: none; 
	 border-bottom:5px solid #52c553;
}

input[type="text"].empty{
	background-color:#f3f3f3;
}

input[type="text"].form-error,
input[type="email"].form-error,
input[type="phone"].form-error,
input[type="password"].form-error,
input[type="tel"].form-error{
	 outline: none; 
	 border-bottom:5px solid #c80808;
}

.footer__subscribe-input {
	display:inline !Important;
	padding: 3px 0 4px !Important;
    width: 280px !Important;
    margin-right:0;
}

div.input.select{
	margin-bottom:1em;
}

.field_desc, .field-description{
	font-size:0.8em;
	padding-top:5px;
}

div.cselect {
    overflow: hidden; /* this hides the select drop button */
    padding:0;
    margin:0;
    background: white url(/assets/images/forms/formelements-select.png) no-repeat center right;
    /* this is the new drop button, in image form */
    min-width:12em;
    cursor:pointer;
    border: solid 1px #ccc;
    display:inline-block;
    position:relative;
}

div.cselect select {
    width:115% /* this percentage effectively extends the drop down button out of view */;
    background-color:transparent /* this hides the select background making any styling visible from the div */;
    background-image:none;
    -webkit-appearance: none /* this is required for Webkit browsers */;
    border:none;
    box-shadow:none;
    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
    cursor:pointer;
}


select[multiple]{ 
	border:1px solid #d2d2d2;
	overflow:auto;
	min-width:80px;
 }

select[multiple] option{
    border-bottom:1px solid #d2d2d2;
    padding:5px;

}

select[multiple] option:last-child{ border-bottom:0; }

::selection { background-color:#3f6f34; color:#FFF}
::-moz-selection { background-color:#3f6f34; color:#FFF}

/*** SELECT END ***/

/*** RADIO/CHECK ***/

  .input.radio.inline fieldset{
        border:0 !Important;
        padding:0;
        margin-bottom:0;
    }

    .input.radio.inline{
        border:0 !Important;
        padding:0;

    }

    .service_radio{
        display:inline-block !Important;
        margin-right:15px;
    }

    .input.radio.inline fieldset legend, .input.select.inline label{ color:#333333; }

    .input.radio.inline fieldset label{ display:inline-block; }

    .input.select .checkbox{ display:inline-block; }

   .radio input[type="radio"],
   .checkbox input[type="checkbox"] { position: absolute; left: -999em; }
   .oiInputBox label input[type="checkbox"]{
        position: relative;
        left: 0;
    }

    .checkbox input[type="checkbox"] + label,
    input[type="radio"] + label{
        display: inline-block;
        cursor:pointer;
        padding-right:10px;
        margin-bottom:10px;
    }

    input[type="radio"] + label:before,
    .checkbox input[type="checkbox"] + label::before {
        content:""; /* this is generated content*/
        display: inline-block; /* make this fake elements inline block */
        position:relative; /* we need to move the element without effecting the doc flow */
        top:8px;  /* we're moving it slightly down for alignment purposes */
        left:0px; /* we're moving it slightly to the left */
        width:25px; height:25px; /* the width and height of the fake elements */
        background-image:url(/assets/images/forms/formelements.png); /* the background image sprite */
   		background-position: 0 -25px; 
    }
    
	.checkbox input[type="checkbox"] + label::before{
    	background-position: 0 -25px; 
    }
    
    .checkbox input[type="checkbox"]:checked + label::before { 
    	background-position: 0 0 ;
	}
	
    input[type="radio"] + label:before { 
    	background-position: -25px -25px; } 
    	
   	input[type="radio"]:checked + label:before { background-position: -25px 0; }

    .offers_window input[type="checkbox"]{
        position:relative;
        left:0;
    }

    .offers_window input[type="radio"]{
        position:relative;
        left:0;
    }

/*** RADIO/CHECK END ***/

.input.date-picker, .input.no-border{
	border:0 !Important;
}


.input.date-picker label{
	padding-bottom:5px;
}



/*** Toggle ***/

.input.toggle{
	position:relative;
}

.input.toggle input[type="checkbox"] {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;

}
.input.toggle input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  cursor: pointer;
  outline: none;
  user-select: none;
  font-size:0;
}

.input.toggle input[type="checkbox"] + label {
  padding: 2px;
  width: 54px;
  height: 30px;
  background-color: #FFF;
  border-radius: 60px;
  transition: background 0.4s;
  border:2px solid #a2a2a2;
}

.input.toggle input[type="checkbox"] + label:before,
.input.toggle input[type="checkbox"] + label:after {
  display: block;
  position: absolute;
  content: "";
}

.input.toggle input[type="checkbox"] + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff !Important;
  border-radius: 60px;
  transition: background 0.4s;
}

.input.toggle input[type="checkbox"] + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 26px;
  background-color: #a2a2a2;
  border-radius: 32px;
  transition: margin 0.4s, background 0.4s;
}
.input.toggle input[type="checkbox"]:checked + label {
  background-color: #399012;
}
.input.toggle input[type="checkbox"]:checked + label:after {
  margin-left: 22px;
  background-color: #73a900;
}

.toggle-label{
	display:inline-block;
	line-height:35px;
	vertical-align:middle;
	padding-left:0.5em;
}

.input.toggle input[type="checkbox"]:not(:checked) ~ .toggle-label[data-prefix-off]:before{
	content: attr(data-prefix-off);
}

.input.toggle input[type="checkbox"]:checked ~ .toggle-label[data-prefix-on]:before{
	content: attr(data-prefix-on);
}

#tag-topic-1{
	margin-right:1em;
}

.input.image{
	border:1px solid #d2d2d2;
	margin-bottom: 1em;
	padding:1em;
}

.input.image .field-content{
	
}

.input.image .input.file, .file-btn{
	position:relative;
	display:inline-block;
	background:#52c553;
	padding: 3px 20px 5px;
	overflow:hidden;
	vertical-align:middle;
	cursor:pointer;
	color:#FFF;
}

.input.image .input.file:before{
	content:"Choose Image";
}

.file-btn:before{
	content:"Choose File";
}

.file-added .file-btn:before{
	content:"Change File";
}

.input.image .input.file input, .file-btn input{
	position:absolute;
	top:0;
	left:0;
	transform:scale(2);
	transform-origin:left top;
	cursor:pointer;
	opacity:0;
}

.file-selector{
	margin:0.5em 0;
	margin-bottom:0.3em;
}

.file-selector label{
	display:inline-block;
	vertical-align:middle;
	padding-left:1em;
	font-size:inherit;
}

.input.image .upload-progress{
	height:5px;
}

.input.image .upload-progress .bar{
	height:5px;
	background:#52c553;
	width:0;
}

.file-added .file-btn{
	background:#f66200
}

.file-added .file-selector{
	color:#f66200
}

.uploader .max-size-label{
	margin:0;
	padding:0;
}

.uploader .message{
	padding-bottom:10px;
}

.uploader .clear{
	color:#d51111;
}

.uploader:not(.file-added) .message{
	display:none;
}

.uploader.file-started .file-selector,
.uploader.file-started .max-size-label{
	display:none;
}