/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
    font-size: 100%;
}
body {
	font-size: 16px;
	font-size: 1rem;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #000;
	line-height:24px;
	line-height:1.5rem; /* 24px / $rembase */
	height: 100%;
	background-color: #fff;
	margin: 0;
}
ol,ul	 {
	list-style: none; margin:0; padding: 0;
}
h1, h2, h3, h4, h5, h6, nav {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	margin: 0;
}
.wrapper {
    width: 96%;
	max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* colour definitions */
.bg-red		{background-color: #ea6262;}
.bg-blue	{background-color: #597ab7;}
.bg-green	{background-color: #5ab77f;}

/* -----------
 @HEADER
 ----------- */

header {
	margin: 0 !important;
}
.site-logo {
 	float:left;
 	width:60%;
 	height:auto;
	max-width: 199px;
	padding-top: 7px;
}
.site-logo img {
	height: auto;
	margin-bottom: 5px;
	width: 100%;
}

#cookieSignpost{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	font-size: 12px;
	line-height: 1.3;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 20000;
}
#cookieSignpost div.cookieInside {
	width: auto;
	text-align: center;
	padding: 0 12px;
	display: block;
	margin: 0 auto;
	position: relative;
}
#cookieSignpost div.cookieText {
	display: inline-block;
	vertical-align: top;
	padding: 8px 28px 8px 0;
	position: relative;
	text-align: left;
}
#cookieSignpost div.cookieText a {
	color: #fff;
	font-weight: bold;
	transition: color 0.2s ease-in-out 0s;
}
#cookieSignpost div.cookieText a:hover {
	color: #cdf;
}
#cookieSignpost div.cookieText a#closeCookie {
	position: absolute;
	top: 5px;
	right: 0;
	width: 16px;
	height: 16px;
	text-align: center;
	padding: 2px;
	font: bold 14px/14px Arial;
	text-decoration: none;
	color: #333;
	transition: all 0.2s ease-in-out 0s;
	cursor: pointer;
	background-color: rgba(255,255,255,0.7);
	border-radius: 16px;
	box-sizing: content-box;
}
#cookieSignpost div.cookieText a#closeCookie:hover {
	background-color: #cdf;
}

/* OPENING SCREEN */
/* ============== */

img.s-track {
	display: none;
}

section.signup {
	/*width: 100%;
	height: 100%;*/
	z-index: 2000;
	height: 100vh;
	min-height: 725px; /* check whether this needs to be disabled on mobile size */
	background: url("/img/uk/landing/couple-field-1920x1188.jpg?v=") no-repeat scroll 10% center / cover rgba(0, 0, 0, 0);
	-webkit-background-size: cover;
}

@media all and (orientation: portrait){
	section.signup 	{background-image: url("/img/uk/landing/couple-field-1080x1253.jpg?v=");}
}

img.mainLogo {
	margin: 0 auto;
	display: block;
	max-width: 45%;
	padding: 5px 0;
}

a.loginLink {
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

/* all login and reg buttons */
a.loginLink, div#regLink a {
	text-decoration: none;
	background-color: rgba(0,0,0,0.1);
    color: rgba(0, 0, 0, 0.65);
	cursor: pointer;
	font-weight: 700;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	text-align: center;
}

/* all except mobile */
a.floatingLogin, a.inlineLogin, div#regLink a {
	line-height: 20px;
	line-height: 1.25rem;
}
a.floatingLogin {
	/*text-transform: uppercase;*/
	position: absolute;
	top: 75px;
	right: 30px;
	font-size: 14px;
	padding: 2px 15px 0;
	line-height: 40px;
}
a.inlineLogin, div#regLink a {
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	display: block;
	font-size: 14px;
	margin: 15px 0;
}
a.mobileLogin {	
	position: absolute;
	top: 7px;
	right: 10px;
	font-size: 14px;
	line-height: 26px;
	padding: 0 5px;
	text-transform: uppercase;
}
a.loginLink:hover, div#regLink a:hover {
	/*background-color: rgba(255, 255, 255, 0.85);*/
	color: rgba(0, 0, 0, 0.85);
	background-color: rgba(89,122,183,0.35);
}
div#regLink a#backToLogin {
	display: none;
}
@media all and (min-width: 481px){
	a.mobileLogin {
		visibility: hidden;
	}
	img.mainLogo {
		max-width: 65%;
	}
}
@media all and (max-width: 960px){
	a.floatingLogin {
		visibility: hidden;
	}
}
@media all and (min-width: 961px){
	a.inlineLogin {
		visibility: hidden;
	}
	img.mainLogo {
		padding: 65px 0 30px;
	}
}

/* MAIN SIGNUP BOX */
#signupHolder {
	width: 100%;
	max-width: 430px;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	z-index: 1000;
	font-size: 14px;
	font-size: 0.875rem;
	color: #222;
}
.signup-box {
	background-color: rgba(255,255,255,0.8);
	padding: 15px 20px 20px; /*a little off top as form titles appear more spacy*/
	width: 100%;
	box-sizing: border-box;
	/*box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);*/
}

@media all and (min-width: 481px){
	.signup-box, div#regLink a {
		-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	}
}
	.signup-box p {
		margin: 0;
		text-shadow: none;
		font-size: inherit;
		line-height: inherit;
	}
	.signup-box a {
		color: #597ab7;
	}
	.signup-box a:hover {
		color: #ea6262;
	}
	.signup-box form input[type="text"], .signup-box form input[type="email"], .signup-box form input[type="password"], .signup-box form select {
		display: block;
		font-family: inherit;
		box-sizing: border-box;
		-webkit-appearance:none;
		-webkit-border-radius:0;
	}
	.signup-box form input[type="checkbox"] {
		margin-right: 5px;
		display: inline;
	}
	.signup-box form input[type="text"], .signup-box form input[type="email"], .signup-box form input[type="password"] {
		padding: 7px 3px 7px 5px; /* 1px more each side vertically than select boxes which play weird games */
		background-color: #fff;
		border: 1px solid #ccc;
		width: 100%;
	}
	.signup-box form select {
		-moz-appearance: none;
		padding: 6px 3px;
		border: 1px solid #ccc;
		width: 100%;
		background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+") no-repeat scroll 100% center #fff;
	}
	.signup-box form input:hover, .signup-box form input:focus, .signup-box form select:hover, .signup-box form select:focus {
		border-color: #aaa;
	}
	.signup-box form input.i-field-error, .signup-box form input.i-field-error:hover, .signup-box form select.i-field-error, .signup-box form select.i-field-error:hover {
		border-color: #ea6262;
	}
	.signup-box form label, .signup-box form .i-label {
		line-height: 20px;	/* was 37px when 2.3125rem */
		line-height: 1.25rem;
		padding-top: 12px;
		padding-top: 0.75rem;
		padding-bottom: 2px;
		padding-bottom: 0.125rem;
		display: block;
		float: none;
		font-weight: 700;
		color: #000;
	}
	.signup-box form label.noTopPadding {
		padding-top: 0;
	}
		
/* SIGNUP */
	.signup-box .offer {
		position: absolute;
		z-index: 500;
		left: 5px;
		top: -28px;
		width: 85px;
		max-width: 18%;
	}			
	/*form include*/
	.signup-box .i-signup-v {
		width:100%;
	}
	.signup-box .formTitle, h1 {
		font-size: 25px;
		font-size: 1.6rem;
		line-height: 30px;
		line-height: 1.9rem;
		color:#597ab7;
		text-align: center;
	}
	.signup-box .i-signup-v form {
		color: #000;
	}
		
		.signup-box em, .i-info-pwd-st-cont, #ultCgu {
			font-size: 12px;
			display: block;
			line-height: 1.5;
			margin-top: 3px;
		}
		
		input#my_birth_day, input#my_birth_month {
			float: left;
			width: 25%;	
			margin-right: 3%;
		}
		input#my_birth_year {
			float: left;
			width: 44%;
			margin-right: 0;
		}
		#geoFields .geoSet {
			display: block;
			padding-top: 0.5rem;
		}
		#geoFields div:first-child .geoSet {
			padding-top: 0.75rem;
		}
		#geoFields .geoSet label, #geoFields .geoSet p {
			float: left;
			padding: 0;
			font-weight: bold;
			line-height: 1.25rem;
		}
		@media screen and (max-width: 360px){
			#geoFields .geoSet label, #geoFields .geoSet p {
				float: none;
			}
		}
		#geoFields .geoSet label {
			min-width: 180px;
		}
			.ultAlternatePseudoColLeft 	{float:left; padding:2px 0 3px 10px; width: 50%;}
			.ultAlternatePseudoColRight	{float:right; padding:2px 0 3px 10px; width: 50%;}
			#mtcPseudoExist .ultRadio { 
				width:auto; 
				margin-right:4px; 
				vertical-align:middle;
				background-color: #feccc1;
				border: 0px;				 
			}
			#mtcPseudoExist label {
				display: inline;
				padding: 0;
				vertical-align: middle;
				color: #222;
			}
		.i-checkbox-container {
			font-size: 11px;
			font-size: 0.6875rem;
		}						
		#ultCgu a {
			color:#000;
		}
		#ultCgu a:hover {
			color:#ea6262;
		}
		#ultCgu {
			margin-top: 16px;
		}
		#ultCgu input {
			float: left;
		}
		#ultCgu label {
			padding: 0 0 0 25px;
			line-height: 1.4;
		}
		#i_send_email {
			margin: 10px 0px 10px 0px;
		}
		a#ultBtnRegisterNew2, input.i-btn-2, #recovery-menu a, #ultLogin .ultBtnOk {
			font-family: Open Sans;
			background-color: #78cd00;
			background-image: none;
			color: #fff;
			text-shadow: 2px 2px #76bd43;
			cursor: pointer;
			display: block;
			font-size: 18px;
			font-weight: 700;
			height: 48px;
			line-height: 44px;
			margin: 16px auto 0 auto;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;
			width: 100%;
			float: none;
			padding: 0;
			border: none;
			-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
			transition: background-color 0.3s ease-in-out;
			-webkit-appearance: none;
			box-shadow: 0 -4px 0 0 #76bd43 inset;
		}
		#recovery-menu a {
			height: auto;
			padding: 10px 0 15px;
			line-height: 1em;
		}
		a#ultBtnRegisterNew2:hover, input.i-btn-2:hover, #recovery-menu a:hover, #ultLogin .ultBtnOk:hover {
			background-color: #76bd43;
		}
		a#ultBtnRegisterNew2 *, #recovery-menu a * {
			font-weight: inherit;
		}
		.ultBubbleHeaderLeft, .ultBubbleFooterLeft	{display: none;}
		.ultBubbleErrorBody, #ultLoginError {	
			padding: 4px 6px 5px;
			text-align: left;
			background-color: #ea6262;
			color: #fff;
			font-size: 12px;
			font-size: 0.75rem;
			font-weight: 700;
			line-height: 16px;
			line-height: 1rem;
			margin-top: 5px;
			border-radius: 3px;
			display: block;
		}
		.ultBubbleErrorBody *, #ultLoginError * {
			font-weight: inherit;
		}
		#ultLoginError {
			margin-top: 10px;
		}
		#i_terms .i-txt-bubble-error, #my_zipcode_error .i-txt-bubble-error {
			line-height: 15px;
			line-height: 0.9375rem;
			font-size: 12px;
			font-size: 0.75rem;
		}
		span.i-domain {
			font-weight: bold;
			font-style: italic;
		}
		.i-clearer, .ultClearer {clear:both;}
		
		/* geo autocomplete styles */
		.i-jq-autocomplete 	{background: none repeat scroll 0 0 #fff; border: 1px solid #ccc; max-height: 180px; overflow: auto; width: 176px;
			font-size: 12.5px; line-height: 16px; font-size: 0.78125rem; line-height: 1rem;}
		.i-jq-autocomplete .i-jq-menu-item a 			{display: block; padding: 2px 0 2px 5px; width: 100%; color: #333;}
		.i-jq-autocomplete .i-jq-menu-item a:hover 	{background: none repeat scroll 0 0 #ccc; color: #fff;}
		.i-jq-autocomplete-loading 					{background: url("/img/core/common/loader_16x16.gif?v=") no-repeat scroll right center #fff;}

/* LOGIN */
.showLogin {
	display: none;
}
	#ultLogin label.loginLabel, a.ultSecureAut {
		display: none;
	}
	#remember_me {
		vertical-align: middle;
		float: left;
	}
	#ultAutoLogin .left label {
		line-height: 16px;
		line-height: 1rem;
		font-size: 13px;
		display: inline;
		float: left;
		padding: 0;
	}
	#ultAutoLogin .right a.ultBtnHelp {
		float: right;
		text-decoration: none;
		font-size: 12px;
		line-height: 1rem;
	}
	.i-error-authent-txt, .i-error-authent {
		font-size: 12px;
		font-size: 0.75rem;
		line-height: 16px;
		line-height: 1rem;	
	}
	.i-error-authent-arrow {
		display: none;
	}
	.i-error-login, #fill_data {
		border: none;
		position: static !important;
		background-color: #ea6262;
		color: #fff;
		border-radius: 3px;
		margin-top: 10px;
		width: 100%;
		box-sizing: border-box;
		clear: both;
	}
	.i-error-authent-txt, .i-error-authent {
		color: #fff;
	}
	.i-login-form-default.i-login-form-twoline .i-login-link {
		font-size: 12px;
		float: right;
		color: #597ab7;
	}
	#recovery-menu br, #recovery-menu a.close, #recovery-menu .arrow {
		display: none;
	}
	#ultLogin a.ultBtnOk {
		margin-bottom: 12px;
		margin-bottom: 0.75rem;
	}
	#recovery-menu {
		background-color: transparent;
		border: none;
		position: static !important;
		padding: 0;
		display: none;
	}
	.i-login-form-default.i-login-form-twoline .i-vertical-line, .i-login-form-default .i-forgot-password .i-box-arrow, a.i-forgot-close {
		display: none;
	}
	.i-login-form-default .i-forgot-password .i-btn-2 {
		margin-top: 0;
	}
	@media screen and (max-width: 360px){
		.i-login-form-default .i-forgot-password .i-btn-2 {
			font-size: 14px;
			font-size: 0.875rem;
		}
	}
	.i-forgot-password-spacer {
		display: block;
		height: 16px;
		height: 1rem;
	}
	#recovery-menu div.forgotTitle {
		line-height: 20px;
		line-height: 1.25rem;
		display: block;
		text-align: center;
		font-weight: 700;
		color: #000;
	}

/* CONTENT SECTIONS */
/* ================ */

section {
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	-webkit-background-size: cover;
    min-height: 500px;
    position: relative;
    width: 100%;
	color: #fff;
	overflow-x: hidden; /* IE can't deal with transforms like a grown-up */
}

/* expand these ones to full height but not on portrait as they are too long */
@media screen and (min-width: 640px) and (orientation: landscape){
	/*section.signup, */section.why, section.success {
		height: 100%;
		height: 100vh;
	}
}
/* these ones only go full screen on small height screens with enough width otherwise they are too blank */
@media screen and (min-width: 768px) and (max-height: 770px) and (orientation: landscape){
	/*section.advice, section.content, section.links, section.legal {
		height: 100%;
		height: 100vh;
	}*/
}
/* on really small screens do stuff */
/*@media screen and (max-width: 640px){
	section.signup {
		min-height: 100vh;
		height: 725px;
	}
}*/

section .icon {
	width:100%;
	text-align:center;
	position:absolute;
	top:8%;
}
section .icon img {
	height: 100%;
	width: auto;
}
@media screen and (max-width: 770px){
	section .icon {
		top: 20%;
	}
}

section h2 {
	color: #fff;
	font-family: "Open Sans Condensed";
	text-transform: uppercase;
	font-size: 72px;
	line-height: 1;
	font-weight: 700;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

section .wording {
	position:absolute;
	bottom:12%;
	left: 50%;
	transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	color:#fff;
	width:96%;
	max-width: 1200px;
	text-align:center;	
}

section .wording ol {
   list-style-type: decimal;
   list-style-position: inside;
   margin: 1em 0;
   display: inline-block;
   text-align: left;
}

section p, section ol {
	font-size: 21px;
	line-height: 26px;
	text-shadow: 1px 1px 2px #000;
}
section footer p {
	font-size: inherit;
	line-height: inherit;
	text-shadow: none;
}

@media screen and (max-width: 770px){
	section h2 {
		font-size: 48px;
	}
	section p, section ol {
		font-size: 16px;
		line-height: 20px;
	}
}
@media screen and (max-width: 540px){
	section h2 {
		font-size: 36px;
	}
	section p, section ol {
		font-size: 14px;
		line-height: 18px;
	}
}

/* AUTO HEIGHT SECTIONS */
section.plain {
	min-height: auto;
	padding: 30px 0;
}
section.plain .icon, section.plain .wording {
	position: relative;
}
section.plain .icon {
	margin-bottom: 50px;
}

/* BUTTONS */
a.contentButton {
	background-color: rgba(0,0,0,0.2);
	border: 1px solid #fff;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-family: "Open Sans Condensed",helvetica,arial,sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	padding: 6px 25px 7px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease-in-out;
	text-align: center;
	max-width: 70%;
}
a.contentButton:hover {
	background-color: rgba(0,0,0,0.4);
}
@media screen and (max-width: 770px){
	a.contentButton {
		font-size: 18px;
	}
}
@media screen and (max-width: 540px){
	a.contentButton {
		font-size: 16px;
	}
}

section .wording h2 + a.contentButton{
	margin-top: 20px;
}

/* WHY */
section.why {
	background-image: url("/img/uk/landing/couple-dessert-1600x790.jpg?v=");
	/*background-position: 12% center;*/
}

/* DATING */
section.dating {
	background-color: #5b7fcb;
}
section.dating .icon {
	height: 120px;
}

/* ADVICE */
section.advice {
	background:rgb(234,100,99);
	background:-moz-radial-gradient(center,ellipse cover,rgba(234,100,99,1) 0,rgba(241,111,92,1) 52%,rgba(238,125,127,1) 96%,rgba(238,125,127,1) 100%);
	background:-webkit-gradient(radial,center center,0,center center,100%,color-stop(0,rgba(234,100,99,1)),color-stop(52%,rgba(241,111,92,1)),color-stop(96%,rgba(238,125,127,1)),color-stop(100%,rgba(238,125,127,1)));
	background:-webkit-radial-gradient(center,ellipse cover,rgba(234,100,99,1) 0,rgba(241,111,92,1) 52%,rgba(238,125,127,1) 96%,rgba(238,125,127,1) 100%);
	background:-o-radial-gradient(center,ellipse cover,rgba(234,100,99,1) 0,rgba(241,111,92,1) 52%,rgba(238,125,127,1) 96%,rgba(238,125,127,1) 100%);
	background:-ms-radial-gradient(center,ellipse cover,rgba(234,100,99,1) 0,rgba(241,111,92,1) 52%,rgba(238,125,127,1) 96%,rgba(238,125,127,1) 100%);
	background:radial-gradient(ellipse at center,rgba(234,100,99,1) 0,rgba(241,111,92,1) 52%,rgba(238,125,127,1) 96%,rgba(238,125,127,1) 100%);
}
section.advice .icon {
	height: 150px;
}

/* SUCCESS */
section.success {
	background-image: url("/img/uk/landing/couple-boardwalk-1600x790.jpg?v=");
	background-position: 10% center;
}

/* CONTENT */
section.content {
	background-color: #e9eaed;
	padding: 20px 15px;
	min-height: 0px;
}
section.content .wrapper {
	width: 100%;
	height: 100%;
	max-width: 1400px;
	padding: 20px 0;
	margin: 0 auto;
}

section.content .columns {	
	-webkit-columns: 2 250px;
	-moz-columns: 2 250px;
	columns: 2 250px;
	-webkit-column-gap: 4em;
	-moz-column-gap: 4em;
	column-gap: 4em;
	-webkit-column-rule: 1px dotted #bbb;
	-moz-column-rule: 1px dotted #bbb;
	column-rule: 1px dotted #bbb;
	color: #222;
}

section.content h3 {
	font-size: 26px;
	line-height: 1;
	font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
}
section.content p {
	text-shadow: none;
	margin: 10px 0;
	font-size: 19px;
	line-height: 25px;
}
section.content p + h3 {
	margin-top: 20px;
}

@media screen and (max-width: 1450px){
	section.content h3 {
		font-size: 22px;
	}
	section.content p {
		font-size: 17px;
		line-height: 22px;
	}
}
@media screen and (max-width: 770px){
	section.content h3 {
		font-size: 21px;
	}
	section.content p {
		font-size: 15px;
		line-height: 18px;
	}
}
@media screen and (max-width: 540px){
	section.content h3 {
		font-size: 20px;
	}
	section.content p {
		font-size: 13px;
		line-height: 17px;
	}
}

@media screen and (max-width: 1000px){

}
@media screen and (max-width: 890px){

}

/* CONTENT - ADVICE */

#contentAdvice ul	{display: block; list-style: disc outside none; color: rgba(0,0,0,0.2); padding-left: 24px; padding-left: 1.5rem;}
#contentAdvice ul li	{width: 50%; float: left; padding: 0 24px 0 0; padding: 0 1.5rem 0 0;}
#contentAdvice a {
	color: #253;
	transition: color 0.2s ease-in-out;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}
#contentAdvice a:hover {
	color: #fff;
}

@media screen and (max-width: 640px){
	#contentAdvice ul li	{width: 100%; float: none; margin-bottom: 3px; line-height: 1.25;}
}

.content-popup {
	position: relative;
	padding: 14px 16px;
	width: 96%;
	max-width: 1000px;
	margin: 20px auto;
	color: #fff;
	/*height: 80vh;
	max-height: 700px;*/
}
.content-popup header {
	/*border-bottom: 1px solid rgba(255,255,255,0.5);
	padding-bottom:.4em;*/
	font-family: "Open Sans Condensed";
	text-transform: uppercase;
	font-size: 28px;
	font-weight: 700;
	padding-right: 18px; /*no cross overlap */
}
.content-popup a.contentButton {
	font-size: 15px;
	padding: 4px 8px;
	background-color: rgba(0,0,0,0.15);
}
.content-popup a.contentButton:hover {
	background-color: rgba(0,0,0,0.3);
}
.popup-scroll{
	overflow-y: auto;
	height: 75vh;
	max-height: 700px;
	padding:0 1em 0 0;
	margin-top: 0.4em;
	font-size: 15px;
	line-height: 22px;
}
.content-popup h3 {
	margin: 1rem 0 0.25rem;
	font-weight: bold;
}

.mfp-wrap {
	-webkit-overflow-scrolling:touch;
}

.mfp-close-btn-in .mfp-close {
	color: #fff;
	transition: opacity 0.2s ease;
}

.mfp-with-anim {
	opacity: 0;
	transition: all 0.2s ease-in-out; 
	transform: scale(0.8); 
}  
.mfp-with-anim.mfp-bg {
	opacity: 0;
	transition: all 0.3s ease-out;
}
  
/* animate in */
.mfp-ready .mfp-with-anim {
	opacity: 1;
	transform: scale(1); 
}
.mfp-ready.mfp-bg {
	opacity: 0.8;
}
    
/* animate out */
.mfp-removing .mfp-with-anim {
	transform: scale(0.8); 
	opacity: 0;
}
.mfp-removing.mfp-bg {
	opacity: 0;
}
    
/* custom scrollbars - webkit only */
.popup-scroll::-webkit-scrollbar {width:10px; border-radius:2px;}
.popup-scroll::-webkit-scrollbar-thumb {
	border-radius:2px;
	/*-webkit-box-shadow: 0 0 8px #555 inset;box-shadow: 0 0 8px #555 inset;*/
	-webkit-transition: all .3s ease-out;transition: all .3s ease-out;
	}
.popup-scroll::-webkit-scrollbar-track {-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.1); box-shadow: 0 0 1px rgba(0,0,0,0.1);}

.bg-red .popup-scroll::-webkit-scrollbar		{background-color:#de5d5d;} /* #contentSafety */
.bg-red .popup-scroll::-webkit-scrollbar-thumb	{border: 1px #de5d5d solid; background-color: #bb4e4e;}
.bg-blue .popup-scroll::-webkit-scrollbar	{background-color:#5474ae;} /* #contentBlog */
.bg-blue .popup-scroll::-webkit-scrollbar-thumb	{border: 1px #5474ae solid; background-color: #476292;}
.bg-green .popup-scroll::-webkit-scrollbar	{background-color:#55ae79;} /* #contentAdvice */
.bg-green .popup-scroll::-webkit-scrollbar-thumb	{border: 1px #55ae79 solid; background-color: #3f8059;}

/* basic custom scrollbars on ie */
.bg-red .popup-scroll {
	scrollbar-face-color:#bb4e4e;
	scrollbar-arrow-color:#bb4e4e;
	scrollbar-track-color:#de5d5d;
	scrollbar-shadow-color:#de5d5d;
}
.bg-blue .popup-scroll {
	scrollbar-face-color:#476292;
	scrollbar-arrow-color:#476292;
	scrollbar-track-color:#5474ae;
	scrollbar-shadow-color:#5474ae;
}
.bg-green .popup-scroll {
	scrollbar-face-color:#3f8059;
	scrollbar-arrow-color:#3f8059;
	scrollbar-track-color:#55ae79;
	scrollbar-shadow-color:#55ae79;
}

/* SOCIAL SECTION */
/* ============== */

.social	{margin: 25px 0; display: block; float: none; text-align: center;}

.social a			{display: inline-block; margin: 0; cursor: pointer !important; margin: 0 4px; opacity: 0.75; text-indent: 0; border: none; text-indent: -9999em; text-align: left; vertical-align: top; width: 25px; height: 25px; background: url("/img/uk/index/social-icons-25.png?v=") no-repeat scroll 0 0 #fff; transition: 0.3s opacity ease-in-out;}
.social a.long		{width: 30px; height: 21px; margin-top: 2px;}
.social a:hover		{opacity: 1.0;}
.social img			{cursor: pointer !important; padding: 2px;}
.social a:hover img	{padding: 1px; }

.social .facebook	{background-position: 0 0;}
.social .twitter		{background-position: 0 -25px;}
.social .google		{background-position: 0 -50px;}
.social .instagram	{background-position: 0 -75px;}
.social .youtube		{background-position: 0 -100px;}
.social .wiki		{background-position: 0 -121px;}

/* FOOTER */
/* ====== */

section.links, section.legal {
	min-height: 0;
}
section footer {
	clear: both;
}

section.links {
	background-color: #464648;
	color: #fff;
	padding: 25px 0;
}
section.legal footer {
	color: #888;
}
footer h4 {
	font-family: "Open Sans Condensed";
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
	line-height: 1.25rem;
	text-align: center;
}
footer h5 {
	font-family: "Open Sans Condensed";
	color: #333;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
	margin-bottom: 0.5rem;
	line-height: 1.25rem;
}
footer a {
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
section.legal a {
	color: #222;
}
section.legal a:hover {
	color: #000;
}
section.links a {
	color: #ea6262;
	font-size: 14px;
}
footer .wrapper > div {
	font-size: 11px;
	line-height: 1.4;
	margin: 15px 0;
	text-align: justify;
}

footer div.copyright {
	font-size: 10px;
	padding-top: 0px;
	clear: both;
}

	footer .column  {
		width: 100%;
		display: block;
		float: none;
		padding-bottom: 16px;
		padding-bottom: 1rem;
		clear: both;
	}
	footer .column ul {
		width: 100%;
		float: none;
		text-align: center;
	}
	footer li {
		line-height: 16px;
		padding-bottom: 4px;
	}
	footer .legal {
		text-align: justify;
		margin-top: 25px;
	}

	.oda {
		display: block;
		position: relative;
		padding: 5px 10px;
		border: 1px solid #c2c2c2;
		color: #777;
		font-size: 11px;
		line-height: 14px;
	}
		.oda p {
			margin: 5px 0;
		}
		.oda img {
			float: left;
			margin: 0 8px 8px 0;
		}

@media screen and (min-width: 480px){
	footer .column {
		width: 50%;
		float: left;	
		clear: none;
	}
	footer .column, footer h4, footer .column ul {
		text-align: left;
	}
}

@media screen and (min-width: 768px){
	.signup-box .offer {
		left: auto;
		right: -90px;
		top: -40px;
		width: auto;
		max-width: none;
	}		
	.interview figure {
		margin-right: 10px;
		width: 50%;
		float: left;
	}
	.usp figure img {
		margin-right: 7%;
	}
	.slide article h2 {
 	 	font-size: 24px;
 	 	font-size: 1.75rem;
	}
	.oda {
		margin-right: 160px;
		padding: 5px 10px 5px 125px;
	}
	.oda img {
		position: absolute;
		top: 13px;
		left: 10px;
		float: none;
		margin: 0;
	}
}
@media screen and (min-width: 790px){
	article.mobile ul {
		width: auto;
		float: none;
		margin-right: 0;
	}
}
@media screen and (min-width: 900px){
	.verhalen {
	 	width: 49%;
	 	float: left;
 	}
 	.usp {
	 	width: 38%;
	 	float: right; 		
 	}
	 	.interview figure {
	 	 	width: 100%;
	 	} 	 	 
	 	.interview figure img {
	 	 	border: 8px solid #eee;
	 	 	max-width: 90%;
	 	}
	 	.usp figure img {
			margin-right: 11%;
		}
	.product figure {
		margin-right: 2rem;
		padding-bottom: 60px;
	}
}
@media screen and (min-width: 960px){
	footer .column ul {
		width: 50%;
		float: left;
		text-align: left;
		padding-right: 2%;
		box-sizing: border-box;
	}
	footer h4 {
		margin-bottom: 12px;
	}
}

/* password strength stuff */
.i-pwd-info-icon, .i-info-pwd-hide {display: none;}
.i-info-pwd-st-cont	{display: block; clear: both; line-height: 1.4; background-color: rgba(200,200,200,0.7); border-radius: 5px; margin-top: 5px; padding: 7px 10px;}
.i-info-pwd-st-cont ul	{list-style: outside none disc; margin: 0; padding-left: 2em;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* 3-in-1 */
.arrow-up1 {display: none;}
span.i-domain {font-weight: bold; font-style: italic;}
.i-checkbox-container {display: none;}

/* SMALL SCREEN DISPLAY */

@media all and (orientation: portrait) and (max-width: 380px){
	img.mainLogo {max-width: 40%; margin: 0 0 0 5px;}
	a.mobileLogin {font-size: 12px; line-height: 22px;}
	.ultAlternatePseudoColLeft, .ultAlternatePseudoColRight	{float: none; width: 100%; padding-bottom: 0px;}
}
@media all and (orientation: portrait) and (max-width: 480px){
	section.signup	{background-image: none; height: auto; min-height: auto;}
	section.signup div.mobileImage	{
		background: url("/img/uk/landing/couple-field-640x416.jpg?v=") no-repeat scroll center center / cover rgba(0, 0, 0, 0);
		-webkit-background-size: cover;
		width: 100%;
		height: 0;
		padding-bottom: 65%; /* (img-height / img-width * container-width) 416/640 */
	}
	#signupHolder {
		position: static;
		transform: none;
		left: auto;
		max-width: none;
	}
	.signup-box {
		padding: 10px;
	}
	.signup-box h1 {
		display: none;
	}
	#step-1 .ultLine:first-child label {
		padding-top: 0;
	}
	#ultArguments {
		position: static;
	}
	#ultAutoLogin .left label {
		font-size: 12px;
		font-weight: normal;
	}
	a.inlineLogin, div#regLink a {
		margin: 0;
	}
	a.inlineLogin {
		display: none !important;
	}
}
@media all and (min-width: 481px) and (max-width: 960px){
	a.floatingLogin {
		padding: 0 5px;
		font-size: 11px;
		line-height: 24px;
		right: 2.5%;
		top: 10px;
	}
	img.mainLogo {padding: 35px 0 25px;}
}