/* Custom breakpoints for mobile carousel */
/* Navy icons */
.component.component-cards-grid .content.container {
  padding-top: 10px;
  padding-bottom: 10px; }
  @media (min-width: 768px) {
    .component.component-cards-grid .content.container {
      padding-bottom: 36px; } }
  @media (min-width: 992px) {
    .component.component-cards-grid .content.container {
      padding: 36px 35px 0; } }
  .component.component-cards-grid .content.container .card-grid-title {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 40px; }
    @media (min-width: 768px) {
      .component.component-cards-grid .content.container .card-grid-title {
        padding-left: 15px;
        padding-right: 15px; } }
  .component.component-cards-grid .content.container .cards_grid > .card-wrapper {
    padding-left: 0;
    padding-right: 0; }
    @media (min-width: 768px) {
      .component.component-cards-grid .content.container .cards_grid > .card-wrapper {
        padding-left: 15px;
        padding-right: 15px; } }
    .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square {
      border: 1px solid #0076a9;
      padding: 11px;
      position: relative;
      background: #01202C;
      margin-top: -15px;
      margin-bottom: 45px;
      max-width: 385px;
      max-height: initial;
      min-height: 280px;
      height: auto;
      width: 100%;
      cursor: pointer; }
      @media (min-width: 768px) {
        .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square {
          max-height: 325px;
          height: 320px; } }
      .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content {
        display: table; }
        @media (min-width: 768px) {
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content {
            display: block; } }
        .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead {
          position: relative;
          height: auto; }
          @media (min-width: 768px) {
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead {
              height: 110px; } }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-title h3 {
            position: relative;
            font-family: "Liberator-Light", Helvetica, sans-serif;
            text-transform: uppercase;
            font-weight: normal;
            margin-top: 20px;
            letter-spacing: 0.6px;
            text-decoration: none;
            text-align: left;
            padding-right: 40px;
            margin-bottom: 3px;
            font-size: 25px;
            font-size: 2.5rem; }
            @media (min-width: 768px) {
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-title h3 {
                font-size: 22px;
                font-size: 2.2rem;
                padding-right: 15px;
                margin-top: 5px;
                line-height: 24px; } }
            @media (min-width: 1200px) {
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-title h3 {
                font-size: 25px;
                font-size: 2.5rem;
                padding-right: 20px; } }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-title h3:before {
              content: "";
              width: 20px;
              height: 20px;
              position: absolute;
              top: 0;
              margin-top: 15px;
              margin-right: -10px;
              right: 10px;
              display: block;
              background: url("../../assets/images/arrow-more-white.png") center center no-repeat; }
              @media (min-width: 768px) {
                .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-title h3:before {
                  background: url("../../assets/images/point-more.png") center center no-repeat; } }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-tag .field--label {
            font-family: "Roboto-Regular", Helvetica, Arial, sans-serif;
            text-transform: uppercase; }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-tag .field--item {
            font-family: "Roboto-Light", Helvetica, Arial, sans-serif; }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-job {
            margin-top: 2px;
            margin-bottom: 2px;
            line-height: 16px; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-job .field--label {
              font-family: "Roboto-Regular", Helvetica, Arial, sans-serif;
              text-transform: uppercase; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .card-job .field--item {
              font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
              color: #ffffff;
              text-transform: uppercase; }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .mobile-card-body {
            display: block;
            font-size: 16px;
            font-size: 1.6rem; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .mobile-card-body p {
              font-size: 16px;
              font-size: 1.6rem; }
            @media (min-width: 768px) {
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardHead .mobile-card-body {
                display: none; } }
        .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody {
          display: table-header-group; }
          @media (min-width: 768px) {
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody {
              display: block; } }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .card-body {
            display: none;
            font-size: 16px;
            font-size: 1.6rem; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .card-body p {
              font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
              font-size: 16px;
              font-size: 1.6rem;
              position: absolute;
              display: block;
              top: 263px;
              margin-right: 5px;
              line-height: 20px;
              text-align: left; }
              @media (min-width: 768px) {
                .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .card-body p {
                  position: relative;
                  top: 0; } }
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .card-body p strong {
                font-family: "Roboto-Medium", Helvetica, Arial, sans-serif; }
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock {
            position: relative;
            overflow: hidden; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image {
              width: 100%;
              height: 100%; }
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image .media--type-image {
                position: relative;
                height: 200px; }
                @media (min-width: 768px) {
                  .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image .media--type-image {
                    height: 180px; } }
                .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image .media--type-image .field.field--name-field-media-image {
                  position: relative;
                  width: 100%;
                  height: 100%;
                  overflow: hidden; }
                  .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image .media--type-image .field.field--name-field-media-image .img-responsive {
                    display: inline-block;
                    width: 100%;
                    height: 100%; }
                    @media (min-width: 768px) {
                      .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image .media--type-image .field.field--name-field-media-image .img-responsive {
                        margin-bottom: -27px;
                        width: 100%;
                        height: 100%;
                        min-height: 100%; } }
                  .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square .content .cardBody .heroblock .field--name-field-hero-image .media--type-image .field.field--name-field-media-image:after {
                    display: inline-block;
                    height: 0;
                    width: 0;
                    border-bottom: 11px solid #01202C;
                    border-left: 11px solid transparent;
                    content: "";
                    position: absolute;
                    right: 0;
                    bottom: 0; }
      .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:after {
        width: 20px;
        height: 20px;
        position: absolute;
        right: -10px;
        bottom: -10px;
        /*border-left: 1px solid $navy-light-blue;
              background: $navy-webform-bg;
              transform: rotate(45deg);
              -ms-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
              -webkit-transform: rotate(45deg);
              -o-transform: rotate(45deg);*/ }
      .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover {
        background: transparent; }
        @media (min-width: 768px) {
          .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover {
            border: 1px solid #0076a9;
            background: #0076a9;
            color: #ffffff; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover .content .cardHead:after {
              display: block;
              content: "";
              height: 1px !important;
              opacity: 0.4;
              position: absolute;
              border-bottom: 1px solid #01202C;
              left: -12px;
              right: -12px;
              bottom: 0; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover .content .cardHead h3 {
              position: relative; }
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover .content .cardHead h3:before {
                background: url("../../assets/images/arrow-more-white.png") center center no-repeat !important;
                margin-top: 15px;
                margin-right: -10px;
                cursor: pointer; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover .content .cardBody .card-body {
              display: block;
              padding-top: 15px;
              font-size: 16px;
              font-size: 1.6rem; }
              .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover .content .cardBody .card-body p {
                font-size: 16px;
                font-size: 1.6rem; }
            .component.component-cards-grid .content.container .cards_grid > .card-wrapper .card-square:hover .content .media.media--type-image {
              visibility: hidden; } }