/* ==========================================================================
   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 .banner__wrapper {
        background-image: url(../images/banner--guy.png);
    }

}

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

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

/* Appearance
   -------------------------------------------------------------------------- */
.banner--secondary {
    background-image: url('../images/banner--secondary.png');
}

.banner--secondary .banner__title {
    font-size: 38px;
    font-weight: 300;
}

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


.banner--secondary .button--default,
.banner--secondary .button--default:link,
.banner--secondary .button--default:visited {
    border-color: #F75589;
    background-color: #F75589;
}

.banner--secondary .button--default:hover,
.banner--secondary .button--default:active {
    border-color: #EA447A;
    background-color: #FF74A0;
}

.banner--secondary .button--default:focus {
    border-color: #FF74A0;
    background-color: #FF74A0;
}

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

    /* Structure
     -------------------------------------------------------------------------- */
    .banner--secondary:before {
        width: 45%;
    }

    .banner--secondary .banner__content {
        padding-left:45%;
    }

    /* Behaviour
     -------------------------------------------------------------------------- */
    .banner--secondary {
        position: relative;
    }

    .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;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .banner--secondary:before {
        content:'';
        background-image: url(../images/banner--gal.png);
    }
}