/***** !!!!! *****/
/***** КАЛЬКУЛЯТОР В РАЗДЕЛАХ *****/
/***** !!!!! *****/

@import url('../../../css2-1');
@import url('../../../css2-2');

.fuel-calc {
	background: url(../images/bg.png) center no-repeat;
	max-width: 1400px;
	height: 466px;
	font-family: 'Open Sans', sans-serif;
}

.fuel-calc__h2 {
	text-align: center;
	color: #000000 !important;
	font-size: 36px !important;
	padding: 30px 0 10px 0 !important;
	font-family: 'Manrope', sans-serif;
	margin: auto !important;
}

form#form-fuel {
	max-width: 85%;
	margin: 30px auto auto;
}

.fuel-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.fuel-middle {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 20px 0;
	align-items: center;
}

.fuel-bottom__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}

.fuel-heading {
	font-size: 15px;
	font-weight: bold;
	color: #222222;
	padding-bottom: 7px;
}

.fuel-calc select {
	width: 170px;
	height: 50px;
	border: 2px solid #CCCCCC !important;
	border-radius: 7px !important;
	color: #616161;
	font-size: 15px;
	padding-left: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	/*background: transparent;*/
	background: url(../images/arrow-down.svg) 95% center no-repeat, white !important;
}

.fuel-top__type select {
	background-position-x: 95% !important;
	outline: none;
}

.fuel-top__basis select {
	background-position-x: 95% !important;
}

.fuel-calc input {
	width: 170px;
	height: 50px;
	border: 2px solid #CCCCCC;
	border-radius: 7px;
	color: #616161;
	font-size: 15px;
	padding-left: 10px;
	outline: none;
}

.fuel-top__basis select {
	width: 270px;
	outline: none;
}

.fuel-top__address input {
	width: 330px !important;
	border: 2px solid rgba(0, 0, 0, 0.2) !important
}

.fuel-middle input {
	width: 21px;
	height: 21px;
}

.fuel-middle label {
	display: flex;
	align-items: center;
	padding: 20px 20px 0px 0px;
}

.fuel-middle span {
	color: #616161;
	font-size: 17px;
	padding: 2px 0px 0px 3px;
}

.fuel-bottom__row input {
	width: 270px;
}

.fuel-bottom input[name="btn"] {
	display: block;
	padding: 7px 24px;
	white-space: nowrap;
	background: #DB2B36;
	color: white;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: bold;
	border: unset;
	cursor: pointer;
	height: 50px;
}

.fuel-bottom input[name="btn"]:hover {
	color: #fff;
	background: #c01b25;
}

.fuel-bottom__checkbox label {
	display: flex;
	max-width: 270px;
}

.fuel-bottom__checkbox label span {
	color: #616161;
	font-size: 12px;
	line-height: 16px;
	padding-top: 4px;
}

.fuel-bottom__checkbox a {
	color: #616161;
	text-decoration: underline;
}


.fuel-bottom input[name="privacy"] {
	width: 35px;
	height: 18px;
	display: inline-block;
}

.fuel-bottom__privacy {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Кастомный чекбокс */
/* прячем input checkbox */
.fuel-bottom__checkbox input[name="privacy"] {
	display: none;
}

/* формируем внешний вид чекбокса в псевдоэлементе before */
.fuel-bottom__checkbox div:before {
	content: ' ';
	cursor: pointer;
	display: inline-block;
	margin-right: 10px;
	width: 21px;
	height: 21px;
	background: #FFF;
	border: 2px solid #e3e3e3;
	border-radius: 3px;
}

/* вариации внешнего вида в зав-ти от статуса checkbox */
/* checked */
.fuel-bottom__checkbox input[name="privacy"]:checked+div:before {
	content: '';
	background: url(../images/check.svg) center no-repeat, white;
}

/* disabled */
.fuel-bottom__checkbox input[name="privacy"]:disabled+div:before {
	background: #eee;
	color: #aaa;
}

/* Кастомный чекбокс END */

/* Прикрепить файл */
.input-file span {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 17px;
	vertical-align: middle;
	color: #616161;
	border-radius: 7px;
	border: 2px solid #CCCCCC;
	background-color: white;
	line-height: 22px;
	height: 50px;
	padding: 11px 20px;
	box-sizing: border-box;
	margin: 0;
	transition: background-color 0.2s;
	width: 270px;
}

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

.input-file:hover span {
	color: #DB2B36;
	border: 2px solid #DB2B36;
}

.input-file span img {
	float: right;
	padding-top: 2px;
}

/* Прикрепить файл END */

.fuel-result {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
}

.fuel-result__price {
	font-size: 40px;
	font-weight: 700;
	background: #DB2B36;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.fuel-result__help {
	max-width: 500px;
	color: #616161;
	font-size: 15px;
}

.fuel-result__help img {
	float: left;
	padding: 5px;
}

.fuel-calc a {
	border-bottom: unset;
}

.fuel-calc input::-webkit-outer-spin-button,
.fuel-calc input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
.fuel-calc input[type=number] {
	-moz-appearance: textfield;
}

.fuel-calc form input[type="email"],
.fuel-calc form input[type="password"],
.fuel-calc form input[type="tel"],
.fuel-calc form input[type="text"],
.fuel-calc form input[type="number"],
.fuel-calc form textarea {
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 9px 16px;
	font-size: 16px;
	width: 100%;
	border-radius: 8px;
	line-height: 28px;
	background-color: #fff;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.fuel-middle .fuel-top__address input[name="address"] {
	height: 50px;
	margin-right: 30px;
}

.fuel-diesel select {
	text-overflow: ellipsis;
	padding-right: 35px;
}

@media (max-width: 1387px) {
	.fuel-result__help {
		max-width: 430px;
	}
}

@media (max-width: 1350px) {
	.fuel-bottom__row input {
		width: 100%;
	}

	.fuel-bottom__row input[name="btn"] {
		width: 270px;
	}
}

@media (max-width: 1263px) {
	.fuel-bottom__file img {
		display: none;
	}

	.input-file span {
		font-size: 13px;
		width: 150px;
		text-align: center;
	}
}

@media (max-width: 1226px) {
	.fuel-top__address input {
		width: unset !important;
		border: 2px solid rgba(0, 0, 0, 0.2) !important;
	}

	.fuel-middle .fuel-top__address input[name="address"] {
		width: 330px !important;
		border: 2px solid rgba(0, 0, 0, 0.2) !important;
	}

}

@media (max-width: 1180px) {
	.fuel-bottom__row input {
		width: 150px;
	}
}

@media (max-width: 1120px) {
	.fuel-top__basis select {
		width: 200px;
	}

	/*.fuel-top__type select {*/
	/*    width: 65px;*/
	/*}*/

	.fuel-top__type.full-calc select {
		width: 100%;
	}
}

@media (max-width: 1093px) {
	.fuel-bottom__row input[name="btn"] {
		width: 100%;
	}

	.fuel-result__price {
		order: 0;
	}

	.fuel-bottom__checkbox {
		order: 1;
	}

	.fuel-result__help {
		order: 2;
	}

	.fuel-result__help {
		font-size: 14px;
		line-height: 19px;
		padding-top: 7px;
	}

	.fuel-top__address input {
		width: unset !important;
	}

	.fuel-middle .fuel-top__address input[name="address"] {
		width: 330px !important;
		border: 2px solid rgba(0, 0, 0, 0.2) !important;
	}

	.fuel-calc.full-calc {
		max-width: unset;
		height: unset;
		padding-bottom: 30px;
	}
}

@media (max-width: 991px) {
	.fuel-bottom__row input[name="btn"] {
		width: 100%;
	}
}

@media (max-width: 925px) {
	.fuel-calc {
		background: #db2b3638;
		max-width: unset;
		height: unset;
		padding-bottom: 30px;
	}

	.fuel-bottom__row>div {
		width: 24%;
	}

	.fuel-heading {
		font-size: 13px;
		font-weight: unset;
		color: #222222;
		padding-bottom: 3px;
	}

	.fuel-top__address {
		width: 100%;
	}

	.fuel-top__address input {
		width: 100% !important;
	}

	.full-calc .fuel-middle .fuel-top__address input[name="address"] {
		width: 100% !important;
	}

	.full-calc .fuel-top__type.full-calc select {
		padding-right: 35px;
	}

	.full-calc .fuel-top__size input[name="size"] {
		width: 95px;
	}
}

@media (max-width: 840px) {
	.fuel-top__address {
		width: 100%;
	}

	.fuel-heading {
		line-height: 18px;
	}

	.fuel-top>div {
		padding-bottom: 10px;
	}

	.fuel-top__address input {
		width: 100% !important;
	}

	.fuel-bottom__row input {
		width: 99%;
	}

	.fuel-bottom__row {
		align-items: center;
	}

	.fuel-bottom__row>div:nth-child(1) {
		width: 100%;
	}

	.fuel-bottom__row>div:nth-child(2),
	.fuel-bottom__row>div:nth-child(3) {
		width: 49%;
	}

	.fuel-bottom__row>div {
		padding-bottom: 10px;
	}

	.fuel-bottom__btn {
		margin: auto;
	}

	.fuel-result__price {
		padding: 10px 0;
	}

	.input-file span {
		width: 100%;
	}

	.fuel-result__help {
		max-width: 100%;
	}
}

@media (max-width: 680px) {
	.fuel-result>div {
		width: 100%;
		text-align: center;
	}

	.fuel-result__price {
		order: 1;
	}

	.fuel-bottom__checkbox {
		order: 0;
	}

	.fuel-bottom__checkbox label {
		justify-content: center;
		max-width: unset;
	}

	.fuel-bottom__row input {
		width: unset;
	}
}

@media (max-width: 580px) {
	.fuel-top__size {
		width: 100%;
	}

	.fuel-top__size input {
		width: 100%;
	}

	.fuel-top__basis {
		width: 70%;
	}

	.fuel-top__basis select {
		width: 100%;
	}

	.fuel-bottom__row>div {
		width: unset;
	}

	.fuel-bottom__row>div:nth-child(2),
	.fuel-bottom__row>div:nth-child(3) {
		width: 100%;
	}

	.fuel-top__basis {
		width: 100%;
	}

	.fuel-top .fuel-top__type {
		width: 100%;
	}

	.fuel-calc select {
		width: 100%;
	}

	.full-calc .fuel-top__type_2 {
		width: 100%;
	}

	.full-calc .fuel-top__size input[name="size"] {
		width: 100%;
	}

	.full-calc .fuel-middle {
		padding: 0px 0 20px 0;
	}
}

@media (max-width: 430px) {
	.fuel-top__type {
		width: 100%;
	}

	.fuel-top__type select {
		width: 100%;
	}

	.fuel-top__basis {
		width: 100%;
	}
}

@media (max-width: 425px) {
	.fuel-result>div {
		padding-bottom: 15px;
	}

	.fuel-bottom__checkbox label {
		text-align: left;
	}

	.fuel-result__help img {
		float: left;
		padding: 0px;
	}

	.fuel-result__help {
		display: flex;
		justify-content: space-between;
		text-align: unset !important;
	}

	.fuel-result__help img {
		float: unset;
		padding: unset;
		max-height: 25px;
		padding-right: 5px;
	}
}

@media (max-width: 350px) {
	.fuel-result__price {
		line-height: 35px;
		font-size: 30px;
	}
}

/***** !!!!! *****/
/***** КАЛЬКУЛЯТОР В РАЗДЕЛАХ END *****/
/***** !!!!! *****/

.calc-catalog {
	margin-top: -20px;
}

table.bazis {
	padding-top: 30px;
}

table.bazis tbody {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 0px;
}

@media (max-width: 992px) {
	table.bazis tbody {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 750px) {
	table.bazis tbody {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 510px) {
	table.bazis tbody {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}

.regoin-title {
	display: flex;
	justify-content: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 18px;
	color: #00007c;
}

.top-products-h2 {
	text-align: center;
	padding: 40px 0 20px !important;
}

.row.top-products {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.row.top-products .col-md-3 {
	width: 25%;
	text-align: center;
	padding: 25px 0;
}

.row.top-products .col-md-3 img {
	width: 150px;
}

.row.top-products .col-md-3 .title {
	font-size: 16px;
	color: #0c2d72;
	padding-top: 10px
}

.row.top-products .col-md-3 .bazis {
	padding: 10px 0;
	font-size: 14px
}

.row.top-products .col-md-3 .price {
	font-size: 40px;
}

.row.top-products .col-md-3 .price_2 {
	font-size: 18px;
}

.row.top-products .col-md-3 .btn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.row.top-products .col-md-3 .btn a.zakaz_button.various {
	background: #db2b36;
	color: #fff;
	align-items: center;
	text-transform: uppercase;
	font-size: 14px;
	width: 156px;
	height: 30px;
	text-decoration: none;
	margin-top: 10px;
	padding-top: 10px;
	font-weight: 700;
	border: 0px;
}

@media (max-width: 1050px) {
	.row.top-products .col-md-3 {
		width: 50%;
	}
}

@media (max-width: 490px) {
	.row.top-products .col-md-3 {
		width: 100%;
	}
	.content-price__item .top .title {
		font-size: 20px;
		line-height: 30px;
	}
}

.etaps {
	margin: 20px 0 45px 0;
	text-align: center;
}

.etaps h2 {
	font-size: 30px;
	line-height: 40px;
	color: #000;
	margin: 0 0 45px;
}

.etaps-grid {
	display: grid;
	justify-content: space-around;
	grid-template-columns: repeat(10, 1fr);
	align-items: center;
	gap: 20px;
}

.etaps-grid__box {
	position: relative;
}

.etaps-grid__box-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	margin: 0 0 5px;
}

.etaps-grid__box-line {
	grid-column: span 2;
	display: flex;
	position: relative;
	align-items: center;
	height: 0;
	border: 2px dashed #DB2B36;
	justify-content: space-between;
}

.etaps-grid__box-line:before,
.etaps-grid__box-line:after {
	content: '';
	width: 10px;
	height: 10px;
	background: #DB2B36;
	top: 0;
	left: 0;
	border-radius: 50%;
	margin-left: -5px;
}

.etaps-grid__box-line:after {
	margin: 0 -5px 0 0;
}

.oil-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin: 30px 0;
	text-align: center;
}

.oil-grid a {
	border: 0;
	display: inline-block;
	vertical-align: top;
}

.oil-grid img {
	display: inline-block;
	vertical-align: top;
	max-width: 110px;
}

.oil-grid span {
	display: block;
	margin: 15px 0 0
}

.text-center {
	text-align: center;
}

.accordion {
	margin: 1em 0 2em;
}

.accordion-item {
	margin-bottom: 10px;
	border-bottom: 1px solid #c4c4c4;
}

.accordion-item__title {
	font-size: 20px;
	padding: 20px 60px 20px 20px;
	cursor: pointer;
	position: relative;
}

.accordion-item__title:hover {
	opacity: 0.5;
}

.accordion-item__title::after {
	content: '';
	display: block;
	position: absolute;
	top: 20px;
	right: 10px;
	width: 25px;
	height: 25px;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.1 9.4 12 15.3 5.9 9.4 4 11.2l8 7.7 8-7.7-1.9-1.8Z' fill='%232F2F2F'/%3E%3Cmask id='a' mask-type='alpha' maskUnits='userSpaceOnUse' x='4' y='9' width='16' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.1 9.4 12 15.3 5.9 9.4 4 11.2l8 7.7 8-7.7-1.9-1.8Z' fill='%23fff'/%3E%3C/mask%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accordion-item__title.active::after {
	transform: rotate(180deg);
}

.accordion-item__content {
	display: none;
	padding: 0 20px 20px;
	line-height: 1.5;
}

.accordion-item__content.active {
	display: initial;
}

.advantages-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
	row-gap: 20px;
	margin: 30px 0;
}

.advantages-columns__title {
	color: #fff;
	display: flex;
	font-size: 20px;
	text-decoration: none;
	width: 100%;
	height: 37px;
	align-items: center;
	background-color: #db2b36;
	font-weight: 700;
	padding-left: 35px;
	text-transform: uppercase;
	position: relative;
	margin-bottom: 1em;
	box-sizing: border-box;
}

.advantages-columns__title::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 10px;
	background: url(../img/arrow-right--white.png) center no-repeat;
	width: 15px;
	height: 15px;
}

.product-filters {
	margin: 30px 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 20px;
}

.product-filters form {
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 10px;
	align-items: center;
}

.product-filter select {
	border-radius: 3px;
	border-radius: 15px;
    padding: 5px 30px 5px 10px;
	margin-left: 5px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-repeat: no-repeat;
	background-position: calc(100% - 0.45em) 0.4em;
    background-size: 1em auto;
    background-image: url(down-arrow.svg);
	cursor: pointer;
}

.download-link {
	border: none !important;
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.product-card-header h1 {
	color: #db2b36;
	font-weight: 700;
	margin: 1.25em 0 2em;
}

.product-card {
	display: flex;
	flex-wrap: wrap;
	column-gap: 40px;
	row-gap: 40px;
}

.product-card__left {
	display: flex;
	column-gap: 20px;
	min-width: 47%;
}

.product-card__image img {
	height: auto;
}

.product-card__price {
	font-size: 40px;
	margin-bottom: 20px;
}

.product-card__price .green {
    font-size: 20px;
    color: #009600;
	display: inline-block;
}

.product-card__price .red {
    font-size: 20px;
    color: #db2b36;
	display: inline-block;
}

.product-card__price-tn {
	font-size: 21px;
	margin-bottom: 20px;
}

.product-card .i_icon {
	background: url(../images/i-icon.png) no-repeat right;
	padding-right: 20px;
	color: #aaaaaa;
}

.product-card .btn a {
	background-color: #db2b36;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-size: 14px;
	width: 156px;
	height: 40px;
	text-decoration: none;
	margin-top: 30px;
	font-weight: 700;
}

.product-card .btn a:hover {
    background-color: #f6cacd;
}

.product-card__right {
	flex-grow: 1;
}

.product-card__right dl {
	padding-bottom: 20px;
	display: flex;
	column-gap: 20px;
	color: #aaa;
	margin: 0 0 20px;
}

.product-card__right dl:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

.product-card__right dt {
	flex-grow: 1;
}

.product-card__right dd {
	color: #db2b36;
	font-weight: 700;
	text-align: right;
}

.product-card__bottom {
	width: 100%;
}

@media (max-width: 1199px) {
	.advantages-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.etaps-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px
	}

	.etaps-grid__box-line {
		display: none;
	}

	.oil-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.advantages-columns {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 480px) {
	.product-card__left {
		align-items: center;
	}
	.product-card__price {
		font-size: 28px;
	}
}