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

/*h2{text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400;}*/
/*h2:before{content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px;}*/
/*= Reset CSS End
================= */

/*= input focus effects css
=========================== */
:focus{outline: none;}
input[type="text"]{ color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}

.input-mat{border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent;z-index: 2}

.input-mat ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;z-index: 3}
.input-mat:focus ~ .focus-border,
.has-content.input-mat ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}
.input-mat ~ label{
    position: absolute;
    left: 0;
    width: 100%;
    top: 0px;
    color: #868484;
    transition: 0.3s;
    z-index: 0;
    letter-spacing: 0.5px;
}
.input-mat:focus ~ label, .has-content.input-mat ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}
.focus-active label{
    top: -16px;
    font-size: 12px;
    color: #3399FF;
    transition: 0.3s;
}
.focus-active span{
    width: 100% !important;
    transition: 0.4s;
    left: 0 !important;
    background-color: #3399FF;
}