.primary {
	--el-color: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
}
.teal {
	--el-color: hsl(var(--color-teal-h) var(--color-teal-s) var(--color-teal-l));
}
.neptune {
	--el-color: var(--color-neptune);
}
.tan {
	--el-color: var(--color-tan);
}
.dove {
	--el-color: var(--color-dove);
}
.silver {
	--el-color: var(--color-silver);
}
.dark {
	--el-color: var(--color-dark);
}

a.primary:hover:not(.outline) {
	--el-color: hsl(var(--color-text-h) var(--color-text-s) var(--color-text-l));
}
.button.teal:hover {
	--color-teal-l: 47%;
}


/* homepage carousel */

.swiper-horizontal > .slider-scrollbar {
	position: absolute;
	left: 1%;
	bottom: 3px;
	z-index: 50;
	height: 5px;
	width: 98%;
}
.swiper-scrollbar {
	border-radius: 10px;
	position: relative;
	-ms-touch-action: none;
	background: rgba(0,0,0,.1);
	background: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 5%);
}
.swiper-scrollbar-drag {
	height: 100%;
	width: 100%;
	position: relative;
	background: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 75%);
	border-radius: 10px;
	left: 0;
	top: 0;
}

input#nav-toggle {
	position: absolute;
	height: 0;
	width: 0;
	overflow-clip: 0,0,0,0;
}
.submit {
	text-align: center;
}
.hidden {
	display: none;
}



/*.playlist-grid .image::after {
	-webkit-animation: scale 0.2s ease-in-out .525s;
	-moz-animation: scale 0.2s ease-in-out .525s;
	animation: scale 0.2s ease-in-out .525s;
}*/

/* account pages */

/*.page-account {

}
.page-account .heading {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.page-account .heading h4 {
	color: var(--color-primary);
}
.page-account .heading h4::before,
.page-account .heading h4::after {
	content: '\00b7';
	display: inline-block;
	padding: 0 0.3em;
	font-size: 2.5em;
	line-height: 0;
	transform: translate(.5em, .175em);
}
.page-account .heading h4::after {
	transform: translate(-.5em, .175em);
	margin-inside: 0;
}
.page-account .heading p {
	width: min(38em, 90vw);
	color: var(--color-dark);
	font-size: 20px;
	text-align: center;
}
.heading .selector {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 30px auto;
}
.heading .selector a {
	margin: auto 1rem;
}
.page-account .preview-gallery {
	width: 1390px;
	max-width: 1390px;
	grid-template-columns: repeat(4, 1fr);
}
.page-account .preview-gallery > a,
.page-account .preview-gallery > p {
	grid-column: 1 / -1;
	width: auto;
	text-align: center;
}
.page-account .preview-gallery > a.button {
	width: 150px;
	text-align: center;
}

.explore {
	width: var(--inter-width);
	max-width: 1280px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40px;
	margin: 3.2rem auto;
}
.explore .cta-box {
	aspect-ratio: 20 / 17;
	width: min(400px, 90vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .16);
}
*/
/*
.explore .cta-box.train {
	background-image: var(--backdrop-image);
}
.explore .cta-box.learn-balance {
	background-image: var(--backdrop-image);
}
.explore .cta-box.cta-h-p {
	padding: 1rem;
	justify-content: flex-start;
}
.explore .cta-box.cta-h-p-b {
	padding: 1rem;
	justify-content: flex-start;
}
.explore .cta-box.cta-h-p-b .button {
	margin-top: auto;
}
.explore .cta-box h3 {
	font-size: 35px;
}
.explore .cta-box .button {
	min-width: 50%;
}
.explore .cta-box .image {
	width: 100%;
	height: 50%;
}

.cta-box.cta-i-h-p-b {
	background-color: var(--color-white);
}
.cta-box.cta-i-h-p-b .content {
	width: 100%;
	height: 50%;
	padding-bottom: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}
.explore .cta-box.cta-i-h-p-b h3 {
	color: var(--color-teal);
	font-size: 25px;
}
.explore .cta-box.cta-i-h-p-b p {
	color: var(--color-primary);
	font-size: 14px;
}*/
/*
section[class^='chosen-videos'] {
	position: relative;
	padding: 80px;
}
section[class^='chosen-videos'] h2 {
	color: var(--color-text);
	margin: 1em auto;
}
section[class^='chosen-videos'] .preview-track {
	padding: 50px 0;
	column-gap: 2rem;
}
.chosen-videos-1 {
	background-color: #e2e5e4;
}
.chosen-videos-2 {
	background-color: var(--color-background);
}
.chosen-videos-3 {
	background-color: #fdfcfa;
}*/

.wide-boxed.three-fold > h2 {
	font-size: 128px;
	margin: 0 auto 0.5em;
}

/* playlists */
/*
.playlist-selector {
	position: relative;
	width: var(--inter-width);
	max-width: 1430px;
	margin: 5rem auto;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color-overlay);
}*/
/*
!* playlist selector segment *!
.playlist-selector input[type="checkbox"],
.playlist-selector input[type="radio"] {
	position: absolute;
	visibility: hidden;
	opacity: 0;
}
.playlist-selector > label {
	position: relative;
	display: inline-block;
	color: var(--color-primary);
	margin-right: 4em;
	font-stretch: normal;
	line-height: 2;
	height: 2em;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color .35s ease-in-out,
				border-color .25s ease-out;
}
.playlist-selector > label:hover {
	color: var(--color-teal);
}
.playlist-selector > label::after {
	content: attr(data-count);
	position: absolute;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-white);
	background-color: var(--color-primary);
	transform: translate(0, -10px);
	transition: all .35s ease-in-out;
}
.playlist-selector > label:hover::after {
	background-color: var(--color-teal);
}
.playlist-selector input[type="checkbox"]:checked + label,
.playlist-selector input[type="radio"]:checked + label {
	color: var(--color-teal);
	height: 2em;
	border-bottom: 2px solid;
}
.playlist-selector input[type="checkbox"]:checked + label::after,
.playlist-selector input[type="radio"]:checked + label::after {
	background-color: var(--color-teal);
}*/
/* playlist commands segment */
/*

.playlist-selector ul {
	margin: 0 0 0 auto;
	display: flex;
	line-height: 2;
	padding: 0;
	list-style: none;
}
.playlist-selector ul li {
	position: relative;
	padding-left: 3.5em;
}
.playlist-selector ul li.add-playlist {
	color: var(--color-primary);
	padding-right: 0.5em;
	transition: all .15s ease-out .525s;
}
.playlist-selector ul li.add-playlist span {
	cursor: pointer;
}
.playlist-selector ul li.add-playlist.open {
	transition: all .15s ease-out 0s;
}
.playlist-selector ul li.add-playlist.open,
.playlist-selector ul li.add-playlist:focus-within {
	background: var(--color-white);
	box-shadow: var(--shadow-default);
}
.playlist-selector ul li.add-playlist::after {
	background-color: var(--color-primary);
	-webkit-mask-image: url('/assets/img/icon-playlist.svg');
	mask-image: url('/assets/img/icon-playlist.svg');
}
.playlist-selector ul li.how-to {
	color: var(--color-tan);
}
.playlist-selector ul li.how-to::after {
	left: 1.5em;
	background-color: var(--color-tan);
	-webkit-mask-image: url('/assets/img/icon-info.svg');
	mask-image: url('/assets/img/icon-info.svg');
}
.playlist-selector ul li > div {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-height: 0;
	overflow: hidden;
	z-index: 9;
	color: initial;
	background-color: var(--color-white);
	right: 0;
	padding: 0 20px 0;
	min-width: 300px;
	box-shadow: var(--shadow-dropdown);
	justify-content: space-evenly;
	transition: max-height .325s ease-in .2s,
				padding .3s ease-out .2s;
}
.playlist-selector ul li > div *:not(label) {
	opacity: 0;
	transition: opacity .2s ease-in-out .325s;
}
.playlist-selector ul li > div h5 {
	color: var(--color-primary);
	z-index: 10;
	align-self: baseline;
	font-size: 17px;
	font-weight: 500;
	font-family: 'Avenir Medium', sans-serif;
}
.playlist-selector ul li > div .floating-label {
	margin-top: 0;
}
.playlist-selector ul li div a {
	margin: 2em auto 0;
	width: 12em;
}
.playlist-selector ul li div p {
	line-height: 1.35;
	text-align: center;
}
.playlist-selector ul li.open > div,
.playlist-selector ul li:focus-within > div {
	max-height: 30vh;
	padding: 10px 20px;
	transition: max-height .325s ease-in .2s,
				padding .3s ease-out .1s;
}
.playlist-selector ul li.open > div *:not(label) {
	opacity: 1;
	transition: opacity .2s ease-in-out .325s;
}
.playlist-selector ul li > a {
	color: inherit;
	text-decoration: inherit;
}
.playlist-selector ul li::after {
	content: "";
	position: absolute;
	left: .5em;
	width: 3em;
	height: 2em;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 0 center;
	mask-position: 0 center;
	top: 0;
	transform: scale(.8);
}
*/


.chosen-mix {
	width: var(--full-width);
	max-width: var(--outer-width);
	margin: auto;
	padding: 0 61px 80px;
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	grid-template-rows: auto 1fr 1fr;
	grid-gap: 44px;
	grid-auto-flow: column;
}
.chosen-mix h2 {
	grid-column: 1 / -1;
	color: var(--color-text);
	font-size: 50px;
}
.chosen-mix .ad-box {
	width: 1058px;
	grid-row-end: span 2;
	display: flex;
	box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .16);
}
.chosen-mix .ad-box > div {
	width: 50%;
	padding: 100px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	background-color: var(--color-white);
}
.chosen-mix .ad-box .content p {
	width: min(65%, 400px);
	font-size: 20px;
}


/* my profile */

.profile {
	width: var(--inter-width);
	max-width: 1150px;
	margin: 75px auto;
	display: grid;
	grid-template-columns: repeat(var(--column-count-3), 1fr);
	grid-gap: 50px;
}
div[class^="profile-"] {

}
.profile-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1.86;
	height: 203px;
	padding: 2rem;
	background-color: var(--color-white);
	box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .16);
}
.profile-box p {
	margin: 0;
}
.profile-box span {
	display: block;
}
.profile-info {
	grid-column-end: span 2;
}
.profile-info .text {
	height: 2.5em;
	margin: 1.5em 0;
	color: var(--color-primary);
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-primary);
}
[contenteditable="true"]:active,
[contenteditable="true"]:focus{
	border:none;
	outline:none;
	border-bottom: 1px dashed;
	cursor: text;
}
.profile-sheet {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .16);
}
.profile-sheet .title {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 18px;
	font-family: 'Avenir Medium', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	background-color: #e2e5e4;
}
.profile-sheet .info {
	padding: 0 18px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
.profile-sheet .info a {
	white-space: nowrap;
	text-transform: uppercase;
}
.profile-sheet .info a#terminate {
	color: var(--color-dark);
}
.profile-sheet .info .button {
	margin-inline-start: 12em;
}

/* reactivate/upgrade membership */

.membership-plans {
	width: var(--inter-width);
	max-width: var(--stats-width);
	margin: 5rem auto;
	display: flex;
	justify-content: center;
	grid-gap: 55px;
}

.plan-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	max-width: 377px;
	height: 444px;
	padding: 3.5rem 2rem;
	text-align: left;
	text-transform: uppercase;
	background-color: var(--color-white);
	box-shadow: var(--shadow-default);
}
.plan-card h3 {
	font-family: 'Avenir Medium', sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-align: left;
	letter-spacing: normal;
}
.plan-card h3 span {
	font-size: 16px;
	color: var(--color-text);
	text-transform: initial;
	display: block;
	text-align: center;
	margin: .5em auto;
}
.plan-card p {
	font-family: 'Avenir Medium', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.63;
}

.popup .form.prefs {
	padding: 70px 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}
.popup .form.prefs h3 {
	font-size: 64px;
}
.popup .form.prefs h5 {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 0;
}
.popup .form.prefs fieldset {
	position: relative;
	width: 100%;
	padding: 0.35em 0 0.625em;
	margin: 3rem 0 1rem;
	text-align: left;
}
.popup .form.prefs fieldset p {
	margin: 0;
}
.popup .form.prefs legend {
	display: block;
	color: var(--color-primary);
	text-transform: uppercase;
}
.popup .form.prefs label {
	position: relative;
	display: inline-block;
	margin: .3em 0 .3em 0;
	padding: .4em 1em .4em 2.1em;
	color: var(--color-dark);
	font-size: 14px;
	border: 1px solid var(--color-silver);
	border-radius: 2em;
	cursor: pointer;
}
.popup .form.prefs input[type="checkbox"] {
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	display: none;
}
.popup .form.prefs input[type="checkbox"] + label::before {
	content: '';
	position: absolute;
	left: 0.5em;
	top: 0.45em;
	display: block;
	width: 1.0714em;
	height: 1.0714em;
	border: 1px solid var(--color-silver);
	border-radius: 50%;
	opacity: .6;
	-webkit-transition: all .12s, border-color .08s;
	transition: all .12s, border-color .08s;
}
.popup .form.prefs input[type="checkbox"] + label:hover::before {
	background-color: rgba(135, 192, 181, 0.5);
	border-color: var(--color-secondary);
}
.popup .form.prefs input[type="checkbox"]:checked + label:hover::before {
	background-color: transparent;
}
.popup .form.prefs input[type="checkbox"]:checked + label::before {
	width: .5em;
	top: 0.2em;
	left: 0.8em;
	border-radius: 0;
	opacity: 1;
	border-color: var(--color-secondary);
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	height: 1.214em;
}
.popup .form.prefs .step {
	margin-top: auto;
	color: var(--color-primary);
	font-family: 'Analogue', serif;
	font-size: 2rem;
	letter-spacing: .2em;
}
.popup .form.prefs .step sup {
	color: var(--color-silver);
	font-size: 1.2rem;
}
.popup .form.prefs .submit {
	margin-top: 10px;
	text-transform: uppercase;
}

.giftcard {
	width: var(--inter-width);
	max-width: var(--profile-width);
	margin: 5em auto;
}
.giftcard .features {
	display: flex;
	justify-content: space-between;
	margin-bottom: 69px;
	background-color: var(--color-white);
	box-shadow: var(--shadow-default);
}
.giftcard .features .image {
	height: 426px;
	aspect-ratio: 1 / 1;
}
.features ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0 0 5em;
	margin: 0;
	list-style: none;
	text-align: left;
	font-family: 'Avenir Medium', sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-primary);
}
.features li {
	position: relative;
}
.features li::before {
	content: "";
	position: absolute;
	display: block;
	width: 2em;
	height: 2em;
	left: -3em;
	top: -0.4em;
	background: #444444;
	-webkit-mask-image: url('/assets/img/icon-validation.svg');
	mask-image: url('/assets/img/icon-validation.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.features li:not(:last-child) {
	margin-bottom: 1em;
}
.giftcard .plans {
	display: flex;
	justify-content: space-between;
}
.giftcard .plan-card {

}
.giftcard .plan-card {
	height: min-content;
	padding: 2rem;
}
.plan-card h3 strong {
	font-family: 'Analogue', serif;
	font-size: 80px;
	display: block;
	font-weight: normal;
	letter-spacing: .2em;
	margin: 0 0 0.4em;
}
.plan-card .price {
	width: 100%;
	font-size: 20px;
}
.process {
	background-color: #fdfcfa;
}
.process .steps {
	display: flex;
	width: var(--inter-width);
	max-width: var(--profile-width);
	margin: auto;
	padding: 3rem 0;
	text-align: center;
	justify-content: space-between;
}
.process .steps .step {
	min-width: 377px;
	padding: 2rem;
}
.process .steps .step h3 {
	font-family: 'Avenir Medium', sans-serif;
	font-size: 24px;
	white-space: nowrap;
	margin: 1em auto;
}
.process .steps .step p {
	font-family: 'Avenir Medium', sans-serif;
	font-size: 16px;
	font-weight: 500;
	max-width: 320px;
	margin: auto;
}

.heading.regular h1 {
	font-size: 64px;
}
/* playlist edit */
.current-video {
	width: var(--player-width);
	max-width: var(--player-width);
	margin: auto;
}
.current-video .title {
	background-color: var(--color-white);
	height: 5rem;
	display: flex;
	align-items: center;
}
.current-video .title h4 {
	margin-left: 2em;
	color: var(--color-primary);
	font-size: 20px;
	letter-spacing: .05em;
}
.current-video .title .commands {
	margin-left: auto;
	margin-right: 40px;
}
.current-video .player {
	position: relative;
	aspect-ratio: 16/9;
}
.select {
	position: relative;
	width: 100%;
	cursor: pointer;
}
.select::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 15px;
	display: block;
	width: 10px;
	height: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: transparent var(--color-primary) var(--color-primary) transparent;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0s ease-in-out;
	z-index: 1;
}
.select:focus-within::after {
	top: 22px;
	transform: rotate(225deg);
	/*transform: rotate(-135deg);*/
}
select {
	appearance: none;
	margin: 0;
	padding: 0 1em 1em 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--color-primary);
	outline: none;
}
select::after {
}
select option {
	padding: 1em;
}

.current-video .details > * {
	display: inline-block;
	margin: auto 1em auto 0;
}
.current-video .extra {
	display: flex;
	justify-content: space-between;
}
.current-video .summary {
	padding: 1.3rem 4rem;
}
.current-video .preview {
	position: relative;
	height: 279px;
	aspect-ratio: 16/9;
}
.current-video .preview::after {
	content: 'se intro video';
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: block;
	padding: 5px 10px;
	font-size: 14px;
	text-transform: uppercase;
	background-color: var(--color-background);
	border-radius: 5px;
}
.current-video .playlist-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*line-height: 3;*/
	color: var(--color-primary);
}
.playlist-controls .video-name {
	position: relative;
	line-height: 2;
	padding-right: 3em;
	text-transform: uppercase;
	border-bottom: 1px solid;
	cursor: text;
}
.playlist-controls .video-name::after {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	display: block;
	height: 2em;
	width: 2em;
	background-color: var(--color-primary);
	-webkit-mask-image: url('/assets/img/icon-pencil.svg');
	mask-image: url('/assets/img/icon-pencil.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	cursor: pointer;
}
.playlist-controls .video-name:focus {
	/*text-transform: initial;*/
	border-bottom-style: dashed;
}
.playlist-controls label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.playlist-controls label input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.playlist-controls label .toggle {
	position: relative;
	padding-right: 80px;
	/* height: 48px; */
	display: inline-flex;
	align-items: center;
}
label .toggle::before {
	position: absolute;
	content: url('/assets/img/switch-off.svg');
	cursor: pointer;
	top: 50%;
	right: 0;
	width: 68px;
	height: 31px;
	line-height: 36px;
	text-indent: 37px;
	background-color: #c33b09;
	border-radius: 16px;
	transform: translateY(-50%);
}

label .toggle::after {
	--top: calc((50% + 3px) * -1);
	position: absolute;
	content: "";
	height: 25px;
	width: 25px;
	right: 40px;
	top: calc(50% + 3px);
	background-color: var(--color-background);
	-webkit-transition: .17s;
	transition: .17s;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(var(--top));
}

label input:checked + .toggle::before {
	content: url('/assets/img/switch-on.svg');
	text-indent: 15px;
	background-color: #6eb3a5;
}

label input:focus + .toggle::before {
	box-shadow: 0 0 1px #6eb3a5;
}

label input:checked + .toggle::after {
	-webkit-transform: translateX(37px) translateY(var(--top));
	-ms-transform: translateX(37px) translateY(var(--top));
	transform: translateX(37px) translateY(var(--top));
}


.playlist-controls .video-delete {
	position: relative;
	padding-right: 2em;
	text-align: right;
	font-size: 18px;
	line-height: 3;
	text-decoration: none;
}
.playlist-controls .video-delete::after {
	content: "";
	position: absolute;
	top: .4em;
	right: 0;
	display: flex;
	height: 2em;
	width: 2em;
	background-color: var(--color-primary);
	-webkit-mask-image: url('/assets/img/icon-trash.svg');
	mask-image: url('/assets/img/icon-trash.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* video list */
.video-list {
	width: var(--player-width);
	max-width: var(--player-width);
	margin: 0 auto 70px;
}
.video-entry {
	display: flex;
	height: 154px;
	margin: 1.3rem 0;
	flex-direction: row;
	background-color: var(--color-white);
	border: 1px solid var(--color-white);
	box-sizing: content-box;
}
.video-entry.current {
	background-color: #e2e5e4;
	border: 1px solid #b4b4b4;
	box-shadow: var(--shadow-default);
	/*cursor: move;*/
}
.video-entry .image {
	width: 241px;
	height: 154px;
	aspect-ratio: 14/9;
}
.video-entry .info {
	padding: 1rem 2rem;
}
.video-entry h4 {
	margin: 0;
	text-align: left;
	font-family: 'Avenir', sans-serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: .08em;
	color: var(--color-primary);
	transform: none;
}
.video-entry .info p {
	--line-count: 3;
	display: -webkit-box;
	-webkit-line-clamp: var(--line-count);
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.video-entry .controls {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	margin-left: auto;
}
.video-entry .controls > * {
	display: flex;
	height: 24px;
	width: 84px;
	background-color: var(--color-overlay);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
}
.video-entry .controls > :hover {
	background-color: var(--color-primary);
}
.video-entry .controls .del {
	-webkit-mask-image: url('/assets/img/icon-trash.svg');
	mask-image: url('/assets/img/icon-trash.svg');
}
.video-entry .controls .up {
	-webkit-mask-image: url('/assets/img/icon-arrow-up.svg');
	mask-image: url('/assets/img/icon-arrow-up.svg');
}
.video-entry .controls .down {
	-webkit-mask-image: url('/assets/img/icon-arrow-down.svg');
	mask-image: url('/assets/img/icon-arrow-down.svg');
}
.video-entry:first-of-type .controls .up,
.video-entry:last-of-type .controls .down {
	cursor: default;
	opacity: .35;
}
.video-entry:first-of-type .controls .up:hover,
.video-entry:last-of-type .controls .down:hover {
	background-color: var(--color-overlay)
}
.playlists-roll {
	padding: 10px 0 80px;
	background-color: #E2E5E4;
}
.playlists-roll h2 {
	font-size: 50px;
	margin: 1em auto 1.5em;
	color: var(--color-text);
}
.playlist-track {
	column-gap: 39px;
}
.playlists-roll .playlist {
	aspect-ratio: 33/29.5;
}



.discount-code a {
	position: relative;
}

.discount-code a .tooltiptext {
	position: absolute;
	width: 12em;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	padding: .3em 1em;
	text-align: center;
	text-transform: initial;
	color: var(--color-white);
	background-color: var(--color-dark);
	border-radius: 6px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 1;
}

.discount-code a .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.discount-code a:hover .tooltiptext {
	visibility: visible;
	opacity: .9;
}


.notifyjs-metro-base {
	position: relative;
	min-height: 52px;
	color:#444;
}

.notifyjs-metro-base .image {
	display: table;
	position: absolute;
	height: auto;
	width: auto;
	left: 25px;
	top: 50%;

	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.notifyjs-metro-base .text-wrapper {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 0;
	clear: both;
	font-family: 'Segoe UI', sans-serif;
}

.notifyjs-metro-base .title {
	font-size: 15px;
	font-weight: bold;
}

.notifyjs-metro-base .text {
	font-size: 12px;
	font-weight: normal;
	vertical-align: middle;
}


/* notification bar */
.notification-bar {
	height: 40px;
	width: 100vw;
	left: 0;
	right: 0;
	top: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: 'Avenir Medium', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--color-white);
	background-color: var(--color-accent);
}
.notification-bar + header.site-header {
	top: 30px;
}
.notification-bar + header.site-header.active {
	top: 0;
}
.nb-close {
	position: absolute;
	top: 7px;
	right: 60px;
	width: 25px;
	height: 25px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	transform: rotate(45deg);
	transition: transform .85s ease-in-out;
}
.nb-close::before,
.nb-close::after {
	position: absolute;
	top: 11px;
	content: '';
	display: flex;
	height: 1px;
	width: 23px;
	background-color: var(--color-white);
	z-index: 15;
}
.nb-close::after {
	transform: rotate(90deg);
}
.nb-close:active {
	transform: rotate(270deg);
}
.nb-close:active::before,
.nb-close:active::after {
	width: 1px;
}


/*.selected .label {
	margin: auto 1ch;
	border-bottom: 1px solid var(--color-overlay-bd);
}
.params {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: auto 1em;
	font-family: 'Avenir Medium', sans-serif;
	font-size: 14px;
	font-weight: 500;
}
.param {
	color: var(--color-text);
	position: relative;
	margin: auto 0 auto 3em;
	cursor: pointer;
	justify-self: left;
}
.param::before {
	content: '';
	position: absolute;
	left: -2em;
	top: -0.1em;
	height: 1.5em;
	width: 1.5em;
	background-color: var(--color-text);
	background-image: url('/assets/img/switch-off.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.8em;
	border-radius: 50%;
}
.param:hover::before {
	background-color: var(--color-primary);
}*/

.button[disabled] {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}
/*.button[disabled]:hover {
	color: inherit;
	background-color: inherit;
}*/
body.courses .preview-gallery {
	grid-template-columns: repeat(var(--column-count-4), 1fr);
	max-width: var(--inter-width);
	width: fit-content;
	margin-top: 5rem;
}

@media screen and (max-width: 1490px) {
	.dishes-grid {
		--column-count-5: 4;
	}
	.preview-gallery {
		--column-count-4: 3;
	}
	.playlist-grid {
		--column-count-4: 3;
	}
}
@media screen and (max-width: 1320px) {
	.dishes-grid {
		--column-count-5: 3;
	}
	.preview-gallery {
		--column-count-4: 3;
	}
	.explore {
		--column-count-3: 2;
	}
}
@media screen and (max-width: 1148px) {
	.preview-gallery {
		--column-count-4: 2;
	}
	.playlist-grid {
		--column-count-4: 2;
	}
}
@media screen and (min-width: 869px) and (max-width: 985px) {
	.video-filter > div #video-search {
		position: absolute;
		right: 7px;
		width: 45px;
		align-self: flex-end;
		background-color: rgb(254 254 253);
		transition: width .4s ease-in-out;
	}
	.video-filter > div #video-search::placeholder {
		opacity: 0;
		transition: opacity .4s ease-in-out;
	}
	.video-filter > div #video-search:hover,
	.video-filter > div #video-search:focus {
		width: 175px;
		z-index: 5;
	}
	.video-filter > div #video-search:hover::placeholder,
	.video-filter > div #video-search:focus::placeholder {
		opacity: 1;
	}
}
@media screen and (max-width: 868px) {
	.page-account .preview-gallery,
	body.courses .preview-gallery {
		--column-count-4: 2;
		--column-count-5: 2;
		max-width: var(--inter-width);
		margin-top: 2rem;
		grid-gap: 10px;
	}
	.page-account .preview-gallery .video,
	body.courses .preview-gallery .video {
		width: 100%;
		min-width: 100%;
		height: 205px;
	}
	.page-account .preview-gallery .video .title,
	body.courses .preview-gallery .video .title {
		height: 35px;
		min-height: 40px;
		padding: 8px 10px;
		font-size: 12px;
	}
	.page-account .preview-gallery .video .info,
	body.courses .preview-gallery .video .info {
		padding: 5px 10px;
	}
	.video .info .teacher {
		font-size: 10px;
	}
	.video .info .topic {
		font-size: 11px;
	}
	.video .info .heart {
		width: 20px;
		height: 20px;
	}
	.video .thumb::after {
		font-size: 12px;
	}

	.playlist-grid {
		--column-count-4: 2;
		width: var(--inter-width);
		max-width: var(--inter-width);
		grid-gap: 25px 2.5vw;
	}
	.playlist {
		width: 100%;
		height: auto;
	}
	.playlist::before {
		top: -7px;
		height: 10%;
	}
	.playlist::after {
		top: -12px;
		height: 10%;
	}
	.playlist .title {
		font-size: 12px;
	}
}