.mainDiv{
  background-image:url(../../../../../data/images/bg.webp);
  height:100vh;
  width:100%;
  box-sizing:border-box;
  position:relative;
  background-position:right;
  background-size:cover;
}

.form-login{
  padding:0px;
  margin:0px;
  border:0px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:30px 30px;
  width:60%;
  
  padding:40px;
  font-size:25px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  background:#00000055;
  border: solid 1px #ff6600aa;
  border-radius: 3px;  
}


.form-login input::placeholder{
  color:#bbb;
}

.form-login input,
.form-login label,
.form-login button{
  font-size:20px;
  padding:8px 8px;
  width:100%;
  box-sizing:border-box;
  border:0px;
  border-radius:3px;
  height:40px;
}

.element{
  position:relative;
}

.form-login label{
  color:#fff;
  margin:0px;
  padding:0px;
  padding-bottom:5px;
  display:block;
  box-sizing:border-box;
}

.form-login button{
  background-image:linear-gradient(to bottom, #f70, #d40);
  position:absolute;
  bottom:0px;
  left:0px;
  cursor:pointer;
  transition:all 250ms ease;
  color:#fff;
}

.form-login button:hover{
  opacity:0.7;
}

.form-login-msg{
  padding:16px;
  background-color:#660000;
  background-image:linear-gradient(to bottom, #662211, #441100);
  font-size:23px;
  color:#fff;
  text-align:center;
}

.form-login-project{
  width:100%;
  padding:30px;
  color:#fff;
  display:block;
  text-align:center;
}

.form-login-author{
  position:absolute;
  bottom:20px;
  right:20px;
  display:block;
  padding:20px;
  color:#fff;
  text-decoration:none;
  background:#00000033;
  border-radius:3px;
  transition:all 300ms ease;
}

.form-login-author .imgcnt{
  height:40px;
  width:40px;
  position:relative;
  display:block;
  float:left;  
}

.form-login-author .imgcnt>img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center; 
}

.form-login-author .text{
  line-height:40px;
  height:40px;
  float:left;
  margin-left:10px;
}

@keyframes sk-logo-main{
    0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.form-login-author:hover{
  background:#00000077;
}

.form-login-author:hover .imgcnt>img{
  animation-name: sk-logo-main;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;  
}


@media all and ( max-width: 980px ){
  .form-login{
    transform:none;
    width:90%;
    margin:auto;
    display:block;
    position:static;
    box-sizing:border-box;
    margin:auto;
  }
  
  .form-login button{
    position:static;
    bottom:unset;
    left:unset;
    margin-top:15px;
  }
  
  .element{
    width:100%;
    box-sizing:border-box;
    padding-bottom:15px;
  }

}