.md-size .sidebar-modules,
.lg-size .sidebar-modules {
  max-width: 300px;
}

.module {
  margin: 50px 0;
}

.module:first-of-type {
  margin-top: 0;
}

.module:last-child {
  margin-bottom: 0;
}

.share-article {
  margin-bottom: 20px;
  padding-bottom: 20px;
  h4 {
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
  }
  .share-item {
    margin:10px 0;
  }
  .share-item  i {
    font-size: 1.2em;
    color: var(--color-agMain);
    margin-right: 5px;
    margin-bottom: 5px;
  }
}

.cta-subscribe {
  padding: 2.5em 2em;
  border-radius: 8px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), linear-gradient(91deg, #FFF 0%, rgba(213, 178, 255, 0.10) 0%, rgba(164, 224, 198, 0.10) 99.81%);
  box-shadow: 0px 0px 10px 1px rgba(85, 90, 98, 0.12);
  h4 {
    color: var(--color-gMain);
    margin-bottom: var(--spacing-xs);
    font-weight: 700;
  }
  .button-container {
    margin-top: 2.5em;
  }
}

.listing-nav {
  display: block;

  ul {
    margin: 15px 0;
    li {
      color: var(--color-g200);
      font-weight: 500;
      line-height: 1;
      display: block;
      padding:5px 0;
      margin:10px 0;
    }
    li a {
      padding:5px 0;
      text-decoration: none;
    }
    a:hover,
    .active {
      font-weight: 600;
      color: var(--color-sg800);
      &::after {
        color: var(--color-sg800);
      }
    }
    .icon-after.popout::after {
      content: "\f061";
      font-size: 0.8em;
      font-weight: 900;
      margin-left: 5px;
    }
    .icon-after.popout:hover::after {
      margin-left: 10px;
    }
  }
}

.listing-filter {
  select {
    margin:10px 0;
  }
}

.share-this,
.html-formatting .share-this {
  i {
    margin:0 5px;
    color: var(--color-agMain);
  }
}

.info-box {
  padding:4rem 40px;
  border-radius: 0.5rem;

  h5 {
    margin-bottom: 0.5em;
  }
}

.contact-card {
  padding: 40px 24px;
  box-shadow: 0px 0px 12px 1px rgba(85, 90, 98, 0.12);
  background-color: #fff;
  h5 {
    margin-bottom: 0.5em;
  }
  .circle-image, dl, dt {
    margin-bottom: 0.5em;
  }
}

.info-square {
  &.align-right {
    width: auto;
    float: right;
    margin-left: 1em;
    max-width: 270px;
    
  }
  &.align-left {
    width: auto;
    float: left;
    margin-left: 1%;
    max-width: 270px;
  }
  .bar:first-child {
    background: var(--colored-bar-horizontal);
    width: 100%;
    height: 15px;
    border-radius: 10px;
    position: relative;
    top: 11px;
    z-index: 5;
  }
  .content {
    height: 100%;
    padding: 3.35em 2.25em;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 53.66%, rgba(152, 128, 181, 0.07) 77.25%, rgba(128, 240, 192, 0.07) 100.55%);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(85, 90, 98, 0.10);
    border-radius: 8px;
    position: relative;
    z-index: 10;
    color: var(--color-gMain) !important;
    .html-formatting {
      font-weight: 500;
      margin:20px 0;
      color: var(--color-gMain) !important;
    }
    >a:not(.button) {
      color: var(--color-sg800) !important;
      &:hover,
      &:hover::after {
        color: var(--color-agMain) !important;
      }
    }
  }
  h1,h2,h3,h4,h5,.header-1,.header-2,.header-3,.header-4 {
    color: var(--color-dp200) !important;
    margin: 10px 0;
    font-weight: 700;
  }
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  .header-1:first-child,
  .header-2:first-child,
  .header-3:first-child,
  .header-4:first-child {
    margin-top: 0;
  }

  &.inner-container {
    .divider, h3, .html-formatting {
      padding: 0 20px;
    }
  }

  &.no-divider {
    .divider {
      border-bottom: none;
      margin:0 !important;
      padding: 0;
      position: relative;
      .icon {
        top: 30px;
      }
    }
  }

  &.no-padding {
    .content {
      padding:0;
    }
  }

  &.no-bar {
    .bar {
      display: none;
    }
  }

  &.no-arrow {
    .divider > .icon {
      display: none !important;
    }
  }
}

/* Phone Breakpoint (phone & tablet) */
@media (min-width: 0px) AND (max-width: 992px) {
  .sidebar-module {
    margin-top: 40px;
  }

  .share-article > div {
    max-width: 400px;
  }
  .cta-subscribe {
    padding: 2em;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 30.04%, rgba(152, 128, 181, 0.10) 80.58%, rgba(128, 240, 192, 0.10) 100.55%);
  }

  .contact-card {
    max-width: 360px;
    padding-left: 40px;
    padding-right: 40px;
    text-align: left !important;
    .contact {
      padding-bottom: 5px;
    }
    .link-button {
      width: 100%;
      text-align: center;
    }
  }

  .info-box {
    padding: 40px;
  }

  .resources-sidebar {
    width: 100%;
    max-width: 300px;
    padding:30px;
    background-color: #fff;
    height: 100%;
    z-index: 15000;
    position: fixed;
    top: 0;
    left: -100%;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px 0px 14px 1px rgba(85, 90, 98, 0.12);
    overflow-y: auto;
    &.active {
      left: 0;
    }
    .module {
      margin:30px 0;
    }
  }

  .info-square {
    .content {
      padding: 2.5em 1.5em;
    }
  }

  .listing-nav{
    & ul {
      li {
        font-size: 1.15rem;
      }
    }
  }
}

/* Phone Breakpoint (phone ONLY) */
@media (min-width: 0px) AND (max-width: 767px) {
  .contact-card {
    max-width: 100%;
  }
  .resources-sidebar {
    max-width: calc(100% - 50px);
    height: 80vh;
    margin-top: 15vh;
    border-radius: 10px;
    box-shadow: 0px 0px 14px 1px rgba(85, 90, 98, 0.12);
    &.active {
      left: 50%;
      transform: translateX(-50%);
    }
  }
}