@charset "UTF-8";
.tarifes {
		position: relative;
		padding: 40px 0;
		text-align: center;
}

.tarifes .grid{
	margin-top: 50px;
}

.tarifes > input {
		position: absolute;
		transform: scale(0);
		opacity: 0;
		visibility: hidden;
}
.tarifes .title2 {
		margin: 0 0 20px 0;
}
.tarifes .checks {
		display: inline-flex;
		vertical-align: top;
		max-width: 100%;
		border: 2px solid var(--black);
		border-radius: 10px;
		padding: 4px;
		font: normal 18px/1 var(--font2);
		letter-spacing: -0.04em;
		gap: 4px;
		margin: 0 0 20px 0;
}
.tarifes .checks > * {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 12px;
		border-radius: 6px;
		transition-property: color, background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		cursor: pointer;
		user-select: none;
}
.tarifes input.yearly:checked ~ * .checks > .yearly, .tarifes input.monthly:checked ~ * .checks > .monthly {
		cursor: default;
		color: var(--white);
		background: var(--black);
}
.tarifes .grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		align-items: flex-start;
		gap: 20px;
}
.tarifes .el {
		position: relative;
		container-type: inline-size;
		container-name: tarifes-el;
}

.tarifes .el.no-active .bg::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #b9b9b963;
	left: 0;
	top: 0;
	z-index: 9;
}

.tarifes .el.no-active .bg{
	filter: blur(2px);
	opacity: 0.7;
}

/*.tarifes .el.accent {*/
/*		margin: 6px 0;*/
/*}*/
.tarifes .el.accent:before, .tarifes .el.accent:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 15px;
		z-index: 1;
}
.tarifes .el.accent:before {
		background: var(--accident);
		transform: rotate(-2deg);
}
.tarifes .el.accent:after {
		border: 2px solid var(--black);
		transform: rotate(2deg);
}
.tarifes .bg {
		background: var(--white);
		border-radius: 15px;
		position: relative;
		z-index: 2;
		padding: 30px 20px;
		font-weight: 500;
		font-size: 13px;
		line-height: 1.3;
	overflow: hidden;
}
.tarifes .name {
		font: normal 26px/1 var(--font2);
		letter-spacing: -0.05em;
		margin: 0 0 12px 0;
	/*display: flex;*/
	align-items: center;
	gap: 10px;
	justify-content: center;
}
.tarifes .name span {
		font-size: 18px;
		color: var(--grey);
}

.tarifes .name .beta{
	background: #05a31e;
	color: #fff;
	padding: 5px;
	border-radius: 6px;
	font-size: 14px;
	text-transform: uppercase;
}

.tarifes .tags {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 12px;
		line-height: 1;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		gap: 8px;
		margin: 0 0 12px 0;
}
.tarifes .tags div {
		font-size: 10px;
		flex: 0 0 auto;
		padding: 8px;
		background: var(--accident);
		border-radius: 6px;
}
.tarifes .top-text {
		margin: 0 0 18px 0;
		color: var(--grey);
}
.tarifes ul {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 0;
		text-align: left;
}
.tarifes li {
		position: relative;
		margin: 0;
		flex: 0 0 auto;
		width: 100%;
		padding: 9px 9px 9px 35px;
		border-radius: 8px;
		border: 1px solid var(--body);
}
.tarifes li:before {
		content: '';
		position: absolute;
		top: 11px;
		left: 9px;
		width: 14px;
		height: 14px;
		min-width: 0;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-position: 50% 50%;
}
.tarifes li.minus {
		color: var(--grey);
}
.tarifes li.minus:before {
		background-color: #E6E6E6;
		background-image: url("../img/tarifes/cross.svg");
		background-size: auto 6px;
}
.tarifes li.plus {
		background-color: var(--body);
}
.tarifes li.plus:before {
		background-color: var(--accident);
		background-image: url("../img/tarifes/plus.svg");
		background-size: auto 8px;
}
.tarifes .price {
		margin: 20px 0 0 0;
		display: grid;
		font-weight: bold;
		font-size: 11px;
		line-height: 1;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--grey);
		gap: 7px;
}

.tarifes .price .profit-line{
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
}

.tarifes .price .big {
		position: relative;
		font: normal 48px/1 var(--font2);
		letter-spacing: -0.07em;
		text-transform: none;
		color: var(--black);
		top: 7px;
        padding-bottom: 5px;

}
.tarifes .price .big:before {
		content: '';
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(150deg);
		width: 38.85px;
		height: 38.85px;
		background: var(--accident);
		border-radius: 8px;
}
.tarifes .price .big > *:not(.profit) {
		position: relative;
}
.tarifes .price .small {
		vertical-align: top;
		font-weight: normal;
		font-size: 60%;
}
.tarifes .price .profit {
		white-space: nowrap;
		/*position: absolute;*/
		top: 4px;
		left: 100%;
		margin: 0 0 0 7px;
		font: bold 10px/1 var(--font);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--black);
		padding: 6px;
		border-radius: 6px;
		background: var(--accident);
}

.tarifes .price .profit .percent{
    color: red;
    transform: translateY(-1px);
    display: inline-block;
}

.tarifes input.yearly:checked ~ * .price .monthly, .tarifes input.monthly:checked ~ * .price .yearly {
		display: none;
}
.tarifes input.yearly:not(:checked) ~ * .price .profit {
		display: none;
}
/*.tarifes input.yearly:checked ~ * .price .big {*/
/*		margin-left: -1em;*/
/*}*/
.tarifes .btn {
		display: inline-flex;
		vertical-align: top;
		margin: 30px 0 0 0;
		max-width: 100%;
	transition: all 0.3s;
}

.tarifes .btn:hover{
	transition: all 0.3s;
	background: var(--accident);
	border: 1px solid var(--accident);
}

.tarifes .bottom-text {
		margin: 15px auto 0 auto;
		font-size: 13px;
		max-width: 21em;
}

#page-tariff .tarifes{
	padding: 40px 0;
}

.bg-inner .container{
	background: transparent !important;
}

#page-tariff .title2{
	background: #000;
	color: #fff;
	font-family: Stem, -apple-system, "Open Sans", system-ui, "sans-serif";
	padding: 0 30px;
	border-radius: 13px;
	line-height: 80px;
	display: inline-block;
}

@media only screen and (max-width: 1280px) {
	#page-tariff .title2 {
		line-height: 60px;
	}
}

@container tarifes-el (max-width: 320px) {
		.tarifes .bg {
				padding-left: 10px;
				padding-right: 10px;
		}
		.tarifes .name {
				font-size: 20px;
		}
		.tarifes .price {
				margin-top: 35px;
		}
		.tarifes input.yearly:checked ~ * .price .big {
				margin-left: 0;
		}
		.tarifes .price .profit {
				bottom: 100%;
				top: auto;
				left: 0;
				margin: 8px 0;
		}
}
@container tarifes-el (min-width: 360px) {
		.tarifes .bg {
				font-size: 14px;
				padding: 40px 30px;
		}
		.tarifes .name {
				margin-bottom: 30px;
		}
		.tarifes .tags {
				margin: -7px 0 15px 0;
		}
		.tarifes .top-text {
				margin-bottom: 25px;
		}
		.tarifes ul {
				gap: 8px;
		}
		.tarifes li {
				padding: 11px 11px 11px 37px;
		}
		.tarifes li:before {
				top: 13px;
				left: 10px;
		}
		.tarifes .price {
				margin-top: 26px;
		}
		.tarifes .btn {
				margin-top: 35px;
		}
}
@media only screen and (min-width: 768px) {
		.tarifes .title2 {
				margin-bottom: 40px;
		}
		.tarifes .checks {
				margin-bottom: 40px;
		}
		.tarifes .grid {
				grid-template-columns: repeat(3, 1fr);
		}
		/*.tarifes .el.accent {*/
		/*		margin: -18px 0 -13px 0;*/
		/*}*/
}
@media only screen and (min-width: 1024px) {
		.tarifes {
				padding-top: 100px;
				padding-bottom: 100px;
		}
		.tarifes .grid {
				gap: 30px;
		}
		.tarifes .checks {
				margin-bottom: 54px;
		}
		.tarifes .checks > * {
				font-size: 22px;
				padding: 8px 12px;
		}
}