
.horizontal-tab 	{ overflow-x: hidden;}
.ht-tab-wrapper     { width:calc(100% + 20px); display: flex; flex-wrap: wrap; gap: 20px; }
.ht-tab		 		{ flex-basis: auto; flex-grow: 0; flex-shrink: 0; width:calc(33.3% - 20px); order: 1; display: flex; flex-direction: column;  }
.ht-tab[onclick]	{ cursor: pointer; }

.ht-panel 	{ background-color:#ececec; display: none; width:calc(100% - 20px); }

.ht-tab.selected + .ht-panel { order: 2; z-index: 2; display: flex; flex-direction: column;}
.ht-tab.selected + .ht-panel ~ .ht-tab { order: 3; }

.ht-tab .tab-img{
	background-color: #fff;
	width: 100%;
	padding-bottom: calc(100% / 204 * 115);
}
.ht-tab .tab-img .img-blk{
	position: absolute;
	width: 100%;
	height: 100%;
    padding: 5px 15px 0;
	object-fit: cover;
}
.ht-tab .tab-date{
	background-color: #06c;
    color: #fff;
    line-height: 20px;
	padding: 5px 8px;
}
.ht-panel .panel-details{
	padding: 15px;
	background-color: #fff;
}
.ht-panel .panel-title{
	background-color: #333;
	color: #fff;
	padding: 15px 8px;
}
.ht-panel .panel-title .ptitle-day{
	font-size: 40px;
	line-height: 40px;
	padding: 0 15px 0 7px;
	font-weight: bold;
}
.ht-panel .ptitle-day{
	float: left;
	width: 70px;
}
.ht-panel .ptitle-right{
	float: left;
	width: calc(100% - 70px);
}
.ht-panel .panel-img{
	padding: 5px;
	text-align: center;
}
.ht-panel .panel-img .img{
	width: 100%;
	height: auto;
	max-width: 570px;
}
@media only screen and (min-width: 767.000001px){
	.ht-tab.selected:nth-child(6n+1) + .ht-panel + .ht-tab,
	.ht-tab.selected:nth-child(6n+1) + .ht-panel + .ht-tab + .ht-panel + .ht-tab,
	.ht-tab.selected:nth-child(6n+3) + .ht-panel + .ht-tab{
		order: 1;
	}
}
@media only screen and (max-width:767px) {
	
	.ht-tab-wrapper 		{ width:100% }

	.ht-tab		 			{ width:100%; }
	
	.ht-panel				{ margin-bottom: 10px; width:100%; }
	
	.ht-tab,
	.ht-tab.selected,
	.ht-tab.selected + .ht-panel
	.ht-panel{order: 0;}
}