@charset "UTF-8";

/* ==========================================================================
   Config settings
   @mixin ========================================================================= */

/**
 * Define grid columns
 *
 * The inner grid is the section where the content is
 * The outer grid is the inner grid with extra margin columns on each side
 */

/**
 * Define breakpoint for given formats
 */

/* Bourbon 4.0.2
 * http://bourbon.io
 * Copyright 2011-2014 thoughtbot, inc.
 * MIT License */

/* ==========================================================================
   Font related functions
   @mixin ========================================================================= */

/**
 * Add some functions for readability
 * Return font-weight based on name
 */

/* ==========================================================================
  Functions used in grid calculation
  @mixin ========================================================================= */

/**
  * This is where the magic happens
  * Return percentage based on amount of columns
  * Use parent column size to adjust the origin
  */

/**
  * Default function for columns
  * Return as percentage
  */

/**
  * Return as viewport width
  */

/* ==========================================================================
   Basic style settings
   @mixin ========================================================================= */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*
 * Set up the body
 *
 * 1. This is the base for al rem units
 */

html {
  font-size: 18px;
  line-height: 1.6;
}

/**
 * 1.Default display for images is block to lose the extra margin below the image
 * 2. Remove border / especially on older browsers
 */

img {
  display: block;
  border: none;
}

/**
  * Add translation to prevent recoloring from autocomplete
  */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  -webkit-transition: all 9999s linear 9999s;
  transition: all 9999s linear 9999s;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  -webkit-transition: all 9999s linear 9999s;
  transition: all 9999s linear 9999s;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  -webkit-transition: all 9999s linear 9999s;
  transition: all 9999s linear 9999s;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  -webkit-transition: all 9999s linear 9999s;
  transition: all 9999s linear 9999s;
}

/*
 * Remove default margin around figure
 */

figure {
  margin: 0;
}

/*==========================================================================
  Grid
  @mixin ========================================================================= */

/**
  * Grid row
  *
  * 1. The outer two columns are just margin
  * 2. Prevent inline-block cells wrapping
  * 3. Prevent vertical spacing between inline-blocks
  */

.grid-row {
  width: 85.71428571%;
  max-width: 1440px;
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  /**
   * The full row doesn't have the two outer margin rows
   * They stretch till both ends of the window
   */
}

.grid-row.full-row {
  width: 100%;
  max-width: none;
}

/**
 * Grid column
 *
 * 1. Reset white-space inherited from `.grid`
 * 2. Reset font-size inherited from `.grid`
 * 3. Reset line-height inherited from `.grid`
 */

.grid-col {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: normal;
  font-size: 1rem;
  line-height: 1.6;
  /**
   * Center column
   *
   * 1. 'inline-block' doesn't center with margin '0 auto'
   */
}

.grid-col.center {
  display: block;
  margin: 0 auto;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-1,
.col-lg-1 {
  width: 8.33333333%;
}

.full-row .col-1,
.full-row .col-lg-1 {
  width: 7.14285714%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-1,
.offset-lg-1 {
  margin-left: 8.33333333%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-2,
.col-lg-2 {
  width: 16.66666667%;
}

.full-row .col-2,
.full-row .col-lg-2 {
  width: 14.28571429%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-2,
.offset-lg-2 {
  margin-left: 16.66666667%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-3,
.col-lg-3 {
  width: 25%;
}

.full-row .col-3,
.full-row .col-lg-3 {
  width: 21.42857143%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-3,
.offset-lg-3 {
  margin-left: 25%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-4,
.col-lg-4 {
  width: 33.33333333%;
}

.full-row .col-4,
.full-row .col-lg-4 {
  width: 28.57142857%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-4,
.offset-lg-4 {
  margin-left: 33.33333333%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-5,
.col-lg-5 {
  width: 41.66666667%;
}

.full-row .col-5,
.full-row .col-lg-5 {
  width: 35.71428571%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-5,
.offset-lg-5 {
  margin-left: 41.66666667%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-6,
.col-lg-6 {
  width: 50%;
}

.full-row .col-6,
.full-row .col-lg-6 {
  width: 42.85714286%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-6,
.offset-lg-6 {
  margin-left: 50%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-7,
.col-lg-7 {
  width: 58.33333333%;
}

.full-row .col-7,
.full-row .col-lg-7 {
  width: 50%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-7,
.offset-lg-7 {
  margin-left: 58.33333333%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-8,
.col-lg-8 {
  width: 66.66666667%;
}

.full-row .col-8,
.full-row .col-lg-8 {
  width: 57.14285714%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-8,
.offset-lg-8 {
  margin-left: 66.66666667%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-9,
.col-lg-9 {
  width: 75%;
}

.full-row .col-9,
.full-row .col-lg-9 {
  width: 64.28571429%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-9,
.offset-lg-9 {
  margin-left: 75%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-10,
.col-lg-10 {
  width: 83.33333333%;
}

.full-row .col-10,
.full-row .col-lg-10 {
  width: 71.42857143%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-10,
.offset-lg-10 {
  margin-left: 83.33333333%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-11,
.col-lg-11 {
  width: 91.66666667%;
}

.full-row .col-11,
.full-row .col-lg-11 {
  width: 78.57142857%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-11,
.offset-lg-11 {
  margin-left: 91.66666667%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-12,
.col-lg-12 {
  width: 100%;
}

.full-row .col-12,
.full-row .col-lg-12 {
  width: 85.71428571%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-12,
.offset-lg-12 {
  margin-left: 100%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-13,
.col-lg-13 {
  width: 108.33333333%;
}

.full-row .col-13,
.full-row .col-lg-13 {
  width: 92.85714286%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-13,
.offset-lg-13 {
  margin-left: 108.33333333%;
}

/* Column dimensions
   @mixin ========================================================================= */

/*
   * Calculate width by dividing a full width into 12 columns
   * Create a class for each column
   */

.col-14,
.col-lg-14 {
  width: 116.66666667%;
}

.full-row .col-14,
.full-row .col-lg-14 {
  width: 100%;
}

/* Column shifts
   @mixin ========================================================================= */

.offset-14,
.offset-lg-14 {
  margin-left: 116.66666667%;
}

/* Media queries
 @mixin ========================================================================= */

/*
  * Create a separate loop because of order for css rendering
  * because else it would overrule a previous media query
  */

@media screen and (min-width: 1601px) {
  .col-xl-1 {
    width: 8.33333333%;
  }

  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-1 {
    width: 8.33333333%;
  }

  .offset-md-1 {
    margin-left: 8.33333333%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-1 {
    width: 8.33333333%;
  }

  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-1 {
    width: 8.33333333%;
  }

  .offset-xs-1 {
    margin-left: 8.33333333%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-2 {
    width: 16.66666667%;
  }

  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-2 {
    width: 16.66666667%;
  }

  .offset-md-2 {
    margin-left: 16.66666667%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-2 {
    width: 16.66666667%;
  }

  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-2 {
    width: 16.66666667%;
  }

  .offset-xs-2 {
    margin-left: 16.66666667%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-3 {
    width: 25%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-3 {
    width: 25%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-3 {
    width: 25%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-3 {
    width: 25%;
  }

  .offset-xs-3 {
    margin-left: 25%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-4 {
    width: 33.33333333%;
  }

  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-4 {
    width: 33.33333333%;
  }

  .offset-md-4 {
    margin-left: 33.33333333%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-4 {
    width: 33.33333333%;
  }

  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-4 {
    width: 33.33333333%;
  }

  .offset-xs-4 {
    margin-left: 33.33333333%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-5 {
    width: 41.66666667%;
  }

  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-5 {
    width: 41.66666667%;
  }

  .offset-md-5 {
    margin-left: 41.66666667%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-5 {
    width: 41.66666667%;
  }

  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-5 {
    width: 41.66666667%;
  }

  .offset-xs-5 {
    margin-left: 41.66666667%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-6 {
    width: 50%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-6 {
    width: 50%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-6 {
    width: 50%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-6 {
    width: 50%;
  }

  .offset-xs-6 {
    margin-left: 50%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-7 {
    width: 58.33333333%;
  }

  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-7 {
    width: 58.33333333%;
  }

  .offset-md-7 {
    margin-left: 58.33333333%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-7 {
    width: 58.33333333%;
  }

  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-7 {
    width: 58.33333333%;
  }

  .offset-xs-7 {
    margin-left: 58.33333333%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-8 {
    width: 66.66666667%;
  }

  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-8 {
    width: 66.66666667%;
  }

  .offset-md-8 {
    margin-left: 66.66666667%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-8 {
    width: 66.66666667%;
  }

  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-8 {
    width: 66.66666667%;
  }

  .offset-xs-8 {
    margin-left: 66.66666667%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-9 {
    width: 75%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-9 {
    width: 75%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-9 {
    width: 75%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-9 {
    width: 75%;
  }

  .offset-xs-9 {
    margin-left: 75%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-10 {
    width: 83.33333333%;
  }

  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-10 {
    width: 83.33333333%;
  }

  .offset-md-10 {
    margin-left: 83.33333333%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-10 {
    width: 83.33333333%;
  }

  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-10 {
    width: 83.33333333%;
  }

  .offset-xs-10 {
    margin-left: 83.33333333%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-11 {
    width: 91.66666667%;
  }

  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-11 {
    width: 91.66666667%;
  }

  .offset-md-11 {
    margin-left: 91.66666667%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-11 {
    width: 91.66666667%;
  }

  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-11 {
    width: 91.66666667%;
  }

  .offset-xs-11 {
    margin-left: 91.66666667%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-12 {
    width: 100%;
  }

  .offset-xl-12 {
    margin-left: 100%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-12 {
    width: 100%;
  }

  .offset-md-12 {
    margin-left: 100%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-12 {
    width: 100%;
  }

  .offset-sm-12 {
    margin-left: 100%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-12 {
    width: 100%;
  }

  .offset-xs-12 {
    margin-left: 100%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-13 {
    width: 108.33333333%;
  }

  .offset-xl-13 {
    margin-left: 108.33333333%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-13 {
    width: 108.33333333%;
  }

  .offset-md-13 {
    margin-left: 108.33333333%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-13 {
    width: 108.33333333%;
  }

  .offset-sm-13 {
    margin-left: 108.33333333%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-13 {
    width: 108.33333333%;
  }

  .offset-xs-13 {
    margin-left: 108.33333333%;
  }
}

@media screen and (min-width: 1601px) {
  .col-xl-14 {
    width: 116.66666667%;
  }

  .offset-xl-14 {
    margin-left: 116.66666667%;
  }
}

@media screen and (max-width: 1080px) {
  .col-md-14 {
    width: 116.66666667%;
  }

  .offset-md-14 {
    margin-left: 116.66666667%;
  }
}

@media screen and (max-width: 768px) {
  .col-sm-14 {
    width: 116.66666667%;
  }

  .offset-sm-14 {
    margin-left: 116.66666667%;
  }
}

@media screen and (max-width: 400px) {
  .col-xs-14 {
    width: 116.66666667%;
  }

  .offset-xs-14 {
    margin-left: 116.66666667%;
  }
}

/* ==========================================================================
   This grid can be turned on and off when you want to check
   if everything is nice in place.
   @mixin ========================================================================= */

.visible-grid-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/**
 * 1. Makes it able to control the website while grid is shown
 */

.visible-grid {
  display: block;
  position: fixed;
  z-index: 10000;
  pointer-events: none;
}

.visible-grid .grid-col {
  background: rgba(0, 255, 255, 0.2);
  height: 100vh;
}

.visible-grid .grid-col:nth-child(2n) {
  background: rgba(0, 255, 255, 0.1);
}

.visible-grid:before,
.visible-grid:after {
  content: '';
  position: absolute;
  top: 0;
  width: calc(100% / 12);
  height: 100%;
  background: rgba(0, 255, 0, 0.2);
}

.visible-grid:before {
  left: calc(-100% / 12);
}

.visible-grid:after {
  right: calc(-100% / 12);
}

.breakpoint {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  z-index: 10000;
  background: #0ABEFF;
}

@media screen and (min-width: 1601px) {
  .breakpoint {
    background: red;
  }
}

@media screen and (max-width: 1366px) {
  .breakpoint {
    background: blue;
  }
}

@media screen and (max-width: 1080px) {
  .breakpoint {
    background: green;
  }
}

@media screen and (max-width: 768px) {
  .breakpoint {
    background: yellow;
  }
}

@media screen and (max-width: 400px) {
  .breakpoint {
    background: pink;
  }
}

/* ==========================================================================
   Expend Config settings
   @mixin ========================================================================= */

/* ==========================================================================
   Expend Basic style settings
   @mixin ========================================================================= */

/*
 * Set up the html
 *
 * 1. Makes sue that some fonts are better rendered
 */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
 * Set up the body
 *
 * 1. Set font to lining figures
 */

body {
  margin: 0;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 26px;
  background-color: #EDF5F9;
  -webkit-font-feature-settings: "lnum";
          font-feature-settings: "lnum";
}

/*
 * Set default settings for all elements
 *
 * 1. Default selection styling
 *
 */

* ::-moz-selection {
  background: #2E80A8;
  color: white;
}

* ::selection {
  background: #2E80A8;
  color: white;
}

h1,
h2,
h3,
h4 {
  font-family: "Exo 2", sans-serif;
  font-weight: bold;
}

h1 {
  font-weight: bold;
  font-size: 70px;
  line-height: 74px;
  letter-spacing: -0.35px;
}

h2 {
  font-weight: bold;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.14px;
}

/*
 * Set default styling for input and textarea
 *
 * 1. Set font because else the agent will overrule them with an ugly font
 */

input,
textarea,
select,
button {
  font-family: "Titillium Web", sans-serif;
}

/*
 * Set default styling for a button
 *
 */

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid white;
  background: none;
  border-radius: 3.7px;
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  -webkit-transition: color 0.3s, background-color 0.3s;
  transition: color 0.3s, background-color 0.3s;
  text-align: center;
}

.button.arrow {
  min-width: 250px;
}

.button.arrow:after {
  position: absolute;
  top: 0;
  right: 10%;
  width: 8px;
  height: 14px;
  padding-top: 2em;
  content: "";
  background-position: -8px center;
  background-size: 102px 12.5px;
  background-repeat: no-repeat;
  background-image: url("/img/svg/button_arrow_right.svg");
  -webkit-transition: background-position 0.2s;
  transition: background-position 0.2s;
}

.button.left-arrow {
  min-width: 230px;
  padding-left: 8%;
}

.button.left-arrow:before {
  position: absolute;
  left: 5%;
  width: 14px;
  padding-top: 1.7em;
  content: "";
  background-position: -8px center;
  background-size: 102px 12.5px;
  background-repeat: no-repeat;
  background-image: url("/img/svg/button_arrow_right.svg");
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  -webkit-transition: background-position 0.2s;
  transition: background-position 0.2s;
}

.button.stroked.yellow {
  border: 1px solid #EEB633;
}

.button.stroked.yellow:hover {
  background-color: #EEB633;
  color: #001E2E;
}

.button.stroked.yellow:hover:after {
  background-position: -60px center;
}

.button.blue {
  background-color: #2E80A8;
}

.button.blue:hover {
  background-color: #67b1d5;
}

.button.filled.yellow {
  border: none;
  color: #001E2E;
  background-color: #EEB633;
}

.button.filled.yellow:before {
  background-position: -60px center;
}

.button.filled.yellow:after {
  background-position: -60px center;
}

.button.filled.yellow:hover {
  background-color: #f0be4b;
  color: white;
}

.button.filled.yellow:hover:before {
  background-position: -8px center;
}

.button.filled.yellow:hover:after {
  background-position: -8px center;
}

.grid-col {
  vertical-align: top;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

p {
  font-size: 16px;
}

.breadcrumb .grid-col {
  width: 91.66666667%;
  margin-left: 8.33333333%;
  padding: 48px 0 30px 0;
  font-family: "Exo 2", sans-serif;
  color: #2E80A8;
}

.breadcrumb .grid-col a,
.breadcrumb .grid-col b {
  font-size: 15px;
  text-decoration: none;
  color: #2E80A8;
}

.breadcrumb .grid-col span {
  padding: 0 10px;
}

@media screen and (max-width: 840px) {
  .breadcrumb {
    padding-left: 4.16666667% !important;
  }

  .breadcrumb .grid-col {
    margin-left: 0;
    padding-left: 0;
  }
}

span.email {
  display: inline-block;
  width: 75px;
  height: 38px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 300px;
  margin: -10px 0;
}

span.offerte {
  display: inline-block;
  width: 75px;
  height: 38px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-position: -89px top;
  background-repeat: no-repeat;
  background-size: 300px;
  margin: -10px 0;
}

span.cooling {
  display: inline-block;
  width: 60px;
  height: 55px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-position: -8px -310px;
  background-repeat: no-repeat;
  background-size: 325px;
  margin: -5px 0;
}

span.events {
  display: inline-block;
  width: 60px;
  height: 55px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-position: -94px -310px;
  background-repeat: no-repeat;
  background-size: 325px;
  margin: -5px 0;
}

span.mobility {
  display: inline-block;
  width: 60px;
  height: 55px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-position: -175px -305px;
  background-repeat: no-repeat;
  background-size: 325px;
  margin: -5px 0;
}

span.transportservice {
  display: inline-block;
  width: 60px;
  height: 55px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-position: -260px -310px;
  background-repeat: no-repeat;
  background-size: 325px;
  margin: -5px 0;
}

html.ie span.cooling {
  background-position: -47px -305px;
  background-size: 400px;
}

html.ie span.events {
  background-position: -123px -305px;
  background-size: 400px;
}

html.ie span.mobility {
  background-position: -214px -300px;
  background-size: 400px;
}

html.ie span.transportservice {
  background-position: -299px -305px;
  background-size: 400px;
}

/* ==========================================================================
   Helper classes
   @mixin ========================================================================= */

/**
 * Use on elements from where the children should not wrap
 */

.nowrap {
  white-space: nowrap;
}

/**
 * Hide elements on different screen sizes
 */

@media screen and (max-width: 1600px) {
  .hide-on-xl-or-smaller {
    display: none;
  }
}

@media screen and (min-width: 1601px) {
  .hide-on-xl-or-larger {
    display: none;
  }
}

@media screen and (max-width: 1366px) {
  .hide-on-lg-or-smaller {
    display: none;
  }
}

@media screen and (min-width: 1367px) {
  .hide-on-lg-or-larger {
    display: none;
  }
}

@media screen and (max-width: 1080px) {
  .hide-on-md-or-smaller {
    display: none;
  }
}

@media screen and (min-width: 1081px) {
  .hide-on-md-or-larger {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .hide-on-sm-or-smaller {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .hide-on-sm-or-larger {
    display: none;
  }
}

@media screen and (max-width: 400px) {
  .hide-on-xs-or-smaller {
    display: none;
  }
}

@media screen and (min-width: 401px) {
  .hide-on-xs-or-larger {
    display: none;
  }
}

/* ==========================================================================
   Partial CSS
   @mixin ========================================================================= */

/* HTML and navigation
 @mixin ========================================================================= */

html.has-cookie-dialog {
  padding-top: 60px;
}

html.has-cookie-dialog nav.main,
html.has-cookie-dialog .navigation-drip {
  top: 60px;
}

@media screen and (max-width: 1080px) {
  html.has-cookie-dialog {
    padding-top: 120px;
  }

  html.has-cookie-dialog nav.main,
  html.has-cookie-dialog .navigation-drip {
    top: 120px;
  }
}

/* Dialog
 @mixin ========================================================================= */

.cookie-consent {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 60px;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  background: #fff;
  color: #1D2433;
  font-size: 16px;
}

.cookie-consent .message {
  display: block;
  padding: 0 20px;
  max-width: 75%;
}

.cookie-consent .message a {
  display: inline-block;
  color: #0000FF;
  text-decoration: none;
}

.cookie-consent .message a:hover {
  text-decoration: underline;
}

.cookie-consent .button {
  margin-left: 40px;
  width: auto;
  min-width: 0;
  height: 40px;
  line-height: 36px;
  font-size: 16px;
}

@media screen and (max-width: 1080px) {
  .cookie-consent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    height: 120px;
  }

  .cookie-consent .message {
    max-width: none;
  }

  .cookie-consent .button {
    margin-left: 0;
    margin-top: 10px;
    position: relative;
    top: 0;
    right: 0;
  }
}

/* ==========================================================================
   Main footer
   @mixin ========================================================================= */

footer.main {
  width: 100%;
  background: #001E2E;
  color: #c3cfe6;
}

footer.main a {
  color: #c3cfe6;
  text-decoration: none;
  text-transform: lowercase;
  -webkit-transition: color 100ms ease-out;
  transition: color 100ms ease-out;
}

footer.main a:hover {
  color: #fff;
}

footer.main .grid-row .grid-col {
  font-size: 16px;
  line-height: 2em;
  vertical-align: top;
}

footer.main .grid-row .grid-col p {
  line-height: 2em;
  margin-top: 18px;
}

footer.main .grid-row .grid-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 18px;
}

footer.main .grid-row .grid-col ul.refs {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: 200px;
  margin-top: 0;
}

footer.main .grid-row .grid-col ul.refs li {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 95px;
  text-align: center;
  color: #CED5D9;
  margin-bottom: 0;
}

footer.main .grid-row .grid-col ul.refs li .ref-holder {
  display: block;
  width: 95px;
  height: 58px;
  background: url("/img/svg/refs_blue.svg") no-repeat left top;
  background-size: 290px;
  cursor: pointer;
  border: solid 1px transparent;
}

footer.main .grid-row .grid-col ul.refs li .ref-holder:hover {
  background: url("/img/svg/refs_yellow.svg") no-repeat left top;
  background-size: 290px;
}

footer.main .grid-row .grid-col ul.refs li.ref-0 .ref-holder {
  background-position: 18.5px top;
}

footer.main .grid-row .grid-col ul.refs li.ref-1 .ref-holder {
  background-position: -95px top;
}

footer.main .grid-row .grid-col ul.refs li.ref-2 .ref-holder {
  background-position: -207px top;
}

footer.main .grid-row .grid-col ul.refs li.ref-3 .ref-holder {
  background-position: 18.5px -87px;
}

footer.main .grid-row .grid-col ul.refs li.ref-4 .ref-holder {
  background-position: -91px -87px;
}

footer.main .grid-row .grid-col ul.refs li.ref-5 .ref-holder {
  background-position: -195px -87px;
}

footer.main .grid-row .grid-col ul.refs li.ref-6 .ref-holder {
  background: url("/img/svg/referenties/bavaria.svg") no-repeat left top;
  background-size: 200px;
  background-position: 22px 0px;
}

footer.main .grid-row .grid-col ul.refs li.ref-6 .ref-holder:hover {
  background-position: -126px 0px;
}

footer.main .grid-row .grid-col ul.refs li.ref-7 .ref-holder {
  background: url("/img/svg/referenties/fresh-grooves.svg") no-repeat left top;
  background-size: 290px;
  background-position: 0px 0px;
}

footer.main .grid-row .grid-col ul.refs li.ref-7 .ref-holder:hover {
  background-position: -219px 0px;
}

footer.main .grid-row .grid-col ul.refs li.ref-8 .ref-holder {
  background: url("/img/svg/referenties/klok.svg") no-repeat left top;
  background-size: 390px;
  background-position: -14px 18px;
}

footer.main .grid-row .grid-col ul.refs li.ref-8 .ref-holder:hover {
  background-position: -283px 18px;
}

footer.main .grid-row .grid-col.logo-container {
  width: 29.16666667%;
}

footer.main .grid-row .grid-col.logo-container .logo {
  display: block;
  background: transparent url("/img/svg/logo_footer.svg") no-repeat;
  width: 100%;
  height: 75px;
}

footer.main .grid-row .grid-col.logo-container .logo:hover {
  fill: #fff;
}

@media screen and (max-width: 1080px) {
  footer.main .grid-row .grid-col.logo-container .logo {
    width: 75%;
  }
}

footer.main .grid-row .grid-col.menu-container {
  width: 8.33333333%;
}

footer.main .grid-row .grid-col.cat-container {
  width: 12.5%;
}

footer.main .grid-row .grid-col.contact-container {
  width: 16.66666667%;
}

footer.main .grid-row .grid-col.ref-container {
  width: 25%;
}

footer.main .menu {
  padding: 60px 0;
}

footer.main .menu h4 {
  margin-top: 0;
  margin-bottom: 0;
  color: #EEB633;
}

footer.main .subfooter {
  padding: 16px 0;
  background-color: #050504;
}

footer.main .subfooter a {
  opacity: 0.5;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

footer.main .subfooter a:hover {
  opacity: 1;
}

footer.main .subfooter .ref-container {
  margin-left: 4.16666667%;
}

footer.main .subfooter .komma {
  position: relative;
}

footer.main .subfooter .komma span {
  position: relative;
  top: 8px;
  display: inline-block;
  width: 88px;
  height: 25px;
  background-image: url("/img/komma.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

html.ie footer.main .grid-row .grid-col ul.refs li.ref-3 .ref-holder {
  background-position: 18.5px -67px;
}

html.ie footer.main .grid-row .grid-col ul.refs li.ref-4 .ref-holder {
  background-position: -91px -67px;
}

html.ie footer.main .grid-row .grid-col ul.refs li.ref-5 .ref-holder {
  background-position: -195px -67px;
}

@media screen and (max-width: 1150px) {
  footer.main a {
    display: block;
  }

  footer.main .menu .grid-row .logo-container {
    width: 20%;
  }

  footer.main .menu .grid-row .menu-container {
    width: 12.5%;
  }

  footer.main .menu .grid-row .cat-container {
    width: 18%;
  }

  footer.main .menu .grid-row .contact-container {
    width: 22%;
  }

  footer.main .menu .grid-row .ref-container {
    width: 27%;
  }
}

@media screen and (max-width: 840px) {
  footer.main a {
    display: block;
  }

  footer.main .menu .grid-row .logo-container,
  footer.main .menu .grid-row .menu-container,
  footer.main .menu .grid-row .cat-container {
    display: none;
  }

  footer.main .menu .grid-row .grid-col.contact-container {
    width: 48%;
  }

  footer.main .menu .grid-row .grid-col.ref-container {
    width: 52%;
  }

  footer.main .subfooter .grid-row {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-align-items: initial;
    -moz-align-items: initial;
    -ms-align-items: initial;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial;
  }

  footer.main .subfooter .grid-row .ref-container {
    width: 40%;
  }

  footer.main .subfooter .grid-row .contact-container {
    width: 30%;
  }

  footer.main .subfooter .grid-row .cat-container,
  footer.main .subfooter .grid-row .menu-container {
    width: 15%;
  }

  footer.main .subfooter .grid-row .logo-container {
    display: none;
  }
}

@media screen and (max-width: 425px) {
  footer.main .menu .grid-row .grid-col.contact-container,
  footer.main .menu .grid-row .grid-col.ref-container {
    width: 100%;
  }

  footer.main .subfooter .grid-row {
    display: block;
  }

  footer.main .subfooter .grid-row .grid-col {
    width: 100%;
    margin-left: 0;
  }
}

header {
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
  background-image: url("/img/bg_repeat.png"), -webkit-gradient(linear, left top, right top, from(#2E80A8), to(#2A7896));
  background-image: url("/img/bg_repeat.png"), linear-gradient(90deg, #2E80A8, #2A7896);
  color: white;
  height: 200px;
  position: relative;
}

header:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.1)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%);
}

header .menu-substitute {
  display: none;
  width: 100%;
  height: 100px;
}

header.small .menu-substitute {
  display: block;
  height: 200px;
}

header.small .menu-wrapper {
  height: 100px;
  position: fixed;
  width: 100%;
  background: rgba(46, 128, 168, 0.95) url("/img/bg_repeat.png") repeat;
  background-image: url("/img/bg_repeat.png"), -webkit-gradient(linear, left top, right top, from(rgba(46, 128, 168, 0.95)), to(rgba(42, 120, 150, 0.95)));
  background-image: url("/img/bg_repeat.png"), linear-gradient(90deg, rgba(46, 128, 168, 0.95), rgba(42, 120, 150, 0.95));
}

header.small .menu-wrapper .primary-menu {
  height: 100px;
}

header.small .menu-wrapper .primary-menu .logo-holder {
  z-index: 15;
}

header.small .menu-wrapper .primary-menu .logo-holder .logo {
  width: 145px;
  height: 57px;
}

header.small .menu-wrapper .primary-menu .menu-right {
  top: 25%;
}

header.small .menu-wrapper .primary-menu .button.menuToggle {
  top: 25%;
}

header.small .menu-wrapper .primary-menu nav {
  top: 100px;
}

header.small .menu-wrapper .primary-menu nav .nav-bg-overlay {
  top: 100px;
}

header .menu-wrapper {
  position: static;
  height: 200px;
  z-index: 5;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

header .menu-wrapper.open {
  background-color: rgba(0, 30, 46, 0.95);
}

header .menu-wrapper .primary-menu {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1rem;
  line-height: 1;
  height: 200px;
  padding: 0;
  top: 0;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
}

header .menu-wrapper .primary-menu .logo-holder {
  z-index: 15;
}

header .menu-wrapper .primary-menu .logo-holder .logo {
  display: block;
  background: transparent url("/img/svg/logo_full.svg") no-repeat;
  width: 243px;
  height: 87px;
  -webkit-transition: width 0.2s, height 0.2s;
  transition: width 0.2s, height 0.2s;
}

header .menu-wrapper .primary-menu .menu-right {
  position: absolute;
  margin: 0;
  right: 0;
  top: 35%;
}

header .menu-wrapper .primary-menu .menu-right .button {
  width: auto;
  border: solid 1px rgba(255, 255, 255, 0.75);
}

header .menu-wrapper .primary-menu .button {
  cursor: pointer;
  z-index: 5;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.08px;
  padding: 16px 12px;
  text-align: center;
  width: 180px;
  margin-right: 10px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

header .menu-wrapper .primary-menu .button:hover {
  background-color: #338fbc;
}

header .menu-wrapper .primary-menu .button:last-child {
  margin-right: 0;
}

header .menu-wrapper .primary-menu .button.menuToggle {
  min-width: 140px;
  position: absolute;
  left: 4.16666667%;
  top: 35%;
  border-color: #EEB633;
}

header .menu-wrapper .primary-menu .button span.email,
header .menu-wrapper .primary-menu .button span.offerte {
  background-size: 150px;
  width: 32px;
  margin: -20px 5px -22px 10px;
}

header .menu-wrapper .primary-menu .button span.offerte {
  background-position: -44px top;
}

header .menu-wrapper .primary-menu .button span.shoppingCartButtonCounter {
  position: absolute;
  right: -13px;
  top: -15px;
  width: 1.7em;
  line-height: 1.7em;
  border-radius: 50%;
  color: black;
  background-color: #EEB633;
  -webkit-transition: width 0.3s, height 0.3s;
  transition: width 0.3s, height 0.3s;
}

header .menu-wrapper .primary-menu .button span.lines {
  position: absolute;
  border-top: solid 1.5px white;
  width: 28px;
  margin-left: 115px;
  margin-top: 6px;
  left: 0;
}

header .menu-wrapper .primary-menu .button span.lines:before {
  content: ' ';
  display: block;
  width: 50%;
  height: 5px;
  border-bottom: 1.5px solid white;
}

@media screen and (max-width: 1200px) {
  header .menu-wrapper .primary-menu .button span.extra {
    display: none;
  }
}

header .menu-wrapper .primary-menu nav {
  display: block;
  position: fixed;
  font-size: 0.9rem;
  line-height: 1.2;
  height: 0;
  width: 100%;
  top: 196px;
  left: 0;
  padding: 0 0 0 6.25%;
  z-index: 10;
  background-color: rgba(0, 30, 46, 0.95);
  -webkit-box-shadow: inset 0 35px 35px -20px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 35px 35px -20px rgba(0, 0, 0, 0.35);
  -webkit-transition: height 0.3s, top 0.1s;
  transition: height 0.3s, top 0.1s;
}

header .menu-wrapper .primary-menu nav.visible {
  height: 550px;
}

header .menu-wrapper .primary-menu nav.visible .nav-bg-overlay {
  opacity: 0.5;
  z-index: 0;
  height: 100%;
  position: fixed;
}

header .menu-wrapper .primary-menu nav.visible .menu-cat,
header .menu-wrapper .primary-menu nav.visible .menu-nav {
  overflow: visible;
  padding-top: 50px;
  height: auto;
}

header .menu-wrapper .primary-menu nav.visible .menu-cat:after {
  height: 550px;
}

header .menu-wrapper .primary-menu nav.visible .menu-cat ul ul.open {
  opacity: 1;
  height: 550px;
  z-index: 15;
}

header .menu-wrapper .primary-menu nav.visible .menu-nav {
  padding-top: 80px;
}

header .menu-wrapper .primary-menu nav .nav-bg-overlay {
  display: block;
  position: static;
  top: 200px;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #001E2E;
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

header .menu-wrapper .primary-menu nav .menu-cat,
header .menu-wrapper .primary-menu nav .menu-nav {
  overflow: hidden;
  height: 0;
  z-index: 1;
}

header .menu-wrapper .primary-menu nav .menu-cat ul,
header .menu-wrapper .primary-menu nav .menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li h3,
header .menu-wrapper .primary-menu nav .menu-cat ul li a,
header .menu-wrapper .primary-menu nav .menu-nav ul li h3,
header .menu-wrapper .primary-menu nav .menu-nav ul li a {
  display: block;
  margin: 0;
  padding: 21px 0;
  position: relative;
  z-index: 2;
  color: #2E80A8;
  text-decoration: none;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li h3:hover,
header .menu-wrapper .primary-menu nav .menu-cat ul li a:hover,
header .menu-wrapper .primary-menu nav .menu-nav ul li h3:hover,
header .menu-wrapper .primary-menu nav .menu-nav ul li a:hover {
  color: #3f9dca;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li h3,
header .menu-wrapper .primary-menu nav .menu-nav ul li h3 {
  font-weight: 600;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span,
header .menu-wrapper .primary-menu nav .menu-nav ul li span {
  border-radius: 50px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li a,
header .menu-wrapper .primary-menu nav .menu-nav ul li a {
  padding: 7px 0;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active h3,
header .menu-wrapper .primary-menu nav .menu-cat ul li.active a,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover h3,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover a,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active h3,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active a,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover h3,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover a {
  color: #EDF5F9;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active span,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active span,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover span {
  border-radius: 50px;
  background-color: #2E80A8;
  background-image: none;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active span:before,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active span:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover span:before {
  margin: 0;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.cooling:before,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.cooling:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active span.cooling:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover span.cooling:before {
  background-position: 11px -82px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.events:before,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.events:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active span.events:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover span.events:before {
  background-position: -35px -81px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.mobility:before,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.mobility:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active span.mobility:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover span.mobility:before {
  background-position: -82px -81px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.transportservice:before,
header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.transportservice:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li.active span.transportservice:before,
header .menu-wrapper .primary-menu nav .menu-nav ul li:hover span.transportservice:before {
  background-position: -128px -81px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.extra,
header .menu-wrapper .primary-menu nav .menu-nav ul li.extra {
  margin-top: 30px;
  color: white;
  font-size: 16px;
  letter-spacing: 0.5px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.extra a,
header .menu-wrapper .primary-menu nav .menu-nav ul li.extra a {
  color: white;
}

header .menu-wrapper .primary-menu nav .menu-cat {
  width: 58.33333333%;
}

header .menu-wrapper .primary-menu nav .menu-cat:after {
  content: '';
  position: absolute;
  left: 27.77777778%;
  top: 0;
  z-index: 2;
  width: 56.25%;
  height: 0;
  padding-left: 6.25%;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
  -webkit-box-shadow: inset 0 35px 35px -20px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 35px 35px -20px rgba(0, 0, 0, 0.35);
}

header .menu-wrapper .primary-menu nav .menu-cat h3.aanbod {
  display: block;
  font-weight: normal;
  margin: 0;
  padding-bottom: 5px;
  position: relative;
  z-index: 12;
  text-decoration: none;
  border-bottom: solid 1px #2E80A8;
  width: 27.77777778%;
  color: #CED5D3;
}

header .menu-wrapper .primary-menu nav .menu-cat h3.aanbod:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  left: 100%;
  height: 0.25em;
  border-bottom: solid 1px white;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li {
  cursor: pointer;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span {
  background-image: none;
  display: block;
  width: 75%;
  height: 55px;
  position: absolute;
  left: -60px;
  margin-top: 11px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span:before {
  content: '';
  display: block;
  width: 55px;
  height: 40px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
  background-repeat: no-repeat;
  background-size: 174px;
  margin: 0;
  top: 6px;
  -webkit-transition: background-position .2s ease-in;
  transition: background-position .2s ease-in;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span.cooling:before {
  background-position: 11px -39px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span.events:before {
  background-position: -35px -38px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span.mobility:before {
  background-position: -82px -38px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li span.transportservice:before {
  background-position: -128px -38px;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li a {
  padding: 0;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li a:hover {
  color: #3f9dca;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li h3.arrow {
  width: 27.77777778%;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li h3.arrow:after {
  position: absolute;
  top: 0;
  right: 10%;
  width: 8px;
  height: 100%;
  content: "";
  background-position: -8px center;
  background-size: 102px 12.5px;
  background-repeat: no-repeat;
  background-image: url("/img/svg/button_arrow_right.svg");
  -webkit-transition: background-position 0.2s;
  transition: background-position 0.2s;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active h4,
header .menu-wrapper .primary-menu nav .menu-cat ul li.active a {
  color: #EEB633;
}

header .menu-wrapper .primary-menu nav .menu-cat ul li.active h3.arrow:after {
  display: none;
}

header .menu-wrapper .primary-menu nav .menu-cat ul ul {
  opacity: 0;
  display: block;
  position: absolute;
  left: 27.77777778%;
  top: 0;
  z-index: 10;
  width: 56.25%;
  height: 0;
  padding-top: 90px;
  padding-left: 6.25%;
  -webkit-transition: height 0.3s, opacity 0.3s;
  transition: height 0.3s, opacity 0.3s;
}

header .menu-wrapper .primary-menu nav .menu-cat ul ul li a {
  padding: 0;
}

header .menu-wrapper .primary-menu nav .menu-cat ul ul li a h4 {
  color: #EDF5F9;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

header .menu-wrapper .primary-menu nav .menu-cat ul ul li a:hover h4 {
  color: #EEB633;
}

header .menu-wrapper .primary-menu nav .menu-nav {
  width: 33.33333333%;
  margin-left: 8.33333333%;
  font-size: 22px;
}

header .home-streamert {
  padding-top: 50px;
  width: 38.33333333%;
  max-width: 540px;
  margin-left: 8.33333333%;
}

header .home-streamert span.huge-text {
  font-size: 120px;
  line-height: 72.36px;
  font-family: "Exo 2", sans-serif;
  display: inline-block;
}

header .home-streamert span.xxl-text {
  font-size: 38px;
  line-height: 41.68px;
  letter-spacing: 0.19px;
  text-transform: uppercase;
  font-family: "Exo 2", sans-serif;
  display: inline-block;
  padding-top: 20px;
  max-width: 300px;
}

header .home-streamert span.xxl-text p {
  font-size: 38px;
  line-height: 41.68px;
  margin: 0;
}

header .home-streamert .button {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  margin-top: 50px;
  max-width: 300px;
}

body.home header,
body.contact header {
  height: 650px;
  background: #001E2E url("/img/Header.jpg") 0 0 no-repeat;
  background-size: cover;
  background-position: center 30%;
}

@media screen and (max-width: 840px) {
  body.home header,
  body.contact header {
    height: 500px;
  }

  body.home header .home-streamert,
  body.contact header .home-streamert {
    padding-top: 130px;
  }
}

body.home.small .primary-menu,
body.contact.small .primary-menu {
  background-color: rgba(0, 30, 46, 0.95);
  background-image: none;
}

body.about header {
  height: 425px;
}

body.contact header {
  height: 550px;
}

body.contact header .menu-wrapper {
  background: rgba(46, 128, 168, 0.95) url("/img/bg_repeat.png") repeat;
}

body.contact header .home-streamert {
  margin-left: 4.16666667%;
  width: 33.33333333%;
}

body.contact header .home-streamert h2 {
  font-size: 30px;
}

body.contact header .home-streamert p {
  font-size: 18px;
  line-height: 26px;
}

@media screen and (max-width: 840px) {
  body.contact header {
    height: 350px;
  }

  body.contact header .home-streamert {
    padding-top: 80px;
    width: 100%;
    margin-left: 0;
  }
}

html.ie header .menu-wrapper .primary-menu .menu-right {
  top: 35%;
}

html.ie header .menu-wrapper .primary-menu .button.menuToggle {
  top: 35%;
}

html.ie header .menu-wrapper .primary-menu .button span.email,
html.ie header .menu-wrapper .primary-menu .button span.offerte {
  margin: -18px 0;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li span:before {
  width: 36px;
  height: 38px;
  top: 8px;
  left: 10px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li span.cooling:before {
  background-position: -7px -38px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li span.events:before {
  background-position: -48px -37px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li span.mobility:before {
  background-position: -90px -37px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li span.transportservice:before {
  background-position: -132px -37px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.cooling:before,
html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.cooling:before {
  background-position: -7px -78px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.events:before,
html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.events:before {
  background-position: -48px -77px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.mobility:before,
html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.mobility:before {
  background-position: -90px -77px;
}

html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li.active span.transportservice:before,
html.ie header .menu-wrapper .primary-menu nav .menu-cat ul li:hover span.transportservice:before {
  background-position: -132px -77px;
}

html.ie header.small .menu-wrapper .primary-menu .menu-right {
  top: 25%;
}

html.ie header.small .menu-wrapper .primary-menu .button.menuToggle {
  top: 25%;
}

@media screen and (max-width: 1350px) {
  header .menu-wrapper .primary-menu nav .menu-cat:after {
    left: 38.88888889%;
  }

  header .menu-wrapper .primary-menu nav .menu-cat h3.aanbod {
    width: 38.88888889%;
  }

  header .menu-wrapper .primary-menu nav .menu-cat ul ul {
    left: 38.88888889%;
  }
}

@media screen and (max-width: 840px) {
  header.small .menu-wrapper,
  header.small .menu-substitute {
    height: 0;
  }

  header.small .menu-wrapper .primary-menu,
  header.small .menu-substitute .primary-menu {
    display: none;
  }

  header .grid-row {
    width: 100%;
  }

  header .menu-wrapper {
    height: 0;
  }

  header .menu-wrapper .primary-menu {
    display: none;
  }

  header .home-streamert {
    padding-top: 80px;
    padding-left: 8.33333333%;
    padding-right: 8.33333333%;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
  }

  header .home-streamert .streamert-content {
    max-width: 300px;
  }

  header .home-streamert .streamert-content span.huge-text,
  header .home-streamert .streamert-content span.xxl-text {
    width: 100%;
  }

  body.about header {
    height: 60px;
  }
}

.shoppingCartContent {
  background-color: #EDF5F9;
  padding-bottom: 120px;
}

.shoppingCartContent .form {
  font-size: 0;
}

.shoppingCartContent .titleHolder {
  width: 100%;
  margin-top: 60px;
  background-color: white;
  border-left: solid 15px #EEB633;
  color: #001E2E;
  font-weight: bold;
  padding-left: 3.57142857%;
  margin-bottom: 75px;
  -webkit-box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.05);
}

.shoppingCartContent .titleHolder h1 {
  font-size: 30px;
  line-height: 80px;
}

.shoppingCartContent .subtitleHolder {
  padding-left: 3.57142857%;
}

.shoppingCartContent .subtitleHolder h4 {
  color: #2E80A8;
  letter-spacing: 0.09px;
}

.shoppingCartContent .shoppingcartItemList {
  width: 62.5%;
  padding-right: 4.16666667%;
  color: #2E80A8;
}

.shoppingCartContent .shoppingcartItemList input {
  display: none;
}

.shoppingCartContent .shoppingcartItemList > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shoppingCartContent .shoppingcartItemList > ul > li {
  display: block;
  width: 100%;
  min-height: 300px;
  margin-bottom: 60px;
  background-color: white;
  position: relative;
  border-radius: 3.354px;
  -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
}

.shoppingCartContent .shoppingcartItemList > ul > li:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 150px;
  background-color: #2E80A8;
  border-radius: 3.354px 0 0 3.354px;
}

.shoppingCartContent .shoppingcartItemList > ul > li .deleteButton {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 3px;
  border: solid 1px #EEB633;
  color: #EEB633;
  text-decoration: none;
  padding: 0 9px 5px 9px;
  font-size: 1.4em;
  line-height: 1.1em;
}

.shoppingCartContent .shoppingcartItemList > ul > li .deleteButton:hover {
  background-color: #EEB633;
  color: white;
}

.shoppingCartContent .shoppingcartItemList > ul > li .left {
  height: 100%;
  width: 28.57142857%;
  padding: 60px 0 60px 7.14285714%;
}

.shoppingCartContent .shoppingcartItemList > ul > li .left img {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right {
  width: 64.28571429%;
  padding: 40px 0 40px 7.14285714%;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right h3 {
  color: #2E80A8;
  font-size: 26px;
  margin: 0;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right h4 {
  font-size: 14px;
  margin: 0;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right h4 p {
  font-size: 14px;
  margin: 0;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right h4 a {
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  color: #2E80A8;
  padding-bottom: 2px;
  border-bottom: solid 2px #EEB633;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right h4 a:hover {
  color: #EEB633;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box {
  border: solid 2px #D0D7D5;
  padding: 8px;
  border-radius: 5px;
  margin: 20px 0;
  height: 66px;
  width: 180px;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box .amount-label {
  font-weight: bold;
  font-size: 14px;
  color: #2E80A8;
  margin-left: 5px;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box .amount-box {
  border-radius: 5px;
  background-color: rgba(208, 215, 213, 0.2);
  display: inline-block;
  padding: 0 15px 0 30px;
  width: 110px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-evenly;
  -moz-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box .amount-box .amount {
  display: inline-block;
  font-weight: bold;
  font-size: 30px;
  color: #2E80A8;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: right;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box .amount-box .amount-changers {
  display: inline-block;
  height: 100%;
  width: 10px;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box .amount-box .amount-changers a {
  border-radius: 3px;
  border: solid 2px #EEB633;
  color: #EEB633;
  text-decoration: none;
  padding: 5px 0 8px 0;
  width: 16px;
  line-height: 0;
  height: 16px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5px 0;
  -webkit-transition: color 0.2s, background-color 0.2s;
  transition: color 0.2s, background-color 0.2s;
}

.shoppingCartContent .shoppingcartItemList > ul > li .right .order-box .amount-box .amount-changers a:hover {
  background-color: #EEB633;
  color: white;
}

.shoppingCartContent .shoppingcartItemList a.button {
  float: right;
}

.shoppingCartContent .shoppingcartItemList a.button span {
  margin: 0 5px 0 15px;
  font-size: 24px;
  line-height: 0;
  position: relative;
  top: 1px;
}

.shoppingCartContent .shoppingCartInfoBar {
  width: 37.5%;
  background-color: white;
  padding: 4.16666667%;
  color: #2E80A8;
  border-radius: 3.354px;
  -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
}

.shoppingCartContent .shoppingCartInfoBar label,
.shoppingCartContent .shoppingCartInfoBar input,
.shoppingCartContent .shoppingCartInfoBar textarea {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}

.shoppingCartContent .shoppingCartInfoBar label {
  font-weight: bold;
  font-size: 14px;
}

.shoppingCartContent .shoppingCartInfoBar .date-separator {
  display: inline-block;
  width: 15px;
  border: solid 1px #2E80A8;
  float: left;
  margin: 5% 3.4% -5% 3.4%;
}

.shoppingCartContent .shoppingCartInfoBar input,
.shoppingCartContent .shoppingCartInfoBar textarea {
  border: none;
  background-color: rgba(208, 215, 213, 0.2);
  border-bottom: solid 1px #D0D7D5;
  padding: 11px 8px;
  font-size: 14px;
}

.shoppingCartContent .shoppingCartInfoBar input:focus,
.shoppingCartContent .shoppingCartInfoBar textarea:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  border-bottom: solid 1px #EEB633;
  color: #8c8c8c;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date],
.shoppingCartContent .shoppingCartInfoBar textarea[type=date] {
  width: 45%;
  font-size: 14px;
  font-family: "Titillium Web", sans-serif;
  padding-left: 40px;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]::-webkit-input-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]::-webkit-input-placeholder {
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]::-moz-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]::-moz-placeholder {
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]:-ms-input-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]:-ms-input-placeholder {
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]:-moz-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]:-moz-placeholder {
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]::-webkit-inner-spin-button,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]::-webkit-inner-spin-button {
  display: none;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]#from,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]#from {
  float: left;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]#from:before,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]#from:before {
  content: "van";
  display: block;
  position: absolute;
  margin-left: -28px;
  margin-top: -1px;
  width: 40px;
  height: 20px;
  color: #2E80A8;
  font-size: 14px;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]#till,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]#till {
  float: right;
}

.shoppingCartContent .shoppingCartInfoBar input[type=date]#till:before,
.shoppingCartContent .shoppingCartInfoBar textarea[type=date]#till:before {
  content: "tot";
  display: block;
  position: absolute;
  margin-left: -28px;
  margin-top: -1px;
  width: 40px;
  height: 20px;
  color: #2E80A8;
  font-size: 14px;
}

.shoppingCartContent .shoppingCartInfoBar input::-webkit-input-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea::-webkit-input-placeholder {
  font-size: 14px;
  font-family: "Titillium Web", sans-serif;
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input::-moz-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea::-moz-placeholder {
  font-size: 14px;
  font-family: "Titillium Web", sans-serif;
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input:-ms-input-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea:-ms-input-placeholder {
  font-size: 14px;
  font-family: "Titillium Web", sans-serif;
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar input:-moz-placeholder,
.shoppingCartContent .shoppingCartInfoBar textarea:-moz-placeholder {
  font-size: 14px;
  font-family: "Titillium Web", sans-serif;
  color: #D0D7D5;
}

.shoppingCartContent .shoppingCartInfoBar .submit {
  width: 42.85714286%;
  padding-right: 40px;
}

.shoppingCartContent .shoppingCartInfoBar .submit:after {
  line-height: 1.5em;
}

.shoppingCartContent .shoppingCartInfoBar .email {
  clear: both;
}

html[data-browser*="Firefox"] .shoppingCartContent .shoppingCartInfoBar input[type=date]:before {
  margin-top: 6px !important;
}

@media screen and (max-width: 1300px) {
  .shoppingCartContent .shoppingCartInfoBar .date-separator {
    display: none;
  }

  .shoppingCartContent .shoppingCartInfoBar input[type=date] {
    width: 100%;
  }
}

@media screen and (max-width: 840px) {
  header {
    height: 60px;
  }

  .shoppingCartContent .shoppingCartInfoBar {
    width: 100%;
  }

  .shoppingCartContent .shoppingCartInfoBar .date-separator {
    display: inline-block;
    margin: 3.5% 3.4% -5% 3.4%;
  }

  .shoppingCartContent .shoppingCartInfoBar input[type=date] {
    width: 45%;
  }

  .shoppingCartContent .shoppingcartItemList {
    width: 100%;
    padding-right: 0;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 600px) {
  .shoppingCartContent .shoppingcartItemList ul li:before {
    display: none;
  }

  .shoppingCartContent .shoppingcartItemList ul li .deleteButton {
    z-index: 10;
  }

  .shoppingCartContent .shoppingcartItemList ul li .left {
    background-color: transparent;
    width: 100%;
  }

  .shoppingCartContent .shoppingcartItemList ul li .left img {
    width: 92%;
  }

  .shoppingCartContent .shoppingcartItemList ul li .right {
    width: 100%;
  }

  .shoppingCartContent .shoppingcartItemList ul li .right .info-link {
    display: inline-block;
    margin-left: 20px;
  }
}

@media screen and (max-width: 435px) {
  .shoppingCartContent {
    width: 100%;
    padding-bottom: 0;
  }

  .shoppingCartContent .titleHolder {
    margin-top: 0;
  }

  .shoppingCartContent .shoppingcartItemList ul li .right .info-link {
    display: block;
    margin-left: 0;
  }
}

/* ==========================================================================
   Default styling for KMS content
   @mixin ========================================================================= */

.kms-content h1,
.kms-content h2,
.kms-content h3 {
  font-size: 1.8rem;
  line-height: 1.4;
  color: #00C7FF;
}

.kms-content h1 strong,
.kms-content h2 strong,
.kms-content h3 strong {
  color: #00C7FF;
  font-weight: 400;
}

.kms-content h2,
.kms-content h3 {
  font-size: 1.4rem;
}

.kms-content h3 {
  color: #00C7FF;
}

.kms-content h3 strong {
  color: #0000FF;
}

.kms-content h4 {
  font-size: 0.8rem;
  line-height: 1.3;
  color: #0000FF;
  text-transform: uppercase;
}

.kms-content p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #646464;
}

.kms-content ul {
  padding-left: 0;
  list-style: none;
}

.kms-content ul li {
  padding-left: 30px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #646464;
}

.kms-content ul li:before {
  position: absolute;
  left: 0;
  content: '\2022';
  color: #0000FF;
  font-size: 1.3em;
  line-height: 1;
}

.kms-content ul li + li {
  margin-top: 5px;
}

.kms-content ol {
  counter-reset: ol-counter;
  padding-left: 0;
  list-style: none;
}

.kms-content ol li {
  padding-left: 30px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #646464;
}

.kms-content ol li:before {
  counter-increment: ol-counter;
  content: counter(ol-counter) ".";
  position: absolute;
  left: 0;
  color: #0000FF;
}

.kms-content ol li + li {
  margin-top: 5px;
}

.kms-content a {
  color: #0000FF;
  text-decoration: none;
}

.kms-content a:hover {
  color: #0000cc;
  text-decoration: none;
}

.form {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.2;
}

.form .honey {
  position: fixed;
  top: -50px;
  height: 20px;
  width: 100%;
}

.form .honey-message,
.form noscript {
  display: block;
  font-size: 0.75rem;
  color: #ff323c;
}

.form .form-element {
  position: relative;
  margin-bottom: 25px;
}

.form .error-message {
  display: none;
  width: 75%;
  float: right;
  text-align: right;
  color: #ff323c;
  font-size: 0.75rem;
  font-weight: bold;
}

.form .error-message.active {
  display: block;
}

.form label,
.form .label {
  display: block;
  margin-bottom: 5px;
  color: #2E80A8;
  font-size: 0.8em;
  font-weight: bold;
}

.form input,
.form textarea {
  display: block;
  width: 100%;
  background-color: rgba(208, 215, 213, 0.2);
  padding: 7px 20px;
  border: 1px transparent solid;
  border-bottom: solid 1px #D0D7D5;
  font-size: 0.9em;
  color: #808080;
}

.form input::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
  color: #D0D7D5;
}

.form input::-moz-placeholder,
.form textarea::-moz-placeholder {
  color: #D0D7D5;
}

.form input:-ms-input-placeholder,
.form textarea:-ms-input-placeholder {
  color: #D0D7D5;
}

.form input:-moz-placeholder,
.form textarea:-moz-placeholder {
  color: #D0D7D5;
}

.form input.alert,
.form textarea.alert {
  border-color: #ff323c;
}

.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form input:-webkit-autofill:active,
.form textarea:-webkit-autofill,
.form textarea:-webkit-autofill:hover,
.form textarea:-webkit-autofill:focus,
.form textarea:-webkit-autofill:active {
  -webkit-transition: 9999s background-color;
  transition: 9999s background-color;
  -webkit-text-fill-color: #646464;
  -webkit-transition-delay: 9999s;
          transition-delay: 9999s;
}

.form input:focus,
.form textarea:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  border-bottom: solid 1px #EEB633;
}

.form textarea {
  min-height: 133px;
  resize: vertical;
}

.form .select .select-wrapper {
  position: relative;
  display: block;
}

.form .select .icon {
  position: absolute;
  right: 10px;
  top: 26px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #646464 transparent transparent transparent;
  opacity: 0.3;
  pointer-events: none;
}

.form .select select {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  font-family: "Open Sans", sans-serif;
  background-color: white;
  padding: 15px 35px 15px 20px;
  border: 1px transparent solid;
  border-radius: 4px;
  font-size: 0.9em;
  color: #646464;
}

.form .select select:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  border-bottom: solid 1px #EEB633;
}

.form .checkbox label {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  cursor: pointer;
}

.form .checkbox label input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.form .checkbox label input:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.form .checkbox label input:checked {
  background-image: url("/img/check/checked.svg");
  background-color: rgba(255, 255, 255, 0.7);
}

.form .checkbox label span {
  display: block;
  margin: 2px 0 0;
  width: calc(100% - 30px);
}

.form .submit {
  margin-top: 55px;
  cursor: pointer;
}

.form .submit input {
  width: auto;
  padding: 13px 20px;
  margin-top: -10px;
}

#image-slider {
  width: 100%;
  overflow: visible;
}

#image-slider .placeholder {
  position: relative;
  width: 100%;
  cursor: move;
  height: 0;
  padding-bottom: 100%;
}

#image-slider .placeholder figure {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

#image-slider .placeholder figure span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

#image-slider .placeholder figure span.small {
  display: none;
}

@media screen and (max-width: 480px) {
  #image-slider .placeholder figure span.medium {
    display: none;
  }

  #image-slider .placeholder figure span.small {
    display: block;
  }
}

#image-slider .placeholder figure.active {
  z-index: 2;
  opacity: 1;
}

#image-slider .controllers {
  position: relative;
  z-index: 3;
  height: 120px;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  overflow: hidden;
}

#image-slider .controllers .thumb-holder {
  white-space: nowrap;
  width: 60%;
  height: 135px;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: #2E80A8;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#image-slider .controllers .thumb-holder figure {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#image-slider .controllers .thumb-holder figure span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

#image-slider .controllers .thumb-holder figure.active {
  z-index: 2;
  opacity: 1;
  border: solid 4px #EEB633;
}

#image-slider .controllers .nav-item {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20%;
  height: 100%;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#image-slider .controllers .nav-item span {
  width: 8px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

#image-slider .controllers .nav-item span .arrow-icon {
  position: relative;
  top: -1px;
  left: 6px;
  width: 100%;
  -webkit-transform-origin: center;
          transform-origin: center;
}

#image-slider .controllers .nav-item span .arrow-icon .st0 {
  fill: white;
}

#image-slider .controllers .nav-item:after {
  content: '';
}

#image-slider .controllers .nav-item.previous {
  background: #001E2E url(/img/svg/arrow_right.svg) no-repeat 50% 50%;
  background-size: 16.6667%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

#image-slider .controllers .nav-item.previous:hover {
  background-color: #003f61;
}

#image-slider .controllers .nav-item.next {
  background: #001E2E url(/img/svg/arrow_right.svg) no-repeat 50% 50%;
  background-size: 16.6667%;
}

#image-slider .controllers .nav-item.next span .arrow-icon {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

#image-slider .controllers .nav-item.next:hover {
  background-color: #003f61;
}

/*==========================================================================
  Dynamic Blocks
  @mixin ========================================================================= */

.dynamic-block {
  margin-top: 60px;
}

.dynamic-block .grid-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dynamic-block.two-text-columns {
  position: relative;
  z-index: 10;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.dynamic-block.two-text-columns .content {
  width: 47.72727273%;
  padding: 0;
}

@media screen and (max-width: 900px) {
  .dynamic-block.two-text-columns {
    display: block;
  }

  .dynamic-block.two-text-columns .content {
    width: 100% !important;
    margin: 0;
  }

  .dynamic-block.two-text-columns .content p:last-of-type {
    margin-bottom: 1rem;
  }
}

.dynamic-block.full-image-column img {
  width: 100%;
  display: none;
}

.dynamic-block.full-image-column img.large {
  display: block;
}

@media screen and (max-width: 1050px) {
  .dynamic-block.full-image-column img.large {
    display: none;
  }

  .dynamic-block.full-image-column img.medium {
    display: block;
  }
}

@media screen and (max-width: 525px) {
  .dynamic-block.full-image-column img.medium {
    display: none;
  }

  .dynamic-block.full-image-column img.small {
    display: block;
  }
}

.dynamic-block.content-block {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.dynamic-block.content-block .image {
  width: 50%;
}

.dynamic-block.content-block .image img {
  width: 100%;
}

.dynamic-block.content-block .image img.small {
  display: none;
}

@media screen and (max-width: 450px) {
  .dynamic-block.content-block .image img.medium {
    display: none;
  }

  .dynamic-block.content-block .image img.small {
    display: block;
  }
}

.dynamic-block.content-block .image .content {
  width: 41.66666667%;
}

.dynamic-block.content-block .content {
  -webkit-order: 1;
  -ms-order: 1;
  width: 41.66666667%;
}

.dynamic-block.content-block[data-image-location='right'] .image {
  -webkit-order: 2;
  -ms-order: 2;
}

.dynamic-block.content-block[data-image-location='right'] .content {
  -webkit-order: 1;
  -ms-order: 1;
}

@media screen and (max-width: 900px) {
  .dynamic-block.content-block {
    display: block;
  }

  .dynamic-block.content-block .image {
    width: 100%;
    margin-top: 40px;
    -webkit-order: 2;
    -ms-order: 2;
  }

  .dynamic-block.content-block .content {
    width: 100%;
  }
}

.dynamic-block.multiple-images {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: row;
}

.dynamic-block.multiple-images figure {
  width: 47.72727273%;
}

.dynamic-block.multiple-images figure img {
  width: 100%;
  display: none;
}

.dynamic-block.multiple-images figure img.medium {
  display: none;
}

@media screen and (max-width: 1100px) {
  .dynamic-block.multiple-images figure img.large {
    display: none;
  }

  .dynamic-block.multiple-images figure img.medium {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .dynamic-block.multiple-images figure img.large {
    display: none;
  }

  .dynamic-block.multiple-images figure img.medium {
    display: block;
  }
}

.dynamic-block.multiple-images[data-size-type='50'] figure img.medium {
  display: block;
}

@media screen and (max-width: 1125px) {
  .dynamic-block.multiple-images[data-size-type='50'] figure img.medium {
    display: none;
  }

  .dynamic-block.multiple-images[data-size-type='50'] figure img.small {
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .dynamic-block.multiple-images {
    display: block;
  }

  .dynamic-block.multiple-images figure {
    width: 100%;
  }

  .dynamic-block.multiple-images figure:first-of-type {
    margin-bottom: 40px;
  }

  .dynamic-block.multiple-images figure img.medium {
    display: block !important;
  }

  .dynamic-block.multiple-images figure img.small {
    display: none !important;
  }
}

@media screen and (max-width: 900px) and (max-width: 525px) {
  .dynamic-block.multiple-images figure img.medium {
    display: none;
  }

  .dynamic-block.multiple-images figure img.small {
    display: block;
  }
}

.dynamic-block.full-text-block .content {
  max-width: 680px;
  margin: auto;
  text-align: center;
}

.dynamic-block.video-block {
  width: 100%;
  max-width: 960px;
  margin: 60px auto 0 !important;
}

.dynamic-block.video-block .video-wrapper {
  position: relative;
  padding-bottom: 53.6%;
  padding-top: 25px;
  height: 0;
}

.dynamic-block.video-block .video-wrapper iframe,
.dynamic-block.video-block .video-wrapper .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dynamic-block.video-block .video-wrapper .video-overlay {
  z-index: 2;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.dynamic-block.video-block .video-wrapper .video-overlay .button {
  width: 25%;
  max-width: 85px;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.dynamic-block.video-block .video-wrapper .video-overlay .button img {
  width: 100%;
}

.dynamic-block.video-block .video-wrapper .video-overlay:hover .button {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.dynamic-block.video-block .video-wrapper .video-overlay.hide {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

.dynamic-block.video-block .video-wrapper .video-overlay.hide .button {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

@media screen and (max-width: 840px) {
  .preventScroll {
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    width: 100%;
  }
}

#mobile-navigation {
  position: fixed;
  z-index: 1000;
  height: 100vh;
  overflow: hidden;
  width: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
}

#mobile-navigation .bar {
  display: none;
  height: 60px;
  background-color: #001E2E;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.11);
          box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.11);
  pointer-events: all;
  position: relative;
  z-index: 4;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

#mobile-navigation .bar .toggle-menu {
  width: 60px;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#mobile-navigation .bar .toggle-menu .icon {
  width: 20px;
}

#mobile-navigation .bar .toggle-menu .icon span + span {
  margin-top: 4px;
}

#mobile-navigation .bar .toggle-menu .icon span {
  width: 100%;
  height: 2px;
  display: block;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  background-color: white;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}

#mobile-navigation .bar .toggle-menu .icon span:nth-of-type(2) {
  -webkit-transform: scale3d(0.8, 1, 1);
          transform: scale3d(0.8, 1, 1);
}

#mobile-navigation .bar .toggle-menu .icon span:nth-of-type(3) {
  -webkit-transform: scale3d(0.45, 1, 1);
          transform: scale3d(0.45, 1, 1);
}

#mobile-navigation .bar .toggle-menu:hover .icon span {
  -webkit-transform: scale3d(1, 1, 1) !important;
          transform: scale3d(1, 1, 1) !important;
}

#mobile-navigation .bar .logo {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#mobile-navigation .bar .logo a {
  position: relative;
  display: block;
  width: 150px;
  max-height: 35px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#mobile-navigation .bar .logo a img {
  width: 100%;
  max-height: 35px;
}

#mobile-navigation .bar .cart {
  height: 100%;
  width: 60px;
  position: absolute;
  right: 20px;
  top: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#mobile-navigation .bar .cart a {
  position: relative;
  display: block;
  width: 150px;
  max-height: 35px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#mobile-navigation .bar .cart a span.shoppingCartButtonCounter {
  position: absolute;
  right: -10px;
  top: -8px;
  font-weight: bold;
  width: 1.3em;
  font-size: 1em;
  line-height: 1.3em;
  color: white;
  -webkit-transition: width 0.3s, height 0.3s;
  transition: width 0.3s, height 0.3s;
}

#mobile-navigation .bar .cart a img {
  width: 100%;
  max-height: 35px;
}

#mobile-navigation .shader {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #001E2E;
  opacity: 0;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

#mobile-navigation .menu {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 600px;
  min-width: 275px;
  padding: 20px 60px;
  background-color: #001E2E;
  overflow-x: auto;
  pointer-events: all;
  z-index: 5;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

#mobile-navigation .menu nav {
  position: relative;
}

#mobile-navigation .menu nav .close {
  position: absolute;
  top: 0;
  left: -38px;
  display: block;
  width: 16px;
  height: 16px;
  cursor: pointer;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

#mobile-navigation .menu nav .close:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

#mobile-navigation .menu nav .close:hover:before,
#mobile-navigation .menu nav .close:hover:after {
  background-color: #EEB633;
}

#mobile-navigation .menu nav .close:before,
#mobile-navigation .menu nav .close:after {
  content: '';
  position: absolute;
  display: block;
  background-color: #EDF5F9;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

#mobile-navigation .menu nav .close:before {
  left: 7px;
  top: 0;
  width: 2px;
  height: 100%;
}

#mobile-navigation .menu nav .close:after {
  left: 0;
  top: 7px;
  width: 100%;
  height: 2px;
}

#mobile-navigation .menu nav .logo-wrapper {
  width: 100%;
  max-width: 250px;
}

#mobile-navigation .menu nav .logo-wrapper a {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-decoration: none;
}

#mobile-navigation .menu nav .logo-wrapper a img {
  max-height: 45px;
}

#mobile-navigation .menu nav .menu-list {
  margin-top: 40px;
}

#mobile-navigation .menu nav .menu-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.2;
}

#mobile-navigation .menu nav .menu-list ul + ul {
  margin-top: 24px;
}

#mobile-navigation .menu nav .menu-list ul li a {
  display: block;
  padding: 8px 0;
  color: #EDF5F9;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  cursor: pointer;
}

#mobile-navigation .menu nav .menu-list ul li a:hover {
  color: #2E80A8;
}

#mobile-navigation .menu nav .menu-list ul li ul {
  font-size: 0.85em;
  margin-left: 20px;
}

#mobile-navigation .menu nav .menu-list ul li.active > a {
  color: #EDB533;
}

#mobile-navigation.active .bar .toggle-menu .icon span {
  opacity: 0;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

#mobile-navigation.active .bar .toggle-menu .icon span:first-of-type {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 1;
  top: 6px;
}

#mobile-navigation.active .bar .toggle-menu .icon span:last-of-type {
  width: 25px;
  opacity: 1;
  bottom: 6px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#mobile-navigation.active .menu {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

#mobile-navigation.shader-active .shader {
  opacity: 0.6;
  pointer-events: all;
}

#mobile-navigation.allow-animation .shader {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#mobile-navigation.allow-animation .menu {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

@media screen and (max-width: 840px) {
  #mobile-navigation {
    display: block;
  }

  #mobile-navigation .bar {
    display: block;
  }

  #mobile-navigation .menu {
    max-width: none;
  }
}

@media screen and (max-width: 400px) {
  #mobile-navigation nav {
    padding-left: 30px;
  }

  #mobile-navigation nav ul {
    font-size: 1.2rem;
  }
}

.mobile-contact {
  display: none;
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  padding: 50px 7.14285714%;
  background-color: white;
  color: #1D2433;
  font-size: 0.9rem;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
  transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
}

.mobile-contact.active {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: all;
}

.mobile-contact h1,
.mobile-contact h2 {
  font-size: 2rem;
  line-height: 1.2;
  max-width: 580px;
  color: #0032FF;
  margin: 0 0 40px;
}

.mobile-contact p {
  margin: 1rem 0;
}

.mobile-contact strong {
  color: #1D2433;
}

.mobile-contact a:not(.button) {
  color: #0000FF;
  text-decoration: none;
  -webkit-transition: color 0.3s, border 0.3s, opacity 0.3s;
  transition: color 0.3s, border 0.3s, opacity 0.3s;
}

.mobile-contact a:not(.button):hover {
  color: #0000b3;
}

.mobile-contact a.button {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 20px;
  border-radius: 25px;
  background-color: #0000FF;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 700;
  color: white;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.mobile-contact a.button:after {
  content: '';
  margin-left: 20px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.mobile-contact a.button:hover {
  background-color: #0032FF;
}

.mobile-contact a.button:hover:after {
  -webkit-transform: translate3d(5px, 0, 0);
          transform: translate3d(5px, 0, 0);
}

@media screen and (max-width: 840px) {
  .mobile-contact {
    display: block;
  }
}

#sticky-navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background-color: #0000FF;
  width: 100%;
  height: 60px;
  -webkit-transform: translate3d(0, -60px, 0);
          transform: translate3d(0, -60px, 0);
  -webkit-box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
}

#sticky-navigation.active {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}

#sticky-navigation .grid-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sticky-navigation .menu {
  display: inline-block;
  width: 60px;
}

#sticky-navigation .menu .placeholder {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#sticky-navigation .menu .placeholder .icon-placeholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

#sticky-navigation .menu .placeholder .icon-placeholder .icon {
  width: 20px;
}

#sticky-navigation .menu .placeholder .icon-placeholder .icon span + span {
  margin-top: 4px;
}

#sticky-navigation .menu .placeholder .icon-placeholder .icon span {
  width: 100%;
  height: 2px;
  display: block;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  background-color: white;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}

#sticky-navigation .menu .placeholder .icon-placeholder .icon span:nth-of-type(2) {
  -webkit-transform: scale3d(0.8, 1, 1);
          transform: scale3d(0.8, 1, 1);
}

#sticky-navigation .menu .placeholder .icon-placeholder .icon span:nth-of-type(3) {
  -webkit-transform: scale3d(0.45, 1, 1);
          transform: scale3d(0.45, 1, 1);
}

#sticky-navigation .menu .placeholder .icon-placeholder:hover .icon span {
  -webkit-transform: scale3d(1, 1, 1) !important;
          transform: scale3d(1, 1, 1) !important;
}

#sticky-navigation .logo-wrapper a {
  font-size: 1rem;
  line-height: 1;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* ==========================================================================
   Home page
   @mixin ========================================================================= */

.content .afspraakblok {
  padding-top: 40px;
}

.content .afspraakblok .leftborder {
  width: 3.57142857%;
  margin: 115px 0;
  border-left: solid 30px #2E80A8;
  height: 320px;
  position: absolute;
  left: 0;
}

.content .afspraakblok .left {
  width: 41.66666667%;
  margin: 115px 0;
  vertical-align: top;
  padding: 0 4.16666667%;
  color: #2E294E;
}

.content .afspraakblok .left a.button {
  margin-top: 75px;
}

.content .afspraakblok .right {
  width: 46.42857143%;
  height: 320px;
  background-color: white;
  margin: 115px 0;
  position: relative;
  overflow: visible;
  -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
  border-bottom: solid 5px #EEB633;
}

.content .afspraakblok .right .img-holder {
  display: block;
  width: 100%;
  height: 145%;
  top: -45%;
  left: -3%;
  position: relative;
  overflow: hidden;
}

.content .afspraakblok .right .inner-right {
  min-width: 41.66666667%;
  background-color: #001E2E;
  height: 240px;
  border-bottom: solid 5px #EEB633;
  margin-right: -8.33333333%;
  position: absolute;
  right: 0;
  bottom: -50px;
  padding: 30px;
  color: white;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.08px;
  text-align: center;
}

@media screen and (max-width: 1150px) {
  .content .afspraakblok .right .inner-right {
    bottom: -120px;
  }
}

.content .afspraakblok .right .inner-right a {
  text-decoration: none;
  color: white;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.content .afspraakblok .right .inner-right a:hover {
  color: #EEB633;
}

.content .waaromDouven {
  position: relative;
  clear: both;
}

.content .waaromDouven .leftFill {
  background: #2E80A8 url("/img/bg_repeat.png");
  background-image: url("/img/bg_repeat.png"), -webkit-gradient(linear, left top, right top, from(#2E80A8), to(#2A7896));
  background-image: url("/img/bg_repeat.png"), linear-gradient(90deg, #2E80A8, #2A7896);
  position: absolute;
  left: -46.42857143%;
  width: 92.85714286%;
  height: 100%;
}

.content .waaromDouven .left {
  width: 37.5%;
  padding: 40px 0 40px 4.16666667%;
  color: white;
}

.content .waaromDouven .left a.button {
  margin-top: 30px;
}

.content .waaromDouven .right {
  width: 41.66666667%;
  margin-left: 20.83333333%;
  padding: 40px 0;
  color: #2E80A8;
}

@media screen and (max-width: 1100px) {
  .content .waaromDouven .right {
    width: 45.83333333%;
    margin-left: 16.66666667%;
  }
}

@media screen and (max-width: 980px) {
  .content .waaromDouven .right {
    width: 50%;
    margin-left: 12.5%;
  }
}

.content .waaromDouven .right ul {
  font-weight: bold;
  font-size: 22px;
  line-height: 50px;
  margin: 0;
  padding: 0 0 0 15px;
}

.content .waaromDouven .right ul li {
  padding-left: 75px;
  list-style: none;
  position: relative;
  margin: 0;
  font-weight: 600;
}

.content .waaromDouven .right ul li:before {
  content: '';
  width: 24px;
  height: 100%;
  position: absolute;
  left: 0;
  top: -2px;
  background: url("/img/svg/list-check.svg") no-repeat left 15px;
  background-size: 24px;
}

@media screen and (max-width: 1100px) {
  .content .waaromDouven .right ul li {
    padding-left: 50px;
  }
}

.content .catBlock {
  padding: 30px 0 30px 0;
  margin-top: 90px;
  margin-bottom: 120px;
  background-color: white;
  color: #2E294E;
  -webkit-box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
}

.content .catBlock .left,
.content .catBlock .right {
  width: 41.66666667%;
  margin-left: 8.33333333%;
  margin-bottom: 60px;
}

.content .catBlock .left {
  margin-bottom: 30px;
}

.content .catBlock .catItem {
  width: 37.5%;
  margin-left: 8.33333333%;
  position: relative;
  overflow: visible;
  margin-bottom: 60px;
}

.content .catBlock .catItem:before {
  content: " ";
  display: block;
  height: 80%;
  position: absolute;
  left: -30px;
  top: 10%;
  width: 30px;
  background-color: #EEB633;
}

.content .catBlock .catItem:nth-child(even) {
  margin-left: 12.5%;
}

.content .catBlock .catItem a {
  text-decoration: none;
}

.content .catBlock .catItem a:hover .imgHolder {
  background-size: 105%;
}

.content .catBlock .catItem a:hover .imgHolder:after {
  opacity: 0.2;
  background-color: #001E2E;
}

.content .catBlock .catItem a:hover .yellow-block-overlay:after {
  width: 72px;
  height: 72px;
}

.content .catBlock .catItem .imgHolder {
  position: relative;
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center 65%;
  -webkit-transition: background-size 0.3s;
  transition: background-size 0.3s;
}

.content .catBlock .catItem .imgHolder:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #2E80A8;
  opacity: 0.2;
  -webkit-transition: opacity 0.3s, background-color 0.3s;
  transition: opacity 0.3s, background-color 0.3s;
}

.content .catBlock .catItem .imgHolder .yellow-block-overlay {
  position: absolute;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 4;
}

.content .catBlock .catItem .imgHolder .yellow-block-overlay:after {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 3px;
  background: #F1B933 url("/img/svg/arrow_right.svg") no-repeat 50% 50%;
  background-size: 35%;
  -webkit-transition: width 0.3s, height 0.3s;
  transition: width 0.3s, height 0.3s;
}

.content .catBlock .catItem h4 {
  background: -webkit-gradient(linear, left top, right top, from(#2E80A8), to(#2A7896));
  background: linear-gradient(90deg, #2E80A8, #2A7896);
  color: white;
  margin: 0;
  padding: 10px 24px 10px 80px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.13px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.content .catBlock .catItem span {
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: 150px;
  margin: 17px 0 17px 40px;
}

.content .catBlock .catItem span.cooling {
  background-position: -5px -107px;
}

.content .catBlock .catItem span.events {
  background-position: -45px -107px;
}

.content .catBlock .catItem span.mobility {
  background-position: -81px -107px;
}

.content .catBlock .catItem span.transportservice {
  background-position: -120px -107px;
}

.content .catBlock figure {
  background-position: center center;
}

.content .referencesblock {
  padding-bottom: 45px;
  position: relative;
  background-color: white;
  -webkit-box-shadow: 0px -20px 20px -10px rgba(0, 0, 0, 0.03);
          box-shadow: 0px -20px 20px -10px rgba(0, 0, 0, 0.03);
}

.content .referencesblock .main {
  width: 100%;
  padding-top: 30px;
}

.content .referencesblock .main h3 {
  color: #2E80A8;
  font-size: 28px;
  margin-bottom: 2em;
}

.content .referencesblock .main ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
  padding-left: 0;
}

.content .referencesblock .main ul a {
  text-decoration: none;
}

.content .referencesblock .main ul li {
  width: 125px;
  font-size: 16px;
  padding-top: 74px;
  background: url("/img/svg/refs.svg") no-repeat left top;
  background-size: 370px;
  text-align: center;
  color: #CED5D9;
}

.content .referencesblock .main ul li:hover {
  background: url("/img/svg/refs_blue.svg") no-repeat left top;
  background-size: 370px;
}

.content .referencesblock .main ul li.ref-0 {
  background-position: 27.5px top;
}

.content .referencesblock .main ul li.ref-1 {
  background-position: -115.5px top;
}

.content .referencesblock .main ul li.ref-2 {
  background-position: -259.5px top;
}

.content .referencesblock .main ul li.ref-3 {
  background-position: 27.5px -111px;
}

.content .referencesblock .main ul li.ref-4 {
  background-position: -110.5px -111px;
}

.content .referencesblock .main ul li.ref-4:hover {
  background-position: -110.5px -191px;
}

.content .referencesblock .main ul li.ref-5 {
  background-position: -250px -111px;
}

.content .referencesblock .main ul li.ref-6 {
  background: url("/img/svg/referenties/bavaria.svg") no-repeat left top;
  background-size: 290px;
  background-position: -85px 0px;
}

.content .referencesblock .main ul li.ref-6:hover {
  background-position: 20px 0px;
}

.content .referencesblock .main ul li.ref-7 {
  background: url("/img/svg/referenties/fresh-grooves.svg") no-repeat left top;
  background-size: 370px;
  background-position: -128px 0px;
}

.content .referencesblock .main ul li.ref-7:hover {
  background-position: 10px 0px;
}

.content .referencesblock .main ul li.ref-8 {
  background: url("/img/svg/referenties/klok.svg") no-repeat left top;
  background-size: 470px;
  background-position: -179px 20px;
}

.content .referencesblock .main ul li.ref-8:hover {
  background-position: 2px 20px;
}

.content .buttonsblock {
  height: 300px;
}

.content .buttonsblock:before {
  content: " ";
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
  background-image: url("/img/bg_repeat.png"), -webkit-gradient(linear, left top, right top, from(#2E80A8), to(#2A7896));
  background-image: url("/img/bg_repeat.png"), linear-gradient(90deg, #2E80A8, #2A7896);
  height: 300px;
  position: absolute;
  left: 0;
  width: 100%;
}

.content .buttonsblock .left,
.content .buttonsblock .right {
  width: 50%;
  padding: 100px 0;
  text-align: center;
}

.content .buttonsblock .left .button,
.content .buttonsblock .right .button {
  width: 75%;
  min-width: 410px;
  max-width: 480px;
  height: 80px;
  padding: 20px;
  font-size: 24px;
  letter-spacing: -0.12px;
  background-color: #2E80A8;
}

.content .buttonsblock .left .button:hover,
.content .buttonsblock .right .button:hover {
  background-color: #338fbc;
}

@media screen and (max-width: 1050px) {
  .content .buttonsblock .left .button,
  .content .buttonsblock .right .button {
    width: 95%;
    font-size: 20px;
    padding: 24px;
    min-width: unset;
  }

  .content .buttonsblock .left .button span,
  .content .buttonsblock .right .button span {
    width: 50px;
  }
}

html.ie .content .waaromDouven .right ul li:before {
  height: 120%;
  top: -20px;
}

html.ie .content .referencesblock .main ul li.ref-0 {
  background-position: 27.5px -55px;
}

html.ie .content .referencesblock .main ul li.ref-0:hover {
  background-position: 27.5px -15px;
}

html.ie .content .referencesblock .main ul li.ref-1 {
  background-position: -115.5px -55px;
}

html.ie .content .referencesblock .main ul li.ref-1:hover {
  background-position: -115.5px -15px;
}

html.ie .content .referencesblock .main ul li.ref-2 {
  background-position: -259.5px -55px;
}

html.ie .content .referencesblock .main ul li.ref-2:hover {
  background-position: -259.5px -15px;
}

html.ie .content .referencesblock .main ul li.ref-3 {
  background-position: 27.5px -166px;
}

html.ie .content .referencesblock .main ul li.ref-3:hover {
  background-position: 27.5px -126px;
}

html.ie .content .referencesblock .main ul li.ref-4 {
  background-position: -110.5px -166px;
}

html.ie .content .referencesblock .main ul li.ref-4:hover {
  background-position: -110.5px -206px;
}

html.ie .content .referencesblock .main ul li.ref-5 {
  background-position: -250px -166px;
}

html.ie .content .referencesblock .main ul li.ref-5:hover {
  background-position: -250px -126px;
}

@media screen and (max-width: 840px) {
  .content .grid-row {
    width: 100%;
    padding-left: 8.33333333%;
    padding-right: 8.33333333%;
  }

  .content .grid-row .grid-col {
    width: 100%;
  }

  .content .afspraakblok {
    padding: 0;
    padding-top: 15px;
  }

  .content .afspraakblok .leftborder {
    display: none;
  }

  .content .afspraakblok .left {
    margin: 0;
    padding-left: 8.33333333%;
    padding-right: 8.33333333%;
  }

  .content .afspraakblok .left a.button {
    margin-top: 30px;
  }

  .content .afspraakblok .right {
    margin: 60px 0 90px 0;
  }

  .content .afspraakblok .right .inner-right {
    width: 41.66666667%;
    margin-right: 0;
    bottom: -50px;
  }

  .content .waaromDouven {
    padding: 0;
  }

  .content .waaromDouven .leftFill {
    display: none;
  }

  .content .waaromDouven .left {
    padding: 20px 8.33333333% 60px 8.33333333%;
    background: #2E80A8 url("/img/bg_repeat.png") repeat;
  }

  .content .waaromDouven .right {
    padding: 10px 8.33333333% 40px 8.33333333%;
    margin-left: 0;
  }

  .content .waaromDouven .right ul {
    padding: 0;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .content .waaromDouven .right ul li {
    width: 49%;
  }

  .content .catBlock {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .content .catBlock .left,
  .content .catBlock .right {
    margin: 0;
    padding: 0;
  }

  .content .catBlock .catItem {
    margin-left: 0;
  }

  .content .catBlock .catItem:nth-child(even) {
    margin-left: 0;
  }

  .content .referencesblock .main ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .content .referencesblock .main ul li {
    margin-top: 30px;
    margin-right: 50px;
  }

  .content .buttonsblock .left,
  .content .buttonsblock .right {
    padding: 40px 0 15px 0;
  }
}

@media screen and (max-width: 760px) {
  .content .afspraakblok .left {
    padding-bottom: 50px;
  }

  .content .waaromDouven .right ul li {
    width: 100%;
  }
}

@media screen and (max-width: 660px) {
  .content .referencesblock .main ul li {
    margin-right: 20px;
  }
}

@media screen and (max-width: 570px) {
  .content .afspraakblok .right .inner-right {
    width: 55%;
  }

  .content .waaromDouven .leftFill {
    height: 51%;
  }

  .content .catBlock .catItem .imgHolder {
    background-size: cover;
  }
}

@media screen and (max-width: 435px) {
  .content .afspraakblok .right {
    height: auto;
    margin: 0;
    background-color: transparent;
  }

  .content .afspraakblok .right .img-holder {
    height: 580px;
    width: 110%;
    left: -9%;
  }

  .content .afspraakblok .right .inner-right {
    width: 100%;
    position: relative;
    bottom: 124px;
    margin-bottom: -130px;
  }

  .content .waaromDouven .leftFill {
    height: 53%;
  }

  .content .catBlock {
    padding: 0;
  }

  .content .catBlock .left {
    padding: 0 8.33333333%;
  }

  .content .catBlock .catItem {
    margin-bottom: 0;
  }

  .content .buttonsblock .left .button,
  .content .buttonsblock .right .button {
    width: 100%;
    font-size: 16px;
    padding: 24px 14px;
  }

  .content .buttonsblock .left .button span,
  .content .buttonsblock .right .button span {
    width: 42px;
  }
}

@media screen and (max-width: 380px) {
  .content .waaromDouven .leftFill {
    height: 48%;
  }
}

@media screen and (max-width: 360px) {
  .content .referencesblock .main ul li {
    margin-right: 0;
  }
}

/*==========================================================================
  Contact page
  @mixin ========================================================================= */

body.contact .content {
  padding-bottom: 120px;
}

body.contact .content .form-holder {
  position: relative;
  top: -60px;
  height: 500px;
  background-color: white;
  -webkit-box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
}

body.contact .content .form-holder h3 {
  color: #2E80A8;
  font-weight: bold;
  font-size: 26px;
}

body.contact .content .form-holder .left {
  width: 62.5%;
  padding: 50px 0 50px 4.16666667%;
}

body.contact .content .form-holder .right {
  padding: 50px 50px 50px 8.33333333%;
  height: 100%;
  width: 37.5%;
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
  color: white;
}

body.contact .content .form-holder .right .contact-dude {
  display: block;
  position: absolute;
  width: 130px;
  height: 120px;
  text-align: center;
  right: 50px;
  top: 90px;
}

body.contact .content .form-holder .right .contact-dude .img-holder {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  background: #E5E5E5 url("/img/Mark_Douven.png") repeat 50% 6%;
  background-size: 200%;
}

body.contact .content .form-holder .right .contact-dude p {
  margin: 3px 0;
}

body.contact .content .form-holder .right p {
  position: relative;
}

body.contact .content .form-holder .right a {
  text-decoration: none;
  color: white;
}

body.contact .content .form-holder .right h3 {
  color: white;
}

body.contact .content .form-holder .right span {
  display: block;
  position: absolute;
  width: 17px;
  height: 17px;
  margin-top: 5px;
  left: -50px;
  background-image: url(/img/svg/contact_icons.svg);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100%;
}

body.contact .content .form-holder .right span.location {
  background-position: left top;
}

body.contact .content .form-holder .right span.phone {
  background-position: left -27px;
}

body.contact .content .form-holder .right span.fax {
  background-position: left -55px;
}

body.contact .content .form-holder .right span.mail {
  background-position: left -82px;
}

body.contact .content .form-holder .form-left,
body.contact .content .form-holder .form-right {
  width: 42.85714286%;
}

body.contact .content .form-holder .form-right {
  margin-left: 7.14285714%;
}

body.contact .content .form-holder .form-right .submit {
  margin-top: 25px;
  width: 50%;
  min-width: 50%;
}

body.contact .content .mapholder {
  width: 78.57142857%;
  background-color: white;
  -webkit-box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
  height: 500px;
  border-bottom: solid 4px #EEB633;
  overflow: hidden;
}

body.contact .content .mapholder #map {
  width: 100%;
  height: 105%;
}

@media screen and (max-width: 1400px) {
  body.contact .content {
    padding-bottom: 0;
  }

  body.contact .content .form-holder {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-align-items: initial;
    -moz-align-items: initial;
    -ms-align-items: initial;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    height: auto;
  }

  body.contact .content .form-holder .left,
  body.contact .content .form-holder .right {
    width: 100%;
  }

  body.contact .content .form-holder .left {
    padding: 0 0 40px 4.16666667%;
  }

  body.contact .content .form-holder .left form .grid-row {
    padding-left: 0;
    padding-right: 0;
  }

  body.contact .content .form-holder .right {
    padding: 0 50px 40px 8.33333333%;
  }

  body.contact .content .form-holder .right > p {
    width: 35%;
    display: inline-block;
  }

  body.contact .content .form-holder .right .contact-dude {
    top: 85px;
  }
}

@media screen and (max-width: 1030px) {
  body.contact .content {
    padding-bottom: 0;
  }

  body.contact .content .form-holder .right .contact-dude {
    right: 20px;
  }
}

@media screen and (max-width: 840px) {
  body.contact .content {
    padding-bottom: 0;
  }

  body.contact .content .form-holder {
    padding-left: 0;
    padding-right: 0;
    top: 0;
  }

  body.contact .content .form-holder .left,
  body.contact .content .form-holder .right {
    width: 100%;
  }

  body.contact .content .mapholder {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    border-top: solid 1px #EEB633;
  }
}

@media screen and (max-width: 740px) {
  body.contact .content .form-holder .right span {
    left: -25px;
  }

  body.contact .content .form-holder .right .contact-dude {
    width: 165px;
    top: 15px;
    right: 30px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

  body.contact .content .form-holder .right .contact-dude .img-holder {
    width: 90px;
    height: 90px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  body.contact .content .form-holder .right p {
    width: 40%;
  }

  body.contact .content .form-holder .right p:last-child {
    width: 55%;
  }
}

@media screen and (max-width: 550px) {
  body.contact .content .form-holder .right p {
    width: 100%;
  }
}

@media screen and (max-width: 435px) {
  body.contact .content .form-holder .form-left,
  body.contact .content .form-holder .form-right {
    width: 96%;
    margin-left: 0;
  }
}

@media screen and (max-width: 435px) {
  body.contact .content .form-holder .right {
    padding-bottom: 30px;
  }

  body.contact .content .form-holder .right p {
    padding-left: 8.33333333%;
  }

  body.contact .content .form-holder .right p:last-child {
    width: 100%;
  }

  body.contact .content .form-holder .right h3 {
    margin-bottom: 0;
  }

  body.contact .content .form-holder .right .contact-dude {
    display: none;
  }

  body.contact .content .form-holder .right span {
    left: -5px;
  }
}

/*==========================================================================
  Contact page
  @mixin ========================================================================= */

body.transportservice .content .titleHolder {
  background-color: white;
  border-left: solid 15px #EEB633;
  color: #001E2E;
  width: 100%;
  margin-top: 60px;
  font-weight: bold;
  padding-left: 3.57142857%;
}

body.transportservice .content .titleHolder h1 {
  color: #001E2E;
  font-weight: 600;
}

body.transportservice .content .titleHolder span {
  margin: 5px 10px -7px -15px;
}

body.transportservice .content .titleHolder span.transportservice {
  width: 50px;
  background-position: -160px -171px;
  background-repeat: no-repeat;
  background-size: 200px;
}

body.transportservice .content h1 {
  color: white;
  display: inline-block;
  font-size: 30px;
  line-height: 80px;
}

body.transportservice .content .main {
  margin-top: 60px;
  margin-bottom: 60px;
}

body.transportservice .content .main .left {
  width: 33.33333333%;
  padding-left: 3.57142857%;
}

body.transportservice .content .main .left p {
  margin: 0;
}

body.transportservice .content .main .left h3,
body.transportservice .content .main .left h4 {
  font-size: 22px;
  color: #2E80A8;
}

body.transportservice .content .main .left a.button {
  padding: 7.5px 20px;
  min-width: 180px;
}

body.transportservice .content .main .right {
  width: 54.16666667%;
  margin-left: 8.33333333%;
}

body.transportservice .content .main .right figure {
  position: relative;
  width: 100%;
  height: 320px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 35%;
}

body.transportservice .content .transBlock .top {
  background-color: #2E80A8;
  padding: 50px 7.14285714% 90px 7.14285714%;
}

body.transportservice .content .transBlock .top .header {
  text-align: center;
}

body.transportservice .content .transBlock .top .header h1 {
  margin-top: 0;
  line-height: 0;
}

body.transportservice .content .transBlock .top .icon-holder {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: solid 2px white;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 55px;
}

body.transportservice .content .transBlock .top .icon-holder .icon {
  display: block;
  width: 153px;
  padding-top: 100px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: white;
  text-align: center;
  position: relative;
  top: 25px;
  background-image: url("/img/svg/transport_icons.svg");
  background-repeat: no-repeat;
  background-size: 280%;
  background-position: 50px top;
}

body.transportservice .content .transBlock .top .icon-holder .icon span {
  position: relative;
  top: 55px;
}

body.transportservice .content .transBlock .top .icon-holder .icon:after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 100%;
  border: solid 2px #E4E4E4;
  background-color: #2E80A8;
  position: absolute;
  left: calc(50% - 5px);
  bottom: -40px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.active {
  color: #EDB533;
}

body.transportservice .content .transBlock .top .icon-holder .icon.active:after {
  border: solid 2px #EEB633;
}

body.transportservice .content .transBlock .top .icon-holder .icon.active.choose {
  background-image: url("/img/svg/icons.svg");
  background-size: 245%;
  background-position: -48.5px 50px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.active.contact {
  background-image: url("/img/svg/icons.svg");
  background-size: 245%;
  background-position: 58px 60px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.active.ship {
  background-position: -195px -110px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.active.use {
  background-position: -330px -110px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.choose {
  margin-left: -75px;
  background-image: url("/img/svg/icons.svg");
  background-size: 245%;
  background-position: -264px 50px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.contact {
  background-image: url("/img/svg/icons.svg");
  background-size: 245%;
  background-position: -158px 60px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.ship {
  background-position: -195px 35px;
}

body.transportservice .content .transBlock .top .icon-holder .icon.use {
  background-position: -330px 35px;
  margin-right: -65px;
}

body.transportservice .content .transBlock .bottom {
  background-color: white;
  margin-bottom: 60px;
}

body.transportservice .content .transBlock .bottom .block-wrapper {
  display: block;
  position: relative;
}

body.transportservice .content .transBlock .bottom .block-wrapper .service-block {
  position: absolute;
  opacity: 0;
  padding: 60px 8.33333333%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

body.transportservice .content .transBlock .bottom .block-wrapper .service-block.active {
  position: relative;
  opacity: 1;
}

body.transportservice .content .transBlock .bottom .block-wrapper .service-block .left {
  width: 70%;
}

body.transportservice .content .transBlock .bottom .block-wrapper .service-block .left p {
  display: inline-block;
  width: 42.85714286%;
  margin: 0;
  margin-right: 5%;
}

body.transportservice .content .transBlock .bottom .block-wrapper .service-block .right {
  width: 30%;
}

body.transportservice .content .transBlock .bottom .block-wrapper .service-block .right figure {
  position: relative;
  width: 100%;
  height: 167px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

body.transportservice .content .transBlock .bottom .video-block {
  height: 280px;
  display: block;
  padding: 30px 8.33333333%;
}

body.transportservice .content .transBlock .bottom .video-block .left {
  width: 70%;
  height: 100%;
}

body.transportservice .content .transBlock .bottom .video-block .left iframe {
  width: 100%;
  height: 100%;
}

html.ie body.transportservice .content .titleHolder span.transportservice {
  background-position: -300px -302px;
  background-size: 400px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.choose {
  background-size: 600%;
  background-position: -600px 30px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.contact {
  background-size: 600%;
  background-position: -450px 30px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.ship {
  background-position: -313px -20px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.use {
  background-position: -500px -20px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.active.choose,
html.ie body.transportservice .content .transBlock .top .icon-holder .icon:hover.choose {
  background-size: 600%;
  background-position: -295px 30px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.active.contact,
html.ie body.transportservice .content .transBlock .top .icon-holder .icon:hover.contact {
  background-size: 600%;
  background-position: -144.5px 30px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.active.ship,
html.ie body.transportservice .content .transBlock .top .icon-holder .icon:hover.ship {
  background-position: -313px -228px;
}

html.ie body.transportservice .content .transBlock .top .icon-holder .icon.active.use,
html.ie body.transportservice .content .transBlock .top .icon-holder .icon:hover.use {
  background-position: -500px -228px;
}

@media screen and (max-width: 840px) {
  body.transportservice .content .top {
    padding-left: 0;
    padding-right: 0;
  }

  body.transportservice .content .top .grid-row {
    padding-left: 0;
    padding-right: 0;
  }

  body.transportservice .content .top .grid-row .titleHolder {
    margin-top: 0;
  }

  body.transportservice .content .main {
    margin-top: 30px;
    padding-left: 4.16666667%;
    padding-right: 4.16666667%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  body.transportservice .content .main .left,
  body.transportservice .content .main .right {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  body.transportservice .content .main .left {
    margin-top: 30px;
  }

  body.transportservice .content .transBlock {
    display: none;
  }

  body.transportservice .content .transBlock .bottom {
    margin-bottom: 0;
  }

  body.transportservice .content .transBlock .bottom .block-wrapper .service-block {
    padding: 60px 0;
  }
}

/*==========================================================================
  Contact page
  @mixin ========================================================================= */

body.about .content-header {
  position: relative;
  display: block;
  height: 450px;
  top: -225px;
  margin-bottom: -225px;
  background-repeat: no-repeat;
  background-color: white;
  background-size: cover;
  background-position: center 40%;
}

body.about .content .afspraakblok {
  height: auto;
  min-height: 550px;
}

body.about .content .afspraakblok .left {
  margin-bottom: 0;
  color: #001E2E;
}

body.about .content .afspraakblok .left a.button {
  min-width: 300px;
}

body.about .content .afspraakblok .left a.button:after {
  right: 6%;
}

body.about .content .top,
body.about .content .bottom {
  padding-top: 90px;
  background-color: white;
  margin-bottom: 0;
}

body.about .content .top .left,
body.about .content .top .right,
body.about .content .bottom .left,
body.about .content .bottom .right {
  width: 50%;
  margin: 0 auto;
  overflow: visible;
}

body.about .content .top .left figure,
body.about .content .top .right figure,
body.about .content .bottom .left figure,
body.about .content .bottom .right figure {
  position: relative;
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}

body.about .content .top .left figure:after,
body.about .content .top .right figure:after,
body.about .content .bottom .left figure:after,
body.about .content .bottom .right figure:after {
  content: " ";
  position: absolute;
  display: block;
  width: 15px;
  height: 90%;
  background-color: #EEB633;
}

body.about .content .top .left a.button,
body.about .content .top .right a.button,
body.about .content .bottom .left a.button,
body.about .content .bottom .right a.button {
  color: #2E80A8;
  margin-top: 30px;
}

body.about .content .top .left a.button:hover,
body.about .content .top .right a.button:hover,
body.about .content .bottom .left a.button:hover,
body.about .content .bottom .right a.button:hover {
  color: #001E2E;
}

body.about .content .top .left figure,
body.about .content .bottom .left figure {
  left: -8.33333333%;
}

body.about .content .top .left figure:after,
body.about .content .bottom .left figure:after {
  left: auto;
  right: -7.5px;
  bottom: 0;
}

body.about .content .top .right figure,
body.about .content .bottom .right figure {
  right: -8.33333333%;
}

body.about .content .top .right figure:after,
body.about .content .bottom .right figure:after {
  right: auto;
  left: -7.5px;
  top: 0;
}

body.about .content .top {
  color: #001E2E;
}

body.about .content .top .right {
  width: 33.33333333%;
  margin-left: 8.33333333%;
}

body.about .content .top .right a.button:after {
  background-position: -86px center;
}

body.about .content .top .right a.button:hover:after {
  background-position: -60px center;
}

body.about .content .top h2 {
  color: #2E80A8;
}

body.about .content .bottom {
  padding-bottom: 90px;
  color: #001E2E;
}

body.about .content .bottom .left {
  width: 33.33333333%;
  margin: 0 8.33333333%;
}

body.about .content .bottom .left a.button:after {
  background-position: -86px center;
}

body.about .content .bottom .left a.button:hover:after {
  background-position: -60px center;
}

body.about .content .bottom h2 {
  color: #2E80A8;
}

@media screen and (max-width: 840px) {
  body.about .content-header {
    width: 100%;
    top: 0;
    margin-bottom: 0;
  }

  body.about .content .afspraakblok .right {
    float: none;
  }

  body.about .content .top,
  body.about .content .bottom {
    margin-top: 0;
    padding-left: 8.33333333%;
    padding-right: 8.33333333%;
  }

  body.about .content .top .left,
  body.about .content .top .right,
  body.about .content .bottom .left,
  body.about .content .bottom .right {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  body.about .content .top .left figure,
  body.about .content .top .right figure,
  body.about .content .bottom .left figure,
  body.about .content .bottom .right figure {
    left: 0;
    right: 0;
  }

  body.about .content .bottom {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media screen and (max-width: 435px) {
  body.about .content .top,
  body.about .content .bottom {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.about .content .top .right,
  body.about .content .bottom .left {
    padding-left: 8.33333333%;
    padding-right: 8.33333333%;
  }

  body.about .content .top {
    padding-bottom: 30px;
  }

  body.about .content .bottom {
    padding-top: 30px;
    padding-bottom: 60px;
  }
}

/*==========================================================================
  References page
  @mixin ========================================================================= */

html body.references .content .refHeader {
  margin-top: 90px;
}

html body.references .content .refHeader h3 {
  font-size: 26px;
  color: #2E80A8;
  margin-left: 4.16666667%;
}

html body.references .content .refBlock {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  height: auto;
  margin-bottom: 120px;
  background-color: white;
  color: #2E294E;
  -webkit-box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
}

html body.references .content .refBlock .left {
  width: 29.16666667%;
  height: auto;
  padding: 30px 4.16666667%;
}

html body.references .content .refBlock .left ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 28px;
}

html body.references .content .refBlock .left ul.refs {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

html body.references .content .refBlock .left ul.refs li {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 50%;
  text-align: center;
  color: #CED5D9;
  margin-bottom: 50px;
  position: relative;
}

html body.references .content .refBlock .left ul.refs li.active {
  pointer-events: none;
}

html body.references .content .refBlock .left ul.refs li.active .ref-holder {
  background: url("/img/svg/refs_yellow.svg") no-repeat left top;
  background-size: 370px;
}

html body.references .content .refBlock .left ul.refs li:hover .ref-holder {
  background: url("/img/svg/refs_blue.svg") no-repeat left top;
  background-size: 370px;
}

html body.references .content .refBlock .left ul.refs li:hover.ref-pinkpop .ref-holder {
  background-position: -110.5px -191px;
}

html body.references .content .refBlock .left ul.refs li .ref-holder {
  display: inline-block;
  width: 125px;
  height: 71px;
  background: url("/img/svg/refs.svg") no-repeat left top;
  background-size: 370px;
  cursor: pointer;
}

html body.references .content .refBlock .left ul.refs li.ref-rock-werchter .ref-holder {
  background-position: 27.5px top;
}

html body.references .content .refBlock .left ul.refs li.ref-pukkelpop .ref-holder {
  background-position: -115.5px top;
}

html body.references .content .refBlock .left ul.refs li.ref-bospop .ref-holder {
  background-position: -259.5px top;
}

html body.references .content .refBlock .left ul.refs li.ref-moulin-blues .ref-holder {
  background-position: 27.5px -111px;
}

html body.references .content .refBlock .left ul.refs li.ref-pinkpop .ref-holder {
  background-position: -110.5px -111px;
}

html body.references .content .refBlock .left ul.refs li.ref-pinkpop.active .ref-holder {
  background-position: -110.5px -191px;
}

html body.references .content .refBlock .left ul.refs li.ref-intents .ref-holder {
  background-position: -250px -111px;
}

html body.references .content .refBlock .left ul.refs li.ref-bavaria .ref-holder {
  background: url("/img/svg/referenties/bavaria.svg") no-repeat left top;
  background-size: 290px;
  background-position: -85px 0px;
}

html body.references .content .refBlock .left ul.refs li.ref-bavaria .ref-holder:hover {
  background-position: 20px 0px;
}

html body.references .content .refBlock .left ul.refs li.ref-bavaria.active .ref-holder {
  background-position: -195px 0px;
}

html body.references .content .refBlock .left ul.refs li.ref-freshgrooves .ref-holder {
  background: url("/img/svg/referenties/fresh-grooves.svg") no-repeat left top;
  background-size: 370px;
  background-position: -128px 0px;
}

html body.references .content .refBlock .left ul.refs li.ref-freshgrooves .ref-holder:hover {
  background-position: 10px 0px;
}

html body.references .content .refBlock .left ul.refs li.ref-freshgrooves.active .ref-holder {
  background-position: -266px 0px;
}

html body.references .content .refBlock .left ul.refs li.ref-deklok .ref-holder {
  background: url("/img/svg/referenties/klok.svg") no-repeat left top;
  background-size: 470px;
  background-position: -179px 20px;
}

html body.references .content .refBlock .left ul.refs li.ref-deklok .ref-holder:hover {
  background-position: 2px 20px;
}

html body.references .content .refBlock .left ul.refs li.ref-deklok.active .ref-holder {
  background-position: -348px 20px;
}

html body.references .content .refBlock .right {
  width: 70.83333333%;
  height: auto;
  z-index: 0;
  overflow: visible;
}

html body.references .content .refBlock .right .refItem {
  position: absolute;
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  height: 0;
  width: 100%;
  z-index: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

html body.references .content .refBlock .right .refItem.active {
  position: relative;
  height: 100%;
  opacity: 1;
  z-index: 5;
}

html body.references .content .refBlock .right .refItem.active .quoteHolder {
  height: 100%;
  min-height: 750px;
}

html body.references .content .refBlock .right .refItem.active .imgHolder {
  height: 750px;
  max-height: 750px;
}

html body.references .content .refBlock .right .refItem .quoteHolder {
  width: 35.29411765%;
  padding: 0 5.88235294%;
  height: 0;
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
}

html body.references .content .refBlock .right .refItem .quoteHolder .quote {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 750px;
  opacity: 0;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.08px;
  padding: 60px 0;
  color: white;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

html body.references .content .refBlock .right .refItem .quoteHolder .quote.active {
  position: relative;
  opacity: 1;
}

html body.references .content .refBlock .right .refItem .quoteHolder .quote h2 {
  margin: 0;
  margin-bottom: 50px;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: -0.15px;
  color: #E8F0F4;
}

html body.references .content .refBlock .right .refItem .quoteHolder .quote blockquote {
  position: relative;
  margin: 0;
  padding: 0;
}

html body.references .content .refBlock .right .refItem .quoteHolder .quote blockquote:before {
  content: "\201C";
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #F0B833;
  position: absolute;
  top: 0;
  left: -0.8em;
}

html body.references .content .refBlock .right .refItem .quoteHolder .quote blockquote:after {
  content: "\201D";
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #F0B833;
  position: absolute;
  bottom: -0.8em;
  right: -0.8em;
}

html body.references .content .refBlock .right .refItem .imgHolder {
  width: 64.70588235%;
  height: 0;
  background-color: #D0D7D5;
  background-size: cover;
  background-repeat: no-repeat;
}

html body.references .content .refLink {
  position: absolute;
  bottom: 0;
  z-index: 10;
  right: -25%;
  min-width: 180px;
  border-radius: 0;
}

html.ie body.references .content .refBlock .left ul.refs li.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li:hover .ref-holder {
  background-size: 460px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-rock-werchter .ref-holder {
  background-position: 27.5px -12.5px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-rock-werchter.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li.ref-rock-werchter:hover .ref-holder {
  background-position: -20px 0;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-pukkelpop .ref-holder {
  background-position: -115.5px -12.5px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-pukkelpop.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li.ref-pukkelpop:hover .ref-holder {
  background-position: -160.5px 1px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-bospop .ref-holder {
  background-position: -259.5px -12.5px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-bospop.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li.ref-bospop:hover .ref-holder {
  background-position: -303px 2px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-moulin-blues .ref-holder {
  background-position: 27.5px -125px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-moulin-blues.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li.ref-moulin-blues:hover .ref-holder {
  background-position: -20px -111.5px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-pinkpop .ref-holder {
  background-position: -110.5px -125px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-pinkpop.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li.ref-pinkpop:hover .ref-holder {
  background-position: -155.5px -190px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-intents .ref-holder {
  background-position: -246px -126px;
}

html.ie body.references .content .refBlock .left ul.refs li.ref-intents.active .ref-holder,
html.ie body.references .content .refBlock .left ul.refs li.ref-intents:hover .ref-holder {
  background-position: -290px -111px;
}

@media screen and (max-width: 1440px) {
  html body.references .content .refHeader {
    margin-top: 0;
    padding: 0 4.16666667%;
    color: #2E80A8;
    background-color: white;
  }

  html body.references .content .refBlock {
    display: block;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }

  html body.references .content .refBlock .left,
  html body.references .content .refBlock .right {
    width: 100%;
  }

  html body.references .content .refBlock .left {
    height: 30%;
    padding-bottom: 0;
  }

  html body.references .content .refBlock .left ul.refs li {
    width: 15%;
  }

  html body.references .content .refBlock .right {
    height: 70%;
  }

  html body.references .content .refBlock .right .refItem {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 840px) {
  html body.references .content .refBlock {
    height: auto;
  }

  html body.references .content .refBlock .left {
    height: 35%;
    padding-bottom: 0;
  }

  html body.references .content .refBlock .left ul.refs li {
    width: 33%;
    margin-bottom: 25px;
  }

  html body.references .content .refBlock .right {
    height: 65%;
  }

  html body.references .content .refBlock .right .refItem {
    display: block;
    -webkit-transition: height 0.3s;
    transition: height 0.3s;
  }

  html body.references .content .refBlock .right .refItem .quoteHolder {
    width: 100%;
    height: auto;
    min-height: 30%;
    -webkit-transition: height 0.3s;
    transition: height 0.3s;
  }

  html body.references .content .refBlock .right .refItem .quoteHolder .quote {
    position: relative;
    opacity: 1;
    width: 100%;
    height: auto;
    min-height: auto;
    margin-bottom: 30px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    padding: 5.88235294% 0;
  }

  html body.references .content .refBlock .right .refItem .quoteHolder .quote .refLink {
    bottom: -30px;
    right: -7%;
  }

  html body.references .content .refBlock .right .refItem .imgHolder {
    width: 100%;
  }
}

@media screen and (max-width: 435px) {
  html body.references .content .refBlock .left ul.refs li {
    width: 50%;
  }
}

/*==========================================================================
  News overview page
  @mixin ========================================================================= */

/*==========================================================================
  News detail page
  @mixin ========================================================================= */

/*==========================================================================
  Categories overview page
  @mixin ========================================================================= */

body.categories .content .catBlock .left {
  margin-bottom: 20px;
}

@media screen and (max-width: 840px) {
  body.categories header {
    background: none;
    height: 50px;
  }

  body.categories .content .catBlock .right {
    display: none;
  }
}

/*==========================================================================
  Category detail page
  @mixin ========================================================================= */

.category-header {
  padding: 115px 0 0 0;
}

.category-header .left {
  min-height: 240px;
  width: 95.83333333%;
  margin-left: 4.16666667%;
  border-left: solid 15px #EEB633;
  padding-left: 15px;
}

.category-header .left span {
  margin: -5px 4.16666667%;
}

.category-header .left h1 {
  margin: 0;
  display: inline-block;
}

.category-header .right {
  min-height: 240px;
  width: 80.83333333%;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.08px;
  margin-left: 10.83333333%;
  -webkit-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 60px;
          column-gap: 60px;
  position: relative;
  top: -130px;
}

.category-header .right h4 {
  margin-bottom: 0;
}

.category-header .right h4:first-child {
  margin-top: 0;
}

.category-header .right p {
  margin-top: 0;
}

.category-contents {
  z-index: 1;
  position: relative;
}

.category-contents:after {
  content: " ";
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
  background-image: url("/img/bg_repeat.png"), -webkit-gradient(linear, left top, right top, from(#2E80A8), to(#2A7896));
  background-image: url("/img/bg_repeat.png"), linear-gradient(90deg, #2E80A8, #2A7896);
  position: absolute;
  left: 0;
  width: 100%;
  height: 285px;
  z-index: 0;
  bottom: 0;
}

.category-contents > .grid-col {
  width: 100%;
}

.category-contents > .grid-col > .grid-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 3.57142857%;
}

.category-contents > .grid-col > .grid-row .catItem {
  display: block;
  width: 27.27272727%;
  height: 27.27272727%;
  z-index: 1;
}

.category-contents > .grid-col > .grid-row .catItem a {
  text-decoration: none;
  color: #2E80A8;
}

.category-contents > .grid-col > .grid-row .catItem a:hover .imgHolder:after {
  opacity: 0.15;
}

.category-contents > .grid-col > .grid-row .catItem a:hover .imgHolder .yellow-block-overlay:after {
  width: 72px;
  height: 72px;
}

.category-contents > .grid-col > .grid-row .catItem a .imgHolder {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding-top: 97%;
  margin-bottom: 115px;
  background-size: cover;
  background-position: center center;
  position: relative;
  border-radius: 5px;
}

.category-contents > .grid-col > .grid-row .catItem a .imgHolder:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #001E2E;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.category-contents > .grid-col > .grid-row .catItem a .imgHolder .yellow-block-overlay {
  position: absolute;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

.category-contents > .grid-col > .grid-row .catItem a .imgHolder .yellow-block-overlay:after {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 3px;
  background: #F1B933 url("/img/svg/arrow_right.svg") no-repeat 50% 50%;
  background-size: 35%;
  -webkit-transition: width 0.2s, height 0.2s;
  transition: width 0.2s, height 0.2s;
}

@media screen and (max-width: 840px) {
  body.categories header {
    height: 50px;
  }

  body.categories .category-header,
  body.categories .category-contents {
    width: 100%;
    padding-left: 8.33333333%;
    padding-right: 8.33333333%;
  }

  body.categories .category-header .grid-col,
  body.categories .category-contents .grid-col {
    width: 100%;
  }

  body.categories .category-header {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  body.categories .category-header .left {
    min-height: auto;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  body.categories .category-header .left span {
    margin-left: 0;
  }

  body.categories .category-header .left h1 {
    line-height: 100px;
    margin: 30px 0;
    font-size: 60px;
  }

  body.categories .category-header .right {
    min-height: auto;
    top: 0;
    -webkit-column-count: 1;
            column-count: 1;
    margin-left: 0;
  }

  body.categories .category-contents > .grid-col {
    width: 100%;
  }

  body.categories .category-contents > .grid-col > .grid-row .catItem {
    width: 100%;
  }

  body.categories .category-contents > .grid-col > .grid-row .catItem .imgHolder {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 400px) {
  body.categories .category-header .left span {
    margin: -10px 4.16666667% -10px 0;
  }

  body.categories .category-header .left h1 {
    font-size: 42px;
  }
}

/*==========================================================================
  Category detail page
  @mixin ========================================================================= */

.subcategory-header {
  padding: 0;
}

.subcategory-header > .grid-col {
  width: 83.33333333%;
  margin-left: 8.33333333%;
}

.subcategory-header > .grid-col .subcategory-header-content {
  background-color: white;
  width: 100%;
  display: table;
}

.subcategory-header > .grid-col .subcategory-header-content .titleHolder {
  width: 100%;
  display: table-caption;
  background-color: white;
}

.subcategory-header > .grid-col .subcategory-header-content .titleHolder span {
  margin: -2px 0px -2px 40px;
  width: 30px;
  height: 28px;
}

.subcategory-header > .grid-col .subcategory-header-content .titleHolder span.cooling {
  background-position: -6px -158px;
  background-repeat: no-repeat;
  background-size: 170px;
}

.subcategory-header > .grid-col .subcategory-header-content .titleHolder span.events {
  background-position: -47px -160px;
  background-repeat: no-repeat;
  background-size: 170px;
}

.subcategory-header > .grid-col .subcategory-header-content .titleHolder span.mobility {
  background-position: -92px -160px;
  background-repeat: no-repeat;
  background-size: 170px;
}

.subcategory-header > .grid-col .subcategory-header-content .titleHolder h1 {
  margin: 15px;
  display: inline-block;
  font-weight: bold;
  font-size: 39px;
  letter-spacing: -0.19px;
}

.subcategory-header > .grid-col .subcategory-header-content .left {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
  width: 40%;
  display: table-cell;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li {
  padding-left: 40px;
  border-bottom: solid 1px #EDF5F9;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li:hover {
  background-color: #dfeff6;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li.back {
  padding: 30px 0 30px 40px;
  border-top: solid 1px #EDF5F9;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li.back:hover {
  background-color: transparent;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li.active {
  background-color: #2E80A8;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li.active a {
  color: white;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li a {
  text-decoration: none;
  color: #2E80A8;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li .button {
  color: #2E80A8;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li .button:before {
  background-position: -85px center;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li .button:hover {
  color: #001E2E;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li .button:hover:before {
  background-position: -60px center;
}

.subcategory-header > .grid-col .subcategory-header-content .left ul li h4 {
  margin: 0;
  padding: 15px 0;
}

.subcategory-header > .grid-col .subcategory-header-content .right {
  background: #2E80A8 url("/img/bg_repeat.png") repeat;
  background-image: url("/img/bg_repeat.png"), -webkit-gradient(linear, left top, right top, from(#2E80A8), to(#2A7896));
  background-image: url("/img/bg_repeat.png"), linear-gradient(90deg, #2E80A8, #2A7896);
  width: 60%;
  padding: 7.14285714% 7.14285714% 3.57142857% 7.14285714%;
  display: table-cell;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.08px;
  color: white;
}

.subcategory-header > .grid-col .subcategory-header-content .right h4 {
  margin-bottom: 0;
}

.subcategory-header > .grid-col .subcategory-header-content .right p {
  margin-top: 0;
}

.subcategory-header > .grid-col .subcategory-header-content .right ul {
  list-style-image: url("/img/svg/list-check.svg");
  line-height: 2.5em;
  margin: 0;
  padding: 0;
}

.subcategory-header > .grid-col .subcategory-header-content .right ul li {
  background: url("/img/svg/list-check.svg") no-repeat left 8px;
  background-size: 24px;
  padding-left: 40px;
  list-style: none;
  margin: 0;
}

.subcategory-header > .grid-col .subcategory-header-content .right a.button {
  padding-right: 40px;
}

.subcategory-header > .grid-col .subcategory-header-content .right a.button:after {
  padding-top: 2.15em;
}

.subcategory-products {
  padding: 115px 0;
}

.subcategory-products > .grid-col {
  width: 83.33333333%;
  margin-left: 8.33333333%;
}

.subcategory-products > .grid-col .subcategory-products-content {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  z-index: 1;
  position: relative;
}

.subcategory-products > .grid-col .subcategory-products-content .product {
  display: block;
  width: 30%;
  height: 30%;
  margin-bottom: 60px;
  margin-right: 5%;
  z-index: 1;
}

.subcategory-products > .grid-col .subcategory-products-content .product:nth-child(3) {
  margin-right: 0;
}

.subcategory-products > .grid-col .subcategory-products-content .product a {
  text-decoration: none;
  color: #2E80A8;
}

.subcategory-products > .grid-col .subcategory-products-content .product a:hover .imgHolder:after {
  opacity: 0.15;
}

.subcategory-products > .grid-col .subcategory-products-content .product a:hover .imgHolder .yellow-block-overlay:after {
  width: 72px;
  height: 72px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .imgHolder {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding-top: 60%;
  background-size: cover;
  background-position: center center;
  background-color: #eeeeee;
  position: relative;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .imgHolder:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #001E2E;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .imgHolder .yellow-block-overlay {
  position: absolute;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .imgHolder .yellow-block-overlay:after {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 3px;
  background: #F1B933 url("/img/svg/arrow_right.svg") no-repeat 50% 50%;
  background-size: 35%;
  -webkit-transition: width 0.2s, height 0.2s;
  transition: width 0.2s, height 0.2s;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder {
  background-color: #2E80A8;
  margin: 0;
  color: white;
  width: 100%;
  height: 112px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder {
  height: 100%;
  width: 33.33333333%;
  margin-left: -8px;
  margin-right: 3px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder span {
  position: relative;
  display: inline-block;
  height: 30px;
  font-size: 14px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder span.temp-icon {
  background: url("/img/svg/temp_icons.svg") no-repeat -3.5% top;
  background-size: 360%;
  height: 65px;
  width: 35px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder span.min-temp {
  text-align: right;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder.cool span.min-temp {
  top: -1px;
  right: -3px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder.cool span.max-temp {
  top: -13px;
  left: -5px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder.freeze span.min-temp {
  top: 3px;
  right: -3px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder.freeze span.temp-icon {
  background-position: 102.5% top;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .temp-icon-holder.freeze span.max-temp {
  top: -10px;
  left: -5px;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .product-title {
  display: inline-block;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .product-title h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.subcategory-products > .grid-col .subcategory-products-content .product a .titleHolder .product-title p {
  margin: 0;
  font-size: 14px;
}

.subcategory-paginator {
  width: 35.71428571%;
  height: 100px;
}

.subcategory-paginator ul {
  border: solid 1px #D0D7D5;
  line-height: 1em;
  font-size: 16px;
  font-weight: bold;
  list-style: none;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
}

.subcategory-paginator ul li {
  border-left: solid 1px #D0D7D5;
  cursor: pointer;
}

.subcategory-paginator ul li:hover {
  background-color: rgba(46, 128, 168, 0.5);
}

.subcategory-paginator ul li a,
.subcategory-paginator ul li span {
  text-decoration: none;
  padding: 12px 17px;
  display: block;
  color: #2E80A8;
}

.subcategory-paginator ul.pagination > li:first-child {
  margin-right: auto;
  border-left: none;
}

.subcategory-paginator ul.pagination > li:last-child {
  margin-left: auto;
}

.subcategory-paginator ul.pagination > li a,
.subcategory-paginator ul.pagination > li span {
  font-size: 24px;
  font-weight: normal;
  padding-top: 9px;
  padding-bottom: 15px;
}

.subcategory-paginator ul ul.elements {
  border: 0;
  width: 100%;
}

.subcategory-paginator ul ul.elements li {
  width: 100%;
  text-align: center;
}

.subcategory-paginator ul ul.elements li.active {
  background-color: #2E80A8;
  border: none;
  color: white;
}

.subcategory-paginator ul ul.elements li.active a,
.subcategory-paginator ul ul.elements li.active span {
  color: white;
}

html.ie .subcategory-header .titleHolder span.cooling {
  background-position: -10px -130px;
}

html.ie .subcategory-header .titleHolder span.events {
  background-position: -50px -132px;
}

html.ie .subcategory-header .titleHolder span.mobility {
  background-position: -89px -132px;
}

html.ie .subcategory-contents .product a .titleHolder .temp-icon-holder span.temp-icon,
html.ie .subcategory-products .product a .titleHolder .temp-icon-holder span.temp-icon {
  background-position: 0 50%;
}

html.ie .subcategory-contents .product a .titleHolder .temp-icon-holder.freeze span.temp-icon,
html.ie .subcategory-products .product a .titleHolder .temp-icon-holder.freeze span.temp-icon {
  background-position: 102.5% 50%;
}

@media screen and (max-width: 1024px) {
  .breadcrumb > .grid-col {
    margin-left: 0;
  }

  .subcategory-header > .grid-col,
  .subcategory-products > .grid-col {
    width: 100%;
    margin-left: 0;
  }
}

@media screen and (max-width: 840px) {
  .subcategory-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .subcategory-header .subcategory-header-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .subcategory-header .subcategory-header-content .titleHolder {
    width: 100%;
    padding-left: 0;
    padding-right: 8.33333333%;
  }

  .subcategory-header .subcategory-header-content .left {
    width: 50% !important;
  }

  .subcategory-header .subcategory-header-content .right {
    width: 50% !important;
  }

  .subcategory-products {
    padding: 30px 4.16666667% !important;
  }

  .subcategory-products .subcategory-products-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .subcategory-products .subcategory-products-content .product {
    margin-bottom: 45px;
  }
}

@media screen and (max-width: 650px) {
  .subcategory-header > .grid-col .subcategory-header-content {
    display: block;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .subcategory-header > .grid-col .subcategory-header-content .titleHolder {
    display: inline-block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .subcategory-header > .grid-col .subcategory-header-content .titleHolder span {
    display: none;
  }

  .subcategory-header > .grid-col .subcategory-header-content .left {
    display: inline-block !important;
    width: 100% !important;
  }

  .subcategory-header > .grid-col .subcategory-header-content .right {
    display: inline-block;
    width: 100% !important;
    padding-bottom: 45px;
  }

  .subcategory-products > .grid-col .subcategory-products-content .product {
    width: 100%;
    margin-right: 0;
  }
}

@media screen and (max-width: 375px) {
  .subcategory-header .titleHolder span {
    margin-left: 20px;
  }

  .subcategory-header .titleHolder h1 {
    margin: 15px 0;
    font-size: 26px;
  }
}

/*==========================================================================
  Category detail page
  @mixin ========================================================================= */

.product-holder,
.product-title {
  background-color: transparent;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  clear: both;
}

.product-holder .titleHolder,
.product-title .titleHolder {
  width: 91.66666667%;
  margin: 0 4.16666667% 60px 4.16666667%;
  background-color: white;
  border-left: solid 15px #EEB633;
  -webkit-box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05);
}

.product-holder .titleHolder h1,
.product-title .titleHolder h1 {
  margin: 15px;
  display: inline-block;
  font-weight: bold;
  font-size: 39px;
  letter-spacing: -0.19px;
}

.product-holder .titleHolder h1:before,
.product-title .titleHolder h1:before {
  content: '';
  display: inline-block;
  margin: 5px 15px -5px 10px;
  width: 35px;
  height: 38px;
  position: relative;
  background-image: url(/img/svg/icons.svg);
}

.product-holder .titleHolder h1.cooling:before,
.product-title .titleHolder h1.cooling:before {
  background-position: -6px -230px;
  background-repeat: no-repeat;
  background-size: 240px;
}

.product-holder .titleHolder h1.events:before,
.product-title .titleHolder h1.events:before {
  background-position: -72px -232px;
  background-repeat: no-repeat;
  background-size: 240px;
}

.product-holder .titleHolder h1.mobility:before,
.product-title .titleHolder h1.mobility:before {
  width: 45px;
  background-position: -130px -230px;
  background-repeat: no-repeat;
  background-size: 240px;
}

.product-holder .titleHolder .contact-dude,
.product-title .titleHolder .contact-dude {
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 275px;
  padding: 20px 0;
  top: 0;
  right: 20px;
  float: right;
  text-align: right;
  font-size: 18px;
  color: #2E80A8;
}

.product-holder .titleHolder .contact-dude .img-holder,
.product-title .titleHolder .contact-dude .img-holder {
  display: inline-block;
  width: 90px;
  height: 90px;
  margin-left: 30px;
  border-radius: 50%;
  background: #E5E5E5 url("/img/Mark_Douven.png") repeat 50% 6%;
  background-size: 200%;
}

.product-holder .titleHolder .contact-dude p,
.product-title .titleHolder .contact-dude p {
  display: inline-block;
  margin: 3px 0;
}

.product-holder .titleHolder .contact-dude p a,
.product-title .titleHolder .contact-dude p a {
  font-weight: 600;
  text-decoration: none;
  color: #2E80A8;
}

.product-holder .left,
.product-title .left {
  border-left: none;
  padding-left: 0;
  width: 41.66666667%;
  margin-left: 4.16666667%;
}

.product-holder .left a.button,
.product-title .left a.button {
  position: absolute;
  top: 0;
}

.product-holder .left .images,
.product-title .left .images {
  position: absolute;
  bottom: 0;
  z-index: 2;
  font-size: 1rem;
  line-height: 1.6;
  width: 100%;
  margin-top: 115px;
}

.product-holder .left ul,
.product-title .left ul {
  display: none;
}

.product-holder .right,
.product-title .right {
  background-color: white;
  width: 50%;
  padding: 60px 8.33333333% 4.16666667% 8.33333333%;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.08px;
  min-height: 775px;
}

.product-holder .right h3,
.product-title .right h3 {
  margin-top: 0;
  font-size: 26px;
  color: #2E80A8;
}

.product-holder .right .spec-holder,
.product-title .right .spec-holder {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  -ms-align-items: baseline;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.product-holder .right .spec-holder .top,
.product-title .right .spec-holder .top {
  width: 50%;
}

.product-holder .right .spec-holder .top .spec,
.product-title .right .spec-holder .top .spec {
  width: 100%;
}

.product-holder .right .spec-holder .spec,
.product-title .right .spec-holder .spec {
  width: 50%;
  font-size: 14px;
}

.product-holder .right .spec-holder .spec.measurements,
.product-holder .right .spec-holder .spec.specifics,
.product-title .right .spec-holder .spec.measurements,
.product-title .right .spec-holder .spec.specifics {
  width: 100%;
}

.product-holder .right .spec-holder .spec .values,
.product-title .right .spec-holder .spec .values {
  display: inline-block;
  margin-left: 5%;
}

.product-holder .right .spec-holder .spec .values span,
.product-title .right .spec-holder .spec .values span {
  margin: 0 15px;
  color: #2E80A8;
  font-weight: bold;
}

.product-holder .right .spec-holder .spec .values span.first,
.product-title .right .spec-holder .spec .values span.first {
  margin-left: 0;
}

.product-holder .right .spec-holder .spec h4,
.product-title .right .spec-holder .spec h4 {
  position: relative;
  font-size: 16px;
  padding-right: 32px;
  color: #2E80A8;
  margin-bottom: 5px;
}

.product-holder .right .spec-holder .spec h4:before,
.product-title .right .spec-holder .spec h4:before {
  content: '';
  display: block;
  position: absolute;
  width: 18px;
  height: 19px;
  left: -25px;
  top: 4px;
  background-size: 18px 19px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(/img/svg/product_icons.svg);
}

.product-holder .right .spec-holder .spec h4.insurance:before,
.product-title .right .spec-holder .spec h4.insurance:before {
  background-image: url(/img/svg/product/insurance.svg);
}

.product-holder .right .spec-holder .spec h4.measurements:before,
.product-title .right .spec-holder .spec h4.measurements:before {
  background-image: url(/img/svg/product/dimensions.svg);
}

.product-holder .right .spec-holder .spec h4.power:before,
.product-title .right .spec-holder .spec h4.power:before {
  background-image: url(/img/svg/product/power.svg);
}

.product-holder .right .spec-holder .spec h4.weight:before,
.product-title .right .spec-holder .spec h4.weight:before {
  background-image: url(/img/svg/product/weight.svg);
}

.product-holder .right .spec-holder .spec h4.temp:before,
.product-title .right .spec-holder .spec h4.temp:before {
  background-image: url(/img/svg/product/temperature.svg);
}

.product-holder .right .spec-holder .spec h4.specifics:before,
.product-title .right .spec-holder .spec h4.specifics:before {
  background-image: url(/img/svg/product/misc.svg);
}

.product-holder .right .spec-holder .spec h4.pricing:before,
.product-title .right .spec-holder .spec h4.pricing:before {
  background: none;
  content: '\20AC';
  color: #EEB633;
  top: 0px;
}

.product-holder .right .spec-holder .spec p,
.product-title .right .spec-holder .spec p {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  display: inline-block;
}

.product-holder .right .spec-holder .spec ul,
.product-title .right .spec-holder .spec ul {
  list-style: none;
  padding-left: 0;
}

.product-holder .right .spec-holder .spec:not(.specifics) ul,
.product-title .right .spec-holder .spec:not(.specifics) ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 18px;
}

.product-holder .right .order-box,
.product-title .right .order-box {
  border: solid 2px #D0D7D5;
  padding: 8px;
  border-radius: 5px;
  margin-top: 30px;
  height: 66px;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-holder .right .order-box .amount-label,
.product-title .right .order-box .amount-label {
  font-weight: 600;
  font-size: 16px;
  color: #2E80A8;
  margin-left: 30px;
}

.product-holder .right .order-box .amount-box,
.product-title .right .order-box .amount-box {
  width: 110px;
  border-radius: 5px;
  background-color: rgba(208, 215, 213, 0.2);
  display: inline-block;
  padding-right: 15px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-evenly;
  -moz-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-holder .right .order-box .amount-box .amount,
.product-title .right .order-box .amount-box .amount {
  font-weight: 600;
  font-size: 30px;
  color: #2E80A8;
  margin: 0;
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: right;
}

.product-holder .right .order-box .amount-box .amount-changers,
.product-title .right .order-box .amount-box .amount-changers {
  display: inline-block;
  height: 100%;
  width: 10px;
}

.product-holder .right .order-box .amount-box .amount-changers a,
.product-title .right .order-box .amount-box .amount-changers a {
  border-radius: 3px;
  border: solid 2px #EEB633;
  color: #EEB633;
  text-decoration: none;
  padding: 5px 0 8px 0;
  width: 16px;
  line-height: 0;
  height: 16px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5px 0;
  -webkit-transition: color 0.2s, background-color 0.2s;
  transition: color 0.2s, background-color 0.2s;
}

.product-holder .right .order-box .amount-box .amount-changers a:hover,
.product-title .right .order-box .amount-box .amount-changers a:hover {
  background-color: #EEB633;
  color: white;
}

.product-holder .right .order-box a.button,
.product-title .right .order-box a.button {
  color: white;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.product-holder .right .order-box a.button:hover,
.product-title .right .order-box a.button:hover {
  color: #001E2E;
}

.related-products-header {
  line-height: 1em;
  font-size: 1em;
  padding-top: 90px;
}

.related-products-header h3 {
  font-size: 26px;
  margin-bottom: 30px;
  margin-left: 8.33333333%;
  color: #2E80A8;
}

.related-products {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 115px;
  z-index: 1;
  position: relative;
  min-height: 385px;
}

.related-products .product {
  display: block;
  width: 25%;
  z-index: 1;
}

.related-products .product:first-child {
  margin-left: 8.33333333%;
}

.related-products .product:last-child {
  margin-right: 8.33333333%;
}

.related-products .product a {
  text-decoration: none;
  color: #2E80A8;
}

.related-products .product a:hover .imgHolder {
  background-size: 105%;
}

.related-products .product a:hover .imgHolder .yellow-block-overlay:after {
  width: 72px;
  height: 72px;
}

.related-products .product a .imgHolder {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding-top: 60%;
  background-color: #D0D7D5;
  background-size: 100%;
  background-position: center center;
  position: relative;
  -webkit-transition: background-size 0.3s;
  transition: background-size 0.3s;
}

.related-products .product a .imgHolder:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #2E80A8;
  opacity: 0.2;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.related-products .product a .imgHolder .yellow-block-overlay {
  position: absolute;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

.related-products .product a .imgHolder .yellow-block-overlay:after {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 3px;
  background: #F1B933 url("/img/svg/arrow_right.svg") no-repeat 50% 50%;
  background-size: 35%;
  -webkit-transition: width 0.2s, height 0.2s;
  transition: width 0.2s, height 0.2s;
}

.related-products .product a .titleHolder {
  background-color: #2E80A8;
  margin: 0;
  color: white;
  width: 100%;
  height: 112px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.related-products .product a .titleHolder .temp-icon-holder {
  height: 100%;
  width: 33.33333333%;
  margin-left: -8px;
  margin-right: 3px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.related-products .product a .titleHolder .temp-icon-holder span {
  position: relative;
  display: inline-block;
  height: 30px;
  font-size: 14px;
}

.related-products .product a .titleHolder .temp-icon-holder span.temp-icon {
  background: url("/img/svg/temp_icons.svg") no-repeat -3.5% top;
  background-size: 360%;
  height: 65px;
  width: 35px;
}

.related-products .product a .titleHolder .temp-icon-holder span.min-temp {
  text-align: right;
}

.related-products .product a .titleHolder .temp-icon-holder.cool span.min-temp {
  top: -1px;
  right: -3px;
}

.related-products .product a .titleHolder .temp-icon-holder.cool span.max-temp {
  top: -13px;
  left: -5px;
}

.related-products .product a .titleHolder .temp-icon-holder.freeze span.min-temp {
  top: 3px;
  right: -3px;
}

.related-products .product a .titleHolder .temp-icon-holder.freeze span.temp-icon {
  background-position: 102.5% top;
}

.related-products .product a .titleHolder .temp-icon-holder.freeze span.max-temp {
  top: -10px;
  left: -5px;
}

.related-products .product a .titleHolder .product-title {
  display: inline-block;
}

.related-products .product a .titleHolder .product-title h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.related-products .product a .titleHolder .product-title p {
  margin: 0;
  font-size: 14px;
}

.related-products .product .question-block {
  width: 100%;
  background-color: #001E2E;
  height: 100%;
  border-bottom: solid 5px #EEB633;
  padding: 23% 0;
  color: white;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.08px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.related-products .product .question-block a {
  text-decoration: none;
  color: white;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.related-products .product .question-block a:hover {
  color: #EEB633;
}

@media screen and (max-width: 1300px) {
  body.products .content .product-holder .right .spec {
    width: 100%;
  }
}

@media screen and (max-width: 1220px) {
  body.products .content .product-holder .right .amount-box .amount {
    margin: 0 10px 0 0;
  }

  body.products .content .product-holder .right .order-box {
    height: auto;
  }

  body.products .content .product-holder .right .order-box .amount-label {
    margin-left: 5px;
  }
}

@media screen and (max-width: 840px) {
  body.products header {
    height: 50px;
  }

  body.products .content .product-title,
  body.products .content .product-holder,
  body.products .content .related-products-header,
  body.products .content .related-products {
    padding-left: 4.16666667%;
    padding-right: 4.16666667%;
  }

  body.products .content .product-title .titleHolder {
    margin-left: 0;
    margin-right: 0;
  }

  body.products .content .product-title .titleHolder .contact-dude {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    height: auto;
    right: 20px;
    bottom: 0;
    top: auto;
  }

  body.products .content .product-holder .left {
    margin-left: 0;
  }

  body.products .content .product-holder .left a.button {
    position: relative;
  }

  body.products .content .product-holder .left .images {
    position: relative;
    margin-top: 60px;
  }

  body.products .content .product-holder .right {
    padding-top: 15px;
  }

  body.products .content .product-holder .right .spec-holder .spec {
    width: 100%;
  }

  body.products .content .related-products-header h3 {
    margin-bottom: 0;
    margin-left: 0;
  }

  body.products .content .related-products {
    padding-bottom: 30px;
  }

  body.products .content .related-products .product {
    margin: 30px 0;
  }
}

@media screen and (max-width: 650px) {
  body.products .content .product-holder .right {
    padding-top: 38px;
  }

  body.products .content .related-products-header {
    padding-top: 0;
    padding-bottom: 15px;
  }
}

@media screen and (max-width: 435px) {
  body.products .content .product-title,
  body.products .content .product-holder {
    padding-left: 0;
    padding-right: 0;
  }

  body.products .content .product-title .left a.button,
  body.products .content .product-holder .left a.button {
    margin-left: 4.16666667%;
    width: 91.66666667%;
  }

  body.products .content .product-title .right .spec-holder,
  body.products .content .product-holder .right .spec-holder {
    padding-left: 8.33333333%;
  }

  body.products .content .product-title .right .order-box,
  body.products .content .product-holder .right .order-box {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  body.products .content .product-title .right .order-box .amount-box,
  body.products .content .product-holder .right .order-box .amount-box {
    width: 75%;
  }

  body.products .content .product-title .right .order-box a.button,
  body.products .content .product-holder .right .order-box a.button {
    margin-top: 10px;
    width: 100%;
  }

  body.products .content .product-title .titleHolder h1 {
    overflow-wrap: break-word;
    width: 88%;
    font-size: 32px;
  }

  body.products .content .product-title .titleHolder h1:before {
    display: none;
  }

  body.products .content .related-products .product {
    margin: 10px 0;
  }
}

#error-page-message {
  padding: 100px 0 100px;
  background-color: white;
}

#error-page-message .grid-row .content {
  width: 100%;
  text-align: center;
  color: #2E80A8;
}

#error-page-message .grid-row .placeholder {
  max-width: 720px;
  margin: auto;
}

#error-page-message .grid-row .catBlock {
  text-align: left;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-top: 0;
}

#error-page-message .grid-row .catBlock .left {
  width: 100%;
  margin-left: 0;
  text-align: center;
  color: #2E80A8;
}

#error-page-message .grid-row .catBlock .right {
  display: none;
}

/*==========================================================================
  Sitemap page
  @mixin ========================================================================= */

.sitemap ul {
  padding-left: 40px;
  padding-bottom: 20px;
  font-size: 0.85em;
}

.sitemap > ul {
  padding-left: 20px;
}

.sitemap li:before {
  top: 6px;
}

.sitemap li a {
  padding: 3px 0;
  border-bottom-color: transparent;
  border-bottom-style: dotted;
  display: block;
}

.sitemap li a:hover {
  border-bottom-color: rgba(29, 36, 51, 0.4);
}