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



Primary style



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

*, *::after, *::before {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}









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



Form



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

.cd-form {

  width: 90%;

  max-width: 600px;

  margin: 4em auto;

}

.cd-form::after {

  clear: both;

  content: "";

  display: table;

}

.cd-form fieldset {

  margin: 24px 0;

}

.cd-form legend {

  padding-bottom: 10px;

  margin-bottom: 20px;

  font-size: 2rem;

  border-bottom: 1px solid #ecf0f1;

}

.cd-form div {

  /* form element wrapper */

  position: relative;

  margin: 20px 0;

}

.cd-form h4, .cd-form .cd-label {

  font-size: 1.3rem;

  color: #94aab0;

  margin-bottom: 10px;

}

.cd-form .cd-label {

  display: block;

  color:#000000;

}

.cd-form input, .cd-form textarea, .cd-form select, .cd-form label {

	font-family: "Open Sans", sans-serif;

	

}

.cd-form input[type="text"],

.cd-form input[type="email"],

.cd-form input[type="datetime-local"],

.cd-form textarea,

.cd-form select,

.cd-form legend {

  display: block;

  width: 100%;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

}







.cd-form input[type="text"],

.cd-form input[type="email"],

.cd-form input[type="datetime-local"],

.cd-form textarea,

.cd-form select {

  /* general style for input elements */

  padding: 5px;

  border: 1px solid #cfd9db;

  background-color: #ffffff;



}

.cd-form input[type="text"]:focus,

.cd-form input[type="email"]:focus,

.cd-form input[type="datetime-local"]:focus,

.cd-form textarea:focus,

.cd-form select:focus {

  outline: none;

 

}

.cd-form .cd-select {

  /* select element wapper */

  position: relative;

}

.cd-form .cd-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("../img/cd-icon-arrow.svg") no-repeat center center;

  pointer-events: none;

}

.cd-form select {

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  cursor: pointer;

}

.cd-form select::-ms-expand {

  display: none;

}

.cd-form .cd-form-list {

  margin-top: 16px;

}

.cd-form .cd-form-list::after {

  clear: both;

  content: "";

  display: table;

}

.cd-form .cd-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;

}

.cd-form input[type=radio],

.cd-form 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;

}

.cd-form input[type="radio"] + label,

.cd-form input[type="checkbox"] + label {

  padding-left: 24px;

}

.cd-form input[type="radio"] + label::before,

.cd-form input[type="radio"] + label::after,

.cd-form input[type="checkbox"] + label::before,

.cd-form input[type="checkbox"] + label::after {

  /* custom radio and check boxes */

  content: '';

  display: block;

  position: absolute;

  left: 0;

  top: 50%;

  margin-top: -8px;

  width: 16px;

  height: 16px;

}

.cd-form input[type="radio"] + label::before,

.cd-form input[type="checkbox"] + label::before {

  border: 1px solid #cfd9db;

  background: #ffffff;

  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);

}

.cd-form input[type="radio"] + label::before,

.cd-form input[type="radio"] + label::after {

  border-radius: 50%;

}

.cd-form input[type="checkbox"] + label::before,

.cd-form input[type="checkbox"] + label::after {

  border-radius: .25em;

}

.cd-form input[type="radio"] + label::after,

.cd-form input[type="checkbox"] + label::after {

  background-color: #2c97de;

  background-position: center center;

  background-repeat: no-repeat;

  box-shadow: 0 0 5px rgba(44, 151, 222, 0.4);

  display: none;

}

.cd-form input[type="radio"] + label::after {

  /* custom image for radio button */

  background-image: url("../img/cd-icon-radio.svg");

}

.cd-form input[type="checkbox"] + label::after {

  /* custom image for checkbox */

  background-image: url("../img/cd-icon-check.svg");

}

.cd-form input[type="radio"]:focus + label::before,

.cd-form 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);

}

.cd-form input[type="radio"]:checked + label::after,

.cd-form input[type="checkbox"]:checked + label::after {

  display: block;

}

.cd-form input[type="radio"]:checked + label::before,

.cd-form input[type="radio"]:checked + label::after,

.cd-form input[type="checkbox"]:checked + label::before,

.cd-form input[type="checkbox"]:checked + label::after {

  -webkit-animation: cd-bounce 0.3s;

  -moz-animation: cd-bounce 0.3s;

  animation: cd-bounce 0.3s;

}

.cd-form textarea {

  min-height: 200px;

  resize: vertical;

  overflow: auto;

}

.cd-form input[type="submit"] {

  /* button style */

  border: none;

  background: #91c444;

  border-radius: .25em;

  padding: 16px 20px;

  color: #ffffff;

  font-weight: bold;

  float: right;

  cursor: pointer;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

}

.no-touch .cd-form input[type="submit"]:hover {

  background: #42a2e1;

}

.cd-form input[type="submit"]:focus {

  outline: none;

  background: #73a32b;

}

.cd-form input[type="submit"]:active {

  -webkit-transform: scale(0.9);

  -moz-transform: scale(0.9);

  -ms-transform: scale(0.9);

  -o-transform: scale(0.9);

  transform: scale(0.9);

}

.cd-form [required] {

  background: url("../img/cd-required.svg") no-repeat top right;

}

.cd-form .error-message p {

  background: #e94b35;

  color: #ffffff;

  font-size: 1.4rem;

  text-align: center;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  border-radius: .25em;

  padding: 16px;

}

.cd-form .error {

  border-color: #e94b35 !important;

}

@media only screen and (min-width: 600px) {

  .cd-form div {

    /* form element wrapper */



  }

  .cd-form legend + div {

    /* reduce margin-top for first form element after the legend */

   

  }

  .cd-form h4, .cd-form .cd-label {



 

  }

  .cd-form input[type="text"],

  .cd-form input[type="email"],

  .cd-form input[type="datetime-local"]:focus,

  .cd-form textarea,

  .cd-form select {

   

  }

}



@-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(0.8);

    -moz-transform: scale(0.8);

    -ms-transform: scale(0.8);

    -o-transform: scale(0.8);

    transform: scale(0.8);

  }

}

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





FLoating labels 



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

.js .floating-labels div {

  margin: 28px 0;

}

.js .floating-labels .cd-label {

  position: absolute;

  top: 16px;

  left: 16px;

  font-size: 1.6rem;

  cursor: text;

  -webkit-transition: top 0.2s, left 0.2s, font-size 0.2s;

  -moz-transition: top 0.2s, left 0.2s, font-size 0.2s;

  transition: top 0.2s, left 0.2s, font-size 0.2s;

}

.js .floating-labels .icon .cd-label {

  left: 56px;

}

.js .floating-labels .cd-label.float {

  /* move label out the input field */

  font-size: 1.2rem;

  top: -16px;

  left: 0 !important;

}

@media only screen and (min-width: 600px) {

  .js .floating-labels legend + div {

    /* reduce margin-top for first form element after the legend */

    margin-top: 16px;

  }

  .js .floating-labels .cd-label {

    top: 20px;

  }

}









.cd-formw input[type="submit"] {

  /* button style */

   border: none;

  background: #91c444;

  border-radius: .25em;

  padding: 10px 8px;

  color: #ffffff;

  cursor: pointer;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

  margin:10px;

 font-family: "Roboto Slab", serif;

	line-height: 1.5;

	font-weight: 300;

	font-size: 0.50em;

  

  

}



.cd-formw input[type="submit"]:hover {

  background: #42a2e1;

}

.cd-formw input[type="submit"]:focus {

  outline: none;

  background: #73a32b;

}

.cd-formw input[type="submit"]:active {

  -webkit-transform: scale(0.9);

  -moz-transform: scale(0.9);

  -ms-transform: scale(0.9);

  -o-transform: scale(0.9);

  transform: scale(0.9);

}





.cd-formw button[type="submit"] {

  /* button style */

   border: none;

  background: #f98e1a;

  border-radius: .25em;

  padding: 10px 8px;

  color: #ffffff;

  cursor: pointer;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

  margin:10px;

 font-family: "Roboto Slab", serif;

	line-height: 1.5;

	font-weight: 300;

	font-size: 0.50em;

  

  

}





















































button {



  border: none;

  background: #91c444;

  border-radius: .25em;

  padding: 10px 10px;

  color: #ffffff;

  cursor: pointer;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

  margin:10px;

   font-family: "Roboto Slab", serif;

	line-height: 1.5;

	font-weight: 300;

	font-size: 0.50em;

  

}





button:hover {

  background: #73a32b;

}

button:focus {

  outline: none;

  background: #73a32b;

}

button:active {

  -webkit-transform: scale(0.9);

  -moz-transform: scale(0.9);

  -ms-transform: scale(0.9);

  -o-transform: scale(0.9);

  transform: scale(0.9);

}





.buttonb {



  border: none;

  background: #f98e1a;

  border-radius: .25em;

  padding: 10px 10px;

  color: #ffffff;

  cursor: pointer;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

  margin:10px;

}



.buttonb:hover {

  background: #ef891a;

}

.buttonb:focus {

  outline: none;

  background: #ef891a;

}

.buttonb:active {

  -webkit-transform: scale(0.9);

  -moz-transform: scale(0.9);

  -ms-transform: scale(0.9);

  -o-transform: scale(0.9);

  transform: scale(0.9);

}