/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; overflow: hidden; overflow: clip; padding: 20px 0;}
.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); box-shadow: var(--bsh); padding: 20px; height: 80px; border-radius: 40px;}
.content {padding: 40px 0 80px 0; min-height: 100vh;}
.footer {background-color: var(--bg); box-shadow: var(--bsh); padding: 20px; min-height: 80px; border-radius: 40px;}

.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: 500; text-transform: uppercase;
	padding-left: 50px; position: relative; font-size: 34px; 
	background: url(../images/logo.png) 0 center / 40px no-repeat; height: 40px;}
.logo span {color: var(--accent);}
.header__theme-select {border-radius: 50%; font-size: 18px;}
.dt .header__theme-select::before {content:"\f755";}
.header__menu {font-weight: 400; font-size: 18px; margin-left: 60px;}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 40px;}
.coffee, .thanks, .join {border-radius: 10px; padding: 20px; font-size: 18px; 
	position: relative; isolation: isolate; border: 1px solid var(--clr);}
.coffee::before, .thanks::before, .join::before {content: ''; position: absolute; inset: 0; 
	z-index: -1; border-radius: inherit; background-color: var(--clr); opacity: 0.1;}
.thanks a, .coffee a {font-weight: 400; text-decoration: underline;}
.coffee img, .thanks img, .join img {display: block; height: 40px; width: 40px;}
.join {--clr: #d93900;}
.join__btn {background-color: #D93900; letter-spacing: 1px; text-transform: none; box-shadow: var(--bsh-btn)}
.coffee {--clr: #723a0c;}
.thanks {--clr: var(--accent-2);}
.thanks img {height: 100px; width: 100px;}

.convert {background-color: var(--bg); box-shadow: var(--bsh); padding: 20px; min-height: 80px; border-radius: 40px;}
.convert__input-holder {gap: 10px;}
.convert__input {border-radius: 25px; height: 40px; line-height: 40px; padding: 0 20px 0 20px; 
	border: 2px solid var(--bdc); box-shadow: none; font-weight: 400;}
.convert__btn {position: relative; font-weight: 400; text-transform: none; font-size: 16px; height: 40px;}
.convert__trim, .convert__quality {background-color: var(--bg-darker); color: var(--tt);}
.convert__quality {padding: 0 15px;}
.convert__btn-convert {height: 40px; padding: 0 20px; font-size: 16px; font-weight: 500; box-shadow: var(--bsh-btn);}
.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__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: 500;}
.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); border: 1px solid var(--bdc); 
	border-radius: 10px; padding: 20px; text-align: center; margin-bottom: 40px; position: relative; isolation: isolate;}
.process-info__loader {font-size: 22px; font-weight: 400;}
.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: 15px;}
.process-info__btns .btn {height: 50px; box-shadow: var(--bsh-btn);}
.process-info__btn-coffee {background-color: #723a0c;}
.process-info__btn-next {background-color: var(--accent-2);}
.convert__loader::after {content: ''; position: absolute; inset: 0; border-radius: inherit; 
	background-color: var(--clr); opacity: 0.1;}
.convert__loader {--clr: var(--accent); color: var(--accent); border: 0; width: 100%; margin: 0;}


/* FOOTER
----------------------------------------------- */
.footer__copyright {text-transform: uppercase;}
.footer__menu {font-weight: 400;}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.descr {padding-top: 20px;}
.descr li span {font-weight: 400;}
.descr a {color: var(--accent); text-decoration: underline;}
.page__title {margin-bottom: 30px; font-size: 24px;}
.full-text {line-height: 1.6; font-size: 18px; word-wrap: break-word; color: var(--tt-fade-0);}
.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;
	position: absolute; top: -2px; left: 17px; font-size: 18px; font-weight: 400;
	display: flex; justify-content: center; align-items: center; box-sizing: border-box; 
	width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent-2);}
.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: 21px; 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-darker);}
.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; margin: 0;}
.mobile-menu__content .header__menu a {display: block; padding: 10px 0; font-size: 18px;}

/*@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;}
	.convert {padding: 20px;}
	.convert__btn-convert {width: 100%;}
	.process-info, .convert__loader {padding: 20px;}
	.header .header__menu {display: none;}
	.header__btn-menu {display: flex; background-color: var(--accent-2);}
	.header__logo {flex: 1 1 100px; min-width: 100px; max-width: 100%; overflow: hidden; white-space: nowrap;}
	.header {gap: 10px;}
	.join, .coffee, .process-info__btns .btn {min-width: 100%; width: 100%;}
	.footer, .footer__menu {justify-content: center; text-align: center;}
	.footer__copyright {margin: 0;}
}

@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__logo {font-size: 28px;}
	.convert {border-radius: 0; border-left: 0; border-right: 0;
		margin-left: var(--indent-negative); margin-right: var(--indent-negative);}
	.convert__input::placeholder {font-size: 14px;}
	.convert__trim {font-size: 12px; width: 40px;}
	.convert__quality {font-size: 12px; padding: 0 10px;}
	.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;}