@charset "UTF-8";
/* ------------------------------------------------
* 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. Ruby - 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
 *    
 * 
 */
.agencyLocator .officeItem .officeHeader .officeName h3::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 
 --------------------------------------------------*/
/* ------------------------------------------------------
 * Table of Contents
 * ------------------------------------------------------
 * 
 * 1. Configurations/Variables
 *
 * 2. Placeholder(s)
 *
 * 3. Agency Locator
 *		3.1. Main Map (Google API)
 *     
 */
.agencyLocator {
  font-family: Arial, sans-serif;
  line-height: 20px;
  color: #435c6b;
  position: relative;
  /* ------------------------------------------------
     * 3.1. Main Map (Google API)
     --------------------------------------------------*/ }
  .agencyLocator h2 {
    margin-bottom: 0.83em;
    font-size: 21px;
    line-height: 24px; }
  .agencyLocator .map {
    overflow: auto;
    position: fixed;
    width: -webkit-calc(100% - 300px);
    width: -moz-calc(100% - 300px);
    width: -ms-calc(100% - 300px);
    width: -o-calc(100% - 300px);
    width: calc(100% - 300px);
    height: 600px;
    top: 0;
    left: 300px;
    right: 0;
    bottom: 0;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    z-index: 10; }
  .agencyLocator #markerMap {
    position: absolute;
    width: 300px;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #c3bbaf;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-scrollbar-face-color: #E3DCD3;
    scrollbar-face-color: #E3DCD3;
    -ms-scrollbar-3dlight-color: #E3DCD3;
    scrollbar-3dlight-color: #E3DCD3;
    -ms-scrollbar-base-color: #E3DCD3;
    scrollbar-base-color: #E3DCD3;
    -ms-scrollbar-track-color: #E3DCD3;
    scrollbar-track-color: #E3DCD3;
    -ms-scrollbar-darkshadow-color: #000;
    scrollbar-darkshadow-color: #000;
    -ms-scrollbar-arrow-color: #000;
    scrollbar-arrow-color: #000;
    -ms-scrollbar-shadow-color: #fff;
    scrollbar-shadow-color: #fff;
    -ms-scrollbar-highlight-color: #fff;
    scrollbar-highlight-color: #fff;
    z-index: 10; }
    .agencyLocator #markerMap .spinner {
      text-align: center;
      margin: 15px; }
    .agencyLocator #markerMap.loaded > .spinner {
      display: none; }
  .agencyLocator #markerMapContainer {
    position: relative;
    width: 100%;
    height: 100%; }
  .agencyLocator #hoverLayer {
    position: absolute;
    padding-bottom: 0; }
  .agencyLocator #searchControl {
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
    z-index: 11;
    position: relative; }
    .agencyLocator #searchControl > * {
      margin-top: 0;
      padding-top: 0; }
    .agencyLocator #searchControl > .input-group {
      padding-right: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%; }
      @media only screen and (max-width: 1199px) {
        .agencyLocator #searchControl > .input-group {
          width: 100%; } }
    .agencyLocator #searchControl > .button {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 16.66667% !important;
      float: right; }
      @media only screen and (max-width: 1199px) {
        .agencyLocator #searchControl > .button {
          width: 25% !important; } }
  .agencyLocator .input-group-button {
    background-color: #fff; }
  .agencyLocator .officeItem {
    padding: 10px; }
    .agencyLocator .officeItem .officeHeader {
      position: relative;
      cursor: pointer;
      overflow: hidden; }
      .agencyLocator .officeItem .officeHeader .officeName {
        margin-right: 75px; }
        .agencyLocator .officeItem .officeHeader .officeName h3 {
          color: #7b736d;
          padding-left: 20px;
          margin: 0; }
          .agencyLocator .officeItem .officeHeader .officeName h3::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 0px;
            font-size: 16px;
            color: #7b736d;
            cursor: pointer; }
          .agencyLocator .officeItem .officeHeader .officeName h3.belfius-icon-chevron-circle-down::before {
            content: "";
            color: #d1184d; }
          .agencyLocator .officeItem .officeHeader .officeName h3 span {
            color: #435c6b;
            text-transform: capitalize; }
      .agencyLocator .officeItem .officeHeader .officeMap {
        float: right;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }
        .agencyLocator .officeItem .officeHeader .officeMap .img-thumbnail {
          padding: 0;
          border-radius: 0;
          border: 1px solid #7b736d;
          display: inline-block;
          max-width: 100%;
          height: auto;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box; }
        .agencyLocator .officeItem .officeHeader .officeMap .distance {
          font-weight: bold;
          position: absolute;
          bottom: 1px;
          left: 1px;
          width: -webkit-calc(100% - 2px);
          width: -moz-calc(100% - 2px);
          width: -ms-calc(100% - 2px);
          width: -o-calc(100% - 2px);
          width: calc(100% - 2px);
          font-size: 12px;
          text-align: right;
          background-color: rgba(255, 255, 255, 0.8);
          padding: 3px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box; }
    .agencyLocator .officeItem .officeContent .button {
      text-align: center;
      border-radius: 20px;
      margin: 5px 0 10px 0; }
      @media only screen and (min-width: 768px) {
        .agencyLocator .officeItem .officeContent .button {
          width: 100%; } }
      @media only screen and (max-width: 767px) {
        .agencyLocator .officeItem .officeContent .button {
          min-width: 100%;
          max-width: 105%; } }
      .agencyLocator .officeItem .officeContent .button:nth-child(odd):not(:last-child) {
        margin-right: 5px; }
    .agencyLocator .officeItem .officeContent .tabbedPane,
    .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs,
    .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs.ui-widget.ui-widget-content {
      margin-top: 5px; }
      .agencyLocator .officeItem .officeContent .tabbedPane > div,
      .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs > div,
      .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs.ui-widget.ui-widget-content > div {
        padding: 15px; }
      .agencyLocator .officeItem .officeContent .tabbedPane .attentionBox--no-icon,
      .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs .attentionBox--no-icon,
      .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs.ui-widget.ui-widget-content .attentionBox--no-icon {
        padding: 0px 15px; }
        .agencyLocator .officeItem .officeContent .tabbedPane .attentionBox--no-icon:before,
        .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs .attentionBox--no-icon:before,
        .agencyLocator .officeItem .officeContent .tabbedPane.ui-tabs.ui-widget.ui-widget-content .attentionBox--no-icon:before {
          display: none; }
    .agencyLocator .officeItem .officeContent .informationBox,
    .agencyLocator .officeItem .officeContent .validBox {
      border: 0;
      background-color: transparent; }
      .agencyLocator .officeItem .officeContent .informationBox h2,
      .agencyLocator .officeItem .officeContent .validBox h2 {
        font-size: 14px;
        color: #93bf3e;
        line-height: normal; }
    .agencyLocator .officeItem .officeContent .attentionBox {
      border: 0;
      background-color: transparent;
      margin-bottom: 0px;
      padding: 0px 20px 0px 75px; }
      .agencyLocator .officeItem .officeContent .attentionBox h2 {
        font-size: 14px;
        color: #93bf3e;
        line-height: normal; }
    .agencyLocator .officeItem .officeContent .phone {
      color: #435c6b; }
    .agencyLocator .officeItem .officeContent .fax, .agencyLocator .officeItem .officeContent .fax a {
      color: #c3bbaf; }
    .agencyLocator .officeItem .officeContent .wifi {
      color: #d1184d; }
    .agencyLocator .officeItem .officeContent .street {
      text-transform: capitalize; }
    .agencyLocator .officeItem .officeContent .tip {
      color: #d1184d;
      font-weight: 700; }
  @media only screen and (min-width: 768px) {
    .agencyLocator:not(.booking-in-cluster) .officeItem .officeContent .button.miniAppointment {
      height: 44px;
      white-space: pre-line;
      border-radius: 22px;
      padding-top: 3px;
      line-height: 1.3; } }
  .agencyLocator .alternate {
    background-color: #f5f3f0; }
  .agencyLocator .Table {
    display: table; }
  .agencyLocator .Row {
    display: table-row; }
  .agencyLocator .Cell {
    display: table-cell;
    padding-right: 5px;
    font-size: 12px; }
    .agencyLocator .Cell.tip {
      color: #d1184d;
      font-weight: 700; }
  .agencyLocator .mobileInVisible {
    display: block; }
  .agencyLocator .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; }
  .agencyLocator #legend {
    position: absolute;
    bottom: 40px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #c3bbaf;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    z-index: 10;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 320px; }
    .agencyLocator #legend ol {
      margin: 0; }
      .agencyLocator #legend ol li {
        height: 32px;
        line-height: 38px; }
        .agencyLocator #legend ol li img {
          float: left; }
  .agencyLocator .belfius-icon-chevron-circle-right::before {
    position: absolute;
    left: 0; }
  .agencyLocator .belfius-icon-chevron-circle-down::before {
    position: absolute;
    left: 0; }
  .agencyLocator .attentionBox:before {
    top: 10px; }
  .agencyLocator a.booking-clarification-link {
    display: block;
    margin: 8px 0;
    text-decoration: underline; }
  .agencyLocator h3 {
    font-size: 18px;
    font-weight: 400;
    font-family: BelfiusAlternativeBold, Arial, sans-serif;
    font-size: 18px; }

.booking-in-cluster--backbtn {
  cursor: pointer;
  text-decoration: underline; }

@media only screen and (max-width: 767px) {
  .booking-in-cluster--infoblock {
    padding-top: 90px; } }

@media only screen and (min-width: 768px) {
  .booking-in-cluster--infoblock {
    top: 0;
    position: absolute;
    display: flex;
    flex-flow: column;
    width: 35vw;
    width: -webkit-calc(max(35vw, 400px));
    width: -moz-calc(max(35vw, 400px));
    width: -ms-calc(max(35vw, 400px));
    width: -o-calc(max(35vw, 400px));
    width: calc(max(35vw, 400px));
    height: -webkit-calc(202px - 4vw);
    height: -moz-calc(202px - 4vw);
    height: -ms-calc(202px - 4vw);
    height: -o-calc(202px - 4vw);
    height: calc(202px - 4vw);
    height: -webkit-calc(max(100px, 202px - 4vw));
    height: -moz-calc(max(100px, 202px - 4vw));
    height: -ms-calc(max(100px, 202px - 4vw));
    height: -o-calc(max(100px, 202px - 4vw));
    height: calc(max(100px, 202px - 4vw)); } }

.booking-in-cluster--infoblock > * {
  margin: 0 10px; }

.booking-in-cluster--title h3 {
  margin: 10px 0; }

@media only screen and (min-width: 768px) {
  .booking-in-cluster--title {
    align-items: center;
    display: flex;
    flex: 1 1 auto; }
    .booking-in-cluster--title h3 {
      margin: 0; } }

.booking-in-cluster--warning {
  border-radius: 7px;
  background-color: #E2DCD4;
  color: #7A736E;
  font-size: 11.8px;
  line-height: 20px;
  padding: 5px 7px;
  flex: 0 1 auto; }
  .booking-in-cluster--warning b, .booking-in-cluster--warning strong {
    color: #CD2050; }
  @media only screen and (min-width: 768px) {
    .booking-in-cluster--warning {
      margin-top: 10px; } }

@media only screen and (min-width: 768px) {
  .booking-in-cluster #markerMap {
    top: -webkit-calc(202px - 4vw);
    top: -moz-calc(202px - 4vw);
    top: -ms-calc(202px - 4vw);
    top: -o-calc(202px - 4vw);
    top: calc(202px - 4vw);
    top: -webkit-calc(max(100px, 202px - 4vw));
    top: -moz-calc(max(100px, 202px - 4vw));
    top: -ms-calc(max(100px, 202px - 4vw));
    top: -o-calc(max(100px, 202px - 4vw));
    top: calc(max(100px, 202px - 4vw));
    height: -webkit-calc(100% - calc(202px - 4vw));
    height: -moz-calc(100% - calc(202px - 4vw));
    height: -ms-calc(100% - calc(202px - 4vw));
    height: -o-calc(100% - calc(202px - 4vw));
    height: calc(100% - calc(202px - 4vw));
    height: -webkit-calc(100% - calc(max(100px, 202px - 4vw)));
    height: -moz-calc(100% - calc(max(100px, 202px - 4vw)));
    height: -ms-calc(100% - calc(max(100px, 202px - 4vw)));
    height: -o-calc(100% - calc(max(100px, 202px - 4vw)));
    height: calc(100% - calc(max(100px, 202px - 4vw)));
    width: 35vw;
    width: -webkit-calc(max(35vw, 400px));
    width: -moz-calc(max(35vw, 400px));
    width: -ms-calc(max(35vw, 400px));
    width: -o-calc(max(35vw, 400px));
    width: calc(max(35vw, 400px)); }
  .booking-in-cluster .map {
    width: -webkit-calc(100% - 35vw);
    width: -moz-calc(100% - 35vw);
    width: -ms-calc(100% - 35vw);
    width: -o-calc(100% - 35vw);
    width: calc(100% - 35vw);
    width: -webkit-calc(100% - calc(max(35vw, 400px)));
    width: -moz-calc(100% - calc(max(35vw, 400px)));
    width: -ms-calc(100% - calc(max(35vw, 400px)));
    width: -o-calc(100% - calc(max(35vw, 400px)));
    width: calc(100% - calc(max(35vw, 400px)));
    left: 35vw;
    left: -webkit-calc(max(35vw, 400px));
    left: -moz-calc(max(35vw, 400px));
    left: -ms-calc(max(35vw, 400px));
    left: -o-calc(max(35vw, 400px));
    left: calc(max(35vw, 400px)); } }

@media only screen and (min-width: 768px) and (min-width: 1750px) {
  .booking-in-cluster .officeItem .officeContent .button {
    width: calc(50% - 5px); } }

@media only screen and (min-width: 768px) and (min-width: 2500px) {
  .booking-in-cluster .officeItem .officeContent .button {
    width: 350px; } }

@media only screen and (min-width: 768px) {
  .mobileVisible {
    display: none !important; } }

@media only screen and (max-width: 767px) {
  .mobileInVisible {
    display: none !important; }
  .agencyLocator {
    /*padding: {
                right: $mobile-gutter;
                left: $mobile-gutter;
            }*/ }
    .agencyLocator .map {
      width: 100%; }
    .agencyLocator #hoverLayer {
      position: initial; }
    .agencyLocator .mobileVisible {
      display: block;
      margin-bottom: 10px;
      overflow: hidden; }
      .agencyLocator .mobileVisible h2 {
        margin-bottom: 5px; }
      .agencyLocator .mobileVisible input[type=text] {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }
      .agencyLocator .mobileVisible .button {
        float: right;
        overflow: hidden;
        width: 50px;
        padding-left: 0;
        padding-right: 0;
        text-align: center; }
        .agencyLocator .mobileVisible .button::before {
          display: block;
          text-align: center;
          width: 100%;
          line-height: 50px; }
    .agencyLocator #markerMap {
      width: 100%;
      height: 100%;
      height: inherit;
      position: static;
      overflow-y: visible; }
    .agencyLocator #markerMapContainer {
      position: relative;
      width: initial;
      height: initial; }
    .agencyLocator #map {
      height: 350px;
      left: 0; }
    .agencyLocator #legend {
      position: absolute;
      top: 52px;
      right: 0;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.9);
      border-top: 0;
      border-right: 0;
      border-bottom: 1px solid #c3bbaf;
      border-left: 0;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      -ms-border-radius: 0px;
      -o-border-radius: 0px;
      border-radius: 0px;
      padding: 5px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      max-width: 100%; }
      .agencyLocator #legend ol li {
        float: left;
        height: 32px;
        line-height: 38px;
        width: 50%;
        padding: 0; }
        .agencyLocator #legend ol li img {
          float: left; }
    .agencyLocator.booking-in-cluster #legend {
      top: 0; } }