/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; overflow: hidden; overflow: clip;}
.wrapper__container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper__container--main {padding: 0 var(--indent);}
.header {background-color: var(--bg-black); --tt: #fff; height: 80px;}
.content {padding: 0 0 40px 0; min-height: 100vh;}
.footer {background-color: var(--bg-black); border-top: 5px solid var(--accent); 
	padding-top: 40px; padding-bottom: 40px; --tt: #fff; color: #ccc;}
.wrapper::before {content: ''; background-color: var(--bg-black); width: 100%; 
	height: 160px; position: absolute; left: 0; top: 0;}

.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	opacity: 0.8; background-color: #1d1924; cursor: pointer; display: none;}


/* HEADER, TOPMENU, CAROU
----------------------------------------------- */
.logo {display: flex; align-items: center; font-weight: 900; 
	padding-left: 50px; position: relative; font-size: 34px; text-transform: uppercase;
	background: url(../images/exchange.png) 0 center / 40px no-repeat; height: 40px;}
.logo span {color: var(--accent);}
.dt .header__theme-select::before {content:"\f755";}
.header__theme-select {color: var(--accent-2); font-size: 24px;}
.header__btn-menu {height: 80px; border-radius: 0; font-size: 24px;}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 20px;}
.join, .thanks {padding: 20px; text-align: center;
	background-color: var(--bg); box-shadow: var(--bsh); width: 240px;}
.join img {display: block; height: 50px;}
.join__btn {background-color: var(--bg-darker); color: var(--tt-fade);}
.thanks a, .coffee a {font-weight: 600; text-decoration: underline;}
.thanks::before {font-size: 40px;}
.coffee {background-color: var(--bg); box-shadow: var(--bsh); padding: 20px 40px;}
.coffee::before {font-size: 40px; align-self: flex-start;}
.descr {background-color: var(--bg); box-shadow: var(--bsh); padding: 40px;}
.descr li span {font-weight: 600;}
.descr a {color: var(--accent); text-decoration: underline;}

.convert {padding: 40px; background-color: var(--bg-black); box-shadow: var(--bsh);}
.convert__input-holder {background-color: var(--bg); border: 0px solid rgba(0,0,0,0.3); 
	border-radius: 0; padding: 0 0px 0 15px; box-shadow: none;}
.convert__input {border: 0; box-shadow: none; height: 50px; line-height: 50px; padding: 0; background: none;}
.convert__btn-convert {height: 50px; padding: 0 25px; font-size: 14px; font-weight: 700;
	box-shadow: none; background-color: var(--accent-2); border-radius: 0; letter-spacing: 1px;}
.convert__btn {position: relative; font-weight: 400; text-transform: none; font-size: 16px; height: 54px;}
.convert__btn::before {content: ''; background-color: var(--bdc); pointer-events: none;
	position: absolute; left: -1px; top: 20%; width: 1px; height: 60%;}
.convert__btn::after {content: attr(title); white-space: nowrap; position: absolute; bottom: 110%; left: 50%; 
	translate: -50% 0; font-size: 12px; background-color: rgba(0,0,0,0.6); color: #fff; 
	border-radius: 3px; padding: 10px 20px; z-index: 5; pointer-events: none; opacity: 0; scale: 0 0;}
.convert__quality {padding: 0 15px;}

.convert__menu {position: fixed; z-index: 990; left: 50%; top: 50%; translate: -50% -50%; width: 460px;}
.convert__menu-inner {background-color: var(--bg); border-radius: 10px; box-shadow: var(--bsh-long); 
	padding: 40px; position: relative; z-index: 10;}
.convert__menu::before {content: ''; width: 100vw; height: 100vh; 
	position: fixed; left: 50%; top: 50%; translate: -50% -50%; background-color: rgba(0,0,0,0.6);}
.convert__menu-header {font-size: 24px; font-weight: 600;}
.convert__menu-trim-value-value input {padding: 0; text-align: center; font-size: 14px; min-width: 10px;}
.convert__menu-trim-value-caption {font-size: 14px; margin-bottom: 10px;}
.convert__menu-trim-end .convert__menu-trim-value-caption {text-align: right;}
.convert__menu-trim-value + span {position: relative; top: 15px;}
.convert__menu-content.is-active {display: flex;}
.quality-group {border: 1px solid var(--bdc); border-radius: 6px; overflow: hidden;}
.quality-group label {padding: 0; text-align: center; white-space: nowrap; position: relative; display: block;
	flex: 1 1 0; min-width: 30px; max-width: 100%; background: var(--bg); cursor: pointer;}
.quality-group label input {position: absolute; left: 0; top: 0; 
	width: 100%; height: 100%; opacity: 0; z-index: 5; cursor: pointer;}
.quality-group {display: flex; justify-content: center; overflow: hidden; padding: 0;}
.quality-group label + label {border-left: 1px solid var(--bg-darker);}
.quality-group label span {height: 40px; font-size: 14px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.quality-group label input:checked + span {background-color: var(--accent); color: #fff;}


/* PROCESS
----------------------------------------------- */
.process-info, .convert__loader {background-color: var(--bg); box-shadow: var(--bsh);
	padding: 40px; text-align: center; margin-bottom: 20px;}
.process-info__loader {font-size: 18px; font-weight: 600;}
.process-info__loader::before, .convert__loader::before {animation: spin 2s linear infinite;}
@keyframes spin {100% {rotate: 360deg}}
.process-info__caption {font-size: 18px; padding-bottom: 10px;}
.process-info__btns .btn {height: 50px;}
.process-info__btn-next {background-color: var(--accent-2);}
.process-info__btn-coffee {background-color: var(--bg-black);}
.process-info__btn-error {box-shadow: var(--bsh-btn);}
.convert__loader {background-color: rgba(0,0,0,0.2); color: #fff; font-size: 44px;
	box-shadow: inset var(--bsh); width: 100%; margin: 0; border: 1px solid rgba(0,0,0,0.66);}


/* FOOTER
----------------------------------------------- */
.footer__menu {font-size: 12px; text-transform: uppercase; font-weight: 700;}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.page__title {margin-bottom: 30px; font-size: 24px;}
.full-text {line-height: 1.6; font-size: 14px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: var(--ui-accent);}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, 
.full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative;}
.full-text > ul li:before {content: ''; width: 8px; height: 8px; border-radius: 50%; 
	border: 3px solid var(--accent); position: absolute; top: 6px; left: 34px;}
.full-text > ol {counter-reset: num;}
.full-text > ol li:before {content: counter(num); counter-increment: num; 
	border: 2px solid var(--accent); color: var(--accent-2); border-radius: 50%; padding-bottom: 3px;
	position: absolute; top: -5px; left: 17px; width: 30px; height: 30px; font-size: 16px; font-weight: 600;
	display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
.full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;}
.full-text table, .video-inside > * {width:100%;}
.full-text > *:last-child {margin-bottom: 0;}
.video-responsive {padding-top: 60%; position: relative; background-color: #000;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 18px; font-weight: 600; margin-bottom: 20px;}


/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */
.mobile-menu {width: 280px; height: 100%; overflow-x: hidden; overflow-y: auto;
	z-index: 999; position: fixed; left: -360px; top: 0; transition: left 0.4s; background-color: var(--bg);}
.mobile-menu.is-active {left: 0;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}
.mobile-menu__header {padding: 15px 20px; gap: 10px; background-color: var(--bg-black); --tt: #fff;}
.mobile-menu__btn-close {font-size: 24px; width: 40px; height: 40px; margin-right: -10px;}
.mobile-menu__content {padding: 20px;}
.mobile-menu__content .header__menu {display: block;}
.mobile-menu__content .header__menu a {display: block; padding: 10px 0; font-size: 14px; text-transform: uppercase; font-weight: 600;}

@media screen and (max-width: 1220px) {
	:root {--indent-negative: -20px; --indent: 20px;}
	.wrapper__container {max-width:1000px;}
}

@media screen and (max-width: 950px) {
	.wrapper__container {max-width:768px;}
	.join, .thanks, .coffee {padding: 20px; width: 100%; min-width: 100%; text-align: center;}
	.coffee::before {align-self: center;}
	.convert {padding: 20px;}
	.convert__btn-convert {width: 100%;}
	.process-info, .convert__loader, .descr {padding: 20px;}
	.process-info__btns .btn {min-width: 100%;}
}

@media screen and (max-width: 760px) {
	.wrapper__container {max-width:640px;}
}

@media screen and (max-width: 590px) {
	.wrapper__container {max-width:480px;}
}

@media screen and (max-width: 470px) {
	.wrapper__container123 {max-width:410px;}
	.header__btn-menu {height: 40px; font-size: 18px;}
	.header__theme-select {font-size: 18px;}
	.thanks br {display: none;}
	.coffee::before, .thanks::before, .join img {display: none !important;}
	.convert {border-radius: 0; border-left: 0; border-right: 0;
		margin-left: var(--indent-negative); margin-right: var(--indent-negative);}
	.convert__input-holder {padding-left: 10px;}
	.convert__input::placeholder {font-size: 12px;}
	.convert__trim {font-size: 12px; width: 40px;}
	.convert__quality {font-size: 12px; padding: 0 10px;}
	.coffee, .thanks {font-size: 14px;}
	.footer, .footer__menu {justify-content: center; text-align: center;}
	.convert__menu {width: calc(100vw - 40px)}
	.convert__menu-inner {padding: 20px;}
	.convert__menu-content {gap: 10px;}
}

@media screen and (max-width: 400px) {
	.wrapper__container123 {max-width:360px;}
	
	.full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px; margin-right: -20px;}
}



/* CHECKBOXES, RADIO BUTTONS
----------------------------------------------- */
.has-radiobox label {position: relative; padding-left: 32px; display: block; cursor: pointer;}
.has-radiobox input {appearance: none; -webkit-appearance: none; display: block; width: 22px; height: 22px; cursor: pointer;
	border: 1px solid var(--ui-bdc); background: var(--ui-bg); border-radius: 50%;
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.has-radiobox label input:checked::before {content: ''; background-color: var(--ui-accent); 
	width: 12px; height: 12px; border-radius: 50%; position: absolute; left: 4px; top: 4px;}
.has-checkbox, .checkbox {display: block; position: relative; padding-left: 50px; cursor: pointer;}
.has-checkbox, .checkbox label {cursor: pointer; display: block;}
.has-checkbox input, .checkbox input {
	appearance: none; -webkit-appearance: none; display: inline-block; transition: all .2s linear;
	height: 22px; width: 40px; border-radius: 11px; background-color: var(--ui-bg-darker); cursor: pointer;
	box-shadow: var(--ui-bsh-inset); position: absolute; left: 0; top: 50%; margin-top: -11px;}
.has-checkbox input::before, .checkbox input::before {content: ''; width: 20px; height: 20px; border-radius: 10px; 
	position: absolute; left: 1px; top: 1px; background-color: var(--ui-bg); transition: all .2s linear;}
.has-checkbox input:checked, .checkbox input:checked {background-color: var(--green);}
.has-checkbox input:checked::before, .checkbox input:checked::before {left: 19px;}