#login-popup .popup-content,
#reminder-popup .popup-content {
	width: calc(100vw - 30px);
	height: calc(100% - 30px);
	max-width: 700px; 
	max-height: 525px;
	overflow: auto;
}

#login,
#reminder {
	height: 525px;
	width: 100%;
	text-align: center;
	border-radius: 8px;
	overflow: hidden;
}

#login .column-small,
#reminder .column-small {
	color: var(--color-blue-dark-2);
	background-color: #a8b3c2;
	height: 525px;
}

#login .column-small .header,
#reminder .column-small .header {
	margin: 10px 0 0 0;
	font-size: 24px;
	line-height: 24px;
	font-weight: 300;
	text-align: center;
	text-transform: none;
	color: var(--color-white);
}

#login .column-small  .subheader,	
#reminder .column-small  .subheader {	
	text-align: center;
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	text-align: center;
	color: var(--color-blue-dark-2);
	text-transform: uppercase;
	margin: 25px 0 10px 0;
}

#login ul.socials,
#reminder ul.socials {
	float: none;
	margin: 10px -4px 0;
	line-height: 24px;
}

#login ul.socials li,
#reminder ul.socials li {
	width: 24px;
	height: 24px;
	margin: 0 4px;
}

#login ul.socials li a,
#reminder ul.socials li a {
	width: 24px;
	height: 24px;
	background-size: contain;
}

#login a.reminder, 
#reminder a.reminder {
	font-size: 11px;
	line-height: 11px;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	padding: 10px 0 2px;
	display: block;
	float: left;
	border-bottom: 1px solid;
}

#login a.register,
#reminder a.register {
	font-size: 16px;
	font-weight: 300;
	color: var(--color-white);
	text-decoration: none;
	text-transform: capitalize;
	margin: 20px 0 10px 0;
	display: inline-block;
}

#login a.register span,
#reminder a.register span {
	border-bottom: 1px solid var(--color-white);
}

#login .forma,
#reminder .forma {
	margin-top: 12px;
}

#login .column-big,
#reminder .column-big {
	height: 525px;
}


#login .welcomeback, 
#reminder .welcomeback {
	font-size: 15px;
	font-weight: 300;
	text-align: center;
	color: #ffac00;
	margin: 10px 0;
}

#login .sprut-popup, 
#reminder .sprut-popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
}

#login label,
#reminder label {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #000000;
	padding: 0 0 5px 10px;
	margin: 0 0 0 0;
}

#login .google-recaptcha, 
#reminder .google-recaptcha {
	width: 100%;
	float: none;
}


@media screen and (max-width: 690px) {
	
	#login-popup .popup-content,
	#reminder-popup .popup-content {
		width: calc(100vw - 30px);
		height: calc(100% - 30px);
		max-width: none;
		max-height: none;
	}
	
	
	
	#login, 
	#reminder {
		height: auto;
	}	
	
	#login .column-small,  
	#reminder .column-small { 
		float: none !important;
		width: 100% !important;
		height: auto;
		background-color: var(--color-blue);
	}
	
	#login .column-small .mobile-bg, 
	#reminder .column-small .mobile-bg {
		border-radius: 4px;
		background-color: #a8b3c2;
		margin-top: 24px;
		padding: 12px;
	}
	
	#login .column-small  .subheader, 	
	#reminder .column-small  .subheader {	
		margin: 0 0 10px 0;
	}
	
	#login .column-big,
	#reminder .column-big {
		float: none;
		width: 100%;
		height: auto;
	}
	
	#login .sprut-popup,
	#reminder .sprut-popup {
		position: relative;
		top: auto;
		left: auto;
		margin: 20px auto;
		transform: none;
		display: block;
		max-width: 294px;
		width: 80%;
	}
}