@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');
body{
  font-family: 'Muli';
 
}
h2 {
    font-family: 'Damion', cursive;
    font-weight: 400;
    color: #4caf50;
    font-size: 35px;
    position: relative;
}
h2:before {
    position: absolute;
    content: '';
    width: 100px;
    left: 0;
    top: 22px;
    background: #4caf50;
    height: 1px;
}
h2 i {
    font-style: normal;
    background: #fff;
    position: relative;
    padding:50px;
}
:focus{outline: none;}

/* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: #333; width: 100px; box-sizing: border-box; letter-spacing: 1px;}
input[type="password"]{font: 15px/24px 'Muli', sans-serif; color: #333; width: 100px; box-sizing: border-box; letter-spacing: 1px;}

.col-3{float: left; width: 80%; margin: 10px 10%; position: relative; } /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Andalus", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
input[type="password"]{font: 15px/24px "Andalus", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}


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

.effect-17 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #909; transition: 0.3s;}
.effect-17:focus ~ .focus-border,
.has-content.effect-17 ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}
.effect-17 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #FFFFFF; transition: 0.3s; z-index: -1; letter-spacing: 0.px;}
.effect-17:focus ~ label, .has-content.effect-17 ~ label{top: -16px; font-size: 12px; transition: 0.3s;}