@font-face {
    font-family: 'fontello';
    src: url('../Content/fonts/fontello.eot?0000');
    src: url('../Content/fonts/fontello.eot?0000#iefix') format('embedded-opentype'), url('../Content/fonts/fontello.woff2?0000') format('woff2'), url('../Content/fonts/fontello.woff?0000') format('woff'), url('../Content/fonts/fontello.ttf?0000') format('truetype'), url('../Content/fonts/fontello.svg?0000#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

.group {
    position: relative;
    margin-bottom: 10px;
    /*margin-left: 10px;*/
    height:70px;
}

.inputMaterial {
    font-family: 'Open Sans Condensed', 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 7px 7px 7px 10px;
    display: flex;
    width: 100%;
    height: 50px;
    border: 1.2px solid rgba(0,0,0,0.3);
    border-radius: 5px;
    color: #333;
    margin-bottom: 40px;
    border-radius: 5px;
    transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    -webkit-transition: all .4s;
}
.inputMaterial:focus {
    outline: none;
    border-radius: 5px 5px 0px 0px;
}
.inputMaterial:hover {
    border: 1.2px solid #09F;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    /*font-size:16px!important;*/
    speak: none;
    /* Por seguridad: restablezca los estilos principales, que pueden romper los códigos glyph*/
    font-variant: normal;
    text-transform: none;
    /* Suavizado de fuentes. Eso fue tomado de TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Descomentar para efecto 3D */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    /* agregue espacio para separar mejor cada imagen */
    letter-spacing: 3px;
}
/* LABEL ======================================= */
.group label {
    color: #999;
    font-family: 'Open Sans Condensed', 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    padding-left: 10px;
    position: absolute;
    pointer-events: none;
    top: 13px;
    left:5px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -ms-transition: 0.2s ease all;
    -o-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.inputMaterial:focus ~ label {
    margin-top: -40px;
    left: 0px;
    font-size: 17px;
    color: #006699;
}
.fijar {
    margin-top: -40px;
    left: 0px;
    font-size: 17px;
}
/* BOTTOM BARS ================================= */
.bar {
    position: relative;
    display: block;
    width: auto;
    bottom: 0px;
}
.bar:before, .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 40px;
    position: absolute;
    background: #09F; /*#009688; */
    opacity:0.8;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.bar:before {
    left: 50%;
}
.bar:after {
    right: 50%;
}

/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
    width: 50%;
}
/* active state */
.inputMaterial:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}