@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
 * {
     box-sizing: border-box;
}
 body {
	 background-image: linear-gradient(to bottom,rgba(0,0,0,1), rgba(0,0,0,0.1)),url("ger.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
     font-family: 'Montserrat', sans-serif;
}
 h1 {
     font-weight: bold;
     margin: 1px;
}
 h2 {
     text-align: center;
	 margin: 4px;
}
 p 	{
     font-size: 14px;
     font-weight: 100;
     line-height: 20px;
     letter-spacing: 0.5px;
     margin: 20px 0 30px;
}
 a {
     color: #333;
     font-size: 14px;
     text-decoration: none;
     margin: 15px 0;
}

.logo {
	position: absolute;
	top: 5%;
}

.content {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	height: 100vh;
     margin: -20px 0 50px;
}
 .button {
     border-radius: 20px;
     border: 1px solid #29f1c3;
     background-color: #29f1c3;
     color: #FFFFFF;
     cursor: pointer;
     font-size: 12px;
     font-weight: bold;
     padding: 12px 45px;
     letter-spacing: 1px;
     text-transform: uppercase;
     transition: transform 80ms ease-in;
}
 .button:active {
     transform: scale(0.95);
}
 .button:focus {
     outline: none;
}
 .button.ghost {
     background-color: transparent;
     border-color: #FFFFFF;
}
 form {
     background-color: #FFFFFF;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 50px;
     height: 100%;
     text-align: center;
}
 form h1 {
     margin-bottom: 35px;
}
 input[type=text], input[type=password], input[type=email] {
     background-color: #eee;
     border: none;
     padding: 12px 15px;
     margin: 8px 0;
     width: 100%;
}
.title {
	margin-bottom: 50px;
	font-size: 80px;
	color: white;
}
 .container {
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     position: relative;
     overflow: hidden;
     width: 768px;
     max-width: 100%;
     min-height: 480px;
     display: none;
     transition: all 1s ease-in-out;
     animation: up 1s;
}
 @keyframes up {
	 0% {
		 transform: translateY(100%);
	}
}

 .form-container {
     position: absolute;
     top: 0;
     height: 100%;
     transition: all 0.6s ease-in-out;
}
 .sign-in-container {
     left: 0;
     width: 50%;
     z-index: 2;
}
 .container.right-panel-active .sign-in-container {
     transform: translateX(100%);
}
 .sign-up-container {
     left: 0;
     width: 50%;
     opacity: 0;
     z-index: 1;
}
 .container.right-panel-active .sign-up-container {
     transform: translateX(100%);
     opacity: 1;
     z-index: 5;
     animation: show 0.6s;
}
 @keyframes show {
     0%, 49.99% {
         opacity: 0;
         z-index: 1;
    }
     50%, 100% {
         opacity: 1;
         z-index: 5;
    }
}
 .overlay-container {
     position: absolute;
     top: 0;
     left: 50%;
     width: 50%;
     height: 100%;
     overflow: hidden;
     transition: transform 0.6s ease-in-out;
     z-index: 100;
}
 .container.right-panel-active .overlay-container{
     transform: translateX(-100%);
}
 .overlay {
     background: #29f1c3;
     background: -webkit-linear-gradient(to right, #29f1c3, #29f1c3);
     background: linear-gradient(to right, #29f1c3, #29f1c3);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 0 0;
     color: #FFFFFF;
     position: relative;
     left: -100%;
     height: 100%;
     width: 200%;
     transform: translateX(0);
     transition: transform 0.6s ease-in-out;
}
 .container.right-panel-active .overlay {
     transform: translateX(50%);
}
 .overlay-panel {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 40px;
     text-align: center;
     top: 0;
     height: 100%;
     width: 50%;
     transform: translateX(0);
     transition: transform 0.6s ease-in-out;
}
 .overlay-left {
     transform: translateX(-20%);
}
 .container.right-panel-active .overlay-left {
     transform: translateX(0);
}
 .overlay-right {
     right: 0;
     transform: translateX(0);
}
 .container.right-panel-active .overlay-right {
     transform: translateX(20%);
}
 .close {
}
 .close-left {
     color: black;
     position: absolute;
     right: 15px;
     top: 5px;
     font-size: 28px;
     font-weight: bold;
}
 .close-right {
     color: white;
     position: absolute;
     right: 15px;
     top: 5px;
     font-size: 28px;
     font-weight: bold;
}
 .close-left:hover, .close-left:focus {
     color: #95a5a6;
     text-decoration: none;
     cursor: pointer;
}
 .close-right:hover, .close-right:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
}

.button-start {
	color: white;
}