@charset "UTF-8";

#job-offer {
  .media-body {
    padding: 0 20px;

    @include media-breakpoint-down(md) {
      padding: 0 5px;
    }

    section {
      padding:       20px 0;
      border-bottom: 1px solid $card-border-color;
      clear:         both;

      &:first-child {
        padding: 0 0 10px 0;
      }

      &:last-child {
        border-bottom: none;
      }

      > .list-group {
        margin-bottom: 0;
      }
    }
  }

  .media-object {
    width: 70px;

    @include media-breakpoint-down(md) {
      display: none;
    }
  }

  h1 {
    font-size:     22px;
    margin-bottom: 10px;

    @include media-breakpoint-down(md) {
      font-size: $font-size-lg;
    }
  }

  .employer {
    margin-right: 3px;
    font-size:    14px;
    font-weight:  normal;
  }

  .salary {
    font-size: 14px;

    small {
      font-weight: normal;
    }
  }

  blockquote {
    font-style:  italic;
    padding:     0 0 0 30px;
    position:    relative;
    border-left: none;
    font-size:   $font-size-lg;
    margin:      18px 0 17px 20px;

    &:after {
      @include content-icon-solid($icon-job-offer-company-headline);
      color: $gray-light;
    }
  }

  .requirements {
    border-bottom:  0 !important;
    padding-bottom: 0 !important;

    strong {
      color:          $gray-light;
      padding-bottom: 5px;
      margin-bottom:  10px;
      border-bottom:  1px solid $card-border-color;
      display:        block;
    }
  }

  // Offer description (or company description)
  // ----------------------------------------------------
  .text {
    @include media-breakpoint-down(md) {
      font-size: $font-size-sm;
    }

    img.img-smile {
      height: 1em;
    }
  }
}

// Job location. On mobile devices we need to remove bottom margin.
// -----------------------------------------------------------------

.metadata.location {
  border-top: 0;

  @include media-breakpoint-up(sm) {
    display: inline;
  }
}

.side-menu li a {
  padding-left: 0;
}

// Gallery with firm's photos
// ---------------------------

#gallery {
  line-height:          0;
  padding:              0;
  margin:               10px 0 0 0;

  -webkit-column-count: 3;
  -webkit-column-gap:   0;
  -moz-column-count:    3;
  -moz-column-gap:      0;
  column-count:         3;
  column-gap:           0;

  img, .yt {
    width:  100% !important;
    height: auto !important;
  }

  img {
    &:hover {
      background-color:   #000;
      opacity:            0.6;
      -webkit-transition: .3s ease-in-out;
      transition:         .3s ease-in-out;
    }
  }

  @media (max-width: 800px) {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
  }

  @media (max-width: 400px) {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
  }
}
