.field{
   position: relative;
   height: 72px;
   padding: 16px 0 8px 0;
   width: 80%;
}

.field-label{
   position: relative;
   margin: 0;
   display: block;

   color:  dimgray;
   line-height: 16px;
   font-size: 16px;
   font-weight: 400;

   transform: translateY(24px);
   transition: transform 0.3s, color 0.3s;
   transform-origin: 0 50%;
}

.field-top{
   position: relative;
   margin: 0;
   display: block;

   color:  dimgray;
   line-height: 16px;
   font-size: 16px;
   font-weight: 400;
   transition: transform 0.3s, color 0.3s;
   transform-origin: 0 50%;
}

.field-input{
   position: relative;
   display: block;
   width: 100%;
   height: 36px;
   padding: 8px 0;

   line-height: 16px;
   font-family: Helvetica;
   font-size: 16px;

   background: transparent;
   border: none;
   box-shadow: none;
   shadow: none;
   
   
}

.form-control:focus{
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.field::after, .field::before{
   content:'';
   height: 2px;
   width: 100%;
   position: absolute;
   bottom: 6px;
   left: 0;

   background-color: silver;
}

.field::after{
   background-color: orangered;
   transform: scaleX(0);
   transition: transform 0.3s;
}

.has-label .field-label{
   transform: translateY(0) scale(0.75);
   
}

.is-focused .field-label{
   color: orangered;
}
.field.is-focused::after{
   transform: scaleX(1);
}


@media all and (max-width: 678px) {  
  .field-input {
    height: 36px;
  }
}
/*
** MATERIAL DESIGN CSS
**
*/