:root {
	
	--font-main: 'Lexend Deca', sans-serif;
	--font-title: 'Roboto Condensed', sans-serif;
	--f-l: 98px;
	--f-m: 48px;
	--f-r: 30px;
	--f-s: 20px;
	--f-xs: 18px;
	
	--c: #003a7a;
	--c-dark: #002244;
	--c-alt: #ed2939;
	--c-light: #f5f5f2;
	
	--trans: all .6s cubic-bezier(0.65, 0, 0.35, 1);
	--trans-fast: all .2s cubic-bezier(0.25, 1, 0.5, 1);
	--trans-medium: all .4s cubic-bezier(0.25, 1, 0.5, 1);
	--trans-slow: all 1s cubic-bezier(0.65, 0, 0.35, 1);
	
	--side: 60px;
	--top: 50px;
	--head: 40px;
	--head-intro: 200px;
	--head-w-intro: 350px;
	--head-w: 140px;
	--rhc: 250px;
	--as: 912px;
	
	--vh: 100vh;
}

/* @group base */

body {
	margin: 0;
	box-sizing: border-box;
	padding: 0;
	background: var(--c-dark);
	font-family: var(--font-main);
}

a {
	color: inherit;
	text-decoration: none;
}

/* @end */

/* @group animations */

@keyframes iconscroll {
	0% {
		transform: translateY(0);
	}
	
	100% {
		transform: translateY(-20%);
	}
}

@keyframes intro-logo {
	
	0% {
		transform: translateX(0);
	}
	
	100% {
		transform: translateX(-200vw);
	}
	
}

@keyframes fade {
	0% {
		transform: translateY(0) translateX(-50%);
	}
	
	100% {
		transform: translateY(-20%) translateX(-50%);
	}
	
}

/* @end */

/* @group intro */

.intro {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-areas: "section-header";
	height: 100%;
}

html.scroll:not(.is-intro) .intro-wrapper {
	pointer-events: none;
}

.intro-wrapper {
	grid-area: section-header;
	width: 100vw;
	display: grid;
	align-items: center;
	justify-items: center;
	
	align-self: start;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	height: var(--vh);
}

.intro-background {
	width: 100vw;
	display: block;
	min-height: 100vh;
	object-fit: cover;
	grid-area: section-header;
}

.mocho {
	transform: translateX(0);
	max-width: 100vw;
	display: grid;
	grid-auto-flow: column;
	z-index: 1;
	grid-gap: 35px;
	cursor: pointer;
}

#animation_container {
	opacity: 1;
	transition: var(--trans);
	overflow: hidden;	
}

#animation_container canvas {
	width: auto!important;
	height: 100%!important;
}

/* @end */



/* @group header */

.main-header {
	position: fixed;
	top: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "logo head menu-toggle";
	width: 100vw;
	z-index: 9;
	padding: var(--top) var(--side);
	box-sizing: border-box;
	align-items: center;
	justify-items: center;
	transition: var(--trans-fast);
	height: calc(calc(var(--top)*2) + var(--head) );
	overflow: hidden;
}

.page-title {
	margin: 0;
	box-sizing: border-box;
	font-weight: normal;
	font-size: 0;
	position: relative;
	overflow: hidden;
	width: var(--head);
	transition: var(--trans);
	align-self: stretch;
	grid-area: logo;
}

.page-title:hover,
.is-header .page-title{
	width: var(--head-w);
}

.menu-active .page-title,
.is-intro.menu-active .page-title{
	width: var(--head);
	opacity: 1;
}

.page-title a {
	-webkit-mask-image: url('/images/rhc-as--logo.svg');
    mask-image: url('/images/rhc-as--logo.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	display: block;
	background: white;
	position: absolute;
	right: 0;
	transition: var(--trans);
	height: var(--head);
	width: var(--head-w);
}

.page-title-heading {
	text-align: center;
	font-size: var(--f-xs);
	text-transform: uppercase;
	color: white;
	font-family: var(--font-title);
	letter-spacing: .2rem;
	margin: 0;
	transition: var(--trans);
	padding-left: 0;
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-area: head;
	grid-template-areas: "head";
	align-self: start;
	height: var(--head);
	align-items: center;
}

.page-title:hover + .page-title-heading,
.is-header .page-title-heading{
	padding-left: 0;
	padding-right: calc(var(--head-w) - var(--head));
}

.no-scroll .page-title,
.no-scroll .page-title-heading,
.is-intro .page-title,
.is-intro .page-title-heading,
.menu-active .page-title-heading {
	opacity: 0;
	position: absolute;
}

.no-scroll .page-title,
.no-scroll .page-title-heading {
	transition: none;
}

.page-title-heading span {
	grid-area: head;
}

.page-title-heading.in-section span{
	opacity: 0;
}

.headlink {
	grid-area: head;
	z-index: 1;
}

.headlink:not(.disabled):hover {
	opacity: .6;
}

.menu-active .page-title-heading,
.headlink.disabled {
	pointer-events: none;
}

#menu-toggle {
	border-radius: 0px;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	height: var(--head);
	padding: 0;
	font-size: 0;
	cursor: pointer;
	width: var(--head);
	display: grid;
	align-self: start;
	align-items: center;
	justify-self: end;
	justify-items: center;
	justify-content: center;
	grid-area: menu-toggle;
}

#menu-toggle:focus {
	outline: none;
}

#menu-toggle span {
	display: block;
	background: white;
	-webkit-mask-image: url('/images/menu.svg');
    mask-image: url('/images/menu.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: 28px;
	-webkit-mask-size: 28px;
	height: 28px;
	width: 28px;
	text-align: center;
	justify-self: end;
}

.is-light .page-title a,
.is-light #menu-toggle span {
	background: var(--c-dark);
}

.menu-active .page-title a  {
	background: white;
}

.menu-active #menu-toggle span{
	-webkit-mask-image: url('/images/x.svg');
    mask-image: url('/images/x.svg');
	mask-size: 22px;
	-webkit-mask-size: 22px;
	padding: 0;
	margin: 0;
	transform: translateX(0);
	justify-self: center;
	color: white;
	background: white;
}

.is-light .page-title-heading {
	color: var(--c-dark);
}

/* @end */

/* @group menu */

#menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas: 
		". menu"
		"lang lang";
	box-sizing: border-box;
	padding: var(--top) var(--side);
	padding-top: var(--header);
	padding: 0;
	transition: var(--trans);
	opacity: 0;
	pointer-events: none;
	grid-column: 1 / -1;
	grid-row: 1;
	height: 0;
	overflow: hidden;
	align-self: stretch;
}

.menu-active .main-header {
	background: var(--c);
	height: var(--vh);
}

.menu-active #menu {
	opacity: 1;
	pointer-events: auto;
	height: auto;
}

.menu-sections {
	margin: 0;
	padding: 0;
	padding-left: 0;
	padding-left: 46px;
	list-style-type: none;
	grid-area: menu;
	border-left: 2px solid white;
	font-size: var(--f-m);
	transition: all .5s ease-out .4s;
	transform: translateX(10%);
	opacity: 0;
	display: grid;
	align-content: center;
	align-self: center;
}

.menu-active .menu-sections {
	transform: translateX(0);
	padding-left: 46px;
	opacity: 1;
}

.menu-sub-sections {
	margin: 0;
	padding: 0;
	list-style-type: none;
	grid-row: 1;
	grid-column: 2;
	align-self: center;
	transition: var(--trans);
	display: grid;
	grid-gap: 0;
	overflow: hidden;
	font-size: 22px;
	opacity: 0;
}

.menu-active .menu-section:not(.menu-section-active) .menu-sub-sections{
	height: 0;
}

.menu-active .menu-section-active .menu-sub-sections {
	opacity: 1;
	padding: .8em 0;
	height: auto;
}

.menu-section-link,
.menu-sub-link {
	text-decoration: none;
	color: white;
	transition: opacity .6 ease-in-out;
}

.menu-section-link:hover,
.menu-sub-link:hover,
.language-active {
	opacity: .6;
}

.menu-section {
	line-height: 1.4;
}

.languages {
	grid-area: lang;
	align-self: end;
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	justify-content: center;
}

.language {
	font-size: var(--f-xs);
	font-family: var(--font-title);
	font-weight: 100;
	padding: 0 14px;
	text-decoration: none;
	color: white;
	letter-spacing: .2rem;
	justify-self: end;
	text-align: center;
	border: 1px solid rgba(0,0,0,0);
}

.language:last-child {
	justify-self: start;
	border-left: 1px solid white;
}

/* @end */



/* @group sections */


.section {
	position: relative;
	background: var(--c-dark);
}

.section-header {
	position: relative;
	display: grid;
	justify-items: center;
	grid-template-areas: "section-header";
	min-height: 150vh;
}

#what-we-do .section-header {
	min-height: 0;
}

.section-header h1{
	font-size: var(--f-l);
	color: white;
	grid-area: section-header;
	margin: 0;
	z-index: 1;
	position: sticky;
	position: -webkit-sticky;
	bottom: 50vh;
	align-self: end;
	display: grid;
	align-content: center;
	transform: translateY(0) scaleY(0);
	transition: var(--trans);
	opacity: 0;
	overflow: hidden;
	padding: var(--top) var(--side);
	text-align: center;
}

.sticky.section-header h1 {
	opacity: 1;
	transform: translateY(50%) scaleY(1);
}

/*.current-section*/

.section-header img {
	width: 100vw;
	min-height: var(--vh);
	height: var(--vh);
	grid-area: section-header;
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

#what-we-do .section-header img {
	height: auto;
}

.next-section,
.start-intro{
	display: block;
	position: sticky;
	position: -webkit-sticky;
	height: var(--head);
	width: var(--head);
	overflow: hidden;	
	bottom:  0;
	z-index: 2;
	grid-area: section-header;
	align-self: end;
	padding: var(--top);
	opacity: 0;
	transition: var(--trans);
}

.is-light .scrolldown {
	border: 2px solid var(--c);
}

.is-light .scrolldown-p1,
.is-light .scrolldown-p2 {
	fill:  var(--c);
}

html:not(.ticking) .scrolldown-wrapper,
html:not(.ticking) .scrolldown-wrapper {
	transition: opacity 1s cubic-bezier(0.65, 0, 0.35, 1) 2s;
	opacity: .2;
}

html.is-header .scrolldown-wrapper,
html.is-intro .scrolldown-wrapper,
html.no-scroll .scrolldown-wrapper {
	transition: opacity 0s ease 0s;
	opacity: 0;
}


/* Scroll Down */

.scrolldown-wrapper {
	text-align: center;
	left: 50vw;
	justify-self: center;
	width: var(--head);
	bottom: 0;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	z-index: 6;
	position: fixed;
}
  
.scrolldown {
	border: 2px solid var(--c-light);
	border-radius: 30px;
	box-sizing: border-box;
	height: 46px;
	margin: 0 auto 8px;
	margin: 0;
	text-align: center;
	width: 30px;
}

.scrolldown-p1,
.scrolldown-p2 {
	animation-duration: 1.5s;
	animation-name: scrolldown;
	animation-iteration-count: infinite;
	fill: var(--c-light);
}
  
.scrolldown-p2 {
	animation-delay: .75s;
}

@keyframes scrolldown {
	0% {
		opacity: 0;
		transform: translate(0, -8px);
	}
	50% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 8px);
	}
}

.sub-section {
	display: grid;
	grid-template-rows: 100vh auto;
	min-height: 100vh;
	grid-auto-flow: dense;
	box-sizing: border-box;
	grid-gap: 0 var(--top);
	background: var(--c-dark);
}

.slide {
	grid-column: 1;
	min-height: 100vh;
	align-content: center;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	background: var(--c-dark);
}

.row-1 {
	grid-row: 1;
}

.row-2 {
	grid-row: 2;
}

.row-3 {
	grid-row: 3;
}

.row-4 {
	grid-row: 4;
}

.row-5 {
	grid-row: 5;
}

.slide.no-list.row-last .end {
	align-self: end;
	padding-top: var(--top);
}

.slide.with-list {
	grid-column: 1;
	display: grid;
	align-self: center;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--top) 0;
	grid-template-areas: 
		". p1"
		". list";
}

.slide.no-list {
	display: grid;
	align-self: center;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--top) 0;
}

.slide.no-list.row-last {
	background: none;
	align-items: end;
	align-content: end;
	align-self: end;
	height: auto;
	min-height: 0;
}

.slide.no-list.row-last::after {
	content: "";
	display: block;
	height: var(--top);
	grid-area: end;
}

.light .slide,
.sub-section.light {
	background: var(--c-light);
	color: var(--c);
}

.anchor {
	grid-area: a;
	height: 0;
	margin: 0;
	display: none;
}


/* @end */

/* @group list */

.list {
	transition: opacity .6s ease-in-out .6s;
	font-size: var(--f-s);
	color: white;
	padding: 0;
	list-style-type: none;
	grid-area: list;
	margin: 0;
	position: relative;
	opacity: 1;
}

.light .list {
	color: var(--c);
}

.list,
.p-1,
.p-sub,
.end {
	opacity: 0;
	transform: translateY(20%);
	
}

.sticky .list,
.sticky .p-1,
.sticky .p-sub,
.sticky .next-section,
.sticky .start-intro,
.sticky .end {
	opacity: 1;
	transform: translateY(0);
}

.list-item {
	width: 100%;
	box-sizing: border-box;
	padding: 0 calc(calc(var(--top)*3) - var(--side)) 0 .5rem;
}

.list-item .end {
	padding-top: 0;
}

#who-we-are .list-item {
	grid-area: current;
	width: 100%;
	padding: 0 calc(var(--top)*1) 4px 4px;
	box-sizing: border-box;
}

.list-item:not(.last-item)::before {
	content: "·";
	padding-right: .4em;
}

.list-item:not(.last-item)::before {
	content: "·";
	padding-right: .4em;
}


/* @end */

section h2 {
	font-family: var(--font-title);
	color: var(--c-alt);
	font-weight: 100;
	font-size:  var(--f-m);
	margin: 0;
	display: grid;
	height: auto;
	align-content: center;
	grid-row: 1;
	grid-column: 1;
	padding-left: var(--side);
	z-index: 2;
	position: fixed;
	top: 0;
	opacity: 0;
	height: 100vh;
	left: calc(var(--side)*-1);
	pointer-events: none;
}

.current-section .sticky h2 {
	opacity: 1;
	transition: var(--trans);
	left: 0;
}

.p-1,
.p-sub,
.p-norm,
.end {
	font-size:  var(--f-r);
	margin: 0;
	color: white;
	display: grid;
	align-content: center;
	align-self: center;
	padding-right: calc(var(--top)*2);
}

.p-1 {
	grid-area: p1;
	box-sizing: border-box;
	transition: var(--trans);
	opacity: 0;
	padding-top: var(--top);
}

.sub-sub-section,
.p-sub,
.end {
	grid-column: 2;
}


.p-norm {
	display: block;
	grid-column: 2;
	padding-top: calc(var(--head) * 2);
}

.end {
	font-family: var(--font-title);
	font-size: var(--f-m);
	font-weight: 100;
	padding-top: calc(var(--top) * 1);
	padding-bottom: calc(var(--top) * 1);
	padding-bottom: 0;
	
}

.with-list .end {
	padding-right: 0;
}

.no-list .end {
	padding-right: var(--top);
}


.p-w {
	top: 400px;
	padding: 0;
	padding-top: var(--top);
	margin: 0;
	font-size: var(--f-s);
}

.sub-heading {
	margin: 0;
	font-size: var(--f-r);
}

.light .end,
.light .sub-sub-section {
	background: var(--c-light);
}

#who-we-are .sub-section.light,
#who-we-are .sub-section.light header,
.light .start,
.light {
	background: var(--c-light);
	color: var(--c);
}

.sticky-light .section::before,
section.light::before,
.light p,
.light ul{
	color: var(--c);
}

.sticky-light:not(.menu-active) #menu-toggle span{
	background-color: var(--c);
}


/* @group who we are */


#who-we-are .slide.with-list {
	z-index: 3;
	width: 50vw;
	justify-self: end;
	grid-template-columns: 1fr;
	grid-template-areas: 
		"."
		"p1"
		"list";
	height: auto;
	align-self: center;
	grid-gap: var(--f-r) 0;
}

#who-we-are .sub-section img {
	object-fit: contain;
	object-position: 50% bottom;
	position: sticky;
	position: -webkit-sticky;
	padding-top: calc(calc(var(--top)*2) + var(--head) );
	top: 0;
	max-height: var(--vh);
	grid-column: 1;
	grid-row: 1;
	height: var(--vh);
	justify-self: center;
	transition: var(--trans);
	opacity: 0;
	z-index: 2;
	justify-self: start;
	align-self: end;
	max-width: 50vw;
	box-sizing: border-box;
}

#who-we-are .sub-section.sticky img {
	opacity: 1;
	transform: translateX(0);
}

.is-scrolling #who-we-are .sub-section img {
	opacity: 0;
}

#who-we-are .start {
	font-size: var(--f-s);
}

#who-we-are .sub-section header,
.is-scrolling #who-we-are .sub-section.sticky header {
	align-self: center;
	display: grid;
	align-content: center;
	grid-area: title;
	position: sticky;
	position: -webkit-sticky;
	transform: translateY(0);
	transition: var(--trans);
	z-index: 2;
	grid-area: title;
	opacity: 0;
	grid-area: p1;
	padding-right: var(--side);
}

#who-we-are .sub-section.sticky header {
	opacity: 1;
	padding-top: var(--top);	
}

#who-we-are .list{
	margin: 0;
	height: auto;
	min-height: 0px;
	align-self: center;
	transform: translateY(0);
}

#who-we-are .list {
	/*transform: translateY(30%);*/
}

#who-we-are h2 {
	position: relative;
	top: 0;
	min-height: 0;
	height: auto;
	padding-left: 0;
	left: 0;
}

#who-we-are .sub-section .list-item {
	font-size: var(--f-s);
}

#who-we-are .sub-section .list-item::before {
	content: none;
}

/* @end */

@media screen and (max-width: 1024px) {
	:root {
		--side: 30px;
		--top: 40px;
		--head: 36px;
		--head-w: 126px;
		
		--f-l: 98px;
		--f-m: 48px;
		--f-r: 26px;
		--f-s: 16px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--side: 50px;
		--top: 70px;
		--head: 36px;
		--head-w: 126px;
		--f-l: 60px;
		--f-m: 40px;
		--head-intro: 50px;
		--head-w-intro: 180px;
		--rhc: 120px;
		--as: 450px;
	}
	
	.page-title,
	.page-title:hover,
	.is-header .page-title {
		width: var(--head);
	}
	
	.main-header {
		background: var(--c-dark);
	}
	
	.is-light:not(.menu-active) .main-header {
		background: var(--c-light);
	}
	
	.is-header:not(.menu-active) .main-header,
	.is-intro:not(.menu-active) .main-header {
		background: rgba(0,0,0,0);
	}
	
	.page-title:hover + .page-title-heading,
	.is-header .page-title-heading{
		padding-right: 0;
	}

	#menu {
		grid-template-columns: 1fr;
		grid-template-areas: 
			"menu"
			"lang";
	}
	
	.menu-active .menu-sections,
	.menu-sections {
		padding-left: 0;
		border-left: none;
		text-align: center;
	}
	
	.menu-sub-sections {
		grid-gap: 1em 0;
	}
	
	.slide,
	section h2 {
		padding: 0 var(--side);
		position: relative;
		top: 0;
		height: auto;
		min-height: 0;
		align-self: start;
		grid-row: unset;
	}
	
	.sub-section {
		grid-template-rows: auto;
		padding: 0;
		padding: calc(calc(var(--top)*3) + var(--head) ) 0;
		grid-gap: var(--top);
	}
	
	#who-we-are .sub-section {
		padding-top: 0;
	}
	
	#where-we-are .sub-section {
		padding-bottom: 0;
	}
	
	.p-1,
	.p-sub,
	.p-norm,
	.end {
		padding: 0;
		transform: translateY(0);
		grid-column: 1;
	}
	
	.slide.with-list,
	.slide.no-list,
	.slide.no-list.row-last {
		grid-column: unset;
		grid-template-columns: 1fr;
		grid-gap: var(--top) 0;
		grid-template-areas: 
			"p1"
			"list";
		height: auto;
	}
	
	.slide.no-list.row-last {
		grid-template-areas: unset;
	}

	.slide.no-list.row-last::after {
		content: none;
	}
	
	.list-item .end {
		transform: translateX(0);
	}
	
	.section:not(#who-we-are) .list-item.last-item {
		padding: var(--top) 0;
	}
	
	#who-we-are .slide.with-list {
		z-index: 3;
		width: auto;
		justify-self: end;
		grid-template-columns: 1fr;
		grid-template-areas: 
			"p1"
			"list";
	}
	
	#who-we-are .list {
		transform: none;
	}

	#who-we-are h2 {
		padding: 0;
		transition: none;
	}
	
	#who-we-are .sub-section img,
	#who-we-are .sub-section header,
	#who-we-are .sub-section.sticky header {
		position: relative;
		top: 0;
		margin: 0;
		transform: none;
	}
	
	#who-we-are .sub-section img {
		height: auto;
		max-width: 100vw;
		width: 100%;		
		padding-bottom: 0;
	}
	
	.p-w {
		padding-bottom: 0;
	}
	
	section h2,
	.start {
		position: relative;
		top: 0;
		height: auto;
	}
	
	.normal {
		transform: translateY(0);
		grid-area: p1;
	}
	
	.sticky > .p-1 {
		transform: translateY(0);
		opacity: 1;
	}
	
	.p-2,
	.p-3 {
		height: auto;
		min-height: 0;
	}
	
	.no-list .end,
	.end {
		padding-right: 0;
	}
	
	.section#who-we-are .list-item,
	.section:not(#who-we-are) .list-item {
		position: relative;
		top: 0!important;
		opacity: 1;
		padding: 0;
		padding-bottom: var(--top);
		height: auto;
		min-height: 0;
		transform: none;
	}
	
	.section:not(#who-we-are) .list-item {
		width: 100%;
	}
	
	.list {
		margin: 0;
		position: relative;
		top: 0!important;
		opacity: 1;
	}
	
	.list::after {
		content: none;
	}
	
	#where-we-are .sub-section {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: 
			"a"
			"title"
			"p1"
			"end";
	}
	
	
	.top {
		height: 15px;
		width: 28px;
		transform: translateY(100%) translateX(-50%);
		left: 50vw;
		
		-webkit-mask-image: url('/images/scroll.svg');
	    mask-image: url('/images/scroll.svg');
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		mask-position: center bottom;
		-webkit-mask-position: center bottom;
		-webkit-mask-size: 28px;
		mask-size: 28px;
		background-color: white;
		display: none;
	}
	
	html.scroll .top {
		opacity: 1;
		animation: none;
		left: calc(100vw - var(--side));
		-webkit-mask-position: center top;
		mask-position: center top;
		-webkit-mask-image: url('/images/scroll.svg');
	    mask-image: url('/images/scroll.svg');
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 28px;
		mask-size: 28px;
	}
	
	.scroll.has-sticky-start .top {
		opacity:1;
		animation: iconscroll 1s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite alternate;
		left: 50vw;
		-webkit-mask-position: center bottom;
		mask-position: center bottom;
			
	}
	
	.spacer {
		display: none;
	}
	
	.anchor {
		height: calc(var(--top) + var(--top) + var(--head));
		width: 100%;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		background: var(--c-dark);
		margin: 0;
		left: 0;
		z-index: 3;
	}
	
	.light .anchor {
		background: var(--c-light);
	}
	
}

@media screen and (max-width: 500px) {
	:root {
		--side: var(--f-r);
		--top: 40px;
		--head: 36px;
		--head-w: 126px;
		
		--f-l: 52px;
		--f-m: 40px;
	}
}