// HOME PAGE

.hero-grid{
    .featurecard{
      &:after{
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 50px);
        top: 33px;
        left: -6%;
        background-color: #DBDBDBFA;
        @include res(s-m){
          display: none;
        }
      }
      &:last-child{
        &:after{
          display: none;
        }
      }
      @include res(l){
        &:nth-child(2n){
          &:after{
            display: none;
          }
        }
      }
      @include res(s-m){
        .w-inline-block{
          opacity: 1;
          margin-left: 0;
        }
      }
      video{
        transition: all .5s;
      }
      &:hover{
        video{
          filter: brightness(0.9);
        }
        .hover-orange{
          color: $orange;
        }
        .image-10{
          opacity: 1;
          margin-left: 0;
        }
      }
    }
}

.projects-col-list:not(.owl-rtl) {
  display: flex;
  .projects-col-item{
    display: none;
    &:nth-child(1), &:nth-child(2){
      display: block;
    }
    &:nth-child(1){
      margin-left: 90px;
    }
  }
}

.news{
  .width-wrapper-right.news-wrapper-hp{
    @include res(s-m-l){
      @include width;
    }
  }
  .four-last-news{
    .collection-list{
      @media (min-width: 992px){
        &.no-active .w-dyn-item:first-child, .w-dyn-item.active{
          background: url(https://cdn.prod.website-files.com/6a37ac8d06f86db30059c4d8/6a3bd3c288e00070693b39c5_new-active.jpg) no-repeat center center;
          background-size: cover;
          width: 367px;
          padding: 80px 6% 20px;
          justify-content: flex-start;
          flex-wrap: nowrap;
          .heading-8{
            width: 277px;
            max-width: 100%;
          }
          img{
            max-height: initial;
            width: 277px;
            max-width: 277px;
          }
          .title-date{
            order: -1;
            writing-mode: initial;
            height: auto;
            color: $default;
            flex-direction: column;
            margin-bottom: 25px;
            width: 277px;
            h3{
              font-size: 1.9em;
              margin-bottom: 15px;
            }
            .date-field{
              font-size: 1.1em
            }
          }
          .new-teaser{
            display: block;
            width: 277px;
          }
        }
      }
      .w-dyn-item{
        cursor: pointer;
        &:nth-child(1){
          background-color: #8A8A8A;
        }
        &:nth-child(2){
          background-color: #6A6A6A;
        }
        &:nth-child(3){
          background-color: #4C4C4C;
        }
        &:nth-child(4){
          background-color: #383838;
        }
      }
    }
  }
}

.owl-hp-silder{
  &.owl-carousel{
    width: 60%;
      @include res(xl){
      width: calc(100% - 140px);
    }
    @include res(l){
      width: calc(100% - 140px);
    }
    @include res(s-m){
      width: calc(100% - 70px);
    }
  }
  > .paragraphs{
    display: none;
    &:nth-child(1){
      display: block;
    }
  }
  .owl-item{
    opacity: 0;
    transition: opacity .5s;
    &.active{
      opacity: 1;
    }
  }
  .owl-dots{
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    @include res(s-m){
        position: relative;
        height: auto;
        flex-direction: row;
    }
    .owl-dot{
      width: 12px;
      height: 12px;
      background-color: #D9D9D9;
      margin: 9px 0;
      border: none;
      border-radius: 50%;
      @include res(s-m){
        margin: 0 6px;
      }
      &.active{
        background-color: $orange;
        width: 12px;
        height: 12px;
        top: auto;
      }
    }
  }
}

@include res(xl){
  .front .our-projects{
    > .width-wrapper > .collection-list-wrapper{
      display: none;
    }
    .promoted-mobile{
      display: block;
    }
    .width-wrapper{
      flex-wrap: wrap;
      .div-block-22{
        width: 100%;
      }
      .collection-list-wrapper{
        width: 100%;
      }
    }
  }
}