@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
/* ------------------------------------------------
* 1.1. Primary Colors
--------------------------------------------------*/
/* ------------------------------------------------
* 1.2. Secondary Colors
--------------------------------------------------*/
/* ------------------------------------------------
* 1.3. Web-only greys
--------------------------------------------------*/
/* ------------------------------------------------
* 1.4. Colours for graphs and illustrations
--------------------------------------------------*/
/* ------------------------------------------------
* 1.5. Widget Colours
--------------------------------------------------*/
/* ------------------------------------------------
* 2.1. Blue-Grey - Primary Action - buttonType01
--------------------------------------------------*/
/* ------------------------------------------------
* 2.2. Soft-Grey - Action - buttonType02
--------------------------------------------------*/
/* ------------------------------------------------
* 2.3. Green - Call to Action - buttonType03
--------------------------------------------------*/
/* ------------------------------------------------
* 2.4. Links
--------------------------------------------------*/
/* ------------------------------------------------
* 2.5. Input
--------------------------------------------------*/
/* ------------------------------------------------
* 3.1. Definitions of content widths
--------------------------------------------------*/
/* ------------------------------------------------
* 3.2. Definitions of content gutters
--------------------------------------------------*/
/* ------------------------------------------------
* 3.3. Definition of Breakpoints for Media Queries
--------------------------------------------------*/
/* ------------------------------------------------
* 3.4. Definition of grid elements
--------------------------------------------------*/
/* ------------------------------------------------
* 4.1. Prefix for icons
--------------------------------------------------*/
/* ------------------------------------------------
* 4.2. Codes for icons
--------------------------------------------------*/
/* ==========================================================================
   @mixins
   ========================================================================== */
/*
 * Documentation about mixin with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins
 * 
 * ------------------------------------------------------
 * Table of Contents
 * ------------------------------------------------------
 * 
 * 1. Mixins Global
 *    1.1. (V)Align Center for element [align-center($orientation)]
 *    1.2. Text Color for the different state of a link <a>
 *    1.3. Calculation element (percent value and other value like em, pc etc...)
 *    1.4. Alignment placeholder
 *    1.5. Font-Face code generator
 * 
 * 2. Mixins for Media Queries
 *    2.1. Media Queries "min-width" [at-least($device-width)]
 *    2.2. Media Queries "max-width" [until($device-width)]
 *    2.3. Media Queries "max-width" and "min-width" [for-device($device)]
 *    2.4. Media Queries retina devices
 *    2.5. Media Queries "min-width" [from-device($device-width)]
 * 
 * 3. Mixins for Print
 *    3.1. Media Queries for Print [print($value)]
 *    3.2. Shortcut for hidde Element only for Print [no-print]
 * 
 * 4. Mixins for Grid
 * 
 * 5. Mixins for Animation
 *    5.1. Keyframes
 * 
 * 6. Mixins for Icon Font
 *    6.1. Icon After
 * 
 */
/* -------------------------------------------------------------
   * 1.1. (V)Align Center for element [align-center($orientation)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 1.2. Text Color for the different state of a link <a>
   ---------------------------------------------------------------*/
/* ---------------------------------------------------------------------------
   * 1.3. Calculation element (percent value and other value like em, pc etc...)
   -----------------------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 1.4. Alignment placeholder
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 1.5. Font-Face code generator
   ---------------------------------------------------------------*/
/* 
    * -------------------------------------------
    * Example the code taht we use:
    * -------------------------------------------
     
      @include font-face-belfius('BelfiusNormalLight', 
          'belfiusnormal_light.woff',
          'belfiusnormal_light.ttf',
          'belfiusnormal_light.svg', 
          'belfiusnormal_regular.eot',
         normal, normal
      );
    
    ---------------------------------------------
    */
/* -------------------------------------------------------------
   * 2.1. Media Queries "min-width" [at-least($device-width)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.2. Media Queries "max-width" [until($device-width)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.3. Media Queries "max-width" and "min-width" 
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.4. Media Queries retina devices 
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 2.5. Media Queries "min-width" [from-device($device-width)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 3.1. Media Queries for Print [print($value)]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 3.2. Shortcut for hidde Element only for Print [no-print]
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 5.1. Keyframes
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 5.2. Single-Animation
   ---------------------------------------------------------------*/
/* -------------------------------------------------------------
   * 6.1. Icon After
   ---------------------------------------------------------------*/
/* ==========================================================================
   @functions
   ========================================================================== */
/*
 * Documentation about function with SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives
 * 
 * ------------------------------------------------------
 * Table of Contents
 * ------------------------------------------------------
 * 
 * 1. Grid Column(s) Size
 *    
 * 
 */
.jobItem .jobHeader .jobName .jobTitlePanel::before {
  font-family: 'BelfiusIconFont';
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* ------------------------------------------------
 * 2.1. Container Base
 --------------------------------------------------*/
/* ------------------------------------------------
 * 2.2. Container Base Spaced Mobile
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.1. Column 1on2 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.2. Column 1on3 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.3. Column 2on3 
 --------------------------------------------------*/
.detailBanner {
  background: url("Images/") no-repeat; }

.jobItem {
  /*padding: 10px;*/ }
  .jobItem .jobHeader {
    position: relative;
    cursor: pointer;
    overflow: hidden; }
    .jobItem .jobHeader .jobName {
      margin-right: 75px;
      /*h3 {*/ }
      .jobItem .jobHeader .jobName .jobTitlePanel {
        color: #7b736d;
        padding-left: 20px; }
        .jobItem .jobHeader .jobName .jobTitlePanel::before {
          content: "";
          position: absolute;
          top: 1px;
          left: 0px;
          margin-top: 16px;
          font-size: 16px;
          color: #7b736d;
          cursor: pointer; }
        .jobItem .jobHeader .jobName .jobTitlePanel.belfius-icon-chevron-circle-down::before {
          content: "";
          color: #d1184d; }
        .jobItem .jobHeader .jobName .jobTitlePanel span {
          color: #435c6b;
          text-transform: capitalize; }
    .jobItem .jobHeader .applyJob {
      float: right; }
  .jobItem .jobContent h1, .jobItem .jobContent h2, .jobItem .jobContent h3, .jobItem .jobContent h4 {
    margin-bottom: 10px; }
  .jobItem .jobContent .jobContentItem {
    margin-top: 10px; }

a.btnSend_Register {
  margin-bottom: 20px; }

a.detailJobs {
  text-decoration: none; }

.alternate {
  background-color: #f5f3f0; }

.Table {
  display: table; }

.Row {
  display: table-row; }

.Cell {
  display: table-cell;
  padding-right: 5px;
  font-size: 12px; }
  .Cell.tip {
    color: #93bf3e;
    font-weight: 700; }

.box {
  padding: 20px;
  border: 1px solid #c3bbaf;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin: 20px 0 40px 0;
  overflow: hidden; }

.belfius-icon-chevron-circle-right::before {
  position: absolute;
  left: 0; }

.belfius-icon-chevron-circle-down::before {
  position: absolute;
  left: 0; }

.reference {
  margin-bottom: 20px; }

.right {
  float: right; }

.txtFileName {
  font-size: 18px;
  margin-left: 10px; }

.middleSizeFont {
  font-size: 16px; }

.input-validation-error + a.upload-button {
  border: 1px solid red; }

input[type="file"] {
  position: absolute;
  left: -9999px; }

.cv-file-button-error {
  border: #eb0016 solid 1px !important; }

.ruby-red {
  color: #d1184d; }

a.buttonType03, .buttonType03 {
  background: #d1184d; }

a.buttonType03:hover, .buttonType03:hover {
  background: #d1184d; }

a.buttonType03.disabled:hover, .buttonType03.disabled:hover {
  background: #e3dcd3;
  cursor: not-allowed; }

#ERecruitment #frmContactForm {
  margin-bottom: 40px; }

#ERecruitment .labelDisclamerDetails {
  font-style: italic; }

form fieldset > legend {
  font-size: 22px;
  line-height: 30px;
  color: #d1184d; }

h2 {
  margin-bottom: 0.83em;
  font-size: 21px;
  line-height: 24px; }

/* Detail page rebranding */
/* Page */
.jobDetail {
  margin: auto;
  position: relative;
  font-family: 'Montserrat', Arial, sans-serif;
  max-width: 1126px;
  /* Navigation bar */
  /* Banner */
  /* Content */
  /* Job Description */
  /* Company description banner */
  /* Apply */ }
  .jobDetail strong {
    color: #d1184d;
    font-weight: normal; }
  .jobDetail h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: normal;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    line-height: normal; }
    @media only screen and (max-width: 767px) {
      .jobDetail h1 {
        font-size: 4.5vw; } }
    @media only screen and (min-width: 767px) {
      .jobDetail h1 {
        font-size: 3vw; } }
    @media only screen and (min-width: 1126px) {
      .jobDetail h1 {
        font-size: 2em; } }
  @media only screen and (max-width: 767px) {
    .jobDetail div {
      font-size: 12px; } }
  .jobDetail ul {
    margin-block-start: 1em;
    margin-block-end: 1em; }
    @media only screen and (max-width: 767px) {
      .jobDetail ul {
        font-size: 12px; } }
  .jobDetail p {
    margin-block-start: 1em;
    margin-block-end: 1em; }
    @media only screen and (max-width: 767px) {
      .jobDetail p {
        font-size: 12px; } }
  .jobDetail .highlight .coloredText {
    color: #d1184d; }
  .jobDetail .arrowBullet {
    position: relative; }
    .jobDetail .arrowBullet:before {
      font-family: "BelfiusIconFont";
      content: "\E621";
      position: absolute;
      top: 0px;
      left: -15px;
      font-size: 12px;
      line-height: 20px;
      color: #d1184d; }
  .jobDetail .navigation {
    box-shadow: 0px 0px 2px LightGrey;
    background-color: white;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; }
    @media only screen and (max-width: 767px) {
      .jobDetail .navigation {
        width: 90%;
        font-size: 12px;
        height: 50px; } }
    @media only screen and (min-width: 767px) {
      .jobDetail .navigation {
        width: 60%;
        height: 100px; } }
    .jobDetail .navigation a {
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: bold;
      text-decoration: none;
      color: black;
      height: 50%;
      margin: auto;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .jobDetail .navigation a {
          line-height: 25px;
          font-size: 2.4vw; } }
      @media only screen and (min-width: 767px) {
        .jobDetail .navigation a {
          line-height: 50px;
          font-size: 1.6vw; } }
      @media only screen and (min-width: 1126px) {
        .jobDetail .navigation a {
          font-size: 16px; } }
    .jobDetail .navigation .flex1 {
      flex: 1; }
    .jobDetail .navigation .navigationMiddle {
      border-right: 1px solid grey;
      border-left: 1px solid grey;
      flex: 1.5; }
  .jobDetail .banner {
    text-align: center;
    position: relative;
    display: inline-block;
    z-index: -1; }
    .jobDetail .banner img {
      margin-top: 35px;
      max-width: 100%; }
  .jobDetail .bannerJobTitle {
    position: absolute;
    z-index: 1;
    text-align: left;
    left: 85px;
    width: 60%;
    top: 30%; }
    @media only screen and (max-width: 767px) {
      .jobDetail .bannerJobTitle {
        left: 30px;
        top: 20%; } }
    .jobDetail .bannerJobTitle h1 {
      font-family: 'Montserrat', Arial, sans-serif;
      color: white; }
      @media only screen and (max-width: 767px) {
        .jobDetail .bannerJobTitle h1 {
          margin: 0px; } }
  .jobDetail .bannerText .topRightNav {
    float: right;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      .jobDetail .bannerText .topRightNav {
        width: 100%;
        margin: 10px 0px 10px 0px; } }
    @media only screen and (min-width: 767px) {
      .jobDetail .bannerText .topRightNav {
        flex-direction: column;
        transform: translateY(-40px); }
        .jobDetail .bannerText .topRightNav .socialLinksContainer {
          margin-bottom: 20px; } }
    .jobDetail .bannerText .topRightNav .socialLinksContainer {
      display: flex;
      flex: 1;
      width: 100%; }
    .jobDetail .bannerText .topRightNav .social_links {
      height: 25px;
      width: 25px;
      background: grey;
      display: inline-block;
      text-decoration: none;
      flex: 1;
      margin-left: 5px; }
    .jobDetail .bannerText .topRightNav #tweeter_link {
      -webkit-mask: url("Images/twitter3.png") center/contain;
      mask: url("Images/twitter3.png") center/contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat; }
    .jobDetail .bannerText .topRightNav #facebook_link {
      -webkit-mask: url("Images/facebook3.png") center/contain;
      mask: url("Images/twitter3.png") center/contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat; }
    .jobDetail .bannerText .topRightNav #linkedin_link {
      -webkit-mask: url("Images/linkedin3.png") center/contain;
      mask: url("Images/twitter3.png") center/contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat; }
    .jobDetail .bannerText .topRightNav #mail_link {
      -webkit-mask: url("Images/email3.png") center/contain;
      mask: url("Images/email3.png") center/contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat; }
    .jobDetail .bannerText .topRightNav a {
      flex: 1; }
  .jobDetail .jobContent {
    background-image: url("Images/detail-text-bg.png");
    max-width: 100%;
    margin-top: -22%; }
    .jobDetail .jobContent h1 {
      color: #d1184d;
      font-family: 'Montserrat' Arial, sans-serif; }
  .jobDetail .contextText {
    text-align: left; }
    @media only screen and (min-width: 767px) {
      .jobDetail .contextText {
        padding: 0px 85px 0px 85px; } }
    @media only screen and (max-width: 767px) {
      .jobDetail .contextText {
        padding: 0px 30px 0px 30px; } }
  .jobDetail .jobDescriptionTitle {
    margin-bottom: 30px; }
    .jobDetail .jobDescriptionTitle h1 {
      display: inline; }
  .jobDetail .gridListText ul {
    columns: 2;
    list-style-position: outside;
    list-style: none;
    padding: 0px; }
  @media only screen and (max-width: 767px) {
    .jobDetail .gridListText ul {
      columns: 1; } }
  .jobDetail .gridListText li {
    position: relative;
    margin: 0px 0px 10px 15px;
    padding: 0px;
    font-size: 12px;
    line-height: 20px; }
    @media only screen and (min-width: 767px) {
      .jobDetail .gridListText li {
        font-size: 14px; } }
    .jobDetail .gridListText li:before {
      font-family: "BelfiusIconFont";
      content: "\E621";
      position: absolute;
      top: 0px;
      left: -15px;
      font-size: 10px;
      line-height: 20px;
      color: #d1184d; }
      @media only screen and (min-width: 767px) {
        .jobDetail .gridListText li:before {
          font-size: 12px; } }
  .jobDetail .companyDescriptionBanner {
    position: relative;
    text-align: center;
    max-width: 100%; }
    .jobDetail .companyDescriptionBanner h1 {
      max-width: 40%;
      color: white;
      line-height: normal;
      font-size: 2.8vw;
      margin-left: 3vw; }
      @media only screen and (min-width: 767px) and (max-width: 1126px) {
        .jobDetail .companyDescriptionBanner h1 {
          font-size: 2.2vw; } }
      @media only screen and (min-width: 1126px) {
        .jobDetail .companyDescriptionBanner h1 {
          font-size: 1.66em;
          margin-left: 4%; } }
    @media only screen and (max-width: 767px) {
      .jobDetail .companyDescriptionBanner img {
        max-width: 80%; } }
    @media only screen and (min-width: 767px) {
      .jobDetail .companyDescriptionBanner img {
        max-width: 63%; } }
  .jobDetail .companyDescriptionBackground {
    z-index: -1; }
  .jobDetail .companyDescriptionText {
    position: absolute;
    z-index: 2;
    top: 40%;
    transform: translate(-50%, -50%);
    left: 50%;
    text-align: center;
    width: 550px; }
  .jobDetail .companyDescriptionContent {
    position: relative;
    text-align: left; }
    @media only screen and (min-width: 767px) {
      .jobDetail .companyDescriptionContent #companyDescriptionText {
        width: 49%;
        display: inline-block; }
      .jobDetail .companyDescriptionContent #companyDescriptionList {
        display: inline-block;
        width: 49%;
        vertical-align: top; } }
    .jobDetail .companyDescriptionContent ul {
      list-style: none; }
      .jobDetail .companyDescriptionContent ul li {
        position: relative;
        margin: 0px 0px 10px 15px;
        padding: 0px;
        font-size: 14px;
        line-height: 20px; }
        .jobDetail .companyDescriptionContent ul li:before {
          font-family: "BelfiusIconFont";
          content: "\E621";
          position: absolute;
          top: 0px;
          left: -15px;
          font-size: 12px;
          line-height: 20px;
          color: #d1184d; }
  .jobDetail .contactContent {
    display: flex; }
    .jobDetail .contactContent a {
      max-width: 90%; }
    .jobDetail .contactContent p {
      margin: 0px; }
  .jobDetail .contactContentCell {
    flex: 1;
    margin-block-start: 1em;
    margin-block-end: 1em; }
  .jobDetail .applyButton {
    background-color: #c30045;
    background-image: linear-gradient(180deg, #8c193c, #c30045 95%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    text-decoration: none;
    border-radius: 100px;
    color: white;
    width: 200px;
    float: right;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 18px;
    padding: 9px 0px 9px 0px; }
    .jobDetail .applyButton:hover {
      background: #d54d7d; }