* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container_iits {
    display: flex;
	align-items: center;
	justify-content: center;
    min-height: 100vh;
        width: 100%;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.container_iits:before {
    content: "";
    position: absolute;
        height: 2000px;
        width: 2000px;
        top: -10%;
        right: 48%;
    transform: translateY(-50%);
  /*background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);*/
    /*background: linear-gradient(to right, rgba(79, 64, 241,0.58), rgba(9, 53, 110,0.84)), url(bg.png) center center no-repeat;*/ 
   /* background: linear-gradient(to right, rgba(246, 180, 68,0.58), rgba(253, 72, 87,0.87)), url(bg.png) center center no-repeat;*/
   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(120,120,120,.63) 58%, rgb(255,255,255) 100%);
   box-shadow: 0px 1px 8px #f8f9fc;
    background-size: cover;
	background-position: center;
    transition: 1.3s ease-in-out;
    border-radius: 50%;
    z-index: 6;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
form.sign-up-form {
  opacity: 0;
  z-index: 1;
}
form.sign-in-form {
  z-index: 2;
}





.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.panel .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}
.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

.image {
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}


/* ANIMATION */
.container_iits.sign-up-mode:before {  transform: translate(100%, -50%);  right: 52%;}
.container_iits.sign-up-mode .signin-signup {  left: 25%;}

.container_iits.sign-up-mode form.sign-up-form {  opacity: 1;  z-index: 2;}
.container_iits.sign-up-mode form.sign-in-form {  opacity: 0;  z-index: 1;}

.container_iits.sign-up-mode .left-panel .image,.container_iits.sign-up-mode .left-panel .content {  transform: translateX(-800px);}
.container_iits.sign-up-mode .right-panel .image,.container_iits.sign-up-mode .right-panel .content {  transform: translateX(0%);}
.container_iits.sign-up-mode .left-panel {  pointer-events: none;}
.container_iits.sign-up-mode .right-panel {  pointer-events: all;  }


@media (max-width: 870px)   {
    
/*	.container_iits {    
		min-height: 850px;    
			height: 100vh;  
	}*/
	.container_iits:before {
		width: 1500px;
		height: 1500px;
		transform: translateX(-50%);
			left: 30%;
			bottom: 68%;
			right: initial;
			top: initial;
		transition: 2s ease-in-out;
    }
	.container_iits.sign-up-mode:before {			transform: translate(-50%, 100%);    bottom: 7%;    right: initial;  }  
	.container_iits.sign-up-mode .signin-signup {	transform: translate(-50%, 0);	top: 5%;      }
	.container_iits.sign-up-mode .left-panel .image,.container_iits.sign-up-mode .left-panel .content {	transform: translateY(-300px);  }
	.container_iits.sign-up-mode .right-panel .image,.container_iits.sign-up-mode .right-panel .content {	transform: translateY(0px);  }

    .signin-signup {    width: 100%;    top: 95%;    transform: translate(-50%, -100%);    transition: 1s 0.8s ease-in-out;  }
    .signin-signup,  .container_iits.sign-up-mode .signin-signup {    left: 50%;  }
  
    .panels-container {    
		grid-template-columns: 1fr;    
		grid-template-rows: 1fr 2fr 1fr;  
    }
    .panel {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 2.5rem 8%;
        grid-column: 1 / 2;
    }
    .panel .content {   
        padding-right: 15%;    
            transition: transform 0.9s ease-in-out;
            transition-delay: 0.8s;
    }

    .right-panel {    grid-row: 3 / 4;  }
    .left-panel {    grid-row: 1 / 2;  }
    
    .right-panel .image,.right-panel .content {    transform: translateY(300px);  }
    
    .image {    width: 200px;    transition: transform 0.9s ease-in-out;    transition-delay: 0.6s;  }
}

@media (max-width: 570px) {
    
    .container_iits {   padding: 390px 0 390px 0;  }
    .container_iits:before {              bottom: 93.06%;    left: 50%;  }
    .container_iits.sign-up-mode:before { bottom: 7%;    left: 50%;  }
    
    form {              padding: 0 1.5rem;  }
    .image {            display: none;  }
    .panel .content {   padding: 0.5rem 1rem;  }
}

@media (max-width: 320px) {	 	}
@media (max-width: 360px) {		}
@media (max-width: 375px) {	 	}
@media (max-width: 384px) {	 	}
@media (max-width: 393px) {	 	}
@media (max-width: 411px) {	 	}
@media (max-width: 412px) {	 	}
@media (max-width: 414px) {	 	}
@media (max-width: 425px) {	 	}
@media (min-width: 480px) {	   
    
}
@media (max-width: 540px) {	 	}
@media (max-width: 600px) {	 	}
@media (max-width: 712px) {	 	}
@media (max-width: 800px) {	 	}


@media (min-width: 320px) {   }
@media (max-width: 768px) and (min-width: 991px){       }
@media (max-width: 383px)   {	 	}