/* -- HERO IMAGES -- */

#Product1HeroImage {
	background-image: url('../images/retouched/MHRM_grange_0101.jpg');
	background-position: center bottom;
}

#Product2HeroImage {
	background-image: url('../images/Banner\ Stripe/MHRM_Smith_BannerStripe_466970-002_install.jpg');
	background-position: left 20%;
}

#Product3HeroImage {
	background-image: url('../images/retouched/MHRM_june leathers_0028.jpg');
	background-position: 50% 50%;
}

#Product4HeroImage {
	background-image: url('../images/Time\ Horizons\ by\ Brian\ Alfred/Install_ColorCorrected_3.jpg');
}

#Product5HeroImage {
	background-image: url('../images/empty.png');
}

#Product6HeroImage {
	background-image: url('../images/empty.png');
}


#FinalHero {
	background-image: url('../images/210909_Maharam_TorriLana_12698.jpg');
	background-position: 0% 50%;
}

canvas{
	display: block;
	z-index: 100;
	}

@media screen and (min-width: 1024px) {

	#Product1HeroImage {
		background-image: url('../images/retouched/MHRM_grange_0101.jpg');
	}
	

    #Product2HeroImage {
		background-image: url('../images/Banner\ Stripe/MHRM_Smith_BannerStripe_466970-002_install.jpg');
		background-position: 50% 50%;
    }


    #Product4HeroImage {
    	background-image: url('../images/Time\ Horizons\ by\ Brian\ Alfred/Install_ColorCorrected_3.jpg');
	background-position: 50% 70%;
	}

	#Product5HeroImage {
		background-image: url('../images/empty.png');
	}

	#Product6HeroImage {
		background-image: url('../images/empty.png');
	}

    #FinalHero {
		background-image: url('../images/210909_Maharam_TorriLana_12698.jpg');
		background-position: 50% 0%;
    }
	
}


/* -- SLIDE IMAGES -- */

#Product1SlideImage1 {
	background-image: url('../images/retouched/MHRM_grange_0110.jpg');
	background-position: 50% 50%;
}

#Product1SlideImage2 {
	background-image: url('../images/Grange/MHRM_grange_0094.png');
	background-position: 20% 60%;
}




#Product2SlideImage1 {
	background-image: url('../images/Banner\ Stripe/Banner Stripe by Paul Smith 002.jpg');
	
}

#Product2SlideImage2 {
	background-image: url('../images/Banner\ Stripe/PS-Banner-Stripe-Shirt.jpg');}

#Product2SlideImage3 {
		background-image: url('../images/Banner\ Stripe/MHRM_Smith_BannerStripe_466970-006_tile.jpg');}
	

#Product3SlideImage1 {
	background-image: url('../images/retouched/MHRM_june\ leathers_0033.jpg');
}

#Product3SlideImage2 {
	background-image: url('../images/retouched/MHRM_browse_0164.jpg');
}

#Product3SlideImage3 {
	background-image: url('../images/retouched/MHRM_pique_0401.jpg');
}

#Product3SlideImage4 {
	background-image: url('../images/retouched/MHRM_signet_0141.jpg');
}


#Product4SlideImage1 {
	background-image: url('../images/Time\ Horizons\ by\ Brian\ Alfred/Alfred_TimeHorizons_CMYK_specsheet_1.png');
	
}

#Product4SlideImage2 {
background-image: url('../images/Time\ Horizons\ by\ Brian\ Alfred/Alfred_TimeHorizons_240x120_FPO.jpg');
}

/* 
#Product4SlideImage3 {
	background-image: url('../images/Time\ Horizons\ by\ Brian\ Alfred/Alfred_TimeHorizons_240x120_FPO.jpg');
} */


#Product5SlideImage1 {
	background-image: url('../images/empty.png');
	background-position: center center;
}

#Product5SlideImage2 {
	background-image: url('../images/empty.png');
	background-position: center center;
}

#Product6SlideImage1 {
	background-image: url('../images/empty.png');
	background-position: center center;
}

#Product6SlideImage2 {
	background-image: url('../images/empty.png');
	background-position: center center;
}







/* -- DO NOT CHANGE CODE BELOW THIS POINT -- */


/* -- PRELOADER -- */
#Preloader {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100vW;
	height: 100vH;
	background-color: #999;
	background-image: url('../images/preloader-transparent-white.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 5rem;
}

/* -- HTML -- */

html {
	scroll-behavior: smooth;
}

body {
	background: rgb(255,255,255);
	font-family: "MaharamNeue-Regular", sans-serif;
}

strong {
	font-family: "MaharamNeue-Medium", sans-serif;
}

.highlight {
	color: #0b0b0b !important;
}

p {
	font-size: 1rem;
	line-height: 1.45;
	text-align: left;
	margin-bottom: 1.45rem;
	
}

em{
	font-family: "MaharamNeue-Regular-Italic", sans-serif !important;
}

p.white {
	color: #FFFFFF;
}

p a {
	font-family: "MaharamNeue-Regular", sans-serif;
	text-decoration: none;
	color: #000000 !important;
	border-bottom: 1px solid #000000;
}

p a.product-link {
	font-family: "MaharamNeue-Regular", sans-serif;
	text-decoration: none;
	color: #000000 !important;
	border-bottom: 1px solid #000000;
}

span.no-break {
	white-space: nowrap;
}


/* -- STRUCTURE -- */

.screen {
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	background-color: rgb(255,255,255);
}

.screen-width {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-align: center;
}

.site-width {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding-right: 2rem;
	padding-left: 2rem;
	font-size: 0;
	margin: 0 auto;
}

.left-side {
	position: sticky;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vH;
	background-color: #FFFFFF;
}

.right-side {
	position: absolute;
	z-index: 9;
	top: 0;
	right: 2rem;
	width: calc(100% - 4rem);
	height: 100%;
}

.bumper-slides-container {
	position: absolute;
	top: 1rem;
	left: 0;
	width: 100%;
	height: 100%;
}

.bumper-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	opacity: 0;
	transition: all 1s ease;
}

.bumper-slide.active {
	opacity: 1;
	transition: all 1s ease;
}

.bumper-slide-image {
	width: 100%;
	height: 100%;
	font-size: 0;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
	
.bumper-texts {
	display: block;
	padding-top: 50vH;
}
	
.bumper-text-container {
	position: relative;
	display: block;
	height: 100vH;
}

.bumper-text-wrapper {
	position: sticky;
	top: 50%;
	display: block;
	width: 100%;
}

.bumper-text-wrapper p {
	padding-top: 2rem;
	padding-bottom: 1.45rem;
	margin-bottom: 0;
}

.p100 {
	height: 100%;
}

.h100 {
	height: 100vh;
}

.h200 {
	height: 200vh;
}

.h300 {
	height: 300vh;
}

.h400 {
	height: 400vh;
}

.h500 {
	height: 500vh;
}

.h600 {
	height: 600vh;
}

.triggers {
	position: absolute;
	top: 0;
	right: 0;
	width: 1rem;
	height: 100%;
}

.trigger {
	position: static;
	display: block;
	left: 0;
	width: 1rem;
}

#FinalHero-Extra{
	display: inline-flex;
	justify-content: space-between;
	gap: 4%;
	width: 80%;
	margin-top: 6vh;
	padding-bottom: 10vh;
}

#finalHeroCaption{
	margin-top: 15px;
	margin-left: 20px;
	z-index: 100;
	position: relative;
	color: #999;
	font-size: 12px;
}

.sidebyside{
	/* display: flex; */
	width: 100%;
}

.sidebyside #first{
	background-image: url('./images/M_SJS_20.jpg');
}

.sidebyside #second{
	background-image: url('./images/M_SJS_20.jpg');
}

@media screen and (min-width: 768px) {  /* -- 768px -- */
		
	.site-width {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	
	.left-side {
		height: 66vH;
	}

	.right-side {
		position: absolute;
		top: 0;
		right: 2rem;
		width: 50%;
		height: 100%;
	}
	
	.bumper-slides-container {
		position: absolute;
		top: 1rem;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.bumper-text-container {
		position: relative;
		display: block;
		height: 100vH;
	}
	
	.bumper-text-wrapper {
		position: sticky;
		top: 66%;
		display: block;
		width: 100%;
	}
	
	.bumper-text-wrapper p {
		padding-top: 2rem;
		padding-bottom: 1.45rem;
		margin-bottom: 0;
	}




}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */
	
	p a {
		border-bottom: 1px solid #000000;
	}

	p a.product-link {
		border-bottom: 1px solid #000000;
	}
	
	.site-width {
		padding-right: 2.75rem;
		padding-left: 2.75rem;
	}
	
	.left-side {	
		position: sticky;
		top: 0;
		left: 0;
		width: calc(((100% - 11rem) / 12) * 8 + 7rem);
		height: 100vH;
		padding-right: 0;
	}

	.right-side {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(((100% - 11rem) / 12) * 4 + 3rem);
		height: 100%;
		vertical-align: top;
	}
	
	.bumper-slides-container {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 3 /2;
	}
	
	.bumper-texts {
		display: block;
		padding-top: 50vH;
		padding-right: 2.75rem;
	}
	
	.bumper-text-container {
		position: relative;
		display: block;
		height: 100vH;
	}
	
	.bumper-text-wrapper {
		position: sticky;
		top: 50%;
		display: block;
		width: 100%;
	}
	
	.bumper-text-wrapper p {
		padding-top: 0;
		padding-bottom: 1.45rem;
		margin-bottom: 0;
		font-size: 1rem;
	}
	
	.bumper-text-wrapper p a {
		transition: all 0.25s ease;
	}

	.bumper-text-wrapper p a:hover {
		color: #0b0b0b !important;
		border-bottom: 1.625px solid #0b0b0b;
	}

	
}


@media screen and (min-width: 1300px) {  /* -- 1300px -- */
	
	.site-width {
		padding-right: 3rem;
		padding-left: 3rem;
	}
	
	.bumper-text-wrapper p {
		font-size: 1rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */
	
	.site-width {
		width: 100rem;
		padding-right: 3rem;
		padding-left: 3rem;
	}
	
	.bumper-text-wrapper p {
		font-size: 1.125rem;
	}
	
}

@media screen and (min-width: 2080px) {
	
	.site-width {
		width: 130rem;
	}
	
}

/* -- HEADER -- */

header {
	position: absolute;
	z-index: 10000;
	width: 100vw;
	height: 4rem;
}

.header-width {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100rem;
	height: 100%;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	font-size: 0;
	margin: 0 auto;
}

.logo-wrapper {
	position: absolute;
	top: 65%;
	left: 8vw !important;
	z-index: 11000;
	display: inline-block;
	width: 120px !important;
	transform: translateY(-50%);
}

.logo{
width: 10rem;
}

.logo-wrapper a.logo {
	display: inline-block;
	width: 100%;
}

.logo-wrapper a.logo .logo-style {
	fill: #ffffff;
}

@media screen and (min-width: 600px) {
	.logo-wrapper {
		position: absolute;
		top: 65%;
		left: 8vw !important;
		z-index: 11000;
		display: inline-block;
		width: 7rem !important;
		transform: translateY(-50%);
	}
	
	.logo{
	width: 7rem;
	}
}

/* @media screen and (min-width: 768px) { 

	header {
		height: 5rem;
	}
	
	.header-width {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	
	.logo-wrapper {
		left: 0rem;
		width: 7rem;
	}
	
} */

@media screen and (min-width: 1070px) {  /* -- 1024px -- */

	header {
		height: 5rem;
	}
	
	.header-width {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	

	.logo-wrapper a.logo .logo-style {
		transition-property: fill;
		transition-duration: 0.25s;
		transition-timing-function: linear;
		transition: all 0.25s ease;
	}
	
	.logo-wrapper a.logo:hover .logo-style {
		fill: #ffffff;
	}
	
	.logo-wrapper {
		position: absolute;
		top: 75%;
		left: 3vw !important;
		z-index: 11000;
		display: inline-block;
		width: 8rem !important;
		transform: translateY(-50%);
	}
	
	.logo{
	width: 8rem;
	}
}




@media screen and (min-width: 1300px) {  /* -- 1300px -- */

	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	header {
		height: 9rem;
	}
	
	.header-width {
		padding-right: 0rem;
		padding-left: 0rem;
		margin-left: 0;
		margin-left: 0;
	}
	

	.logo-wrapper {
		position: absolute;
		top: 45%;
		left: 3vw !important;
		z-index: 11000;
		display: inline-block;
		width: 8rem !important;
		transform: translateY(-50%);
	}

	
}

@media screen and (min-width: 2080px) {

	.header-width {
		padding-right: 0rem;
		padding-left: 0rem;
		margin-left: 0;
		margin-right: 0;
		width: 100vw !important;
	}
	
	.logo-wrapper {
		margin-left: 0vw !important;
		margin-top: 2vh;
		width: 9rem !important;
	}

	.logo{
		width: 10rem;
		margin-left: 0;
	}
	
}

/* -- OPENING -- */

.opening {
	position: relative;
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: transparent;
}

.background-video {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	margin: 0px;
}

.block-video {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	margin: 0px;
}

.video-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}


.video-wrapper iframe {
	width: 100vw;
	height: 56.25vw;
	min-height: 100vh;
	min-width: 177.77vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.video-wrapper.dark-background {
	background-color: #999;
}

/* -- INTRODUCTION -- */

.introduction {
	position: relative;
	display: block;
	width: 100vw;
	background-color: rgb(255,255,255);
}

.intro-text-container {
	position: sticky;
	top: 0px;
	width: 100%;
	height: 100vh;
}

.intro-text-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	opacity: 0;
	transition: all 1s;
}

.intro-text-wrapper.active1 {
	opacity: 1;
}

.intro-text-wrapper.active2 {
	opacity: 1;
}


p.intro-text {
	font-family: "MaharamNeue-Regular", sans-serif;
	font-size: 1rem;
	line-height: 1.625;
	text-align: left;
	margin-bottom: 0;
	padding-bottom: 0;
}

@media screen and (min-width: 768px) {  /* -- 768px -- */
		
	.intro-text-wrapper {
		width: 75%;
	}

	p.intro-text {
		font-size: 1rem;
	}
	
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */
	
	.intro-text-wrapper {
		width: 40rem;
	}

	p.intro-text {
		font-size: 1rem;
	}
	
}


@media screen and (min-width: 1300px) {  /* -- 1300px -- */
	
	.intro-text-wrapper {
		width: 40rem;
	}

	p.intro-text {
		font-size: 1rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */
	
	.intro-text-wrapper {
		width: 40rem;
	}

	p.intro-text {
		font-size: 1.25rem;
	}
	
}

@media screen and (min-width: 2080px) {
	
	
	
}











/* -- INDEX -- */

.index {
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	text-align: center;
	background-color: rgb(240,240,240);
}

.grid-container {
	position: relative;
	width: 100%;
	padding-top: 4rem;
	padding-bottom: 2rem;
	margin: 0 auto;
}

.grid-container .grid {
	display: grid;
	align-content: start;
	grid-gap: 1rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin: 0 auto;
	transition: all 0.25s ease;
}

.grid-container .grid .item {
	display: block;
	width: 100%;
	opacity: 1;
}

.grid-container .grid .item a.item-link {
	display: block;
	cursor: pointer;
	overflow: hidden;
	text-align: left;
	color: #000000 !important;
	background-color: #FFFFFF;
	transition: all 0.25s;
}

.grid-container .grid .item a.item-link .image-wrapper {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 0;
}

.grid-container .grid .item a.item-link .image-wrapper img.index-install {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
}

.grid-container .grid .item a.item-link .image-wrapper img.index-color {
	position: static;
	width: 100%;
}

.grid-container .grid .item a.item-link .description-wrapper {
	aspect-ratio: 3 / 1;
	padding: 1.125rem;
}

.grid-container .grid .item a.item-link .description-wrapper .category-markers-wrapper {
	font-size: 0;
	display: block;
	margin-bottom: 0.25rem;
	text-align: left;
}

.grid-container .grid .item a.item-link .description-wrapper .category-markers-wrapper p.eyebrow.category {
	display: inline-block;
	font-family: "MaharamNeue-Regular", sans-serif;
	font-size: 0.75rem;
	line-height: 1.1;
	color: #000000;
	margin-right: 0.375rem;
	margin-bottom: 0;
	overflow: hidden;
	transition: all 0.25s;
}


.grid-container .grid .item a.item-link .description-wrapper h6.product-title {
	font-family: "MaharamNeue-Regular", sans-serif;
	font-size: 1rem;
	line-height: 1.25;
	color: #000000 !important;
	transition: all 0.25s;
}

#intro-links{
	margin-left: 90vw;
	margin-top: 0vh;
	margin-bottom: 2vh;
	color: rgb(0, 0, 0);
	display: block;
}

#allintros{
width: 35px;
position: fixed;
top: 90%;
right: 2.8%;
z-index: 1000;
opacity: 0.7;
transition: all 0.25s ease;
scale: 1.1;
}

#browse{
	position: fixed;
	top: 91%;
	right: 6%;
	font-size: 14px;
	font-family: "MaharamNeue-Medium", sans-serif;
	transition: ease-in-out 0.3s;
	display: none;
	
}

#allintros:hover{
	scale: 1.2;
	opacity: 1;
	transition: ease-in-out 0.3s;
}

.cls-1 {
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 30px;
	z-index: 1002;
  }

  .cls-2 {
	fill: #000000;
	stroke-width: 0px;
	z-index: 1001;
  }


.intro-index-links a, a:hover, a:visited, a:active{
	text-decoration: none;
	stroke: #000000 !important;
}

.coda {
	position: relative;
	width: 100%;
	height: 3rem;
	border-top: 0.625px solid #666;
}

.coda-wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
}

.coda p {
	font-size: 0.75rem;
	color: #999;
	text-align: center;
	margin-bottom: 0;
	padding-top: 4px;
	line-height: 1;
}

@media screen and (min-width: 768px) {  /* -- 768px -- */
		
	.grid-container {
		padding-top: 5rem;
		padding-bottom: 4rem;
	}
	
	.grid-container.three .grid {
		width: 100%;
		grid-gap: 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grid-container.four .grid {
		width: 100%;
		grid-gap: 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */
	
	.grid-container {
		padding-top: 3.75rem;
		padding-bottom: 2.75rem;
		min-height: calc(100vH - 3rem);
	}
	
	.grid-container.center-children {
		padding-top: 1rem;
		padding-bottom: 1rem;
		min-height: 100vH;
	}

	.grid-container.three .grid {
		width: 87.5%;
		grid-gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grid-container.four .grid {
		width: 100%;
		grid-gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.grid-container .grid .item a.item-link .image-wrapper img.index-install {
		transition: all 0.25s;
	}

	.grid-container .grid .item a.item-link:hover .image-wrapper img.index-install {
		opacity: 1;
	}

	.grid-container .grid .item a.item-link:hover .description-wrapper .category-markers-wrapper p.eyebrow.category {
		color: #0b0b0b;
	}
	
	.grid-container .grid .item a.item-link:hover .description-wrapper h6.product-title {
		color: #0b0b0b !important;
	}
	
	.coda {
		height: 3rem;
	}
	
}

@media screen and (min-width: 1300px) {  /* -- 1300px -- */
	
	.grid-container {
		padding-top: 4rem;
		padding-bottom: 4rem;
		min-height: calc(100vH - 3rem);
	}
	
	.grid-container.three .grid {
		width: 66%;
		grid-gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.grid-container.four .grid {
		width: 87.5%;
		grid-gap: 1rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.coda p {
		font-size: 0.8125rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */
	
	.grid-container {
		padding-top: 6rem;
		padding-bottom: 6rem;
		min-height: calc(100vH - 5rem);
	}
	
	.grid-container.three .grid {
		width: 66%;
		grid-gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.grid-container.four .grid {
		width: 87.5%;
		grid-gap: 1rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.coda {
		height: 3.125rem;
	}
	
}

@media screen and (min-width: 2080px) {
	
	.grid-container {
		padding-top: 10rem;
		padding-bottom: 12rem;
		min-height: calc(100vH - 5rem);
	}
	
	.grid-container.three .grid {
		width: 50%;
		grid-gap: 2rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.grid-container.four .grid {
		width: 75%;
		grid-gap: 2rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
}












/* -- IMAGES -- */


.product-hero {
	position: relative;
	display: block;
	width: 100vw;
	height: 100%;
	background-position: center center;
	background-color: #e5e3df;
	overflow: hidden;
}

.product-hero.fixed {
	background-attachment: fixed;
}

.product-hero.tiled {
	background-repeat: repeat;
}

.product-hero.cover {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */
	
	
	
}

/* -- SIDEBAR -- */

.sidebar {
	display: none;
	position: fixed;
	z-index: 10001;
	display: none;
	right: 1.5rem;
	top: 1.5rem;
	/*transform: translateY(-50%);*/
}

.navigation-wrapper {
	position: relative;
	display: inline-block;
	padding: 0;
}

.scroll-to-list {
	position: relative;
	display: inline-block;
}

.scroll-to-list .link-wrapper {
	position: relative;
	min-width: 1rem;
	height: 1.375rem;
}

a.scroll-to-link {
	display: block;
	cursor: pointer;
    transition: all 0.5s ease;
}

a.scroll-to-link.inset {
	display: inline;
}

a.scroll-to-link .destination {
	position: absolute;
	z-index: 1;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	width: 8rem;
	height: 2rem;
	/*background-color: rgba(255,255,255,1.0);*/
    transition: all 0.25s ease;
}

a.scroll-to-link:hover .destination {
	display: inline-block;
	opacity: 1;
}

a.scroll-to-link .dot {
	position: absolute;
	z-index: 2;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}

a.scroll-to-link.active .dot {
	background-color: #0b0b0b !important;
}

a.scroll-to-link:hover .dot {
	background-color: #0b0b0b !important;
}

a.scroll-to-link .destination p {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	right: 1.25rem;
	display: block;
	font-family: "MaharamNeue-Medium", sans-serif;
	font-size: 0.875rem;
	color: #0b0b0b;
	text-indent: 0;
	text-align: right;
	white-space: nowrap;
	line-height: 1.1;
    transition: all 0.5s ease;
}

a.scroll-to-link.active .destination p {
	color: #0b0b0b;
    transition: all 0.25s ease;
}

.slideshow-holder {
	width: 100%;
	height: 100%;
}

p.colorways {
	color: rgba(0,0,0,0.25);
}

p.colorways span.selected {
	color: rgba(0,0,0,1.0);
}

@media screen and (max-width:1024px){
	#Product4HeroImage .block-video{
		display: none;
		}

	canvas{
		display: none;
	}
	
	#Product1HeroImage {
		background-position: 70% 60%;
    }

	#Product2HeroImage {
		background-position: 35% 0%;
    }

	#Product3HeroImage {
		background-position: 20% 45% !important;

    }

	#Product4HeroImage {
		display: block;
		background-image: url('../images/Time\ Horizons\ by\ Brian\ Alfred/Install_ColorCorrected_3.jpg');
		background-position: 70% 80%;

    }

	#FinalHero{
		background-position: 35% top;
	}

	#FinalHero-Extra{
		display: inline-flex;
		justify-content: space-between;
		gap: 4%;
		margin-left: -10%;
		width: 120%;
		margin-top: 5vh;
		padding-bottom: 5vh;
	}
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	#allintros{
		width: 45px;
	}
	#browse{
		right: 8%;
		top: 91.5%;
	}
	
	
}

@media screen and (min-width: 1024px) {  /* -- 1024px -- */


}

@media screen and (min-width: 1300px) {  /* -- 1300px -- */

	.sidebar {
		position: fixed;
		z-index: 10001;
		display: inline-block;
		right: 3rem;
		top: 1.75rem;
	}

	a.scroll-to-link .dot {
		width: 0.75rem;
		height: 0.75rem;
	}

	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	.sidebar {
		top: 3rem;
	}
	
	a.scroll-to-link .dot {
		width: 0.75rem;
		height: 0.75rem;
	}
	
	.index {
		min-height: 100vH;
	}

	#allintros{
		width: 30px;

	}

	#browse{
		right: 6%;
		top: 91%;
	}
	

}

@media screen and (min-width: 2080px) {

	.sidebar {
		right: 3.5rem;
	}
	
	.index {
		min-height: 100vH;
	}

}

/* -- INDEX GRID FADES -- */

@keyframes fadeIn {
	0% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 1; }
}

#IndexGrid .item {
	opacity: 1;
	animation: fadeOut .5s linear backwards;
}

#IndexGrid #IndexGridItem1 {
	animation-delay: 0s;
}

#IndexGrid #IndexGridItem2 {
	animation-delay: .25s;
}

#IndexGrid #IndexGridItem3 {
	animation-delay: .5s;
}

#IndexGrid #IndexGridItem4 {
	animation-delay: .75s;
}

#IndexGrid #IndexGridItem5 {
	animation-delay: 1s;
}

#IndexGrid #IndexGridItem6 {
	animation-delay: 1.25s;
}

#IndexGrid #IndexGridItem7 {
	animation-delay: 1.5s;
}

#IndexGrid #IndexGridItem8 {
	animation-delay: 1.75s;
}

#IndexGrid.active .item {
	animation: fadeIn .5s linear forwards;
}

#IndexGrid.active #IndexGridItem1 {
	animation-delay: 0s;
}

#IndexGrid.active #IndexGridItem2 {
	animation-delay: .25s;
}

#IndexGrid.active #IndexGridItem3 {
	animation-delay: .5s;
}

#IndexGrid.active #IndexGridItem4 {
	animation-delay: .75s;
}

#IndexGrid.active #IndexGridItem5 {
	animation-delay: 1s;
}

#IndexGrid.active #IndexGridItem6 {
	animation-delay: 1.25s;
}

#IndexGrid.active #IndexGridItem7 {
	animation-delay: 1.5s;
}

#IndexGrid.active #IndexGridItem8 {
	animation-delay: 1.75s;
}


.centerXY {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}