*, *::after, *::before{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
body{
    background: url('../images/bg-tela-app.jpg') center no-repeat;
    background-size: cover;
    height: 100vh;
}
.box {
  width: calc(100vw - 20%);
  height: 300px;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
  margin:auto;
  top:150px;
}
@keyframes example {
  0%   {top:0px;}
  50%  {top:0px;}
  100%  {top:150px;}
}
.logo{
    display: block;
    width: 100%;
    text-align: center;
    padding:15px 0;
}
.form-login{
    text-align: center;
    padding:0 15px;
    width: 100%;
}
.form-login label{
    padding:0;
    margin:0;
    display: block;
    width: 100%;
}
.input-text{
    background-color: #FFF;
    padding:20px 10px;
    display: block;
    width: 100%;
    font-size:0.9rem;
    border:0;
    outline: 0;
    cursor:pointer;
}
.form-login label:nth-child(2){
    border-top:1px solid rgba(238, 238, 238,0.8);
}
.form-login label:nth-child(1) .input-text{
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.form-login label:nth-child(2) .input-text{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px; 
}
.input-text::placeholder{
    color:#333;
    font-weight: 400;
    font-size:1rem;
}
.btn{
    font-family: 'Roboto', sans-serif;
    display: block;
    width: 100%;
    border:0;
    outline: 0;
    text-transform: uppercase;
    background-color: #FFCB31;
    margin-top:20px;
    padding:20px 10px;
    font-weight: 700;
    color:#333;
    cursor:pointer;
    border-radius:4px;
    font-size:1rem;
}