Cloud-CV/EvalAI

@import './variables.scss';
@import './mixins.scss';

.partner_container {
  margin-top: 200px;
  position: relative;
  background-repeat: no-repeat;
  width: 100%;
  color: $gray-darker;
  * {
    transition: all 0.3s ease;
  }
  .partner-bg {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    text-align: right;
    height: 100%;
    .bg {
      width: 95%;
    }
  }
  .row {
    padding: 20px;
  }
  .first {
    padding-top: 200px !important;
  }
  .partner_img {
    filter: gray;
    -webkit-filter: grayscale(100%);
    opacity: 0.3;

    // -webkit-filter: grayscale(100%);
    // Safari 6.0 - 9.0
    // filter: grayscale(100%);
    width: 160px;
    height: auto;
    &:hover {
      -webkit-filter: none;
      filter: none;
      opacity: 1;
    }
  }
  .partner_item {
    text-align: center;
  }
  .partner_slider {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 100px;
    margin-top: 30px;
    text-align: center;
    table {
      margin: 0 auto;
      width: 90%;
    }
  }
  .partner_text {
    color: $gray-darker;
    font-weight: $fw-regular;
    padding: 20px;
    margin-top: 30px;
  }
}

@include screen-medium {
  .partner_container {
    .partner_img {
      width: 140px;
    }
    .row table {
      padding-right: 20px;
    }
  }
}

@include screen-small {
  .partner_container {
    .partner_img {
      width: 120px;
    }
    .partner_container {
      background-size: cover !important;
    }
    .row {
      padding-top: 20px;
      table {
        padding-right: 20px;
      }
    }
    .partner_text {
      padding: 20px;
    }

    .first {
      padding-top: 50px !important;
    }
    .partner-bg {
      .bg {
        width: 100%;
        height: 100%;
      }
    }
  }
}