/* http://meyerweb.com/eric/tools/css/reset/ 
               v2.0 | 20110126
               License: none (public domain)
            */

 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
 }

 /* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
     display: block;
 }

 body {
     line-height: 1;
 }

 ol,
 ul {
     list-style: none;
 }

 blockquote,
 q {
     quotes: none;
 }

 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
     content: '';
     content: none;
 }

 table {
     border-collapse: collapse;
     border-spacing: 0;
 }

 /* Box sizing
--------------------------------------------- */

 /* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
 *,
 *::before,
 *::after {
     box-sizing: inherit;
 }

 html {
     box-sizing: border-box;
 }

 /* Scrollbars
--------------------------------------------- */
 html {
     scrollbar-width: none;
 }

 body {
     -ms-overflow-style: none;
 }

 body::-webkit-scrollbar {
     display: none;
 }



 @font-face {
     font-family: "Avenir Light";
     src: url("../webfonts/116af611cbcd9e4bada60b4e700430c1.eot");
     src: url("../webfonts/116af611cbcd9e4bada60b4e700430c1.eot?#iefix")format("embedded-opentype"),
         url("../webfonts/116af611cbcd9e4bada60b4e700430c1.woff")format("woff"),
         url("../webfonts/116af611cbcd9e4bada60b4e700430c1.woff2")format("woff2"),
         url("../webfonts/116af611cbcd9e4bada60b4e700430c1.ttf")format("truetype"),
         url("../webfonts/116af611cbcd9e4bada60b4e700430c1.svg#Avenir Light")format("svg");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }

 /* latin */
 @font-face {
     font-family: 'Charter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src:
         local('Charter'),
         local('Bitstream Charter'),
         url('../webfonts/charter_regular.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 :root {
     --blue: #010d30;
     --white: #FFFFFF;
     --offwhite: rgba(255, 255, 255, 0.75);
     --button-color: var(--white);
     --button-color-alt: var(--blue);
     --menu-color: var(--blue);
     --menu-color-alt: var(--white);
     --background-color: #010d30;
     --vh100: 100vh;
     --text-md: 1rem;
 }

 @media screen and (min-width: 576px) {
     :root {
         --text-md: 1.25rem;
     }
 }

 @supports (height:100dvh) {
     :root {
         --vh100: 100dvh;
     }
 }

 .avenir {
     font-family: "Avenir Light", sans-serif;
     font-size: 103%;
     color: var(--white);
 }

 .georgia {
     font-family: 'Charter', "Georgia", serif;

 }

 .white {
     color: var(--white);
 }

 .offwhite {
     color: var(--offwhite);
 }

 .blue {
     color: var(--blue);
 }


 .bg-white {
     background-color: var(--white);
 }

 .bg-offwhite {
     background-color: var(--offwhite);
 }

 .bg-blue {
     background-color: var(--blue);
 }

 small {
     font-size: 85%;
 }

 /* Selection
--------------------------------------------- */
 ::-moz-selection {
     /* Code for Firefox */
     color: var(--blue);
     background: var(--offwhite);
 }

 ::selection {
     color: var(--blue);
     background: var(--offwhite);
 }

 /* Typography
--------------------------------------------- */
 body {
     font-style: normal;
     font-size: 1rem;
     line-height: 1.5;
     color: var(--blue);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }

 p,
 ol,
 ul {
     margin-bottom: 1.25rem;
 }

 strong,
 b {
     font-weight: 600;
 }

 u {
     text-decoration-thickness: 0.5px;
     text-underline-offset: 4px;
 }

 .site-title {
     font-size: 8rem
 }

 /* Links
--------------------------------------------- */
 a,
 a:visited {
     color: var(--offwhite);
     text-decoration: none;
     position: relative;
     transition: 250ms ease-in-out;
 }

 a::after,
 a:visited::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -4px;
     width: 100%;
     padding-top: 0.5px;
     background-color: var(--offwhite);
     transition: 150ms ease-in-out;
 }

 a:hover,
 a:focus,
 a:active {
     outline: 0;
     color: var(--white);
 }

 a:hover::after,
 a:visited::after,
 a:active::after {
     background-color: var(--offwhite);

 }

 /* Menu
--------------------------------------------- */

 button.menu-toggle {
     position: fixed;
     width: 20px;
     padding-top: 20px;
     border: 0;
     background-color: transparent;
     line-height: 0;
     right: 1rem;
     top: 1rem;
     transition: 150ms ease-in-out;
 }

 button.menu-toggle::before,
 button.menu-toggle::after {
     transition: 100ms ease-in-out;
 }

 button.menu-toggle::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 20px;
     padding-top: 2px;
 }

 button.menu-toggle::after {
     content: '';
     position: absolute;
     top: 8px;
     right: 0px;
     width: 20px;
     height: 2px;
 }

 .site-menu:hover button.menu-toggle::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 20px;
     padding-top: 2px;
 }

 .site-menu:hover button.menu-toggle::after {
     content: '';
     position: absolute;
     top: 0px;
     right: 0px;
     width: 2px;
     height: 100%;
 }

 .site-menu {
     position: fixed;
     right: 0;
     top: 0;
     padding: 0rem 3rem 1rem 1rem;
     transition: 150ms ease-in-out;
     background-color: transparent;
     z-index: 10;
 }

 .site-menu:hover {
     background-color: var(--menu-color-alt);
 }

 .site-menu ul {
     margin-top: 3rem;
     margin-bottom: 0;
     opacity: 0;
     transition: 150ms ease-in-out;
     font-size: var(--text-md);
     position: relative;
     z-index: 3;
 }

 .site-menu:hover ul {

     opacity: 1;
 }

 .site-menu ul li {
     display: block;

     line-height: 1.5;
     position: relative;
 }

 .site-menu:hover ul li {
     pointer-events: all;
 }

 .site-menu a,
 .site-menu a:visited {
     display: block;
     cursor: pointer;

 }

 .site-menu a::after {
     display: none;
     pointer-events: none;
 }

 body[data-active="section-0"] .site-menu:hover button.menu-toggle {
     mix-blend-mode: hard-light;
 }

 body[data-active="section-0"] .site-menu:hover button.menu-toggle::before,
 body[data-active="section-0"] .site-menu:hover button.menu-toggle::after {
     background-color: var(--blue);
 }

 body[data-active="section-0"] .site-menu:hover,
 body[data-active="section-0"] button.menu-toggle::before,
 body[data-active="section-0"] button.menu-toggle::after {
     background-color: var(--white);
 }

 body[data-active="section-0"] .site-menu a {
     color: var(--blue);
 }


 body[data-active="section-1"] .site-menu:hover button.menu-toggle::before,
 body[data-active="section-1"] .site-menu:hover button.menu-toggle::after {
     background-color: var(--white);
 }

 body[data-active="section-1"] .site-menu:hover,
 body[data-active="section-1"] button.menu-toggle::before,
 body[data-active="section-1"] button.menu-toggle::after {
     background-color: var(--blue);
 }

 body[data-active="section-1"] .site-menu a {
     color: var(--white);
 }


 /* Layout
--------------------------------------------- */
 html,
 body {
     width: 100%;
     height: var(--vh100);
 }

 .site {
     display: block;
     width: 100%;
     min-height: var(--vh100);
     opacity: 0;
 }

 .site-title {
     position: relative;
     cursor: pointer;
     color: var(--offwhite);
     transition: color 250ms ease-in-out;
 }

 .pinned .site-title {
     color: var(--white);
 }

 .section {
     width: 100%;
     height: var(--vh100);
     padding: 1.5rem 1.75rem;
     position: relative;
     overflow: hidden;
     top: 0;
 }

 @media screen and (max-width:480px) {
     #main.section {
         height: auto;
     }

 }

 .section-content {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     -ms-overflow-style: none;
 }

 .section-content-webkit-scrollbar {
     display: none;
 }

 .content {
     max-width: 900px;
     margin: auto;
     font-size: var(--text-md);

 }

 .align-items-center {
     align-items: center;
 }

 .justify-content-center {
     justify-content: center;
 }




 /* Accessibility
--------------------------------------------- */

 /* Text meant only for screen readers. */
 .screen-reader-text {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute !important;
     width: 1px;
     word-wrap: normal !important;
 }

 .screen-reader-text:focus {
     background-color: #f1f1f1;
     border-radius: 3px;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     clip: auto !important;
     clip-path: none;
     color: #21759b;
     display: block;
     font-size: 0.875rem;
     font-weight: 700;
     height: auto;
     left: 5px;
     line-height: normal;
     padding: 15px 23px 14px;
     text-decoration: none;
     top: 5px;
     width: auto;
     z-index: 100000;
 }

 /* Do not show the outline on the skip link target. */
 #primary[tabindex="-1"]:focus {
     outline: 0;
 }