/**
 * References:
 * https://www.hongkiat.com/blog/css-only-accordion/
 */

/* Normalize */
.DCN * {
    box-sizing: border-box;
    font-family: "Open Sans";
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  
  /* Variables */
  .DCN {
    --color-brand: #99ccee;
  
    --color-primary-200: #e7f2fe;
    --color-primary-300: #cbe6fc;
    --color-primary-400: var(--color-brand);
  
    --color-neutral-500: #888888;
    --color-neutral-600: #555555;
    --color-neutral-800: #222222;
    --color-neutral-900: #111111;
  
    --shade-black-5: rgba(0, 0, 0, 0.05);
    --shade-black-10: rgba(0, 0, 0, 0.1);
    --shade-black-15: rgba(0, 0, 0, 0.15);
    --shade-black-70: rgba(0, 0, 0, 0.7);
    --shade-black-90: rgba(0, 0, 0, 0.9);
  
    --shade-white-100: rgba(255, 255, 255, 1);
  
    --shade-brand-10: rgba(153, 204, 238, 0.1);
  
    --space-1: 8px;
    --space-half: calc(var(--space-1) / 2);
    --space-1-half: calc(var(--space-1) + var(--space-half));
    --space-2: calc(var(--space-1) * 2);
    --space-3: calc(var(--space-1) * 3);
    --space-4: calc(var(--space-1) * 4);
    --space-5: calc(var(--space-1) * 5);
    --space-6: calc(var(--space-1) * 6);
    --space-7: calc(var(--space-1) * 7);
    --space-8: calc(var(--space-1) * 8);
  
    --size-1: 8px;
    --size-half: calc(var(--size-1) / 2);
    --size-1-half: calc(var(--size-1) + var(--size-half));
    --size-2: calc(var(--size-1) * 2);
    --size-3: calc(var(--size-1) * 3);
    --size-4: calc(var(--size-1) * 4);
    --size-5: calc(var(--size-1) * 5);
    --size-6: calc(var(--size-1) * 6);
    --size-7: calc(var(--size-1) * 7);
    --size-11: calc(var(--size-1) * 11);
  
    --header-height-mobile: 60px;
    --header-height-desktop: var(--size-11);
  
    --container-lg: 1100px;
  
    --radius-sm: var(--space-half);
  
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
  
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
  
    --line-height-lg: 1.5;
  
    --letter-spacing-lg: 0.15px;
    --letter-spacing-xl: 0.25px;
    --letter-spacing-xxl: 0.4px;
  }
  
  /**** HEADER ****/
  .DCN__header {
    background: var(--shade-white-100);
    border-bottom: 1px solid var(--shade-black-15);
    box-sizing: border-box;
    height: var(--header-height-mobile);
    left: 0;
    padding: 0 var(--space-2);
    position: fixed;
    top: 0;
    white-space: nowrap;
    width: 100%;
    z-index: 9999;
  }
  
  .DCN__header__container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-lg);
  }
  
  /* Logo */
  .DCN__header__logo {
    height: 40px;
    width: 106px;
  }
  
  /* Hamburger & Content */
  #DCN__hamburger__checkbox {
    display: none;
  }
  .DCN__hamburger {
    cursor: pointer;
    height: 40px;
    position: relative;
    width: 40px;
  }
  .DCN__hamburger:before,
  .DCN__hamburger:after {
    background-color: var(--color-neutral-900);
    border-radius: 1px;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-4px) rotate(0deg);
    transition: transform 0s ease 0s;
    width: 60%;
  }
  .DCN__hamburger:after {
    transform: translateY(4px) rotate(0deg);
  }
  #DCN__hamburger__checkbox:checked + .DCN__hamburger:before {
    transform: translateY(0px) rotate(45deg);
  }
  #DCN__hamburger__checkbox:checked + .DCN__hamburger:after {
    transform: translateY(0px) rotate(-45deg);
  }
  #DCN__hamburger__checkbox:checked ~ .DCN__header__content {
    display: block;
  }
  
  .DCN__header__content {
    background-color: var(--shade-white-100);
    display: none;
    height: calc(100% - var(--header-height-mobile));
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: var(--header-height-mobile);
    width: 100%;
  }
  
  /* Navigation */
  .DCN__header__navigation {
    position: relative;
  }
  .DCN__header__navigation__link {
    position: relative;
  }
  .DCN__header__navigation__link + .DCN__header__navigation__link {
    margin-top: 1px;
  }
  .DCN__header__navigation__link__label {
    align-items: center;
    background-color: var(--color-primary-300);
    color: var(--color-neutral-900);
    cursor: default;
    display: flex;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    height: var(--size-7);
    justify-content: space-between;
    letter-spacing: var(--letter-spacing-lg);
    line-height: var(--line-height-lg);
    padding: 0 var(--space-3);
  }
  .DCN__header__navigation__link__label__icon {
    flex: 0 0 20px;
  }
  
  /* Menu */
  .DCN__header__menu__checkbox {
    cursor: pointer;
    display: block;
    height: var(--size-7);
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .DCN__header__menu__checkbox:checked
    ~ .DCN__header__navigation__link__label
    .DCN__header__navigation__link__label__icon {
    transform: rotate(180deg);
  }
  .DCN__header__menu__checkbox:checked ~ .DCN__header__menu__wrapper {
    display: block;
  }
  .DCN__header__menu__wrapper {
    border-top: 1px solid var(--shade-white-100);
    display: none;
    position: relative;
  }
  .DCN__header__menu {
    background-color: var(--color-primary-200);
    padding: var(--space-1) 0;
  }
  .DCN__header__menu__category {
    display: none;
  }
  .DCN__header__menu__link {
    display: block;
    padding: var(--space-1-half) var(--space-3);
    white-space: normal;
  }
  .DCN__header__menu__link__label {
    color: var(--color-neutral-600);
    display: block;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-xl);
    line-height: var(--line-height-lg);
  }
  .DCN__header__menu__link__description {
    display: none;
  }
  
  /* Spacer */
  .DCN__header__spacer {
    flex: 1 1 100%;
  }
  
  /* DCN__header__ctas & Search */
  .DCN__header__ctas__container {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
    max-width: 450px;
    padding: var(--space-3);
  }
  
  .DCN__header__ctas {
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin-top: var(--space-3);
    width: 100%;
  }
  
  .DCN__header__ctas__cta {
    align-items: center;
    color: var(--shade-black-70);
    display: flex;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-xl);
    line-height: var(--line-height-lg);
    padding: 2px var(--space-1);
  }
  .DCN__header__ctas__divider {
    background-color: var(--shade-black-10);
    flex: 0 0 1px;
    height: var(--size-3);
    width: 1px;
  }
  @media (hover: hover) {
    .DCN__header__ctas__cta:hover {
      color: var(--shade-black-90);
    }
  }
  
  .DCN__header__search__field {
    align-items: center;
    background-color: var(--shade-black-5);
    border-radius: var(--radius-sm);
    display: flex;
    height: var(--size-4);
    margin-top: var(--space-1);
    padding-left: var(--space-1);
    width: 100%;
  }
  @media (hover: hover) {
    .DCN__header__search__field:hover {
      background-color: var(--shade-black-10);
    }
  }
  .DCN__header__search__field:focus-within {
    background-color: var(--shade-black-5) !important;
  }
  .DCN__header__search__field:focus-within .DCN__header__search__field__icon {
    color: var(--color-primary-400);
  }
  .DCN__header__search__field__icon {
    color: var(--shade-black-70);
    flex: 0 0 20px;
  }
  .DCN__header__search__field__input {
    background-color: transparent !important;
    border: none !important;
    border-radius: none !important;
    color: var(--color-neutral-800);
    flex: 1 1 100%;
    font-family: inherit;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-normal);
    height: 100%;
    outline: none;
    padding: 0 var(--space-half);
  }
  
  /** DESKTOP (HEADER) **/
  @media only screen and (min-width: 960px) {
    .DCN__header {
      height: var(--header-height-desktop);
    }
  
    /* Logo */
    .DCN__header__logo {
      height: 56px;
      width: 148px;
    }
  
    /* Hamburger & Content */
    #DCN__hamburger__checkbox,
    .DCN__hamburger {
      display: none;
    }
    .DCN__header__content {
      align-items: center;
      display: flex !important;
      flex: 1 1 100%;
      height: 100%;
      justify-content: space-between;
      overflow-y: visible;
      position: relative;
      top: 0;
    }
  
    /* Navigation */
    .DCN__header__navigation {
      align-items: center;
      display: flex;
      height: 100%;
      margin-left: var(--space-4);
    }
    .DCN__header__navigation__link {
      height: 100%;
      margin-top: 0px !important;
      position: static;
    }
    .DCN__header__navigation__link__label {
      align-items: center;
      background-color: transparent;
      color: var(--color-neutral-600);
      display: flex;
      font-weight: var(--font-weight-regular);
      height: 100%;
      justify-content: center;
      padding: 0 var(--space-2);
      width: 120px;
    }
    .DCN__header__navigation__link__label__icon {
      display: none;
    }
    .DCN__header__navigation__link.self-menu {
      position: relative;
    }
    @media (hover: hover) {
      .DCN__header__navigation__link:hover .DCN__header__navigation__link__label {
        background-color: var(--shade-brand-10);
        box-shadow: inset 0px -4px 0px var(--color-brand);
      }
      .DCN__header__navigation__link:hover .DCN__header__menu__wrapper {
        display: block !important;
      }
    }
  
    /* Menu */
    .DCN__header__menu__checkbox {
      display: none;
    }
    .DCN__header__menu__wrapper {
      border-top: none;
      display: none !important;
      left: 0px;
      padding-top: var(--space-half);
      position: absolute;
      top: calc(var(--header-height-desktop) - 1px);
    }
    .DCN__header__menu {
      border-radius: var(--radius-sm);
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),
        0px 2px 6px 2px rgba(0, 0, 0, 0.15);
      padding: 0;
    }
    .DCN__header__menu__overview {
      border-bottom: 1px solid var(--shade-black-15);
      padding: var(--space-1);
    }
    .DCN__header__menu__columns {
      display: flex;
      padding: var(--space-1);
    }
    .DCN__header__menu__column {
      flex: 1 1 50%;
      min-width: 350px;
    }
    .DCN__header__menu__category {
      color: var(--color-neutral-500);
      display: block;
      font-size: var(--font-size-12);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-xxl);
      line-height: var(--line-height-lg);
      padding: var(--space-2);
      padding-top: var(--space-1);
      text-transform: uppercase;
    }
    .DCN__header__menu__link {
      border-radius: var(--radius-sm);
      padding: var(--space-2);
    }
    .DCN__header__menu__link__label {
      color: var(--color-neutral-900);
    }
    .DCN__header__menu__link__description {
      color: var(--color-neutral-600);
      display: block;
      font-size: var(--font-size-14);
      font-weight: var(--font-weight-regular);
      letter-spacing: var(--letter-spacing-xl);
      line-height: var(--line-height-lg);
    }
    @media (hover: hover) {
      .DCN__header__menu__link:hover {
        background-color: var(--shade-black-5);
      }
    }
  
    /* Ctas & Search */
    .DCN__header__ctas__container {
      flex-direction: column;
      padding: 0px;
    }
    .DCN__header__ctas {
      margin-top: 0px;
    }
    .DCN__header__search__field {
      margin-top: var(--space-1);
    }
  }
  
  /**** FOOTER ****/
  .DCN__footer {
    background-color: var(--color-neutral-800);
    padding-top: var(--space-5);
  }
  
  .DCN__footer__container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-lg);
  }
  
  .DCN__footer__logo {
    display: block;
    height: 56px;
    margin-left: var(--space-2);
    width: 148px;
  }
  
  .DCN__footer__menu__checkbox {
    display: none;
  }
  .DCN__footer__menu__checkbox:checked ~ .DCN__footer__menu {
    display: block;
  }
  .DCN__footer__menu__checkbox:checked
    + .DCN__footer__menu__label
    .DCN__footer__menu__label__icon {
    transform: rotate(180deg);
  }
  
  .DCN__footer__columns {
    margin-top: var(--space-5);
    padding: 0 var(--space-2);
  }
  .DCN__footer__column + .DCN__footer__column {
    border-top: 1px solid var(--color-neutral-600);
  }
  
  .DCN__footer__menu__label {
    align-items: center;
    color: var(--shade-white-100);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-16);
    height: var(--size-6);
    letter-spacing: var(--letter-spacing-lg);
    justify-content: space-between;
  }
  .DCN__footer__menu__label__icon {
    flex: 0 0 20px;
    margin-right: var(--space-1);
  }
  .DCN__footer__menu {
    display: none;
    padding-bottom: var(--space-2);
  }
  .DCN__footer__menu__link {
    color: var(--color-neutral-500);
    display: block;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: var(--size-4);
    padding-left: var(--space-1);
  }
  @media (hover: hover) {
    .DCN__footer__menu__link:hover {
      color: var(--color-brand);
      text-decoration: underline;
    }
  }
  
  .DCN__subfooter {
    background-color: var(--color-neutral-900);
    margin-top: var(--space-5);
    padding: var(--space-6) 0px;
    text-align: center;
  }
  .DCN__subfooter__socials__social {
    color: var(--shade-white-100);
    margin: 0 var(--space-1-half);
  }
  .DCN__subfooter__copyright {
    margin-top: var(--space-4);
  }
  .DCN__subfooter__copyright,
  .DCN__subfooter__privacies__privacy {
    color: var(--color-neutral-600);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
  }
  .DCN__subfooter__privacies {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: var(--space-half);
  }
  .DCN__subfooter__privacies__divider {
    background-color: var(--color-neutral-600);
    display: block;
    flex: 0 0 1px;
    height: var(--size-1-half);
    margin: 0 var(--space-1);
    width: 1px;
  }
  @media (hover: hover) {
    .DCN__subfooter__socials__social:hover {
      color: var(--color-brand);
    }
    .DCN__subfooter__privacies__privacy:hover {
      color: var(--shade-white-100);
      text-decoration: underline;
    }
  }
  
  /** DESKTOP (FOOTER) **/
  @media only screen and (min-width: 960px) {
    .DCN__footer {
      padding-top: var(--space-8);
    }
  
    .DCN__footer__logo {
      margin: 0 auto;
    }
  
    .DCN__footer__columns {
      display: flex;
      justify-content: space-around;
      margin-top: var(--space-8);
    }
    .DCN__footer__column {
      border-top: none !important;
    }
  
    .DCN__footer__menu {
      display: block !important;
    }
    .DCN__footer__menu__label {
      cursor: default;
      font-weight: var(--font-weight-semibold);
      height: auto;
      letter-spacing: var(--letter-spacing-xxl);
      padding-bottom: var(--space-2);
      text-transform: uppercase;
    }
    .DCN__footer__menu__label__icon {
      display: none;
    }
    .DCN__footer__menu {
      padding-bottom: 0px;
    }
    .DCN__footer__menu__link {
      padding-left: 0px;
    }
  
    .DCN__subfooter {
      margin-top: var(--space-8);
    }
  }