@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');

@font-face {
	font-family: 'Comforter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/comforter/v7/H4clBXOCl8nQnlaql3Qq65u9qKS-awhq.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

:root {
	--bg: #fff;
	--color-dark: #535252;
	--bg-button: #407BFF;
	--bg-button-hover: #96B6FF;
	--bg-button-dark: #1F1F1F;
	--bg-button-dark-hover: #3F3F3F;
	--bg-blue: #407BFF;
	--bg-dark: #1F1F1F;
	--bg-light: #F5F5F5;
	--bg-fff: #ffffff;
	--bg-disabled: #292928a3
}

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
	font-family: "Golos Text", serif
}

input,
textarea {
	outline: none
}

textarea {
	resize: none
}

body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-bottom: 0rem;
	position: relative
}

body.template {
    background: var(--bg-light);
    padding: 0;
}

body.scroll-locked {
	overflow: hidden
}

::-webkit-scrollbar {
	width: 0
}

a {
	text-decoration: none;
	color: #fff;
	transition: 0.3s all
}

button {
	transition: 0.3s all;
	background: transparent;
	border: none;
	cursor: pointer
}

.notifi {
    position: fixed;
    top: 1rem;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    width: max-content;
}

.notifi>.message {
	max-width: 25rem;
	min-height: 4rem;
	display: flex;
	align-items: center;
	padding: 0.5rem 1.5rem;
	box-sizing: border-box;
	font-weight: 500;
	border-radius: 1rem;
	font-size: 1rem;
	box-shadow: 0 2px 2px #1f1f1f4a;
	gap: .5rem;
	background: var(--bg);
	color: var(--color-dark)
}

.notifi>.message>p {
	width: 100%;
	text-align: center
}

.notifi>.message>.icon {
	width: 2.2rem;
	height: 2rem
}

.notifi>.message.error>.icon {
	color: #ef5e5e
}

.notifi>.message.succes>.icon {
	color: #41d14d
}

.notifi>.message.open {
	transform: translateY(150%);
	animation: messageani .5s forwards;
	cursor: pointer
}

@keyframes messageani {
	0% {
		transform: translateY(-250%)
	}

	100% {
		transform: translateY(0%)
	}
}

.notifi>.message.reload {
	transform: translateY(0);
	animation: messageanim .5s forwards
}

@keyframes messageanim {
	0% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(-150%)
	}
}

body>.center {
	width: 1050px;
	margin: 0 auto;
	flex: 1 0 auto;
	padding-bottom: 2rem
}

.top-menu {
	display: flex;
	justify-content: space-between;
	padding: 1.5rem 0 0 0
}

.top-menu>.logotype {
	display: flex
}

.top-menu>.logotype>a {
	color: var(--color-dark)
}

.top-menu>.logotype>a:hover {
	color: #3f3f3fb8
}

.top-menu>.logotype>a>svg {
	height: 2.5rem;
	width: 9rem
}

.top-menu>.center {
	width: max-content
}

.top-menu>.center>ul {
	display: flex;
	justify-content: center;
	border-radius: 2rem;
	overflow: hidden;
}

.top-menu>.center>ul>li>a {
	display: block;
	padding: .9rem 1.1rem;
	background: var(--bg-light);
	color: var(--bg-button-dark);
	font-weight: 600
}

body.template .top-menu>.center>ul>li>a {
	background: var(--bg);
}

.top-menu>.center>ul>li>a.active, body.template .top-menu>.center>ul>li>a.active {
	color: var(--bg);
    background: var(--bg-blue);
}

.top-menu>.center>ul>li>a:hover, body.template .top-menu>.center>ul>li>a:hover {
    color: var(--bg);
    background: var(--bg-blue);
}

.top-menu>.user {
	position: relative
}

.top-menu>.user>a {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500
}

.top-menu>.user>a:hover {
	background: var(--bg-button-hover)
}

.top-menu>.user>.login-succes {
	background: transparent;
	border: 2px solid var(--bg-blue);
	padding: 0.55rem 1.25rem;
	color: var(--bg-blue)
}

.top-menu>.user>.login-succes:hover {
	background: var(--bg-blue);
	color: var(--bg-fff)
}

.top-menu>.user.show>.login-succes {
	background: var(--bg-blue);
	color: var(--bg-fff)
}

.top-menu>.user>.login-succes>img {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%
}

.top-menu>.user>.login-succes>svg {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	padding: .2rem;
	background: var(--bg-button);
	color: var(--bg)
}

.top-menu>.user>a>svg {
	width: 1.1rem;
	height: 1.1rem
}

.top-menu>.user>.login-form {
	position: absolute;
	width: 400px;
	right: 0;
	margin-top: 1rem;
	max-height: 0;
	transition: max-height .2s ease-in-out;
	overflow: hidden;
	z-index: 3
}

.top-menu>.user.show>.login-form {
	max-height: 500px;
	transition: max-height .2s ease-in-out
}

@keyframes max-height {
	0% {
		height: 0
	}

	100% {
		height: max-content
	}
}

.top-menu>.user>.login-form>div {
	padding: 1.5rem;
	background: var(--bg-dark);
	border-radius: 1.5rem;
	display: grid;
	gap: 1rem
}

.top-menu>.user>.login-form.blue {
	width: max-content
}

.top-menu>.user>.login-form.blue>div {
	background: var(--bg-blue)
}

.top-menu>.user>.login-form.blue>div>ul {
	display: grid;
	gap: .8rem
}

.top-menu>.user>.login-form.blue>div>ul>li>a {
	font-size: 1.1rem
}

.top-menu>.user>.login-form.blue>div>ul>li>a:hover {
	color: #ebebeb
}

.top-menu>.user>.login-form>div>p {
	color: var(--bg-fff);
	font-size: .9rem
}

.top-menu>.user>.login-form>div>.group>input {
	width: 100%;
	padding: 1rem 1rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	background: #333333;
	font-size: 1rem;
	font-weight: 500;
	color: var(--bg-fff);
	transition: .3s
}

.top-menu>.user>.login-form>div>.group>input:focus {
	border: 1px solid var(--color-dark)
}

.top-menu>.user>.login-form>div>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: .9rem 1.1rem;
	border-radius: 2rem;
	text-align: center;
	font-size: 1.1rem
}

.top-menu>.user>.login-form>div>button:hover {
	background: var(--bg-button-hover)
}

.top-menu>.user>.login-form>div>button:disabled {
	background: var(--bg-button-dark-hover);
	cursor: no-drop
}

.main {
	position: relative;
	color: var(--color-dark);
	padding: 7rem 0 6rem 0
}

.main.person {
	padding: 3rem 0 0 0
}

.main.other {
	padding: 3rem 0 0rem 0
}

.main.resume-main {
	padding: 7rem 0 0rem 0
}

.main.resume-main>h1 {
	padding-bottom: 1.5rem
}

.main.resume-main>.main-text {
	padding-bottom: 0
}

.main>h1 {
	position: relative;
	text-align: center;
	font-size: 3.5rem;
	padding-bottom: 1.5rem;
	z-index: 2
}

.main.person>h1 {
	padding-bottom: 0.5rem
}

.main.detailed>h1 {
	font-size: 1.8rem;
	padding-bottom: 0.5rem
}

.main.text>h1 {
	font-size: 2.1rem;
	padding-bottom: 3rem
}

.main.payment>h1 {
	font-size: 2.1rem;
	padding-bottom: 1rem
}

.main.payment>h1>p>span {
	padding: 0rem 1rem 0.5rem 1rem
}

.main>h1>p>span {
	background: var(--bg-blue);
	background-position-y: 21px;
	color: var(--bg-fff);
	border-radius: 2rem;
	padding: 0rem 1rem 0.7rem 1rem
}

.main>.index-title {
	position: relative;
	text-align: center;
	width: max-content;
	margin: 0 auto 1.5rem auto;
	padding: 1rem;
	background: var(--bg-light);
	font-weight: 600;
	border-radius: 2rem;
	font-size: 1.5rem;
	z-index: 2
}
.main>.index-title:after {
	content: '';
	animation: pulse 1.5s infinite;
	box-shadow: 0 0 5px var(--bg-button);
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 2rem;
	left: 0;
	top: 0;
}

.main>.index-title>span {
	font-weight: 800;
	color: var(--bg-button)
}

.main>.index-title>span::after {
}

@keyframes pulse {
	0% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.main>.main-text {
	position: relative;
	text-align: center;
	font-weight: 600;
	padding-bottom: 5rem;
	z-index: 2
}

.main.other>.main-text {
	padding-bottom: 2rem
}
.main.other.detailed>.main-text {
	padding-bottom: 2rem;
    width: 80%;
    margin: 0 auto;
}

.main.person>.main-text {
	padding-bottom: 1rem
}

.main>.button {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 2rem;
	z-index: 2
}

.main>.button>a {
	padding: 1.2rem 1.9rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	text-align: center;
	font-size: 1.4rem
}

body.template .main>.button {
	padding-bottom: 1.5rem;
}
body.template .main>.button>a {
	padding: 1rem 1.9rem;
	font-size: 1.2rem;
}

.main>.button>.blue {
	color: var(--bg-fff);
	background: var(--bg-button)
}

.main>.button>.blue:hover {
	background: var(--bg-button-hover)
}

.main>.button>.dark {
	color: var(--bg-fff);
	background: var(--bg-button-dark);
	padding: 1.2rem 2.2rem
}

.main>.button>.dark:hover {
	background: var(--bg-button-dark-hover)
}

.main>.icon-index {
	position: absolute;
	top: 0;
	left: 0
}

.main>.icon-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1
}

.main>.icon-box>.icon-index {
	width: max-content;
	height: max-content;
	color: var(--bg-blue)
}

.main>.icon-box>.icon-index:nth-child(1) {
	position: absolute;
	top: 29%;
	left: 4%;
	transform: rotate(-22deg)
}

.main>.icon-box>.icon-index:nth-child(1)>svg {
	width: 89.9px;
	height: 88.17px
}

.main>.icon-box>.icon-index:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 9%;
	transform: rotate(-5deg)
}

.main>.icon-box>.icon-index:nth-child(2)>svg {
	width: 101.51px;
	height: 106.44px
}

.main>.icon-box>.icon-index:nth-child(3) {
	position: absolute;
	transform: rotate(-5deg);
	bottom: 5%;
	left: 7%
}

.main>.icon-box>.icon-index:nth-child(3)>svg {
	width: 97.9px;
	height: 87.7px
}

.main>.icon-box>.icon-index:nth-child(4) {
	position: absolute;
	top: 26%;
	right: 4%;
	transform: rotate(17deg)
}

.main>.icon-box>.icon-index:nth-child(4)>svg {
	width: 82.12px;
	height: 83.93px
}

.main>.icon-box>.icon-index:nth-child(5) {
	position: absolute;
	top: 46%;
	right: 9%;
	transform: rotate(11deg)
}

.main>.icon-box>.icon-index:nth-child(5)>svg {
	width: 101.65px;
	height: 108.52px
}

.main>.icon-box>.icon-index:nth-child(6) {
	position: absolute;
	bottom: 5%;
	right: 7%;
	transform: rotate(-21deg)
}

.main>.icon-box>.icon-index:nth-child(6)>svg {
	width: 106.3px;
	height: 105.54px
}

.step {
	position: relative;
	color: var(--color-dark);
	padding: 2rem 0 4rem 0
}

.step>h2 {
	text-align: center;
	padding-bottom: 1rem
}

.step>.flex {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 1rem
}

.step>.flex>.box>.block {
	text-align: center;
	background: var(--bg-light);
	padding: 1.5rem;
	border-radius: 1.8rem
}

.step>.flex>.box>.block>.icon {
	padding-bottom: .5rem;
	height: 7rem
}

.step>.flex>.box>.block>.icon>svg {
	width: 8rem;
	height: 6rem
}

.step>.flex>.box>.block>section {}

.step>.flex>.box>.block>section>h3 {
	font-size: 1rem;
	padding-bottom: .3rem
}

.step>.flex>.box>.block>section>p {
	font-size: .9rem;
	font-weight: 500
}

.list-res {
	display: flex;
	gap: 3rem;
	color: var(--color-dark);
	padding-top: 3rem
}

.list-res>.left {
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.list-res>.left>h2 {
	font-size: 2.3rem
}

.list-res>.left>.button {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	width: 70%;
	padding: 1rem 0rem 1rem 0rem
}

.list-res>.left>p {
	font-weight: 500;
	padding-bottom: .5rem
}

.list-res>.left>.button>button {
	padding: 1rem 1.4rem;
	border-radius: 2rem;
	font-weight: 500;
	font-size: 1.2rem;
	color: var(--color-dark);
	background: var(--bg-light);
	text-align: center;
	font-weight: 600
}

.list-res>.left>.button>button:hover {
	background: var(--bg-button);
	color: var(--bg-fff)
}

.list-res>.left>.button>button.active {
	background: var(--bg-button);
	color: var(--bg-fff)
}

.list-res>.left>a {
	display: block;
	padding: 1rem 1.4rem;
	border-radius: 2rem;
	font-weight: 500;
	font-size: 1.4rem;
	text-align: center;
	width: max-content;
	background: var(--bg-button);
	color: var(--bg-fff)
}

.list-res>.left>a:hover {
	background: var(--bg-button-hover)
}

.list-res>.right>.images {
	position: relative;
	right: 12px
}

.list-res>.right>.images>img {
	position: relative;
	border-radius: 1rem;
	z-index: 5;
	border: 2px solid #e1dfdfd1;
	width: 350px
}

.list-res>.right>.images>img.transform {
	animation: notransform 2s infinite
}

@keyframes notransform {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.list-res>.right>.images::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 9px;
	width: 100%;
	height: 100%;
	z-index: 2;
	border-radius: 1rem;
	border: 2px solid #e1dfdfd1;
	background: #ffffff
}

.list-res>.right>.images::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: 3;
	border-radius: 1rem;
	border: 2px solid #e1dfdfd1;
	background: #ffffff
}

.reviews {
	position: relative;
	color: var(--color-dark);
	padding: 7rem 0 7rem 0
}

.reviews>h2 {
	text-align: center;
	padding-bottom: 1.5rem;
	font-size: 2.3rem
}

.reviews>.boxed {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem
}

.reviews>.boxed>section {
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: flex-start
}

.reviews>.boxed>section>div {
	padding: 1.5rem;
	background: var(--bg-light);
	height: max-content;
	border-radius: 1rem
}

.reviews>.boxed>section>div>.icon {
	display: flex;
	gap: 1rem;
	align-items: center
}

.reviews>.boxed>section>div>.icon>img {
	width: 4rem;
	height: 4rem;
	border-radius: 2rem
}

.reviews>.boxed>section>div>.icon>.title>p {
	font-weight: 700;
	padding-bottom: .3rem
}

.reviews>.boxed>section>div>.icon>.title>span {
	font-size: .9rem;
	font-weight: 500
}

.reviews>.boxed>section>div>p {
	font-size: .85rem;
	padding-top: .5rem;
	font-weight: 500
}

.faq {
	position: relative;
	color: var(--color-dark)
}

.faq>h2 {
	text-align: center;
	padding-bottom: 1.5rem;
	font-size: 2.3rem
}

.faq>.box {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem
}
.faq>.box {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.faq>.box>section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1rem
}

.faq>.box>section>div {
	position: relative;
	padding: 1.5rem;
	background: var(--bg-light);
	height: max-content;
	border-radius: 1rem;
	overflow: hidden
}

.faq>.box>section>div::after {
	content: "";
	background-image: url(/template/img/after-fone.svg);
	position: absolute;
	width: 6rem;
	height: 6rem;
	right: 0;
	bottom: 0;
	z-index: 3;
	opacity: .3
}

.faq>.box>section>div.fone::after {
	content: "";
	background-image: url(/template/img/after-fone-2.svg)
}

.faq>.box>section>div.fone {
	background: transparent;
	border: 2px solid #F5F5F5
}

.faq>.box>section>div>h3 {
	font-size: 1.3rem;
	padding-bottom: .7rem
}

.faq>.box>section>div>.title {
	position: relative;
	font-size: .9rem;
	z-index: 5
}

.faq>.box>section>div>.title>ol {
    padding: 0.5rem 0 .5rem 1.2rem;
    margin-left: 1rem;
}

.faq>.box>section>div>.title>ol>li {
	list-style-type: circle;
	font-weight: 500;
	padding-bottom: .2rem
}

.pressa {
	position: relative;
	color: var(--color-dark);
	padding: 3rem 0 0 0
}

.pressa>h2 {
	text-align: center;
	padding-bottom: 1.5rem;
	font-size: 2.3rem
}

.pressa>.box {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem
}

.pressa>.box>.news {
	padding: 1.5rem;
	background: var(--bg-light);
	border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.pressa>.box>.news>.block>h1 {
	font-size: 1rem;
	height: 4rem
}

.pressa>.box>.news>.block>.img {
	padding: 1rem 0
}

.pressa>.box>.news>.block>.img>img {
	display: block;
	width: 100%;
	border-radius: 1.2rem
}

.pressa>.box>.news>.block>.title {
	font-size: .9rem;
	font-weight: 500
}

.pressa>.box>.news>section {
	padding-top: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.pressa>.box>.news>section>a {
	display: block;
	padding: .7rem 2.4rem;
	border-radius: 2rem;
	font-weight: 500;
	font-size: 1rem;
	text-align: center;
	width: max-content;
	background: var(--bg-button);
	color: var(--bg-fff)
}

.pressa>.box>.news>section>a:hover {
	background: var(--bg-button-hover)
}

.pressa>.box>.news>section>.date {
	font-size: 1rem;
	font-weight: 600;
	color: #5352526e
}

.shadow {
	box-shadow: 0 2px 2px #1f1f1f2b
}

footer {
	padding-bottom: 1rem
}

footer>div {
	background: var(--bg-dark);
	padding: 1.5rem;
	border-radius: 1.5rem;
	display: flex;
	width: 1050px;
	margin: 0 auto;
	flex: 0 0 auto
}

footer>div>.logotype {
	display: flex;
	align-items: center;
	padding-right: 1rem;
	margin-right: 1rem
}

footer>div>.logotype::after {
	content: "";
	position: relative;
	width: 1px;
	background: var(--bg-light);
	height: 100%;
	left: 1rem;
	opacity: .2
}

footer>div>.logotype>a:hover {
	color: #8d8d8d
}

footer>div>.logotype>a>svg {
	height: 2.5rem;
	width: 9rem
}

footer>div>.center {
	display: flex;
	gap: .5rem;
	flex-direction: column;
	width: 100%;
	justify-content: center
}

footer>div>.center>ul {
	display: flex;
	gap: .5rem;
	color: var(--bg-light)
}

footer>div>.center>ul>li>a {
	font-weight: 500;
	font-size: .8rem
}

footer>div>.center>ul>li>a:hover {
	color: var(--bg-blue)
}

footer>div>.center>.copyright {
	font-size: .7rem;
	color: #E1E1E1;
	font-weight: 500
}

footer>div>.mail {
	float: right
}

footer>div>.mail>a {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content
}

footer>div>.mail>a:hover {
	background: var(--bg-button-hover)
}

footer>div>.mail>a>svg {
	width: 1.1rem;
	height: 1.1rem
}

.main-faq {
	display: grid;
	gap: 1rem
}

.main-faq>.box {
	color: var(--color-dark);
	cursor: pointer
}

.main-faq>.box>.button {
	display: flex;
	justify-content: space-between;
	background: var(--bg-light);
	align-items: center;
	padding: 0.8rem 1rem 0.8rem 1.5rem;
	border-radius: 2.5rem;
	transition: .3s
}

.main-faq>.box.show>.button {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem
}

.main-faq>.box>.button:hover button {
	background: var(--bg-button);
	color: var(--bg-fff)
}

.main-faq>.box>.button>h1 {
	font-size: 1.1rem
}

.main-faq>.box>.button>button {
	background: var(--bg-fff);
	border-radius: 5rem;
	padding: .3rem;
	color: #53525280
}

.main-faq>.box>.button>button>svg {
	width: 2rem;
	height: 2rem;
	transform: rotate(45deg)
}

.main-faq>.box.show>.button>button {
	background: var(--bg-button);
	transform: rotate(45deg);
	color: var(--bg-fff)
}

.main-faq>.box>.title {
	cursor: default;
	max-height: 0;
	transition: max-height .2s ease-in-out;
	overflow: hidden;
	box-shadow: 0 2px 2px #1f1f1f2b;
	border-bottom-left-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem
}

.main-faq>.box.show>.title {
	max-height: 800px;
	transition: max-height .2s ease-in-out
}

.main-faq>.box>.title>p {
	padding: 1.5rem;
	background: var(--bg-light);
	margin-top: 5px;
	font-weight: 500
}

.main-faq>.box>.title>p>a {
	color: var(--bg-button)
}

.main-faq>.box>.title>p>a:hover {
	color: var(--bg-button-hover)
}

.faq-form {
	padding-top: 1.5rem
}

.faq-form>.faq-form-bth {
	color: var(--bg-fff);
	background: var(--bg-button-dark);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1.2rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 2px #1f1f1f2b
}

.faq-form>.faq-form-bth:hover {
	background: var(--bg-button-dark-hover)
}

.faq-form.show>.faq-form-bth {
	display: none
}

.faq-form>form {
	max-height: 0;
	transition: max-height .2s ease-in-out;
	overflow: hidden;
	box-shadow: 0 2px 2px #1f1f1f2b;
	border-radius: 1.5rem
}

.faq-form.show>form {
	max-height: 1000px;
	transition: max-height .2s ease-in-out
}

.faq-form>form>section {
	padding: 1.5rem;
	background: var(--bg-light);
	display: grid;
	gap: 1rem
}

.faq-form>form>section>.foot-form {
	width: 100%;
	display: flex;
	justify-content: flex-end
}

.faq-form>form>section>.foot-form>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 2.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1.2rem
}

.faq-form>form>section>.foot-form>button:hover {
	background: var(--bg-button-hover)
}

.faq-form>form>section>.foot-form>button:disabled {
	background: var(--bg-disabled);
	cursor: no-drop
}

.form-group {
	display: flex;
	flex-direction: column
}

.form-group>label {
	font-size: 1.1rem;
	padding-bottom: .5rem;
	font-weight: 600;
	color: var(--color-dark)
}

.form-group>label>span {
	color: #EB4B33;
	padding-left: .3rem
}

.form-group>input,
.form-group>textarea {
	width: 100%;
	padding: 1rem 1rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	background: var(--bg-fff);
	font-size: 1rem;
	font-weight: 500;
	color: var(--bg-dark);
	transition: .3s;
	box-shadow: 0 2px 2px #1f1f1f17
}

.form-group>input::placeholder,
.form-group>textarea::placeholder {
	color: #b0adad
}

.main-text {
	color: var(--color-dark);
	font-weight: 400
}

.main-text>h2 {
	font-size: 1.2rem;
	padding: 1.5rem 0rem 1rem 0rem
}

.main-text>p {
	padding-bottom: .5rem
}

.main-text>p>a {
	color: var(--bg-button)
}

.main-text>p>a:hover {
	color: var(--bg-button-hover)
}

.main-text>ol {
	padding-left: 1.85rem;
	display: grid;
	gap: .5rem;
	padding-bottom: .5rem
}

.main-text>ol>li {
	list-style-type: auto
}

.main-text>.agreement>li {
	list-style-type: circle
}

.personal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 1rem
}

.personal>.setting {
    position: relative;
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: 1.5rem;
    color: var(--color-dark);
    max-height: 34rem;
}

.personal>.setting>h1 {
	font-size: 1.3rem;
	padding-bottom: 1rem
}

.personal>.setting>.user {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--bg-blue);
	padding: .6rem 1.5rem .6rem 1rem;
	border-radius: 1.5rem;
	width: max-content
}

.personal>.setting>.user>.icon>svg {
	width: 2.3rem;
	height: 2.3rem;
	padding: .3rem;
	border-radius: 50%;
	background: var(--bg-fff);
	color: var(--bg-blue)
}

.personal>.setting>.user>.icon>img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%
}

.personal>.setting>.user>.name {
	font-size: 1.1rem;
	color: var(--bg-fff);
	font-weight: 600
}

.personal>.setting>.user>.delit-resume {
	right: 1.5rem;
    position: absolute;
}
.personal>.setting>.user>.delit-resume>button {
	color: var(--bg-fff);
    background: #EB4B33;
    padding: 0.9rem 1.3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 2rem;
    font-weight: 500;
    width: max-content;
    font-size: 1rem;
}
.personal>.setting>.user>.delit-resume>button:hover {
	background: #eb4b33c7;
}

.personal>.setting>.subscription {
	margin: 1rem 0rem;
	background: var(--bg-fff);
	padding: 1rem;
	border-radius: 1.5rem
}

.personal>.setting>.subscription>h2 {
	font-size: 1rem
}

.personal>.setting>.subscription>.subscription-box {
	display: flex;
	gap: .5rem;
	align-items: center;
	font-size: .8rem;
	padding: 1rem 0
}

.personal>.setting>.subscription>.title {
	font-size: .8rem
}

.personal>.setting>.delited {
	margin: 1rem 0rem;
	background: var(--bg-fff);
	padding: 1rem;
	border-radius: 1.5rem
}

.personal>.setting>.delited>h2 {
	font-size: 1rem
}

.personal>.setting>.delited>.title {
	display: flex;
	gap: .5rem;
	align-items: center;
	font-size: .8rem;
	padding: 1rem 0
}

.personal>.setting>.delited>button {
	color: var(--bg-fff);
	background: #EB4B33;
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1rem
}

.personal>.setting>.delited>button:hover {
	background: #eb4b33c7
}

.personal>.notify {
	background: var(--bg-light);
	padding: 1.5rem;
	border-radius: 1.5rem;
	color: var(--color-dark);
	height: max-content;
	max-height: 34rem
}

.personal>.notify>h1 {
	font-size: 1.3rem;
	padding-bottom: 1rem
}

.personal>.notify>.box {
	display: grid;
	gap: 1rem;
	overflow-y: auto;
	max-height: 28rem;
	scrollbar-color: var(--bg-button-hover) var(--bg-fff);
	scrollbar-width: thin
}

.personal>.notify>.box>section {
	display: grid;
	gap: 1rem;
	padding-right: .5rem;
	margin: 0rem 0rem .5rem 0rem
}

.personal>.notify>.box>section>div {
	position: relative;
	background: var(--bg);
	padding: 1rem;
	border-radius: 1.5rem;
	height: max-content
}

.personal>.notify>.box>section>div>.clear {
	text-align: center;
	font-weight: 600
}

.personal>.notify>.box>section>div>h3 {
	font-size: .9rem
}

.personal>.notify>.box>section>div>.date {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: .8rem;
	font-weight: 600
}

.personal>.notify>.box>section>div>.text {
	font-size: .85rem;
	padding: .5rem 0 0 0
}

.checkbox-google {
	display: inline-block;
	height: 28px;
	line-height: 28px;
	margin-right: 10px;
	position: relative;
	vertical-align: middle;
	font-size: 14px;
	user-select: none
}

.checkbox-google .checkbox-google-switch {
	display: inline-block;
	width: 54px;
	height: 19px;
	border-radius: 20px;
	position: relative;
	top: 6px;
	vertical-align: top;
	background: var(--bg-disabled);
	transition: .2s
}

.checkbox-google .checkbox-google-switch:before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
	position: absolute;
	top: -4px;
	left: -2px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	transition: .15s
}

.checkbox-google input[type=checkbox] {
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	z-index: -1;
	opacity: 0
}

.checkbox-google input[type=checkbox]:checked+.checkbox-google-switch {
	background: #4597F7
}

.checkbox-google input[type=checkbox]:checked+.checkbox-google-switch:before {
	background: #4597F7;
	transform: translateX(32px)
}

.checkbox-google input[type="checkbox"]:not(:disabled)+.checkbox-google-switch {
	cursor: pointer;
	border-color: rgba(0, 0, 0, .3)
}

.checkbox-google input[type="checkbox"]:not(:disabled):active+.checkbox-google-switch:before,
.checkbox-google input[type="checkbox"]:not(:disabled):focus+.checkbox-google-switch:before {
	animation: checkbox-active-on 0.5s forwards linear
}

@keyframes checkbox-active-on {
	0% {
		box-shadow: 0 0 0 0 rgba(212, 212, 212, 0)
	}

	99% {
		box-shadow: 0 0 0 10px rgba(212, 212, 212, 0.5)
	}
}

.checkbox-google input[type="checkbox"]:not(:disabled):checked:active+.checkbox-google-switch:before,
.checkbox-google input[type="checkbox"]:not(:disabled):checked:focus+.checkbox-google-switch:before {
	animation: checkbox-active-off 0.5s forwards linear
}

@keyframes checkbox-active-off {
	0% {
		box-shadow: 0 0 0 0 rgba(154, 190, 247, 0)
	}

	99% {
		box-shadow: 0 0 0 10px rgba(154, 190, 247, 0.5)
	}
}

.checkbox-google input[type=checkbox]:disabled+.checkbox-google-switch {
	filter: grayscale(60%);
	border-color: rgba(0, 0, 0, .1)
}

.checkbox-google input[type=checkbox]:disabled+.checkbox-google-switch:before {
	background: #eee
}

.price {
	padding: 1.5rem;
	background: var(--bg-light);
	border-radius: 1.5rem;
	color: var(--color-dark)
}

.price.final {
	background: var(--bg-light)
}

.price>.top {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	padding: 0rem 0rem 1rem 0rem
}

.price>.title {
	font-size: .9rem;
	text-align: center;
	padding-bottom: 1rem;
	line-height: 1.2rem
}

.price>.top>.box {
	background: var(--bg);
	padding: 1.5rem;
	border-radius: 1.5rem
}

.price.final>.top>.box {
	background: var(--bg)
}

.price>.top>.box>h1 {
	font-size: 2rem;
	padding-bottom: 1rem
}

.price>.top>.box>.title {
	font-weight: 500;
	font-size: 1.2rem
}

.price>.top>.box>.cost {
	color: var(--bg-blue);
	font-size: 3.5rem;
	font-weight: 600
}

.price>.top>.box>span {
	display: block;
	font-size: .9rem;
	padding-top: 1rem
}

.price>.top>.box>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	border-radius: 2rem;
	font-weight: 500;
	width: 100%;
	margin-top: 1rem;
	font-size: 1.1rem
}

.price>.top>.box>button:hover {
	background: var(--bg-button-hover)
}

.price>.top>.box>button.active {
	position: relative
}

.price>.top>.box>button.active:after {
	content: "";
	background-color: var(--bg);
	background-image: url(/template/img/check-black.svg);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	margin: auto 0 auto auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 1rem
}

.price>.footer>p {
	font-size: 1.1rem;
	font-weight: 500
}

.price>.footer>.box {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	padding-top: 1rem
}

.price>.footer>.box>div {
	display: grid;
	gap: 1rem
}

.price.final>.footer>.box>div>.title {
	background: var(--bg)
}

.price>.footer>.box>div>.title {
	position: relative;
	padding: 1rem 1rem 1rem 3.5rem;
	background: var(--bg);
	border-radius: 2rem;
	font-weight: 600
}

.price>.footer>.box>div>.title::after {
	content: "";
	position: absolute;
	width: 2.1rem;
	height: 2.1rem;
	background-color: #407bffb5;
	background-image: url(/template/img/check-white.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 7px;
	left: 9px;
	top: 10px;
	border-radius: 5rem
}

.price>a {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	margin: 1.5rem auto 0 auto
}

.price>a:hover {
	background: var(--bg-button-hover)
}

.payment>.box {
	width: max-content;
	margin: 0 auto;
	padding: 1.5rem;
	border-radius: 1.5rem
}

.payment>.error>.icon {
	color: #EB4B33
}

.payment>.succes>.icon {
	color: #0E842D
}

.payment>.box>p {
	text-align: center;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--color-dark)
}

.payment>.box>a {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	justify-content: center;
	margin-top: 1rem
}

.payment>.box>a:hover {
	background: var(--bg-button-hover)
}

.designer {
	color: var(--color-dark)
}

.designer>h1 {
	text-align: center;
	font-size: 1.5rem
}

.designer>p {
	text-align: center;
	padding-top: .5rem
}

.resume {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 0rem 3.5rem 0rem
}

.resume>section>.top {
	background: var(--bg-light);
	padding: 0.8rem 1rem 0.8rem 1.5rem;
	border-radius: 2.5rem;
	display: flex;
	align-items: center;
	gap: .7rem;
	position: relative;
	cursor: pointer;
	transition: .3s
}

.resume>section.show>.top {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

.resume>section>.top>.icon>img {
	width: 2.5rem
}

.resume>section>.top>.text {
	display: grid;
	gap: .3rem
}

.resume>section>.top>.text>.steps {
	font-size: 1rem;
	color: var(--bg-blue);
	font-weight: 600
}

.resume>section>.top>.text>.name {
	font-size: 1.1rem;
	font-weight: 600;
	display: flex;
	flex-direction: row;
	gap: .5rem;
	align-items: center
}

.resume>section>.top>.text>.name>span {
	font-size: .8rem;
	font-weight: 500
}

.resume>section>.top>.right {
	position: absolute;
	background: var(--bg-fff);
	border-radius: 5rem;
	padding: .3rem;
	color: #53525280;
	right: 1rem;
	transition: .3s
}

.resume>section.show>.top>.right {
	background: var(--bg-blue);
	color: var(--bg-fff);
	transform: rotate(45deg)
}

.resume>section>.top>.right>svg {
	width: 2rem;
	height: 2rem;
	transform: rotate(45deg)
}

.resume>section>.footer {
	max-height: 0;
	transition: max-height .3s ease-in-out;
	overflow: hidden
}

.resume>section>.footer>.class-form-other {
	background: var(--bg-light);
	padding: 1.5rem;
	margin-top: 7px;
	border-radius: 1.5rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.resume>section>.footer>.class-form-other>.class-form {
	background: transparent;
	padding: 0;
	margin-top: 0;
	border-radius: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem;
	border-bottom: 2px solid var(--bg);
	padding-bottom: 1.3rem;
	margin-bottom: 1.3rem
}

.resume>section>.footer>.class-form-other>.resume-button {
	width: 100%
}

.resume>section>.footer>.class-form-other>.resume-button>button {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	font-size: 1rem;
	border-radius: 1.5rem;
	background: var(--bg-fff);
	border: 2px dashed #1f1f1f26;
	padding: .6rem 1rem;
	color: var(--color-dark)
}

.resume>section>.footer>.class-form-other>.resume-button>button:hover {
    border: 2px dashed var(--bg-blue);
    color: var(--bg-blue);
}

.resume>section>.footer>.class-form-other>.resume-button>button>svg {
	width: 1.5rem;
	height: 1.5rem;
	transform: rotate(45deg)
}

.resume>section>.footer .class-form {
	background: var(--bg-light);
	padding: 1.5rem;
	margin-top: 7px;
	border-radius: 1.5rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem
}

.resume>section.show>.footer {
	max-height: 3000px;
	transition: max-height .3s ease-in-out
}

.resume>section>.footer .class-form>.rows-top {
	grid-column: 1 / 3;
	display: grid;
	gap: 1.3rem
}

.resume>section>.footer .class-form>.rows-top>.rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem
}

.resume>section>.footer .class-form>.rows {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem;
	grid-column: 1 / 4
}

.resume>section>.footer .class-form>.rows.two {
	grid-template-columns: repeat(2, minmax(0, 1fr))
}

.resume>section>.footer .class-form>.rows.one {
	grid-template-columns: repeat(1, minmax(0, 1fr))
}

.resume>section>.footer .class-form>.images {
	display: flex;
	align-items: center;
	justify-content: center
}

.resume>section>.footer .class-form>.rows>.nav {
	display: flex;
	gap: .7rem
}

.resume>section>.footer .class-form>.rows>.nav>button {
	padding: .7rem;
	background: var(--bg-fff);
	border-radius: .5rem;
	color: var(--color-dark);
	box-shadow: 0 2px 2px #1f1f1f17
}

.resume>section>.footer .class-form>.rows>.nav>button>svg {
	width: 1.2rem;
	height: 1.2rem
}

.resume>section>.footer .class-form>.rows>.nav>button.delited {
	background: #EB4B33;
	color: var(--bg)
}

.resume>section>.footer .class-form>.rows>.nav>button.delited:hover {
	background: #eb4b33c7
}

.resume>section>.footer .class-form>.rows>.nav>button.down>svg {
	transform: rotate(180deg)
}

.resume>section>.footer .class-form>.rows>.nav>button:hover {
	box-shadow: 0 2px 2px #1f1f1f47
}

.resume>section>.footer>.class-form-other>.class-form:first-child .up,
.resume>section>.footer>.class-form-other>.class-form:nth-last-child(2) .down {
	display: none
}

.resume>.button {
	display: flex;
	justify-content: center
}

.resume>.button>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1.3rem
}

.resume>.button>button:hover {
	background: var(--bg-button-hover)
}

.resume-group {}

.resume-group>label {
	display: block;
	font-size: 1.1rem;
	padding-bottom: .5rem;
	font-weight: 600;
	color: var(--color-dark)
}

.resume-group>label>span {
	color: #eb4b33
}

.resume-group>.block>input,
.resume-group>.block>textarea {
	width: 100%;
	padding: 1rem 1rem 1rem 1rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	background: var(--bg-fff);
	font-size: 1rem;
	font-weight: 500;
	color: var(--bg-dark);
	transition: .3s;
	box-shadow: 0 2px 2px #1f1f1f17;
	height: 54px
}

.resume-group>.block>textarea.other {
	height: auto
}

.resume-group>.block>input:disabled,
.resume-group>.block>textarea:disabled {
	background: #ededed
}

.resume-group>.block>textarea.other:not(:placeholder-shown) {
	height: auto
}

.resume-group>.block>textarea:not(:placeholder-shown) {
	height: 90px
}

.resume-group>.block>input::placeholder,
.resume-group>.block>textarea::placeholder {
	color: #b0adad;
	font-size: 1rem
}

.resume-group>.block>input:not(:disabled):focus, .resume-group>.block>input:not(:disabled):hover, .resume-group>.block>textarea:not(:disabled):focus, .resume-group>.block>textarea:not(:disabled):hover {
    border: 1px solid var(--bg-button-hover);
}

.resume-group>.block {
	position: relative
}

.resume-group>.block>.clear {
	position: absolute;
	right: 1rem;
	top: 1rem;
	opacity: 0;
	color: #EB4B33
}

.resume-group>.block>.clear>svg {
	width: 1.3rem;
	height: 1.4rem
}

.resume-group>.block>input:placeholder-shown+.clear,
.resume-group>.block>textarea:placeholder-shown+.clear {
	display: none
}

.resume-group>.block>input:disabled+.clear {
	display: none
}

.resume-group>.block>input[date-local="selector"]+.clear,
.resume-group>.block>textarea[date-local="selector"]+.clear {
	right: 2.4rem
}

.resume-group>.block:hover .clear {
	opacity: .5
}

.resume-group>.block>.clear:hover {
	opacity: 1
}

.resume-group.select-group>.block::after {
	content: "";
	position: absolute;
	display: block;
	background-image: url(/template/img/arrow.svg);
	background-size: 100%;
	width: 1.5rem;
	height: 1.5rem;
	right: 0.7rem;
	top: .95rem;
	transform: rotate(0);
	transition: .3s
}

.resume-group.select-group.show>.block::after {
	content: "";
	background-image: url(/template/img/arrow.svg);
	transform: rotate(180deg)
}

.resume-group.select-group>.select-box {
	position: absolute;
	z-index: 5;
	max-height: 0;
	transition: max-height .2s ease-in-out;
	overflow: hidden;
	border-radius: .5rem;
}

.resume-group.select-group.show>.select-box {
	max-height: 800px;
	transition: max-height .2s ease-in-out
}

.resume-group.select-group>.select-box>.select-list {
	background: var(--bg);
	padding: .5rem 0rem;
	margin-top: .3rem;
	width: 100%;
	border-radius: .5rem;
}

.resume-group.select-group>.select-box>.select-list>.select {
	padding: .5rem 1.3rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600
}

.resume-group.select-group>.select-box>.select-list>.select:hover {
	background: #edebeb
}

.resume-group.select-group>.select-box>.select-list>.select.active {
	background: #edebeb
}

.resume-group.select-group>.select-box>.select-list>.checkbox {
	position: relative;
	padding: .5rem 1.3rem .5rem 2.5rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600
}

.resume-group.select-group>.select-box>.select-list>.checkbox:hover {
	background: #edebeb
}

.resume-group.select-group>.select-box>.select-list>.checkbox.active {
	background: #edebeb
}

.resume-group.select-group>.select-box>.select-list>.checkbox.check::after {
	content: "";
	position: absolute;
	background-image: url(/template/img/check-white.svg);
	background-size: 74%;
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 3px;
	background-position-x: 2px;
	background-color: var(--bg-blue);
	border: 2px solid var(--bg-blue);
	width: 1rem;
	height: 1rem;
	left: .8rem;
	border-radius: .3rem
}

.resume-checkbox {
	display: block;
	position: relative
}

.resume-checkbox input[type=checkbox] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0
}

.resume-checkbox span {
	display: inline-block;
	position: absolute;
	padding: 0 0 0 35px;
	line-height: 22px;
	transition: .3s;
	cursor: pointer;
	bottom: 20%;
	font-weight: 500
}

.resume-checkbox span:before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 1.5rem;
	top: -2px;
	height: 1.5rem;
	left: 0;
	-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	background-color: var(--bg-fff);
	border: 2px solid #e3e3e3;
	border-radius: 0.3rem
}

.resume-checkbox input[type=checkbox]:checked+span:before {
	background-image: url(/template/img/check-white.svg);
	background-size: 74%;
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 4px;
	background-position-x: 3px;
	background-color: var(--bg-blue);
	border: 2px solid var(--bg-blue)
}

.form-group-checkbox {
	display: block;
	position: relative;
	height: 3.5rem
}

.form-group-checkbox input[type=checkbox] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0
}

.form-group-checkbox span {
	display: inline-block;
	position: absolute;
	padding: 0 0 0 35px;
	line-height: 22px;
	transition: .3s;
	cursor: pointer;
	bottom: 20%;
	font-weight: 500
}

.form-group-checkbox span:before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 1.5rem;
	top: -2px;
	height: 1.5rem;
	left: 0;
	-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	background-color: var(--bg-fff);
	border: 2px solid #e3e3e3;
	border-radius: 0.3rem
}

.form-group-checkbox input[type=checkbox]:checked+span:before {
	background-image: url(/template/img/check-white.svg);
	background-size: 74%;
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 4px;
	background-position-x: 3px;
	background-color: var(--bg-blue);
	border: 2px solid var(--bg-blue)
}

.input-file-row {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%
}

.input-file-row>.input-file {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center
}

.input-file-row>.input-file>input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0
}

.input-file-row>.input-file>span {
	position: relative;
	cursor: pointer;
	text-align: center;
	width: 16rem;
	height: 16rem;
	background-image: url(/template/img/camera.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 38%;
	background-size: 25%;
	border-radius: 1rem;
	padding-top: 10rem;
	font-size: 1rem;
	font-weight: 500;
	z-index: 5;
	transition: .3s;
	background-color: var(--bg-fff);
	box-shadow: 0 2px 2px #1f1f1f17;
	border: 1px solid transparent
}

.input-file-row>.input-file>span.load {
	position: relative;
	cursor: pointer;
	text-align: center;
	width: 16rem;
	height: 16rem;
	background-image: url(/template/img/infinite-spinner.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 38%;
	background-size: 25%;
	border-radius: 1rem;
	padding-top: 10rem;
	font-size: 1rem;
	font-weight: 500;
	z-index: 5;
	transition: .3s;
	background-color: var(--bg-fff);
	box-shadow: 0 2px 2px #1f1f1f17;
	border: 1px solid transparent
}

.input-file-row>.input-file>span:hover {
	border: 1px solid #1f1f1f45
}

.input-file-row>.input-file>.views {
	display: none;
	width: 16rem;
	height: 16rem;
	cursor: pointer;
	z-index: 4
}

.input-file-row>.input-file>.views>img {
	width: 100%;
	height: 100%;
	border-radius: 1rem
}

.input-file-row>.clear-photo {
	position: absolute;
	right: -0.5rem;
	top: -.5rem;
	color: var(--bg);
	cursor: pointer;
	z-index: 5;
	transition: .3s;
	width: 2.5rem;
	height: 2.5rem;
	padding: .5rem;
	border-radius: 1.5rem;
	background: #EB4B33
}

.input-file-row>.clear-photo.hide {
	display: none
}

.input-file-row>.clear-photo:hover {
	background: #eb4b33e0
}

.input-file-row>.clear-photo>svg {
	width: 1.5rem;
	height: 1.5rem
}

.modal-overlow {
	position: fixed;
	left: 0;
	top: 0;
	padding-top: 8rem;
	width: 100%;
	height: 100%;
	background: #000000ad;
	display: flex;
	justify-content: center;
	z-index: 9
}

.modal-overlow.hide {
	display: none
}

.modal-overlow>.modal {
	width: 37rem;
	height: max-content;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: -1px 13px 20px 0 rgba(0, 0, 0, 0.7);
	background: var(--bg-dark)
}

.modal-overlow>.modal>.img-module {
	height: 100%
}

.modal-overlow>.modal>.img-module>.editor-top {
	height: 30rem;
	position: relative;
	background: var(--bg)
}

.modal-overlow>.modal>.img-module>.editor-top>.editor-images>.windows-images {
	position: absolute;
	width: 400px;
	height: 400px;
	left: 90px;
	top: 50%;
	margin-top: -200px
}

.modal-overlow>.modal>.img-module>.button {
	height: 5rem;
	display: flex;
	padding: 1rem;
	background: var(--bg);
	justify-content: space-between;
	border-top: 1px solid var(--bg-light);
	align-items: center
}

.modal-overlow>.modal>.img-module>.button>.left {
	display: flex;
	gap: 1rem
}

.modal-overlow>.modal>.img-module>.button>.left>button {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--bg-blue);
	border-radius: 1.5rem;
	color: #fff
}

.modal-overlow>.modal>.img-module>.button>.left>button:hover {
	color: #fff;
	background: var(--bg-button-hover)
}

.modal-overlow>.modal>.img-module>.button>.left>button>svg {
	height: 1.2rem;
	width: 1.2rem
}

.modal-overlow>.modal>.img-module>.button>.right {
	display: flex;
	gap: 1rem;
	align-items: center
}

.modal-overlow>.modal>.img-module>.button>.right>button {
	padding: 0.4rem 2rem;
	background: var(--bg-blue);
	color: #fff;
	border-radius: 1.5rem;
	font-size: 0.9rem;
	height: 2.5rem;
	font-size: 1rem
}

.modal-overlow>.modal>.img-module>.button>.right>button:hover {
	color: #fff;
	background: var(--bg-button-hover)
}

.modal-overlow>.modal>.img-module>.button>.right>button:first-child {
	background: transparent;
	padding: 0;
	color: var(--bg-button-dark);
	font-weight: 600
}

.checkbox-btn-group {
	display: flex;
	gap: 0.5rem
}

.checkbox-btn-group:after {
	content: "";
	clear: both;
	display: block
}

.checkbox-btn-group label {
	display: inline-block;
	float: left;
	margin: 0;
	user-select: none;
	position: relative
}

.checkbox-btn-group input[type=checkbox] {
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0
}

.checkbox-btn-group span {
	display: flex;
	cursor: pointer;
	line-height: 30px;
	transition: background 0.2s ease;
	border: 1px solid transparent;
	background-color: var(--bg);
	padding: 0.5rem;
	width: 3rem;
	height: 3rem;
	font-size: 1.1rem;
	color: var(--color-dark);
	font-weight: 500;
	border-radius: 0.3rem;
	align-items: center;
	justify-content: center;
	transition: .3s;
	box-shadow: 0 2px 2px #1f1f1f17
}

.checkbox-btn-group span:hover {
	border: 1px solid #53525236
}

.checkbox-btn-group input[type=checkbox]:checked+span {
	background: var(--bg-button-hover);
	color: var(--bg-fff)
}

.checkbox-btn-group .focused span {
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25)
}

.my-calendar {
	background: var(--bg);
	padding: .5rem 0rem .5rem 0rem;
	margin-top: .3rem;
	width: 80%;
	border-radius: .5rem;
	border: 1px solid #d7d7d7
}

.my-calendar>.top {
	display: flex;
	gap: .5rem;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #d7d7d7;
	padding: .5rem;
	font-weight: 600;
	font-size: 1.1rem
}

.my-calendar>.top>.mount {
	cursor: pointer;
	transition: .3s
}

.my-calendar>.top>.mount:hover {
	color: var(--bg-button)
}

.my-calendar>.top>.year {
	cursor: pointer;
	transition: .3s
}

.my-calendar>.top>.year:hover {
	color: var(--bg-button)
}

.my-calendar>.mountlist {
	gap: 0.5rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 1rem;
	width: 100%;
	height: 10rem
}

.my-calendar>.mountlist.hide {
	display: none
}

.my-calendar>.mountlist>div {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-light);
	padding: .7rem;
	font-size: .8rem;
	font-weight: 600;
	border-radius: .5rem;
	transition: .3s;
	cursor: pointer
}

.my-calendar>.mountlist>div:hover {
	background: var(--bg-button-hover);
	color: var(--bg)
}

.my-calendar>.mountlist>div.active {
	background: var(--bg-button-hover);
	color: var(--bg)
}

.my-calendar>.yearlist {
	height: 10rem;
	text-align: center;
	overflow: hidden
}

.my-calendar>.yearlist.hide {
	display: none
}

.my-calendar>.yearlist>ul {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	overflow-y: scroll;
	height: 100%;
	padding: .5rem;
	scrollbar-color: var(--bg-button-hover) var(--bg-fff);
	scrollbar-width: thin
}

.my-calendar>.yearlist>ul>li {
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer
}

.my-calendar>.yearlist>ul>li:hover {
	color: var(--bg-button)
}

.my-calendar>.yearlist>ul>li.active {
	font-size: 1.4rem;
	font-weight: 600
}

.template {
	color: var(--color-dark);
	background: var(--bg);
	padding: 1.5rem;
	border-radius: 1.5rem
}

.template>h1 {
	text-align: center
}

.template>h1.preview {
    font-size: 1.2rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.template>.choice {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	margin: 1rem auto 1rem auto;
	width: 210mm;
	padding: .2rem;
	border-radius: 2.5rem;
	border: 1px solid #29292826;
}

.template>.choice>button {
	font-size: 1.1rem;
	padding: 1rem .5rem;
	font-weight: 600;
	color: var(--bg-disabled);
	border-radius: 2.5rem;
}
.template>.choice>button:hover {
	color: var(--bg-button);
}

.template>.choice>button.active {
	background: var(--bg-blue);
	color: var(--bg-fff);
}

.template>.resume-box {
	width: max-content;
	background: var(--bg-fff);
	border-radius: 1.5rem;
	margin: 0 auto 0rem auto;
	border: 1px solid #29292826;
}

.template>.resume-box>.preview-r {
	width: 210mm
}

.template>.subscription {
	padding: 1.5rem 0 1.5rem 0;
	border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 210mm;
	margin: 0 auto 2rem auto
}

.template>.subscription>.button {
	display: flex;
	gap: 1rem;
	justify-content: flex-end
}

.template>.subscription>.button>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1.1rem
}

.template>.subscription>.button>button>svg {
	width: 1.1rem;
	height: 1.1rem
}

.template>.subscription>.button>button>.submit {
	width: 3rem;
	height: 1.2rem;
	margin: 0 auto
}

.template>.subscription>.button>button:hover {
	background: var(--bg-button-hover)
}

.template>.subscription>.button>button[disable="disable"] {
	border: 1px solid #29292826;
	background: transparent;
	color: var(--bg-disabled);
	cursor: no-drop
}

.template>.subscription>.link {
	display: flex;
	flex-direction: column
}

.template>.subscription>.link>label {
	display: block;
	font-size: 1.1rem;
	padding-bottom: .5rem;
	font-weight: 600;
	color: var(--color-dark)
}

.template>.subscription>.link>.block {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem
}

.template>.subscription>.link>.block>input {
	width: 100%;
	padding: 1rem;
	border-radius: 3rem;
	font-size: 1rem;
	font-weight: 500;
	transition: .3s;
	height: 54px;
	background: transparent;
	color: var(--color-dark);
	border: 2px solid #53525252
}

.template>.subscription>.link>.block>input[disable="disable"] {
	border: 1px solid #29292826;
	background: transparent;
	color: var(--bg-disabled);
	cursor: no-drop
}

.template>.subscription>.link>.block>button {
	position: relative;
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 1rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1.1rem;
	white-space: nowrap
}

.template>.subscription>.link>.block>button.copy[data-resume="copy"]:after {
	content: attr(data-title);
	position: absolute;
	background: var(--color-dark);
	width: max-content;
	bottom: 103%;
	right: 0;
	padding: .5rem 1rem;
	font-size: .8rem;
	border-radius: 2rem
}

.template>.subscription>.link>.block>button>svg {
	width: 1.1rem;
	height: 1.1rem
}

.template>.subscription>.link>.block>button:hover {
	background: var(--bg-button-hover)
}

.template>.subscription>.link>.block>button[disable="disable"] {
	border: 1px solid #29292826;
	background: transparent;
	color: var(--bg-disabled);
	cursor: no-drop
}

.template>.title-subscription {
	padding: 1.5rem;
	background: transparent;
	text-align: center;
	color: var(--color-dark);
	border-radius: 1.5rem
}

.template>.title-subscription>p {
	width: 80%;
	margin: 0 auto
}

.template>.title-subscription>p>span {
	display: block;
	background: var(--bg-blue);
	width: max-content;
	padding: .7rem 1.5rem;
	border-radius: 2rem;
	margin: 1rem auto 0 auto;
	font-size: 1.2rem;
	color: var(--bg)
}

.tariff {
	background: #41566C;
	padding: 1.5rem;
	border-radius: 1.5rem;
	display: grid;
	gap: .5rem;
	color: var(--bg-fff);
	margin-top: 2rem
}

.tariff.hide {
	display: none
}

.tariff>h2 {
	text-align: center;
	font-size: 1.6rem;
	font-weight: 600
}

.tariff>h2>span {
	color: #FFF940
}

.tariff>h2>span>b {
	font-weight: 600
}

.tariff>.cost {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	padding-bottom: 1rem
}

.tariff>.cost>span {
	color: #FFF940
}

.tariff>.cost>span>b {
	font-weight: 600
}

.tariff>.checkbox {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: 70%;
	margin: 0 auto;
	font-size: .85rem
}

.tariff>.checkbox>label {
	display: block;
	height: 2.5rem;
}

.tariff>.checkbox input[type=checkbox] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0
}

.tariff>.checkbox span {
	display: inline-block;
	position: absolute;
	padding: 0 0 0 35px;
	transition: .3s;
	cursor: pointer;
	font-weight: 500
}

.tariff>.checkbox span>a {
	text-decoration: underline
}

.tariff>.checkbox span:before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 1.2rem;
	top: -3px;
	height: 1.2rem;
	left: 0;
	-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	background-color: transparent;
	border: 2px solid #e3e3e3;
	border-radius: 0.3rem
}

.tariff>.checkbox input[type=checkbox]:checked+span:before {
	background-image: url(/template/img/check-white.svg);
	background-size: 74%;
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 4px;
	background-position-x: 3px;
	background-color: var(--bg-blue);
	border: 2px solid var(--bg-blue)
}

.tariff>.button {
	text-align: center;
	padding-top: 1rem;
}

.tariff>.button>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.9rem 2.3rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	font-size: 1.1rem
}

.tariff>.button>button:hover {
	background: var(--bg-button-hover)
}

.tariff>.button>button:disabled {
	background: var(--bg-disabled);
	cursor: no-drop
}

.tariff>.button>button>svg {
	width: 4rem
}

.title-final {
	font-size: 1.2rem;
	font-weight: 600;
	padding-top: 2rem
}

.title-final>ol {
	padding-top: .3rem;
	line-height: 1.3rem
}

.title-final>ol>li {
	font-size: .95rem;
	font-weight: 500
}

.title-final>ol>li>a {
	color: var(--bg-button)
}

.title-final>ol>li>a:hover {
	color: var(--bg-button-hover)
}

.modal-email,
.modal-pdf-mail {
	background: #000000c7
}

.modal-email>.modal,
.modal-pdf-mail>.modal {
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--bg);
	position: relative;
	width: 32rem
}

.modal>.closed-modal {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	background: #EB4B33;
	color: var(--bg);
	border-radius: 50%;
	right: .5rem;
	top: .5rem;
	display: flex;
	align-items: center;
	justify-content: center
}

.modal>.closed-modal:hover {
	background: #eb4b33d4
}

.modal>.closed-modal:hover svg {
	transform: scale(.95)
}

.modal>.closed-modal>svg {
	width: 1.7rem;
	height: 1.7rem
}

.email-module,
.email-pdf {
	color: var(--color-dark)
}

.email-module>h1,
.email-pdf>h1 {
	font-size: 1.3rem;
	padding-bottom: 1.5rem
}

.email-module>p,
.email-pdf>p {
	font-size: .9rem;
	padding-bottom: 1.5rem
}

.email-module>.form-group>input,
.email-pdf>.form-group>input {
	background: transparent;
	color: var(--color-dark);
	border: 2px solid #53525252
}

.email-module>.form-group>input:placeholder,
.email-pdf>.form-group>input:placeholder {
	color: var(--bg-fff)
}

.email-module>.footer,
.email-pdf>.footer {
	padding-top: 2rem;
	display: flex;
	justify-content: center
}

.email-module>.footer>button,
.email-pdf>.footer>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 1rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	font-size: 1.1rem;
	width: 100%;
	justify-content: center;
	border: 2px solid var(--bg-button)
}

.email-module>.footer>button>svg,
.email-pdf>.footer>button>svg {
	width: 5rem
}

.email-module>.footer>button:hover,
.email-pdf>.footer>button:hover {
	background: var(--bg-button-hover);
	border: 2px solid var(--bg-button-hover)
}

.email-module>.footer>button:disabled,
.email-pdf>.footer>button:disabled {
	background: var(--bg);
	border: 2px solid rgb(83 82 82 / 50%);
	cursor: no-drop;
	color: rgb(83 82 82 / 50%)
}

.news-block {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 3rem
}

.news-block {
	padding-bottom: 2rem;
}

.news-block>section {
	background: var(--bg-light);
	padding: 1.5rem;
	border-radius: 1.5rem;
	color: var(--color-dark);
	height: max-content
}

.news-block>section>.name {
	font-size: .9rem;
	font-weight: 600;
	height: 3rem
}
.news-block>section>.name {
	height: auto;
}

.news-block>section>.img {
	padding: .8rem 0
}

.news-block>section>.img>img {
	width: 100%;
	border-radius: 1.5rem
}
.news-block>section>.img>img {
	border-radius: 1rem
}

.news-block>section>.title {
	font-size: .9rem;
	font-weight: 500
}

.news-block>section>.footer {
	padding-top: 1.3rem;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.news-block>section>.footer>a {
	padding: .7rem 2.5rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	text-align: center;
	font-size: 1rem;
	color: var(--bg-fff);
	background: var(--bg-button-dark)
}

.news-block>section>.footer>a:hover {
	color: var(--bg-fff);
	background: var(--bg-button-dark-hover)
}

.news-block>section>.footer>a {
	justify-content: center;
	width: max-content;
}

.news-block>section>.footer>span {
	font-size: .8rem;
	font-weight: 600
}

.news-detailed {
	display: flex;
	gap: 2rem;
	margin-top: 1rem
}

.news-detailed>.left {
	padding: 1.5rem;
	background: var(--bg);
	border-radius: 1.5rem;
	display: grid;
	gap: .6rem
}

.news-detailed>.left>p {}

.news-detailed>.left>.img {
	width: max-content;
	overflow: hidden;
	padding: 1rem 0rem
}

.news-detailed>.left>.img>img {
	border-radius: 1.5rem
}

.news-detailed>.left>h3 {
	padding: 1rem 0rem 0rem 0rem
}

.news-detailed>.left>ol {
	background: var(--bg-button-dark);
	padding: 1rem 1.5rem;
	border-radius: 1rem;
	color: var(--bg-fff);
	line-height: 1.3rem;
	font-size: .9rem;
	width: max-content
}

.news-detailed>.left>ol>li {
	list-style-type: disc;
	margin-left: 1rem;
	font-weight: 500
}

.news-detailed>.left>.snocka {
	background: var(--bg-button-dark);
	padding: 1.5rem;
	border-radius: 1rem;
	color: var(--bg-fff);
	width: max-content
}

.news-detailed>.left>.snocka>ol {
	line-height: 1.2rem
}

.news-detailed>.left>.snocka>ol>li {
	font-size: .9rem
}

.news-detailed>.right {
	height: max-content;
	padding: 1rem 2rem;
	background: var(--bg-fff);
	white-space: nowrap;
	text-align: center;
	border-radius: 1.5rem
}

.news-detailed>.right>p {
	font-weight: 500;
	font-size: .9rem;
	line-height: 1.5rem
}

.news-detailed>.right>p>a {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.5rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content;
	margin-top: 1rem
}

.news-detailed>.right>p>a:hover {
	background: var(--bg-button-hover)
}

.example {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    flex-direction: column;
}
.example>.left {
    background: var(--bg);
    padding: 1.5rem;
    border-radius: 1.5rem;
}
.example>.left>div {
    padding-bottom: 1rem;
}
.example>.left>div>h2 {
    padding-bottom: .5rem;
}
.example>.left>div>p {
	padding-bottom: .3rem;
}


.example>.menu {
	background: var(--bg);
	padding: 1rem;
	border-radius: 1.5rem;
	white-space: nowrap;
	height: max-content;
}
.example>.menu>p {
    font-size: 1.2rem;
    border-bottom: 1px solid #1f1f1f1c;
    padding-bottom: .5rem;
    text-align: center;
    font-weight: 600;
}
.example>.menu>ul {
    padding: .5rem 0;
    gap: 1rem;
    display: grid;
}
.example>.menu>ul>div {
	display: grid;
	gap: .3rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.example>.menu>ul>div>li>a {
    display: block;
    color: var(--bg-button-dark);
    padding: .4rem .5rem .4rem 1rem;
    border-radius: 1.5rem;
}
.example>.menu>ul>div>li>a:hover {
    background: var(--bg-button);
    color: var(--bg-fff);
}

.news-example>.preview-example {
	border-radius: 1.5rem;
    margin: 0 auto 0rem auto;
    width: 100%;
    overflow: scroll;
}
.news-example>.preview-example>.classic {
	width: 210mm;
    background: var(--bg);
    margin: 0 auto;
    border-radius: 1.5rem;
}
.news-example>.preview-example>.classic ol, .news-example>.preview-example>.classic ul {
	line-height: 1.6rem;
}
.news-example>.preview-example>.classic ol>li, .news-example>.preview-example>.classic ul>li {
    list-style-type: circle;
    margin-left: 2rem;
}
.news-example>.example-title {
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg);
    border-radius: 1.5rem;
}
.news-example>.example-title>h1 {
    font-size: 1.5rem;
    padding-bottom: 1rem;
}
.news-example>.example-title>h2 {
    padding-bottom: 1rem;
    font-size: 1.3rem;
}
.news-example>.example-title>h3 {
    padding: 1rem 0 .7rem 0;
    font-size: 1.1rem;
}
.news-example>.example-title>p {
    padding-bottom: .5rem;
}
.news-example>.example-title>ol, .news-example>.example-title>ul {
    line-height: 1.7rem;
}
.news-example>.example-title ol>li, .news-example>.example-title ul>li {
    list-style-type: disc;
    margin-left: 2rem;
}
.news-example>.example-title ol.number>li {
    list-style-type: decimal;
}

.news-example>.example-title>ol ul li {
	list-style-type: circle;
	margin-left: 2rem;
}
.news-example>.example-title b {
	font-weight: 600;
}






.mobile-menu {
	display: none;
	justify-content: space-between;
	width: 100%;
	margin: 1rem auto 0 auto;
	align-items: center
}

.mobile-menu>.logotype {
	height: max-content
}

.mobile-menu>.logotype>a {
	display: block;
	width: max-content;
	color: var(--color-dark)
}

.mobile-menu>.logotype>a>svg {
	height: 3rem;
	width: 11rem
}

.mobile-menu>.button {}

.mobile-menu>.button>button {
	color: var(--bg-button)
}

.mobile-menu>.button>button:hover {
	color: var(--bg-button-hover)
}

.mobile-menu>.button>button>svg {
	width: 2.1rem;
	height: 2.1rem
}

.mobile-menu>.hidden-menu {
	position: absolute;
	width: 100%;
	right: 0;
	top: 0;
	height: 100vh;
	background: var(--bg-dark);
	z-index: 9
}

.mobile-menu>.hidden-menu {
	max-height: 0;
	transition: max-height .2s ease-in-out;
	overflow: hidden;
	z-index: 3
}

.mobile-menu>.hidden-menu.hide {
	max-height: 100vh;
	transition: max-height .2s ease-in-out
}

.mobile-menu>.hidden-menu>.top {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto 0 auto;
	align-items: center;
	padding: 1rem 0
}

.mobile-menu>.hidden-menu>.top>.logotype>a {
	display: block;
	width: max-content
}

.mobile-menu>.hidden-menu>.top>.logotype>a>svg {
	height: 3rem;
	width: 11rem
}

.mobile-menu>.hidden-menu>.top>.closed-mobile {
	color: var(--bg-button)
}

.mobile-menu>.hidden-menu>.top>.closed-mobile>svg {
	width: 2.1rem;
	height: 2.1rem
}

.mobile-menu>.hidden-menu>.user {
	width: 90%;
	margin: 2rem auto 1.5rem auto;
	padding: 0
}

.mobile-menu>.hidden-menu>.user>.login-error-m {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: 0.7rem 1.3rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	font-weight: 500;
	width: max-content
}

.mobile-menu>.hidden-menu>.user>.login-error-m>svg {
	width: 1.1rem;
	height: 1.1rem
}

.mobile-menu>.hidden-menu>.user>.login-form-m {
	display: none;
	color: var(--bg);
	font-size: .9rem;
	background: #2f2f2f;
	padding: 1rem;
	margin-top: 1rem;
	border-radius: 1.5rem
}

.mobile-menu>.hidden-menu>.user.show>.login-form-m {
	display: block
}

.mobile-menu>.hidden-menu>.user>.login-form-m>div {}

.mobile-menu>.hidden-menu>.user>.login-form-m>div>p {}

.mobile-menu>.hidden-menu>.user>.login-form-m>div>.group {
	padding: .7rem 0
}

.mobile-menu>.hidden-menu>.user>.login-form-m>div>.group>input {
	width: 100%;
	padding: 1rem 1rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	background: #1f1f1f;
	font-size: 1rem;
	font-weight: 500;
	color: var(--bg-fff);
	transition: .3s
}

.mobile-menu>.hidden-menu>.user>.login-form-m>div>button {
	color: var(--bg-fff);
	background: var(--bg-button);
	padding: .8rem 1.1rem;
	border-radius: 2rem;
	text-align: center;
	font-size: 1.1rem;
	width: 100%;
	margin-bottom: .5rem
}

.mobile-menu>.hidden-menu>.user>.login-form-m>div>button:disabled {
	background: var(--bg-button-dark-hover);
	cursor: no-drop
}

.mobile-menu>.hidden-menu>ul {
	width: 90%;
	margin: 0rem auto 1.5rem auto;
	padding: 0
}

.mobile-menu>.hidden-menu>ul>li {
	padding-bottom: 1rem
}

.mobile-menu>.hidden-menu>ul>li>a {
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: 600
}

.mobile-menu>.hidden-menu>.user>.login-succes {
	position: relative;
	padding: 0.55rem 1rem;
	color: var(--bg-light);
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 1rem 1rem 0 0;
	font-weight: 500;
	width: max-content;
	bottom: -2px;
	background: var(--bg-blue)
}

.mobile-menu>.hidden-menu>.user>.login-succes>img {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%
}

.mobile-menu>.hidden-menu>.user>.login-succes>svg {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--bg);
	color: var(--bg-blue);
	padding: .2rem
}

.mobile-menu>.hidden-menu>.user>ul {
	display: grid;
	gap: 1rem;
	background: var(--bg-blue);
	padding: 1rem;
	border-radius: 0 1rem 1rem 1rem
}

.mobile-menu>.hidden-menu>.user>ul>li>a {
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: 600
}

.mobile-scroll {
	display: none;
	text-align: center;
	padding: .5rem;
	font-weight: 600
}

.cl404 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.cl404>.box {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center
}

.cl404>.box>h1 {
	font-size: 5rem
}

.cl404>.box>h3 {
	font-size: 2rem
}

.cl404>.box>a {
	display: block;
	background: var(--bg-blue);
	padding: 1rem;
	border-radius: 1.5rem;
	width: max-content;
	margin-top: 1rem;
	font-weight: 600
}

.cl404>.box>a:hover {
	background: var(--bg-button-hover)
}

.coockie {
	position: fixed;
	margin: 0 auto;
	background: var(--bg-blue);
	padding: .7rem 1rem;
	border-radius: 1.5rem;
	color: var(--bg-fff);
	display: flex;
	gap: 1rem;
	align-items: center;
	bottom: 2rem;
	left: 0;
	right: 0;
	width: max-content;
	z-index: 9
}

.coockie>button {
	color: var(--bg-dark);
	background: var(--bg-fff);
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	border-radius: 2rem;
	width: max-content;
	font-size: 1rem
}

.coockie>button:hover {
	background: #e3e1e1
}

.new-resume {
	background: var(--bg-dark);
	padding: .8rem 2rem;
	border-radius: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 3px solid #EB4B33;
	margin-top: 1rem
}

.new-resume>.title>p {
	color: var(--bg-fff)
}

.new-resume>.button>.load-resum {
	color: var(--bg-fff);
	cursor: pointer;
	width: max-content;
	padding: .7rem 2rem;
	border-radius: 1.5rem;
	background: var(--bg-blue);
	font-size: 1rem;
	font-weight: 600
}

.new-resume>.button>.load-resum:hover {
	background: var(--bg-button-hover)
}

.new-resume>.button>.delited-resum {
	color: var(--bg);
	cursor: pointer;
	width: max-content;
	padding: .7rem 2rem;
	border-radius: 1.5rem;
	background: #EB4B33;
	font-size: 1rem;
	font-weight: 600
}

.new-resume>.button>.delited-resum:hover {
	background: #eb4b33c9
}

@media (min-width:901px) and (max-width:1025px) {
	body>.center {
		width: 900px
	}

	.list-res>.left>.button {
		width: 100%
	}

	footer>div {
		width: 900px
	}

	footer>div>.center>ul>li>a {
		font-size: .6rem
	}

	.pressa>.box>.news>section>.date {
		font-size: .8rem
	}

	.pressa>.box>.news>.block>h1 {
		font-size: .9rem
	}

	.tariff>.checkbox>label {
		display: block;
		height: max-content
	}

	.tariff>.checkbox span {
		display: inline-block;
		position: absolute;
		padding: 0 0 0 35px;
		transition: .3s;
		cursor: pointer;
		font-weight: 500;
		color: #ffffff99;
	}

	.tariff>.checkbox span>a {
		color: #ffffff99;
	}

	.news-detailed {
		flex-direction: column-reverse
	}

	.news-detailed>.left>ol {
		width: 100%
	}

	.news-detailed>.right {
		width: max-content
	}
}

@media (min-width:701px) and (max-width:900px) {
	.mobile-scroll {
		display: block
	}

	body.template {
		background: var(--bg-light);
		padding: 0
	}

	.top-menu {
		display: none
	}

	.mobile-menu {
		display: flex
	}

	body>.center {
		width: 90%
	}

	.main>.icon-box>.icon-index:nth-child(2) {
		top: 57%;
		left: 0
	}

	.main>.icon-box>.icon-index:nth-child(5) {
		right: 1%;
		top: 54%
	}

	.main>h1 {
		font-size: 3rem
	}

	.main>.main-text {
		padding-bottom: 2rem
	}

	.main {
		padding: 4rem 0 9rem 0
	}

	.step>.flex {
		gap: 1rem
	}

	.step>.flex>.box>.block>section>h3 {
		font-size: 1.3rem
	}

	.step>.flex>.box>.block>section>p {
		font-size: .9rem
	}

	.list-res {
		display: flex;
		gap: 2rem;
		padding-top: 0;
		flex-direction: column
	}

	.step {
		padding: 2rem 0 2rem 0
	}

	.list-res>.left {
		align-items: center
	}

	.list-res>.left>h2 {
		font-size: 2.1rem;
		text-align: center
	}

	.list-res>.left>p {
		text-align: center;
		padding-bottom: 1rem
	}

	.list-res>.right>.images>img {
		width: 100%
	}

	.reviews {
		padding: 2rem 0 2rem 0
	}

	.reviews>.boxed {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.reviews>.boxed>section:nth-last-child(1) {
		display: none
	}

	.faq>.box {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.pressa>.box {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.pressa>.box>.news:nth-last-child(1) {
		display: none
	}

	footer>div {
		width: 90%;
		align-items: center
	}

	footer>div>.center {
		display: flex;
		gap: .5rem;
		flex-direction: column;
		width: 100%;
		justify-content: center
	}

	footer>div>.center>ul {
		flex-wrap: wrap
	}

	footer>div>.center>ul>li {
		width: max-content
	}

	.form-group-checkbox {
		height: 5.5rem
	}

	.news-block {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.price>.top>.box>h1 {
		font-size: 1.5rem
	}

	.price>.top>.box>.cost {
		font-size: 2.5rem
	}

	.price>.footer>.box>div>.title {
		padding: 1rem 1rem 1rem 3rem;
		display: flex;
		align-items: center;
		font-size: .9rem
	}

	.price>.footer>.box>div>.title::after {
		top: 0;
		bottom: 0;
		margin: auto 0
	}

	.main.resume-main {
		padding: 4rem 0 0rem 0
	}

	.main.resume-main>h1 {
		font-size: 3.5rem
	}

	.resume>section>.footer .class-form {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1.3rem 0
	}

	.resume>section>.footer .class-form>.rows-top {
		grid-column: 1 / 4;
		gap: 1.3rem
	}

	.resume>section>.footer .class-form>.rows-top>.rows {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1.3rem
	}

	.resume>section>.footer .class-form>.images {
		padding: 1.3rem 0
	}

	.resume>section>.footer .class-form>.rows {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.resume-checkbox {
		position: relative;
		height: 30px;
		display: flex;
		align-items: center
	}

	.resume-checkbox span {
		display: flex;
		height: 30px;
		align-items: center
	}

	.resume-checkbox span:before {
		top: auto
	}

	body.template .main {
		padding: 4rem 0 2rem 0
	}

	.template>.choice {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.template>.resume-box {
		width: 100%;
		overflow: scroll
	}

	.template>.resume-box>.preview-r {
		padding: 1rem
	}

	.template>.subscription {
		width: 100%;
		margin: 0 auto 0rem auto
	}

	.template>.subscription>.button {
		gap: .5rem
	}

	.template>.subscription>.button>button {
		font-size: .9rem
	}

	.template>.subscription>.link>.block {
		gap: .5rem
	}

	.template>.title-subscription>p {
		width: 100%
	}

	.template>.subscription>.link>.block>button {
		font-size: .9rem
	}

	.template>.title-subscription>p>span {
		width: 100%
	}

	.template>.subscription>.link>.block>input {
		height: 49px
	}

	.price.final>.top>.box>h1 {
		font-size: 1.2rem;
		padding-bottom: .5rem
	}

	.price.final>.top>.box>.cost {
		font-size: 2rem
	}

	.price.final>.top>.box>button {
		padding: 0.8rem 1.3rem;
		font-size: .9rem
	}

	.price.final>.top {
		gap: .5rem
	}

	.price.final>.footer>.box>div>.title {
		padding: .6rem 1rem .6rem 3.5rem
	}

	.price.final>.footer>.box>div>.title::after {
		width: 1.7rem;
		height: 1.7rem;
		background-position-y: 7px;
		background-size: 61%;
		left: 13px;
		top: 0;
		margin: auto 0
	}

	.price>.top>.box>button.active:after {
		right: 0.3rem
	}

	.tariff>.checkbox {
		width: 90%
	}

	.tariff>.checkbox>label {
		display: block;
		height: max-content
	}

	.tariff>.checkbox span {
		position: relative
	}

	.tariff>.button {
		padding-top: 1rem
	}

	.personal {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		padding-top: 0rem
	}

	.personal>.setting {
		max-height: max-content
	}
	.example>.menu>ul>div {
		display: grid;
		gap: .3rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width:700px) {
	.coockie {
		width: 90%;
		display: flex;
		flex-direction: column;
		text-align: center
	}

	.mobile-scroll {
		display: block
	}

	.top-menu {
		display: none
	}

	.mobile-menu {
		display: flex
	}

	.main {
		padding: 2rem 0 4rem 0
	}

	.main>h1 {
		font-size: 2.5rem;
		padding-bottom: 3.5rem
	}

	.main>h1>p>span {
		padding: 0rem 1rem 0.5rem 1rem
	}

	.main>.index-title {
		font-size: 1.1rem
	}

	body>.center {
		width: 90%
	}

	.main>.index-title>span::after {
		left: -0.9;
		bottom: -1.95rem
	}

	.main>.icon-box>.icon-index:nth-child(1) {
		top: 23%;
		left: 2%
	}

	.main>.icon-box>.icon-index:nth-child(1)>svg {
		width: 45.9px;
		height: 40.17px
	}

	.main>.icon-box>.icon-index:nth-child(4) {
		top: 22%
	}

	.main>.icon-box>.icon-index:nth-child(4)>svg {
		width: 45.9px;
		height: 40.17px
	}

	.main>.icon-box>.icon-index:nth-child(2) {
		top: 30%;
		left: 23%
	}

	.main>.icon-box>.icon-index:nth-child(2)>svg {
		width: 45.9px;
		height: 40.17px
	}

	.main>.icon-box>.icon-index:nth-child(5) {
		top: 30%;
		right: 18%
	}

	.main>.icon-box>.icon-index:nth-child(5)>svg {
		width: 45.9px;
		height: 40.17px
	}

	.main>.icon-box>.icon-index:nth-child(6) {
		bottom: 22%;
		right: 3%
	}

	.main>.icon-box>.icon-index:nth-child(6)>svg {
		width: 74.3px;
		height: 81.54px
	}

	.main>.icon-box>.icon-index:nth-child(3) {
		bottom: 23%;
		left: 8%
	}

	.main>.icon-box>.icon-index:nth-child(3)>svg {
		width: 66.3px;
		height: 58.54px
	}

	.main>.main-text {
        padding-bottom: 3rem;
    }
	.main>.button {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.main>.button>a {
		padding: 1rem 1.9rem;
		display: flex;
        justify-content: center;
	}

	.step {
		padding: 1rem 0 2rem 0;
		width: 90%;
		margin: 0 auto
	}

	.step>h2 {
		font-size: 1.2rem
	}

	.step>.flex {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.list-res {
		gap: 2rem;
		padding-top: 0rem;
		flex-direction: column
	}

	.list-res>.left>h2 {
		font-size: 1.2rem;
		text-align: center
	}

	.list-res>.left>.button {
		width: 100%
	}

	.list-res>.left>.button>button {
		font-size: .9rem;
		padding: 1rem 1rem
	}

	.list-res>.left>a {
		display: none
	}

	.list-res>.left>p {
		text-align: center
	}

	.list-res>.right>.images {
		right: 0
	}

	.list-res>.right>.images>img {
		width: 100%
	}

	.reviews {
		padding: 1rem 0 2rem 0
	}

	.reviews>h2 {
		font-size: 1.2rem;
		padding-bottom: .5rem
	}

	.reviews>.boxed>section {
		width: 90%;
		margin: 0 auto
	}

	.reviews>.boxed {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.faq>.box>section>div>.title>ol {
		font-size: .8rem
	}

	.faq>.box {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.faq>h2 {
		padding-bottom: 1rem;
		font-size: 1.2rem
	}

	.faq>.box>section>div>h3 {
		font-size: 1rem
	}

	.pressa {
		padding: 2rem 0 0 0
	}

	.pressa>h2 {
		font-size: 1.2rem;
		padding-bottom: 1rem
	}

	.pressa>.box {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	footer>div {
		width: 90%;
		flex-direction: column
	}

	footer>div>.center>ul {
		flex-wrap: wrap;
		justify-content: center
	}

	footer>div>.center>.copyright {
		text-align: center
	}

	footer>div>.logotype {
		display: flex;
		align-items: center;
		padding-right: 0;
		margin-right: 0;
		justify-content: center
	}

	footer>div>.center {
		padding: 1rem 0rem
	}

	footer>div>.mail {
		float: right;
		display: flex;
		justify-content: center
	}

	.main.other>h1 {
		padding-bottom: 1.5rem
	}

	.main.other>.button>a {
		font-size: 1rem
	}

	.news-block {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		padding-top: 2rem
	}

	.news-block>section>.name {
		height: auto
	}

	.news-detailed {
		gap: 1rem;
		margin-top: 0rem;
		flex-direction: column-reverse
	}

	.news-detailed>.right>p>a {
		margin-top: 1rem;
		justify-content: center;
		width: 100%
	}

	.news-detailed>.left {
		display: block
	}

	.news-detailed>.left>ol,
	.news-detailed>.left>.snocka {
		width: 100%
	}

	.news-detailed>.left>p {
		padding-bottom: .5rem
	}

	.main.resume-main {
		padding: 2rem 0 0rem 0
	}

	.resume>section>.footer .class-form {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1.3rem 0
	}

	.resume>section>.footer .class-form>.rows-top {
		grid-column: 1 / 4;
		gap: 1.3rem
	}

	.resume>section>.footer .class-form>.rows-top>.rows {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1.3rem
	}

	.resume>section>.footer .class-form>.images {
		padding: 1.3rem 0
	}

	.resume>section>.footer .class-form>.rows {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.resume-checkbox {
		position: relative;
		height: 30px;
		display: flex;
		align-items: center
	}

	.resume-checkbox span {
		display: flex;
		height: 30px;
		align-items: center
	}

	.resume-checkbox span:before {
		top: auto
	}

	.resume-group>.block>textarea {
		padding: 1rem 2rem 1rem 1rem
	}

	.resume>section>.top>.text>.name {
		flex-direction: column;
		align-items: flex-start
	}

	.resume>section>.footer>.class-form-other>.resume-button>button {
		font-size: .8rem
	}

	.resume>section>.footer>.class-form-other>.resume-button>button>svg {
		width: 1rem;
		height: 1rem
	}

	.resume>section>.top>.text>.name>span {
		display: none
	}

	.resume>section>.footer .class-form>.rows.two {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.resume {
		padding: 1.5rem 0rem 1.5rem 0rem
	}

	.checkbox-btn-group {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap
	}

	.main-faq>.box>.button>h1 {
		font-size: 1rem
	}

	.form-group-checkbox {
		height: 8.5rem
	}

	.form-group-checkbox span {
		bottom: 0
	}

	.main.text>h1 {
		font-size: 1.5rem;
		padding-bottom: 1rem
	}

	.price>.top {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.price>.footer>.box {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1rem;
		padding-top: 1rem
	}

	.price>.footer>.box>div>.title::after {
		top: 0;
		bottom: 0;
		margin: auto 0
	}

	.resume>section>.top>.right>svg {
		width: 1.2rem;
		height: 1.2rem
	}

	body.template {
		padding: 0
	}

	body.template>.center>.main {
		padding: 2rem 0 0rem 0
	}

	body.template>.center>.main>h1 {
		padding-bottom: 1.5rem;
		font-size: 1.5rem
	}

	body.template>.center>.main>.main-text {
		padding-bottom: 1rem
	}

	.template>.choice {
		width: 100%;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		border-radius: 1.9rem;
	}

	.template>.resume-box {
		width: 100%;
		overflow: scroll
	}

	.template>.resume-box>.preview-r {
		padding: 1rem
	}

	.template>.subscription {
		width: 100%;
		padding: 1.5rem 0 0 0;
		margin: 0 auto 0rem auto
	}

	.template>.subscription>.button {
		justify-content: flex-end;
		flex-direction: column
	}

	.template>.subscription>.button>button {
		width: 100%;
		justify-content: center
	}

	.template>.subscription>.link>.block {
		flex-direction: column
	}

	.template>.subscription>.link>.block>button {
		width: 100%;
		justify-content: center
	}

	.template>.title-subscription {
		padding: 1.5rem 0 0 0
	}

	.template>.title-subscription>p>span {
		width: 100%;
		font-size: 1rem
	}

	.price.final {
		margin-top: 1rem;
		padding: 1rem 0 1rem 0;
		background: transparent
	}

	.price.final>.footer>.box>div>.title {
		font-size: .9rem;
		background: var(--bg-light)
	}

	.price.final>.top>.box {
		background: var(--bg-light)
	}

	.title-final {
		padding-top: 1rem
	}

	.tariff {
		margin-top: 1rem
	}

	.tariff>h2 {
		font-size: 1.1rem
	}

	.tariff>.cost {
		font-size: 1.2rem
	}

	.tariff>.checkbox {
		width: 100%
	}

	.tariff>.checkbox>label {
		display: block;
		height: max-content
	}

	.tariff>.checkbox span {
		position: relative
	}

	.personal {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}

	.personal>.setting {
		padding: 1rem 1rem 0.5rem 1rem;
		max-height: max-content
	}

	.personal>.notify {
		padding: 1rem 1rem 1rem 1rem
	}

	.personal>.notify>.box>section>div>.date {
		position: relative;
		top: 0;
		right: 0
	}

	.modal-img {
		padding-top: 3rem
	}

	.modal-img>.modal {
		width: 100%
	}

	.modal-overlow>.modal>.img-module>.editor-top>.editor-images>.windows-images {
		position: absolute;
		width: 340px;
		height: 340px;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 50%;
		margin-top: -209px
	}

	.croppie-container .cr-boundary {
		max-width: 340px;
		max-height: 340px
	}

	.croppie-container .cr-slider-wrap {
		position: relative !important;
		bottom: -4.05rem !important;
		width: 100% !important;
		left: 0 !important;
		padding: 1rem !important
	}

	.croppie-container .cr-viewport {
		width: 340px !important;
		height: 340px !important
	}
	
	.example>.menu>ul>div {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.personal>.setting>.user {
		position: relative;
		margin-bottom: 4rem;
	}
	.personal>.setting>.user>.delit-resume {
		top: 4rem;
	}
}