@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

body, html {
    background: #652A57; /* #34495e */
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
}
.wrap {
    margin: 0 auto;
} 
.top-logo {
    display: block;
    width: 300px; /* ou a largura que desejar */
    height: auto; /* mantém a proporção da imagem */
    margin: 0 auto;
    margin-top: 50px; /* adiciona margem superior de 50px */
    animation: bounce 1s; /* Aplica a mesma animação usada nos campos de entrada */
    
}


.login {
    width: 300px;
    margin-top: 20vh;
}
.login input[type=text],
.login input[type=email],
.login input[type=password] {
    opacity: 1;
    display: block;
    border: none;
    outline: none;
    width: 280px;
    padding: 10px;
    margin: 20px 0 0 0;
    border-radius: 2px;
}
.login input[type=text] {
    animation: bounce 1s;
    -webkit-appearance: none;
}
.login input[type=email] {
    animation: bounce 1s;
    -webkit-appearance: none;
}
.login input[type=text]:focus:valid {
    box-shadow: 0 0 0 10000px #652A57;
}
.login input[type=email]:focus:valid {
    box-shadow: 0 0 0 10000px #652A57;
}
.login input[type=text]:focus:valid ~ input[type=button] {
    background: #652A57;
    color: #652A57;
}
.login input[type=email]:focus:valid ~ input[type=button] {
    background: #652A57;
    color: #652A57;
}
.login input[type=text]:focus:valid ~ input[type=submit] {
    color: #652A57;
}
.login input[type=email]:focus:valid ~ input[type=submit] {
    color: #652A57;
}
.login input[type=text]:invalid {
    box-shadow: 0 0 0 10000px #88517C;
}
.login input[type=email]:invalid {
    box-shadow: 0 0 0 10000px #88517C;
}
.login input[type=text]:invalid ~ input[type=button] {
    background: #88517C;
    color: #88517C;
}
.login input[type=email]:invalid ~ input[type=button] {
    background: #88517C;
    color: #88517C;
}
.login input[type=text]:invalid ~ input[type=submit] {
    color: #88517C;
}
.login input[type=email]:invalid ~ input[type=submit] {
    color: #88517C;
}
.login input[type=password] {
    animation: bounce1 1.3s;
}
.login input[type=submit],
.login input[type=button] {
    border: 0;
    outline: 0;
    padding: 13px 18px;
    margin: 40px 0 0 0;
    border-radius: 2px;
    font-weight: 600;
    animation: bounce2 1.6s;
} 
.login input[type=submit] {
    float: right;
    background: #fff;  
    color: #513E57;
    outline: none;
}
.login input[type=button] {
    background: #513E57;
    color: #513E57;
}
@keyframes bounce {
    0% { transform: translateY(-250px); opacity: 0; }
} 
@keyframes bounce1 {
    0% {  opacity: 0; }
    40% { transform: translateY(-100px); opacity: 0;}
}
@keyframes bounce2 {
    0% {  opacity: 0; }
    70% { transform: translateY(-20px); opacity: 0;}
}