/*------------------------------------------------------------ RESET --------------------------------------------------------------*/
 *, :before, :after {
	 -moz-box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 box-sizing: border-box;
}
 h1 {
	 color: #fff;
	 display: block;
	 font-weight: 200;
	 line-height: 1.2em;
	 text-align: center;
	 width: 100%;
}
 h1 em {
	 color: #fff;
	 display: block;
	 font-weight: 200;
}
 h1, #solutionsTypes h2 {
	 font-size: calc( 32px + (75 - 32) * (100vw - 320px) / (2560 - 320) );
	 margin: 25px 0;
	 width: 100%;
}
 section {
	 padding: 30px;
}
/* === Old Employer Page === */
 .employerLandingPage .mainBanner h1 {
	 font-size: 38px;
	 font-weight: 600;
	 margin: 0;
}
 .employerLandingPage .mainBanner h1 span {
	 background: none;
	 border: none;
	 border-radius: 0;
	 display: inline;
	 padding: 0;
}
 .employerLandingPage .mainBanner h2 {
	 font-size: 38px;
	 font-weight: 300;
}
 .employerLandingPage .mainBanner h2 br {
	 display: none;
}
 .employerLandingPage .recruitingButton {
	 font-size: 16px;
	 margin: 20px 0;
	 padding: 8px 25px;
	 -webkit-transition: color 300ms ease-out, background 300ms ease-out;
	 transition: color 300ms ease-out, background 300ms ease-out;
}
 .employerLandingPage .recruitingButton:hover {
	 background: #af263c;
}
/* ================================================== */
/* Icons - (min-width: 1170px) */
/* ================================================== */
 .svgPetiteEntrepriseIcons {
	 height: 165px;
	 width: 192px;
}
 .svgGrandeEntrepriseIcons {
	 height: 165px;
	 width: 195px;
}
 .svgAgenceRecrutementIcons {
	 height: 165px;
	 width: 268px;
}
 .svgSolutionsDetails {
	 height: 152px;
	 width: 152px;
}
/* ================================================== */
/* Header */
/* ================================================== */
 #mainHeader {
	 display: block !important;
}
 #mainHeader .logo {
	 left: 15px;
}
 #mainHeader #logo-twig {
	 left: 50%;
}
 #mainHeader .logo.hide, #mainHeader #top-nav .lang.hide {
	 display: none !important;
}

#toggle-candidate-nav-container.active #candidateSubMenu, #toggle-candidate-nav-container.active.navSubMenu {
	opacity:1;
	top:22px;
	transition:opacity 0.5s;
	visibility:visible
}

#mainHeader li a.link {
	 position: relative;
}
 #mainHeader #top-nav li a.link.phone, #mainHeader #top-nav li a.link.phone:hover, #mainHeader #mobile-nav-emp li a.link.phone, #mainHeader #mobile-nav-emp li a.link.phone:hover {
	 padding: 0 0 0 15px;
}
 #mainHeader #mobile-nav-emp {
	 background: #E0EDF4;
	 box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.3);
	 position: absolute;
	 top: 65px;
	 width: 100%;
}
 #mainHeader #mobile-nav-emp li {
	 border-bottom: 1px solid #D0DEE6;
	 margin: 0 25px;
}
 #mainHeader #mobile-nav-emp li a {
	 display: block;
	 font-size: 16px;
	 line-height: 44px;
}
 #mainHeader .mobileTitleEmp {
	 color: #333;
	 display: none;
	 font-size: 32px;
	 font-weight: lighter;
	 left: 25px;
	 position: absolute;
	 top: 7px;
}
 .svgPhoneIcon {
	 height: 17px;
	 left: 0;
	 position: absolute;
	 top: 13px;
	 width: 9px;
}
 #phoneNumberHeader {
	 background-color: #333333;
	 color: white;
	 padding: 8px;
}
 #phoneNumberHeader .phone {
	 color: #fff;
	 padding-left: 15px;
	 position: relative;
}
 .phoneNumberHeaderContainer {
	 display: flex;
	 justify-content: flex-end;
	 margin: 0 auto;
	 max-width: 1170px;
	 padding-right: 12px;
	 width: 100%;
}
 #top-nav .headerLangDesktopCms {
	 display: none;
}
/* ================================================== */
/* Promo Banner */
/* ================================================== */
 .empPromoBanner {
	 background: #fff;
	 color: #333;
	 font-size: 20px;
	 padding: 6px 0;
	 text-align: center;
}
 .empPromoBannerContent {
	 align-items: center;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 margin: 0 auto;
	 max-width: 990px;
}
 .empPromoBanner p {
	 display: inline-block;
	 flex: 0 1 auto;
	 line-height: 1.2em;
	 max-width: 100%;
	 padding: 8px 75px;
	 position: relative;
	 text-align: center;
}
 .empPromoBanner img {
	 display: inline-block;
	 position: absolute;
	 top: 50%;
	 -webkit-transform: translateY(-50%);
	 transform: translateY(-50%);
	 vertical-align: middle;
	 width: 32px;
}
 .empPromoBanner .gradHatImg {
	 left: 25px;
}
 .empPromoBanner .sunImg {
	 right: 25px;
}
 .empPromoBanner strong {
	 color: #e30e4e;
	 font-size: 25px;
	 font-weight: 600;
}
 .empPromoBanner a {
	 border: 1px solid #233c3c;
	 border-radius: 20px;
	 color: #333;
	 display: inline-block;
	 flex: 0 0 auto;
	 font-size: 14px;
	 margin: 8px 20px;
	 padding: 8px 22px;
	 -webkit-transition: background-color .3s;
	/* Safari */
	 transition: background-color .3s;
}
 .empPromoBanner a:hover {
	 background: #e1edf4;
}
/* ================================================== */
/* Solutions */
/* ================================================== */
 #solutions {
	 background: url(../images/emp-main-bg.jpg) no-repeat 50% 50%;
	 background-size: cover;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 padding: 30px 15px 0;
	 width: 100%;
}
 #solutions article {
	 border-bottom: 1px solid #eff6f9;
	 cursor: pointer;
	 flex: 1 1 360px;
	 margin: 0;
	 max-width: 550px;
	 padding: 30px 5px 0;
	 position: relative;
	 text-align: center;
	 -webkit-transition: background-color 1s;
	/* Safari */
	 transition: background-color 1s;
}
 .msie11 #solutions article {
	 max-width: 100%;
	 width: 550px;
}
 #solutions article:last-child {
	 border: 0;
}
 #solutions article.selected, #solutions article.open {
	 background-color: #188aaf;
}
 #solutions article.open span.arrow {
	 display: none;
}
 #solutions h2, #solutionsTypes h3, #clients h2 {
	 color: #fff;
	 font-size: calc( 26px + (32 - 26) * (100vw - 320px) / (2560 - 320) );
	 font-weight: 200;
}
 #solutions svg {
	 margin: 30px 0 0;
	 pointer-events: none;
}
 #solutions p, #solutionsTypes article p {
	 color: #fff;
	 font-size: calc( 16px + (19 - 16) * (100vw - 320px) / (2560 - 320) );
	 line-height: 1.2em;
	 margin: 25px 0 30px;
}
 #solutions p br {
	 display: none;
}
 #solutions p em {
	 font-size: calc( 22px + (30 - 22) * (100vw - 320px) / (2560 - 320) );
}
 #solutions button, a.produit {
	 background-color: #133e61;
	 border-radius: 24px;
	 color: #fff;
	 font-size: calc( 20px + (24 - 20) * (100vw - 320px) / (2560 - 320) );
	 line-height: 1.2em;
	 margin-bottom: 5px;
	 padding: 5px 30px;
}
 a.fixedBot {
	 background: #eb1e4f;
	 border: 1px solid #eb1e4f;
	 border-bottom: 0;
	 border-radius: 10px 10px 0 0;
	 bottom: 0;
	 color: #fff;
	 font-size: calc( 16px + (18 - 16) * (100vw - 320px) / (2560 - 320) );
	 left: 50%;
	 margin-left: -145px;
	 padding: 10px;
	 position: absolute;
	 text-align: center;
	 width: 290px;
}



/* ================================================== */
/* Solutions Types */
/* ================================================== */
 #solutionsTypes {
	 background-color: #eff6f9;
	 border-bottom: 2px solid #fff;
	 padding: 30px 15px;
	 text-align: center;
	 width: 100%;
}
 #solutionsTypes h2 {
	 font-weight: 200;
}
 #solutionsTypes h2 em {
	 color: #eb1e4f;
	 font-weight: 200;
}
 #solutionsTypes h3 {
	 color: #363636;
	 font-weight: 400;
}
 #solutionsTypes h3 em {
	 color: #eb1e4f;
	 font-weight: 400;
}
 #solutionsTypes, #solutionsDetails, #solutionsDetails > div {
	 display: none;
}
 #solutionsTypes > div {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 margin: 0 auto;
	 max-width: 1500px;
}
 #solutionsTypes > div:first-child {
	 max-width: 1000px;
}
 #solutionsTypes p {
	 width: 100%;
}
 #solutionsTypes > div > p {
	 font-size: calc( 16px + (21 - 13) * (100vw - 320px) / (2560 - 320) );
	 margin: 0 0 20px;
}
 #solutionsTypes article {
	 flex: 1 1 360px;
	 margin: 0;
	/*max-width: 500px;
	*/
	 max-width: auto;
	 padding: 30px 5px 0;
	 position: relative;
	 text-align: center;
}
 #solutionsTypes article p {
	 color: #5e727b;
	 margin: 15px 0 20px;
}
 #solutionsTypes button {
	 background: #fff;
	 border: 1px solid #8a9ca5;
	 border-radius: 17px;
	 color: #8a9ca5;
	 display: block;
	 font-size: 18px;
	 height: 34px;
	 line-height: 34px;
	 margin: 20px auto;
	 width: 34px;
}
 #solutionsTypes button.open {
	 background: #8a9ca5;
	 color: #fff;
}
/* ================================================== */
/* Solutions Details */
/* ================================================== */
 #solutionsDetails {
	 background-color: #fff;
	 border-bottom: 2px solid #eff6f9;
	 padding: 0 15px;
	 width: 100%;
}
 #solutionsDetails > div {
	 padding: 30px 15px;
}
 #solutionsDetails p, #solutionsDetails ul {
	 font-size: calc( 22px + (25 - 22) * (100vw - 320px) / (2560 - 320) );
	 margin: 20px 0;
}
 #solutionsDetails ul {
	 margin: 20px 0 30px;
}
 #solutionsDetails ul li {
	 padding: 0 0 0 25px;
	 position: relative;
}
 #solutionsDetails li i {
	 font-size: calc( 16px + (18 - 16) * (100vw - 320px) / (2560 - 320) );
	 line-height: 1.4em;
}
 #solutionsDetails .fa-plus {
	 color: #eb1e4f;
	 left: 0;
	 position: absolute;
	 top: 5px;
}
 #solutionsDetails a {
	 color: #00b2cb;
}
 p.cta, #solutionsDetails p.cta {
	 margin-bottom: 0;
	 text-align: center;
}
 p.cta a {
	 display: inline-block;
	 margin: 20px 15px;
}
/* ================================================== */
/* Testimonials */
/* ================================================== */
 .testimonial {
	 background-color: #eff6f9;
	 padding: 50px 15px;
	 width: 100%;
}
 .testimonial > div {
	 background: #fff;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 margin: 50px auto 0;
	 max-width: 970px;
	 padding: 5px;
}
 .testimonial a.logo {
	 max-height: 268px;
	 max-width: 465px;
	 position: relative;
	 text-align: center;
}
 .testimonial a.logo img {
	 position: absolute;
	 left: 50%;
	 margin: -40px 0 0 -75px;
	 top: 50%;
}
 .testimonial a.logo, .testimonial article {
	 flex: 1 1 445px;
	 min-height: 120px;
	 padding: 0 10px 10px;
}
 .testimonial h3 {
	 color: #363636;
	 font-size: 18px;
	 font-weight: 700;
}
 .testimonial p.pos {
	 color: #00b2cb;
	 font-size: 14px;
	 margin: 5px 0 20px;
}
 .testimonial hr {
	 border: 1px dotted #c9c9c9;
	 height: 1px;
	 line-height: 1px;
}
 .testimonial p.quote {
	 color: #5e727b;
	 font-size: 17px;
	 margin: 20px 0 0;
}
 .testimonial p.quote span {
	 color: #00b2cb;
}
 a.produit.all {
	 background: #fff;
	 border: 1px solid #cccccc;
	 color: #252525;
	 margin: 0 0 20px;
	 text-transform: none;
}
 a.produit.all:hover {
	 background: #252525;
	 color: #fff;
}
/* === Old Employer page === */
 .employerLandingPage .jobboomEffect .testimonial {
	 background: none;
	 padding: 0;
}
 .employerLandingPage .jobboomEffect .testText {
	 background: none;
	 padding: 0;
}
/* ================================================== */
/* Employeurs */
/* ================================================== */
 section#clients {
	 background: #fff;
}
 #clients h2 {
	 color: #363636;
	 font-weight: 400;
	 margin: 20px 0;
	 text-align: center;
}
 #clients h2 em {
	 color: #ee3250;
}
 #slider1 {
	 height: 130px;
	 margin: 0 auto;
	 padding: 0;
	 width: 260px;
}
 #slider1 .overview li {
	 border: 0;
	 height: 130px;
	 margin: 0;
	 padding: 15px 30px;
	 width: 260px;
}
 .employerLandingPage .clients .logos {
	 margin-top: 20px;
}
 .logos a {
	 display: inline-block;
	 margin: 0;
}
/* ================================================== */
/* Footer */
/* ================================================== */


.employerLandingPage .chartwell {
  background-position: 0 0
}

.employerLandingPage .metro {
  background-position: -250px 0
}

.employerLandingPage .ftq {
  background-position: -500px 0
}

.employerLandingPage .rogers {
  background-position: 0 -100px
}

.employerLandingPage .abb {
  background-position: -250px -100px
}

.employerLandingPage .paccar {
  background-position: -500px -100px
}

.employerLandingPage .homeDepot {
  background-position: 0 -200px
}

.employerLandingPage .lifeworks {
  background-position: -250px -200px
}

.employerLandingPage .meritek {
  background-position: -500px -200px
}

.employerLandingPage .fenplast {
  background-position: 0 -300px
}

.employerLandingPage .jobboomEffect {
  background-color: #f9f9f9
}

/* Cookie consent 
 * Global styles overrides, complements of main styles from common-styles.css from JB App
*/

#cookie-consent .cookie-consent-inner > .wrapper > div > .title,
#cookie-consent .cookie-consent-inner > .wrapper > div > h4 {
    margin-bottom: 1rem;
}

#cookie-consent .cookie-consent-inner > .wrapper > div > .title > span,
#cookie-consent .cookie-consent-inner > .wrapper > div > h4 > span {
    vertical-align: middle;
}

#cookie-consent .cookie-consent-inner > .wrapper > div > .title > span + span,
#cookie-consent .cookie-consent-inner > .wrapper > div > h4 > span + span {
    padding-left: .5rem;
}

#cookie-consent a[data-js-cookie-consent-close] {
    font-size: 32px;
    color: #333;
    line-height: 32px;
}