@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
	box-sizing: border-box;
}

/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

/* Change the color of links on hover */
.topnav a:hover {
  border-bottom: 3px solid black;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  color: black;
}

/* Set the background, font, alignment etc. of the body of the website*/
body {
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	height: 100vh;
	margin: -20px 0 50px;
}
/* set the font and margins of the first heading*/
h1 {
	font-weight: bold;
	margin: 0;
}
/* Set the alignment of the 2nd heading*/
h2 {
	text-align: center;
}

/* Set the margins font and spacing of the paragraphs of the website*/
p {
	font-size: 14px;
	font-weight: 100;
	line-height: 20px;
	letter-spacing: 0.5px;
	margin: 20px 0 30px;
}

span {
	font-size: 12px;
}

a {
	color: #333;
	font-size: 14px;
	text-decoration: none;
	margin: 15px 0;
}
/* Set the colours, font, padding etc. of the buttons*/
button {
	border-radius: 20px;
	border: 1px solid #C2E0EF;
	background-color: #C2E0EF;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
}

/* When the button is clicked, temporarily decrease it's size*/
button:active {
	transform: scale(0.95);
}

button:focus {
	outline: none;
}
/* Make the ghost button on the overlay container to be transparent with white borders*/
button.ghost {
	background-color: transparent;
	border-color: #FFFFFF;
}

/* Set the information of the form */
form {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}
/* Set the information of inputs */
input {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 8px 0;
	width: 100%;
}
/* Set the information of the containers */
.container {
      background-image: url(https://www.pngitem.com/pimgs/m/16-164952_sky-line-point-pattern-transparent-cartoon-clouds-png.png);
	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;
}

.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;
}
/*  Transform the sign in container*/
.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;
	}
}
/* Set information of the overlay container*/
.overlay-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 100;
}
/*  Transform the overlay container*/
.container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}

.overlay {
	background: #c2e0ed;
	background: -webkit-linear-gradient(to right, #C2E0EF, #D7AEDD);
	background: linear-gradient(to right, #C2E0EF, #D7AEDD);
	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%);
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text 
    {
      font-size: 11px
    }
}



/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }