#gallery {
	margin: 20px  5px  0  5px; 
	text-align:center;
	min-height:300px;
	height:auto;
	overflow:auto
}
#gallery img{max-width: 100%;max-height: 100%;}
.gbox {
	display: inline-block;
    position: relative;
	height:158px;
	margin: 10px 10px 0 0;
	object-fit: cover;
	background-color: #fff;
	border: 1px solid #d7d7d7;
	position:relative;
	overflow: hidden;
	border-radius: 11px;
	cursor:pointer;
	max-width: 175px;
	text-decoration:none;
}

.gbox:hover {
	background-color:  #FFFFE8;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.gbox .gbox-title {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    text-align: center;
    min-height: 25px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    display: block;
    font-size:10pt;
    padding: 10px;
}

#selectedimage img {
	max-width: 100%;
	height: auto;
	max-height: 500px ;
	margin: auto;
	display: block;
    border-radius: 15px;
}

#selectedimage .picinfo {
    padding: 40px 15px;
    text-align: justify;
}

#videocontainer {
	border-radius: 15px;
	overflow: hidden;
}

#videocontainer.loading {
	background: url("/img/video-loader.svg") no-repeat #000 center;
	background-size: 90px 90px;
}

.pgtitle {
	margin-bottom: 18px;
}

.gbox[data-video]:not([data-video=""])::after {
	content: " ";
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
	width: 48px;
	aspect-ratio: 1;                
	background: url("/img/play.svg") center no-repeat;
	background-size: contain;
}

.gbox img {                
	transition: .3s ease;
}

.gbox:hover img {
	transform: scale(102%);
}

.video-js {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
}

.video-frame {
	position: relative;
}

#embed_frame_video {
    width: 100%;
    aspect-ratio: 16/9;
}

#embed_frame_video iframe {
    border: none;
    width: 100%;
    display: block;
    height: 100%;
}

.play-btn {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,calc(-50% - 12px));
	width: 76px;
	aspect-ratio: 1;                
	background: url("/img/play.svg") center no-repeat;
	background-size: contain;
	cursor: pointer;
}

.play-btn.disabled {
	display: none;
}

@media screen and (max-width: 576px) {
	#videocontainer.loading {
		background-size: 70px 70px;
	}
	#selectedimage .picinfo {
		font-size: 15px;
	}
	.gbox {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 1;
		margin: 0 0 15px 0;
		object-fit: cover;
		background-color: #fff;
		border: 1px solid #d7d7d7;
		position: relative;
		overflow: hidden;
		border-radius: 11px;
		cursor: pointer;
		text-decoration: none;
	}
	.gbox[data-video]:not([data-video=""])::after,.play-btn {
		width: 64px;
	}
	.gbox img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		margin-top: -25px;
	}
}