#form-container {
width: 100vw;
height: 100vh;
background-image: url("../images/caruaru.jpg");
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}

.logo {
   text-align: center;
}

#form-box {
width: 400px;
padding: 20px;
box-sizing: border-box;
}

#form-box input {
font-size: large;
}

.panel {
  background-color: rgba(0,0,0,0.5)

}

.panel h4 {
  color: white;
}

img {

max-width: 100%;
height: auto;
    
}


img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}