.page-section{
	
	margin:3rem auto;
	
	h1,h2,h3,h4,h5{text-transform:uppercase;}
	h1{color:$primary-color;}
	
	.button{
		text-transform:uppercase;
		font-family:$header-font-family;
		font-weight:bold;
		font-size:1rem;
		line-height:1.5rem;
	}
	.button__orange{
		background-color:#ec6706;
	}
	
	.text-white{color:$white;}
}


.page-section__splash{
	
	position:relative;
	margin-top:0;
	margin-bottom:1.125rem;
	
	.foreground{
		position:absolute;top:0;right:0;bottom:0;left:0;
		
		@include breakpoint(small only){
		//	overflow:hidden;
		}
		
		.grid-container,
		.grid-x{height:100%;position:relative;}
		
		.cell{
			position:relative;
			z-index:10;			
		}
		.cell__lead-text{
			overflow:hidden;
			@include breakpoint(small only){
				text-align:center;
			}
			
			*{color:$white;}
			h2{
				font-size:3rem;line-height:3.5rem;
				margin:0;
				@include breakpoint(medium down){
					font-size:1.5rem;line-height:2.5rem;
				}
			}
			
			h3{font-weight:300;}
			
			
		}
		
		.lead-text-gradient{
			content:"";
			width:1000px;
			height:100%;
			position:absolute;
			margin-left:-25%;
			background: rgb(0,0,0);
			background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
			z-index:1;
			@include absolute-center();
			
			@include breakpoint(small only){
				margin-left:0;
				width:400px;
				height:400px;
			}
			
		}
		
		.cell__search-room{
			
			position:absolute;bottom:-3.5rem;right:0;
			background:$white;
			padding:1.5rem 2rem 2rem 2rem;
			border:solid 1px $light-gray;
			h3{text-align:center;}
			
			@include breakpoint(medium down){
				bottom:-3rem;
				left:1rem;
				right:1rem;
				width:auto;
				padding:1.5rem 2.25rem 2.25rem 2.25rem;
				//border:none;
				.cell{padding:0 0.75rem;}
				
			}
		}
		
		
	}
	
	.splash-background{
		height:0;
		padding-bottom:38%;
		position:relative;
		overflow:hidden;
		> div{background-color:$black;}
		
		@include breakpoint(medium down){
			height:60vh;
			padding-bottom:0;
		}
	}
	.background-wrapper{
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		z-index: -1;
		
		img,
		video{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			min-width: 50%;
			min-height: 50%;
			transition: all 0.5s;
		}
	}
	
}


.page-section__breadcrumbs{
	
	margin:0;

	nav{border-bottom:solid 1px $light-gray;}

	@include breakpoint(medium down){
		margin-top:4.5rem;
		nav{border:none;}
		
		&+ .page-section{
			margin-top:1.5rem;
		}
		
	}
	
}


.page-section__newsletter{
	margin:0;
	padding:3rem 0;
	text-align:center;
	background:rgba($black,0.05);
	
	//.button{margin-top:1rem;}
	p:last-child{margin:0;}
	
	@include breakpoint(small only){
		br {display: none;}
	}
	
}

.page-section__related{
	
	position:relative;
	&::before{content:"";position:absolute;top:0;left:0;right:0;height:3rem;background:$white;}
	&::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3rem;background:$white;}
	margin-top:0;
	//margin:3rem auto 0 auto;
	background-color:$black;
	//padding:3rem 0;
	//
	//.header-releated{margin-bottom:3rem;}
	
}

.page-section__form{
	
	position:relative;
	padding:3rem 0;
	margin-bottom:0;
	background:rgba($black,0.05);
	
	.form label{}
	.callout{background:$white;border:none;}
	.button__ol{background:none;color:$black;border:solid 1px $primary-color;font-weight:normal;height:auto;padding-top:0.375rem;padding-bottom:0.375rem;}
}


.page-section__faq{
	h2{color:$primary-color;}
}

.page-section__navigation-spacer{
	height:3rem;
}


/*.scroller{
	
	display: grid;
	grid-gap: $global-margin*2;
	grid-template-columns: 350px repeat(8, 350px) 0;
	grid-template-rows: minmax(150px, 1fr);
	overflow-x: scroll;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	
	&::before, &::after {
	  content: '';
	  display: flex;
	  width:200px;
	}
	
	.scroller-item{
		scroll-snap-align: center;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		z-index:10;
		> div{width:100%;}
	}
}
*/

.scroller-outer{
	display: grid;
	grid-template-columns: 
       [full-start] 1fr
       [content-start]
       min(75rem - 2rem, 100% - 3rem * 2)
       [content-end]
       1fr [full-end];
   z-index:10;
   position:relative;
   

}

.scroller{
	grid-column: full;
	display: grid;
	grid-template-columns: inherit;
	overflow-x: scroll;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.scroller-wrapper{
	grid-column: content;
	display: flex;
	align-items: center;
	gap: 3rem;
	&::after{
		content: "";
		align-self: stretch;
		padding-end: max( 3rem, (100vw - 75rem) / 2 - 3rem );
		padding-inline-end: max( 3rem, (100vw - 75rem) / 2 - 3rem );
	}
}

.scroller-item{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	scroll-snap-align: center;
	inline-size: 100%;
	max-inline-size: 22rem;
	position:relative;
	
}


.page-section__news{
	
}
.new-item-image{
	
	height:0;
	padding-bottom:100%;
	overflow:hidden;
	background-color:$light-gray;
	position:relative;
	z-index:0;
	margin-bottom:2rem;
	@include animate();
	
	/*	
	&::before{
		content:"";
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		border-bottom: solid 1px darken($primary-color,10%);
		z-index:-1;
	}
	&::after{
		content:"";
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		border-right: solid 1px darken($primary-color,10%);
		z-index:-1;
	}
	*/
	
	.image-wrapper{
		position:absolute;
		width:100%;
		height:100%;
		background-repeat:no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		z-index:20;
	}
	
	.image-text{
		
		text-align:center;
		text-transform:uppercase;
		height:100%;
		line-height:100%;
		position:absolute;
		top:0;left:0;right:0;bottom:0;
		background-color:rgba($black,0.75);
		color:$white;
		font-size:1.5rem;
		@include animate();
		
		.news-text{@include absolute-center();width:100%;display:block;padding:1.5rem;}
		.news-item-date{display:block;font-size:1rem;}
		
		&::after{
			content: "";
			  position: absolute;
			  top: 1.5rem;
			  right:1.5rem;
			  left: 1.5rem;
			  bottom: 1.5rem;
			  border: solid 1px rgba($white,0.5);
			  z-index: 10;	
		}
		&:hover{
			background-color:rgba($primary-color,1);
			
		}	

	}
		
}