body.has_twofactor_takeover {
	overflow: hidden;
}

.twofactor_takeover {
	display: none;

	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;

	background: url( '/public/images/v6/colored_body_top.png?v=2' ) center top no-repeat #1b2838;
}

/* this takeover is only showing in the client, this is just needed for dev */
html.responsive body.has_twofactor_takeover div.responsive_page_content {
	z-index: 30;
}

body.has_twofactor_takeover .twofactor_takeover {
	display: block;
	overflow: auto;
}

.twofactor_takeover_content {
	max-width: 800px;
	margin: 50px auto 0 auto;

			font-family: "Motiva Sans", Sans-serif;
		font-weight: 300; /* light */

			font-size: 14px;
}

.twofactor_takeover_content .title_area {
	color: #acb2b8;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 20px;
}

.twofactor_takeover_content h1,
.twofactor_takeover_content h2 {
	color: #5eafde;
	font-weight: normal;
}

.twofactor_takeover_content h1 {
	font-size: 36px;
	line-height: 40px;
	margin-bottom: 20px;
}

.twofactor_takeover_content h2 {
	font-size: 18px;
	line-height: 19px;
}

.twofactor_takeover .twofactor_h2_sub {
	color: #627486;
	margin-bottom: 14px;
}

.twofactor_box {
	padding: 30px 16px 0 16px;
	position: relative;
	background: rgba( 0, 0, 0, 0.2 );

	color: #acb2b8;
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 32px;
}

.twofactor_box.split {
	width: 44%;
	height: 351px;
}

.twofactor_box.left {
	float: left;
}

.twofactor_box.right {
	float: right;
}

.twofactor_c2a {
	position: absolute;
	right: 25px;
	bottom: 25px;

	width: 183px;
	text-align: center;
}

.twofactor_box.left .twofactor_c2a {
	right: 60px;
}

.twofactor_c2a .btn_medium {
	width: 100%;
}

.twofactor_c2a p {
	color: #627486;
	font-size: 12px;
	line-height: 19px;
	margin-top: 8px;
}

.btn_medium.twofactor_btn > span {
	padding: 6px 15px;
	line-height: 18px;
}

.btn_medium.twofactor_store_btn > span {
	line-height: 48px;
}

img#twofactor_mobile {
	position: absolute;
	left: 28px;
	bottom: 50px;
}

img#twofactor_app {
	position: absolute;
	left: 26px;
	bottom: 0;
}

.twofactor_box.badge {
	padding: 30px 12px 0 185px;
	min-height: 72px;
}

.twofactor_box.badge b {
	font-weight: normal;
	color: #ffffff;
	font-size: 18px;
}

#twofactor_communitybadge_ctn {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 170px;
	line-height: 102px;
	text-align: right;
}

#twofactor_communitybadge_ctn img {
	vertical-align: middle;
}

.twofactor_footer_btn_ctn {
	float: right;
	margin-left: 118px;
}

p.twofactor_footer_content {
	font-size: 14px;
	line-height: 18px;
	padding: 14px 0;
}

.twofactor_box.split.has_overlay .twofactor_split_content {
	opacity: 0.5;
}

.twofactor_box.split.has_overlay .twofactor_split_overlay,
.twofactor_box.split.has_overlay .twofactor_split_overlay_click_intercept {
	display: block;
}

.twofactor_split_overlay {
	display: none;
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 30%;

	border: 1px solid #5eafde;
	background: #264156;
	padding: 22px 18px;
	text-align: center;

	color: #ffffff;
	font-size: 14px;
	line-height: normal;
}

.twofactor_split_overlay b {
	font-weight: normal;
	color: #5eafde;
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
}

.twofactor_split_overlay p:first-of-type {
	font-size: 18px;
	margin-bottom: 18px;
}

.twofactor_split_overlay p {

}

.twofactor_split_overlay_click_intercept {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: none;
}

.twofactor_split_overlay_click_intercept img {
	width: 100%;
	height: 100%;
}

.twofactor_takeover_content.twofactor_blog_page {
	font-size: 16px;
	padding: 0 2%;
	max-width: 720px;
}

.twofactor_takeover_content.twofactor_blog_page h1 {
	margin-bottom: 32px;
}

.twofactor_blog_page .para {
	margin: 16px 0;
}

.twofactor_blog_page a.btn_medium {
	margin-bottom: 16px;
}

.twofactor_blog_page ul {
	list-style: inside;
	padding-left: 16px;
}

.twofactor_blog_page .para5,
.twofactor_blog_page .para9 {
	font-size: 20px;
	margin-top: 24px;
}

@media screen and (max-width: 540px)
{
	.twofactor_blog_page.twofactor_takeover_content h1 {
		font-size: 30px;
		line-height: 34px;
	}
}