:root {
  /* ////////////////////////////////////////
  //// Global Color Settings //////////
  /////////////////////////////////////// */
  --black: #010122;
  --gray: #d0d5dd;
  --white: #ffffff;
  --offWhite: #faf9eb;
  --color1: #003362;
  --color2: #007bff;
  --color3: #49c5b1;
  --color4: rgba(0, 51, 98, 0.7);
  --gradient: linear-gradient(to bottom, #04427c 0%, #002e58 100%);
  /* //////////////////////////////////////
  //// Global Spinner Settings /////////
  ////////////////////////////////////// */
  --spinner-color: var(--color2);
  --spinner-background-color: var(--color1);
  --spinner-width: 200px;
  /* ////////////////////////////////////////
  //// Global Spacing Settings //////////
  ///////////////////////////////////////
  // max-wdith, minus left-right-padding */
  --content-width: 1250px;
  --content-half-width: calc(var(--content-width) / 2);
  --text-max-width: 850px;
  --horizontal-padding: 50px;
  --vertical-padding-normal: 90px;
  --vertical-padding-more: 150px;
  --vertical-padding-less: 50px;
  --inner-spacing-xl: 70px;
  --inner-spacing-l: 50px;
  --inner-spacing-m: 35px;
  --inner-spacing-s: 15px;
  --inner-spacing-xs: 10px;
  /* ////////////////////////////////////////
  //// Global Styling Settings //////////
  ///////////////////////////////////////
  // max-wdith, minus left-right-padding */
  --border-radius-large: 0px;
  --border-radius-medium: 0px;
  --border-radius-small: 0px;
  --line-thickness: 1px;
  --highlight-color: var(--color1);
  --highlight-color-hover: var(--color1);
  --highlight-color-dark: var(--white);
  --highlight-color-dark-hover: var(--white);
  /* ////////////////////////////////////////
  //// Global Transition Settings ///////
  ///////////////////////////////////////
  // max-wdith, minus left-right-padding */
  --transition-timing: 0.6s;
  --transition-ease: ease;
  /* /////////////////////////////////////
  //// Global Font Settings //////////
  ////////////////////////////////////
  // Body */
  --body-font-family: "IBM Plex Sans", sans-serif;
  --body-font-weight: 400;
  --body-font-size: 20px;
  --body-line-height: 1.5;
  --body-font-color: var(--color1);
  /* // Headlines */
  --headline-font-family: "utopia-std", serif;
  --headline-font-weight: 400;
  /* // Subheadlines */
  --subheadline-font-family: "utopia-std-display", serif;
  --subheadline-font-weight: 400;
  /* // Heading 1 */
  --heading-1-font-size: 90px;
  --heading-1-line-height: 1;
  --heading-1-font-family: var(--headline-font-family);
  --heading-1-weight: var(--headline-font-weight);
  /* // Heading 2 */
  --heading-2-font-size: 70px;
  --heading-2-line-height: 1.05;
  --heading-2-font-family: var(--subheadline-font-family);
  --heading-2-weight: var(--subheadline-font-weight);
  /* // Heading 3 */
  --heading-3-font-size: 48px;
  --heading-3-line-height: 1.1;
  --heading-3-font-family: var(--subheadline-font-family);
  --heading-3-weight: var(--subheadline-font-weight);
  /* // Heading 4 */
  --heading-4-font-size: 32px;
  --heading-4-line-height: 1.2;
  --heading-4-font-family: var(--subheadline-font-family);
  --heading-4-weight: var(--subheadline-font-weight);
  /* // Heading 5 */
  --heading-5-font-size: 24px;
  --heading-5-line-height: 1.3;
  --heading-5-font-family: var(--subheadline-font-family);
  --heading-5-weight: var(--subheadline-font-weight);
  /* // Heading 6 */
  --heading-6-font-size: 14px;
  --heading-6-line-height: 1.3;
  --heading-6-font-family: var(--body-font-family);
  --heading-6-weight: var(--body-font-weight);
  /* /////////////////////////////
  //// Text Link Settings ////
  //////////////////////////// */
  --text-link-color: var(--color1);
  --text-link-color-dark: var(--white);
  --text-link-underline-color: rgba(0, 51, 98, 0);
  --text-link-underline-color-dark: rgba(255, 255, 255, 0);
  --text-link-underline-height: 2px;
  --text-link-underline-offset: 3px;
  /* // On Hover */
  --text-link-color-hover: var(--color1);
  --text-link-underline-color-hover: var(--color1);
  --text-link-color-dark-hover: var(--white);
  --text-link-underline-color-dark-hover: var(--white);
  --text-link-underline-height-hover: 2px;
  /* //////////////////////////
  //// List Settings //////
  ///////////////////////// */
  --list-marker-color: var(--color1);
  --list-marker-color-dark: var(--white);
  --list-item-vertical-margin: 0.5rem;
  /* ////////////////////////
  //// HR Settings //////
  /////////////////////// */
  --hr-color: var(--highlight-color);
  --hr-color-dark: var(--highlight-color-dark);
  --hr-width: 100%;
  --hr-height: 1px;
  /* ////////////////////////////////
  //// Block Quote Settings //////
  /////////////////////////////// */
  --block-quote-border-color: var(--highlight-color);
  --block-quote-border-color-dark: var(--highlight-color);
  --block-quote-font-size: 1em;
  --block-quote-vertical-sapcing: var(--inner-spacing-s);
  --block-quote-horizontal-sapcing: calc(var(--block-quote-vertical-sapcing) * 2);
  /* ////////////////////////////////
  //// Button Settings //////////
  /////////////////////////////// */
  --button-font-family: var(--body-font-family);
  --button-text-size: 12px;
  --button-text-weight: var(--body-font-weight);
  --button-vertical-padding: var(--inner-spacing-s);
  --button-horizontal-padding: var(--inner-spacing-m);
  --button-text-color: var(--color1);
  --button-background-color: rgba(0, 0, 0, 0);
  --button-border-radius: var(--border-radius-small);
  --button-border-thickness: 1px;
  --button-border-color: var(--color1);
  --button-gap-size: var(--inner-spacing-s);
  /* // Hover Settings */
  --button-text-color-hover: var(--color1);
  --button-background-color-hover: var(--offWhite);
  --button-border-color-hover: var(--offWhite);
  --button-text-color-dark: var(--offWhite);
  --button-background-color-dark: rgba(0, 0, 0, 0);
  --button-border-color-dark: var(--offWhite);
  --button-text-color-dark-hover: var(--color1);
  --button-background-color-dark-hover: var(--offWhite);
  --button-border-color-dark-hover: var(--offWhite);
  /* ////////////////////////////////
  //// Input Settings ///////////
  /////////////////////////////// */
  --input-font-family: var(--body-font-family);
  --input-font-weight: var(--body-font-weight);
  --placeholder-color: var(--black);
  --input-padding-vertical: 20px;
  --input-padding-horizontal: 0.8rem;
  --input-text-color: var(--black);
  --input-background-color: var(--white);
  --input-border-radius: 0;
  --input-border-color: var(--color1);
  --input-border-highlight: var(--highlight-color);
  --input-border-color-dark: var(--offWhite);
  --input-border-highlight-dark: var(--highlight-color-dark);
  /* ////////////////////////////////////////
  //// Global Box Shadow Settings ///////
  /////////////////////////////////////// */
  --box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  /* // Hover */
  --box-shadow-hover: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  /* ////////////////////////////////////////
  //// Global Pagination Settings ///////
  ///////////////////////////////////////
  // Section Spacing */
  --pagination-padding-vertical: var(--inner-spacing-m);
  --pagination-padding-horizontal: 0;
  /* // Border */
  --pagination-border-width: 1px;
  --pagination-border-color: var(--highlight-color);
  /* // Button Spacing */
  --pagination-button-padding-vertical: 10px;
  --pagination-button-padding-horizontal: 15px;
  --pagination-button-space-between: 8px;
  /* // Clickable Buttons */
  --pagination-clickable-text-color: var(--black);
  --pagination-clickable-background-color: var(--color1);
  --pagination-clickable-border-color: var(--highlight-color);
  /* // Clickable Buttons Hover */
  --pagination-clickable-text-color-hover: var(--black);
  --pagination-clickable-background-color-hover: white;
  --pagination-clickable-border-color-hover: var(--highlight-color);
  /* // Active Button */
  --pagination-active-text-color: var(--pagination-clickable-text-color);
  --pagination-active-background-color: white;
  --pagination-active-border-color: var(--highlight-color);
  /* // Next Prev Buttons */
  --pagination-net-prev-padding: calc(var(--pagination-button-padding-horizontal) + 5px);
  /* //////////////////////////
  //// Header Settings ////
  /////////////////////////
  // This determines the height of the logo. */
  --header-position: fixed;
  --header-height: 135px;
  --header-vertical-padding: 30px;
  --header-background-color: var(--color4);
  --header-logo-max-width: 65%;
  --header-menu-item-spacing: var(--inner-spacing-m);
  --submenu-item-spacing: var(--inner-spacing-m);
  --header-font-size: 18px;
  --header-font-family: var(--body-font-family);
  --header-font-weight: var(--body-font-weight);
  --header-text-decoration: underline;
  --header-nav-link-color: var(--offWhite);
  --header-nav-link-color-hover: var(--offWhite);
  --header-nav-link-underline-color: rgba(255, 255, 255, 0);
  --header-nav-link-underline-color-hover: var(--offWhite);
  --header-nav-link-underline-height: 2px;
  --header-nav-link-underline-height-hover: 2px;
  --header-nav-active-link-color: var(--white);
  --header-nav-active-link-underline-color: var(--white);
  /* Search */
  --header-search-background-color: var(--color1);
  --header-search-text-color: var(--white);
  --header-search-button-text-color: var(--color1);
  --header-search-button-background-color: var(--white);
  /* //////////////////////////
  //// Modal Settings ////
  /////////////////////////*/
  --modal-max-width: 640px;
  --modal-vert-padding: 60px;
  --modal-horiz-padding: 60px;
  --modal-background-color: var(--white);
  --modal-text-color: var(--black);
  --modal-headline-font-family: var(--headline-font-family);
  --modal-headline-font-size: var(--heading-3-font-size);
  --modal-headline-line-height: var(--heading-3-line-height);
  --modal-headline-font-weight: var(--heading-3-weight);
  --modal-border-radius: var(--border-radius-medium);
  --modal-close-size: calc((var(--modal-vert-padding) + var(--modal-horiz-padding)) / 4);
  --modal-close-top: calc(var(--modal-vert-padding) / 2);
  --modal-close-right: calc(var(--modal-horiz-padding) / 2);
  /* //////////////////////////
  //// Footer Settings ////
  /////////////////////////
  /// // Footer Section Spacing */
  --footer-vertical-spacing-top: 190px;
  --footer-vertical-spacing-bottom: 90px;
  /* // Take Total Number of Columns divide by 100 */
  --footer-tile-width: 40%;
  --footer-tile-padding-horizontal: var(--inner-spacing-m);
  --footer-tile-margin-bottom: 0px;
  /* // Tile Text */
  --footer-font-size: 16px;
  --footer-font-weight: 300;
  --footer-background-color: var(--color2);
  --footer-text-color: var(--white);
  --footer-text-color-hover: var(--offWhite);
  /* // Tile Title */
  --footer-tile-title-font-family: var(--headline-font-family);
  --footer-tile-title-font-size: var(--heading-5-font-size);
  --footer-tile-title-font-weight: var(--headline-font-weight);
  --footer-tile-title-margin-bottom: var(--inner-spacing-s);
  /* // Footer Links */
  --footer-text-decoration-style: underline;
  --footer-link-underline-color: rgba(0, 0, 0, 0);
  --footer-link-underline-color-hover: var(--offWhite);
  --footer-link-underline-color-dark: var(--highlight-color-dark);
  --footer-link-underline-color-dark-hover: var(--highlight-color-dark-hover);
  --footer-link-underline-height: 2px;
  --footer-link-underline-height-hover: 2px;
  /* Logo Tile */
  --footer-logo-max-width: 200px;
  /* Site Nav Tile */
  --footer-nav-links-vertical-spacing: var(--inner-spacing-s);
  /* Contact Tile */
  --footer-contact-links-vertical-spacing: var(--inner-spacing-s);
  /* Social Tile */
  --social-icon-font-size: 20px;
  --social-icon-horizontal-spacing: var(--inner-spacing-s);
  /* Copyright Footer */
  --copyright-background-color: rgba(0, 0, 0, 0);
  --copyright-text-color: var(--offWhite);
  --copyright-font-size: 1em;
  --copyright-vertical-padding: 0;
  /* //////////////////////////////
  //// WP Standard Settings ///
  ///////////////////////////// */
  --wp-post-block-padding: var(--inner-spacing-l);
  /* //////////////////////////////
  //////// Column Settings ///////
  ///////////////////////////// */
  --two-column-gap: var(--inner-spacing-l);
  --three-column-gap: var(--inner-spacing-l);
  --four-column-gap: var(--inner-spacing-m);
  --five-column-gap: var(--inner-spacing-s);
  --six-column-gap: var(--inner-spacing-s);
  --column-image-aspect-ratio: 16 / 9;
  /* //////////////////////////////
  ///////// Card Settings ////////
  ///////////////////////////// */
  --card-text: var(--body-font-color);
  --card-background: var(--white);
  --card-dark-text: var(--body-font-color);
  --card-dark-background: var(--white);
}

@media screen and (max-width: 1024px) {
  :root {
    --header-vertical-padding: 25px;
    --header-height: 90px;
    --header-menu-item-spacing: var(--inner-spacing-m);
    --heading-1-font-size: 80px;
    --heading-2-font-size: 60px;
    --footer-tile-width: 50%;
    --footer-tile-margin-bottom: 50px;
    --footer-tile-title-margin-bottom: 10px;
  }
}
@media screen and (max-width: 885px) {
  :root {
    --horizontal-padding: 35px;
    --vertical-padding-normal: 60px;
    --vertical-padding-more: 120px;
    --vertical-padding-less: 30px;
    --border-radius-large: 20px;
    --border-radius-medium: 10px;
    --body-line-height: 1.65;
    --header-font-size: 20px;
    --heading-1-font-size: 60px;
    --heading-2-font-size: 46px;
    --heading-3-font-size: 34px;
    --heading-4-font-size: 28px;
    --heading-5-font-size: 20px;
    --heading-6-font-size: 14px;
    --footer-vertical-spacing-top: 80px;
    --footer-vertical-spacing-bottom: 80px;
    --footer-tile-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --modal-close-size: 30px;
    --modal-vert-padding: 60px;
    --modal-horiz-padding: 40px;
  }
}