/* 
=============
| Variables |
=============
*/

:root {
  
  /* Colors */
  --color-blue: #0F2D46;
  --color-blue-light: #0076CF;
  --color-gray: #4D5766;
  --color-gray-light: #516979;
  --color-gray-lighter: #687278;
  --color-gray-lightest: #C0C9CF;
  --color-beige: #DEDBD5;
  --color-beige-light: #F7F5F4;
  --color-beige-dark: #DFDBD5;
  --color-pink: #C2B0B0;
  --color-white: #FFFFFF;
  --color-red: #E5D9D9;
  --color-red-dark: #AA001F;
  
  /* Fonts */
  --font-ppformula: "PPFormula", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
  /* Widths */
  --width-large: 153.6rem;
}


/* 
=========
| Fonts |
=========
*/

@font-face {
  font-family: "PPFormula";
  src: url('../fonts/PPFormula-Light.woff') format('woff'),
  url('../fonts/PPFormula-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "PPFormula";
  src: url('../fonts/PPFormula-Regular.woff') format('woff'),
  url('../fonts/PPFormula-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PPFormula";
  src: url('../fonts/PPFormula-Medium.woff') format('woff'),
  url('../fonts/PPFormula-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "PPFormula";
  src: url('../fonts/PPFormula-Extrabold.woff') format('woff'),
  url('../fonts/PPFormula-Extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}


/* 
===========
| Globals |
===========
*/

*,
*:before,
*:after {
  box-sizing: border-box;
}

::selection {
  background-color: rgba(0, 0, 0, 0.2);
}

* {
  margin: 0;
}

html {
  font-size: 62.5%;
  height: 100%;
  font-family: "PPFormula";
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  display: block;
  font-size: 1.6rem;
  min-height: 100%;
  background-color: var(--color-white);
  color: var(--color-blue);
}

.site-content {
  max-width: 192rem;
  margin: 0 auto;
}

.content-wrapper {
  width: 100%;
  max-width: 172rem;
  margin: 0 auto;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 940px) {
  .content-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .content-grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

[js-cloak] {
  display: none !important;
}

a:not([href]) {
  cursor: not-allowed;
}

button {
  background: none;
  border: 0;
  box-sizing: content-box;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  overflow: visible;
  vertical-align: inherit;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.hidden {
  display: none !important;
}

.sr-only,
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
  /* High contrast colors for accessibility tools */
  color: #ffffff !important;
  background-color: #000000 !important;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

/* 
===========
| Buttons |
===========
*/

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid var(--color-blue);
  padding: 2rem 3.6rem 1.8rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: 0.2rem;
  transition: background 200ms, color 200ms;
}

.button-outline {
  background-color: transparent;
  color: var(--color-blue);
  transition: background 200ms, color 200ms;
}

.button-secondary {
  line-height: 1;
  padding: 1.6rem 2.4rem 1.4rem;
  background: transparent;
  border-radius: 20rem;
  color: inherit;
  transition: background 200ms, color 200ms;
  
}

.button-secondary.button-light {
  color: var(--color-white);
  border-color: var(--color-white);
  background: transparent;
}

.button-small {
  font-size: 1.2rem; 
  padding: 0 1.5rem;
  min-width: 8rem;
  min-height: 3rem;
  transition: background 200ms, color 200ms;
}

.button-large {
  font-size: 1.2rem; 
  padding: 0 4rem;
  min-width: 15rem;
  min-height: 6rem;
  transition: background 200ms, color 200ms;
}

.button-link {
  background-color: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0.1rem solid var(--color-blue);
  color: var(--color-blue);
  padding-left: 0;
  padding-right: 0;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  min-width: 0;
  min-height: 0;
}

.button-light {
  background-color: var(--color-white);
  color: var(--color-blue);
  border-color: var(--color-white);
}


.button-link.button-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

@media (hover: hover) {
  .button:hover {
    background-color: transparent;
    color: var(--color-blue);
  }
  .button-secondary:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
  }
  .button-secondary.button-light:hover {
    color: var(--color-blue);
    background: var(--color-white);
  }
  .button.button-link:hover {
    background-color: transparent;
    opacity: 0.8;
  }
  .button.button-light:hover {
    background-color: rgba(255,255,255,0.8);
  }
  .button.button-light.button-link:hover {
    background-color: transparent;
    opacity: 0.8;
  }
  .button-outline:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
  }
}

/* 
============
| Headings |
============
*/

.heading-1, h1 {
  font-weight: 300;
  font-style: normal;
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  margin-bottom: 3.2rem;
}

.heading-2, h2 {
  font-weight: 300;
  font-style: normal;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  margin-bottom: 3.2rem;
}

.heading-3, h3 {
  font-weight: 300;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-bottom: 2.4rem;
}

.heading-4, h4 {
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 2.4rem;
}

.heading-5, h5 {
  font-weight: 500;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
}

.heading-6, h6 {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
}

.lead-paragraph,
.lead-paragraph p,
.lead {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin-bottom: 3.2rem;
  color: var(--color-gray);
}

p {
  font-size: 1.6rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.caption {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.caption-small {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media screen and (min-width: 1200px) {
  .heading-1, h1 {
    font-size: 4rem;
  }
  .heading-2, h2 {
    font-size: 3.6rem;
  }
  .heading-3, h3 {
    font-size: 2.8rem;
  }
  .heading-4, h4 {
    font-size: 2rem;
  }
  .heading-5, h5 {
    font-size: 1.8rem;
  }
  .heading-6, h6 {
    font-size: 1.6rem;
  }
  .lead-paragraph,
  .lead-paragraph p,
  .lead {
    font-size: 2rem;
    margin-bottom: 4rem;
  }
}


@media screen and (min-width: 1321px) {
  .heading-1, h1 {
    font-size: 4.8rem;
  }
  .heading-2, h2 {
    font-size: 4.0rem;
  }
  .heading-3, h3 {
    font-size: 3.2rem;
  }
  .heading-4, h4 {
    font-size: 2.2rem;
  }
  .lead-paragraph,
  .lead-paragraph p,
  .lead {
    font-size: 2.4rem;
    margin-bottom: 4.8rem;
  }
}

/* 
====================
| Loader animation |
====================
*/

.loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.loader__spinner {
  width: 2.2rem;
  height: 2.2rem;
  border: 0.2rem solid rgba(75, 75, 75, 0.1);
  border-bottom-color: rgba(75, 75, 75, 1);
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 


/* Colors */
.bg-blue {
  background: var(--color-blue);
  color: var(--color-white);
}

.bg-blue *:not(.button) {
  color: white;
  border-color: var(--color-gray-light) !important;
}

.bg-blue .button {
  border-color: var(--color-white);
}

@media (hover: hover) {
  .bg-blue .button:hover {
    color: var(--color-blue);
    background: #79E4D5;
    border-color: #79E4D5;
  }
}

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

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

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

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

.video-js {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

iframe {
  border: none;
}

.MuiChip-label {
  padding-top: 0.4rem;
}

.MuiListItemText-root {
  padding: 1.6rem 0;
}

.MuiGrid-container {
  padding: 0 !important;
}

.css-iuoowo > .MuiGrid-item {
  padding: 1.6rem !important;
}

.MuiGrid-root.css-1wxaqej {
  margin-bottom: 0.6rem;
}

.MuiGrid-root.css-l3cm48 {
  margin-top: 1.2rem;
}

.MuiDialogContent-root h2 strong {
  font-weight: 300;
}

.MuiDialogContent-root p {
  margin-bottom: 2.4rem;
}

.MuiDialogContent-root a:not(.button) {
  color: var(--color-gray);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray);
}

.MuiDialogContent-root a:not(.button):hover {
  color: var(--color-blue-light);
  border-color: var(--color-blue-light);
}