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

.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;}
input[type="text"]{width: 100%; box-sizing: border-box; letter-spacing: 1px;}
input[type="text"]{width: 100%; box-sizing: border-box; letter-spacing: 1px;}

.effect-16 {border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent;}

.effect-16 ~ .focus-border{position: absolute;bottom: 0;left: 0;width: 0;height: 1px;background-color: #000;transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 0;width: 100%;top: 9px;color: #aaa;transition: 0.3s;z-index: 1;letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -16px;color: #000;transition: 0.3s;}