body { --color-text: #fff; --color-bg: #252525; --color-link: #fff; --color-link-hover: #fff; --color-bg-item1: #1a1a1a; --color-bg-item2: #2c35b7; --color-bg-item3: #0f1013;
--color-bg-item4: #1d2027; --color-bg-item5: #0f1013; --color-item-alt: #494d54; --color-quote: #5b677a; --color-info: #57535a; --color-title: #e23434; --color-tagline: #e2e2e2;
min-height: 100vh; color: #57585c; }

a { text-decoration: none; color: var(--color-link); outline: none; transition: color 0.2s; }
a:hover, a:focus { color: var(--color-link-hover); }
button:focus, a:focus { outline: none; }

.action { background: none; border: 0; color: #fff; cursor: pointer; padding: 0; }
.action--menu { z-index: 1000; }
.menu--open .action--menu { pointer-events: none; }
.menu-close-header { width: 100%; position: absolute; top: 0; right: 0; z-index: 1000; text-align: right; padding: 20px 0; }
.action--close { width: 45px; height: 45px; opacity: 0; padding: 12px; display: inline-flex; }
.icon--menu { width: 2rem; }
.icon--close { width: 24px; fill: #fff; }

.menu { color: var(--color-text); text-align: center; width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 200; display: grid; grid-template-columns: 100%; pointer-events: none; }
.menu--open { pointer-events: auto; }

.menu__item { width: 100%; position: relative; overflow: hidden; }
.menu__item-inner { overflow: hidden; transform: translate3d(101%, 0, 0); height: 100%; width: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--color-bg-item1); }

.menu { width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; grid-template-columns: 100%; grid-template-rows: 100%; grid-template-areas: "item1"; }
.menu__item { height: 100%; }
.menu__item--1 { grid-area: item1; }


.mainmenu { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0 100px; overflow: auto; }
.mainmenu { counter-reset: menuitem; }
.mainmenu__item { position: relative; overflow: hidden; transition: color 0.1s; padding: 5px 30px; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; width: 100%; opacity: 0; }
.mainmenu__item > li > a { width: 100%; font-size: 5vw; }
.mainmenu__item .arrow { width: 50px; height: 50px; padding: 8px; cursor: pointer; transition: all 0.5s; }
.mainmenu__item .arrow.active { transform: rotateX(180deg); }
.mainmenu__item .arrow img { width: 100%; height: 100%; object-fit: contain; }
.mainmenu__item > a { font-size: 5vw; text-transform: capitalize; transition: color 0.3s; font-family: 'Avenir Next LT Pro'; font-weight: 500; line-height: 1.4; position: relative; }
.mainmenu__item > a:hover { opacity: 0.8; }

.submenu { width: 100%; padding: 5px 20px; display: none; }
.submenu li { display: flex; width: 100%; }
.submenu li > a { font-size: 4vw; padding: 5px 0; position: relative; width: 100%; text-transform: capitalize; }
.submenu li > a:hover { opacity: 0.8; }

@media screen and (max-width: 767px) {
.mainmenu__item > a { font-size: 9vw; }
.submenu li > a { font-size: 7vw; }
}