@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500;700&family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* initial */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	line-height: 1;
}
body {
	color: var(--black-color);
	background-color: var(--white-color);
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 300;
}
ul {
	list-style: none;
}
a {
}
:root {
	--white-color: #FFFFFF;
	--black-color: #1A1A19;
	--lightgrey-color: #f4f2df;
	--lightergrey-color: #DEDEDE;
	--grey-color: #9C9C9C;
	--darkgrey-color: 262724;
	--red-color: #FD3A02;
	--green-color: #A71394;
	--lightgreen-bg-color: #BD4CAF;
	--lightergreen-bg-color: #D98BD0;
	--green-bg-color: #860D76;
	--darkgreen-bg-color: #5A084F;
	--darkgreen-transparent-bg-color: #5A084FE6;
	--orange-color: #EF0190;
	--lightorange-color: #F851B5;
	--grey-underline-color: #EEEEEE;
	--bg-thumb-backdrop: rgba(0, 0, 0, .2);
	--join-form-backdrop: rgba(0, 0, 0, .67);
	--join-radio-backgdrop: rgba(0, 0, 0, .8);
	--join-radio-border: #4D4D4D;
	--join-radio-color: #C9C9C9;
}
/* common */
/* typography */
h2 {
	margin-bottom: 14px;
	border-bottom: 2px solid var(--grey-underline-color);
	font-weight: 500;
	font-size: 20px;
	line-height: 34px;
	text-transform: uppercase;
}
h2 span {
	display: inline-block;
	padding-bottom: 9px;
	margin-bottom: -2px;
	border-bottom: 2px solid var(--green-color);
}
h2 strong {
	color: var(--green-color);
	font-weight: 800;
}
a {
	color: var(--black-color);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/* icons */
.icon {
	display: inline-block;
	height: 1em;
	width: 1em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	vertical-align: bottom;
}
.icon_svg {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 1em;
	mask-size: 1em;
}
.icon_burger {
	width: 1.57em;
	background-image: url("./burger.svg");
}
.icon_duration {
	background-image: url("./duration.svg");
}
.icon_photos {
	width: 1.3em;
	background-image: url("./photos.svg");
}
.icon_date {
	background-image: url("./date.svg");
}
.icon_star_full {
	background-image: url("./star_fill.svg");
}
.icon_star_empty {
	background-image: url("./star_stroke.svg");
}
.icon_arrow_circle {
	background-image: url("./arrow_right_circle.svg");
}
.icon_arrow_right {
	width: .56em;
	background-image: url("./arrow_right.svg");
}
/* buttons */
.btn {
	min-width: 80px;
	display: inline-flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	border: none;
	outline: none;
	border-radius: 6px;
	padding: 13px;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--black-color);
	background-color: var(--white-color);
	white-space: nowrap;
	font-size: 15px;
	cursor: pointer;
}
.btn_small {
	min-width: auto;
	padding: 13px 16px;
}
.btn_wide {
	width: 100%;
}
/* main page */
/* header */
.header,
.menu_header {
	width: 100%;
	padding: 14px 12px;
}
.main_header {
	min-height: 430px;
	padding: 0;
	background-image: url("./header_mobile.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	transition: background-image 1s ease-in-out;
}
.main_header.alternative {
	background-image: url("./header_mobile2.jpg");
}
.main_header nav,
.tube_header nav {
	position: fixed;
	width: 100%;
	padding: 14px 12px;
	transition: background-color .5s linear;
	z-index: 10;
}
.main_header.scrolling nav,
.tube_header.scrolling nav {
	background: var(--darkgreen-transparent-bg-color);
}
.tube_header {
	min-height: 68px;
	padding: 0;
}
.tube_header nav {
	background-color: var(--darkgreen-bg-color);
}
/* menu */
.header nav,
.header .main_menu .menu_header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.tube_header nav,
.tube_header .main_menu .menu_header {
	align-items: center;
}
.main_header .header_logo {
	margin-top: -8px;
}
.tube_header .header_logo {
	width: 140px;
	height: 50px;
}
.main_menu {
	display: none;
}
.main_menu.active {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 25;
	background-color: var(--darkgreen-bg-color);
}
.menu_items {
	width: 100%;
	height: 100%;
	background-color: var(--green-bg-color);
	text-align: center;
}
.menu_items a {
	display: block;
	width: 100%;
	padding: 8px 0 9px;
	background-color: var(--green-bg-color);
	color: var(--white-color);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
}
.menu_items a:hover,
.menu_items a.active {
	background-color: var(--lightgreen-bg-color);
}
.menu_items a.action {
	background-color: var(--orange-color);
}
.menu_items a.action:hover {
	background-color: var(--lightorange-color);
}
.burger_button {
	font-size: 14px;
}
/* subheader */
.subheader {
	padding: 12px 28px;
	background-color: var(--lightgrey-color);
}
.subheader p {
	color: var(--darkgrey-color);
	font-family: 'Josefin Sans';
	font-weight: 500;
	font-size: 15px;
	line-height: 19px;
	text-align: center;
}
.subheader p a {
	color: var(--orange-color);
	font-weight: 700;
}
.subheader p a:hover {
	text-decoration: underline;
}
/* main */
section {
	padding: 12px 22px;
}
/* thumbs */
.thumbs {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.thumb {
	position: relative;
	display: block;
	width: 100%;
	color: var(--black-color);
}
.thumb:hover {
	color: var(--black-color);
	text-decoration: none;
}
.thumb:hover:before,
.thumb:hover:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;	
}
.thumb:hover:before {
	background-color: var(--bg-thumb-backdrop);
}
.thumb:hover:after {
	background-image: url("./play_bg.svg");
	background-position: center center;
	background-repeat: no-repeat;
}
.thumb>img,
.redeem>img,
.thumb>video {
	display: block;
	width: 100%;
	height: auto;
}
.thumb video {
	clip-path: inset(-1px -1px);
}
/* popular updates */
.popular_updates .thumb video {
	aspect-ratio: 440/250;
	object-fit: cover;
}
.popular_updates .thumb_footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.popular_updates .thumb_footer.cta_button {
	margin-top: 12px;
}
.popular_updates .thumb_title {
	width: 100%;
	font-weight: 300;
	font-size: 16px;
	line-height: 34px;
}
.popular_updates .thumb_title strong {
	font-weight: 700;
	text-transform: uppercase;
}
.popular_updates .thumb_info,
.popular_updates .thumb_rating {
	font-weight: 300;
	font-size: 12px;
	color: var(--grey-color);
}
.popular_updates .thumb_rating .icon {
	margin: -2px 0 0 1px;
	font-size: 13px;
}
.popular_updates .thumb_info span:not(:last-child) {
	position: relative;
	margin-right: 10px;
	padding-right: 6px;
}
.popular_updates .thumb_info span:not(:last-child):after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: var(--lightergrey-color);
}
.popular_updates .thumb_block.cta_thumb {
	margin-bottom: -10px;
}
.btn_cta {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 7px 7px 7px 13px;
	border: 2px solid var(--green-color);
	border-radius: 16px;
	background-color: var(--green-color);
	color: var(--white-color);
	font-weight: 700;
	font-size: 19px;
}
.btn_cta i {
	font-size: 26px;
}
.btn_cta:hover {
	background-color: var(--white-color);
	color: var(--green-color);
	text-decoration: none;
}
.btn_cta:hover .icon_arrow_circle {
	background-image: url("./arrow_right_circle_invert.svg");
}
/* newest updates */
.newest_updates .thumbs {
	gap: 13px;
}
.newest_updates .thumb_title {
	font-weight: 800;
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
}
.newest_updates .thumb_aside {
	padding-top: 12px;
}
.newest_updates .thumb_description p {
	max-height: 116px;
	padding: 4px 0 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5; 
	-webkit-box-orient: vertical;
	font-weight: 300;
	font-size: 15px;
	line-height: 22px;
}
.newest_updates .thumb_description a {
	font-weight: 800;
	font-size: 18px;
	line-height: 28px;
	color: var(--green-color);
}
.newest_updates .thumb_description a:hover {
	color: var(--orange-color);
}
.newest_updates .thumb_block {
	padding-bottom: 16px;
	border-bottom: 2px solid var(--grey-underline-color);
}
.display_tablet,
.display_desktop {
	display: none;
}
.display_mobile {
	display: initial;
}
/* paging */
.paging {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 32px;
}
.btn_page {
	min-width: 34px;
	padding: 8px 10px;
	border: 2px solid var(--lightergreen-bg-color);
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	color: var(--black-color);
}
.btn_page:hover {
	background-color: var(--lightergreen-bg-color);
	color: var(--black-color);
	text-decoration: none;
}
.btn_page.active {
	border: 2px solid var(--green-color);
	background-color: var(--green-color);
	color: var(--white-color);
}
.btn_page_next {
	min-width: auto;
	padding: 8px 10px;
	font-weight: 500;
	font-size: 14px;
	text-transform: none;
}
.btn_page_next i {
	margin-left: 6px;
	margin-top: 2px;
	font-size: 9px;
}
/* bottom CTA */
.cta_block {
	margin-top: 16px;
	text-align: center;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
}
.cta_block strong {
	font-weight: 700;
}
.btn_cta_big {
	display: block;
	margin-top: 40px;
	border: 2px solid var(--orange-color);
	border-radius: 12px;
	white-space: normal;
	background-color: var(--orange-color);
	color: var(--white-color);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
}
.btn_cta_big:hover {
	border-width: 2px;
	background-color: var(--white-color);
	color: var(--orange-color);
	text-decoration: none;
}
.btn_cta_big strong {
	font-weight: 700;
}
/* join page */
body.join {
	background-image: url("./join_mobile_bg.jpg");
	background-position: top center;
	background-size: 100%;
	background-repeat: no-repeat;
}
.join_header {
	padding: 10px 10px 4px;
}
.join_header ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.join_header li {
	position: relative;
	padding: 0 .5em 0 1em;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	color: var(--white-color);
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.55);
}
.join_header li:not(:first-child):before {
	content: "•";
	position: absolute;
	left: 0;
}
.join_container {
	margin: 12px;
	padding: 0 16px 20px;
	background: var(--join-form-backdrop);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
	border-radius: 8px;
	color: var(--white-color);
}
.join_container .header_logo {
	display: block;
	width: 184px;
	height: 92px;
	margin: 0 auto;
}
.join_form {
	margin-top: 6px;
}
.join_form fieldset {
	padding: 12px 0;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, .34);
}
.join_form legend {
	margin: 0 auto;
	padding: 0 12px;
	text-align: center;
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.1em;
}
.join_form input:placeholder-shown,
.join_form input {
	padding: 10px 14px 10px 42px;
	width: 100%;
	border: 2px solid var(--white-color);
	border-radius: 8px;
	color: var(--black-color);
	background-color: var(--white-color);
	background-image: url("./icon_email.svg");
	background-position: center left 14px;
	background-repeat: no-repeat;
	font-family: 'Poppins';
	font-weight: 300;
	font-size: 14px;
}
.join_form input::placeholder {
	font-family: 'Poppins';
	font-weight: 300;
	font-size: 14px;
	text-transform: capitalize;
	color: #888888;
}
.join_form input:focus,
.join_form input:active,
.join_form input:hover,
.join_form input:not(:placeholder-shown):valid {
	outline: none;
	border: 2px solid var(--lightgreen-bg-color);
}
.join_form input:not(:focus):invalid {
	border: 2px solid var(--red-color);
}
.join_form input:focus:not(:placeholder-shown):invalid {
  border: 2px solid var(--red-color);
}
.join_form input:not(:focus):placeholder-shown:invalid,
.join_form input:focus:placeholder-shown {
	border: 2px solid var(--white-color);
}
.join_form input+span.error {
	padding-top: .5em;
	color: var(--red-color);
	font-size: 14px;
	display: none;
}
.join_form input:not(:focus):invalid+span.error {
	display: block;
}
.join_form input:invalid:placeholder-shown+span.error {
	display: none;
}
.plan_radio_btn input[type=radio] {
	display: none;
}
.plan_radio_btn input[type=radio]:checked+label {
	border: 2px solid var(--lightgreen-bg-color);
	color: var(--white-color);
	background: var(--lightgreen-bg-color);
}
.plan_radio_btn input[type=radio]:checked+label:before {
	border: 3px solid var(--white-color);
	background: var(--lightgreen-bg-color);
}
.plan_radio_btn label {
	position: relative;
	display: block;
	margin-bottom: 4px;
	padding: 10px 12px 10px 36px;
	border: 2px solid var(--join-radio-border);
	border-radius: 8px;
	color: var(--join-radio-color);
	background: var(--join-radio-backgdrop);
	font-weight: 700;
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}
.plan_radio_btn label:hover {
	border: 2px solid var(--lightgreen-bg-color);
	color: var(--lightgreen-bg-color);
	background: var(--join-radio-backgdrop);
}
.plan_radio_btn label:before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 12px;
	width: 6px;
	height: 6px;
	border: 3px solid var(--join-radio-color);
	border-radius: 50%;
	background-color: var(--join-radio-color);
}
.plan_radio_btn .label_offer {
	display: none;
}
.payment_radio_group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 9px;
}
.payment_radio_btn label {
	display: flex;
	justify-content: center;
	gap: 18px;
	width: 100px;
	padding: 12px;
	border: 2px solid var(--join-radio-border);
	border-radius: 8px;
	color: var(--join-radio-color);
	background: var(--join-radio-backgdrop);
}
.payment_radio_btn label:hover {
	border: 2px solid var(--lightgreen-bg-color);
}
.payment_radio_btn input[type=radio] {
	display: none;
}
.payment_radio_btn input[type=radio]:checked+label {
	border: 2px solid var(--lightgreen-bg-color);
	background-color: var(--lightgreen-bg-color);
}
.payment_radio_btn input[type=radio]:checked+label span {
	background-position-y: 20px;
}
.payment_radio_btn label span {
	display: inline-block;
	height: 20px;
	background-image: url("./payment_types.svg");
	background-size: 315px 40px;
	background-position-y: 0;
	cursor: pointer;
}
.payment_radio_btn [for=type-credit] span {
	width: 68px;
	background-position-x: 0;
}
.payment_radio_btn [for=type-bitcoin] span {
	width: 70px;
	background-position-x: -125px;
}
.payment_radio_btn [for=type-paypal] span {
	width: 59px;
	background-position-x: -256px;
}
.payment_radio_btn:hover label span {
	background-position-y: 20px;
}
.btn_continue {
	margin-top: 18px;
	padding: 9px;
	background-color: var(--orange-color);
	font-weight: 700;
	font-size: 20px;
	line-height: 30px;
	text-transform: capitalize;
	color: var(--white-color);
}
/* footer */
.footer_main {
	padding: 25px 50px;
}
.footer_main,
.footer_main p {
	color: var(--darkgrey-color);
	text-align: center;
	font-weight: 300;
	font-size: 11px;
	line-height: 18px;
}
.footer_main a {
	text-decoration: underline;
}
.footer_main a:hover {
	text-decoration: none;
	color: var(--green-color);
}
/* tablet */
@media (min-width: 1025px) {
	/* common */
	/* typography */
	h2 {
		margin-bottom: 20px;
		font-size: 24px;
		line-height: 34px;
	}
	/* header */
	.main_header {
		position: relative;
		min-height: 418px;
		padding: 14px 12px;
		background-image: none;
		transition: none;
		overflow: hidden;
	}
	/* Keep the desktop hero at its designed height, but let it zoom only
	   when the viewport becomes wider than the image. This removes the
	   white side borders on wide / maximized desktop windows. */
	.main_header:before {
		content: "";
		position: absolute;
		top: 58px;
		left: 0;
		right: 0;
		height: 360px;
		background-image: url("./header.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		pointer-events: none;
	}
	.tube_header {
		min-height: 58px;
	}
	.main_header.alternative {
		background-image: none;
	}
	.main_header nav,
	.tube_header nav {
		position: static;
		padding: 0;
		transition: none;
	}
	/* menu */
	.main_menu,
	.main_menu.active {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 58px;
		z-index: 25;
		background-color: #5A084F;
	}
	.main_header .main_menu .menu_header,
	.tube_header .main_menu .menu_header {
		display: none;
	}
	.tube_header .menu_items .header_logo {
		width: 144px;
		height: 38px;
	}
	.tube_header .menu_items .menu_logo a {
		background-color: #BD4CAF;
	}
	.menu_items {
		position: fixed;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 58px;
		background-color: #860D76;
		text-align: center;
	}
	.menu_items li {
		flex-grow: 1;
		height: 100%;
	}
	.menu_items a {
		background: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-size: 26px;
		line-height: 39px;
	}
	/* subheader */
	.subheader {
		padding: 14px 119px;
	}
	.subheader p {
		font-size: 20px;
		line-height: 28px;
	}
	/* main */
	section {
		padding: 32px 28px;
	}
	/* popular updates */
	.popular_updates.first_section {
		padding-top: 10px;
	}
	.popular_updates .thumbs {
		flex-wrap: wrap;
		gap: 6px 30px;
		max-height: 540px;
		margin-bottom: -30px;
	}
	.popular_updates.tube_thumbs {
		padding-bottom: 6px;
	}
	.popular_updates .thumb_block {
		width: calc(25% - 24px);
	}
	.popular_updates .thumb_title {
		padding-bottom: 6px;
		font-size: 18px;
		line-height: 34px;
		letter-spacing: -1px;
	}
	.popular_updates .thumb_info,
	.popular_updates .thumb_rating {
		font-size: 13px;
	}
	.popular_updates .thumb_info {
		max-width: 60%;
	}
	.popular_updates .thumb_info span {
		display: inline-block;
		margin-bottom: 10px;
		padding-right: 9px!important;
		margin-right: 8px!important;
	}
	.popular_updates .thumb_info span:after {
		display: none!important;
	}
	.popular_updates .thumb_info span:first-child:after {
		display: block!important;
	}
	.popular_updates .thumb_rating {
		width: 85px;
	}
	.popular_updates .thumb_footer.cta_button {
		margin: 12px 0 16px;
	}
	.btn_cta {
		padding: 7px 7px 7px 16px;
		font-size: 16px;
	}
	.btn_cta i {
		font-size: 24px;
	}
	/* newest updates */
	.newest_updates .thumbs {
		gap: 20px;
	}
	.newest_updates .thumb_block {
		display: flex;
		gap: 26px;
	}
	.newest_updates .thumb_block > * {
		flex: 1 1 50%;
	}
	.newest_updates .thumb_title {
		font-size: 44px;
		line-height: 34px;
	}
	.newest_updates .thumb_aside {
		padding-top: 10px;
	}
	.newest_updates .thumb_description p {
		display: block;
		max-height: unset;
		padding: 24px 0 8px;
		font-weight: 300;
		font-size: 17px;
		line-height: 25px;
	}
	.newest_updates .thumb_description a {
		font-size: 20px;
	}
	.newest_updates .thumb_block {
		padding-bottom: 20px;
	}
	.newest_updates .thumb_block:last-child {
		border-bottom: none;
	}
	/* paging */
	.paging {
		gap: 8px;
	}
	.btn_page {
		min-width: 44px!important;
		padding: 12px;
		font-size: 16px;
	}
	.btn_page_next {
		padding: 12px;
		font-size: 16px;
	}
	.btn_page_next i {
		margin-left: 8px;
		margin-top: 0;
		font-size: 11px;
	}
	/* bottom CTA */
	.cta_block {
		margin-top: 0;
		font-size: 24px;
		line-height: 32px;
	}
	.cta_block p {
		margin-bottom: 8px;
	}
	.btn_cta_big {
		width: fit-content;
		margin: 34px auto 0;
		padding: 24px 72px;
		border: 3px solid var(--orange-color);
		border-radius: 20px;
		font-size: 48px;
	}
	.btn_cta_big:hover {
		border-width: 3px;
	}
	/* join page */
	body.join {
		background-image: url("./join_bg.jpg");
		background-size: 130%;
	}
	.join_header {
		padding: 22px;
	}
	.join_header li {
		padding: 0 1em 0 1.3em;
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
	}
	.join_container {
		max-width: 660px;
		margin: 0 auto 26px;
		padding: 6px 40px 30px;
		border-radius: 10px;
	}
	.join_container .header_logo {
		display: block;
		width: 222px;
		height: 113px;
	}
	.join_form {
		margin-top: 10px;
	}
	.join_form fieldset {
		padding: 20px 0;
		border-top: 1px solid rgba(255, 255, 255, .34);
	}
	.join_form legend {
		padding: 0 24px;
		font-weight: 300;
		font-size: 17px;
		line-height: 26px;
	}
	.join_form .email_input {
		max-width: 320px;
		margin: 0 auto;
	}
	.plan_radio_btn label {
		margin-bottom: 5px;
		padding: 13px 15px 13px 50px;
		font-weight: 700;
		font-size: 20px;
		line-height: 30px;
	}
	.plan_radio_btn label:before {
		left: 22px;
	}
	.plan_radio_btn .label_offer {
		display: inline-block;
		margin-left: 20px;
		padding: 3px 10px;
		border-radius: 6px;
		background-color: var(--lightorange-color);
		color: var(--white-color);
		font-weight: 400;
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.payment_radio_group {
		justify-content: center;
		gap: 8px;
	}
	.payment_radio_btn label {
		position: relative;
		display: flex;
		justify-content: center;
		gap: 18px;
		width: 160px;
		padding: 15px 0 15px 20px;
		border: 2px solid var(--join-radio-border);
		border-radius: 8px;
		color: var(--join-radio-color);
		background: var(--join-radio-backgdrop);
	}
	.payment_radio_btn label:before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 15px;
		width: 6px;
		height: 6px;
		border: 3px solid var(--join-radio-color);
		border-radius: 50%;
		background-color: var(--join-radio-color);
	}
	.payment_radio_btn input[type=radio]:checked+label:before {
		border-color: var(--white-color);
		background-color: var(--lightgreen-bg-color);
	}
	.payment_radio_btn input[type=radio]:checked+label span {
		background-position-y: 26px;
	}
	.payment_radio_btn label span {
		height: 26px;
		background-size: 415px 52px;
	}
	.payment_radio_btn [for=type-credit] span {
		width: 90px;
		background-position-x: 0;
	}
	.payment_radio_btn [for=type-bitcoin] span {
		width: 92px;
		background-position-x: -164px;
	}
	.payment_radio_btn [for=type-paypal] span {
		width: 78px;
		background-position-x: -337px;
	}
	.payment_radio_btn:hover label span {
		background-position-y: 26px;
	}
	.btn_continue {
		margin-top: 18px;
		padding: 9px;
		border-radius: 8px;
		font-size: 24px;
		line-height: 36px;
	}
	/* footer */
	.footer_main,
	.footer_main p {
		font-size: 12px;
		line-height: 22px;
	}
	.display_mobile,
	.display_desktop {
		display: none;
	}
	.display_tablet {
		display: initial;
	}
}
/* desktop */
@media (min-width: 1290px) {
	/* common */
	/* typography */
	h2 {
		margin-bottom: 24px;
		font-size: 28px;
		line-height: 34px;
	}
	/* header */
	.main_header {
		position: relative;
		min-height: 608px;
	}
	.main_header:before {
		top: 68px;
		height: 540px;
	}
	.tube_header .menu_items .header_logo {
		width: 180px;
		height: 62px;
	}
	/* menu */
	.main_menu,
	.main_menu.active {
		height: 68px;
	}
	.menu_items {
		height: 68px;
	}
	.menu_items a {
		font-size: 30px;
		line-height: 45px;
	}
	/* subheader */
	.subheader {
		padding: 22px 300px;
	}
	.subheader p {
		font-size: 25px;
		line-height: 34px;
	}
	/* main */
	section {
		padding: 36px 30px;
	}
	/* popular updates */
	/* The masonry-like flex layout is designed around a 1920px canvas
	   (four ~440px columns). Cap it there so ultra-wide screens get
	   clean white side margins instead of creating extra off-screen columns. */
	.popular_updates {
		width: 100%;
		max-width: 1920px;
		margin-inline: auto;
	}
	.popular_updates.first_section {
		padding-top: 18px;
	}
	.popular_updates .thumbs {
		gap: 14px 32px;
		max-height: 660px;
		margin-bottom: -30px;
	}
	.popular_updates.tube_thumbs {
		padding-bottom: 16px;
	}
	.popular_updates.tube_thumbs .thumbs {
		gap: 22px 32px;
	}
	.popular_updates .thumb_block {
		width: calc(25% - 24px);
	}
	.popular_updates .thumb_title {
		font-size: 20px;
		line-height: 34px;
		letter-spacing: normal;
	}
	.popular_updates .thumb_footer.cta_button {
		margin: 12px 0 16px;
	}
	.popular_updates.tube_thumbs .thumb_footer.cta_button {
		margin: 12px 0 6px;
	}
	.btn_cta {
		padding: 7px 7px 7px 16px;
		border-radius: 20px;
		font-size: 25px;
		font-weight: 600;
	}
	.btn_cta i {
		font-size: 28px;
	}
	/* newest updates */
	.newest_updates {
		max-width: 1400px;
		margin-inline: auto;
	}
	.newest_updates .thumbs {
		gap: 24px;
	}
	.newest_updates .thumb_block {
		gap: 30px;
	}
	.newest_updates .thumb_title {
		font-size: 48px;
	}
	.newest_updates .thumb_aside {
		padding-top: 16px;
	}
	.newest_updates .thumb_description p {
		padding: 32px 0 12px;
		font-size: 20px;
		line-height: 28px;
	}
	.newest_updates .thumb_description a {
		font-size: 24px;
	}
	.newest_updates .thumb_block {
		padding-bottom: 24px;
	}
	/* paging */
	.paging {
		margin-top: 26px;
	}
	/* bottom CTA */
	.cta_block {
		margin-top: 8px;
		font-size: 26px;
		line-height: 32px;
	}
	.cta_block p {
		margin-bottom: 8px;
	}
	.btn_cta_big {
		margin: 42px auto 0;
		border: 4px solid var(--orange-color);
		font-size: 54px;
	}
	.btn_cta_big:hover {
		border-width: 4px;
	}
	/* join page */
	body.join {
		background-size: 100%;
	}
	.join_container {
		margin: 0 auto 140px;
	}
	.display_tablet,
	.display_mobile {
		display: none;
	}
	.display_desktop {
		display: initial;
	}
}