#hmns-gallery {
    max-width: 1400px;
}
.hmns-gallery-thumbs {
	display: flex;
	column-gap: 24px;  
}
#hmns-gallery .item{
    width: calc(25% - 3*16px/4);
    height: 190px;
    background-color: #ccc;
}

@media (max-width: 950px){
    #hmns-gallery .item{
      width: calc(33.3333% - 2*16px / 3)
    }
}
@media (max-width: 750px){
    #hmns-gallery .item{
      width: calc(50% - 16px / 2);
      height: 25vw;
    }
}
.hmns-gallery-screen{
    height: 790px;
    margin-bottom: 16px;
    background-color: #ccc;
}
@media (max-width: 1500px){
    .hmns-gallery-screen{
      height: 53vw;
    }
}
#hmns-gallery .flickity-prev-next-button,
#hmns-gallery .flickity-page-dots{
    display: none;
}
.hmns-gallery-thumbnail{
    cursor: default;
    overflow: hidden;
}
.hmns-gallery-thumbnail,
.hmns-gallery-thumbnail>img{
    position: absolute; 
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.hmns-gallery-thumbnail>img{
    object-fit: cover;
    object-position: center;
    -o-object-fit: cover;
    -o-object-position: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.hmns-gallery-thumbnail:not(.have-title):hover img{
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.hmns-gallery-thumbnail .z-title{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 15px;
    display: flex;
    align-items:center;
    justify-content: center;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

    min-height: 70px;

    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);

    background-color: #111111;
    color: white;

    font-family: 'sentinel', serif;
    font-weight: 600;
    font-size: 18px;


    text-align: center;
}
.hmns-gallery-thumbnail.have-title:hover img{
    top: -70px;
}
.hmns-gallery-thumbnail.have-title:hover .z-title{
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}


.hmns-gallery-screen{
    position: relative;
    overflow: hidden;
}
.hmns-gallery-screen-item{
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;

    opacity: 0;
    z-index: 1;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.hmns-gallery-screen-item.active{
    opacity: 1;
    z-index: 5;
}
.hmns-gallery-photo>img,
.hmns-gallery-mp4>video{
    display: block;
    position: absolute;
    left: 0px;
    top:0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -o-object-fit: cover;
    -o-object-position: center;
}
.hmns-gallery-youtube>iframe{
    display: block;
    position: absolute;
    left:0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.hmns-gallery-screen-item-main{
    opacity: 1;
    z-index: 2;
}
.hmns-gallery-screen-item-main>*{
    display: block;
    position: absolute;
    object-fit: cover;
    object-position: center;
    -o-object-fit: cover;
    -o-object-position: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.hmns-gallery-screen-item-main>script{
    display: none;
}

.hmns-gallery-screen .button-bar {
	position: absolute;
	left: 50%;
	bottom: 48px;
	transform:translate(-50%,0);	
	display: flex; 
	align-items: center;
	justify-content: center;
	width: max-content;
	gap: 12px;
	z-index: 9999999999;
}
.hmns-gallery-screen .fullscreen-bar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 99999999999;	
}
.hmns-gallery-screen .fullscreen-bar.fsfix {
	position: fixed;
	top: 48px;
	right: 48px;
	z-index: 99999999999;	
}
.pause, .play, .fs-vid, .exitfs-vid { line-height:1; }
.pause svg, .play svg { width: 48px;height:48px; }
.fs-vid svg, .exitfs-vid svg { width: 32px;height:32px; }
.pause:hover, .play:hover, .fs-vid:hover, .exitfs-vid:hover { cursor: pointer; }
.hmns-gallery-screen .button-bar.bfix {
	position: fixed;
	bottom:48px;
	left: 50%;
	transform:translate(-50%,0);
	z-index: 9999999999999;	
	
}
@media screen and (max-width: 1024px) {
.hmns-gallery-screen .button-bar {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform:translate(-50%,0);	
}
.bfix {
	position: fixed;
	bottom:60px;
	left: 50%;
	transform:translate(-50%,0);
	z-index: 9999999999999;	
	
}
.hmns-gallery-screen .fullscreen-bar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 99999999999;	
}
.hmns-gallery-screen .fullscreen-bar.fsfix {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 99999999999;	
}
}

/* Aspect-ratio variants (scoped via aspect-wide / aspect-tall on #hmns-gallery) */
#hmns-gallery.aspect-wide .hmns-gallery-screen-item-main { 
	width: 100%;
	max-width: 100%;
	height: 0;
	padding-bottom: 56.25%; 
	box-shadow: 0px 0px 27.2px -1px #000;
	margin-bottom: 56px;
}
#hmns-gallery.aspect-wide .hmns-gallery-screen-item-main video {
	position: absolute;
	min-width: 100%;
	min-height: 100%;	
	z-index: 0;
	left:50%;
	top: 50%;
	transform:translate(-50%,-50%);
	width: 100%; 
	height: 100%;
}
#hmns-gallery.aspect-wide .hmns-gallery-screen-item-main video.fullscreen {
	position: fixed;
	z-index: 9999999; 
	width: 100%;
	left: 0;
	top: 0;
	height: auto;		
	transform:translate(0,0);
}
@media screen and (max-width: 1600px) {
	#hmns-gallery.aspect-wide .hmns-gallery-screen-item-main {		
		margin: 0px auto 56px; 
	}
}
@media screen and (max-width: 768px) {
	#hmns-gallery.aspect-wide .hmns-gallery-screen-item-main { 
		width: 100%;
		max-width: 100%;
		height: 0; 
		box-shadow: 0px 0px 27.2px -1px #000;
		margin-top: 0px;
		margin-bottom: 36px;
	}	
	#hmns-gallery.aspect-wide .hmns-gallery-screen-item-main video {
		position: absolute;
		min-width: 100%;
		min-height: 100%;	
		z-index: 0;
		left:50%;
		top: 50%;
		transform:translate(-50%,-50%);
		width: auto;
		height: 100%; 
	}		
}
#hmns-gallery.aspect-tall .outer-holiday-vid-container { 
	width: 400px; 
	max-width: 100%;
	margin: 56px auto;
}
#hmns-gallery.aspect-tall .hmns-gallery-screen-item-main { 
	width: 100%;
	max-width: 100%;
	height: 0;
	padding-bottom: 177%; 
	box-shadow: 0px 0px 27.2px -1px #000;
}
#hmns-gallery.aspect-tall .hmns-gallery-screen-item-main video {
	position: absolute;
	min-height: 100%;	
	z-index: 0;
	left:50%;
	top: 50%;
	transform:translate(-50%,-50%);
	width: auto; 
	height: 100%;
}
#hmns-gallery.aspect-tall .hmns-gallery-screen-item-main video.fullscreen {
	position: fixed;
	z-index: 9999999; 
	width: auto;
	left: 0;
	top: 0;
	height: 100%;	
	transform: translate(0,0);	
}
@media screen and (max-width: 1600px) {
	#hmns-gallery.aspect-tall .hmns-gallery-screen-item-main {		
		margin: 56px auto; 
	}
	#hmns-gallery.aspect-tall .outer-holiday-vid-container { 
		width: 300px; 
		max-width: 100%;
		margin: 56px auto;
	}
}
@media screen and (max-width: 680px) {
	#hmns-gallery.aspect-tall .outer-holiday-vid-container {
		width: 280px;		
	}	
}
@media screen and (max-width: 480px) {
	#hmns-gallery.aspect-tall .outer-holiday-vid-container {
		width: 240px;		
	}	
}
@media screen and (max-width: 380px) {
	#hmns-gallery.aspect-tall .outer-holiday-vid-container {
		width: 200px;		
	}	
}