:root {
    --animate-duration: 0.4s;			/* make loading slide page quicker */
    --animate-delay: 0.5s;
}
.btn-layout.btn-outline-primary {
	border-radius: 0.2rem;
	font-size: 0.95rem;
    border-color: var(--btn-color);
	color: var(--btn-color);
	background-color: transparent;
	font-weight: bold;
}
.btn-layout.btn-outline-primary:hover, .btn-layout.btn-outline-primary.active {
	background-color: var(--btn-color);
	border-color: var(--btn-color);
	color: #FFF;
	text-decoration: none;
}

.btn-select-sort {
	border-radius: 0.2rem;
}



.grid-browse-container {
	margin: auto;
	max-width: 2000px;
	display: grid; 
	grid-template-columns: 20rem 5fr; 
	gap: 0px 0px; 
	grid-template-areas: 
		"grid-browse-menu grid-browse-window ";
}
	.grid-browse-menu {

		grid-area: grid-browse-menu;
		/* overflow-y: auto; */
		position: sticky;
		top: 8rem;
		display: block !important;
		height: calc(100vh - 10rem);
	}
	.grid-browse-window {
		grid-area: grid-browse-window;
		padding: 1rem;
	}

.breadcrumbs-container {
	padding-top: 3rem;
}
.breadcrumb A {
	color: black;
	font-weight: bold;
	text-decoration: none;
}
	.breadcrumb A:hover, .breadcrumb A:focus {
		
	}
	
.browse-controls {
	display: flex;
    justify-content: flex-end;
	padding-bottom: 1rem;
}
	.container-collection {
		margin-right: auto;

	}
	#collection-jump {
		border: 3px solid;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
	}
	.container-gridlayout {
		margin-left: 1rem;
	}
	
	.icon-region, .icon-region:hover {
		cursor: initial;
		background-color: #EEE !important;
		color: #333 !important;
	}
	
.grid-browse-container.menu-remove {	
	margin: auto;
	max-width: 2000px;
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 0px 0px; 
	grid-template-areas: 
		"grid-browse-window";
}
	.grid-browse-container.menu-remove .grid-browse-menu, .grid-browse-container.menu-remove .btn-mobile-filter-menu {
		display: none !important;
	}
	
	
	
/* Landing */
.wiz-container {
	display: grid;
	  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
}
	.wiz-container A {
		display: block;
		overflow: hidden;
		color: #000;
		text-decoration: none;
		font-size: 0.9rem;
		font-family: 'Montserrat', sans-serif;
		aspect-ratio: 1;
	}
	.wiz-container IMG {
		width: 100%;
		height: 85%;
		object-fit: cover;
		display: block;
		border-radius: 0.3rem;
	}

	.wiz-container.default A {
		text-align: center;
		padding: 1.5rem;
		background-color: #EEE;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wiz-container.default A:hover, .wiz-container.default A:active, .wiz-container.default A:focus {
		background-color: #DDD;
	}
	
	
/* temp */
.cat-banner-container {
	margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-auto-columns: 1fr;
    gap: 5px 5px;
    grid-template-areas: ".";
}
.cat-banner-container A {
	display: block;
}
.cat-banner-container A img {
    object-fit: fill;
    width: 100%;
    max-height: 100%;
}



/* HERO SLIDER */
.slider-responsive {
	background-color: #FFF;
	display: grid;

    overflow: hidden;
}
	.slicker-hero {
		width: 100%;
		height: 100%;
		background-color: #FFF;
		overflow: hidden;
		padding-bottom: 2rem;
		margin-bottom: 0px;
	}

		.slicker-hero  .slick-track, .slicker-hero  .slick-list
		{
			height: 100%;
		}
		.slicker-hero  .slick-track .slick-slide
		{
			height: 100%;
			border-radius: var(--img-radius); overflow: hidden;
		}
		.slicker-hero  .slick-track .slick-slide>DIV
		{
			height: 100%;
		}

			.slicker-hero-slide {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;

			}
			.slicker-hero-slide IMG {
				width: 100%;
				height: 100%;
				object-fit: cover;
				overflow: hidden;
				transition: transform 1s ease-in-out;
				transform: scale(1.05);
			}
			.slicker-hero .slick-active .slicker-hero-slide IMG {
				transform: scale(1);
			}
			.slicker-hero .slick-active  .slicker-hero-slide IMG.slick-loading {
				transform: scale(1.05);
			}
			
			
			.slicker-hero-slide .hero-main {
					color: #FFF;
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					position: absolute;
					top: 2rem;
					left: 2rem;
				}
					.slicker-hero-slide .hero-title {

						letter-spacing: 0.3rem;

						/* text-shadow:  0px 0px 5px #000; */
						text-align: center;
						background-color: rgba(0,0,0,1);
						padding: 1rem 2rem 1rem 2rem;
						border-radius: var(--img-radius);
					}

					
						.slicker-hero-slide .hero-sub {
							font-size: 1rem;
						}
			.slicker-hero .slick-active  .slicker-hero-slide .hero-main {
				transform: translateY(0%);
				opacity: 1;
			}
			.slicker-hero .slicker-hero-slide .hero-main {
				transition: all 1s cubic-bezier(0.42, 0, 0.13, 0.94);

					transform: translateY(40%);
					transition-delay: 0.5s;
					opacity: 0;
			}			
						
						
						
						
					.slicker-hero .slick-arrow-left {
						position: absolute;
						left: 0px;
						bottom: -7px;
						width: 30px;
						height: 30px;
						color: #FFF;
						margin-top: -50px;
						background-color: #FFF;
						color: #000;
						border: 0px;
						z-index: 1;
						border-top-right-radius: var(--img-radius);
						border-bottom-right-radius: var(--img-radius);
						opacity: 0.75;
						transition: opacity 0.3s linear;
					}
					.slicker-hero .slick-arrow-right {
						position: absolute;
						right: 30px;
						bottom: -7px;
						width: 30px;
						height: 30px;
						background-color: #FFF;
						color: #000;
						border: 0px;
						border-top-left-radius: var(--img-radius);
						border-bottom-left-radius: var(--img-radius);
						opacity: 0.8;
						transition: opacity 0.3s linear;
					}
					.slicker-hero .slick-arrow-left:hover,
					.slicker-hero .slick-arrow-right:hover,
					.slicker-hero .slick-arrow-left:focus,
					.slicker-hero .slick-arrow-right:focus
					.slicker-hero .slick-arrow-left:active,
					.slicker-hero .slick-arrow-right:active,
					.slick-autoplay-toggle-button:hover,
					.slick-autoplay-toggle-button:active,
					.slick-autoplay-toggle-button:focus
					{
						opacity: 1;
						color: var(--primary-link-color);
					}
	.slick-autoplay-toggle-button {
		bottom: -5px;
		right: 0px;
		left: auto;
	}

/* MOB */
@media (min-width: 0px) and (max-width: 1480px) {
	.wiz-container {
	  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	  gap: var(--med-gap) var(--med-gap);
	}
	.wiz-container A {
		font-size: 0.6rem;
	}
}

/* MOB - for browse menu */
@media (min-width: 0px) and (max-width: 615px) {
	.browse-controls {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 0.5rem 0.5rem;
	}
	.container-gridlayout {
		margin: 0rem;
	}
	.container-collection {
		width: 100%;
	}
}

/* SEMI-MOB Between this width */
@media (min-width: 992px) and (max-width: 1280px) {
}
/* MOBILE - Over this width */
@media all and (max-width: 991px) {
	
	/* menu mobile */
	.grid-browse-window {
		display: block;
	}
	.grid-browse-container {
		grid-template-columns: auto;
		grid-template-areas: inherit;
		gap: 0rem 0rem;
		box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
	}
	.grid-browse-menu {
		height: calc(100vh - 0rem);
		box-shadow: 0 1rem 3rem rgba(0,0,0,0.575);
		position: fixed;
	}
	.menu-grid {
		gap: 0rem 0rem;
	}
	#btn-mobile-filter-menu {
		position: fixed;
		z-index: 1;
		bottom: 1rem;
		left: 1rem;
	}
	.grid-browse-container.menu-remove #btn-mobile-filter-menu {
		display: none;
	}
	H2 {
		font-size: 1.2rem;
	}
}