/* CSS Document */
.product-nav {width: 100%; position: relative;}
.product-nav:before {content: ""; position: absolute; width: 2px; height: calc(100% - 20px); background: #fff; left: 0; top:10px;}
.product-nav__list {display: flex; flex-direction: column; flex-wrap: nowrap; border-bottom: 0px solid #d6d6d6; position: relative; list-style: none; margin: 0; padding: 0;}
.product-nav__item { margin: 0; padding: 0 0 calc(20px + 5%) 0;}
.product-nav__item:last-child { padding: 0 0 0 0;}
.product-nav__item a { position: relative; color: #fff7ef; font-size: 18px; font-weight: 700; padding-left: 32px;display: block;}
.product-nav__item a:before { position: absolute; content: ""; width: 10px; height: 10px; border-radius: 100%; background: #fff7ef; box-shadow: 0px 0px 0px 4px #a48a7d; left: -4px; top:8px;}

.product-nav__item:hover a, .product-nav__item.active a { color: #f5d4bb;}
.product-nav__item:hover a:before, .product-nav__item.active a:before { background: #f5d4bb;}
.product-nav__item.active a:after { background: #f5d4bb; width: 30px; height: 30px; border-radius: 100%; opacity: 0.3; left: -14px; top:-2px; position: absolute; content: "";}
.product-nav__item:visited {
  text-decoration: none;
}

.tab-content {
  display: none; ; 
}




@media only screen and (max-width: 980px) {
	.product-nav:before { display: none;}
	.product-nav__list { flex-direction: row; flex-wrap: wrap;}
	.product-nav__item { padding-bottom: 12px;}
	.product-nav__item a {  padding-left: 20px; padding-right: 25px;}
	.product-nav__item:hover, .product-nav__item.active { }
	.product-nav__item:hover a, .product-nav__item.active a {}
	
	.product-nav__item a:after { }
	
	.tab-content { }
}


@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 640px) {
	
}
@media only screen and (max-width: 570px) {
	
	.product-nav__item { }
}

@media only screen and (max-width: 414px) {
	
}

@media only screen and (max-width: 320px) {

}