/*Case study layout*/


.cStudyContainer {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 10px;
  }
  
  .cStudy-items-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* optional: smooth scrolling on iOS */
    -ms-scroll-snap-type: x mandatory; /* snap to items on scroll */
    scroll-snap-type: x mandatory; /* snap to items on scroll */
    -webkit-scroll-snap-type: mandatory;
    scrollbar-width: none; /* hide scrollbar */
    -ms-overflow-style: none; /* hide scrollbar for Edge and IE */
    scroll-behavior: smooth; /* smooth scrolling on all devices */
    scroll-snap-stop: always; /* snap to items on stop */
    -ms-scroll-snap-stop: always;
    width: 90%;
  margin: auto;
  }
  
  .cStudy-items-container a {
      flex: 1 0 auto;
      width: calc(100%/3);
      height: 400px;
              
  }
  
  .cStudy-items-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  
  .carousel {
    position: relative;
  }
  
  .cStudy-item {
    position: relative;
    padding: 0 10px;
    scroll-snap-align: start; /* snap to start of each item */
    filter:grayscale(1);
      height:100%;
  }
  
  @media screen and not (min-width: 1400px) {
  .cStudy-items-container a {
      width: 50%;
    }
  }
  
  
  @media screen and not (min-width: 992px) {
    .cStudy-items-container a {
      width: 100%;
      transition: 1s ease;
    }
    .cStudy-arrow {
    font-size:28px;
    }
  }
  

  .cStudy-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cStudy-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 70%);
    height:0px;
    text-align: center;
    opacity: 0;
    transition: .5s ease;
    margin: auto 10px;
  }
  
  .cStudy-item-text {
    color: #fff;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    text-align:left;
    padding:5%;
  }
  
  .cStudy-item:hover {
      filter: grayscale(0);
      transition: 1s ease;
      
  }
  
  .cStudy-item:hover .cStudy-item-overlay {
    opacity: 1;
    height:100%;
    transition: .5s ease;
  }
  
  .cStudy-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 6vw;
    cursor: pointer;
    z-index:1;
    color:#2B2B2B;
    transition: .5s ease;
  }
  .cStudy-arrow:hover {
  color:#CCA70D;
    transition: .5s ease;
  }
  
  .left-arrow {
    left: 10px;
  }
  
  .right-arrow {
    right: 10px;
  }
  
  @media screen and not (min-width: 480px) {
      .cStudyContainer {
          padding:0px;
      }
      .cStudy-items-container {
          width:100%;
      }
      .cStudy-item {
          padding:0px;
      }
      .cStudy-item-overlay {
          margin:auto;
      }
      .cStudy-arrow {
          font-size:10vw;
          z-index:2;
          color:#fff;
      }
  }