.dhwp-gallery {
}

.dhwp-gallery-main {
	padding-top:66.6%;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	position:relative;
    cursor:pointer;
}

.dhwp-gallery-youtube {
	position:absolute;left:0;top:0;width:100%;height:100%;
}

.dhwp-gallery-youtube-play {
	position:absolute;left:0;top:0;width:100%;height:100%;
    background-image:url(./play.svg);
    background-size:20%;
    background-position:center center;
    background-repeat:no-repeat;
}

.dhwp-gallery-text { font-size:10pt; margin:6px 0; }
.dhwp-gallery-item {
	width:18.0%;
	margin-left:1%;
	margin-right:1%;
	/* margin-bottom:2%; */
	padding-top:14%;
	float:left;
	cursor:pointer;

	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;

	box-sizing:border-box;
	position:absolute;
    left:0;
    top:0;

    left:100%;
}

.dhwp-gallery-item:nth-child(1) { left:0; }
.dhwp-gallery-item:nth-child(2) { left:20.0%; }
.dhwp-gallery-item:nth-child(3) { left:40.0%; }
.dhwp-gallery-item:nth-child(4) { left:60.0%; }
.dhwp-gallery-item:nth-child(5) { left:80.0%; }

.dhwp-gallery-item:nth-child(5n) {
	margin-right:0;
}

.dhwp-gallery-item.selected::after {
	content:' ';
	position:absolute;
	box-sizing:border-box;
	border:3px solid #000;
	position:absolute;
	left:0;top:0;
	width:100%;height:100%;
}

.dhwp-gallery-item .dhwp-gallery-more {
	text-align:center;

	border:3px solid #000;
	border-radius:12px;
	font-weight:bold;

	position:absolute;left:0;top:0;width:100%;padding-top:17%;height:100%;
	box-sizing:border-box;
	line-height:1.1em;
}

.dhwp-gallery-overlay {
	position:fixed;
	z-index:1000;
	top:0;left:0;width:100%;height:100%;
	background-color:rgba(0,0,0,0.95);
}
.dhwp-gallery-popup {
	position:fixed;
	z-index:1001;
	box-sizing:border-box;
	background-color:#000;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
.dhwp-gallery-popup-content {
	position:absolute;left:0;top:0;width:100%;height:100%;
	background-color:#000;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
.dhwp-gallery-popup .dhwp-gallery-close {
	position:absolute;
	right:0;bottom:100%;
	color:#fff;
	cursor:pointer;
}
.dhwp-gallery-popup .dhwp-gallery-prev {
	position:absolute;
	right:calc(100% + 8px);bottom:50%;
	color:#fff;
	font-size:24pt;
	cursor:pointer;
}
.dhwp-gallery-popup .dhwp-gallery-next {
	position:absolute;
	left:calc(100% + 8px);bottom:50%;
	color:#fff;
	font-size:24pt;
	cursor:pointer;
}
.dhwp-gallery-popup .dhwp-gallery-text {
	position:absolute;
	top:100%;
	right:0;
	color:#fff;
}
.dhwp-gallery-popup .dhwp-gallery-caption {
	position:absolute;
	top:100%;
	left:0;
	color:#fff;
    font-size:10pt; margin:6px 0; 
}

.dhwp-gallery-list {
    margin-top:12px;
    display:grid;
    font-size:24pt;
    gap:8px;
    grid-template-columns:24px calc(100% - 48px - 16px) 24px;
}

.dhwp-gallery-list > div:nth-child(1),
.dhwp-gallery-list > div:nth-child(3) {
    align-self:center;
    justify-self:center;
    cursor:pointer;
}

.dhwp-gallery-list > div:nth-child(2) {
    padding-top:14%;
    height:0;
    overflow:hidden;
    position:relative;
}

.dhwp-gallery-list > div:nth-child(2) > div {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
}