.product-presentation{

	.feature-section{
		display: none;
		&.selected{display: block;}
	}

	.options-wrapper{
		position: relative;

		.option{
			display: inline-block;
			width: 33.333333%;
			text-align: center;
			font-size: 22px;
			padding: 10px 0 24px;
			cursor: pointer;
			font-weight: 200;
			&.active{
				font-weight: 400;
				/* holder: */
				
			}

			transition: transform 0.1s ease-out;
			
			&:hover{
				transform: translateY(-1.5px)
			}
		}
		
		.selected-line{
			height: 3px;
			width: 33.333333%;
			background:var(--pd-yellow);
			position: absolute;
			bottom: -2px;
			border-radius: 2px;
		}
		
	}
	.line{
		width: 100vw;
		height: 1px;
		position: absolute;
		background:var(--pd-light-gray);
		left:0;
	}
	
	.feature-preview-wrapper{
		position: relative;
	}

	.feature-wrapper{
		max-width: 500px;
		left: -20px;
		position: relative;
		.selected-box{
			width: 100%;
			height: 110px;
			position: absolute;
			z-index: -1;
			top:0;
			background: white;
			border: 1px solid var(--pd-light-gray);
			box-shadow: 0 10px 20px 0 rgba(black,0.03);
			border-radius: 4px;
		}
	}
	.feature{
		margin-bottom: 10px;
		display: flex;
		padding: calc(var(--gutter) * 2);
		.title{ margin-bottom: 0.5em;}
		.text{ margin-bottom: 0; transition: color 0.2s; }


		.text-wrapper{
			width: calc(100% - 60px);
			padding-left: calc(var(--gutter) * 2);
		}
		
		&.active{
			.text{ color: var(--pd-black); }				
		}

		.icon{
			border-radius: 10px;
			width: 60px; height: 60px;
			align-self: center;
		}

		*{
			pointer-events:none;
		}

	}
	.preview-window{
		position: absolute;
		top: -10px;
		left: 550px;
		
		
		img{ max-width: 720px; }

		.home &{
			img{ max-width: 960px; }			
		}
	}

	.gray-waves{
		top: 65%;
		
	}

	@media (max-width: 1180px){
		.feature-wrapper{
			left: 0px;
		}
	}

}

@media (max-width: 767px) {
	.product-presentation{
		.feature-wrapper{
			max-width: 100%;
		}
		.feature-preview-wrapper{
			padding: 0;

		}
		.feature{
			border-bottom: 1px solid var(--pd-light-gray);
			margin-bottom: 0;
			&:last-child{border-bottom: 0}
		}
		.selected-box{ display: none; }
		.preview-window{ display: none }
		
	}

		


}

@media (max-width: 420px) {
	.product-presentation{
		.options-wrapper{
			.option{
				font-size: 5.3vw;
			}
		}
	}
}