#media-image-carousel {
  position: relative;
  .media-image-carousel {
      margin: 0;
      padding: 20px 0;
  .swiper-slide {
      height: auto;
  }
  .heading {
      position: absolute;
      top: -4px;
      z-index: 1000;
      left: 25px;
      h2 {
          font-size: 24px;
          font-weight: 500;
          color: #003B5C;
          font-style: italic;
          display: inline-block;
          background: #fff;
          padding: 8px;
          margin: 0;
          span {
              font-weight: 300;
              font-style: normal;
          }
      }
  }
  .media-image-carousel {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }
  .text-container {
      padding: 57px 50px 57px 27px;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      
      h3 {
          font-size: 30px;
          line-height: 1.2;
          color: #000;
          margin: 0 0 0;
          padding: 0;
          font-weight: 500;
          width: 100%;
      }
      h4 {
          color: #003B5C;
          font-size: 16px;
          line-height: 1.3;
          margin: 0;
          padding: 10px 0 18px;
          width: 100%;
          a {
              color: #003B5C;
          }
      }
      p {
          color: #003B5C;
          font-size: 14px;
          line-height: 19px;
          padding:0;
          margin:0;
          width: 100%;
      }
  }
  .text-container.publications {
      border-left: solid 1px rgba(0, 0, 0, .15);
      border-top: solid 1px rgba(0, 0, 0, .15);
      border-bottom: solid 1px rgba(0, 0, 0, .15);
      border-radius: 10px 0 0 10px;
      padding: 57px 50px 57px 27px;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      
      h3 {
          font-size: 16px;
          line-height: 1.2;
          color: #000;
          margin: 0 0 0;
          padding: 0;
          font-weight: 500;
          width: 100%;
      }
      h4 {
          color: #003B5C;
          font-size: 30px;
          line-height: 1.3;
          margin: 0;
          padding: 10px 0 18px;
          width: 100%;
          a {
              color: #003B5C;
          }
      }
      p {
          color: #003B5C;
          font-size: 14px;
          line-height: 19px;
          padding:0;
          margin:0;
          width: 100%;
      }
  }

  .text-container.events {
      padding: 57px 100px;
      display: flex;
      justify-content: left;
      align-content: center;
      flex-wrap: wrap;
      .figcaption {
        font-size: 16px;
        line-height: 1.2;
        font-weight: 300;
        font-style: italic;
        color: rgba(0,0,0,.8);
        padding: 10px 0;
        text-align: left;
        p {
            font-size: 16px;
            line-height: 1.2;
            font-weight: 300;
            font-style: italic;
            color: rgba(0,0,0,.8);
            text-align: left;
        }
      }
      h3 {
          font-size: 16px;
          line-height: 1.2;
          color: #000;
          margin: 0 0 0;
          padding: 0;
          font-weight: 500;
          width: 100%;
          text-transform: uppercase;
      }
      h4 {
          color: #003B5C;
          font-size: 30px;
          line-height: 1.3;
          margin: 0;
          padding: 10px 0 18px;
          width: 100%;
          a {
              color: #003B5C;
          }
      }
      .description, p {
          color: #003B5C;
          font-size: 14px;
          line-height: 19px;
          padding:0;
          margin:0;
          width: 100%;
      }
  }
  .image-container {
      background-size: cover;
      border-radius: 0 10px 10px 0;
      background-position: center center;
      img {
          opacity: 0;
      }
  }
  .carousel-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
      display: none;
  }
}

.carousel-controls-centered {
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  left: auto;
  right: auto;
  pointer-events: none;
  width: 100%;
  display: block;
  position: absolute;
  .container.carouselnav {
      position: relative;
      .btn--primary {
          transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
          display: inline-flex;
          color: #000;
          text-align: center;
          align-items: center;
          justify-content: center;
          -webkit-user-select: none;
          user-select: none;
          border: 1px solid #2774AE;
          border-radius: 0;
          padding: 8px 20px;
          cursor: pointer;
          font-weight: 700;
          text-decoration: none;
          background-color: #FFF;
          border-color: #2774AE;
          color: #fff;
          border-radius: 50%;
          height: 61px;
          width: 61px;
          overflow: hidden;
          transition: all 0.3s ease;
          &:hover {
            background: #2774AE;
            svg {
              color: #fff;
            }
          }
        }
        button.btn.btn--primary.carousel-controls-prev {
          left: 0;
          position: absolute;
      }
      button.btn.btn--primary.carousel-controls-next {
          right: 0;
          margin: 0;
          position: absolute;
      }
  }
  span.ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      animation: ripple 600ms linear;
      background-color: rgba(255,255,255, 0.5);
    }
    
    button.btn.btn--primary.carousel-controls-next {
      margin-left: 40px;
    }
    svg {
      transition: all 0.3s ease;
      color: #2774AE;
      font-size: 34px;
    }
}


  @media all and (max-width:1400px) {
      .container.outter {

      }
      .carousel-controls-centered {
          .container.carouselnav {
              button.btn.btn--primary.carousel-controls-prev {
                  left: 15px;
              }
              button.btn.btn--primary.carousel-controls-next {
                  right: 15px;
              }
      }
      }

  }
  /* @media all and (max-width:1300px) {
      .carousel-controls-centered {

          .container.carouselnav {
              .btn--primary {
                  height: 41px;
                  width: 35px;
              }
              button.btn.btn--primary.carousel-controls-prev {
                  left: -30px;
              }
              button.btn.btn--primary.carousel-controls-next {
                  right: -30px;
              }
          }
          svg {
              font-size: 20px;
          }

      }
  } */

  @media all and (max-width:999px) {
      .container.outter {
          padding-left: 0;
          padding-right: 0;
      }
      .media-image-carousel {
          .text-container {
              h3 {
                  font-size: 14px;
              }
              h4 {
                  font-size: 20px;
              }
              p {
                  font-size: 12px;
              }
          }
      }
      
  }
  @media all and (max-width:767px) {
    margin: 40px 0 0;
    .media-image-carousel .text-container.events {
        padding: 57px 0 80px;
    }
  .carousel-controls-centered {
    top: auto;
    transform: translateY(-50%);
    margin: 0;
    left: auto;
    right: auto;
    pointer-events: none;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    }
  }
  @media all and (max-width:710px) {
      .media-image-carousel {
          .media-image-carousel-item {
              grid-template-columns: 1fr;
              min-height: auto !important;
          }
          .text-container {
              border-bottom: none;
              border-radius: 10px 0 0 10px;
              padding: 57px 50px 57px 27px;
          }
          .image-container {
              background-image: none !important;
              border-radius: 0 0 10px 10px;
              img {
                  opacity: 1;
                  border-radius: 0 0 10px 10px;
              }
          }
      }
  }
    .swiper-container--base .swiper-slide .media-item .text-content {
        background: none;
        color: #fff;
        padding: 0;
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        z-index: 1;
    }
}


@keyframes ripple {
  to {
      transform: scale(4);
      opacity: 0;
  }
}