.smart-city-component {
  width: 100%;
  background: #1F355E;
  color: white; }
  .smart-city-component .desktop-only {
    display: none; }
    @media screen and (min-width: 768px) {
      .smart-city-component .desktop-only {
        display: block; } }
  .smart-city-component .mobile-only {
    display: block; }
    @media screen and (min-width: 768px) {
      .smart-city-component .mobile-only {
        display: none; } }
  .smart-city-component .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem; }
    .smart-city-component .inner .row {
      display: flex;
      flex-wrap: nowrap;
      align-items: start;
      justify-content: space-between;
      flex-direction: column; }
      @media screen and (min-width: 768px) {
        .smart-city-component .inner .row {
          flex-direction: row; }
          .smart-city-component .inner .row-reverse {
            flex-direction: row-reverse; } }
      .smart-city-component .inner .row.mobile-only {
        display: block; }
        @media screen and (min-width: 768px) {
          .smart-city-component .inner .row.mobile-only {
            display: none; } }
    .smart-city-component .inner .col {
      flex-basis: 100%;
      flex: 0 1 auto;
      margin: 0 auto; }
    .smart-city-component .inner .content {
      padding: 2rem 0; }
      .smart-city-component .inner .content .tab {
        display: none; }
        .smart-city-component .inner .content .tab.tab-active {
          display: block;
          text-align: center; }
          @media screen and (min-width: 768px) {
            .smart-city-component .inner .content .tab.tab-active {
              text-align: left; } }
      .smart-city-component .inner .content img {
        width: 70px;
        margin: 0 auto 20px auto; }
        @media screen and (min-width: 768px) {
          .smart-city-component .inner .content img {
            margin: 0 0 20px 0; } }
  .smart-city-component .infographic {
    position: relative;
    width: 288px;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .smart-city-component .infographic {
        margin: 0 1rem 0 0; } }
    @media screen and (min-width: 500px) {
      .smart-city-component .infographic {
        width: 500px; } }
    .smart-city-component .infographic figure {
      position: relative;
      margin: 1rem auto; }
      @media screen and (min-width: 768px) {
        .smart-city-component .infographic figure {
          margin: 0; } }
      .smart-city-component .infographic figure img {
        width: 288px;
        height: auto;
        margin: 0 auto;
        text-align: center; }
        @media screen and (min-width: 500px) {
          .smart-city-component .infographic figure img {
            width: 500px; } }
      .smart-city-component .infographic figure .links {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 288px;
        height: 288px;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        padding: 0;
        list-style: none; }
        @media screen and (min-width: 500px) {
          .smart-city-component .infographic figure .links {
            width: 500px;
            height: 500px; } }
        .smart-city-component .infographic figure .links li {
          margin: 0;
          padding: 0; }
          .smart-city-component .infographic figure .links li a {
            color: white;
            text-decoration: none;
            position: absolute;
            z-index: 10;
            transition: all 0.25s;
            width: 100%;
            height: 100%;
            opacity: 1; }
            .smart-city-component .infographic figure .links li a:hover + .fig-overlay,
            .smart-city-component .infographic figure .links li a:focus + .fig-overlay {
              opacity: 1; }
          .smart-city-component .infographic figure .links li .dot {
            display: inline-block;
            font-size: 14px;
            width: 14px;
            height: 14px;
            border-radius: 14px;
            box-shadow: 0px 0px 6px 1px #646464;
            background-color: #789D4A;
            color: white;
            position: relative;
            text-align: center;
            z-index: 15;
            transition: all 0.25s;
            line-height: 1;
            vertical-align: middle; }
            @media screen and (min-width: 500px) {
              .smart-city-component .infographic figure .links li .dot {
                font-size: 16px;
                width: 16px;
                height: 16px;
                border-radius: 16px;
                box-shadow: 0px 0px 10px 1px #646464; } }
        .smart-city-component .infographic figure .links .fig-overlay {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          opacity: 0;
          transition: all 0.25s; }
        .smart-city-component .infographic figure .links .banking a {
          z-index: 10;
          top: 18px;
          left: 156px;
          width: 60px;
          height: 80px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .banking a {
              top: 38px;
              left: 276px;
              width: 98px;
              height: 120px; } }
        .smart-city-component .infographic figure .links .banking .dot {
          top: 25px;
          left: 0px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .banking .dot {
              top: 34px;
              left: -1px; } }
        .smart-city-component .infographic figure .links .banking .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Banking.png"); }
        .smart-city-component .infographic figure .links .capital a {
          z-index: 10;
          top: 76px;
          left: 229px;
          width: 40px;
          height: 73px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .capital a {
              top: 105px;
              left: 398px;
              width: 61px;
              height: 156px; } }
        .smart-city-component .infographic figure .links .capital .dot {
          top: 27px;
          left: 0px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .capital .dot {
              top: 77px;
              left: -8px; } }
        .smart-city-component .infographic figure .links .capital .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Captial_Markets.png"); }
        .smart-city-component .infographic figure .links .channel a {
          z-index: 12;
          top: 158px;
          left: 172px;
          width: 25px;
          height: 35px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .channel a {
              z-index: 11;
              top: 288px;
              left: 298px;
              width: 44px;
              height: 41px; } }
        .smart-city-component .infographic figure .links .channel .dot {
          top: 0px;
          left: 9px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .channel .dot {
              top: 0px;
              left: 28px; } }
        .smart-city-component .infographic figure .links .channel .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Channel_Partners.png"); }
        .smart-city-component .infographic figure .links .utilities a {
          z-index: 11;
          top: 160px;
          left: 198px;
          width: 58px;
          height: 52px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .utilities a {
              top: 264px;
              left: 341px;
              width: 98px;
              height: 98px; } }
        .smart-city-component .infographic figure .links .utilities .dot {
          top: 32px;
          left: 29px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .utilities .dot {
              top: 72px;
              left: 49px; } }
        .smart-city-component .infographic figure .links .utilities .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Utilities.png"); }
        .smart-city-component .infographic figure .links .education a {
          z-index: 11;
          top: 108px;
          left: 34px;
          width: 72px;
          height: 52px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .education a {
              top: 190px;
              left: 74px;
              width: 103px;
              height: 85px; } }
        .smart-city-component .infographic figure .links .education .dot {
          top: 5px;
          left: 15px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .education .dot {
              top: 5px;
              left: 18px; } }
        .smart-city-component .infographic figure .links .education .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Education.png"); }
        .smart-city-component .infographic figure .links .carriers a {
          z-index: 10;
          top: 40px;
          left: 219px;
          width: 27px;
          height: 47px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .carriers a {
              top: 77px;
              left: 382px;
              width: 37px;
              height: 56px; } }
        .smart-city-component .infographic figure .links .carriers .dot {
          top: 0px;
          left: 0px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .carriers .dot {
              top: 0px;
              left: 6px; } }
        .smart-city-component .infographic figure .links .carriers .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Carrier_Service_Provider.png"); }
        .smart-city-component .infographic figure .links .government a {
          z-index: 10;
          top: 99px;
          left: 132px;
          width: 56px;
          height: 40px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .government a {
              top: 171px;
              left: 224px;
              width: 103px;
              height: 70px; } }
        .smart-city-component .infographic figure .links .government .dot {
          top: 9px;
          left: 4px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .government .dot {
              top: 32px;
              left: 4px; } }
        .smart-city-component .infographic figure .links .government .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Fed_State_Local_Government.png"); }
        .smart-city-component .infographic figure .links .defense a {
          z-index: 11;
          top: 67px;
          left: 81px;
          width: 50px;
          height: 49px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .defense a {
              top: 107px;
              left: 152px;
              width: 67px;
              height: 85px; } }
        .smart-city-component .infographic figure .links .defense .dot {
          top: 9px;
          left: 2px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .defense .dot {
              top: 34px;
              left: 2px; } }
        .smart-city-component .infographic figure .links .defense .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Federa_DoD.png"); }
        .smart-city-component .infographic figure .links .healthcare a {
          z-index: 10;
          top: 112px;
          left: 188px;
          width: 39px;
          height: 52px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .healthcare a {
              top: 202px;
              left: 318px;
              width: 76px;
              height: 83px; } }
        .smart-city-component .infographic figure .links .healthcare .dot {
          top: 24px;
          left: 26px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .healthcare .dot {
              top: 39px;
              left: 61px; } }
        .smart-city-component .infographic figure .links .healthcare .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Healthcare.png"); }
        .smart-city-component .infographic figure .links .insurance a {
          z-index: 11;
          top: 155px;
          left: 93px;
          width: 43px;
          height: 47px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .insurance a {
              top: 265px;
              left: 151px;
              width: 84px;
              height: 84px; } }
        .smart-city-component .infographic figure .links .insurance .dot {
          top: 24px;
          left: 0px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .insurance .dot {
              top: 45px;
              left: 9px; } }
        .smart-city-component .infographic figure .links .insurance .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Insurance.png"); }
        .smart-city-component .infographic figure .links .manufacturing a {
          z-index: 10;
          top: 161px;
          left: 22px;
          width: 68px;
          height: 72px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .manufacturing a {
              top: 270px;
              left: 45px;
              width: 120px;
              height: 130px; } }
        .smart-city-component .infographic figure .links .manufacturing .dot {
          top: 38px;
          left: 33px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .manufacturing .dot {
              top: 81px;
              left: 48px; } }
        .smart-city-component .infographic figure .links .manufacturing .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Manufacturing.png"); }
        .smart-city-component .infographic figure .links .pharma a {
          z-index: 10;
          top: 189px;
          left: 137px;
          width: 42px;
          height: 42px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .pharma a {
              top: 310px;
              left: 235px;
              width: 76px;
              height: 95px; } }
        .smart-city-component .infographic figure .links .pharma .dot {
          top: 25px;
          left: 31px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .pharma .dot {
              top: 63px;
              left: 63px; } }
        .smart-city-component .infographic figure .links .pharma .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Pharmaceuticals.png"); }
        .smart-city-component .infographic figure .links .retail a {
          z-index: 11;
          top: 127px;
          left: 107px;
          width: 61px;
          height: 36px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .retail a {
              top: 225px;
              left: 190px;
              width: 92px;
              height: 64px; } }
        .smart-city-component .infographic figure .links .retail .dot {
          top: 1px;
          left: 6px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .retail .dot {
              top: 5px;
              left: 6px; } }
        .smart-city-component .infographic figure .links .retail .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Retail.png"); }
        .smart-city-component .infographic figure .links .transportation a {
          z-index: 10;
          top: 29px;
          left: 79px;
          width: 51px;
          height: 36px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .transportation a {
              top: 54px;
              left: 142px;
              width: 77px;
              height: 54px; } }
        .smart-city-component .infographic figure .links .transportation .dot {
          left: 0;
          top: 19px; }
          @media screen and (min-width: 500px) {
            .smart-city-component .infographic figure .links .transportation .dot {
              top: 33px;
              left: 4px; } }
        .smart-city-component .infographic figure .links .transportation .fig-overlay {
          background-image: url("../img/NETSCOUT_5G_Smart%20City_Transportation.png"); }