/*  ******************************** Tag Select */
.container-grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  gap: 1rem 1rem; 
  /*grid-template-areas: 
    ". . . . ."; 
	*/
	max-width: 1770px;
	margin: auto;
}
	.container-grid .grid-item {
		display: block;
		background-color: #DDD;
		margin: auto;
		border-radius: var(--img-radius);
	}
	.container-grid IMG {
			width: 100%;
			height: auto;
			border-radius: var(--img-radius);
	}
@media screen and (max-width: 800px) {
	.container-grid {
		grid-template-columns: 1fr 1fr;
	}
}
/*  ******************************** Hi res */
.slider-under {
	margin-top: 2rem;
	margin-bottom: 5rem;
}


/*  ******************************** Hi res */
.slicker-responsive {

		overflow: hidden;
		max-height: 728px;
}
	.slicker-hero {
		width: 100%;
		height: 100%; /* For 100% screen height */


		margin: 0px;
	}

		.slicker-hero  .slick-track, .slicker-hero  .slick-list
		{
			height: 100%;
		}
		.slicker-hero  .slick-track .slick-slide
		{
			height: 100%;
		}
		.slicker-hero  .slick-track .slick-slide>DIV
		{
			height: 100%;
		}

			.slicker-hero-slide {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
				border-bottom-left-radius: var(--img-radius);
				border-bottom-right-radius: var(--img-radius);

			}
			.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;
					
					/*
					width: 100%;
					height: 100%;
					*/
				}
					.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;
						width: 50px;
						height: 60px;
						color: #FFF;
						top: 50%;
						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: 0px;
						top: 50%;
						width: 50px;
						height: 60px;
						margin-top: -50px;
						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
					{
						opacity: 1;
					}
	.slick-dots {
		bottom: -1rem;			
	}
	.slick-dots li button {
		width: 40px;
		height: 10px;
	}
	.slick-dots li button .slick-dot-icon:before {
		display: block;
		height: 100%;
		width: 100%;
		background-color: #000;
		content: "";
	}
	.slick-dots li.slick-active button .slick-dot-icon:before {
		margin: 0px;
	}
	.slick-dots li.slick-active button:focus .slick-dot-icon, .slick-dots li button:focus .slick-dot-icon:before {
		background-color: var(--primary-link-color);
	}
	
	
	
	
	
/* MOBILE - Over this width */
@media all and (max-width: 991px) {  
	.slicker-hero .slick-arrow-right, .slicker-hero .slick-arrow-left {
		width: auto;
	}
	.slick-dots li button {
		width: 20px;
		height: 10px;
	}
}
/* NON-MOBILE - Over this width */
@media all and (min-width: 992px) {  

}


/* decor */
.slider-responsive {

	position: relative;
}
.slicker-hero {
	 /* opacity: 0; */
}
.loader-container {
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 289px 59px;
	
	position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
  animation: fadeit ease-in-out 3s;
  animation-fill-mode: forwards;
  opacity:0;
}
.loader {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
	.square-container {
		width: 120px;
		height: 120px;
		display: flex;

		flex-wrap: wrap;
	}


	.square {
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  background-color: grey;
	  animation: effect1 2s infinite ease-in-out;
	}

	.square1,
	.square5,
	.square9 {
	  animation-delay: 0.4s;
	}
	.square2,
	.square6 {
	  animation-delay: 0.6s;
	}
	.square3 {
	  animation-delay: 0.8s;
	}

	.square4,
	.square8 {
	  animation-delay: 0.2s;
	}

	@keyframes effect1 {
	  0%,
	  80%,
	  100% {
		transform: scale3D(1, 1, 1);
	  }
	  40% {
		transform: scale3D(0, 0, 1);
	  }
	}
	
	.square1 {
		background-color: var(--cat-tile-color);
	}
	.square2 {
		background-color: var(--cat-luxury-vinyl-color);
	}
	.square3 {
		background-color: var(--cat-carpet-tile-color);
	}
	.square4 {
		background-color: var(--cat-hardwood-color);
	}
	.square5 {
		background-color: var(--cat-laminate-color);
	}
	.square6 {
		background-color: var(--cat-underlayment-color);
	}
	.square7 {
		background-color: var(--cat-cushion-color);
	}
	.square8 {
		background-color: var(--cat-seasonal-color);
	}
	
	@keyframes fadeit {
   0% { opacity: 0 }
  20% { opacity: 0.7 } /* 20% of 5 seconds = 1 second */
  80% { opacity: 0.7 }
  100% { opacity: 0 }
	}
	
	

.container-grid-video {
	padding-top: 1rem;
	padding-bottom: 2.2rem;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  gap: 1rem 1rem; 
  /*grid-template-areas: 
    ". . . . ."; 
	*/
	max-width: 1770px;
	margin: auto;
}
	.container-grid-video .grid-item-video {
		display: block;
		margin: auto;
		font-size: 1.5rem;
	}
	.container-grid-video video {
		border-radius: var(--img-radius);
	}
	
	.subhero2 {
		margin-top: 0.5rem;
		border-radius: var(--img-radius);
	}
	

	
	
	
/* MOBILE - Over this width */
@media all and (max-width: 991px) {  
	.loader-container {
		top: 3rem;
		background: none !important;
	}
	.container-grid-video {
		grid-template-columns: 1fr 1fr;
	}
	.loader {
		transform: scale(0.5);
	}
	.slider-under {
		padding-top: 1rem;
		padding-bottom: 2rem;
	}
}
/* SEMI-MOB Between this width */
@media (min-width: 992px) and (max-width: 1433px) {
	.loader-container {
		top: 2rem;
		height: 60%;
	}
	.loader {
		transform: scale(0.5);
	}
}
/* NON-MOBILE - Over this width */
@media all and (min-width: 992px) {  
	.loader-container {
		top: 3rem;
	}
}

/* WCAG fix */
.slick-sr-only {
	font-size: 1rem;
}


/* video */
.offcanvas-header {
	display: block;
	text-align: center;
	padding-bottom: 0rem;
}




/* SHOWROOM */
#section-showroom-container {
	min-height: 800px;
	max-width: 1920px;
    height: 100vh; /* For 100% screen height */
	margin: auto;
	position: relative;
}
.section-showroom {
	  background-attachment: fixed;
	  background-position: center bottom;
	  background-repeat: no-repeat;
	  background-size: cover;
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: var(--img-radius);
}
	.section-showroom-text h2 {
		margin-bottom: 2rem;

		font-weight: 400;

	}
	.section-showroom-text {
		/* border-left: 10px solid var(--main-company-color); */
		position: absolute;
		bottom: 150px;
		max-width: 40rem;
		/* background-color: rgba(255,255,255,1); */
		/* color: #111; */
		/* padding: 3.5rem; */
		/* max-width: 450px; */
	}
	
	/* apple does not support parallax effect */
	@media only screen and (max-width: 1024px) {
		.section-showroom {
			background-attachment: scroll !important;
		}
		.section-showroom-text {
			padding: 1.5rem;
		}
	}