/* ==========================================================================
   16_SPECIFICS
   --------------------------------------------------------------------------
   * README

   * SEARCH JOBS (HOME): SITE LEVEL

   * BANNER: SECONDARY

   * WIDGET: SOCIAL LOGIN
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the All specific styles.
 * That means they apply to any page that deals with an exception to any
 * default style.

 * If you need to deal with an exception to any default styles, you should
 * manage it by adding a .X--modifier class to the .X element and develop the
 * given exception nested to this .X--modifier class in this stylesheet under
 * the corresponding page subtitle.

 * These .X--modifier classes and its nested styles are grouped by page in which
 * are featured, sorted by HTML depth, and separated in Structure, Behaviour or
 * Appearance styles as appropriate.
 */

/* SEARCH JOBS (HOME): SITE LEVEL
   ========================================================================== */

@media all and (min-width:769px) {

    /* Behaviour
     -------------------------------------------------------------------------- */
    .body--search-jobs .banner--main .banner__wrapper {
        background-position: 100% -64px;
        -webkit-background-size: auto 540px;
        -moz-background-size: auto 540px;
        -ms-background-size: auto 540px;
        -o-background-size: auto 540px;
        background-size: auto 540px;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .body--search-jobs .banner--main {
      height: 300px
    }
    .grid__item.search-filters {
        max-width: 250px;
    }

}

/* BANNER: SECONDARY
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.banner--secondary {
    height: 300px;
}

/* Appearance
   -------------------------------------------------------------------------- */

.banner--secondary .banner__title {
    font-size: 28px;
    font-weight: bold;
}

.banner--secondary .banner__subtitle {
    font-size: 16px;
}

.footer .button--default,
.footer .button--default:link,
.footer .button--default:visited {
    border-color: #1790D0;
    background-color: #1790D0;
}

.footer .button--default:hover,
.footer .button--default:active {
    border-color: #1378AE;
    background-color: #1378AE;
}

.footer .button--default:focus {
    border-color: #1378AE;
    background-color: #1378AE;
}

.footer .socialIcons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
}

.footer .socialIcons .sociaIcons__item {
  margin-left: 20px;
}

@media all and (min-width:769px) {

    .banner--secondary .banner__wrapper{
      background-image: url('../images/img-bubbles.svg');
      position: relative;
      background-position: left top 60%;
      -webkit-background-size: auto 275%;
      -moz-background-size: auto 275%;
      -ms-background-size: auto 275%;
      -o-background-size: auto 275%;
      background-size: auto 275%;
      padding-left: 5%;
    }

    .banner--secondary:before {
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      background-position: 100% 0;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    .banner--secondary .banner__title {
      font-size: 28px;
      font-weight: bold;
      max-width: 80%;
    }

    .banner--secondary .banner__subtitle {
      font-size: 16px;
      display: block;
      margin-top: 25px;
      font-weight: normal;
      max-width: 80%;
    }
    .banner--secondary .banner__actions {
      width:45%;
    }
}
@media all and (max-width: 768px) {
  .banner--secondary {
    background-color: #108473
  }
  .banner--secondary .banner__actions,
  .banner--secondary .banner__text {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 20px;
  }
  .banner--secondary .banner__subtitle {
    max-width: 100%
  }
}

/* JOB DETAIL
   ========================================================================== */

.grid__item--aside .button--default.apply {
  padding-top: 17px;
  padding-bottom: 17px;
}
#relatedJobs [class*="--hr"]{
  border-color: #004750 ;
  border-width: 3px;
}
@media all and (max-width: 768px){
  #relatedJobs .article__footer {
    margin-bottom: 20px;
  }
}
#relatedJobs .list__item__text__title.link:hover {
  border-color: transparent;
}

/* LOGIN
   ========================================================================== */

.form--login .button-bar {
  margin-top: 22px;
}
@media all and (max-width: 768px){
  .form--login fieldset {
    margin-bottom: 22px;
  }
}

/* SUCCESS PAGE */

.Section--jobAlert {
  font-size: 15px;
}

.Section--jobAlert span {
  font-weight: bold;
}