/* ------------------------------------------------
* 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
 *    
 * 
 */
/* ------------------------------------------------
 * 2.1. Container Base
 --------------------------------------------------*/
section#webdev-container {
  width: 1152px;
  margin: 0 auto 24px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  @media only screen and (max-width: 1199px) {
    section#webdev-container {
      width: -webkit-calc(100% - (2 * 24px));
      width: -moz-calc(100% - (2 * 24px));
      width: -ms-calc(100% - (2 * 24px));
      width: -o-calc(100% - (2 * 24px));
      width: calc(100% - (2 * 24px)); } }
  @media only screen and (max-width: 1007px) {
    section#webdev-container {
      width: -webkit-calc(100% - (2 * 34px));
      width: -moz-calc(100% - (2 * 34px));
      width: -ms-calc(100% - (2 * 34px));
      width: -o-calc(100% - (2 * 34px));
      width: calc(100% - (2 * 34px));
      margin: 0px auto 36px auto; } }
  @media only screen and (max-width: 767px) {
    section#webdev-container {
      width: 100%;
      padding-left: 15px;
      padding-right: 15px; } }

/* ------------------------------------------------
 * 2.2. Container Base Spaced Mobile
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.1. Column 1on2 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.2. Column 1on3 
 --------------------------------------------------*/
/* ------------------------------------------------
 * 3.3. Column 2on3 
 --------------------------------------------------*/
section#webdev-container h2 {
  margin-bottom: 0.83em;
  font-size: 21px;
  line-height: 24px; }

section#webdev-container article.contentBox.col1on2 {
  margin-left: 0;
  margin-right: 0; }
  section#webdev-container article.contentBox.col1on2.firstChild a.button.cta {
    max-width: 100%;
    min-width: 49%;
    text-align: center; }
    @media only screen and (max-width: 569px) {
      section#webdev-container article.contentBox.col1on2.firstChild a.button.cta {
        width: 100%; } }
    @media only screen and (min-width: 768px) {
      section#webdev-container article.contentBox.col1on2.firstChild a.button.cta {
        width: 100%; } }
    @media only screen and (min-width: 1200px) {
      section#webdev-container article.contentBox.col1on2.firstChild a.button.cta {
        width: 49%; } }
  @media only screen and (min-width: 768px) {
    section#webdev-container article.contentBox.col1on2.firstChild {
      margin-left: 0;
      margin-right: 24px; } }
  section#webdev-container article.contentBox.col1on2.map > img {
    width: 100%; }

section#webdev-container div.tableWrapper {
  clear: both; }

div#meta-data {
  display: none; }

body.iws-logged-on .logged-on {
  display: inline-block; }

body.iws-logged-on .logged-off {
  display: none; }

body.iws-logged-off .logged-on {
  display: none; }

body.iws-logged-off .logged-off {
  display: inline-block; }

body a.booking-clarification-link {
  display: block;
  margin: 5px;
  color: #435c6b; }