/****** CSS Style Mobile ******/
html, body {
	height: 100%;
}
.navbar button.btn {
	/*border: 0;
	border-radius: 0;
	background-color: transparent;
	-webkit-appearance: none;
	   -moz-appearance: none;*/
}
.home #column-right,
.home #sidebar-1 {
	margin-top: 1rem;
}
.fixed {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 50;
}

@media (min-width: 992px) {
	#column-middle.show {
		max-height: 100%;
		height: 100%;
	}
	.home #column-middle:not(.show) ~ #column-right,
	.home #column-middle:not(.show) ~ #sidebar-1 {
		flex: inherit;
		max-width: 45%;
	}
	#column-middle.show ~ #column-right,
	#column-middle.show ~ #sidebar-1 {
		padding-top: 1rem;
	}

	/* <!-- Navbar --> */
	.navbar-brand h4 span  {
		display: inline-block;
	}
	#navbarSupportedContent {
		text-align: right;
	}
	#navbarSupportedContent div {
		display: inline-block;
		width: auto;
		margin-right: 0;
		margin-left: auto;
	}
	#navbarSupportedContent .nav-link {
		display: inline-block;
	}

	/* <!-- Collapse horizontal --> */
	#column-left.collapsing,
	#column-right.collapsing,
	#sidebar-1.collapsing {
		position: relative;
		height: 0;
		overflow: hidden;
		-webkit-transition-property: height, visibilty; 
		        transition-property: height, visibilty;
		-webkit-transition-duration: 0.35s;
		        transition-duration: 0.35s;
		-webkit-transition-timing-function: ease;
		        transition-timing-function: ease;
	}
	#column-left.collapsing.horizontal,
	#column-right.collapsing.horizontal,
	#sidebar-1.collapsing.horizontal {
		width: 0;
		height: auto;
		-webkit-transition-property: width, visibilty;
		        transition-property: width, visibilty;
	}

	/* <!-- Diagnosis --> */
	#diagnosis-result .diagnosis-match-list {
		width: 100%;
		height: 500px;
		transform: translateZ(0);
	}
	#diagnosis-result .viewport {
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	#diagnosis-result .list-group {
		margin-bottom: 96px;
	}
	#diagnosis-result .fetch-button {
		position: fixed;
		bottom: 80px;
		left: 0;
		width: calc( 100% - 17px );
		text-align: center;
		transform: translateY(100%);
	}
	#diagresultsclose {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
}

@media (max-width: 991.98px) {
	.home #column-middle.show ~ #column-right,
	.home #column-middle.show ~ #sidebar-1 {
		padding-top: 0;
	}
	#column-middle.show,
	#column-middle.show ~ #column-right,
	#column-middle.show ~ #sidebar-1 {
		max-height: 450px;
		overflow-y: auto;
		scroll-behavior: smooth;
	}
	#column-middle.show.vmax {
		max-height: 100%;
		height: 100%;
	}
	body.mobile:not(.home) #controls-panel {
		position: relative;
		z-index: 20;
		margin-bottom: 0;
		padding-bottom: 0.5rem;
		box-shadow: 0 1rem 0.25rem -6px rgba(0, 0, 0, 0.25);
	}
	#column-middle.show ~ #column-right,
	#column-middle.show ~ #sidebar-1 {
		padding-top: 1.5rem;
		box-shadow: 0 -1rem 0.25rem -6px rgba(0, 0, 0, 0.25);
	}
	#column-middle.show {
		position: relative;
	}
	#footer {
		position: static;
	}
}

@media (orientation: landscape) {
	#column-middle.show,
	#column-middle.show ~ #column-right,
	#column-middle.show ~ #sidebar-1 {
		max-height: 100%;
		height: 100%;
	}
}

/* ---- slide widths ---- */

/* <? -- iPhone X --> */
@media (max-width: 414px) {
	#gallery-grid.tile {
		justify-content: space-between;
	}
	#gallery-grid.slide-h.list {
		align-items: inherit;
	}
	#gallery-grid.image.tile .ehsl-slide-card,
	#gallery-grid.slide-v.tile .ehsl-slide-card {
		/*width: 48%;*/
		margin-right: 0;
	}
	#gallery-grid.slide-h.list .ehsl-slide-card,
	#gallery-grid.slide-h.tile .ehsl-slide-card {
		width: calc( 100% - 8px );
		margin-right: 0;
	}
	#gallery-grid.image.tile .ehsl-slide-card:nth-of-type(odd),
	#gallery-grid.slide-v.tile .ehsl-slide-card:nth-of-type(odd) {
		margin-right: 0.5rem;
	}
	#gallery-grid.image.tile .ehsl-slide-img,
	#gallery-grid.slide-v.tile .ehsl-slide-img {
		flex: 1 1 auto;
		width: 100%;
	}
	#gallery-grid.slide-h.list .ehsl-slide-ctl a {
		margin-right: 0;
	}	
}

/* Horizontal Slide Card, Single Column */
@media (max-width: 480px) {
	#gallery-grid.image.list .ehsl-slide-card,
	#gallery-grid.image.tile .ehsl-slide-card,
	#gallery-grid.slide-v .ehsl-slide-card {
		flex-direction: row;
		width: 100%;
	}
}

@media (min-width: 820px) {
	#gallery-grid.slide-h.tile {
		justify-content: space-between;
	}
	#gallery-grid.slide-h.tile .ehsl-slide-card {
	 	flex-basis: 49%;
	 	min-width: 380px;
	}
	#gallery-grid.slide-h.tile .ehsl-slide-card:nth-of-type(odd) {
		margin-right: 0.5rem;
	}
}

/* ---- sidebar width adjustments ---- */
@media (min-width: 992px) {
	.ehsl-slide-card {
		margin-bottom: 1rem;
	}
	#gallery-grid.image.tile .ehsl-slide-card,
	#gallery-grid.slide-v.tile .ehsl-slide-card,
	#column-middle.vmax #gallery-grid.slide-h.tile .ehsl-slide-card:nth-of-type(odd) {
		margin-right: 1rem;
	}
}

/* ---- sidebar width adjustments ---- */
@media (min-width: 992px) and (max-width: 1083.98px) {
	#column-middle:not(.vmax) #gallery-grid.slide-h.tile .ehsl-slide-card {
		flex-basis: calc( 100% - 1rem );
		min-width: calc( 100% - 1rem );
		margin-right: 0;
	}
}

@media (width: 1024px) {
	body:not(.home) .col-lg-3 {
		padding-right: 5px;
		padding-left:10px;	
	}

}

@media (min-width: 1084px) {
	#gallery-grid.slide-h.tile .ehsl-slide-card {
	 	flex-basis: 48%;
	}
	#gallery-grid.slide-h.tile .ehsl-slide-card:nth-of-type(odd) {
		margin-right: 1rem;
	}
}

@media (min-width: 1103px) {
	#gallery-grid.slide-h.list .ehsl-slide-label {
		font-size: 125%;
	}
	#gallery-grid.slide-h.tile .ehsl-slide-card {
	 	flex-basis: 48%;
	}
}

/* ---- no sidebar ---- */
@media (min-width: 1232px) {
	#column-middle.vmax #gallery-grid.slide-h.tile {
		justify-content: inherit;
	}
	#column-middle.vmax #gallery-grid.slide-h.tile .ehsl-slide-card {
 		flex-basis: 32%;
 		margin-right: 1rem;
	}
}

/* ---- no sidebar ---- */
@media (min-width: 1630px) {
	#column-middle.vmax #gallery-grid.slide-h.tile .ehsl-slide-card {
 		flex-basis: 24%;
	}
}

@media (min-width: 1636px) {
	#gallery-grid.slide-h.tile {
		justify-content: inherit;
	}
	#gallery-grid.slide-h.tile .ehsl-slide-card {
 		flex-basis: 32%;
 		margin-right: 1rem;
	}
}

/* ---- no sidebar ---- */
@media (min-width: 2020px) {
	#column-middle.vmax #gallery-grid.slide-h.tile .ehsl-slide-card {
 		flex-basis: 10%;
	}
}

@media (min-width: 2160px) {
	#gallery-grid.slide-h.tile .ehsl-slide-card {
		flex-basis: 24%;
	}
}

@media (min-width: 2600px) {
	#gallery-grid.slide-h.tile .ehsl-slide-card {
		flex-basis: 10%;
	}
}