.section-nav-widget {
  position: relative; }
  .section-nav-widget__trigger {
    display: none;
    height: 35px;
    line-height: 35px;
    border: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 80%);
    color: #fff;
    margin-top: 25px;
    padding: 0 20px;
    transition: all ease-in-out .25s;
    width: 200px; }
  .section-nav-widget__menu {
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 190px;
    /* this is insurance */
    overflow: hidden; }
    .section-nav-widget__menu > a {
      display: inline-block;
      margin: 0 8px;
      width: 165px;
      height: 100%;
      text-align: center;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 80%);
      color: #fff;
      text-transform: uppercase;
      font-size: .7rem;
      padding: 20px;
      font-weight: 700; }
      .section-nav-widget__menu > a.selected {
        color: #90bc4d; }
  @media screen and (max-width: 768px) {
    .section-nav-widget {
      padding-left: 40px;
      padding-right: 40px; } }
  .section-nav-widget--dark .section-nav-widget__trigger {
    background: linear-gradient(to bottom, #354674 0%, rgba(53, 70, 116, 0.7) 80%); }
  .section-nav-widget--dark .section-nav-widget__menu > a {
    background: linear-gradient(to bottom, #354674 0%, rgba(53, 70, 116, 0) 80%);
    color: #fff; }
    .section-nav-widget--dark .section-nav-widget__menu > a.selected {
      color: #fff; }
  @media screen and (max-width: 825px) {
    .section-nav-widget--company {
      text-align: center; }
      .section-nav-widget--company .section-nav-widget__trigger {
        display: inline-block; }
        .section-nav-widget--company .section-nav-widget__trigger.active {
          background-color: #354674; }
      .section-nav-widget--company .section-nav-widget__menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: calc(50% - 200px / 2);
        width: 200px;
        height: auto;
        padding: 20px 20px 20px 20px;
        background: linear-gradient(to bottom, #354674 0%, rgba(53, 70, 116, 0.9) 80%);
        z-index: 99; }
        .section-nav-widget--company .section-nav-widget__menu > a {
          display: block;
          background: transparent;
          height: auto;
          width: auto;
          padding: 5px 0; } }
  @media screen and (max-width: 1100px) {
    .section-nav-widget--colocation {
      text-align: center; }
      .section-nav-widget--colocation .section-nav-widget__trigger {
        display: inline-block; }
        .section-nav-widget--colocation .section-nav-widget__trigger.active {
          background-color: #354674; }
      .section-nav-widget--colocation .section-nav-widget__menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: calc(50% - 200px / 2);
        width: 200px;
        height: auto;
        padding: 20px 20px 20px 20px;
        background: linear-gradient(to bottom, #354674 0%, rgba(53, 70, 116, 0.9) 80%);
        z-index: 99; }
        .section-nav-widget--colocation .section-nav-widget__menu > a {
          display: block;
          background: transparent;
          height: auto;
          width: auto;
          padding: 5px 0; } }

/* This is in case the widget is not placed in a .row div */
.body-content > .section-nav-widget {
  padding: 60px 80px; }