@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?80146367');
  src: url('../font/fontello.eot?80146367#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?80146367') format('woff'),
       url('../font/fontello.ttf?80146367') format('truetype'),
       url('../font/fontello.svg?80146367#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

.answer-wrapper input[type="text"].answer {
  background: white;
  outline: none;
  border: 1px solid #e6e6e6;
  height: 2.5em;
  margin: 0.5em 0.5em 0.5em 2em;
}


.answer-wrapper input[type="text"].answer:focus {
  background: #fafafa;
  border: 1px solid #e1e1e1;
}

.answer-wrapper input[type="button"].check-response {
  display: inline-block;
  padding: 0.8em;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background: rgb(209, 255, 209);
  border: 1px solid rgb(177, 255, 177);
  height: 3.5em;
  margin: 0.7em 0.5em 0.5em 0.5em;
}

.answer-wrapper input[type="button"].check-response:hover {
  background: rgb(182, 255, 182);
}

.answer-wrapper input[type="button"].check-response:active {
  background: rgb(153, 255, 153);
}

.input {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  max-width: 350px;
  width: calc(100% - 2em);
  vertical-align: top;
}

.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.4em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #aaa;
  /*font-weight: bold;*/
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
  outline: none;
}

.input__label {
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  padding: 0em 0;
  width: 100%;
}

.graphic {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}

.icon {
  color: #ddd;
  font-size: 150%;
}

/* Individual styles */

/* Yoko */
.input__field--yoko {
  z-index: 10;
  width: 100%;
  background: transparent;
  color: #f5f5f5;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.input__label--yoko {
  position: relative;
  width: 100%;
  color: #b04b40;
  text-align: left;
}

.input__label--yoko::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 4em;
  background: #c5564a;
  -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.input__label--yoko::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.25em;
  background: #ad473c;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.input__label-content--yoko {
  padding: 0.75em 0;
}

.input__field--yoko:focus,
.input--filled .input__field--yoko {
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.input__field--yoko:focus + .input__label--yoko::before,
.input--filled .input__label--yoko::before {
  -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
}

.input__field--yoko:focus + .input__label--yoko,
.input--filled .input__label--yoko {
  pointer-events: none;
}

.input__field--yoko:focus + .input__label--yoko::after,
.input--filled .input__label--yoko::after {
  -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
  transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
}







/* Kohana */


.input--kohana {
  overflow: hidden;
  background: #fff;
  /*width: 30%;*/
  width: 100%;
}

.input__field--kohana {
  width: 100%;
  /*background: transparent;*/
  background: #fff;
  padding-left: 0.9em;
  color: #6a7989;
  /*padding: 2.0em;*/

  /*line-height: normal;*/
}

.input__label--kohana {
  position: absolute;
  width: 100%;
  text-align: left;
  pointer-events: none;
  color: #D2D2D2;
  font-family: 'Oxygen', sans-serif;
  font-weight: normal;
  /*font-size: 1em;*/
  font-size: 120%;
  padding: 0px 0em 0 3em;
  font-family: 'Oxygen', sans-serif;
}

.input__label-content--kohana {
  display: inline-block;
  width: auto;
  /*-webkit-transform: translate3d(-1.75em, 0, 0);*/
  /*transform: translate3d(-1.75em, 0, 0);*/
  /*-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;*/
  /*transition: transform 0.3s, opacity 0.3s;*/
}

.icon--kohana {
  display: inline-block;
  margin-top: 0.5em;
  -webkit-transform: translate3d(-2em, 0, 0);
  transform: translate3d(-2em, 0, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
/*
.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
  opacity: 0;
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}*/

.input__label-content--kohana {
  color: #a2a2a2;
}
/*
.input__label-content--kohana,
.icon--kohana,
.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.input__field--kohana:focus + .input__label--kohana .icon--kohana,
.input--filled  .icon--kohana {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
*/
button.home-signup-button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #b04b40;
  border: 0;
  width: calc(100% - 2em);
  color: #1b0a08;
}


button.home-signup-button:hover {
  background: #b34034;
}

button.home-signup-button:active {
  background: #7d2f26;
}

button.home-signin-button {
  display: inline-block;
  padding: 0.55em;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #5cb85c;
  border: 0;
  border-radius: 0;
}


form select {
  width: 92%;
  margin-top: 4px;
  padding: 10px 5px 10px 32px;
  border: 1px solid rgb(236, 236, 236);
  background: rgb(236, 236, 236);
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.edit-profile form input:not([type="checkbox"]){
  width: 92%;
  margin-top: 4px;
  padding: 10px 5px 10px 32px;
  
  border: 1px solid rgb(236, 236, 236);
  background: rgb(236, 236, 236);

  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;

}

/*.edit-profile label.dob:after {
    content: "\f063";
}*/

.edit-profile form label {
  position: relative;
  color: darkgrey;
  display: inline-block;
  max-width: 100%;
  font-weight: 700;
  font-size: 0.9em;
}
/*
.edit-profile label:after {
  font-family: 'fontello';
  color: rgb(106, 159, 171);
  position: absolute;
  left: 10px;
  top: 41px;
  width: 30px;
}
*/
.edit-profile form button {
  display: inline-block;
  padding: 0.8em;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #5cb85c;
  border: 0;
  border-radius: 0;
  width: calc(92% + 37px);
}




.login-container form input:not([type="checkbox"]){
  width: 92%;
  margin-top: 4px;
  padding: 10px 5px 10px 32px;
  
  border: 1px solid rgb(236, 236, 236);
  background: rgb(236, 236, 236);

  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;

}




.login-container .login-box {
  padding: 0;
  margin: 0;
  width: 100%;
}



.login-container form input:not([type="checkbox"]):focus {
  outline: none;
  border: 1px solid rgb(220, 220, 220);
  background: rgb(220, 220, 220);
}


.login-container form button.login-signin-button {
  display: inline-block;
  padding: 0.8em;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #5cb85c;
  border: 0;
  border-radius: 0;
  width: calc(92% + 37px);
}


.login-container form label {
  position: relative;
  color: darkgrey;
}

.login-container form label.loginkeeping {
  font-style: italic;
  font-weight: normal;
}










/*[data-icon]:after {*/
.login-container label:after {
    font-family: 'fontello';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 41px;
    width: 30px;
}

.login-container label.username:after {
  content: "\f063";
}

.login-container label.password:after {
  content: '\e802';
}

.login-container label.email:after {
  content: '\e80a';
}

.login-container p.change_link {
  color: rgb(127, 124, 124);
  left: 0px;
  height: 4em;
  padding: 17px 30px 20px 30px;
  font-size: 16px;
  text-align: right;
  border-top: 1px solid rgb(241, 241, 241);
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  background: rgb(225, 234, 235); 
  background: -moz-repeating-linear-gradient(-45deg, rgb(255, 255, 255) , rgb(230, 230, 230) 15px, rgb(255, 255, 255) 15px, rgb(255, 255, 255) 30px, rgb(214, 214, 214) 30px );
  background: -webkit-repeating-linear-gradient(-45deg, rgb(255, 255, 255) , rgb(230, 230, 230) 15px, rgb(255, 255, 255) 15px, rgb(255, 255, 255) 30px, rgb(214, 214, 214) 30px ); 
  background: -o-repeating-linear-gradient(-45deg, rgb(255, 255, 255) , rgb(230, 230, 230) 15px, rgb(255, 255, 255) 15px, rgb(255, 255, 255) 30px, rgb(214, 214, 214) 30px );
  background: repeating-linear-gradient(-45deg, rgb(255, 255, 255) , rgb(230, 230, 230) 15px, rgb(255, 255, 255) 15px, rgb(255, 255, 255) 30px, rgb(214, 214, 214) 30px ); 
}









#register{  
  z-index: 21;
  opacity: 0;
}
#login{
  z-index: 22;
}




#register{  
  z-index: 21;
  opacity: 0;
}




table.form-table {

}

table.form-table tr {

}

table.form-table tr th {
  padding: 1em;
  text-align: right;
  vertical-align: top;
  padding-top: 1.5em;
}

table.form-table tr td {
  padding: 1em;
}

table.form-table tr td input[type="text"], table.form-table tr td input[type="email"], table.form-table tr td textarea {
  background: #f1f1f1;
  outline: none;
  border: 0;
  padding: 0.5em;
  width: 100%;
}

table.form-table tr td input[type="text"]:focus, table.form-table tr td input[type="email"]:focus, table.form-table tr td textarea:focus {
  background: #fff;
}

div.page-content form button.format, div.page-content button.format {
  display: inline-block;
  padding: 1em;
  margin-bottom: 0;
  font-size: 0.9em;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #5cb85c;
  border: 0;
  border-radius: 0;
  color: #fff;
}

div.page-content form button:hover, div.page-content button:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(68, 157, 68);
  border-color: rgb(57, 132, 57);
}

div.page-content form button:active, div.page-content button:active {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

div.page-content form button:focus, div.page-content button:focus {
  color: #fff;
  background-color: #449d44;
  border-color: #255625;
}

div.page-content table.form-table tr td textarea {
  resize: none;  
}


ul.top-login-form li {
  margin: 0 1em 0 0;
}