/*= Reset CSS 
============= */

/*= input focus effects css
=========================== */
:focus{outline: none;}

.col-3{float: left; width: 27.33%; margin: 20px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{ color: #000; width: 100%; box-sizing: border-box;}

.effect-input{border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

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

a, a > span {
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 24px;
}
a:before, a:after, a > span:before, a > span:after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.effect-1 {
  padding-top: 10px;
}
.effect-1:before {
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background-color: #19539a;
  transform: scaleX(0);
}
.effect-1:hover:before {
  transform: scaleX(1);
}