:root {
  --akmva-breakpoint-xs: 0;
  --akmva-breakpoint-sm: 576px;
  --akmva-breakpoint-md: 768px;
  --akmva-breakpoint-lg: 992px;
  --akmva-breakpoint-xl: 1200px;
  --akmva-breakpoint-xxl: 1400px;
  /**/
  --section-bg-1-rgb: 253,253,253;
  --section-bg-2-rgb: 224,234,239;
  --section-bg-3-rgb: 208,220,226;
  --section-bg-4-rgb: 204,204,206;
  /**/
  --ak-blue-rgb: 15, 32, 75;
  --ak-gold-rgb: 255, 182, 18
}

[data-styles=dhsem-outreach] {
  font-size: 1rem;

  a {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1.375rem;
    font-weight: 500;
    color: #004080;
  }

  h2 {
    margin-bottom: 1rem;
  }

  ul {
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
  }

  section {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .d-flex {
    display: flex;
  }

  .flex-column {
    flex-direction: column;
  }

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

  .justify-self-start {
    justify-self: start !important;
  }

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

  .align-self-start {
    align-self: start !important;
  }

  .bg-1 {
    background-color: rgb(var(--section-bg-1-rgb));
  }

  .bg-2 {
    background-color: rgb(var(--section-bg-2-rgb));
  }

  .bg-3 {
    background-color: rgb(var(--section-bg-3-rgb));
  }

  .bg-4 {
    background-color: rgb(var(--section-bg-4-rgb));
  }

  .bg-banner {
    height: 200px;
    background-image: url(/Images/Preparedness/Outreach/disaster-banner.png);
  }

  .border {
    border: 2px solid gray !important;
  }

  .invert-100 {
    filter: invert(1);
  }

  .fw-800 {
    font-weight: 800;
  }

  .m-0 {
    margin: 0 !important;
  }

  .mt-1 {
  }

  .mb-1 {
    margin-bottom: 1rem;
  }

  .pb-1 {
    padding-bottom: 1rem;
  }

  .img-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  .quick-link-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
  }

  .quick-icon-link {
    background-color: rgba(var(--ak-blue-rgb), 1);
    border-radius: 50%;
    padding: 1rem;
    margin-bottom: 0.25rem;
  }

    .quick-icon-link:hover {
      background-color: rgba(var(--ak-blue-rgb), 0.75)
    }

    .quick-icon-link:active {
      transform: scale(0.95);
    }

    .quick-icon-link:focus {
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

  .link-hover {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    text-underline-offset: -.025rem;
  }

  .outreach-card {
    height: 100%;
  }

    .outreach-card > img {
      flex-grow: 1;
      margin-bottom: 0.5rem;
      border-radius: 1rem;
    }

  .outreach-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

    .outreach-grid .outreach-card {
      justify-self: center;
    }

  .social-media-links {
    margin-left: 5rem;
  }

  .icon-link {
    display: inline-flex;
    gap: .375rem;
    align-items: center;
    text-underline-offset: 0.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

    .icon-link > .bi {
      flex-shrink: 0;
      width: 1em;
      height: 1em;
      fill: currentcolor;
      transition: .2s ease-in-out transform;
    }

  .icon-link-hover:focus-visible > .bi,
  .icon-link-hover:hover > .bi {
    transform: translate3d(0.25rem, 0, 0);
  }

  a > .social-media-link:hover {
    transform: scale(1.1);
  }

  a > .social-media-link:active {
    transform: scale(0.95);
  }

  a > .social-media-link:focus {
    transform: scale(1.1);
  }
}

/* Note: xs breakpoint applied by default*/

/*  Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) {
  [data-styles=dhsem-outreach] .quick-link {
    width: 50% !important;
  }
}
/*  Medium devices (tablets, 768px and up)*/
@media screen and (min-width: 768px) {
  [data-styles=dhsem-outreach] .outreach-grid {
    grid-template-columns: 1fr 1fr;
  }

  [data-styles=dhsem-outreach] .outreach-grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/*  Large devices (desktops, 992px and up)*/
@media screen and (min-width: 992px) {
  [data-styles=dhsem-outreach] .quick-link {
    width: 25% !important;
  }
}
/*  X-Large devices (large desktops, 1200px and up)*/
/*@media screen and (min-width: 1200px) {}*/

/*  XX-Large devices (larger desktops, 1400px and up)*/
/*@media screen and (min-width: 1400px) {}*/