.section-variant-comparrison {

	width: 100%;

	.section-variant-comparrison--head {

		display: flex;
		justify-content: space-between;
		margin: 0 0 16px 0;
		cursor: pointer;

		.block-title {
			margin: 0;
		}

		.icon--chev {
			width: 12px;
			height: unset;
			transition: .3s all;
		}

	}

	&.head-expanded {

		.section-variant-comparrison--head {

			.icon--chev {
				transform: rotate(180deg);
			}

		}

		.section-variant-comparrison--table {
			max-height: 3000px;
		}

	}

	.section-variant-comparrison--table {

		max-height: 0px;
		overflow: hidden;
		transition: .6s all;

		.section-variant-comparrison--table-flex {

			display: flex;

			.table-flex--content {

				width: 33.3%;
				border-top: 1px solid transparent;

				span {

					display: flex;
					align-items: center;
					min-height: 80px;
					font-size: 14px;
					padding:0 16px;

					@media screen and (max-width: 768px) {
						font-size: 12px;
						padding: 8px;
						min-height: 100px;
					}

					&.span--title {
						border-bottom: 1px solid #A3AECF;
						background: transparent !important;
						font-size: 12px;
						text-transform: uppercase;
						font-weight: 600;
						letter-spacing: 8%;
					}

					&:nth-child(odd) {
						background: #f1ece3;
					}

				}

			}

			.table-flex--variant {

				width: 33.3%;

				&[data-variant="essential"] {
					border-top: 1px solid transparent;
				}

				&[data-variant="complete"] {

					background: #fff;
					border: 1px solid #A3AECF;
					border-radius: 16px;

					span {

						&:nth-child(odd) {
							background: #F7F8FA;
						}

					}

				}

				span {

					display: flex;
					justify-content: center;
					align-items: center;
					min-height: 80px;

					@media screen and (max-width: 768px) {
						min-height: 100px;
					}

					&.span--title {
						border-bottom: 1px solid #A3AECF;
						background: transparent !important;
						font-size: 12px;
						text-transform: uppercase;
						font-weight: 600;
						letter-spacing: 8%;
						position: relative;

						.card--flag {

							background: #BD2C38;
							font-size: 14px;
							letter-spacing: 0;
							padding: 8px;
							border-radius: 4px;
							position: absolute;
							bottom: -12px;
							left: 50%;
							transform: translate(-50%, 0) rotate(-4deg);
							line-height: 1;
							color: #fff !important;
							font-weight: 100;
							text-transform: capitalize;

							@media screen and (max-width: 768px) {
								font-size: 12px;
							}

						}

					}

					&:nth-child(odd) {
						background: #f1ece3;
					}

					&.icon-minus {

						position: relative;

						&::after {
							width: 12px;
							height: 1px;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							background: #A3AECF;
						}

					}

				}

				.variant--controls {

					span {

						background: transparent !important;
						min-height: unset;
						padding: 16px 0 0 0;
						text-align: center;

						&.variant-controls--price {

							font-size: 32px;
							color: #2D3078;
							font-family: Steinbeck;
							font-weight: 600;

							@media screen and (max-width: 768px) {
								font-size: 24px;
							}

						}

						&.variant-controls--split {

							font-size: 14px;

							@media screen and (max-width: 768px) {
								font-size: 12px;
							}

						}

					}

					.btn-flex {

						padding: 16px 24px 24px 24px;

						@media screen and (max-width: 768px) {
							padding: 16px 8px 8px 8px;
						}

						.button {
							width: 100%;
							text-align: center;
						}

					}

				}

			}

		}

	}

	&.scheme-red {

		.section-variant-comparrison--table {
			.section-variant-comparrison--table-flex {
				.table-flex--content {
					span {
						border-color: #ED707D !important;
					}
				}
				.table-flex--variant {
					&[data-variant="complete"]{
						border-color: #ED707D !important;
						span:nth-child(odd) {
							background: var(--color-pink);
						}
					}
					span,
					&.span--title {
						border-color: #ED707D !important;
					}
				}
				.icon-container {
					svg rect {
						fill: var(--color-maroon-mid);
					}
				}
				.variant--controls {
					.btn-flex {
						.button {
							background: var(--color-maroon-dark);
						}
					}
				}
			}
		}

		.card--flag {
			background: #616B94 !important;
		}
                    

	}

}