/*= Reset CSS
============= */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

:focus{outline: none;}

.col-3{
  width: 100%;
  padding-top: 0.5%;
  position: relative;
  margin-bottom: -3%;
} /* necessary to give position: relative to parent. */

input{
  color: white; width: 100%; box-sizing: border-box;
  font-family: Raleway, verdana;
  background: transparent;
  padding-bottom: 0.5%;
  letter-spacing: 0.5px;
}

.effect-1{border: 0; border-bottom: 1px solid gray;}

.effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: white; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}