html {
	scroll-behavior: smooth;
}

a:link,
a:visited {
	text-decoration: none;
	color: dodgerblue;
}

a:hover, a:link:hover,a:visited:hover {
	color: var(--color-link-hover);
}

a.offset_anchor {
	display: block;
	position: relative;
	top: -5em;
	visibility: hidden;
}

#page_wrapper{
	width: 100%;
	padding-top: 7em;
	padding-bottom: 10em;
	min-height: 90%;
	margin: 0 auto;
	position: relative;
	background-color: var(--background-color);
}

#page_content {
	width: 100%;
	padding: 0;
}

#input_container, #access_container, #coupon_container, .input_container {
	display: block;
	width: 100%;
	padding-left: 33.3%;
	text-align: left;
}

.extra_top_margin {
	margin-top: 50px !important;
}

.input_text {
	width: 50%;
	margin: 0;
}

h1 {
	margin-top: 0;
	text-align: center;
}

h2{
	width: 100%;
	margin-bottom: 50px;
}

.indented_heading {
	padding-left: 33.3%;
}

.intro_text {
	margin-left: 33.3%;
	width: 33.33%;
	text-align: left;
	margin-bottom: 50px;
}

/* PAGE HEADINGS */
.page_title {
	font-size: 2em;
	text-align: center;
	margin-top: 0;
	margin-bottom: 1em;
	padding-top: 0;
	padding-bottom: 0;
}

.page_description {
	text-align: center;
	color: var(--text-lighter);
	padding-left: 20px;
	padding-right: 20px;
}

body.night_mode .page_description {
	color: var(--text-default);
}

.page_description a {
	font-weight: 500;
}

.page_description a:hover {
	color: var(--color-link-hover);
}

.description_narrow {
	width: 33.33%;
	margin-left: auto;
	margin-right: auto;
}

/* actions (icoupons etc.) */
div#action_container {
	display: none;
	border: 1px solid green;
	border-radius: 1em;
	padding: 1em 2em;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	margin: 0.5em 1em 0 1em;
}

div#action_container .action_title {
	margin: 0;
	padding: 0;
	color: green;
}

div#action_container p.action_description {
	color: green;
	margin: 0.5em 0 0 0;
}


#login_title {
	margin-bottom: 2em !important;
}

#reset_password_description {
	margin-bottom: 60px !important;
}


/*signup buttons*/

.signup_login_button {
	position: relative;
	height: 60px;
	width: 50%;
	border-radius: 10px;
	margin-bottom: 35px;
	cursor: default;
}

.signup_login_button:hover {
}

.disabled {
	opacity: 0.5;
	cursor: default;
}

.disabled:hover {
}

.signup_login_button img {
	padding:0;
	margin:0;
	margin-left: 25px;
	margin-right:25px;
	height: 20px;
	white-space: nowrap;
}

.signup_login_button div {

}

#signup_email {
	margin-bottom: 3em;
}

.email_button {

	color: var(--text-inverse);

	/* fallback */
	background-color: #1da1f2;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b99e6), to(#1da1f2));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #1da1f2, #1b99e6);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #1da1f2, #1b99e6);

	/* IE 10 */
	background: -ms-linear-gradient(top, #1da1f2, #1b99e6);

	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #1da1f2, #1b99e6);
}

.email_button:hover {
	
	/* fallback */
	background-color: #1069bc;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1069bc), to(#1da1f2));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #1da1f2, #1069bc);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #1da1f2, #1069bc);

	/* IE 10 */
	background: -ms-linear-gradient(top, #1da1f2, #1069bc);

	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #1da1f2, #1069bc);
}

.create_account_button {
	color: var(--text-inverse);

	/* fallback */
	background-color: #1da1f2;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b99e6), to(#1da1f2));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #1da1f2, #1b99e6);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #1da1f2, #1b99e6);

	/* IE 10 */
	background: -ms-linear-gradient(top, #1da1f2, #1b99e6);

	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #1da1f2, #1b99e6);
}

.create_account_button:not(.disabled):hover {

	/* fallback */
	background-color: #1069bc;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1069bc), to(#1da1f2));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #1da1f2, #1069bc);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #1da1f2, #1069bc);


	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #1da1f2, #1069bc);
}

.submit_button {
	width: 100%;
	height: 60px;
	line-height: 80px;
	border-radius: 10px;
	color: var(--text-inverse);
	margin-top: 10px;
	margin-bottom: 25px;
	outline: none;

	/* fallback */
	background-color: #1da1f2;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b99e6), to(#1da1f2));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #1da1f2, #1b99e6);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #1da1f2, #1b99e6);

	/* IE 10 */
	background: -ms-linear-gradient(top, #1da1f2, #1b99e6);

	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #1da1f2, #1b99e6);
}

.submit_button:hover{
	
	/* fallback */
	background-color: #1069bc;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1069bc), to(#1da1f2));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #1da1f2, #1069bc);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #1da1f2, #1069bc);

	/* IE 10 */
	background: -ms-linear-gradient(top, #1da1f2, #1069bc);

	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #1da1f2, #1069bc);

}

/* EMAIL LOGIN/SIGNUP CONTAINER */
#email_login_container, #email_signup_container {
	padding-top: 0px;
}

/*end signup buttons*/

.input_text_container {
	position: relative;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 50px;
	margin-bottom: 30px;
}



/* PASSWORD INFO - VERIFIES PASSWORD INPUT */

/* MOBILE */
#password_info_mobile {
	display: none;
}
/* END MOBILE */

/* DESKTOP */

#password_info {
	
	-ms-flex-item-align: start;
	align-self: flex-start;
	margin-left: -23px;
	opacity: 0;
    padding:15px;
    background:#fefefe;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}

#password_info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
}

#password_info::before {
    content: "\25c0";
    position:absolute;
    top:12px;
    left:50%;
    line-height:32px;
    color:#ddd;
    text-shadow:none;
    display:inline;
}

.invalid {
    background:url(../../graphics/ic_cross_16.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}
.valid {
    background:url(../../graphics/ic_tick_16.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}

/* END PASSWORD INFO */

#password_info_mobile {
	opacity: 1;
    width:100%;
    margin: auto;
    padding:10px;
    background:#fefefe;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
    margin-bottom: 20px;
    display:none;
}

#password_info_mobile h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
    font-size: 14px;
    margin: auto;
}

#password_info_mobile li {
	font-size: 12px;
}


/* INPUT FEEDBACK (validation icons, success/error messages) */

.input_feedback {
	position: relative;
	margin-left: 15px;
	height: 100%;
}

.input_feedback img {
	height: 16px;
	width: 16px;
	margin-right: 5px;
}

/* END INPUT FEEDBACK (validation icons, success/error messages) */

#create_account_error {
	display: none;
	color: red;
	margin-top: 20px;
	font-weight: 500;
	width: 50%;
}

#result_failure,
.error_message {

	display:none;
	margin: auto;
	color: red;
	margin: 30px 0 0 0;
	width: 50%;
}

#result_failure a,
.error_message a {
	color: dodgerblue;
}

#result_failure a:hover,
.error_message a:hover {
	color: blue;
}

#result_success {
	display:none;
	margin: auto;
	color: var(--text-default);
	margin: 30px 0 0 0;
	width: 50%;
}

#result_request_success {
	color: var(--text-default);
	margin: 30px auto 0 auto;
	width: 50%;
}

#goto_lobby_container {
	position: relative;
	display: none;
	margin-top: 70px;
}

#goto_lobby {
	padding: 15px 100px;
}

.signup_login_options {
	margin-top: 30px;
	width: 50%;
}


.option_item {
	display: inline-block;
	margin-bottom: 10px;
}

.option_item a {
	color: dodgerblue;
}

.option_item a:hover {
	color: var(--color-link-hover);
}

/* USER AGREEMENT / PAYMENT INFO */
.user_agreement_info {
	width: 50%;
	margin-top: 20px;
}

.subscription_user_agreement_info {
	width: 100%;
	margin-top: 20px;
}

.payment_info {
	width: 100%;
	margin-top: 20px;
}

.user_agreement_info a, .subscription_user_agreement_info a, .payment_info a, .options a {
	color: dodgerblue;
}

.user_agreement_info a:hover, .subscription_user_agreement_info a:hover, .payment_info a:hover, .options a:hover  {
	color: blue;
}


/* RESET PASSWORD */
#reset_result {
	width: 95%;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

#result_title {
	margin: 0px 0px 30px 0px;
	padding: 0;
}

/* ERROR PAGE */
#error_container {
	padding-top: 20px;
	display: block;
	width: 33.33%;
	margin: auto;
	text-align: left;
}

#error_container h2 {
	width: 100%;
	margin: 0;
	padding: 0;
	margin-bottom: 30px;
	text-align: left;
}

#error_container .intro_text {
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0;
	margin-bottom: 50px;
}

#error_title {
	width: 50%;
	margin-top: 0;
	padding: 0;
	margin-bottom: 30px;
	text-align: center;
}

#error_subtitle {
	width: 50%;
	margin-bottom: 50px;
	text-align: center;
}

#sign_in_failure {

	color: red;
	display: none;
	margin-bottom: 25px;

}

/* END ERROR PAGE */

/* MEMBERSHIP */


#subscription_renewal_explanation {
	width: 50%;
	margin-top: 40px;
}

#page_wrapper.renewal img.klarna_logo {
	height: 3em;
}

/* RED BANNER */

#red_banner_container {
	position: relative;
	width: 640px;
	margin: 60px auto 50px auto;
}

#red_banner {
	width: 100%;
	z-index: 1;
}

#red_banner_text {
	position: absolute;
	left: 80px;
	right: 80px;
	top:10px;
	color: var(--text-inverse);
	font-weight: bold;
	font-size: 34px;
	z-index: 2;
}

body.night_mode #red_banner_text {
	color: var(--text-default);
}

/* END RED BANNER */

/* MEMBERSHIP PERIODS */

#membership_container {
	width: 100%;
	padding: 0;
}

.membership_plans_container {
	width: calc(100% - 1em);
	margin: 2.5em auto;
}

.membership_plans_content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 4em;
}

/* MEMBERSHIP: DESKTOP */

.membership_period_container {
	width: 18em;
	position: relative;
	cursor: pointer;
}

.membership_period_content {
	position: relative;
	width: 90%;
	height: 18em;
	margin: auto;
	border-radius: 1em;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.membership_period_container:hover .membership_period_content {
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	-webkit-transform: scale(1.025);
	transform: scale(1.025);
}

.membership_period_content .period {
	font-size: 1.5em;
	font-weight: 500;
	width: 100%;
	position: absolute;
	top: 28px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

body.night_mode .membership_period_content .period {
	color: black;
}

.membership_period_content .select_membership {
	position: absolute;
	bottom: 1.75em;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 0.75em;
	padding: 0.5em;
	width: 85%;
	cursor: pointer;

	border: 2px solid #be8500;

	background-color: #ffcc4c;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fab81e), to(#ffcc4c));
	background: -webkit-linear-gradient(top, #ffcc4c, #fab81e);
	background: -moz-linear-gradient(top, #ffcc4c, #fab81e);
	background: -ms-linear-gradient(top, #ffcc4c, #fab81e);
	background: -o-linear-gradient(top, #ffcc4c, #fab81e);

}

.membership_period_content .select_membership .price_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.membership_period_content .select_membership .price_container span.current_price {
	font-size: 1.5em;
	font-weight: 500;
}

body.night_mode .membership_period_content .select_membership .price_container span.current_price {
	color: black;
}

.membership_period_content .select_membership .price_container span.original_price {
	font-weight: 500;
	color: red;
	text-decoration: line-through;
	margin-left: 0.6em;
	font-size: 0.95em;
}

.membership_period_center_box {
	width: 100%;
	position: absolute;
	top: calc(50% + 0.5em);
	border-radius: 1em;
	padding: 0.75em 0.5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: var(--text-inverse);
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.membership_period_container:hover .membership_period_center_box {
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	-webkit-transform: scale(1.025) translateY(-50%);
	transform: scale(1.025) translateY(-50%);
}

.membership_period_container ul.usps {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.membership_period_container ul.usps li {
	display: flex;
	align-items: center;
	font-size: 1.0em;
	white-space: nowrap;
}

.membership_period_center_box ul.usps li img.checkmark {
	height: 1.375em;
	margin-right: 0.175em;
}

.membership_period_center_box ul.usps li em {
	margin-left: 0.175em;
}

.membership_period_center_box .price {
	font-weight: 500;
	font-size: 2.750em;
	margin-top: 1px;
}

.membership_period_center_box .original_price {
	display: none;
	color: red;
	text-decoration:line-through;
	font-size: 1.125em;
	margin-bottom: 0;
}

.membership_period_center_box .benefits {
	font-weight: normal;
}


/* MEMBERSHIP: ONE MONTH */

.membership_one_month {

}

.membership_one_month_box {
	background: #eaeaea;
	border: 1px solid #999999;
}

.membership_one_month_center_box {

	border: 1px solid #999999;

	/* fallback */
	background-color: #c5c5c5;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aaaaaa), to(#c5c5c5));

	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #c5c5c5, #aaaaaa);

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #c5c5c5, #aaaaaa);

	/* IE 10 */
	background: -ms-linear-gradient(top, #c5c5c5, #aaaaaa);

	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #c5c5c5, #aaaaaa);
}

/* MEMBERSHIP: THREE MONTHS */

.membership_three_months {

}

.membership_three_months_ribbon {
	width: 75%;
	margin: 0 auto;
	padding: 10px 0;
	color: var(--text-inverse);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid #00a417;
	border-bottom: none;
	font-weight: 500;

	background-color: #67e15d;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5ccb53), to(#67e15d));
	background: -webkit-linear-gradient(top, #67e15d, #5ccb53);
	background: -moz-linear-gradient(top, #67e15d, #5ccb53);
	background: -ms-linear-gradient(top, #67e15d, #5ccb53);
	background: -o-linear-gradient(top, #67e15d, #5ccb53);

}

.membership_three_months_box {
	background: #cdf3d2;
	border: 1px solid #00a417;
}

.membership_three_months_center_box {

	border: 1px solid #2bb120;

	background-color: #67e15e;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5cca53), to(#67e15e));
	background: -webkit-linear-gradient(top, #67e15e, #5cca53);
	background: -moz-linear-gradient(top, #67e15e, #5cca53);
	background: -ms-linear-gradient(top, #67e15e, #5cca53);
	background: -o-linear-gradient(top, #67e15e, #5cca53);
}

/* MEMBERSHIP: TWELVE MONTHS */

.membership_twelve_months {

}

.membership_twelve_months_ribbon {
	width: 75%;
	margin: 0 auto;
	padding: 10px 0;
	color: var(--text-inverse);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid #1181c6;
	border-bottom: none;
	font-weight: 500;

	background-color: #52bbfb;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b99e6), to(#52bbfb));
	background: -webkit-linear-gradient(top, #52bbfb, #1b99e6);
	background: -moz-linear-gradient(top, #52bbfb, #1b99e6);
	background: -ms-linear-gradient(top, #52bbfb, #1b99e6);
	background: -o-linear-gradient(top, #52bbfb, #1b99e6);

}

.membership_twelve_months_box {
	background: #def2ff;
	border: 1px solid #1181c6;
}


.membership_twelve_months_center_box {

	border: 1px solid #1181c6;

	background-color: #52bbfb;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b99e6), to(#52bbfb));
	background: -webkit-linear-gradient(top, #52bbfb, #1b99e6);
	background: -moz-linear-gradient(top, #52bbfb, #1b99e6);
	background: -ms-linear-gradient(top, #52bbfb, #1b99e6);
	background: -o-linear-gradient(top, #52bbfb, #1b99e6);
}

/* DUMMY RIBBON: NEEDED FOR TOP AND BOTTOM SPACING*/
.membership_dummy_ribbon {
	opacity: 0;
	width: 75%;
	margin: 0 auto;
	padding: 10px 0;
	color: transparent;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid transparent;
	border-bottom: none;
	box-shadow: none;
	font-weight: 500;
	background-color: transparent;
}

/* END MEMBERSHIP: DESKTOP */

/* MEMBERSHIP_HIGHLIGHTS */

.membership_highlights_container {
	width: 60%;
	margin: 0 auto;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.membership_highlights_item {
	width: 45%;
	margin-bottom: 40px;
	text-align: center;
}

.membership_highlights_item:nth-child(odd) {
	margin-right: 5%;
}

.membership_highlights_item:nth-child(even) {
	margin-left: 5%;
}

.membership_highlights_item img {
	height: 56px;
	margin-bottom: 12px;
}

.membership_highlights_item h3 {
	margin-bottom: 10px;
	margin-top: 0;
}

.membership_highlights_item .mh_description {
	font-weight: normal;
	font-size: 1.0em;
}

/* END MEMBERSHIP_HIGHLIGHTS */

/* MEMBERSHIP DESCRIPTION */

#membership_description_container {
	text-align: left;
	padding:0;
	width: 60%;
	margin: 40px auto 50px auto;
}


#membership_description_container h3 {
	margin-bottom: 25px;
	margin-top: 0;
	text-align: center;
}

#membership_description_container ul li {
	font-size: 1.0em;
	margin-bottom: 5px;
}

/*#signup_description_2 {
	margin-bottom: 0;
}*/

.promo_image_wide {
	width: 50%;
	margin: 0 auto 50px auto;
}

#all_devices_large {
	margin-bottom: 20px !important;
}

#membership_description_container .item_heading {
	font-weight: 500;
	margin-bottom: 10px;
	font-size: 1.1em;
}

#membership_description_container .item_subheading {
	font-weight: 500;
	margin-bottom: 5px;
	font-size: 1.0em;
}

#membership_description_container .item_description {
	font-size: 1.0em;
	margin-bottom: 30px;
}

#membership_renewal_explanation {
 	width: 66.66%;
 	padding-top: 25px;
 	padding-bottom: 100px;
 	margin: auto;
 	text-align: center;
}


/*	*	*	*	*	*
	CREATE ACCOUNT
 *	*	*	*	*	*/

#page_wrapper.signup_landing {
	padding-top: 60px;
}

#page_wrapper.signup_landing .klarna_top_banner {
	margin-bottom: 2.5em;
	min-height: 3em;
}

/* SIGNUP PROGRESS */

.signup_only {
	display: none;
}

#page_wrapper.signup .signup_only {
	display: block;
}

#signup_progress_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 1.25em;
	opacity: 0;
}

.signup_progress_item {
	position: relative;
	text-align: center;
	z-index: 1;
	width: 6em;
	/*border: 1px solid red;*/
}

.signup_progress_icon {
	position: relative;
	width: 3.0em;
	height: 3.0em;
	margin: 0 auto 0.1em auto;
}

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

.signup_progress_icon span.signup_progress_number {
	position: absolute;
	top: calc(50% - 1px);
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	color: var(--text-inverse);
	font-size: 2.25em;
	font-weight: bold;
}

div.signup_progress_step_description {
	color: #999999;
	font-size: 0.5625em;
}

div.signup_progress_step_separator {
	position: relative;
	margin-left: -2em;
	margin-right: -2em;
	z-index: 0;
}

div.signup_progress_step_separator .signup_progress_line {
	width: 4em;
	height: 0.4em;
	background: #dedede;
	margin-top: 1.3em;
}

div.signup_progress_step_separator .signup_progress_line.complete {
	background: #4ddb63;
}

/* END SIGNUP PROGRESS */

.signup_step_decription {
	color: grey;
	margin-bottom: 5px;
}

#account_container {
	padding-top: 1em;
	position: relative;
}

#account_title {
	margin: 0px 0px 50px 0px;
}

#account_container .klarna_payment_logos {
	margin-left: -50%;
	margin-top: 2em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* REVIEWS CONTAINER */

#reviews_container {
	position: relative;
	width: 100%;
	background: black;
	padding: 0;
	height: 360px;
	color: var(--text-inverse);
	overflow-x: hidden;
}

#reviews_content {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50%;
}

#reviews_content p {
	font-family: 'Merriweather', serif;
	font-style: italic;
	font-weight: bold;
	font-size: 2.0em;
	color: var(--text-inverse);
}

body.night_mode #reviews_content p {
	color: var(--text-default);
}

.scaleUp {
    -webkit-animation: scale_up 1s forwards;
            animation: scale_up 1s forwards;
}

.slideOut {
	-webkit-animation: slide_out 1s forwards;
	        animation: slide_out 1s forwards;
}

@-webkit-keyframes slide_out {
	from{
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
    	opacity: 1;
	}
	to{
		-webkit-transform: translate(200%, 0);
		        transform: translate(200%, 0);
    	opacity: 1;
	}
}

@keyframes slide_out {
	from{
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
    	opacity: 1;
	}
	to{
		-webkit-transform: translate(200%, 0);
		        transform: translate(200%, 0);
    	opacity: 1;
	}
}

@-webkit-keyframes scale_up {
	from{
		-webkit-transform: scale(0);
		        transform: scale(0);
    	opacity: 1;
	}
	to{
		-webkit-transform: scale(1);
		        transform: scale(1);
    	opacity: 1;
	}
}

@keyframes scale_up {
	from{
		-webkit-transform: scale(0);
		        transform: scale(0);
    	opacity: 1;
	}
	to{
		-webkit-transform: scale(1);
		        transform: scale(1);
    	opacity: 1;
	}
}

/* END REVIEWS */

 /*	*	*	*	*	*
	PAYMENT FORM
 *	*	*	*	*	*/

#payment_container {
	display: none;
	width: 33.33%;
	text-align: left;
	margin: 0 auto;
	padding-top: 0;
}

#payment_form {
	padding: 0px;
}

#payment_title {
	margin: 0px 0px 30px 0px;
	text-align: left;
}

label {
	display: block;
	margin: 10px 0;
	color: grey;
}

input {
	width: 100%;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 5px;
	outline: none;
	border: 1px solid silver;

}

input:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

.has-error input {
	border: 1px solid red;
}
	
.validation.text-danger:after {
	content: 'Validation failed';
}
	
.validation.text-success:after {
	content: 'Validation passed';
}

/* SECURE TRANSACTION */
#secure_transaction {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 25px;
}

/* CREDIT CARDS */
#credit_cards_container {
	margin-top: 30px;
}

#visa img, #mastercard img, #amex img, #bitcoin img {
	height: 25px;
}

#powered_by_stripe {
	height: 25px;
}

#submit_payment {
	margin-right: 100%;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

#payment_error {
	color: red;
	margin-bottom: 25px;
	display: none;
	padding-top: 50px;
}

#icon_success {
	display: none;
}

/*	*	*	*	*	*
	END PAYMENT FORM
*	*	*	*	*	*/

/*	*	*	*	*	*
	COUPON FORM
*	*	*	*	*	*/

#coupon_form_container {
	display: none;
	width: 33.33%;
	margin: auto;
	background-color: var(--background-color);
	text-align: left;
	overflow:hidden;
}

#coupon_code {
	text-transform:uppercase;
}

#submit_coupon {
	margin-right: 100%;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

#coupon_title {
	width: 100%;
	margin: 0px 0px 30px 0px;
}

#coupon_error {
	color: red;
	margin-top: 10px;
	margin-bottom: 20px;
	font-weight: 500;
}

#goto_subscriptions, #show_subscription_plans {
	display: none;
}

.btn_coupon a,
.coupon_voucher_link a {
	display: inline;
	color: dodgerblue;
	font-weight: 500;
}

.btn_coupon a:hover,
.coupon_voucher_link a:hover,
.coupon_voucher_link a:visited:hover {
	color: var(--color-link-hover);
}

.coupon_voucher_link {
	display: inline;
}

.desktop_inline_link_divider {
	font-size: 1.25em;
}

.coupon_voucher_link a:visited {
	color: dodgerblue;
}

/*	*	*	*	*	*
	END COUPON FORM
*	*	*	*	*	*/

/* END SUBSCRIPTION */

 /*	*	*	*	*	*
	SIGNUP RESULT 
 *	*	*	*	*	*/

#signup_result_container {
	display: none;
	padding-top: 0;
	width: 33.33%;
	margin-left: 33.3%;
	text-align: left;
}

#signup_result_container h3 {
	margin: 0 0 30px 0;
}

/* ENsD SIGNUP RESULT */



/*	*	*	*	*	*
	SUBSCRIPTION 
*	*	*	*	*	*/

#subscription_result_container {
	text-align: left;
	display: none;
	width: 33.33%;
	margin: auto;
	margin-top: 20px;
}

#subscription_result_title {
	margin: 0px 0px 30px 0px;
}

#subscription_result_details {
	margin: 0px 0px 30px 0px;
	color: grey;
}

/*	*	*	*	*	*
	END SUBSCRIPTION 
*	*	*	*	*	*/

/* COUPON CREATOR (ADMIN ONLY) */

#coupon_container {
	display: none;
}

/* END COUPON CREATOR */

/*POST SIGNUP*/

#post_signup_container {
	width: 40%;
	margin: 0 auto;
}

#post_signup_container a {
	color: blue;
}

#post_signup_container a:hover {
	color: dodgerblue;
}

#signup_result_content {
	margin-top: 50px;
}

.post_signup_box {
	width: 100%;
}

#post_signup_please_wait {
	text-align: center;
}

#post_signup_payson {
}

#post_signup_account {
	margin-bottom: 50px;
}

/*END POST SIGNUP*/

/*ACTIVATE USER (ADMIN ONLY)*/

#access_code_container, #activate_container, #post_signup_container {
	width: 40%;
	margin: 0 auto;
}

#access_code_container input, #access_code_container button, #activate_container input, #activate_container button {
	width: 100%;
	margin-bottom: 25px;
}

#activate_container {
	display:none;
}

/*END ACTIVATE USER*/

/*PRELOAD GRAPHICS*/
.preload_container {
	position: absolute;
	left: -10000px;
	top: -10000px;
	height: 0;
	width: 0;
}

/*END PRELOAD GRAPHICS*/

/* SETTINGS PAGES */

#page_wrapper.settings_page_wrapper {
	padding: 7em 0;
	overflow-x: hidden;
}

.setting_item_container {
	background-color: whitesmoke;
	border-radius: 1em;
	padding: 1em 3em 2em 3em;
	margin: 0 auto 2em auto;
	color: var(--text-lighter);
	width: 35em;
	text-align: left;
}

.setting_item_container .custom_radio_buttons_container {
	margin-top: 2em;
}

.setting_item_container .input_label {
	color: grey;
	font-style: italic;
	font-size: 0.875em;
	margin: 2em 0 0 0;
}

.setting_item_container .custom_radio_container {
	color: var(--text-default);
}

.setting_item_container #btn_readspeaker {
	margin: 1.5em 0 -1em 0;
}

.setting_item_container a#btn_goto_lobby {
	display: inline-block;
	width:  35em;
	margin-top: 1em;
}

/* END SETTINGS PAGES */


/*	*	*	*	*	*	*
	KLARNA CHECKOUT PAGE
 *	*	*	*	*	*	*/
#page_wrapper.signup.checkout {

}

#page_wrapper.signup.checkout #signup_progress_container {
	opacity: 1;
}

#page_wrapper.checkout div.info_container {
	width: 45%;
	margin: 0 auto 1em auto;
}

#page_wrapper.checkout.renewal div.info_container {
	border: 1px solid #cccccc;
	padding: 2em;
	border-radius: 1em;
}


/*	*	*	*	*	*	*	*
	END KLARNA CHECKOUT PAGE
 *	*	*	*	*	*	*	*/

/*	*	*	*	*	*	*	*
	MULTI USER LICENCES PAGE
 *	*	*	*	*	*	*	*/

div.page_wrapper.multiuser_licences {
}

div.multi_licence_description_content {
	margin: 0 auto;
	width: 50%;
}

div.multi_licence_description_content p.page_description {
	padding: 0;
}

div.multi_licence_description_content p.page_description a {
	color: dodgerblue;
}

div.page_wrapper.multiuser_licences div.price_table_container {
	margin-top: 3em;
}

div.page_wrapper.multiuser_licences div.price_table_container #price_table {
	margin: 2em auto 2em auto;
	border-collapse: collapse;
}

div.page_wrapper.multiuser_licences div.price_table_container #price_table th,
div.page_wrapper.multiuser_licences div.price_table_container #price_table td {
	padding: 0.75em 1.5em;
	border: 1px solid silver;
	text-align: left;
	width: 11em;
}

div.page_wrapper.multiuser_licences div.price_table_container #price_table th {
	background-color: var(--text-lighter);
	color: var(--text-inverse);
}

tr:nth-child(odd) {
	background-color: #fafafa;
}

body.night_mode tr:nth-child(odd) {
	background-color: #050505;
}


/*	*	*	*	*	*	*	*
	END MULTI USER LICENCES PAGE
 *	*	*	*	*	*	*	*/

/* FAQ */

div.faq_container {
	text-align: left;
	margin: 2em auto 0 auto;
	width: 50%;
}

div.faq_container h2 {
	text-align: center;
	margin-bottom: 1.5em;
}

div.faq_container h4.faq_question {
	margin: 0 0 0.5em 0;
}

div.faq_container div.faq_answer {
	margin-bottom: 2em;
}

div.faq_container li {
	font-size: 1em;
}


/********************

	MEDIA QUERIES

*********************/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1700px) {

}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1600px) {

	#reviews_content, div.multi_licence_description_content, div.faq_container {
		width: 55%;
	}

	.membership_plans_content {
		gap: 3.5em;
	}

}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1450px) {


	#membership_description_container, #access_code_container, #activate_container, #result_request_success, #reviews_content,
	div.multi_licence_description_content, div.faq_container {
		width: 60%;
	}

	#post_signup_container {
		width: 50%;
	}

	#payment_container {
		width: 40%;
	}

	#page_wrapper.checkout div.info_container {
		width: 50%;
	}

}


 /* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

	#membership_description_container, .reviews_wrapper, .membership_highlights_container,
	#activate_container, #result_request_success, #reviews_content, div.multi_licence_description_content,
	div.faq_container {
		width: 70%;
	}

	#post_signup_container {
		width: 60%;
	}

	#coupon_form_container {
		width: 50%;
	}

	#payment_container {
		width: 50%;
	}

	#error_container {
		width: 50%;
	}

	.membership_plans_content {
		gap: 3em;
	}

	.membership_period_center_box .price {
		font-size: 2.5em;
	}

	.promo_image_wide {
		width: 70%;
	}

	#page_wrapper.checkout div.info_container {
		width: 55%;
	}

}

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

	.membership_plans_content {
		gap: 2em;
	}

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

	#login_title {
		margin-bottom: 1.5em !important;
	}

	#reset_password_description {
		margin-bottom: 50px !important;
	}

	#membership_description_container, .reviews_wrapper, .membership_highlights_container,
	#activate_container, #post_signup_container, #result_request_success, #reviews_content,
	div.multi_licence_description_content, div.faq_container {
		width: 75%;
	}

	.promo_image_wide {
		width: 80%;
	}
	
	#input_container, .input_container {
		width: 100%;
		margin: auto;
	}

	#coupon_form_container {
		width: 60%;
	}

	#payment_container {
		width: 60%;
	}

	#error_container {
		width: 60%;
	}

	#red_banner_container {
		width: 480px;
	}

	#red_banner_text {
		left: 50px;
		right: 50px;
		top:6px;
		font-size: 26px;
	}

	#page_wrapper.checkout div.info_container {
		width: 67%;
	}

	div.page_wrapper.multiuser_licences div.price_table_container #price_table th,
	div.page_wrapper.multiuser_licences div.price_table_container #price_table td {
		width: 10em;
	}

	.membership_plans_content {
		gap: 1.5em;
	}

	.membership_period_container {
		width: 16em;
	}

}

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

	.membership_plans_content {
		gap: 1.0em;
	}

	.membership_period_container {
		width: calc(33% - 0.75em);
	}

}


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

	.signup_login_button {
		margin-bottom: 30px;
	}

	.description_narrow {
		width: 80%;
	}

	#membership_description_container, .reviews_wrapper, .membership_highlights_container,
	#activate_container, #post_signup_container, #result_request_success, #reviews_content,
	div.multi_licence_description_content, div.faq_container {
		width: 90%;
	}

	.membership_period_content .select_membership {
		font-size:1.0em;
	}

	.promo_image_wide {
		width: 80%;
	}

	#coupon_form_container {
		width: 85%;
	}

	#payment_container {
		width: 85%;
	}

	#signup_result_container, #subscription_result_container {
		width: 85%;
		margin: auto;
	}

	#input_container, #error_container, .input_container {
		width: 80%;
		margin: auto;
		padding-left: 0;
	}

	.signup_login_button, .user_agreement_info {
		width: 100%;
	}

	.signup_login_options {
		width: 100%;
	}

	.input_text {
		width: 100%;
	}

	#password_info {
		display: none;
	}

	.input_feedback {
		position: absolute;
		margin-right: 5px;
		right: 0;
	}

	.input_feedback img {
		height: 16px;
		width: 16px;
	}

	.invalid, .valid {
	    background:none;
	}

	#secure_transaction {
		margin-top: 5px;
	}

	#result_failure, #error_title, #error_subtitle, .error_message {
		width: 100%;
	}

	#error_subtitle {
		margin-bottom: 30px;
	}

	#reviews_container {
		height: 280px;
	}

	#reviews_content p {
		font-size: 1.6em;
	}

	.setting_item_container a#btn_go_to_lobby .standard_button {
		width:  35em;
	}

	#page_wrapper.checkout div.info_container {
		width: 80%;
	}

	#account_container .klarna_payment_logos {
		margin-left: 0;
	}

	div.page_wrapper.multiuser_licences div.price_table_container #price_table th,
	div.page_wrapper.multiuser_licences div.price_table_container #price_table td {
		width: 9em;
	}

}

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

	.membership_plans_content {
		gap: 1em;
	}

	.membership_period_content .select_membership .price_container span.current_price {
		font-size: 1.25em;
	}
}

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

	.membership_plans_content {
		display: block;
		margin-top: -2em;
	}

	.membership_period_container {
		width: 24em;
		margin: 0 auto 2em auto;
	}

	.membership_period_content .select_membership .price_container span.current_price {
		font-size: 1.5em;
	}
}

/* Small tablets, phablets */
@media only screen and (max-width : 620px) {

	#red_banner_container {
		width:360px;
	}

	#red_banner_text {
		left: 40px;
		right: 40px;
		top:5px;
		font-size: 19px;
	}

	.setting_item_container {
		width: 90%;
	}

	.setting_item_container a#btn_go_to_lobby {
		width:  90%;
	}

	#page_wrapper.checkout div.info_container {
		width: 95%;
	}

	div.page_wrapper.multiuser_licences div.price_table_container #price_table th,
	div.page_wrapper.multiuser_licences div.price_table_container #price_table td {
		width: unset;
		padding: 0.75em 0.5em;
		font-size: 0.95em;
	}


}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

	.page_title {
		font-size: 1.75em;
		margin-bottom: 1em;
	}

	.description_narrow {
		width: 90%;
	}

	#membership_description_container, .reviews_wrapper, .membership_highlights_container, 
	#activate_container, #post_signup_container, #result_request_success, #reviews_content,
	div.multi_licence_description_content, div.faq_container {
		width: 95%;
	}

	.input_text_container {
		margin-bottom: 25px;
	}

	.membership_period_container {
		width: calc(100% - 1em);
		max-width: 18em;
	}

	.membership_highlights_item {
		width: 100%;
		margin: 0 0 40px 0;
		padding: 0 10px;
	}

	.membership_highlights_item:nth-child(odd) {
		margin-right: 0;
	}

	.membership_highlights_item:nth-child(even) {
		margin-left: 0;
	}

	.promo_image_wide {
		width: 90%;
	}

	.review {
		width: 45%;
		margin-bottom: 30px;
	}

	#coupon_form_container {
		width: 95%;
		overflow:hidden;
	}

	#payment_container {
		width: 95%;
		padding-top: 0;
	}

	#input_container, #error_container, .input_container {
		width: 90%;
		margin: auto;
		padding-left: 0;
	}

	.option_item {
		display: block;
	}

	.account_option_divider {
		display: none;
	}

	#create_account_error {
		width: 100%;
	}

	#signup_result_container, #subscription_result_container {
		width: 95%;
		margin: auto;
	}

	#result_failure, #error_title, #error_subtitle, .error_message {
		width: 100%;
	}

	#red_banner_container {
		margin: 50px auto 40px auto;
	}

	.extra_top_margin {
		margin-top: 40px !important;
	}

	#goto_lobby_container {
		margin-top: 50px;
		padding: 0 2.5%;
	}


	#goto_lobby {
		display: inline-block;
		width: 100%;
		padding: 15px;
	}


	#reviews_container {
		height: 240px;
	}

	#reviews_content p {
		font-size: 1.25em;
	}

	/* SIGNUP PROGRESS */

	.signup_progress_item {
		width: 5.2em;
	}

	.signup_progress_icon {
		width: 2.5em;
		height: 2.5em;
	}

	.signup_progress_icon span.signup_progress_number {
		font-size: 1.75em;
		top: 50%;
	}

	div.signup_progress_step_description {
		font-size: 0.5625em;
	}

	div.signup_progress_step_separator .signup_progress_line {
		margin-top: 1.05em;
	}

	/* END SIGNUP PROGRESS */

	.setting_item_container {
		width: 95%;
	}

	.setting_item_container a#btn_go_to_lobby {
		width:  95%;
	}

	#page_wrapper.signup_landing .klarna_top_banner {
		margin-bottom: 2em;
	}

	div#action_container {
		margin: 0.5em 1em 0.5em 1em;
	}

	.coupon_voucher_link {
		display: block;
		margin-bottom: 0.5em;
	}

	.desktop_inline_link_divider {
		display: none !important;
	}

	div.page_wrapper.multiuser_licences div.price_table_container {
		margin-top: 0;
	}

	div.page_wrapper.multiuser_licences div.price_table_container #price_table {
		width: calc(100% - 2em);
	}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 380px) {

	#red_banner_container {
		width:310px;
	}

	#red_banner_text {
		left: 10px;
		right: 10px;
		top:5px;
		font-size: 16px;
	}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 340px) {

	#red_banner_container {
		width:290px;
	}

	#red_banner_text {
		left: 10px;
		right: 10px;
		top:5px;
		font-size: 15px;
	}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

	#red_banner_container {
		width:260px;
	}

	#red_banner_text {
		left: 10px;
		right: 10px;
		top:3px;
		font-size: 14px;
	}

}

/********************

	END MEDIA QUERIES

*********************/