section { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 20px; }

#login .background { position: absolute; width: 100%; height: 100%; object-fit: cover; }
#login .logo { 
  z-index: 10;
  position: absolute; 
  top: 0; 
  left: 0; 
  padding: 20px;
  background: #efefef;
  border-radius: 50%;
  border-top-left-radius: 0; }
#login .content {
  position: relative;
  width: 450px;
  background: #fff;
  border-radius: 10px;
  animation-duration: .7s;
  /* box-shadow: 0 0 6px 2px rgba(0,0,0,.1); */
}
#login .content > .head { height: 250px; }
#login .content > .head > img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
}
#login .content > .body { padding: 20px; }
#login .content > .body .title { text-align: center; font-weight: 700; margin-bottom: 20px; }
#login .content > .body .login_mode { cursor: pointer; text-align: center; margin-bottom: 15px; }
#login .content > .body label { display: flex; align-items: center; min-width: 130px; margin-bottom: 0; line-height: 1.2; }
#login .content > .body label > i:not(.validate_icon) { flex: none; font-size: 20px; width: 25px; }

#login .social_media { text-align: center; margin-top: 15px; }
#login .social_media .icons { display: flex; justify-content: center; margin-top: 5px; }
#login .social_media .icons > a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 5px;
  font-size: 20px; }
#login .social_media .icons > a.fa-facebook-f { border: 2px solid #3B5998; color: #3B5998; }
#login .social_media .icons > a.fa-facebook-f:hover { background: #3B5998; color: #fff; }
#login .social_media .icons > a.fa-google { border: 2px solid #dd4b39; color: #dd4b39; }
#login .social_media .icons > a.fa-google:hover { background: #dd4b39; color: #fff; }