/* temporarily hide caption/htmlCaption/gallery */



.jsGallery .sliderWrap,

.jsGallery .galleryWrap .galleryNav{

	display: none;

}





/* prevent accidental selection of images while navigating the galleries */

.jsGallery img, .jsGallery picture {

	vertical-align: bottom;

   -moz-user-select: none;

   -khtml-user-select: none;

   -webkit-user-select: none;



   /*

     Introduced in IE 10.

     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/

   */

   -ms-user-select: none;

   user-select: none;

}



.jsGallery .galleryWrap {    

    -moz-box-sizing: border-box;

	-webkit-box-sizing: border-box;

	box-sizing: border-box;

    margin: 0 0;

    position: relative;

    width: 100%;

	max-height: 800px;

	overflow: hidden;

}



.jsGallery .galleryWrap .slide {

	display:none;

}

.jsGallery .galleryWrap .slideWrap .slide:first-child {

	display:block;

}

.jsGallery .galleryWrap .slide > picture > img,

.jsGallery .galleryWrap .slide > a > picture > img {

    /* Boilerplate responsive images CSS */

	margin: auto;

    width: auto;

    max-width: 100%;

    height: auto;

	/* max-height:100%; */

	vertical-align:bottom;

	position:absolute;

	top: 0;

	left:0;

	right:0;

	bottom:0;

	transition: top .1s;

}



.jsGallery .respGallery .slide picture {

	margin:0 auto;

}

 

.jsGallery .placeholder {

    height:0;

	margin:0;

	padding:0;

}





/* captions */

.jsGallery .captionWrap {

	width: 90%;

	position:relative;

	list-style-type: none;

	padding: 0px;

	margin: 0 5%;

	transition: height .5s ease-out;

}	

.jsGallery .captionWrap li {

    color: #000000;

    display: none;

    font-size:1em;

    text-align: center;

	padding: .75em 0 .5em 0;

	margin:0;

	height: auto;	

}

.jsGallery .captionWrap li.activeSlide{

	display:block;

}



.jsGallery .captionWrap li h3{

	margin: 0;

}



.jsGallery .HTMLcaptionWrap {

    list-style-type: none;

    padding: 0;

    position: relative;

    width: 90%;

	margin: 0 5%;

	transition: height .5s;

	

}	

.jsGallery .HTMLcaptionWrap > li {

    color: #000000;

    display: none;

    padding: 1em 0;

    width: 100%;

}

.jsGallery .HTMLcaptionWrap > li.activeSlide {

	display: block;

}



/* Scrolling Gallery Styles */

.scrolling-gallery{

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	width:100%;

}



.scrolling-gallery > div{

	width: 100%;

	padding-top: 60%;

	display: block;

	background: #f4f4f4 center center no-repeat;

	box-sizing: border-box;

	margin: .5% 0;

	background-size:cover;

	cursor: zoom-in;

	top: 5em;

	position:relative;

	transition: top 1s;

}

.scrolling-gallery > div.scrolled-in{

	top: 0;

}



.scrolling-gallery > div.dgPart{

	width: 66.1666%

}



.scrolling-gallery > div.dgHalf{

	width: 49.5%;

}



.scrolling-gallery > div.dgThird{

	width: 32.5333%;

}



.scrolling-gallery > div > *{



	

}

.scrolling-gallery > div > a {

	top: 0;

	bottom:0;

	right:0;

	left:0;

	position:absolute;

	display: flex;

	justify-content: center;

	align-items: center;

}

.scrolling-gallery > div > div {

	justify-content: start;

	display: inline-block;

	position: absolute;

	bottom:0;

	display: flex;

}



.scrolling-gallery > div > a{

	background: #111a;

	opacity: 0;

	transition: opacity .5s;

	color: white;

}

.scrolling-gallery > div > a:hover{

	opacity: 1;

}



.scrolling-gallery > div .scrolling-overlay{

	opacity: 1;

	transition: opacity .5s;

}

.scrolling-gallery > div:hover .scrolling-overlay{

	opacity: 0;

}



.project-hover{

	transform: translateY(3em);

	transition: transform .5s;

}

.project-hover .ph-heading{

	font-size: 1.8rem;

	line-height: 2.2rem;

	font-weight: 400;

	text-align: center;

	padding: 0 1em;

}

.project-hover span{

    text-transform: uppercase;

    text-align: center;

    margin: 0 auto;

	display: block;

    margin-top: 1em;

}

.scrolling-gallery > div > a:hover .project-hover{

	transform: translateY(0);

}



.project-detail{

	padding: 1em;

	color: white;

	background: #4444;

	font-weight: 600;

}

.project-detail > div{

	font-weight: 400;

}

#top .jsGallery {
  	 margin-top: var(--min-header-height);
}

.page-home #top .jsGallery {
	  margin-top: unset;
}


@media only screen and (max-width: 1185px) {

	#top .jsGallery,
	.page-home #top .jsGallery {
  
	  margin-top: var(--min-header-height);
  
	}
  
  }