/*  ******************************** Tag Select */
.container-grid {
  display: grid; 
  grid-template-columns: 1fr 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;
	}
}


	
/* 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;
		}
	}




/* Grid links */
.sector-grid {
    max-width: 3000px;
    margin: auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 500px;
    gap: 10px 10px;
    grid-template-areas: ". . . .";
    margin-top: 10px
}

.sector-grid-items {
    background-color: #000;
    position: relative;
    text-align: center
}

.sector-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    transition: transform .5s;
    transform: scale(1);
    overflow: hidden;
    color: #fff
}

.bg-image {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    background-position: center;
    overflow: hidden;
    transition: all .5s
}

.bg-image::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: .2;
    transition: all .5s
}

.sector-box:hover .bg-image,.sector-box:focus .bg-image {
    transform: scale(1.2)
}

.sector-box:hover .bg-image::after,.sector-box:focus .bg-image::after {
    opacity: .6
}

.bg-text {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 1rem;
    letter-spacing: .4rem;
    text-align: center
}

.bg-text span {
    background-color: #fff;
    padding: 1rem 1.5rem;
	border-radius: 0.2rem;
}

.fancy-hidden {
    display: none
}

@media(max-width: 992px) {
    .sector-grid {
        grid-template-areas:". .";
        grid-auto-rows: 300px;
        gap: 5px 5px
    }

    .bg-text {
        font-size: 0.75rem;
        letter-spacing: .2rem
    }

	.slicker-hero-slide .hero-title-sub1 A {
        font-size: 0.9rem;
	}
	.slicker-hero-slide .hero-title-sub2 {
        font-size: 0.9rem;
	}
	.btn-section-hero-next {
		font-size: 1rem !important;
	}
}
@media(max-width: 600px) {
	.slicker-hero-slide .hero-title1 {
		display: block !important;
	}
}


/* Paralax */
.promo-container {
    min-height: 800px;
    max-width: 3000px;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0 0;
    margin: auto
}

.promo-container.left {
    grid-template-areas: "promo-text promo-img"
}

.promo-container.right {
    grid-template-areas: "promo-img promo-text"
}

.promo-text {
    grid-area: promo-text;
    overflow: hidden
}

.promo-img {
    grid-area: promo-img;
    overflow: hidden
}

.promo-text {
    background-color: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px
}

.promo-container.left .promo-text-container {
    text-align: right
}

.promo-text-container {
}

.promo-text-container h2 {
    font-size: 3.5rem;
    font-weight: 200
}

.promo-text-container p {
    margin-top: 25px;
    font-size: 1.5rem
}

.promo-text-container .btn {
    margin-top: 20px
}

.promo-img {
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover
}

.promo-img.not-fixed {
    background-attachment: scroll
}

@media(max-width: 1024px) {
    .promo-text {
        padding:75px
    }

    .promo-text-container h2 {
        font-size: 2rem;
        font-weight: 200
    }

    .promo-text-container p {
        margin-top: 25px;
        font-size: 1rem
    }

    .promo-container {
        grid-template-columns: 1fr
    }

    .promo-container.left {
        grid-template-areas: "promo-img" "promo-text"
    }

    .promo-container.right {
        grid-template-areas: "promo-img" "promo-text"
    }

    .promo-img {
        background-attachment: scroll
    }
}

@media(max-width: 600px) {
    .promo-container {
        display:block;
        height: auto
    }

    .promo-container .promo-img {
        height: 400px
    }
}

.promo-grid-4x-wrapper {
    padding: 10px
}

.promo-grid-4x-container {
    margin: auto;
    max-width: 3000px;
    height: 50vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 10px 10px;
    grid-auto-flow: row;
    grid-template-areas: "promo-grid-4x-1 promo-grid-4x-2" "promo-grid-4x-3 promo-grid-4x-4"
}

.promo-grid-4x-1 {
    grid-area: promo-grid-4x-1
}

.promo-grid-4x-2 {
    grid-area: promo-grid-4x-2
}

.promo-grid-4x-3 {
    grid-area: promo-grid-4x-3
}

.promo-grid-4x-4 {
    grid-area: promo-grid-4x-4
}

.promo-grid-4x-item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

.promo-grid-4x-item a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100%;
    transition: background-size .5s
}

.promo-grid-4x-item a:hover,.promo-grid-4x-item a:focus {
    background-size: 105%
}

@media(max-width: 760px) {
    .promo-grid-4x-container {
        grid-template-columns:1fr;
        grid-template-areas: "promo-grid-4x-1" "promo-grid-4x-2" "promo-grid-4x-3" " promo-grid-4x-4";
        height: 200vw
    }
}

@media(min-width: 3000px) {
    .promo-grid-4x-container {
        height:1500px
    }
}


/* d9 slider */

	.btn-section-hero-next {
		position: absolute;
		bottom: 0px;
		left: 50%;

		background-color: transparent;
		border: 0px;
		width: 100px;
		height: 100px;
		margin-left: -50px;
		font-size: 20px;
		transition: transform 0.5s;
		transform: translateY(-20%);
	}
		.btn-section-hero-next:hover,.btn-section-hero-next:focus,.btn-section-hero-next:active {
			transform: translateY(0);
		}







#scene-slick {
	margin-top: -160px;
}
.slicker-hero {
	max-width: 3000px;
	height: 100vh; /* For 100% screen height */
	background-color: #FFF;
	overflow: hidden;
	margin: auto;
}

	.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;
		}
		.slicker-hero-slide IMG {

			width: 100%;
			height: 100%;
			object-fit: cover;
			overflow: hidden;
			transition: transform 1s ease-in-out;
			transform: scale(1.1);
		}
		.slicker-hero .slick-active .slicker-hero-slide IMG {
			transform: scale(1);
		}
		.slicker-hero .slick-active  .slicker-hero-slide IMG.slick-loading {
			transform: scale(1.1);
		}
		
		
		.slicker-hero-slide .hero-main {
				color: #FFF;
				
				/* display: flex;
				align-items: center;
				justify-content: center;
				*/
				
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
			}
				.slicker-hero-slide .hero-title {
					position: absolute;
					top: 50%;
					left: 200px;
					letter-spacing: 5px;
					font-size: 4rem;
					/* text-shadow:  0px 0px 5px #000; */
					text-align: left;
					background-color: rgba(0,0,0,0.9);
					padding: 20px 50px 20px 50px;
					text-shadow: 0px 0px 5px #000000;
				}
					.slicker-hero-slide .hero-sub {
						font-size: 1rem;
					}
					.slicker-hero-slide .btn {

					}
		.slicker-hero .slick-active  .slicker-hero-slide .hero-main-text {

			transform: translateX(0%);
			opacity: 1;
		}
		.slicker-hero .slicker-hero-slide .hero-main-text {
			-webkit-transition: opacity 1s cubic-bezier(0.42, 0, 0.13, 0.94);
			-moz-transition: opacity 1s cubic-bezier(0.42, 0, 0.13, 0.94);
			-ms-transition: opacity 1s cubic-bezier(0.42, 0, 0.13, 0.94);
			-o-transition: opacity 1s cubic-bezier(0.42, 0, 0.13, 0.94);
			transition: all 1s cubic-bezier(0.42, 0, 0.13, 0.94);

				transform: translateX(-5%);
				transition-delay: 0s;
				opacity: 0;
		}			
					
					
					
					
				.slicker-hero .slick-arrow-left {
					position: absolute;
					left: 40px;
					width: 50px;
					height: 100px;
					color: #FFF;
					top: 50%;
					margin-top: -50px;
					background-color: transparent;
					color: #FFF;
					border: 0px;
					z-index: 1;
					font-size: 1rem;
				}
				.slicker-hero .slick-arrow-left .fas {
					transform: translateX(0%);
					transition: transform 0.3s ease-in-out;
				}
				.slicker-hero .slick-arrow-left:hover .fas {
					transform: translateX(-50%);	
				}
				.slicker-hero .slick-arrow-right {
					position: absolute;
					right: 40px;
					top: 50%;
					width: 50px;
					height: 100px;
					margin-top: -50px;
					background-color: transparent;
					color: #FFF;
					border: 0px;
					font-size: 1rem;
				}
				.slicker-hero .slick-autoplay-toggle-button {
					bottom: 0px;
					color: #FFF;
					z-index: 1;
				}
				.slicker-hero .slick-arrow-right .fas {
					transform: translateX(0%);
					transition: transform 0.3s ease-in-out;
				}
				.slicker-hero .slick-arrow-right:hover .fas {
					transform: translateX(50%);	
				}



			.btn-section-hero-next {
				color: #FFF;
			}
			
			.hero-main1 {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
			}

			.hero-main-text {
				/*
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  */
  position: absolute;
  bottom: 100px;
  width: 100%;

			}
			
			.container1 {
				width: 100%;
				max-width: 1300px;
				margin: auto;
				background-color: #AAA;
			}


			.slicker-hero-slide A {
				color: #111;
			}
			.slicker-hero-slide .hero-title1 {
				color: #111;
				display: inline-block;
				background-color: rgb(255 255 255 / 85%);
				backdrop-filter: blur(1rem) saturate(90%);
				
				padding: 20px 3.2rem 20px 3.2rem;

				/* margin-bottom: 1rem; */
				min-width: 320px;

				
				border-radius: 0.2rem;
			}
			.slicker-hero-slide .hero-title-sub1 {
				font-size: 1.05rem;
				letter-spacing: 3px;
				line-height: 1rem;
				color: #111;
			}
			.slicker-hero-slide .hero-title-sub2 {
				font-size: 0.9rem;
				letter-spacing: 3px;
				/* margin-top: 0.3rem; */
			}
			.hero-main-text .btn-primary {
				min-width: 320px;
				font-size: 0.8rem;
			}
			.slick-slider.slick-dotted {
				margin-bottom: 0px !important;
			}
			
			
			
/* SELECTOR COLLECTION */		
	
.container-collection {
    z-index: 1 !important;
    position: relative;
}
	#collection-jump {
		border: 3px solid;
		font-family: 'Inter', sans-serif;
		font-weight: bold;
		display: inline-block;
		margin-top: 1rem;
		box-shadow: 0 0rem 0.3rem rgba(0, 0, 0, 0.5);
		background-color: rgba(255, 255, 255, 0.85);

		backdrop-filter: blur(10px) saturate(90%);
	}

.slicker-hero-slide .hero-title-sub1 A {
	font-weight: bold;
}

.hero-main-text .container-fluid {
		margin: 0px;
		padding: 0px;
}
.collection-jump-box {
	display: inline-block;
}
/* slideshow hero adjustments mobile */
@media (min-width: 1200px) and (max-width: 1920px) {
	.hero-main-text .container-fluid {
		padding-left: calc(var(--bs-gutter-x)* 6);
	}
}
@media (min-width: 992px) and (max-width: 1260px) {
	.slicker-hero-slide .hero-title-sub1 {
		font-size: 1rem !important;
	}
	.slicker-hero-slide .hero-title1 {
		margin-left: 1rem;
	}
}
@media (min-width: 601px) and (max-width: 1420px) {
	.slicker-hero-slide .hero-title-sub1, .slicker-hero-slide .hero-title-sub2 {
		font-size: 0.8rem !important;
		letter-spacing: 2.5px;
	}
	.slicker-hero-slide .hero-title-sub1 {
		font-weight: 500;
	}
	.slicker-hero-slide .hero-title1 {
		padding: 1.5rem 1.7rem 1.5rem 1.7rem;
	}
}
@media (min-width: 601px) and (max-width: 1024px) {
	.slicker-hero-slide .hero-title1 {
		display: table;
		margin: auto;
		text-align: center;
	}
	.btn-section-hero-next {
		font-size: 0.6rem !important;
		width: 60px;
		height: 60px;
		margin-left: -30px;
	}
}
@media (max-width: 600px) {
	.slicker-hero-slide .hero-title-sub1, .slicker-hero-slide .hero-title-sub1 A, .slicker-hero-slide .hero-title-sub2 {
		font-size: 0.75rem !important;
		letter-spacing: 0.15rem;
		text-align: center;
	}
	.slicker-hero-slide .hero-title-sub1 A {
		font-weight: bold;
	}
	.btn-section-hero-next {
		font-size: 0.6rem !important;
		width: 60px;
		height: 60px;
		margin-left: -30px;
	}
	.collection-jump-box {
		display: block;
	}
	.slicker-hero .slick-arrow-right {
		right: 1rem;
	}
	.slicker-hero .slick-arrow-left {
		left: 1rem;
	}
}


.btn-section-hero-next {
	font-size: 0.8rem !important;
}