@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Amoky';
  src: url('../fonts/Amoky_Shading_Typeface.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
body {
  overflow: hidden;
}
.bannerText1 {
  font-family: 'Amoky', serif;
}
.bannerText2 {
  font-family: 'Anton', serif;
}
.wave-container {
  aspect-ratio: 111 / 25;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wave-list {
  display: flex;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wave-list li {
  width: 150px;
  height: 150px;
  background: white;
}
.bg-container {
  aspect-ratio: 111 / 25;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 575.98px) {
  .bg-container {
    aspect-ratio: 150 / 47;
  }
}
.dept-container {
  aspect-ratio: 111 / 25;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 575.98px) {
  .dept-container {
    aspect-ratio: 111 / 31;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}
.bg-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: visible;
}
@media (max-width: 575.98px) {
  .bg-list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
  }
}
.products-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: visible;
}
@media (min-width: 992.98px) {
  .products-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
  }
}
@media (max-width: 768.98px) {
  .products-list {
    display: none;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
  }
}
.products-list li {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: drop-shadow(2px 4px 6px black);
}
.products-list li div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.subs_products-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: visible;
}
@media (min-width: 992.98px) {
  .subs_products-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
  }
}
@media (max-width: 768.98px) {
  .subs_products-list {
    /*display: none;*/
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
  }
}
.subs_products-list li {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: drop-shadow(2px 4px 6px black);
}
.subs_products-list li div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
@media (max-width: 768.98px) {
  #products_random {}
  .bg-container {
    overflow: visible !important;
  }
}
.bg-list2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 90%;
}
@media (max-width: 575.98px) {
  .bg-list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
  }
}
.subs-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#subdeptBanners .bg-list li {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: drop-shadow(0px 0px 1px black);
}
.bg-list li {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: drop-shadow(2px 4px 6px black);
}
#subdeptBanners .bg-list2 li {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: drop-shadow(0px 0px 1px black);
}
.bg-list2 li {
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(2px 4px 6px black);
}
.bg-list li div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.bg-list2 li div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.bg-list .overlay {}
.even {
  /*transform: perspective(900px) rotateY(28deg) scale(1);
		transform-origin: center center;*/
}
.odd {
  /*transform: perspective(900px) rotateY(-28deg) scale(1);
		transform-origin: center center;
			
		
		 -webkit-mask-image: url("img/svg/eDeckslogo.svg");
  mask-image: url(img/svg/eDeckslogo.svg);
  mask-size: 80%;
  mask-repeat: no-repeat;
  mask-position: center;
		
		*/
}
.odd .label {
  background-color: #363640 !important
}
.mask1 {
  -webkit-mask-image: url("../img/svg/eDeckslogo.svg");
  mask-image: url("../img/svg/eDeckslogo.svg");
  mask-size: 80%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.eDecks .mask1 {
  -webkit-mask-image: url("../img/svg/eDeckslogo.svg");
  mask-image: url("../img/svg/eDeckslogo.svg");
  mask-size: 80%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.eRoofs .mask1 {
  -webkit-mask-image: url("../img/svg/eRoofslogo_mask.svg");
  mask-image: url("../img/svg/eRoofslogo_mask.svg");
  mask-size: 80%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.eDecks #subdeartmentBanners .mask1 {
  -webkit-mask-image: url("../img/svg/eDeckslogo.svg");
  mask-image: url("../img/svg/eDeckslogo.svg");
  mask-size: 60%;
  mask-repeat: no-repeat;
  mask-position: 50% 90%;
}
.eRoofs #subdeartmentBanners .mask1 {
  -webkit-mask-image: url("../img/svg/eRoofslogo_mask.svg");
  mask-image: url("../img/svg/eRoofslogo_mask.svg");
  mask-size: 60%;
  mask-repeat: no-repeat;
  mask-position: 50% 90%;
}
.mask1 .reveal {
  display: none
}
.lh-tiny {
  line-height: 14px;
}
#dept_siblings .slide {
  display: none
}
#slide0 {
  transform: rotate(5deg) scale(1.8);
  transform-origin: -1% 39%;
}
@media (max-width: 575.98px) {
  #slide0 {
    transform: scale(0.6) rotate(15deg);
    transform-origin: 28% -14%;
  }
}
#subdeptBanners #layer2 {
  opacity: 1;
}
#subdeptBanners #subdept_slide0 {
  transform: scale(0.7) rotate(15deg);
  transform-origin: 28% -14%;
}
@media (min-width: 576px) and (max-width: 767.98px) {
  #subdeptBanners #subdept_slide0 {
    transform: scale(2.0) rotate(15deg);
    transform-origin: -4% 48%;
  }
}
@media (min-width: 768px) {
  #subdeptBanners #subdept_slide0 {
    transform: scale(1.2) rotate(15deg);
    transform-origin: -4% 48%;
  }
}
#department_banners_over #slide0 {
  transform: scale(1.1) rotate(-5deg);
  transform-origin: 53% 62%;
}
@media (max-width: 990.98px) {/*
  #department_banners_over #slide0 {
    transform: scale(1.4) rotate(-5deg);
    display: flex !important;
    transform-origin: 44% 72%;
  */}
}
@media (max-width: 575.98px) {
  #department_banners_over #slide0 {
    transform: scale(1.0) rotate(15deg);
    display: flex !important;
    transform-origin: 32% 0%;
  }
}
#slide1 {
  transform: scale(1) rotate(-15deg);
  display: flex !important
}
#slide2 {
  transform: rotate(5deg);
  display: flex !important
}
#slide3 {
  transform: rotate(-5deg) skewY(0deg);
  transform-style: preserve-3d;
  transform-origin: -185% 453%;
  display: flex !important
}
#slide4 {
  transform: scale(0.7) rotate(-15deg) skewY(0deg);
  transform-style: preserve-3d;
  transform-origin: -35% 104%;
  display: flex !important
}
#slide5 {
  transform: scale(0.5) rotate(21deg);
  transform-style: preserve-3d;
  transform-origin: 101% 19%;
  display: flex !important
}
#slide6 {
  transform: rotate(-5deg) scale(0.5) skewY(0deg);
  transform-style: preserve-3d;
  transform-origin: -185% 100%;
  display: flex !important
}
#slide7 {
  transform: rotate(-5deg) skewY(0deg);
  transform-style: preserve-3d;
  transform-origin: 0% 0%;
  display: flex !important
}
#slide8 {
  transform: scale(0.7) rotate(17deg) skewY(0deg);
  transform-style: preserve-3d;
  transform-origin: 0% 0%;
  display: flex !important
}
#slide9 {
  transform: scale(0.7) rotate(13deg) skewY(0deg);
  transform-style: preserve-3d;
  transform-origin: 109% 5%;
  display: flex !important
}
.ribbon {
  opacity: 0;
}
.menuBG .ribbon {
  opacity: 100;
}
.product_count {
  width: 9%;
  margin-top: 0%;
}

.products-list .slide0 {
  opacity: 0;
}






@media (max-width: 496.98px) {

	
  #departmentBanners #deptName {
    font-size: 1.5rem;
  }
#subdeptBanners .bannerText2 {
    font-size: 1rem !important;
  }	
 
  



@media (min-width: 497px) {

	
	
  .product_count {
    width: 15%;
    margin-top: -22%;
	left: 70%;  
    transform: scale(0.7)
  }
  #departmentBanners #deptName {
    font-size: 2.5rem;
  }
#subdeptBanners .bannerText2 {
    font-size: 2rem !important;
  }	
 
  




@media (min-width: 576px) and (max-width: 767.98px) {
	#departmentBanners #deptName {
    font-size: 2.5rem;
  }
	
	
  .product_count {
    width: 15%;
    margin-top: -22%;
	left: 85%;  
    transform: scale(0.7);
	 
  }	
  .product_count .header-text {
    transform: scale(0.9);
    transform-origin: bottom;
  }
	
}