/* Write your custom CSS here */

.form-header, .form-body, .form-body p{
	padding: 10px;
	font-family: Lato;
	font-style: normal;
}

.form-box {
	background-color: #EFEFEF;
}

.form-header {
	background-color: #555555;
	color: #FFF;
	text-align: center;
}

.form-header h1 {
	font-weight: 800 !important;
}

.breadcrumb {
	background-color: #123123;
	font-size: 20px;
}

.breadcrumb .active {
	color: #FFF;
}

.no-underline {
	text-decoration: none;
}
/*a {
	font-family: Ubuntu;
}*/
a:link ,
a:hover {
	text-decoration: none;
}

@border: 1px solid #ddd;
@padding: 10px;
@label-font-size: 13px;

*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 300px;
}

// Demo styles
form {
  width: 600px;
  margin: 2em auto;
  
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
  
  legend {
    font-size: 2em;
    margin-bottom: 1em;
    width: 100%;
    border-bottom: @border;
  }
}


// float label
.float-label {
  .control {
    float: left;
    position: relative;
    width: 100%;
    border-bottom: @border;
    padding-top: @padding + @label-font-size;
    padding-bottom: @padding;
    
    // you proably want to replace these with your grid classes
    &.small {
      width: 30%;
      border-right: @border;
    }
    
    &.medium {
      width: 70%;
      padding-left: @padding;
    }
    
    &:last-child {
     border: 0;
    }
  }
  
  input, textarea {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    
    // inactive but shown label (exceptions: opacity and top)
    & + label {
      position: absolute;
      top: 10px;
      transition: top 0.7s ease, opacity 0.7s ease;
      opacity: 0;
      
      // Some nice styling
      font-size: @label-font-size;
      font-weight: 600;
      color: #ccc;
    }
    
    // THE MAGIC
    // as soon as we start typing, the "required" attribute will
    // set the state to valid and our pseudo selector will match
    &:valid + label {
      opacity: 1;
      top: 3px;
    }
    
    // and we highlight the focused input label
    &:focus + label {
      color: #2c8efe;
    }
  }
}