.container 
{
  	width:100%;
  	max-width:460px;
	position:relative;
  	margin:0 auto 150px;
}
.container.active .card:first-child 
{
  	margin:0 15px;
	background:#f2f2f2;  	
}
.container.active .card:nth-child(2) 
{
	margin:0 10px;
  	background:#fafafa;
}
.container.active .card.alt 
{
  	right:0;
	top:20px;
  	width:100%;
  	height:auto;
	min-width:100%;
  	overflow:hidden;
  	border-radius:5px;
  	padding:20px 0 20px;
}
.container.active .card.alt .toggle 
{
  	top:40px;
  	right:-70px;
  	box-shadow:none;
  	position:absolute;
	transform:scale(10);
	-webkit-transform:scale(10);
  	transition:transform .3s ease;
	transition:-webkit-transform .3s ease;
  	-webkit-transition: -webkit-transform .3s ease;
	transition:transform .3s ease, -webkit-transform .3s ease;
}
.container.active .card.alt .toggle:before 
{
  	content: '';
}
.container.active .card.alt .title,
.container.active .card.alt .input-container,
.container.active .card.alt .button-container 
{
  	left:0;
  	opacity:1;
  	width:36%;
	float:left;
	visibility:visible;
  	transition:.3s ease;
	-webkit-transition:.3s ease;
}
.container.active .card.alt .title 
{
  	-webkit-transition-delay: .3s;
    transition-delay: .3s;
}
.container.active .card.alt .input-container 
{
  	-webkit-transition-delay: .4s;
          	transition-delay: .4s;
}
.container.active .card.alt .input-container:nth-child(2) 
{
  	-webkit-transition-delay: .5s;
          	transition-delay: .5s;
}
.container.active .card.alt .input-container:nth-child(3) 
{
  	-webkit-transition-delay: .6s;
          	transition-delay: .6s;
}
.container.active .card.alt .button-container 
{
  	-webkit-transition-delay: .7s;
          	transition-delay: .7s;
}
.card 
{
  	position:relative;
  	background:#ffffff;
  	transition:.3s ease;
  	padding:50px 0 40px 0;
  	box-sizing:border-box;
  	-webkit-transition:.3s ease;
  	border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
  	box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.card:first-child 
{
  	padding:0;
  	height:10px;
  	margin:0 10px;
  	background:#fafafa;  
  	border-radius:5px 5px 0 0;  
}
.card .title-cat 
{  
  	z-index:1;margin:0 0 20px 0;color:#e3007f;font-size:18px;font-weight:300;position:relative;line-height:normal;
  	padding:0 0 0 10px;text-transform:capitalize;border-left:5px solid #e3007f;
}
.cat-data-form .card .title 
{
  	z-index:1;color:#e3007f;font-size:32px;margin:0 0 5px;font-weight:600;position:relative;text-transform:uppercase;
  	padding:10px 0 10px 50px;border-left:5px solid #e3007f;
}
.container .title 
{
  	z-index:1;color:#e3007f;font-size:32px;margin:0 0 5px;font-weight:600;position:relative;text-transform:uppercase;
  	padding:10px 0 10px 50px;border-left:5px solid #e3007f;
}
.card .input-container 
{
	width:85%;
  	position:relative;
  	margin:0 0 10px 10px;
}
.card .input-container label 
{  
  	top:0;left:0;color:#000;font-size:12px;font-weight:300;line-height:50px;position:absolute;transition:0.2s ease;
  	-webkit-transition: 0.2s ease;
}
.card .input-container p 
{
  	outline:none;z-index:1;position:relative;background:none;width:100%;height:30px;border:0;color:#000;font-size:12px;
  	font-weight:400;
}
.card .input-container input 
{
  	outline:none;z-index:1;position:relative;background:none;width:100%;height:30px;border:0;color:#212121;font-size:12px;
  	font-weight:400;
}
.card .input-container select 
{
  	outline:none;z-index:1;position:relative;background:none;width:100%;height:30px;border:0;color:#212121;font-size:12px;
  	font-weight:400;
}
.card .input-container textarea 
{
  	outline:none;z-index:1;position:relative;background:none;width:100%;height:50px;border:0;color:#212121;font-size:12px;
  	font-weight:400;
}
.card .input-container input:focus ~ p 
{
	color:#e3007f;
	color:#9d9d9d;
	font-size:32px;
	font-weight:400;
  	-webkit-transform:translate(-12%, -50%) scale(0.75);
            transform:translate(-12%, -50%) scale(0.75);
}
.card .input-container select:focus ~ p 
{
	color:#e3007f;
	color:#9d9d9d;
	font-size:32px;
	font-weight:400;
  	-webkit-transform:translate(-12%, -50%) scale(0.75);
            transform:translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ label 
{
  	color:#9d9d9d;
  	-webkit-transform:translate(-12%, -50%) scale(0.75);
            transform:translate(-12%, -50%) scale(0.75);
}
.card .input-container select:focus ~ label 
{
	color:#9d9d9d;
  	-webkit-transform: translate(-12%, -50%) scale(0.75);
            transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container textarea:focus ~ label 
{
  	color:#9d9d9d;
  	        transform:translate(-12%, -50%) scale(0.75);
  	-webkit-transform:translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after 
{
  	width:50%;
}
.card .input-container select:focus ~ .bar:before, .card .input-container select:focus ~ .bar:after 
{
  	width:50%;
}
.card .input-container input:valid ~ label 
{
  	color:#9d9d9d;
  	-webkit-transform: translate(-12%, -50%) scale(0.75);
			 transform:translate(-12%, -50%) scale(0.75);
}
.card .input-container select:valid ~ label 
{
  	color:#9d9d9d;
  	-webkit-transform: translate(-12%, -50%) scale(0.75);
			 transform:translate(-12%, -50%) scale(0.75);
}

.card .input-container .bar 
{
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	position:absolute;
	background:#757575;
}
.card .input-container .bar:before, .card .input-container .bar:after 
{
  	content:'';position:absolute;background:#e3007f;width:0;height:2px;-webkit-transition:.2s ease;transition:.2s ease;
}
.card .input-container .bar:before 
{
  	left:50%;
}
.card .input-container .bar:after 
{
  	right:50%;
}
.card .button-container 
{
  	margin:0 60px;
  	text-align:center;
}
.card .button-container button 
{
  	outline:0;cursor:pointer;position:relative;display:inline-block;background:0;width:240px;border:2px solid #333;
  	padding:20px;font-size:20px;font-weight:500;line-height:1;text-transform:uppercase;overflow:hidden;transition:.3s ease;
  	-webkit-transition:.3s ease;
}
.card .button-container button span 
{
  	position:relative;z-index:1;color:#333;-webkit-transition:.3s ease;transition:.3s ease;
}
.card .button-container button:before 
{
  	content:'';position:absolute;top:50%;left:50%;display:block;background:#e3007f;width:30px;height:30px;opacity:0;
  	border-radius:100%;margin:-15px 0 0 -15px;-webkit-transition:.3s ease;transition:.3s ease;
}
.card .button-container button:hover, .card .button-container button:active, .card .button-container button:focus 
{
  	border-color:#e3007f;
}
.card .button-container button:hover span, .card .button-container button:active span, .card .button-container button:focus span{
  	color:#e3007f;
}
.card .button-container button:active span, .card .button-container button:focus span 
{
  	color:#fff;
}
.card .button-container button:active:before, .card .button-container button:focus:before 
{
  	opacity:1;
  	-webkit-transform: scale(10);
  			 transform:scale(10);
}
.card .footer 
{
  	color:#d3d3d3;
  	font-size:24px;
  	margin:40px 0 0;
  	font-weight:300;
  	text-align:center;
}
.card .footer a 
{
  	color:#333;text-decoration:none;-webkit-transition:.3s ease;transition:.3s ease;
}
.card .footer a:hover 
{
  	color:#bababa;
}
.card.alt 
{
  	top:40px;
  	padding:0;
  	z-index:10;
  	right:-70px;
  	width:140px;
  	height:140px;
  	background:none;
  	box-shadow:none;
  	position:absolute;
  	border-radius:100%;
  	transition:.3s ease;
  	-webkit-transition:.3s ease;
}
.card.alt .toggle 
{
  	color:#fff;
	width:140px;
  	height:140px;
	font-size:58px;
	cursor:pointer;
	text-align:center;
	position:relative;
  	line-height:normal;
  	background:#00b2ec;  	
  	border-radius:100%;
  	box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.card.alt .toggle:before 
{
  	content:'Sign Up';
  	text-rendering:auto;
  	display:inline-block;
  	transform:translate(0, 0);  
  	-moz-osx-font-smoothing:grayscale;
  	-webkit-transform:translate(0, 0);
  	-webkit-font-smoothing:antialiased;
  	font:normal normal normal 14px/1 FontAwesome;
	font-size:30px;
}
.card.alt .title,
.card.alt .input-container,
.card.alt .button-container 
{
  	opacity:0;
  	left:100px;
  	visibility:hidden;
}
.card.alt .title 
{
	color:#fff;
  	position:relative;
  	border-color:#fff;
}
.card.alt .title .close 
{
	top:0;
  	right:60px;
  	color:#fff;
	display:inline;
  	font-size:58px;
  	cursor:pointer;
	font-weight:400;
  	position:absolute;
}
.card.alt .title .close:before 
{
  content: '\00d7';
}
.card.alt .input-container input 
{
  color:#fff;
}
.card.alt .input-container input:focus ~ label 
{
  color:#fff;
}
.card.alt .input-container input:focus ~ .bar:before, .card.alt .input-container input:focus ~ .bar:after 
{
  background:#fff;
}
.card.alt .input-container input:valid ~ label 
{
  color:#fff;
}
.card.alt .input-container label 
{
  color: rgba(255, 255, 255, 0.8);
}
.card.alt .input-container .bar 
{
  background:rgba(255, 255, 255, 0.8);
}
.card.alt .button-container button 
{
  width:100%;
  background:#ffffff;
  border-color:#ffffff;
}
.card.alt .button-container button span 
{
  color:#e3007f;
}
.card.alt .button-container button:hover 
{
  background:rgba(255, 255, 255, 0.9);
}
.card.alt .button-container button:active:before, .card.alt .button-container button:focus:before 
{
  display: none;
}
@media (max-width: 765px)
{
	.container 
	{
  		width:90%;
  		max-width:90%;
	}
	.card .title-cat 
	{  
	  	padding:0 0 0 10px;
	}
	.container .title 
	{
  		font-size:20px;margin:0 0 5px;font-weight:600;padding:10px 0 10px 20px;
	}
}
@media (max-width:500px)
{
	.container 
	{
  		width:90%;
  		max-width:90%;
	}
	.card.alt .button-container button 
	{
  		width:auto;
	}
	.card.alt .button-container 
	{
  		left:0;
	}
	.card .title-cat 
	{  
  		padding:0 0 0 10px;
	}
	.container .title 
	{
  		font-size:20px;margin:20px 0 5px;font-weight:600;padding:10px 0 10px 20px;line-height:normal;
	}
	.card.alt 
	{
  		left:0;
		top:15px;
  		z-index:10;
  		width:60px;
  		height:60px;
  		box-shadow:none;
  		position:absolute;
		background:#00b2ec;
  		border-radius:100%;
  		transition:.3s ease;
  		-webkit-transition:.3s ease;
	}
	.card.alt .toggle 
	{
	  	color:#fff;
		width:60px;
	  	height:40px;
		font-size:10px;
		cursor:pointer;
		position:relative;
	  	text-align:center;
		line-height:normal;
	  	background:#00b2ec;  	
	  	border-radius:100%;
		padding:20px 0 0 0;
	  	box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	}
	.card.alt .toggle:before 
	{
		font-size:12px;
  		content:'Sign Up';
  		text-rendering:auto;
  		display:inline-block;
  		transform:translate(0, 0);  
  		-moz-osx-font-smoothing:grayscale;
  		-webkit-transform:translate(0, 0);
  		-webkit-font-smoothing:antialiased;
  		font:normal normal normal 14px/1 FontAwesome;
	}
	.card .input-container 
	{
		width:90%;
	  	margin:0 0 20px 10px;
	}
	.card .button-container button 
	{
	  	width:auto;padding:10px;
	}
	.card .button-container button span 
	{
	  	position:relative;z-index:1;color:#333;-webkit-transition:.3s ease;transition:.3s ease;
	}
	.card .button-container button:before 
	{
	  	top:0;right:0;left:0;
	}
	.card.alt .input-container,
	.card.alt .button-container 
	{
	  	left:0;
		opacity:0;
	  	width:100%;
		visibility:hidden;
		margin:10px 20px 0 20px;
	}
	.card.alt .input-container input 
	{
	  color:#fff;
	  font-size:12px;
	}
	.card.alt .input-container input:focus ~ label 
	{
	  color:#fff;
	  font-size:12px;
	}
	.card.alt .input-container input:focus ~ .bar:before, .card.alt .input-container input:focus ~ .bar:after 
	{
		font-size:12px;
	  	background:#fff;
	}
	.card.alt .input-container input:valid ~ label 
	{
	  color:#fff;
	  font-size:12px;
	}
	.card.alt .input-container label 
	{
		font-size:12px;
	  	color:rgba(255, 255, 255, 0.8);
	}
	.card.alt .input-container .bar 
	{
		font-size:12px;
	  	background:rgba(255, 255, 255, 0.8);
	}
	.card.alt .button-container button 
	{
	  	width:100%;
	  	font-size:12px;
	  	background:#fff;
	  	border-color:#fff;
	}
	.card.alt .button-container button span 
	{
	  	color:#e3007f;
	  	font-size:12px;
	}
	.card.alt .button-container button:hover 
	{
		font-size:12px;
	  	background:rgba(255, 255, 255, 0.9);
	}
	.card.alt .button-container button:active:before, .card.alt .button-container button:focus:before 
	{
	  	display: none;
	}
}