/* Form */

.form-style-1 {
    margin:10px auto;
    max-width: 300px;
    padding: 20px 12px 10px 20px;
    font: 1em Source Sans Pro, sans-serif; font-weight: 400;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}

.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
    -moz-box-shadow: 0 0 8px #b3ccc5;
    -webkit-box-shadow: 0 0 8px #b3ccc5;
    box-shadow: 0 0 8px #b3ccc5;
    border: 1px solid #b3ccc5;
}
.form-style-1 .field-divided{
    width: 100%;
}

.form-style-1 .field-long{
    width: 100%;
}
.form-style-1 .field-select{
    width: 100%;
}
.form-style-1 .field-textarea{

    font: Source Sans Pro, sans-serif;
}

textarea{

    font: Source Sans Pro, sans-serif;
}


.form-style-1 input[type=submit], .form-style-1 input[type=button]{
    background: #b3ccc5;
    width: 100%;
    padding: 10px 10px 10px 10px;
    border: none;
    color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
    background: #00543d;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
.form-style-1 .required{
    color:red;
}





ul li input[type=radio]{
  position: relative;
  visibility: hidden;

}

ul li label{
  display: block;
  width: 100%;
  max-width: 300px;
  position: absolute;
  font-weight: 400;
  font-size: 1.0em;
  padding: 0px;
  margin-left: 15px;
  height: 0px;
  text-align: center;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;

}

ul li:hover label{
	color: #b3ccc5;
}

ul li .check{

  display: block;
  position: relative;
  border: 3px solid #AAAAAA;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  top: 0px;
  left: 80px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 3px solid #b3ccc5;
}

ul li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 6px;
  width: 6px;
  top: 2px;
  left: 2px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 3px solid #00543d;
}

input[type=radio]:checked ~ .check::before{
  background: #00543d;
}

input[type=radio]:checked ~ label{
  color: #00543d;
}






/* Form Beispiel HTML

<form>
<ul class="form-style-1">
    <li><label>Full Name <span class="required">*</span></label><input type="text" name="field1" class="field-divided" placeholder="First" />&nbsp;<input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
    <li>
        <label>Email <span class="required">*</span></label>
        <input type="email" name="field3" class="field-long" />
    </li>
    <li>
        <label>Subject</label>
        <select name="field4" class="field-select">
        <option value="Advertise">Advertise</option>
        <option value="Partnership">Partnership</option>
        <option value="General Question">General</option>
        </select>
    </li>
    <li>
        <label>Your Message <span class="required">*</span></label>
        <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
    </li>
    <li>
        <input type="submit" value="Submit" />
    </li>
</ul>
</form>


*/