*, *::after, *::before {
    box-sizing: border-box;
}

.f20{font-size:20px;}
html {
    font-size: 100%;
    height: 100%;
    line-height: 1.5;
}

body {
       margin: 0;
  
    position: relative;
}
img {
    max-width: 100%;
    vertical-align: middle;
}
button {
    background-color: transparent;
    border: 0 none;
    cursor: pointer;
    padding: 0;
}
.container_login {
    /*animation: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s normal forwards 1 running intro;*/
    /*left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);*/
	
    width: 24em;
	
    border-radius: 4px;
    box-shadow: 0 3px 12px 0.06px rgba(0, 0, 0, 0.24);
    padding: 1px; background:#3C8DBC; margin:6% auto;
    

}
.profile {
    position: relative;
}
.profile--open {
}
.profile--open .profile__form {
    height: auto;
    opacity: 1;
    padding-top: 12em;
    transform: translateY(-6em);
    visibility: visible;
}
.profile--open .profile__fields {
    opacity: 1;
    visibility: visible;
}
.profile--open .profile__avatar {
    border-radius: 50%;
    transform: translate(-50%, -1.5em);
}
.profile__form {
    background: white none repeat scroll 0 0;
    border-radius: 0.25em;
    height:auto;
    opacity: 1;
    padding:1em;
    position: relative;
    transition: opacity 0.4s ease-in-out 0s, height 0.4s ease-in-out 0s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, padding 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
.profile__fields {
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
.profile__avatar {
    border-radius: 1.25em;
    display: block;
    height: 4.5em;
    left: 50%;
    overflow: hidden;
    position: absolute;
    transform: translateX(-50%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
    width: 4.5em;
    will-change: transform;
    z-index: 1;
}
.profile__avatar:focus {
    outline: 0 none;
}
.profile__footer {
    padding-top: 1em;
}
.field {
    margin-bottom: 1em;
    position: relative;
}
.label {
    bottom: 0; left:0;padding-top: 1em; font-size:13px;
    color: #999;
    height: 35px;
   left: 10px;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

.input.empty:focus, .input.empty:hover:focus, .input:focus, .input:hover:focus {
    border-bottom-color: #488aff;
    border-left-color: #488aff;
    border-right-color: #488aff;
    border-top-color: #488aff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.input.empty:hover, .input.empty:invalid:hover, .input:hover {
    border-bottom-color: #c1c9d6;
    border-left-color: #c1c9d6;
    border-right-color: #c1c9d6;
    border-top-color: #c1c9d6;
}
.input {
      background-color: transparent;
   border:1px solid #e1e5ed; border-radius: 4px;  height: 45px;
    line-height: 1.39286;
    color: #777;
    font-size: 100%;
    
    padding-left: 15px;
    transition: all 0.2s ease-in 0s;
    width: 100%;
}
/*.input:focus {
    border-color: #ccc;
    outline: 0 none;
}*/
.input:focus + .label, input:valid + .label {
    color: #488aff; background:#fff; top:0;
    font-size: 12px;
    padding:2px 5px 0 5px;
    transform: translateY(-70%);    height: 10px;
}
input.btn {
    width: 100%;
}
.btn {
    background: #43B7E8 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0.25rem;
    color: white;
    font-size: 0.75rem;
    height: 2.5rem;
    letter-spacing: 0.2em;
    line-height: 2.5rem;
    padding: 0 1.5rem;
    text-transform: uppercase;
    transition: background 0.2s ease 0s;
}
.btn:focus {
    outline: 0 none;color: white;
}
.btn:hover, .btn:focus {
    background: #03A9F3 none repeat scroll 0 0;color: white;
}
@keyframes intro {
0% {
    opacity: 0;
    top: 0;
}
100% {
    opacity: 1;
    top: 50%;
}
}