/* CSS Document */
.product-nav { margin-bottom: calc(20px + 4%);
	
}
.product-nav__list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  border-bottom: 0px solid #222; position: relative; list-style: none; margin: 0px ; padding:0 0 0 0;}
.product-nav__list:after {/*content: "";*/ position: absolute; width: 100%; height: 1px; background: #8b734b; top:50%;}
.product-nav__item { margin: 0 10px; position: relative; z-index: 3; }
.product-nav__item a {position: relative; cursor: pointer;  display: block; border: 1px solid #3c312c; line-height: 1.1; padding: 4px 20px 7px 20px; color: #3c312c;font-size: clamp(18px, 1.7vw, 22px); margin-bottom: 12px; text-align: center;}
.product-nav__item a:after {position: absolute; /*content: ""; */ bottom:-1px; left: 0; width: 100%; height: 4px; background: #ea5413; display: block; transition: all 0.4s ease-out 0s; opacity: 0;}
.product-nav__item a:hover, .product-nav__item.active a { background: #3c312c; color: #fff;}
.product-nav__item a:hover:after, .product-nav__item.active a:after { opacity: 1;}

.product-nav-pto { width: 162px;}
.product-nav-title { position: absolute; z-index: 2; transition: all 0.4s ease-out 0s; line-height: 70px; width: 260px; background: rgba(255,255,255,.85); padding: 0 30px; font-size: 22px; color: #222; border-radius: 35px; left: 40px; top:50%; transform: translateY(-50%);}
.product-nav__item a:hover .product-nav-title, .product-nav__item.active a .product-nav-title { background: #074151; color: #fff;}

.product-nav__item:visited {
  text-decoration: none;
}

.tab-content {
  /*display: none; padding:0px 0 0px 0 ; */
}




@media only screen and (max-width: 1279px) {
	.product-nav__list {  flex-direction: row;}
	
	.product-nav-pto { max-width: 162px;width:auto; margin: 0 auto;}
	.product-nav-title { left: 50%; transform: translate(-50%, -50%); text-align: center; width: 90%; line-height: 1.3; font-size: 18px; padding:10px 15px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
	
}


@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 640px) {
	.product-nav__list { padding: 0;}
	.product-nav__item a {  }
	
}
@media only screen and (max-width: 570px) {
	.product-nav__list {  }
	
	.product-nav-pto { display:none;}
	.product-nav-title { position: relative; left: auto; top:auto; transform: translate(0%, 0%);}
}

@media only screen and (max-width: 414px) {
	.product-nav__item { width: calc(50% - 10px); margin: 0 5px;}
	.product-nav__item a { text-align: center; padding: 4px 10px 7px 10px;}
}

@media only screen and (max-width: 320px) {

}