.line {
	padding-bottom: .35rem;
	transform-origin: 0 50%;
	white-space: nowrap;
	will-change: transform
}

.oh {
	overflow: hidden !important;
}

.oh__inner {
	display: inline-block;
	transform-origin: 0 50%;
	will-change: transform
}

.frame {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	height: 100%
}

.frame--fixed {
	display: grid;
	grid-template-columns: 38% 62%;
	height: auto;
	left: 0;
	padding: 1rem;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1
}

.frame__title {
	font-size: 1rem;
	font-weight: 400;
	margin: 0 0 2rem
}

.frame__links {
	align-items: flex-start;
	display: flex;
	flex-direction: column
}

.frame__links a {
	margin: 0 1rem .35rem 0
}

.frame--fixed .frame__links {
	flex-direction: row
}

.grid {
	--grid-border-radius: 8px;
	display: grid;
	grid-template-columns: repeat(2, 50%)
}

.grid--large {
	--grid-padding: 0.5vw;
	grid-auto-rows: 345px;
	padding: 20px;
    margin: 0px -10px;
	row-gap: 20px;
}

.grid--mini {
	--grid-padding: 1px;
	height: 115px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	visibility: hidden;
	width: 324px
}

.grid__cell {
	align-items: end;
	display: grid;
	padding: 0px 10px;
}
.grid--mini .grid__cell {
	padding:0px 3px
}
.grid--mini .grid__cell:not(.grid__cell--current):hover .grid__cell-img {
	opacity: .7
}

.grid__cell--current .grid__cell-img {
	opacity: .3
}

.grid__cell--padded {
	padding: calc(var(--grid-padding)*2)
}

.grid__cell-img {
	border-radius: var(--grid-border-radius);
	display: block;
	/*margin: 8px;*/
	overflow: hidden;
	position: relative;
	width: 100%
}
.grid--large .grid__cell-img {
	height: 345px;
}

.grid--mini .grid__cell-img {
	height: 50px;
}

.grid__cell-img-inner {
	background-position: 50% 50%;
	background-size: cover;
	cursor: pointer;
	height: 100%;
	width: 100%
}

.content {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	row-gap: 30px;
	left: 0;
	padding: 22vh 8vw 22vh;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
}

.content__item {
	display: grid;
	opacity: 0;
	position: absolute
}

.content__item--current {
	opacity: 1;
	pointer-events: auto;
	position: relative
}

.content__item-number {
	display: block;
	font-weight: 600
}

.content__item-heading {
	font-size: 4vw;
	font-weight: 600;
	line-height: 1;
	margin: 1rem 0 3rem
}

.content__item-text {
	padding-bottom: 40px;
	max-width: 450px;
	position: relative;
}
.content__item-text:after{
	position: absolute;
	bottom:0px;
	left:0px;
	width:0%;
	background-color: #965E32;
	content:'';
	height:1px;
}
.oh .content__item-text:after{
	width:100%;
	transition: all 0.5s;
	transition-delay :1s;
}
.content__item-link {
	cursor: pointer
}

.slide-nav {
	align-content: space-between;
	display: grid;
	height: 100%;
	pointer-events: none;
	position: fixed;
	right: 15%;
	top: 0;
	width: 40%
}



.back {
	stroke: #000;
	background: none;
	border: 0;
	cursor: pointer;
	/*margin: auto 0 1.5rem;*/
	opacity: 0;
	padding: 0;
	pointer-events: none;
	width: 50px;
	z-index: 1000
}

.back svg {
	stroke-linecap: round
}

.back:focus,
.back:hover {
	stroke: #823725;
	outline: none
}

.content--open .back {
	pointer-events: auto
}
.grid-content h5{
	color: #FFF;
	font-size: 15px;
	line-height:193.333% ;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.oh .grid-content{
	opacity: 0;
	transition: all 0.5s;
}
.grid-content{
	opacity: 1;
	transition: all 0.5s;
	transition-delay : 0.5s;
}
@media screen and (min-width:53em) {
	.content {
		width: 38%
	}

	.grid {
		grid-template-columns: repeat(3, 33.33%)
	}

	.grid__cell--padded {
		padding: var(--grid-padding)
	}

	.grid--large .grid__cell:nth-child(1) {
		grid-column: 1;
		grid-row: 1
	}

	.grid--large .grid__cell:nth-child(2) {
		grid-column: 2;
		grid-row: 1
	}
	.grid--large .grid__cell:nth-child(3) {
		grid-column: 3;
		grid-row: 1
	}

	.grid--large .grid__cell:nth-child(4) {
		grid-column: span 2;
		grid-row: 2;
		align-items: center;
	}
	.grid--large .grid__cell:nth-child(5) {
		grid-column: 3;
		grid-row: 2
	}

	.grid--large .grid__cell:nth-child(6) {
		grid-column: 1;
		grid-row: 3
	}

	.grid--large .grid__cell:nth-child(7) {
		grid-column: 2;
		grid-row: 3
	}

	.grid--large .grid__cell:nth-child(8) {
		grid-column: 3;
		grid-row: 3
	}

	.grid--mini {
		position: relative;
		visibility: visible;
		grid-template-columns: repeat(4, 25%);
	}

	.grid--mini  .grid__cell:nth-child(1) {
		grid-column: 1;
		grid-row: 1
	}

	.grid--mini  .grid__cell:nth-child(2) {
		grid-column: 2;
		grid-row: 1
	}
	.grid--mini .grid__cell:nth-child(3) {
		grid-column: 3;
		grid-row: 1
	}
	.grid--mini .grid__cell:nth-child(4) {
		grid-column: 4;
		grid-row: 1
	}

	.grid--mini .grid__cell:nth-child(5) {
		grid-column: 1;
		grid-row: 2
	}

	.grid--mini  .grid__cell:nth-child(6) {
		grid-column: 2;
		grid-row: 2
	}

	.grid--mini  .grid__cell:nth-child(7) {
		grid-column: 3;
		grid-row: 2
	}
	.content--open .grid--mini,
	body #cdawrap {
		pointer-events: auto
	}

	body #cdawrap {
		--cda-left: auto;
		--cda-right: auto;
		--cda-width: 300px;
		--cda-bottom: auto;
		--cda-top: auto;
		margin-top: auto;
		opacity: 1 !important;
		position: relative;
		z-index: 1
	}

	body #cdawrap .cda-footer {
		display: none
	}

	body #cdawrap .cda-text {
		color: transparent !important;
		height: 1.25rem;
		pointer-events: none;
		position: relative;
		text-align: left
	}

	body #cdawrap .cda-text:before {
		color: var(--color-text);
		content: "Sponsored by " attr(data-sponsor);
		font-size: .85rem;
		font-weight: 500;
		left: 0;
		opacity: .5;
		pointer-events: auto;
		position: absolute;
		top: 0;
		transition: opacity .4s
	}

	.grid[style*="pointer-events: none;"] .frame #cdawrap .cda-text:before {
		opacity: 0 !important
	}

	body #cdawrap:hover .cda-text:before {
		color: var(--color-link-hover)
	}

	body #cdawrap a:after {
		display: none
	}
}
@media(max-width:991px){
	.grid--large .grid__cell:nth-child(1) {
		grid-column: 1;
		grid-row: 1
	}

	.grid--large .grid__cell:nth-child(2) {
		grid-column: 2;
		grid-row: 1
	}
	.grid--large .grid__cell:nth-child(3) {
		grid-column: 3;
		grid-row: 1
	}

	.grid--large .grid__cell:nth-child(4) {
		grid-column: span 2;
		grid-row: 2;
		align-items: center;
	}
	.grid--large .grid__cell:nth-child(5) {
		grid-column: 3;
		grid-row: 2
	}

	.grid--large .grid__cell:nth-child(6) {
		grid-column: 1;
		grid-row: 3
	}

	.grid--large .grid__cell:nth-child(7) {
		grid-column: 2;
		grid-row: 3
	}

	.grid--large .grid__cell:nth-child(8) {
		grid-column: 3;
		grid-row: 3
	}
}