@charset "UTF-8";
@import url(dd4b8ac46509f88efcf61199595e07a7252eaaf9.css) ;
/*
* _config.scss
*
* Contains all reset and basic styles, as well as definitions for the grid and column layout.
*
* NOTE: Usage of units: 'px' only for sprites (background-position, width and height), breakpoints, as well as border-width. For everything else use 'em'.
*/
/* GLOBAL CONSTANTS */
/**
* New default variables
*/
/**
* Define font sizes
*/
/**
* Define breakpoint list
*/
/**
* Which breakpoints we want to use in certain modules?
*/
/* COLUMN LAYOUT */
/* LAYOUT ELEMENTS */
/* COLOR DEFINITIONS */
/* COLOR MAPPING */
/* GROUPED SELECTORS */
/* Text inputs (roughly based on Bourbon's _html5-input-types.scss) */
/*----------------------------------------------------------------------------* $MIXINS
Contains all custom mixins and functions to generate often reused CSS
declarations.
\*----------------------------------------------------------------------------*/
/* Import vars */
/* Quick definition of vars needed for blocss grid and mixins to work */
/* Functions
\*----------------------------------------------------------------------------*/
/**
* Value to rem
*/
/**
* Value to em
*/
/**
* A small, internally-used function to remove the units from a given value.
*/
/**
* Prefixer
* Example: @include prefixer(border-radius, 5px 10px, webkit moz o ms spec);
*/
/* Mixins
\*----------------------------------------------------------------------------*/
/**
* Rem converter
*
* 1. Provide pixel fallback for ie8
* 2. Loop over values
* 3. Run trough prefixer
*
* Sample: @include rem(margin, 0 auto 300px, webkit moz spec, !important);
*/
/**
* Calculates font, rem font size & line height
* $multiplier: multiplies line height by the given value
* $line-height: include line height or not
* The line height parameter can also be used as the multiplier
*
* Sample usage @include font-size(18px, 2);
*/
/**
* Enclose a block of code with a media query as named in `$breakpoints`.
* @author Bram Smulders
*/
/**
* Media query mixin injecting a single breakpoint.
* Tags: ^deprecated
*/
/* Mixin to reset transform CSS property.
* @author ramon.kool[at]efocus.nl
* @author Ralph
*/
/* Font-face mixin, for use of external fonts. Assumes all different font files are available.
* @author Lowen
* @param string use $primary-font global variable
* @param string path and filename to font
* @param string defaults to normal
*/
/* Text selection mixin
* @author Ralph Meeuws
*/
/* Placeholder mixin (roughly based on Bourbon's placeholder mixin)
* @author Ralph
*/
/* Common values for pseudo-selectors.
* @author Ralph Meeuws
* @param? string : (optional) top position
* @param? string : (optional) left position
*/
/* Sprite icon mixin
* @author Ramon
* @param icon-size (how big is it in the default sprite?)
* @param tile-column (x-axis)
* @param tile-row (y-axis)
* @param optional tile offset left in px (default is centered relatively to $icon-size)
* @param optional tile offset top in px (default is centered relatively to $icon-size)
*/
/* Nav Meta icon mixin (different state than regulare nav icon)
* @author Ramon
* @param tile-row (y-axis)
* @param state (x-axis) Optional (it assumes the state is 3 and the hover is 2)
*/
/* A wrapper for a CMS customizable icon. The uploaded image consists of 3 states, regular, hover, active divided in a specific grid
* This mixin is placed on the wrapping tag, so the hover state works on the entire tag
* @author Ramon
* @param size (the size of the gridtile)
*/
/*
* Nieuwe "icon" mixin om code in _icons.scss drastich te verminderen (dient nog doorgevoerd te worden).
* @author Ralph
* @param number : size of icon
* @param number : sprite column
* @param number : sprite row
*/
/* Arrow mixin
* @author Ramon
* @param size (small, medium, large)
* @param direction (top, right, bottom, left)
* @param tile-row (y-axis)
*/
/* FUNCTIONS */
/* Em conversion function (roughly based on Bourbon's px-to-em function)
* @author Ralph
* @param string pixel value
* @param string relative base size, defaults to default font size
*/
/**
* Gradients
*/
/**
* Grid row generator
* @author Bertus
* @param string numPerRow = number of items per row
* @param string margin = percentage of margin on the right side of the item.
*/
/*----------------------------------------------------------------------------* $MIXINS
A set of usefull Sass mixins, wich can be used troughout you project
\*----------------------------------------------------------------------------*/
/* Functions
\*----------------------------------------------------------------------------*/
/**
* Value to rem
*/
/**
* Value to em
*/
/**
* A small, internally-used function to remove the units from a given value.
*/
/* CSS3
\*----------------------------------------------------------------------------*/
/**
* Rem converter
*
* 1. Provide pixel fallback for ie8
* 2. Loop over values
* 3. Run trough prefixer
*
* Sample: @include rem(margin, 0 auto 300px, webkit moz spec, !important);
*/
/* SILENT CLASSES */
/**
* Micro clearfix
* As per: nicolasgallagher.com/micro-clearfix-hack
*/
.cf:after,
.clearfix:after,
.eneco3 ul.pdf:after,
.eneco3 .or-list:after {
content: "";
display: table;
clear: both; }
.eneco3 .more-down:before, .eneco3 .previous-link:before, .eneco3 .show-more-link-inline:after, .eneco3 .nav .menu-profile ul li a.login-icon-user:before, .eneco3 .nav .menu-profile ul li a.login-icon-user:hover:before, .eneco3 .nav .menu-main ul li ul:after, .eneco3 .nav .menu-main ul li.is-open ul:after, .eneco3 .nav .menu-meta a.nav-icon-weather:after, .eneco3 .nav .menu-meta a.nav-icon-piechart:after, .eneco3 .nav .menu-meta a.nav-icon-toon:after, .eneco3 .nav .menu-meta a.nav-icon-world:after, .eneco3 .nav .menu-meta a.nav-icon-bell:after, .eneco3 .nav .menu-meta a.nav-icon-fit:after, .eneco3 .nav .menu-meta a.nav-icon-text:after, .eneco3 .nav .menu-meta a.nav-icon-comment:after, .eneco3 .nav .menu-meta a.nav-icon-temperature:after, .eneco3 .nav .menu-meta a.nav-icon-leaf:after {
text-indent: -999em; }
/* Module
Removes the `margin-bottom` of a modules last-childs
As per: http://css-tricks.com/spacing-the-bottom-of-modules/
\*----------------------------------------------------------------------------*/
.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child {
margin-bottom: 0 !important; }
/* Gradient silent class
\*----------------------------------------------------------------------------*/
/* Foundation grid mixins
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------* $TRUMPS
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------* $POSITION
Trumps for positioning
\*----------------------------------------------------------------------------*/
.static {
position: static !important; }
.relative {
position: relative !important; }
.absolute {
position: absolute !important; }
.z-index--1 {
z-index: 1; }
/*----------------------------------------------------------------------------* $DISPLAY
\*----------------------------------------------------------------------------*/
.display--block {
display: block; }
.display--none {
display: none; }
.display--inline-block {
display: inline-block; }
@media only screen and (max-width: 1024px) {
.display--block--medium-max {
display: block; } }
.display--inline {
display: inline; }
@media only screen and (min-width: 1024px) {
.display--inline-block--medium {
display: inline-block; } }
/*----------------------------------------------------------------------------* $DEVICE-STATUS
\*----------------------------------------------------------------------------*/
.is-ios .device-status.for-android, .is-ios .device-status.for-windows-phone {
display: none; }
.is-android .device-status.for-ios, .is-android .device-status.for-windows-phone {
display: none; }
.is-windows-phone .device-status.for-ios, .is-windows-phone .device-status.for-android {
display: none; }
/*----------------------------------------------------------------------------* $GRIDCOLUMNS
Dimensions of the foundation grid system
\*----------------------------------------------------------------------------*/
/* Grid HTML Classes */
.row {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
width: 100%;
*zoom: 1; }
.row:before, .row:after {
content: " ";
display: table; }
.row:after {
clear: both; }
.row.collapse .column,
.row.collapse .columns {
padding-left: 0;
padding-right: 0;
float: left; }
.row .row {
margin-left: -0.9375em;
margin-right: -0.9375em;
max-width: none;
width: auto;
*zoom: 1; }
.row .row:before, .row .row:after {
content: " ";
display: table; }
.row .row:after {
clear: both; }
.row .row.collapse {
margin-left: 0;
margin-right: 0;
max-width: none;
width: auto;
*zoom: 1; }
.row .row.collapse:before, .row .row.collapse:after {
content: " ";
display: table; }
.row .row.collapse:after {
clear: both; }
.column,
.columns {
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
float: left;
position: relative; }
@media only screen {
.small-1 {
width: 8.33333333%; }
.small-2 {
width: 16.66666667%; }
.small-3 {
width: 25%; }
.small-4 {
width: 33.33333333%; }
.small-5 {
width: 41.66666667%; }
.small-6 {
width: 50%; }
.small-7 {
width: 58.33333333%; }
.small-8 {
width: 66.66666667%; }
.small-9 {
width: 75%; }
.small-10 {
width: 83.33333333%; }
.small-11 {
width: 91.66666667%; }
.small-12 {
width: 100%; }
.small-1-5 {
width: 20%; }
.small-2-5 {
width: 40%; }
.small-3-5 {
width: 60%; }
.small-4-5 {
width: 80%; }
.small-offset-0 {
margin-left: 0%; }
.small-offset-1 {
margin-left: 8.33333333%; }
.small-offset-2 {
margin-left: 16.66666667%; }
.small-offset-3 {
margin-left: 25%; }
.small-offset-4 {
margin-left: 33.33333333%; }
.small-offset-5 {
margin-left: 41.66666667%; }
.small-offset-6 {
margin-left: 50%; }
.small-offset-7 {
margin-left: 58.33333333%; }
.small-offset-8 {
margin-left: 66.66666667%; }
.small-offset-9 {
margin-left: 75%; }
.small-offset-10 {
margin-left: 83.33333333%; }
[class*="column"] + [class*="column"]:last-child {
float: right; }
[class*="column"] + [class*="column"].end {
float: left; }
.column.small-centered,
.columns.small-centered {
margin-left: auto;
margin-right: auto;
float: none !important; } }
@media only screen and (min-width: 640px) {
.medium-1 {
width: 8.33333333%; }
.medium-2 {
width: 16.66666667%; }
.medium-3 {
width: 25%; }
.medium-4 {
width: 33.33333333%; }
.medium-5 {
width: 41.66666667%; }
.medium-6 {
width: 50%; }
.medium-7 {
width: 58.33333333%; }
.medium-8 {
width: 66.66666667%; }
.medium-9 {
width: 75%; }
.medium-10 {
width: 83.33333333%; }
.medium-11 {
width: 91.66666667%; }
.medium-12 {
width: 100%; }
.medium-1-5 {
width: 20%; }
.medium-2-5 {
width: 40%; }
.medium-3-5 {
width: 60%; }
.medium-4-5 {
width: 80%; }
.medium-offset-0 {
margin-left: 0%; }
.medium-offset-1 {
margin-left: 8.33333333%; }
.medium-offset-2 {
margin-left: 16.66666667%; }
.medium-offset-3 {
margin-left: 25%; }
.medium-offset-4 {
margin-left: 33.33333333%; }
.medium-offset-5 {
margin-left: 41.66666667%; }
.medium-offset-6 {
margin-left: 50%; }
.medium-offset-7 {
margin-left: 58.33333333%; }
.medium-offset-8 {
margin-left: 66.66666667%; }
.medium-offset-9 {
margin-left: 75%; }
.medium-offset-10 {
margin-left: 83.33333333%; }
.medium-offset-11 {
margin-left: 91.66666667%; }
.medium-push-1 {
left: 8.33333333%;
right: auto; }
.medium-pull-1 {
right: 8.33333333%;
left: auto; }
.medium-push-2 {
left: 16.66666667%;
right: auto; }
.medium-pull-2 {
right: 16.66666667%;
left: auto; }
.medium-push-3 {
left: 25%;
right: auto; }
.medium-pull-3 {
right: 25%;
left: auto; }
.medium-push-4 {
left: 33.33333333%;
right: auto; }
.medium-pull-4 {
right: 33.33333333%;
left: auto; }
.medium-push-5 {
left: 41.66666667%;
right: auto; }
.medium-pull-5 {
right: 41.66666667%;
left: auto; }
.medium-push-6 {
left: 50%;
right: auto; }
.medium-pull-6 {
right: 50%;
left: auto; }
.medium-push-7 {
left: 58.33333333%;
right: auto; }
.medium-pull-7 {
right: 58.33333333%;
left: auto; }
.medium-push-8 {
left: 66.66666667%;
right: auto; }
.medium-pull-8 {
right: 66.66666667%;
left: auto; }
.medium-push-9 {
left: 75%;
right: auto; }
.medium-pull-9 {
right: 75%;
left: auto; }
.medium-push-10 {
left: 83.33333333%;
right: auto; }
.medium-pull-10 {
right: 83.33333333%;
left: auto; }
.medium-push-11 {
left: 91.66666667%;
right: auto; }
.medium-pull-11 {
right: 91.66666667%;
left: auto; }
.column.medium-centered,
.columns.medium-centered {
margin-left: auto;
margin-right: auto;
float: none !important; }
.column.medium-uncentered,
.columns.medium-uncentered {
margin-left: 0;
margin-right: 0;
float: left !important; } }
@media only screen and (min-width: 1024px) {
.large-1 {
width: 8.33333333%; }
.large-2 {
width: 16.66666667%; }
.large-3 {
width: 25%; }
.large-4 {
width: 33.33333333%; }
.large-5 {
width: 41.66666667%; }
.large-6 {
width: 50%; }
.large-7 {
width: 58.33333333%; }
.large-8 {
width: 66.66666667%; }
.large-9 {
width: 75%; }
.large-10 {
width: 83.33333333%; }
.large-11 {
width: 91.66666667%; }
.large-12 {
width: 100%; }
.large-1-5 {
width: 20%; }
.large-2-5 {
width: 40%; }
.large-3-5 {
width: 60%; }
.large-4-5 {
width: 80%; }
.large-offset-0 {
margin-left: 0%; }
.large-offset-1 {
margin-left: 8.33333333%; }
.large-offset-2 {
margin-left: 16.66666667%; }
.large-offset-3 {
margin-left: 25%; }
.large-offset-4 {
margin-left: 33.33333333%; }
.large-offset-5 {
margin-left: 41.66666667%; }
.large-offset-6 {
margin-left: 50%; }
.large-offset-7 {
margin-left: 58.33333333%; }
.large-offset-8 {
margin-left: 66.66666667%; }
.large-offset-9 {
margin-left: 75%; }
.large-offset-10 {
margin-left: 83.33333333%; }
.large-offset-11 {
margin-left: 91.66666667%; }
.large-push-1 {
left: 8.33333333%;
right: auto; }
.large-pull-1 {
right: 8.33333333%;
left: auto; }
.large-push-2 {
left: 16.66666667%;
right: auto; }
.large-pull-2 {
right: 16.66666667%;
left: auto; }
.large-push-3 {
left: 25%;
right: auto; }
.large-pull-3 {
right: 25%;
left: auto; }
.large-push-4 {
left: 33.33333333%;
right: auto; }
.large-pull-4 {
right: 33.33333333%;
left: auto; }
.large-push-5 {
left: 41.66666667%;
right: auto; }
.large-pull-5 {
right: 41.66666667%;
left: auto; }
.large-push-6 {
left: 50%;
right: auto; }
.large-pull-6 {
right: 50%;
left: auto; }
.large-push-7 {
left: 58.33333333%;
right: auto; }
.large-pull-7 {
right: 58.33333333%;
left: auto; }
.large-push-8 {
left: 66.66666667%;
right: auto; }
.large-pull-8 {
right: 66.66666667%;
left: auto; }
.large-push-9 {
left: 75%;
right: auto; }
.large-pull-9 {
right: 75%;
left: auto; }
.large-push-10 {
left: 83.33333333%;
right: auto; }
.large-pull-10 {
right: 83.33333333%;
left: auto; }
.large-push-11 {
left: 91.66666667%;
right: auto; }
.large-pull-11 {
right: 91.66666667%;
left: auto; }
.column.large-centered,
.columns.large-centered {
margin-left: auto;
margin-right: auto;
float: none !important; }
.column.large-uncentered,
.columns.large-uncentered {
margin-left: 0;
margin-right: 0;
float: left !important; } }
/*! blocss-dimensions v1.0.3 | MIT License | github.com/Blocss */
/*----------------------------------------------------------------------------* $DIMENSIONS
Sizes in human readable format. These are used in conjunction with other
objects and abstractions found in blocss, most commonly the grid system
and the arrange module.
\*----------------------------------------------------------------------------*/
/* Variables
\*----------------------------------------------------------------------------*/
/**
* Flags to enable or disable dimension traits
*/
/**
* Divisions, makes it easy to create several proportional
* dimensions (e.g., both a 2-part and a 12-part grid).
*
* For example, `2 4 6 12` will let you use the unit-1-2, unit-2-4,
* unit-3-6, and unit-6-12 classes to specify that an element should
* take up 50% of its container.
*/
/**
* Define which namespaced breakpoints you would like to generate for each
* of the dimensions. This is handy if you only need push on, say,
* desk, or you only need a new unit breakpoint at mobile sizes. It allows
* you to only compile as much CSS as you need. All are empty by
* default, but you can add breakpoints at will.
*
* $breakpoint-has-x: ('palm', 'desk');
*
* Note: the name of the breakpoint must exist in the list of `$breakpoints`
* in the Blocss base repository
*/
/**
* You can rename the dimension prefixes to your liking
*/
/* Mixins & functions
\*----------------------------------------------------------------------------*/
/**
* Find the greatest common factor of two integers
*/
/**
* Fluid units
* USAGE: provide a space-separated list of integers, each of which
* represents the number of parts that make up a unit component.
* Optionally provide a modifier suffix that can be used to adjust
* grids in different contexts (e.g. viewport dimensions).
*/
/* Dimensions core
\*----------------------------------------------------------------------------*/
/**
* Setup generic widths
*/
/**
* Proportional units
* Specify the proportional width of an object.
* Primarily for, but not limited to, use with `.grid__cell` components.
* Intentional redundancy build into each set of unit classes.
*/
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-10 {
width: 10%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-10 {
width: 20%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-10 {
width: 30%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-10 {
width: 40%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-10 {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-10 {
width: 60%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-10 {
width: 70%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-10 {
width: 80%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-10 {
width: 90%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-12, .u-2-24 {
width: 8.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-12 {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-12 {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-12 {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-12, .u-10-24 {
width: 41.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-12 {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-12, .u-14-24 {
width: 58.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-12 {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-12 {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-10-12 {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-12, .u-22-24 {
width: 91.66666667%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-24 {
width: 4.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-24 {
width: 12.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-24 {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-24 {
width: 20.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-24 {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-24 {
width: 29.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-24 {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-24 {
width: 37.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-24 {
width: 45.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-12-24 {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-13-24 {
width: 54.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-15-24 {
width: 62.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-16-24 {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-17-24 {
width: 70.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-18-24 {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-19-24 {
width: 79.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-20-24 {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-21-24 {
width: 87.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-23-24 {
width: 95.83333333%; }
/**
* Reset dimensions
*/
.u-1-1 {
width: 100%; }
.u-auto {
width: auto; }
/**
* Setup generic push
*/
/**
* Setup generic pull
*/
/* Responsive
\*----------------------------------------------------------------------------*/
@media only screen and (min-width: 0) {
/**
* Proportional units
* Specify the proportional width of an object.
* Primarily for, but not limited to, use with `.grid__cell` components.
* Intentional redundancy build into each set of unit classes.
*/
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-10--small {
width: 10%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-10--small {
width: 20%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-10--small {
width: 30%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-10--small {
width: 40%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-10--small {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-10--small {
width: 60%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-10--small {
width: 70%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-10--small {
width: 80%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-10--small {
width: 90%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-12--small, .u-2-24--small {
width: 8.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-12--small {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-12--small {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-12--small {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-12--small, .u-10-24--small {
width: 41.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-12--small {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-12--small, .u-14-24--small {
width: 58.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-12--small {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-12--small {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-10-12--small {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-12--small, .u-22-24--small {
width: 91.66666667%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-24--small {
width: 4.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-24--small {
width: 12.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-24--small {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-24--small {
width: 20.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-24--small {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-24--small {
width: 29.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-24--small {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-24--small {
width: 37.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-24--small {
width: 45.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-12-24--small {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-13-24--small {
width: 54.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-15-24--small {
width: 62.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-16-24--small {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-17-24--small {
width: 70.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-18-24--small {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-19-24--small {
width: 79.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-20-24--small {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-21-24--small {
width: 87.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-23-24--small {
width: 95.83333333%; }
/**
* Reset dimensions
*/
.u-1-1--small {
width: 100%; }
.u-auto--small {
width: auto; } }
@media only screen and (min-width: 40em) {
/**
* Proportional units
* Specify the proportional width of an object.
* Primarily for, but not limited to, use with `.grid__cell` components.
* Intentional redundancy build into each set of unit classes.
*/
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-10--medium {
width: 10%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-10--medium {
width: 20%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-10--medium {
width: 30%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-10--medium {
width: 40%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-10--medium {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-10--medium {
width: 60%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-10--medium {
width: 70%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-10--medium {
width: 80%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-10--medium {
width: 90%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-12--medium, .u-2-24--medium {
width: 8.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-12--medium {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-12--medium {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-12--medium {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-12--medium, .u-10-24--medium {
width: 41.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-12--medium {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-12--medium, .u-14-24--medium {
width: 58.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-12--medium {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-12--medium {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-10-12--medium {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-12--medium, .u-22-24--medium {
width: 91.66666667%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-24--medium {
width: 4.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-24--medium {
width: 12.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-24--medium {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-24--medium {
width: 20.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-24--medium {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-24--medium {
width: 29.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-24--medium {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-24--medium {
width: 37.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-24--medium {
width: 45.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-12-24--medium {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-13-24--medium {
width: 54.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-15-24--medium {
width: 62.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-16-24--medium {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-17-24--medium {
width: 70.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-18-24--medium {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-19-24--medium {
width: 79.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-20-24--medium {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-21-24--medium {
width: 87.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-23-24--medium {
width: 95.83333333%; }
/**
* Reset dimensions
*/
.u-1-1--medium {
width: 100%; }
.u-auto--medium {
width: auto; } }
@media only screen and (min-width: 64.125em) {
/**
* Proportional units
* Specify the proportional width of an object.
* Primarily for, but not limited to, use with `.grid__cell` components.
* Intentional redundancy build into each set of unit classes.
*/
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-10--large {
width: 10%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-10--large {
width: 20%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-10--large {
width: 30%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-10--large {
width: 40%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-10--large {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-10--large {
width: 60%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-10--large {
width: 70%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-10--large {
width: 80%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-10--large {
width: 90%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-12--large, .u-2-24--large {
width: 8.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-2-12--large {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-12--large {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-12--large {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-12--large, .u-10-24--large {
width: 41.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-12--large {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-12--large, .u-14-24--large {
width: 58.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-12--large {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-12--large {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-10-12--large {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-12--large, .u-22-24--large {
width: 91.66666667%; }
/* Avoid creating rules like '.unit-12-12 {}'' */
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-1-24--large {
width: 4.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-3-24--large {
width: 12.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-4-24--large {
width: 16.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-5-24--large {
width: 20.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-6-24--large {
width: 25%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-7-24--large {
width: 29.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-8-24--large {
width: 33.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-9-24--large {
width: 37.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-11-24--large {
width: 45.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-12-24--large {
width: 50%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-13-24--large {
width: 54.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-15-24--large {
width: 62.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-16-24--large {
width: 66.66666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-17-24--large {
width: 70.83333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-18-24--large {
width: 75%; }
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-19-24--large {
width: 79.16666667%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-20-24--large {
width: 83.33333333%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-21-24--large {
width: 87.5%; }
/* Initialize variables */
/* Find the greatest common factor */
/* Reduced value of $i */
/* Reduced value of $n */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
/* Initialize variables */
/* Find the greatest common factor */
/**
* Check if the reduced value of $n was also supplied in the
* list of units to be built
*/
/**
* Create units based on fractions
*/
.u-23-24--large {
width: 95.83333333%; }
/**
* Reset dimensions
*/
.u-1-1--large {
width: 100%; }
.u-auto--large {
width: auto; } }
/*----------------------------------------------------------------------------* $DIMENSIONS
Another set of dimensions on top of blocss dimensions
\*----------------------------------------------------------------------------*/
.u-fixed--580 {
/* 1 */
/* 3 */
width: 580px ;
/* 2 */
/* 3 */
width: 36.25rem ; }
@media only screen and (min-width: 40em) {
.u-fixed--130--medium {
/* 1 */
/* 3 */
width: 130px ;
/* 2 */
/* 3 */
width: 8.125rem ; } }
/*----------------------------------------------------------------------------* $TEXTTRUMPS
Small textual trumps
\*----------------------------------------------------------------------------*/
/* Alignment
\*----------------------------------------------------------------------------*/
.text-left,
.text--left {
text-align: left !important; }
.centered,
.text--center,
.text-center {
text-align: center !important; }
.text-right,
.text--right {
text-align: right !important; }
.centeredlink {
display: block;
text-align: center; }
/**
* Small viewport text alignments
*/
@media only screen and (max-width: 639px) {
.text--left--small,
.small-text-left {
text-align: left !important; }
.text--center--small,
.small-text-center {
text-align: center !important; }
.text--right--small,
.small-text-right {
text-align: right !important; } }
@media only screen and (min-width: 640px) {
.medium-text-left,
.text--left--medium {
text-align: left !important; }
.medium-text-center,
.text--center--medium {
text-align: center !important; }
.medium-text-right,
.text--right--medium {
text-align: right !important; } }
@media only screen and (min-width: 1024px) {
.large-text-left,
.text--left--large {
text-align: left !important; }
.large-text-center,
.text--center--large {
text-align: center !important; }
.large-text-right,
.text--right--large {
text-align: right !important; } }
/* Font sizes
\*----------------------------------------------------------------------------*/
.size--small {
font-size: 0.875em !important; }
.size--normalis {
font-size: 1em !important; }
/* Font weights
Tags: ^deprecated, ^refactor
`emphasis` class is deprecated, do not use it anymore
\*----------------------------------------------------------------------------*/
.weight--bold,
.emphasis {
font-weight: bold; }
.is-normal {
font-weight: 400 !important; }
.is-bold {
font-weight: 600 !important; }
.is-extra-bold {
font-weight: 700 !important; }
/* Transform
\*----------------------------------------------------------------------------*/
.is-uppercase {
text-transform: uppercase; }
.is-lowercase {
text-transform: lowercase; }
.is-italic {
font-style: italic; }
/* Misc
\*----------------------------------------------------------------------------*/
.nowrap {
white-space: nowrap; }
.vertical-align--middle {
vertical-align: middle; }
.break-word {
word-break: break-word; }
/*----------------------------------------------------------------------------* $BORDERTRUMP
borders trumps
\*----------------------------------------------------------------------------*/
.border--none {
border: none; }
/*----------------------------------------------------------------------------* $COLORS
Trump color classes
\*----------------------------------------------------------------------------*/
.color--magenta,
.error-text {
color: #D21242 !important; }
.color--dark-orange {
color: #E45621 !important; }
.color--orange {
color: #EC740F !important; }
.color--light-orange {
color: #F6921E !important; }
.color--light-green {
color: #84B819 !important; }
.color--green {
color: #6DA200 !important; }
.color--yellow {
color: #FFC222 !important; }
.color--extra-dark-grey {
color: #414141 !important; }
.color--dark-grey {
color: #666666 !important; }
.color--grey {
color: #B7B7B7 !important; }
.color--grey-light,
.color--light-grey {
color: #CCCCCC !important; }
.color--extra-light-grey {
color: #E1E1E1 !important; }
.color--ultra-light-grey {
color: #EDEDED !important; }
.color--offwhite {
color: #F6F6F6 !important; }
.color--light {
color: #666666 !important; }
.color--light-cyan {
color: #57D9FF !important; }
.color--cyan {
color: #00AFDB !important; }
.color--dark-cyan {
color: #0087A9 !important; }
/* OLD
description
\*----------------------------------------------------------------------------*/
.color--base {
color: #414141 !important; }
.color--white {
color: #FFFFFF; }
/**
* Magentas
*/
.color--magenta {
color: #D21242; }
/**
* Oranges
*/
.color--dark-orange {
color: #E45621; }
.color--orange {
color: #EC740F; }
.color--light-orange {
color: #F6921E; }
/**
* Greens
*/
.color--green {
color: #6DA200; }
.color--light-green {
color: #84B819; }
/**
* Cyans
*/
.color--cyan {
color: #00AFDB; }
.color--dark-cyan {
color: #0087A9; }
/**
* Misc
*/
.is-error {
color: #D21242; }
/*----------------------------------------------------------------------------* $Font-size
Trumps to overrule font-size.
$alpha : 50px;
$beta : 40px;
$gamma : 32px;
$delta : 24px;
$epsilon : 20px;
$zeta : 18px;
$milli : 14px = $small-font-size;
$micro : 12px = $tiny-font-size;
Note: add responsive states for tablet/mobile reduction
\*----------------------------------------------------------------------------*/
.font-size--alpha {
font-size: 3.125em !important; }
.font-size--beta {
font-size: 2.5em !important; }
.font-size--gamma {
font-size: 2em !important; }
.font-size--delta {
font-size: 1.5em !important; }
.font-size--epsilon {
font-size: 1.25em !important; }
.font-size--zeta {
font-size: 1.125em !important; }
.font-size--milli {
font-size: 0.875em !important; }
.font-size--micro {
font-size: 0.75em !important; }
.font-size--pico {
font-size: 10px !important; }
@media all and (min-width: 40em) {
.font-size--beta--small {
font-size: 2.5em; }
.font-size--gamma--small {
font-size: 2em; }
.font-size--delta--small {
font-size: 1.5em; } }
@media all and (min-width: 64.125em) {
.font-size--beta--medium {
font-size: 2.5em; }
.font-size--gamma--medium {
font-size: 2em; }
.font-size--delta--medium {
font-size: 1.5em; } }
/*----------------------------------------------------------------------------* $MARGINS
Add/remove margins, needed because of overrulling legency codebase
and yes use of important, because trumps are there, to win no matter what.
\*----------------------------------------------------------------------------*/
.push {
margin: 30px !important; }
.push--top {
margin-top: 30px !important; }
.push--right {
margin-right: 30px !important; }
.push--bottom {
margin-bottom: 30px !important; }
.push--left {
margin-left: 30px !important; }
.push--ends {
margin-top: 30px !important;
margin-bottom: 30px !important; }
.push--sides {
margin-right: 30px !important;
margin-left: 30px !important; }
.push--center {
margin-left: auto;
margin-right: auto; }
.push-half {
margin: 15px !important; }
.push-half--top {
margin-top: 15px !important; }
.push-half--right {
margin-right: 15px !important; }
.push-half--bottom {
margin-bottom: 15px !important; }
.push-half--left {
margin-left: 15px !important; }
.push-half--ends {
margin-top: 15px !important;
margin-bottom: 15px !important; }
.push-half--sides {
margin-right: 15px !important;
margin-left: 15px !important; }
.push-quarter--bottom {
margin-bottom: 7.5px !important; }
.push-quarter--right {
margin-right: 7.5px !important; }
.push-quarter--left {
margin-right: 7.5px !important; }
.flush {
margin: 0 !important; }
.flush--top {
margin-top: 0 !important; }
.flush--right {
margin-right: 0 !important; }
.flush--bottom {
margin-bottom: 0 !important; }
.flush--left {
margin-left: 0 !important; }
.flush--ends {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.flush--sides {
margin-right: 0 !important;
margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
.push--top--small {
margin-top: 30px !important; }
.push--right--small {
margin-right: 30px !important; }
.push--bottom--small {
margin-bottom: 30px !important; }
.push--left--small {
margin-left: 30px !important; }
.push-half--top--small {
margin-top: 15px !important; }
.push-half--right--small {
margin-right: 15px !important; }
.push-half--bottom--small {
margin-bottom: 15px !important; }
.push-half--left--small {
margin-left: 15px !important; }
.flush--bottom--small {
margin-bottom: 0 !important; }
.push-islet--bottom--small {
margin-bottom: 0.46875em !important; } }
@media only screen and (min-width: 640px) {
.push--top--medium {
margin-top: 30px !important; }
.push--right--medium {
margin-right: 30px !important; }
.push--bottom--medium {
margin-bottom: 30px !important; }
.push--left--medium {
margin-left: 30px !important; }
.push-half--top--medium {
margin-top: 15px !important; }
.push-half--right--medium {
margin-right: 15px !important; }
.push-half--bottom--medium {
margin-bottom: 15px !important; }
.push-half--left--medium {
margin-left: 15px !important; }
.flush--bottom--medium {
margin-bottom: 0 !important; } }
@media only screen and (min-width: 1024px) {
.push--top--large {
margin-top: 30px !important; }
.push--right--large {
margin-right: 30px !important; }
.push--bottom--large {
margin-bottom: 30px !important; }
.push--left--large {
margin-left: 30px !important; }
.push-half--top--large {
margin-top: 15px !important; }
.push-half--right--large {
margin-right: 15px !important; }
.push-half--bottom--large {
margin-bottom: 15px !important; }
.push-half--left--large {
margin-left: 15px !important; }
.flush--bottom--large {
margin-bottom: 0 !important; }
.flush--sides--large {
margin-left: 0 !important;
margin-right: 0 !important; } }
/**
* Add/remove paddings
*/
.soft {
padding: 30px !important; }
.soft--top {
padding-top: 30px !important; }
.soft--right {
padding-right: 30px !important; }
.soft--bottom {
padding-bottom: 30px !important; }
.soft--left {
padding-left: 30px !important; }
.soft--ends {
padding-top: 30px !important;
padding-bottom: 30px !important; }
.soft--sides {
padding-right: 30px !important;
padding-left: 30px !important; }
.soft-quarter--right {
padding-right: 7.5px !important; }
.soft-quarter--left {
padding-left: 7.5px !important; }
.soft-half {
padding: 15px !important; }
.soft-half--top {
padding-top: 15px !important; }
.soft-half--right {
padding-right: 15px !important; }
.soft-half--bottom {
padding-bottom: 15px !important; }
.soft-half--left {
padding-left: 15px !important; }
.soft-half--ends {
padding-top: 15px !important;
padding-bottom: 15px !important; }
.soft-half--sides {
padding-right: 15px !important;
padding-left: 15px !important; }
.soft-double--top {
padding-top: 60px !important; }
.soft-double--right {
padding-right: 60px !important; }
.soft-double--bottom {
padding-bottom: 60px !important; }
.soft-double--left {
padding-left: 60px !important; }
.soft-double--ends {
padding-top: 60px !important;
padding-bottom: 60px !important; }
.soft-double--sides {
padding-right: 60px !important;
padding-left: 60px !important; }
.hard {
padding: 0 !important; }
.hard--top {
padding-top: 0 !important; }
.hard--right {
padding-right: 0 !important; }
.hard--bottom {
padding-bottom: 0 !important; }
.hard--left {
padding-left: 0 !important; }
.hard--ends {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.hard--sides {
padding-right: 0 !important;
padding-left: 0 !important; }
@media only screen and (max-width: 640px) {
.soft--top--small {
padding-top: 30px !important; }
.soft--right--small {
padding-right: 30px !important; }
.soft--bottom--small {
padding-bottom: 30px !important; }
.soft--left--small {
padding-left: 30px !important; }
.soft--sides--small {
padding-left: 30px !important;
padding-right: 30px !important; }
.soft--ends--small {
padding-top: 30px !important;
padding-bottom: 30px !important; }
.soft-half--top--small {
padding-top: 15px !important; }
.soft-half--right--small {
padding-right: 15px !important; }
.soft-half--bottom--small {
padding-bottom: 15px !important; }
.soft-half--left--small {
padding-left: 15px !important; }
.soft-half--sides--small {
padding-left: 15px !important;
padding-right: 15px !important; }
.soft-double--top--small {
padding-top: 60px !important; }
.soft-double--right--small {
padding-right: 60px !important; }
.soft-double--bottom--small {
padding-bottom: 60px !important; }
.soft-double--left--small {
padding-left: 60px !important; }
.soft-double--ends--small {
padding-top: 60px !important;
padding-bottom: 60px !important; } }
@media only screen and (min-width: 640px) {
.soft--top--medium {
padding-top: 30px !important; }
.soft--right--medium {
padding-right: 30px !important; }
.soft--bottom--medium {
padding-bottom: 30px !important; }
.soft--left--medium {
padding-left: 30px !important; }
.soft--sides--medium {
padding-left: 30px !important;
padding-right: 30px !important; }
.soft--ends--medium {
padding-top: 30px !important;
padding-bottom: 30px !important; }
.soft--medium {
padding: 30px !important; }
.soft-half--top--medium {
padding-top: 15px !important; }
.soft-half--right--medium {
padding-right: 15px !important; }
.soft-half--bottom--medium {
padding-bottom: 15px !important; }
.soft-half--left--medium {
padding-left: 15px !important; }
.soft-half--sides--medium {
padding-left: 15px !important;
padding-right: 15px !important; }
.soft-double--top--medium {
padding-top: 60px !important; }
.soft-double--right--medium {
padding-right: 60px !important; }
.soft-double--bottom--medium {
padding-bottom: 60px !important; }
.soft-double--left--medium {
padding-left: 60px !important; }
.soft-tripple--ends--medium {
padding-top: 90px !important;
padding-bottom: 90px !important; }
.soft-quadruple--left--medium {
padding-left: 120px !important; }
.soft-quadruple--right--medium {
padding-right: 120px !important; } }
@media only screen and (min-width: 1024px) {
.soft--top--large {
padding-top: 30px !important; }
.soft--right--large {
padding-right: 30px !important; }
.soft--bottom--large {
padding-bottom: 30px !important; }
.soft--left--large {
padding-left: 30px !important; }
.soft-half--top--large {
padding-top: 15px !important; }
.soft-half--right--large {
padding-right: 15px !important; }
.soft-half--bottom--large {
padding-bottom: 15px !important; }
.soft-half--left--large {
padding-left: 15px !important; }
.soft-double--large {
padding: 60px !important; }
.soft-double--large {
padding: 60px !important; }
.soft-double--top--large {
padding-top: 60px !important; }
.soft-double--right--large {
padding-right: 60px !important; }
.soft-double--bottom--large {
padding-bottom: 60px !important; }
.soft-double--left--large {
padding-left: 60px !important; }
.soft-quadruple--left--large {
padding-left: 120px !important; }
.soft-quadruple--right--large {
padding-right: 120px !important; } }
/*----------------------------------------------------------------------------* $BORDERTRUMP
borders trumps
\*----------------------------------------------------------------------------*/
.border--none {
border: none; }
/*----------------------------------------------------------------------------* $BOXMODEL
\*----------------------------------------------------------------------------*/
.reset-boxmodel *,
.reset-boxmodel *:before,
.reset-boxmodel *:after {
-moz-box-sizing: content-box;
box-sizing: content-box; }
.reset-image img {
max-width: none; }
/*----------------------------------------------------------------------------* $FLOAT
\*----------------------------------------------------------------------------*/
.float--none {
float: none !important; }
/*----------------------------------------------------------------------------* $HEIGHT
sets height of an element based on $space
\*----------------------------------------------------------------------------*/
.height--space {
height: 30px; }
.height--space-double {
height: 60px; }
.height--space-tripple {
height: 90px; }
/**
* eneco 3 prefix
*/
@font-face {
font-family: "Etelka";
src: url(78c8bcc1e15580d5769e2b2c5e310d110851f5bb.eot) ;
src: url(be4a37289ecb77924d2659feec2bd2753f8910c1.eot) format("embedded-opentype"), url(55a600e1e1c0b77fbaeef74cfc22d8331e9c8acb.ttf) format("truetype"), url(b9b967744d825ebb0781c0ecae80d3f2329b2964.woff) format("woff");
font-weight: 400;
font-style: normal; }
@font-face {
font-family: "Etelka";
src: url(7dbfbb0312153c3327ebb08136bf3c8000af2636.eot) ;
src: url(77ed91720aca2e48a48b4da91376bebcfb42099e.eot) format("embedded-opentype"), url(128c69fabab9d66e997f6513c31b84be4da928c0.ttf) format("truetype"), url(f3922d0a17d4e19fc04bb902f149eb1f8c25dcb3.woff) format("woff");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: "Etelka";
src: url(bbc9baece984a1425014f11c390d4ac37373a845.eot) ;
src: url(b804229c70c39591c4cf821f3830fe71da93abf4.eot) format("embedded-opentype"), url(8eace8d1a2fa58b0ab58b659a97cec1a89e03f70.ttf) format("truetype"), url(254cd823ed522eea2616badf67e9dbc4822aa9cd.woff) format("woff");
font-weight: 700;
font-style: normal; }
@font-face {
font-family: "fontello";
src: url(63210eeb967588d860415aff98cea32d0f3af5a5.eot) ;
src: url(d2a2ab2f2770511a2650f65997e016cd5a142fc7.eot) format("embedded-opentype"), url(17fbded06b1eca0f0ef9eb033b1e15574f672d9b.ttf) format("truetype"), url(bdb34f48162f2a12d161ae67d7abaa54782032c4.woff) format("woff");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "Handlee";
src: url(e6f3eb0579cd523ce651e8d74ce15868e195a55b.eot) ;
src: url(ca8b90bcb82ac62cd7c06c1e0c878540e56ef4bf.eot) format("embedded-opentype"), url(9bab8cf6d13a106055520e972a8e39b848b35daf.ttf) format("truetype"), url(03cc746206a74aa338bd2cb85041a96a5af7b62c.woff) format("woff");
font-weight: 400;
font-style: normal; }
.brand-font--tertiary {
font-family: "Handlee", Arial, sans-serif; }
.outer-wrap {
position: relative;
overflow: hidden;
width: 100%; }
.inner-wrap {
position: relative;
width: 100%; }
.inner-wrap,
.header-sticky {
-webkit-transition: left, 300ms;
transition: left, 300ms; }
.dark-overlay {
-webkit-transition: opacity 400ms ease-out;
transition: opacity 400ms ease-out;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 200;
background-color: rgba(0, 0, 0, 0.8);
display: none; }
.dark-overlay.is-active {
opacity: 1;
/* Display block is set in JS with a time */ }
.eneco3 {
line-height: 1.5em;
font-size: 16px;
font-family: "Etelka", Arial, sans-serif;
/*----------------------------------------------------------------------------* $LINKS
Default link styles
\*----------------------------------------------------------------------------*/
/**
* Show help cursor
*/
/**
* Link with arrow down
*/
/*Links with arrows*/
/* PDF link
\*----------------------------------------------------------------------------*/
/* PDF download
\*----------------------------------------------------------------------------*/
/* controlanchor
\*----------------------------------------------------------------------------*/
/* filter-button
\*----------------------------------------------------------------------------*/
/**
* Tooltips
*/
/* Line-height
Default line-height of headings is 1em.
\*----------------------------------------------------------------------------*/
/* TITLES */
/* PDF list
\*----------------------------------------------------------------------------*/
/* Checklist
\*----------------------------------------------------------------------------*/
/* Or list
\*----------------------------------------------------------------------------*/
/* Arrow
\*----------------------------------------------------------------------------*/
/* Language
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------* $SOCIAL
\*----------------------------------------------------------------------------*/
/* Social list
List of social links
1. Since separated files we need to address this in code instead of
extending
\*----------------------------------------------------------------------------*/
/* Social embeds
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------* $HEADER
Top of the page
\*----------------------------------------------------------------------------*/
/**
* Language switch
*/
/*----------------------------------------------------------------------------* $GRIDCOLUMNS
Dimensions of the foundation grid system
\*----------------------------------------------------------------------------*/
/* Grid HTML Classes */
/*----------------------------------------------------------------------------* $VISIBILITY
Shows or hides elements based on breakpoints
1. Deprecated, do not use this anymore
\*----------------------------------------------------------------------------*/
/**
* Visually hidden
*/
/**
* is measurable
* Tags: ^Deprecated, ^Refactor
*/
/*----------------------------------------------------------------------------* $ICONS
Original icon system is based on IMG sprites. The new system is based on
font-face icons generated by www.fontello.com
\*----------------------------------------------------------------------------*/
/* Icon classes
define available font icons
\*----------------------------------------------------------------------------*/
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* Sizes
Variations of the icons
tag: ^Refactor > replace icon-size with trumps>font-size
\*----------------------------------------------------------------------------*/
/* Position
absolute positioning for
\*----------------------------------------------------------------------------*/
/* Icon classes
define available font icons
\*----------------------------------------------------------------------------*/
/* Icon image
Icons with background image
\*----------------------------------------------------------------------------*/
/* Special
Icons with predefined colors
Info: important needed to overrule the color trump classes.
\*----------------------------------------------------------------------------*/
/* Position
absolute positioning for
\*----------------------------------------------------------------------------*/
/* Position
absolute positioning for
\*----------------------------------------------------------------------------*/
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */
/* '' */ }
.eneco3 * {
-webkit-appearance: none;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.eneco3 *:before, .eneco3 *:after {
-moz-box-sizing: border-box;
box-sizing: border-box; }
.eneco3 a {
text-decoration: none;
color: #00AFDB;
cursor: pointer;
-webkit-transition: color 100ms ease-out;
transition: color 100ms ease-out; }
.eneco3 a .hover, .eneco3 a:hover {
text-decoration: underline; }
.eneco3 a[title]:not([href]):not(.button), .eneco3 a.tooltip-link:not([href]):not(.button) {
text-decoration: none; }
.eneco3 a.font-size--inherit {
font-size: inherit; }
.eneco3 *[title]:not(a), .eneco3 *.tooltip-link:not(a) {
cursor: help; }
.eneco3 .more-down {
color: #666666; }
.eneco3 .more-down:before {
content: " ";
width: 14px;
height: 8px;
background-image: url(9a27f27493be45acd5feaf586b99f8e19f7f9ca6.png) ;
background-position: -233px -236px;
background-repeat: no-repeat;
padding: 0;
display: inline-block;
margin-right: 0.5em; }
.eneco3 .previous-link {
padding-left: 1.25em; }
.eneco3 .previous-link:before {
content: " ";
position: absolute;
left: 1.250em;
margin-top: 0.3em;
width: 8px;
height: 14px;
background-image: url(9a27f27493be45acd5feaf586b99f8e19f7f9ca6.png) ;
background-position: -332px -905px;
background-repeat: no-repeat;
padding: 0; }
.eneco3 .show-more-link-inline:after {
content: " ";
position: absolute;
margin-left: 0.5em;
margin-top: 0.5em;
width: 14px;
height: 8px;
background-image: url(9a27f27493be45acd5feaf586b99f8e19f7f9ca6.png) ;
background-position: -233px -908px;
background-repeat: no-repeat;
padding: 0; }
.eneco3 a.icon-pdf {
display: inline-block;
font-size: 16px;
line-height: 2em;
background: url(76602f196c7c43a85b4db45b7d0afb586941180c.png) no-repeat 0 0;
padding: 0 0 0 2.5em;
margin: 0 0 0 1.25em; }
.eneco3 .pdf-download {
background: #EDEDED;
padding: 0.625em 0;
margin: 0.625em 0 0; }
.eneco3 .controlAnchor {
display: block; }
.eneco3 .filter-button {
display: block;
/* 1 */
/* 3 */
margin-bottom: 7.5px ;
/* 2 */
/* 3 */
margin-bottom: 0.46875rem ;
color: #666666; }
.eneco3 .filter-button.is-active, .eneco3 .filter-button:hover {
color: #84B819; }
.eneco3 .filter-button__icon {
/* 1 */
/* 3 */
padding: 3px ;
/* 2 */
/* 3 */
padding: 0.1875rem ;
border: 3px solid transparent;
border-radius: 0.25em;
color: #F6921E;
display: inline-block; }
.lt-ie9 .eneco3 .filter-button__icon img {
width: auto;
max-width: none; }
.is-active .eneco3 .filter-button__icon {
border-color: #84B819;
color: #84B819; }
.eneco3 span.tooltip-link,
.eneco3 a.tooltip-link {
display: inline-block;
margin-left: 0.3125em; }
.eneco3 p {
font-size: 1.125em;
line-height: 1.5em;
margin-bottom: 1.25em; }
.eneco3 p.small {
font-size: 16px; }
.eneco3 p.small a {
font-size: 16px; }
.eneco3 p.tiny {
font-size: 0.875em; }
.eneco3 p.intro {
font-size: 1.5em;
line-height: 1.625em; }
.eneco3 p.author, .eneco3 p.date {
font-size: 1.125em;
font-weight: 700;
color: #666666; }
.eneco3 p.secondary {
color: #F6921E; }
.eneco3 p a {
font-size: inherit; }
.eneco3 p:empty {
display: none; }
.eneco3 .small > p {
font-size: 16px; }
.eneco3 b,
.eneco3 strong {
font-weight: 600; }
.eneco3 .font-size--small {
font-size: 16px; }
.eneco3 .font-size--tiny {
font-size: 0.75em; }
.eneco3 .text--button-alignment {
display: inline-block;
line-height: 2.625em;
min-height: 2.625em;
margin-bottom: 0.5em;
padding: 0 0.5em; }
.eneco3 .line-height--1-0 {
line-height: 1.0em; }
.eneco3 .line-height--1-3 {
line-height: 1.3em; }
.eneco3 .line-height--1-5 {
line-height: 1.5em; }
.eneco3 .line-height--2-0 {
line-height: 2em; }
.eneco3 .line-height--2-5 {
line-height: 2.5em; }
.eneco3 .has-sup-decimals {
position: relative;
padding-right: 28px; }
.eneco3 .has-sup-decimals > span {
position: absolute;
top: 4px;
right: 0;
font-size: 0.65em; }
.eneco3 .grid .grid__cell {
line-height: 1.5em; }
.eneco3 h1, .eneco3 h2, .eneco3 h3, .eneco3 h4, .eneco3 h5, .eneco3 h6 {
margin: 0 0 0.8em;
line-height: 1.2em;
font-family: "Etelka", Arial, sans-serif;
color: #D21242;
font-weight: 400; }
.eneco3 h1 h4, .eneco3 h1 h5, .eneco3 h1 h6, .eneco3 h2 h4, .eneco3 h2 h5, .eneco3 h2 h6, .eneco3 h3 h4, .eneco3 h3 h5, .eneco3 h3 h6, .eneco3 h4 h4, .eneco3 h4 h5, .eneco3 h4 h6, .eneco3 h5 h4, .eneco3 h5 h5, .eneco3 h5 h6, .eneco3 h6 h4, .eneco3 h6 h5, .eneco3 h6 h6 {
font-weight: 600; }
.eneco3 h1 a, .eneco3 h2 a, .eneco3 h3 a, .eneco3 h4 a, .eneco3 h5 a, .eneco3 h6 a {
text-decoration: none;
font-weight: inherit;
color: inherit; }
.eneco3 h1 a:hover, .eneco3 h2 a:hover, .eneco3 h3 a:hover, .eneco3 h4 a:hover, .eneco3 h5 a:hover, .eneco3 h6 a:hover {
color: #00AFDB; }
.eneco3 h1 .secondary, .eneco3 h1.secondary, .eneco3 h2 .secondary, .eneco3 h2.secondary, .eneco3 h3 .secondary, .eneco3 h3.secondary, .eneco3 h4 .secondary, .eneco3 h4.secondary, .eneco3 h5 .secondary, .eneco3 h5.secondary, .eneco3 h6 .secondary, .eneco3 h6.secondary {
color: #F6921E; }
.eneco3 h1 .tertiary, .eneco3 h1.tertiary, .eneco3 h2 .tertiary, .eneco3 h2.tertiary, .eneco3 h3 .tertiary, .eneco3 h3.tertiary, .eneco3 h4 .tertiary, .eneco3 h4.tertiary, .eneco3 h5 .tertiary, .eneco3 h5.tertiary, .eneco3 h6 .tertiary, .eneco3 h6.tertiary {
color: #414141; }
.eneco3 h1.is-normal, .eneco3 h2.is-normal, .eneco3 h3.is-normal, .eneco3 h4.is-normal, .eneco3 h5.is-normal, .eneco3 h6.is-normal {
font-weight: 400 !important; }
.eneco3 h1.is-bold, .eneco3 h2.is-bold, .eneco3 h3.is-bold, .eneco3 h4.is-bold, .eneco3 h5.is-bold, .eneco3 h6.is-bold {
font-weight: 600 !important; }
.eneco3 h1.is-extra-bold, .eneco3 h2.is-extra-bold, .eneco3 h3.is-extra-bold, .eneco3 h4.is-extra-bold, .eneco3 h5.is-extra-bold, .eneco3 h6.is-extra-bold {
font-weight: 700 !important; }
.eneco3 h1.subtitle, .eneco3 h2.subtitle, .eneco3 h3.subtitle, .eneco3 h4.subtitle, .eneco3 h5.subtitle, .eneco3 h6.subtitle {
font-size: 1.25em;
line-height: 1em; }
.eneco3 h1.brand--none, .eneco3 h2.brand--none, .eneco3 h3.brand--none, .eneco3 h4.brand--none, .eneco3 h5.brand--none, .eneco3 h6.brand--none {
color: #666666; }
.eneco3 h1, .eneco3 .h1 {
font-size: 2em; }
@media all and (min-width: 40em) {
.eneco3 h1, .eneco3 .h1 {
font-size: 3.125em; } }
.eneco3 h2, .eneco3 .h2 {
font-size: 1.5em; }
@media all and (min-width: 40em) {
.eneco3 h2, .eneco3 .h2 {
font-size: 2.5em; } }
.eneco3 h3, .eneco3 .h3 {
font-size: 1.5em; }
@media all and (min-width: 40em) {
.eneco3 h3, .eneco3 .h3 {
font-size: 2em; } }
.eneco3 h4, .eneco3 .h4 {
font-size: 1.5em; }
.eneco3 h5, .eneco3 .h5 {
font-size: 1.25em; }
.eneco3 h6, .eneco3 .h6 {
font-size: 1.125em; }
.eneco3 .heading__primary h1, .eneco3 .heading__primary h2 {
font-size: 2em;
font-weight: 700;
margin-bottom: 0; }
@media all and (min-width: 40em) {
.eneco3 .heading__primary h1, .eneco3 .heading__primary h2 {
font-size: 3.125em; } }
.eneco3 .heading__secondary h2, .eneco3 .heading__secondary h3 {
color: #414141;
font-size: 1.5em;
margin-bottom: 0; }
@media all and (min-width: 40em) {
.eneco3 .heading__secondary h2, .eneco3 .heading__secondary h3 {
font-size: 2.5em; } }
.eneco3 .heading__intro {
padding: 0; }
.eneco3 .heading__intro p {
font-size: 1.25em;
line-height: 1.5em;
font-weight: 600;
margin-bottom: 0; }
.eneco3 .heading__primary + .heading__intro p,
.eneco3 .heading__secondary + .heading__intro p {
font-size: 1.5em;
font-weight: normal; }
.eneco3 ul,
.eneco3 ol {
margin: 0 0 1.25em;
padding: 0; }
.eneco3 ul > li,
.eneco3 ol > li {
padding: 0;
font-size: 18px;
font-size: 1rem;
word-break: break-word; }
.eneco3 ul ul,
.eneco3 ul ol,
.eneco3 ol ul,
.eneco3 ol ol {
margin-left: 1.25em;
margin-bottom: 0; }
.eneco3 ul {
list-style: none;
/**
* Strizzetched
* Divides ALL cells equally over the full width of the container
*
* 1. Relies on table layout fixed to have equal cells
* 2. Vertical align cells
* ONLY USED ON > SMALL BREAKPOINT
*/ }
.eneco3 ul.bullet-list {
list-style: none; }
.eneco3 ul.bullet-list li:before {
color: #00AFDB;
content: ">";
padding-right: 10px; }
.eneco3 ul.bullet-list li a {
padding-left: 1em;
font-size: 16px; }
.eneco3 ul.inline-list {
list-style: none;
margin-left: -0.25em;
margin-top: -0.25em;
*zoom: 1; }
.eneco3 ul.inline-list:before, .eneco3 ul.inline-list:after {
content: " ";
display: table; }
.eneco3 ul.inline-list:after {
clear: both; }
.eneco3 ul.inline-list li {
float: left;
margin: 0.25em;
line-height: 1em; }
@media only screen and (max-width: 640px) {
.eneco3 ul.block--small li {
display: block; } }
.eneco3 ul.stretched {
display: none; }
@media all and (min-width: 40em) {
.eneco3 ul.stretched {
display: table;
/* 1 */
table-layout: fixed;
/* 1 */
width: 100%; }
.eneco3 ul.stretched > li {
display: table-cell;
/* 1 */
vertical-align: middle;
/* 2 */ } }
.eneco3 ul.list, .eneco3 ul.list--disc {
list-style: disc;
padding-left: 1em; }
.eneco3 ul.list li, .eneco3 ul.list--disc li {
line-height: 1em;
margin-bottom: 0.625em;
text-align: left; }
.eneco3 ol {
list-style-position: inside; }
.eneco3 dl {
margin-bottom: 1.25em; }
.eneco3 dl > dt {
font-weight: 600; }
.eneco3 dl > dd {
margin-left: 1.25em; }
.eneco3 .list-ordered {
padding-top: 0;
counter-reset: counter; }
.eneco3 .list-ordered li {
position: relative;
line-height: 1.25em;
padding: 0.833em 0;
padding-left: 4em; }
.eneco3 .list-ordered li:before {
position: absolute;
top: 50%;
left: 0;
margin-top: -1.25em;
display: inline-block;
content: ">";
content: counter(counter);
counter-increment: counter;
width: 2.5em;
height: 2.5em;
border-radius: 50%;
background: #F6921E;
text-align: center;
line-height: 2.5em;
color: #FFFFFF;
font-weight: 600; }
.eneco3 .list-ordered li > *:last-child {
margin-bottom: 0; }
.eneco3 .list--ordered {
margin-left: 1.375em;
list-style: decimal; }
.eneco3 ul.pdf {
margin: 1em 0;
display: inline-block;
list-style: none;
margin-left: 0; }
.eneco3 ul.pdf li {
text-align: left;
margin-bottom: 1em;
padding-left: 3em;
background: url(76602f196c7c43a85b4db45b7d0afb586941180c.png) no-repeat 0 50%; }
.eneco3 ul.pdf li:before,
.eneco3 ul.pdf li a {
vertical-align: middle; }
.eneco3 ul.pdf li:before {
display: inline-block;
height: 2em;
margin-left: -.34em;
content: " "; }
.eneco3 ul.pdf li a {
display: inline-block;
font-size: 16px;
line-height: 1.4em; }
.eneco3 ul.pdf li:last-child {
border: 0; }
.eneco3 ul.check {
list-style: none !important;
margin-left: 0 !important; }
.eneco3 ul.check li {
line-height: 1.5em;
padding-left: 2em;
background: url(a5c186acd82f547083a9ef46e01b9925cdeff577.png) 0 0 no-repeat;
margin-bottom: 0.625em;
text-align: left; }
.eneco3 ul.check--white li {
background: url(b21c36602b6f80e908e26e57cee9742f455e7b9b.png) 0 0 no-repeat; }
.eneco3 .or-list {
margin-left: -3.75em; }
.eneco3 .or-list__item {
position: relative;
float: left;
padding-left: 3.75em; }
@media all and (min-width: 64.125em) {
.eneco3 .or-list__item:before, .eneco3 .or-list__item:after {
position: absolute;
left: calc(100% + 1.875em); }
.eneco3 .or-list__item:before {
top: 0;
bottom: 0;
width: 1px;
height: 100%;
background-color: #CCCCCC;
content: " "; }
.eneco3 .or-list__item:after {
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: "of";
background: #FFFFFF; }
.eneco3 .or-list__item:last-child:before, .eneco3 .or-list__item:last-child:after {
display: none; }
.eneco3 .or-list__has-img img {
height: 10em; } }
.eneco3 .arrow-indent ul li a {
padding-left: 1em;
position: relative; }
.eneco3 .arrow-indent ul li a:before {
content: "\203A";
position: absolute;
top: 0;
left: 0;
line-height: 1em; }
.eneco3 .list--strip {
overflow: hidden; }
.eneco3 .list--strip li {
float: left;
background-color: #E1E1E1; }
.eneco3 .list--strip li:first-child {
border-radius: 0.25em 0 0 0.25em; }
.eneco3 .list--strip li:last-child {
border-radius: 0 0.25em 0.25em 0; }
.eneco3 .list--strip li a {
padding: .5em;
color: #666666;
line-height: 1em;
display: inline-block; }
.eneco3 .list--strip li.is-active {
background-color: #F6921E; }
.eneco3 .list--strip li.is-active a {
color: #FFFFFF; }
.eneco3 .list--icon a {
display: inline-block; }
.eneco3 .social {
padding: 2.5em 0;
text-align: center; }
.eneco3 .social .article-title {
padding-top: 2em; }
.eneco3 .social .article-title h1 {
font-size: 2em; }
.eneco3 .social .social-buttons {
display: inline-block;
float: none; }
.eneco3 .social .social-buttons li {
display: block;
float: left;
padding-right: 1.25em; }
.eneco3 .social .social-buttons li:last-child {
padding: 0; }
.eneco3 .social-list,
.eneco3 .footer-block.social {
/* 1 */
text-align: left; }
.eneco3 .social-list ul,
.eneco3 .footer-block.social ul {
display: inline-block; }
@media all and (min-width: 64.125em) {
.eneco3 .social-list ul,
.eneco3 .footer-block.social ul {
margin-top: 1.25em;
display: block; } }
.eneco3 .social-list ul li,
.eneco3 .footer-block.social ul li {
display: inline-block; }
.eneco3 .social-list ul li a,
.eneco3 .footer-block.social ul li a {
display: block;
border-radius: 50%;
text-align: center;
font-size: 16px;
color: #FFFFFF;
background: #F6921E; }
.eneco3 .social-list ul li a:hover,
.eneco3 .footer-block.social ul li a:hover {
color: #FFFFFF;
background: #EC740F; }
.eneco3 .social-list ul li a,
.eneco3 .social-list ul li a img,
.eneco3 .social-list ul li a .icon,
.eneco3 .footer-block.social ul li a,
.eneco3 .footer-block.social ul li a img,
.eneco3 .footer-block.social ul li a .icon {
/* 1 */
/* 3 */
width: 32px ;
/* 2 */
/* 3 */
width: 2rem ;
/* 1 */
/* 3 */
height: 32px ;
/* 2 */
/* 3 */
height: 2rem ; }
.eneco3 .social-list ul li a .icon,
.eneco3 .footer-block.social ul li a .icon {
/* 1 */
/* 3 */
line-height: 32px ;
/* 2 */
/* 3 */
line-height: 2rem ; }
.eneco3 .social-list ul li:first-child,
.eneco3 .footer-block.social ul li:first-child {
margin-left: 0; }
.eneco3 .twitter-tweet-rendered {
margin: 0 !important;
width: 100% !important; }
.eneco3 .nav {
position: fixed;
top: 0;
z-index: 200;
width: 100%;
border-right: 1px solid #E1E1E1;
overflow: hidden;
overflow-y: scroll;
color: #fff;
-webkit-transition: left, 300ms;
transition: left, 300ms; }
@media all and (min-width: 64.125em) {
.eneco3 .nav {
position: relative;
overflow-y: hidden;
border-right: none; }
.eneco3 .nav:not(:target) {
z-index: 1; }
.eneco3 .nav.ask-a-question-is-active {
padding-bottom: 400px; }
.eneco3 .nav:before {
content: " ";
position: absolute;
top: 0;
left: 0;
background-color: #EDEDED;
width: 100%;
height: 50px; } }
.eneco3 .nav .nav-inner {
position: relative;
margin: auto; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .nav-inner {
width: 62.5em; } }
.eneco3 .nav a {
padding: 1em;
text-decoration: none;
display: block;
color: #ccc;
font-size: 0.875em;
line-height: 1.28571em;
outline: none; }
.eneco3 .nav .menu-extra ul li a {
color: #B7B7B7;
padding-left: 1.25em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-extra ul li a {
padding-left: 1em; } }
.eneco3 .nav .menu-extra ul li a:hover {
color: #D21242; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-weight: 600;
text-align: center;
white-space: nowrap;
z-index: 20; } }
.eneco3 .nav .menu-header ul {
margin: auto; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-header ul {
width: 54%; } }
.eneco3 .nav .menu-header ul li {
font-size: 16px; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-header ul li {
display: inline-block; } }
.eneco3 .nav .menu-header ul li a {
display: block; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-header ul li a {
height: 50px; } }
.eneco3 .nav .menu-header ul li.is-active a {
color: #414141;
background-color: #FFFFFF; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile {
position: absolute;
top: 0;
right: 0;
width: 22%;
font-weight: 600;
text-align: right;
white-space: nowrap;
z-index: 30; } }
.eneco3 .nav .menu-profile ul {
margin: auto;
overflow: hidden; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul {
float: right; } }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li {
display: block;
float: left; } }
.eneco3 .nav .menu-profile ul li a {
display: inline-block;
position: relative;
color: #666666; }
.eneco3 .nav .menu-profile ul li a + a {
padding-left: 0;
margin-left: -.5em; }
.eneco3 .nav .menu-profile ul li a + a:before {
content: "| ";
margin-right: 0.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a {
height: 50px;
text-align: right;
color: #EC740F; } }
.eneco3 .nav .menu-profile ul li a span {
color: #666666; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a span {
color: #D21242; } }
.eneco3 .nav .menu-profile ul li a.login-icon {
padding-left: 2em;
margin-left: 1.25em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a.login-icon {
margin-left: 1em; } }
.eneco3 .nav .menu-profile ul li a.login-icon:hover {
color: #EC740F; }
.eneco3 .nav .menu-profile ul li a.login-icon-user {
color: #666666; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a.login-icon-user {
color: #EC740F; } }
.eneco3 .nav .menu-profile ul li a.login-icon-user span {
color: #666666; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a.login-icon-user span {
color: #D21242; } }
.eneco3 .nav .menu-profile ul li a.login-icon-user:before {
content: " ";
position: absolute;
left: 0;
background-image: url(69008a54373631ac0438da744b46cd081c44b993.png) ;
background-position: -424px -520px;
background-repeat: no-repeat;
width: 16px;
height: 16px; }
.eneco3 .nav .menu-profile ul li a.login-icon-user:hover {
color: #EC740F; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a.login-icon-user:hover {
color: #EC740F; } }
.eneco3 .nav .menu-profile ul li a.login-icon-user:hover span {
color: #D21242; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-profile ul li a.login-icon-user:hover span {
color: #D21242; } }
.eneco3 .nav .menu-profile ul li a.login-icon-user:hover:before {
background-image: url(69008a54373631ac0438da744b46cd081c44b993.png) ;
background-position: -40px -520px;
background-repeat: no-repeat;
width: 16px;
height: 16px; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main {
position: relative;
z-index: 10;
padding-top: 50px; } }
.eneco3 .nav .menu-main ul {
display: block;
margin: 0;
-webkit-transition: margin 300ms ease;
transition: margin 300ms ease;
*zoom: 1; }
.eneco3 .nav .menu-main ul:before, .eneco3 .nav .menu-main ul:after {
content: " ";
display: table; }
.eneco3 .nav .menu-main ul:after {
clear: both; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul {
position: relative;
width: 62.5em;
margin: 0 auto 0;
text-align: center; } }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul.is-open-1 {
margin-bottom: 3em; } }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul.is-open-2 {
margin-bottom: 7em; } }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul.is-open-3 {
margin-bottom: 11em; } }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul.is-open-4 {
margin-bottom: 15em; } }
.eneco3 .nav .menu-main ul li {
position: relative;
border-bottom: 1px solid #E1E1E1;
font-size: 16px;
/* Tertiary navigation / Flyout */ }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li {
position: static;
display: inline-block;
width: auto;
height: 100px;
margin-bottom: 0;
border-bottom: none; } }
.eneco3 .nav .menu-main ul li.is-active a {
color: #D21242; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li + li {
margin-left: 15px; } }
.eneco3 .nav .menu-main ul li a {
font-size: 1em;
color: #666666; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li a {
position: relative;
display: block;
padding-top: 0;
padding-bottom: 0;
font-size: 1.250em;
line-height: 100px; } }
.eneco3 .nav .menu-main ul li a:hover {
color: #D21242; }
.eneco3 .nav .menu-main ul li ul {
width: 100%;
max-height: 0;
margin-left: 1.25em;
overflow: hidden;
background-color: #FFFFFF;
-webkit-transition: max-height 300ms;
transition: max-height 300ms; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li ul {
position: absolute;
top: 80px;
left: 0;
margin: 0;
opacity: 0; } }
.eneco3 .nav .menu-main ul li ul li {
height: auto;
border-bottom: none;
margin-left: 0; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li ul li {
width: 33.33333333%;
float: left;
text-align: left; } }
.eneco3 .nav .menu-main ul li ul li a {
position: relative;
padding: 0 0 0 3em;
font-size: 0.875em;
line-height: 3.125em;
color: #666666; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li ul li a {
padding-left: 5em;
font-size: 1.250em; } }
.eneco3 .nav .menu-main ul li ul li a .icon {
position: absolute;
z-index: 1;
font-size: 24px;
top: 0.35em;
left: 0;
color: #CCCCCC; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li ul li a .icon {
top: 0.8em;
left: 2.5em; } }
.eneco3 .nav .menu-main ul li ul li a:hover, .eneco3 .nav .menu-main ul li ul li a.is-active {
color: #D21242; }
.eneco3 .nav .menu-main ul li ul li a:hover .icon, .eneco3 .nav .menu-main ul li ul li a.is-active .icon {
color: #D21242; }
.eneco3 .nav .menu-main ul li ul:after {
position: absolute;
top: 1.5em;
right: 1em;
content: " ";
width: 14px;
height: 8px;
background-image: url(9a27f27493be45acd5feaf586b99f8e19f7f9ca6.png) ;
background-position: -233px -140px;
background-repeat: no-repeat;
padding: 0; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li ul:after {
background: none; } }
.eneco3 .nav .menu-main ul li.is-open ul {
max-height: 900px;
margin-bottom: 1em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li.is-open ul {
margin-bottom: 0;
opacity: 1; } }
.eneco3 .nav .menu-main ul li.is-open ul:after {
width: 14px;
height: 8px;
background-image: url(9a27f27493be45acd5feaf586b99f8e19f7f9ca6.png) ;
background-position: -41px -44px;
background-repeat: no-repeat;
padding: 0; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-main ul li.is-open ul:after {
background: none; } }
.eneco3 .nav .menu-main ul li.is-open ul a {
display: block;
color: #666666; }
.eneco3 .nav .menu-meta a:hover {
color: #D21242; }
.eneco3 .nav .menu-meta a.nav-icon-weather {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-weather {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-weather:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -36px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-weather:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-weather:hover:after {
background-position: -132px -36px; }
.eneco3 .nav .menu-meta a.nav-icon-piechart {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-piechart {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-piechart:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -132px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-piechart:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-piechart:hover:after {
background-position: -132px -132px; }
.eneco3 .nav .menu-meta a.nav-icon-toon {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-toon {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-toon:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -228px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-toon:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-toon:hover:after {
background-position: -132px -228px; }
.eneco3 .nav .menu-meta a.nav-icon-world {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-world {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-world:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -324px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-world:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-world:hover:after {
background-position: -132px -324px; }
.eneco3 .nav .menu-meta a.nav-icon-bell {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-bell {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-bell:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -420px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-bell:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-bell:hover:after {
background-position: -132px -420px; }
.eneco3 .nav .menu-meta a.nav-icon-fit {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-fit {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-fit:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -516px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-fit:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-fit:hover:after {
background-position: -132px -516px; }
.eneco3 .nav .menu-meta a.nav-icon-text {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-text {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-text:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -612px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-text:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-text:hover:after {
background-position: -132px -612px; }
.eneco3 .nav .menu-meta a.nav-icon-comment {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-comment {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-comment:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -708px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-comment:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-comment:hover:after {
background-position: -132px -708px; }
.eneco3 .nav .menu-meta a.nav-icon-temperature {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-temperature {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-temperature:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -804px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-temperature:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-temperature:hover:after {
background-position: -132px -804px; }
.eneco3 .nav .menu-meta a.nav-icon-leaf {
position: relative;
color: #D21242;
padding-left: 5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-leaf {
padding-left: 5em; } }
.eneco3 .nav .menu-meta a.nav-icon-leaf:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: -228px -900px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
top: 0.875em;
left: 2.5em; }
@media all and (min-width: 64.125em) {
.eneco3 .nav .menu-meta a.nav-icon-leaf:after {
top: 0.9375em;
left: 3em; } }
.eneco3 .nav .menu-meta a.nav-icon-leaf:hover:after {
background-position: -132px -900px; }
@media only screen and (min-width: 64.125em) {
.eneco3 .has-languageswitch .nav .menu-main > ul {
padding-right: 100px; } }
.eneco3 header .header,
.eneco3 header .header-sticky {
margin: auto;
position: relative;
width: 100%;
height: 60px;
font-size: 1em; }
@media all and (min-width: 64.125em) {
.eneco3 header .header,
.eneco3 header .header-sticky {
width: 62.5em;
height: 0; } }
.eneco3 header .logo {
display: block;
margin: auto;
text-align: center;
width: 50%; }
@media all and (min-width: 64.125em) {
.eneco3 header .logo {
position: absolute;
top: 50px;
left: 0;
width: auto;
height: 100px;
z-index: 10; } }
.eneco3 header .logo img {
height: 40px;
margin-top: 10px; }
@media all and (min-width: 64.125em) {
.eneco3 header .logo img {
height: auto;
margin-top: 17px; } }
.eneco3 header .header-sticky {
position: fixed;
z-index: 1000;
top: -52px;
left: 0;
width: 100%;
background-color: #FFFFFF;
height: 52px;
border-bottom: 2px solid #E1E1E1;
display: block;
overflow: hidden;
/* against ghosting */
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; }
@media all and (min-width: 64.125em) {
.eneco3 header .header-sticky {
display: none;
border: none; } }
.eneco3 header .header-sticky.open {
top: 0; }
@media all and (min-width: 64.125em) {
.eneco3 header.no-navigation {
min-height: 9.375em;
border-top: 50px solid #EDEDED; } }
@media all and (min-width: 64.125em) {
.eneco3 header.no-navigation .logo,
.eneco3 header.no-navigation .ask-a-question-toggle {
top: 0; } }
.eneco3 header.no-navigation .nav-btn {
display: none; }
.eneco3 .nav-btn {
display: block;
position: absolute;
top: 0;
left: 0;
font-size: 0.75em;
color: #414141;
text-align: center;
margin: 0.813em 15px 0; }
@media all and (min-width: 64.125em) {
.eneco3 .nav-btn {
display: none;
text-align: left; }
.eneco3 .nav-btn i {
margin-bottom: 0; } }
.eneco3 .nav-btn i {
margin-bottom: 5px; }
.eneco3 .nav-btn .nav-btn__label {
text-transform: uppercase;
line-height: 1.1;
font-weight: 600; }
@media all and (min-width: 64.125em) {
.eneco3 .nav-btn .nav-btn__label {
text-transform: none;
line-height: 100px;
font-weight: normal; }
.eneco3 .nav-btn .nav-btn__label.show-for-large {
display: inline-block; }
.eneco3 .nav-btn .nav-btn__label.hide-for-large {
display: none; } }
@media all and (min-width: 64.125em) {
.eneco3 .nav-btn:hover,
.eneco3 .nav-btn:hover i {
color: #D21242; }
.eneco3 .nav-btn.ask-a-question-toggle:hover i {
color: #D21242; } }
.eneco3 .nav-btn:hover,
.eneco3 .nav-btn:hover i {
color: #414141; }
.eneco3 .nav-btn:hover,
.eneco3 .nav-btn:hover span {
text-decoration: none; }
.eneco3 .nav-btn.ask-a-question-toggle:hover i {
color: #EC740F; }
.eneco3 .ask-a-question-toggle {
right: 0;
left: auto; }
.eneco3 .ask-a-question-toggle i {
color: #EC740F; }
.eneco3 .ask-a-question-toggle i:hover .eneco3 .ask-a-question-toggle i {
color: #D21242; }
.eneco3 .ask-a-question-toggle i.hide-for-large {
display: inline-block; }
.eneco3 .ask-a-question-toggle i.show-for-large {
display: none; }
@media all and (min-width: 64.125em) {
.eneco3 .ask-a-question-toggle {
margin-top: 0;
display: block;
font-size: 1em;
top: 3.125em;
right: 0;
height: 100px;
line-height: 100px;
text-align: right;
z-index: 20; }
.eneco3 .ask-a-question-toggle i.hide-for-large {
display: none; }
.eneco3 .ask-a-question-toggle i.show-for-large {
display: inline-block;
margin-left: 15px;
margin-bottom: -5px; } }
@media only screen and (min-width: 64.125em) {
.eneco3 .has-languageswitch header .ask-a-question-toggle {
right: 100px; } }
.eneco3 .header__language {
display: none;
margin-left: 1em; }
.has-languageswitch .eneco3 .header__language {
display: block; }
@media only screen and (min-width: 64.125em) {
.eneco3 .header__language {
position: absolute;
top: 5.35em;
right: 1em;
z-index: 10; } }
.eneco3 .footer .footer-top,
.eneco3 .footer .footer-bottom {
padding: 2em 0; }
.eneco3 .footer .footer-top {
background: #EDEDED; }
.eneco3 .footer .footer-bottom {
color: #B7B7B7; }
.eneco3 .footer .footer-block {
text-align: center;
padding: 0;
margin-bottom: 2em; }
@media all and (min-width: 64.125em) {
.eneco3 .footer .footer-block {
text-align: left; } }
.eneco3 .footer .footer-block h5 {
display: block;
color: #666666; }
.eneco3 .footer .footer-block a {
font-size: 1em;
line-height: 1.875; }
.eneco3 .footer .footer-block.social {
text-align: center; }
@media all and (min-width: 64.125em) {
.eneco3 .footer .footer-block.social {
text-align: left; } }
.eneco3 .footer .footer-block.partner {
text-align: center; }
.eneco3 .footer .duurzaamheid {
margin-bottom: 1em;
text-align: center;
font-size: 0.75em;
line-height: 1.5em; }
.eneco3 .footer .duurzaamheid > p {
margin-bottom: 0; }
.eneco3 .footer .copyright {
padding-top: 1em;
font-size: 0.75em;
text-align: center; }
.eneco3 .footer .copyright p {
margin: 0; }
.eneco3 .footer .copyright .footer-legal {
text-align: center;
color: #B7B7B7;
width: 100%;
display: block; }
.eneco3 .footer .copyright .footer-legal ul {
display: inline-block; }
.eneco3 .footer .copyright .footer-legal ul li {
display: inline-block;
margin: 0; }
.eneco3 .footer .copyright .footer-legal ul li + li {
margin-left: 1em; }
.eneco3 .footer .copyright .footer-legal ul li a {
text-decoration: none;
color: #B7B7B7;
text-decoration: underline;
font-size: .875em; }
@media all and (min-width: 40em) {
.eneco3 .footer .copyright .footer-legal {
width: auto; } }
.eneco3 .footer-scroll-more {
display: none; }
@media screen and (min-width: 1250px) {
.eneco3 .footer-scroll-more {
display: block;
position: fixed;
right: 0;
bottom: 3em;
right: 2em;
z-index: 801; } }
.eneco3 .ask-a-question {
overflow: hidden;
max-height: 0;
background: #FFFFFF;
background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%);
background: linear-gradient(to bottom, #FFFFFF 0%, #EDEDED 100%);
-webkit-transition: max-height, 600ms;
transition: max-height, 600ms; }
.eneco3 .ask-a-question.is-active {
max-height: 1000px; }
@media all and (min-width: 64.125em) {
.eneco3 .ask-a-question.is-active {
max-height: 600px; } }
.eneco3 .etvawrapper {
padding-top: 0.9375em; }
.eneco3 .row {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
width: 100%;
*zoom: 1; }
.eneco3 .row:before, .eneco3 .row:after {
content: " ";
display: table; }
.eneco3 .row:after {
clear: both; }
.eneco3 .row.collapse .column,
.eneco3 .row.collapse .columns {
padding-left: 0;
padding-right: 0;
float: left; }
.eneco3 .row .row {
margin-left: -0.9375em;
margin-right: -0.9375em;
max-width: none;
width: auto;
*zoom: 1; }
.eneco3 .row .row:before, .eneco3 .row .row:after {
content: " ";
display: table; }
.eneco3 .row .row:after {
clear: both; }
.eneco3 .row .row.collapse {
margin-left: 0;
margin-right: 0;
max-width: none;
width: auto;
*zoom: 1; }
.eneco3 .row .row.collapse:before, .eneco3 .row .row.collapse:after {
content: " ";
display: table; }
.eneco3 .row .row.collapse:after {
clear: both; }
.eneco3 .column,
.eneco3 .columns {
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
float: left;
position: relative; }
@media only screen {
.eneco3 .small-1 {
width: 8.33333333%; }
.eneco3 .small-2 {
width: 16.66666667%; }
.eneco3 .small-3 {
width: 25%; }
.eneco3 .small-4 {
width: 33.33333333%; }
.eneco3 .small-5 {
width: 41.66666667%; }
.eneco3 .small-6 {
width: 50%; }
.eneco3 .small-7 {
width: 58.33333333%; }
.eneco3 .small-8 {
width: 66.66666667%; }
.eneco3 .small-9 {
width: 75%; }
.eneco3 .small-10 {
width: 83.33333333%; }
.eneco3 .small-11 {
width: 91.66666667%; }
.eneco3 .small-12 {
width: 100%; }
.eneco3 .small-1-5 {
width: 20%; }
.eneco3 .small-2-5 {
width: 40%; }
.eneco3 .small-3-5 {
width: 60%; }
.eneco3 .small-4-5 {
width: 80%; }
.eneco3 .small-offset-0 {
margin-left: 0%; }
.eneco3 .small-offset-1 {
margin-left: 8.33333333%; }
.eneco3 .small-offset-2 {
margin-left: 16.66666667%; }
.eneco3 .small-offset-3 {
margin-left: 25%; }
.eneco3 .small-offset-4 {
margin-left: 33.33333333%; }
.eneco3 .small-offset-5 {
margin-left: 41.66666667%; }
.eneco3 .small-offset-6 {
margin-left: 50%; }
.eneco3 .small-offset-7 {
margin-left: 58.33333333%; }
.eneco3 .small-offset-8 {
margin-left: 66.66666667%; }
.eneco3 .small-offset-9 {
margin-left: 75%; }
.eneco3 .small-offset-10 {
margin-left: 83.33333333%; }
.eneco3 [class*="column"] + [class*="column"]:last-child {
float: right; }
.eneco3 [class*="column"] + [class*="column"].end {
float: left; }
.eneco3 .column.small-centered,
.eneco3 .columns.small-centered {
margin-left: auto;
margin-right: auto;
float: none !important; } }
@media only screen and (min-width: 640px) {
.eneco3 .medium-1 {
width: 8.33333333%; }
.eneco3 .medium-2 {
width: 16.66666667%; }
.eneco3 .medium-3 {
width: 25%; }
.eneco3 .medium-4 {
width: 33.33333333%; }
.eneco3 .medium-5 {
width: 41.66666667%; }
.eneco3 .medium-6 {
width: 50%; }
.eneco3 .medium-7 {
width: 58.33333333%; }
.eneco3 .medium-8 {
width: 66.66666667%; }
.eneco3 .medium-9 {
width: 75%; }
.eneco3 .medium-10 {
width: 83.33333333%; }
.eneco3 .medium-11 {
width: 91.66666667%; }
.eneco3 .medium-12 {
width: 100%; }
.eneco3 .medium-1-5 {
width: 20%; }
.eneco3 .medium-2-5 {
width: 40%; }
.eneco3 .medium-3-5 {
width: 60%; }
.eneco3 .medium-4-5 {
width: 80%; }
.eneco3 .medium-offset-0 {
margin-left: 0%; }
.eneco3 .medium-offset-1 {
margin-left: 8.33333333%; }
.eneco3 .medium-offset-2 {
margin-left: 16.66666667%; }
.eneco3 .medium-offset-3 {
margin-left: 25%; }
.eneco3 .medium-offset-4 {
margin-left: 33.33333333%; }
.eneco3 .medium-offset-5 {
margin-left: 41.66666667%; }
.eneco3 .medium-offset-6 {
margin-left: 50%; }
.eneco3 .medium-offset-7 {
margin-left: 58.33333333%; }
.eneco3 .medium-offset-8 {
margin-left: 66.66666667%; }
.eneco3 .medium-offset-9 {
margin-left: 75%; }
.eneco3 .medium-offset-10 {
margin-left: 83.33333333%; }
.eneco3 .medium-offset-11 {
margin-left: 91.66666667%; }
.eneco3 .medium-push-1 {
left: 8.33333333%;
right: auto; }
.eneco3 .medium-pull-1 {
right: 8.33333333%;
left: auto; }
.eneco3 .medium-push-2 {
left: 16.66666667%;
right: auto; }
.eneco3 .medium-pull-2 {
right: 16.66666667%;
left: auto; }
.eneco3 .medium-push-3 {
left: 25%;
right: auto; }
.eneco3 .medium-pull-3 {
right: 25%;
left: auto; }
.eneco3 .medium-push-4 {
left: 33.33333333%;
right: auto; }
.eneco3 .medium-pull-4 {
right: 33.33333333%;
left: auto; }
.eneco3 .medium-push-5 {
left: 41.66666667%;
right: auto; }
.eneco3 .medium-pull-5 {
right: 41.66666667%;
left: auto; }
.eneco3 .medium-push-6 {
left: 50%;
right: auto; }
.eneco3 .medium-pull-6 {
right: 50%;
left: auto; }
.eneco3 .medium-push-7 {
left: 58.33333333%;
right: auto; }
.eneco3 .medium-pull-7 {
right: 58.33333333%;
left: auto; }
.eneco3 .medium-push-8 {
left: 66.66666667%;
right: auto; }
.eneco3 .medium-pull-8 {
right: 66.66666667%;
left: auto; }
.eneco3 .medium-push-9 {
left: 75%;
right: auto; }
.eneco3 .medium-pull-9 {
right: 75%;
left: auto; }
.eneco3 .medium-push-10 {
left: 83.33333333%;
right: auto; }
.eneco3 .medium-pull-10 {
right: 83.33333333%;
left: auto; }
.eneco3 .medium-push-11 {
left: 91.66666667%;
right: auto; }
.eneco3 .medium-pull-11 {
right: 91.66666667%;
left: auto; }
.eneco3 .column.medium-centered,
.eneco3 .columns.medium-centered {
margin-left: auto;
margin-right: auto;
float: none !important; }
.eneco3 .column.medium-uncentered,
.eneco3 .columns.medium-uncentered {
margin-left: 0;
margin-right: 0;
float: left !important; } }
@media only screen and (min-width: 1024px) {
.eneco3 .large-1 {
width: 8.33333333%; }
.eneco3 .large-2 {
width: 16.66666667%; }
.eneco3 .large-3 {
width: 25%; }
.eneco3 .large-4 {
width: 33.33333333%; }
.eneco3 .large-5 {
width: 41.66666667%; }
.eneco3 .large-6 {
width: 50%; }
.eneco3 .large-7 {
width: 58.33333333%; }
.eneco3 .large-8 {
width: 66.66666667%; }
.eneco3 .large-9 {
width: 75%; }
.eneco3 .large-10 {
width: 83.33333333%; }
.eneco3 .large-11 {
width: 91.66666667%; }
.eneco3 .large-12 {
width: 100%; }
.eneco3 .large-1-5 {
width: 20%; }
.eneco3 .large-2-5 {
width: 40%; }
.eneco3 .large-3-5 {
width: 60%; }
.eneco3 .large-4-5 {
width: 80%; }
.eneco3 .large-offset-0 {
margin-left: 0%; }
.eneco3 .large-offset-1 {
margin-left: 8.33333333%; }
.eneco3 .large-offset-2 {
margin-left: 16.66666667%; }
.eneco3 .large-offset-3 {
margin-left: 25%; }
.eneco3 .large-offset-4 {
margin-left: 33.33333333%; }
.eneco3 .large-offset-5 {
margin-left: 41.66666667%; }
.eneco3 .large-offset-6 {
margin-left: 50%; }
.eneco3 .large-offset-7 {
margin-left: 58.33333333%; }
.eneco3 .large-offset-8 {
margin-left: 66.66666667%; }
.eneco3 .large-offset-9 {
margin-left: 75%; }
.eneco3 .large-offset-10 {
margin-left: 83.33333333%; }
.eneco3 .large-offset-11 {
margin-left: 91.66666667%; }
.eneco3 .large-push-1 {
left: 8.33333333%;
right: auto; }
.eneco3 .large-pull-1 {
right: 8.33333333%;
left: auto; }
.eneco3 .large-push-2 {
left: 16.66666667%;
right: auto; }
.eneco3 .large-pull-2 {
right: 16.66666667%;
left: auto; }
.eneco3 .large-push-3 {
left: 25%;
right: auto; }
.eneco3 .large-pull-3 {
right: 25%;
left: auto; }
.eneco3 .large-push-4 {
left: 33.33333333%;
right: auto; }
.eneco3 .large-pull-4 {
right: 33.33333333%;
left: auto; }
.eneco3 .large-push-5 {
left: 41.66666667%;
right: auto; }
.eneco3 .large-pull-5 {
right: 41.66666667%;
left: auto; }
.eneco3 .large-push-6 {
left: 50%;
right: auto; }
.eneco3 .large-pull-6 {
right: 50%;
left: auto; }
.eneco3 .large-push-7 {
left: 58.33333333%;
right: auto; }
.eneco3 .large-pull-7 {
right: 58.33333333%;
left: auto; }
.eneco3 .large-push-8 {
left: 66.66666667%;
right: auto; }
.eneco3 .large-pull-8 {
right: 66.66666667%;
left: auto; }
.eneco3 .large-push-9 {
left: 75%;
right: auto; }
.eneco3 .large-pull-9 {
right: 75%;
left: auto; }
.eneco3 .large-push-10 {
left: 83.33333333%;
right: auto; }
.eneco3 .large-pull-10 {
right: 83.33333333%;
left: auto; }
.eneco3 .large-push-11 {
left: 91.66666667%;
right: auto; }
.eneco3 .large-pull-11 {
right: 91.66666667%;
left: auto; }
.eneco3 .column.large-centered,
.eneco3 .columns.large-centered {
margin-left: auto;
margin-right: auto;
float: none !important; }
.eneco3 .column.large-uncentered,
.eneco3 .columns.large-uncentered {
margin-left: 0;
margin-right: 0;
float: left !important; } }
.eneco3 .is-hidden,
.eneco3 .hideMeNow {
display: none !important; }
.eneco3 .is-shown,
.eneco3 .showMeNow {
display: block !important; }
.eneco3 .hide-for-small {
display: none; }
.eneco3 .hide-for-medium {
display: block; }
.eneco3 .hide-for-large {
display: block; }
.eneco3 .show-for-small {
display: block; }
.eneco3 .show-for-medium {
display: none; }
.eneco3 .show-for-large {
display: none; }
@media all and (min-width: 40em) {
.eneco3 .hide-for-small {
display: block; }
.eneco3 .hide-for-medium {
display: none; }
.eneco3 .hide-for-large {
display: block; }
.eneco3 .show-for-small {
display: none; }
.eneco3 .show-for-medium {
display: block; }
.eneco3 .show-for-large {
display: none; } }
@media all and (min-width: 64.125em) {
.eneco3 .hide-for-small {
display: block; }
.eneco3 .hide-for-medium {
display: block; }
.eneco3 .hide-for-large {
display: none; }
.eneco3 .show-for-small {
display: none; }
.eneco3 .show-for-medium {
display: none; }
.eneco3 .show-for-large {
display: block; } }
.eneco3 .visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.eneco3 .is-measurable {
visibility: hidden !important;
display: block !important;
position: absolute !important;
left: -999em !important;
height: auto !important; }
.eneco3 .icon {
position: relative;
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
zoom: 1;
/* 1 */
/* 3 */
font-size: 16px ;
/* 2 */
/* 3 */
font-size: 1rem ;
font-family: "fontello";
line-height: 1;
font-style: normal;
text-align: center;
font-weight: normal; }
.eneco3 .icon:before {
content: attr(data-icon);
font-family: "fontello" !important; }
.eneco3 .icon--chat-empty:before {
content: '\e800'; }
.eneco3 .icon--linkedin:before {
content: '\e801'; }
.eneco3 .icon--facebook:before {
content: '\e802'; }
.eneco3 .icon--youtube-play:before {
content: '\e803'; }
.eneco3 .icon--youtube:before {
content: '\e804'; }
.eneco3 .icon--twitter:before {
content: '\e805'; }
.eneco3 .icon--video-play:before {
content: '\e806'; }
.eneco3 .icon--video-play-bg:before {
content: '\e807'; }
.eneco3 .icon--video-play-icon:before {
content: '\e808'; }
.eneco3 .icon--afgerond:before {
content: '\e809'; }
.eneco3 .icon--calendar-empty:before {
content: '\e80a'; }
.eneco3 .icon--home:before {
content: '\e80b'; }
.eneco3 .icon--clock:before {
content: '\e80c'; }
.eneco3 .icon--biomassa:before {
content: '\e80d'; }
.eneco3 .icon--energiebesparen:before {
content: '\e80e'; }
.eneco3 .icon--gas:before {
content: '\e80f'; }
.eneco3 .icon--inaanbouw:before {
content: '\e810'; }
.eneco3 .icon--innovatie:before {
content: '\e811'; }
.eneco3 .icon--installatie:before {
content: '\e812'; }
.eneco3 .icon--oplaadpunten:before {
content: '\e813'; }
.eneco3 .icon--planning:before {
content: '\e814'; }
.eneco3 .icon--samenopwekken:before {
content: '\e815'; }
.eneco3 .icon--verlichting:before {
content: '\e816'; }
.eneco3 .icon--warmtekoude:before {
content: '\e817'; }
.eneco3 .icon--windenergie:before {
content: '\e818'; }
.eneco3 .icon--zonneenergie:before {
content: '\e819'; }
.eneco3 .icon--plus:before {
content: '\e81a'; }
.eneco3 .icon--cancel:before {
content: '\e81b'; }
.eneco3 .icon--gplus:before {
content: '\e81c'; }
.eneco3 .icon--letter:before {
content: '\e81d'; }
.eneco3 .icon--document:before {
content: '\e81e'; }
.eneco3 .icon--bolt:before {
content: '\e81f'; }
.eneco3 .icon--thinking:before {
content: '\e820'; }
.eneco3 .icon--forum:before {
content: '\e821'; }
.eneco3 .icon--smartphone:before {
content: '\e822'; }
.eneco3 .icon--e-mail:before {
content: '\e823'; }
.eneco3 .icon--star:before {
content: '\e824'; }
.eneco3 .icon--leaf:before {
content: '\e825'; }
.eneco3 .icon--stats:before {
content: '\e826'; }
.eneco3 .icon--heart:before {
content: '\e827'; }
.eneco3 .icon--hamburgermenu:before {
content: '\e828'; }
.eneco3 .icon--questions:before {
content: '\e829'; }
.eneco3 .icon--arrow-down:before {
content: '\e82a'; }
.eneco3 .icon--arrow-right:before {
content: '\e82b'; }
.eneco3 .icon--arrow-left:before {
content: '\e82c'; }
.eneco3 .icon--arrow-up:before {
content: '\e82d'; }
.eneco3 .icon--arrow-sort-down:before {
content: '\e82e'; }
.eneco3 .icon--arrow-sort-up:before {
content: '\e82f'; }
.eneco3 .icon--houseoutlinethin:before {
content: '\e830'; }
.eneco3 .icon--houseoutlinethick:before {
content: '\e831'; }
.eneco3 .icon--houseoutlinethicker:before {
content: '\e832'; }
.eneco3 .icon--shower:before {
content: '\e833'; }
.eneco3 .icon--bath:before {
content: '\e834'; }
.eneco3 .icon--maan:before {
content: '\e835'; }
.eneco3 .icon--forum-1:before {
content: '\e836'; }
.eneco3 .icon--persoonlijk:before {
content: '\e837'; }
.eneco3 .icon--contact:before {
content: '\e838'; }
.eneco3 .icon--persoon:before {
content: '\e839'; }
.eneco3 .icon--stroom-en-gas:before {
content: '\e83a'; }
.eneco3 .icon--winkelmandje:before {
content: '\e83b'; }
.eneco3 .icon--zoom:before {
content: '\e83c'; }
.eneco3 .icon--cv-onderhoud:before {
content: '\e83d'; }
.eneco3 .icon--zonnepanelen:before {
content: '\e83e'; }
.eneco3 .icon--isolatie:before {
content: '\e83f'; }
.eneco3 .icon--toon:before {
content: '\e840'; }
.eneco3 .icon--stel-een-vraag-v1:before {
content: '\e841'; }
.eneco3 .icon--overstappen:before {
content: '\e842'; }
.eneco3 .icon--steeksleutel:before {
content: '\e843'; }
.eneco3 .icon--gereedschapskist:before {
content: '\e844'; }
.eneco3 .icon--onderhoud-periodiek:before {
content: '\e845'; }
.eneco3 .icon--gesprek:before {
content: '\e846'; }
.eneco3 .icon--meterstanden:before {
content: '\e847'; }
.eneco3 .icon--jaarnota:before {
content: '\e848'; }
.eneco3 .icon--termijnbedrag:before {
content: '\e849'; }
.eneco3 .icon--energieprijzen:before {
content: '\e84a'; }
.eneco3 .icon--verhuizen:before {
content: '\e84b'; }
.eneco3 .icon--europa:before {
content: '\e84c'; }
.eneco3 .icon--nederland:before {
content: '\e84d'; }
.eneco3 .icon--waterkracht:before {
content: '\e84e'; }
.eneco3 .icon--klimaatneutraal:before {
content: '\e84f'; }
.eneco3 .icon--zonneboiler:before {
content: '\e850'; }
.eneco3 .icon--grafiek-oplopend:before {
content: '\e851'; }
.eneco3 .icon--kwaliteit:before {
content: '\e852'; }
.eneco3 .icon--wereldbol:before {
content: '\e853'; }
.eneco3 .icon--advieskeuze:before {
content: '\e854'; }
.eneco3 .icon--combiketel:before {
content: '\e855'; }
.eneco3 .icon--fotocamera:before {
content: '\e856'; }
.eneco3 .icon--servicezaken:before {
content: '\e857'; }
.eneco3 .icon--geldzaken:before {
content: '\e858'; }
.eneco3 .icon--oven:before {
content: '\e859'; }
.eneco3 .icon--kraan:before {
content: '\e85a'; }
.eneco3 .icon--wasmachine:before {
content: '\e85b'; }
.eneco3 .icon--verwarming:before {
content: '\e85c'; }
.eneco3 .icon--televisie:before {
content: '\e85d'; }
.eneco3 .icon--huis:before {
content: '\e85e'; }
.eneco3 .icon--producten:before {
content: '\e85f'; }
.eneco3 .icon--klantgegevens:before {
content: '\e860'; }
.eneco3 .icon--zon:before {
content: '\e861'; }
.eneco3 .icon--info:before {
content: '\e862'; }
.eneco3 .icon--quote:before {
content: '\e863'; }
.eneco3 .icon--klantcijfer-leeg:before {
content: '\e864'; }
.eneco3 .icon--klantcijfer:before {
content: '\e865'; }
.eneco3 .icon--denkwolk:before {
content: '\e866'; }
.eneco3 .icon--personen:before {
content: '\e867'; }
.eneco3 .icon--brochure:before {
content: '\e868'; }
.eneco3 .icon--euro:before {
content: '\e869'; }
.eneco3 .icon--gesprekspunten:before {
content: '\e86a'; }
.eneco3 .icon--boormachine:before {
content: '\e86b'; }
.eneco3 .icon--moderne-lamp:before {
content: '\e86c'; }
.eneco3 .icon--documenten:before {
content: '\e86d'; }
.eneco3 .icon--welkom:before {
content: '\e86e'; }
.eneco3 .icon--mening:before {
content: '\e86f'; }
.eneco3 .icon--duurzaam:before {
content: '\e870'; }
.eneco3 .icon--auto:before {
content: '\e871'; }
.eneco3 .icon--zon-gevuld:before {
content: '\e872'; }
.eneco3 .icon--oog:before {
content: '\e873'; }
.eneco3 .icon--spaarvarken:before {
content: '\e874'; }
.eneco3 .icon--esco:before {
content: '\e875'; }
.eneco3 .icon--grafiek-afnemend:before {
content: '\e876'; }
.eneco3 .icon--pan:before {
content: '\e877'; }
.eneco3 .icon--mens-en-bomen:before {
content: '\e878'; }
.eneco3 .icon--vraagteken:before {
content: '\e879'; }
.eneco3 .icon--eneco-groep:before {
content: '\e87a'; }
.eneco3 .icon--kantoorgebouw:before {
content: '\e87b'; }
.eneco3 .icon--woning:before {
content: '\e87c'; }
.eneco3 .icon--pas:before {
content: '\e87d'; }
.eneco3 .icon--nieuws-media:before {
content: '\e87e'; }
.eneco3 .icon--euros:before {
content: '\e87f'; }
.eneco3 .icon--duitsland:before {
content: '\e880'; }
.eneco3 .icon--frankrijk:before {
content: '\e881'; }
.eneco3 .icon--engeland:before {
content: '\e882'; }
.eneco3 .icon--garantie:before {
content: '\e883'; }
.eneco3 .icon--belgie:before {
content: '\e884'; }
.eneco3 .icon--document-pdf:before {
content: '\e885'; }
.eneco3 .icon--document-www:before {
content: '\e886'; }
.eneco3 .icon--ok:before {
content: '\e887'; }
.eneco3 .icon--down-open:before {
content: '\e888'; }
.eneco3 .icon--minus:before {
content: '\e889'; }
.eneco3 .icon--spin6:before {
content: '\e88a'; }
.eneco3 .icon--video-play:before {
content: '\e806'; }
.eneco3 .icon--video-play-multi {
position: relative; }
.eneco3 .icon--video-play-multi:before {
content: '\e807';
color: #231F20;
color: rgba(35, 31, 32, 0.9); }
.eneco3 .icon--video-play-multi:after {
content: '\e808';
position: absolute;
left: 0;
top: 0;
z-index: 10;
color: #fff; }
.eneco3 .icon--ideal {
content: '';
text-align: center;
line-height: 2.5em;
width: 2.5em;
height: 2.5em;
display: inline-block;
background: url(d560302bdf3aed41260c996058191e93c35ddf03.png) center center no-repeat; }
.eneco3 .icon--alpha {
/* 1 */
/* 3 */
font-size: 96px ;
/* 2 */
/* 3 */
font-size: 6rem ; }
.eneco3 .icon--beta {
/* 1 */
/* 3 */
font-size: 64px ;
/* 2 */
/* 3 */
font-size: 4rem ; }
.eneco3 .icon--gamma {
/* 1 */
/* 3 */
font-size: 32px ;
/* 2 */
/* 3 */
font-size: 2rem ; }
.eneco3 .icon--delta {
/* 1 */
/* 3 */
font-size: 24px ;
/* 2 */
/* 3 */
font-size: 1.5rem ; }
.eneco3 .icon--epsilon {
/* 1 */
/* 3 */
font-size: 20px ;
/* 2 */
/* 3 */
font-size: 1.25rem ; }
.eneco3 .icon--zeta {
/* 1 */
/* 3 */
font-size: 16px ;
/* 2 */
/* 3 */
font-size: 1rem ; }
.eneco3 .icon-position--absolute-center {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
z-index: 10; }
.eneco3 .icon-position--absolute-center:before, .eneco3 .icon-position--absolute-center:after {
display: block;
margin: 0; }
.no-csstransforms .eneco3 .icon-position--absolute-center.icon--alpha {
margin-left: -48px;
margin-top: -48px; }
.no-csstransforms .eneco3 .icon-position--absolute-center.icon--beta {
margin-left: -32px;
margin-top: -32px; }
.no-csstransforms .eneco3 .icon-position--absolute-center.icon--gamma {
margin-left: -16px;
margin-top: -16px; }
.eneco3 .icon--circle {
/* 1 */
/* 3 */
padding: 10px ;
/* 2 */
/* 3 */
padding: 0.625rem ;
/* 1 */
/* 3 */
font-size: 10px ;
/* 2 */
/* 3 */
font-size: 0.625rem ; }
.eneco3 .icon--circle:before {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
z-index: 10; }
.no-csstransforms .eneco3 .icon--circle:before {
margin-left: -8px;
margin-top: -8px; }
.eneco3 .icon--video-play:before {
content: '\e806'; }
.eneco3 .icon--video-play-multi {
position: relative; }
.eneco3 .icon--video-play-multi:before {
content: '\e807';
color: #231F20;
color: rgba(35, 31, 32, 0.9); }
.eneco3 .icon--video-play-multi:after {
content: '\e808';
position: absolute;
left: 0;
top: 0;
z-index: 10;
color: #fff; }
.eneco3 .icon--toon-multi-weer {
position: relative; }
.eneco3 .icon--toon-multi-weer:before {
content: '\e8a3';
color: #ffc222; }
.eneco3 .icon--toon-multi-weer:after {
position: absolute;
left: 0;
top: 0;
z-index: 10;
content: '\e8a2';
color: #cbd9de; }
.eneco3 .icon--toon-multi-moduleren {
position: relative; }
.eneco3 .icon--toon-multi-moduleren:before {
content: '\e8a4';
color: #d7e0e7; }
.eneco3 .icon--toon-multi-moduleren:after {
content: '\e8a1';
position: absolute;
left: 0;
top: 0;
z-index: 10;
color: #00afdb; }
.eneco3 .icon--ideal {
content: '';
text-align: center;
line-height: 2.5em;
width: 2.5em;
height: 2.5em;
display: inline-block;
background: url(d560302bdf3aed41260c996058191e93c35ddf03.png) center center no-repeat; }
.eneco3 .icon--color.icon--toon-huiswifi, .eneco3 .icon--color.icon--toon-hersenen {
color: #e74a3a !important; }
.eneco3 .icon--color.icon--toon-download {
color: #2f7699 !important; }
.eneco3 .icon--color.icon--toon-slot, .eneco3 .icon--color.icon--toon-kluis {
color: #cbd9de !important; }
.eneco3 .icon--color.icon--toon-auto {
color: #33495e !important; }
.eneco3 .icon--color.icon--toon-maan {
color: #00b0da !important; }
.eneco3 .icon--color.icon--toon-zonnepanelen {
color: #EC740F !important; }
.eneco3 .icon-position--absolute-center {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
z-index: 10; }
.eneco3 .icon-position--absolute-center:before, .eneco3 .icon-position--absolute-center:after {
display: block;
margin: 0; }
.no-csstransforms .eneco3 .icon-position--absolute-center.icon--alpha {
margin-left: -48px;
margin-top: -48px; }
.no-csstransforms .eneco3 .icon-position--absolute-center.icon--beta {
margin-left: -32px;
margin-top: -32px; }
.no-csstransforms .eneco3 .icon-position--absolute-center.icon--gamma {
margin-left: -16px;
margin-top: -16px; }
.eneco3 .icon--circle {
/* 1 */
/* 3 */
padding: 10px ;
/* 2 */
/* 3 */
padding: 0.625rem ;
/* 1 */
/* 3 */
font-size: 10px ;
/* 2 */
/* 3 */
font-size: 0.625rem ; }
.eneco3 .icon--circle:before {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
z-index: 10; }
.no-csstransforms .eneco3 .icon--circle:before {
margin-left: -8px;
margin-top: -8px; }
.eneco3 .icon--chat-empty:before {
content: '\e800'; }
.eneco3 .icon--linkedin:before {
content: '\e801'; }
.eneco3 .icon--facebook:before {
content: '\e802'; }
.eneco3 .icon--youtube-play:before {
content: '\e803'; }
.eneco3 .icon--youtube:before {
content: '\e804'; }
.eneco3 .icon--twitter:before {
content: '\e805'; }
.eneco3 .icon--video-play:before {
content: '\e806'; }
.eneco3 .icon--video-play-bg:before {
content: '\e807'; }
.eneco3 .icon--video-play-icon:before {
content: '\e808'; }
.eneco3 .icon--afgerond:before {
content: '\e809'; }
.eneco3 .icon--calendar-empty:before {
content: '\e80a'; }
.eneco3 .icon--home:before {
content: '\e80b'; }
.eneco3 .icon--clock:before {
content: '\e80c'; }
.eneco3 .icon--biomassa:before {
content: '\e80d'; }
.eneco3 .icon--energiebesparen:before {
content: '\e80e'; }
.eneco3 .icon--gas:before {
content: '\e80f'; }
.eneco3 .icon--inaanbouw:before {
content: '\e810'; }
.eneco3 .icon--innovatie:before {
content: '\e811'; }
.eneco3 .icon--installatie:before {
content: '\e812'; }
.eneco3 .icon--oplaadpunten:before {
content: '\e813'; }
.eneco3 .icon--planning:before {
content: '\e814'; }
.eneco3 .icon--samenopwekken:before {
content: '\e815'; }
.eneco3 .icon--verlichting:before {
content: '\e816'; }
.eneco3 .icon--warmtekoude:before {
content: '\e817'; }
.eneco3 .icon--windenergie:before {
content: '\e818'; }
.eneco3 .icon--zonneenergie:before {
content: '\e819'; }
.eneco3 .icon--plus:before {
content: '\e81a'; }
.eneco3 .icon--cancel:before {
content: '\e81b'; }
.eneco3 .icon--gplus:before {
content: '\e81c'; }
.eneco3 .icon--letter:before {
content: '\e81d'; }
.eneco3 .icon--document:before {
content: '\e81e'; }
.eneco3 .icon--bolt:before {
content: '\e81f'; }
.eneco3 .icon--thinking:before {
content: '\e820'; }
.eneco3 .icon--forum:before {
content: '\e821'; }
.eneco3 .icon--smartphone:before {
content: '\e822'; }
.eneco3 .icon--e-mail:before {
content: '\e823'; }
.eneco3 .icon--star:before {
content: '\e824'; }
.eneco3 .icon--leaf:before {
content: '\e825'; }
.eneco3 .icon--stats:before {
content: '\e826'; }
.eneco3 .icon--heart:before {
content: '\e827'; }
.eneco3 .icon--hamburgermenu:before {
content: '\e828'; }
.eneco3 .icon--questions:before {
content: '\e829'; }
.eneco3 .icon--arrow-down:before {
content: '\e82a'; }
.eneco3 .icon--arrow-right:before {
content: '\e82b'; }
.eneco3 .icon--arrow-left:before {
content: '\e82c'; }
.eneco3 .icon--arrow-up:before {
content: '\e82d'; }
.eneco3 .icon--arrow-sort-down:before {
content: '\e82e'; }
.eneco3 .icon--arrow-sort-up:before {
content: '\e82f'; }
.eneco3 .icon--houseoutlinethin:before {
content: '\e830'; }
.eneco3 .icon--houseoutlinethick:before {
content: '\e831'; }
.eneco3 .icon--houseoutlinethicker:before {
content: '\e832'; }
.eneco3 .icon--shower:before {
content: '\e833'; }
.eneco3 .icon--bath:before {
content: '\e834'; }
.eneco3 .icon--maan:before {
content: '\e835'; }
.eneco3 .icon--forum-1:before {
content: '\e836'; }
.eneco3 .icon--persoonlijk:before {
content: '\e837'; }
.eneco3 .icon--contact:before {
content: '\e838'; }
.eneco3 .icon--persoon:before {
content: '\e839'; }
.eneco3 .icon--stroom-en-gas:before {
content: '\e83a'; }
.eneco3 .icon--winkelmandje:before {
content: '\e83b'; }
.eneco3 .icon--zoom:before {
content: '\e83c'; }
.eneco3 .icon--cv-onderhoud:before {
content: '\e83d'; }
.eneco3 .icon--zonnepanelen:before {
content: '\e83e'; }
.eneco3 .icon--isolatie:before {
content: '\e83f'; }
.eneco3 .icon--toon:before {
content: '\e840'; }
.eneco3 .icon--stel-een-vraag-v1:before {
content: '\e841'; }
.eneco3 .icon--overstappen:before {
content: '\e842'; }
.eneco3 .icon--steeksleutel:before {
content: '\e843'; }
.eneco3 .icon--gereedschapskist:before {
content: '\e844'; }
.eneco3 .icon--onderhoud-periodiek:before {
content: '\e845'; }
.eneco3 .icon--gesprek:before {
content: '\e846'; }
.eneco3 .icon--meterstanden:before {
content: '\e847'; }
.eneco3 .icon--jaarnota:before {
content: '\e848'; }
.eneco3 .icon--termijnbedrag:before {
content: '\e849'; }
.eneco3 .icon--energieprijzen:before {
content: '\e84a'; }
.eneco3 .icon--verhuizen:before {
content: '\e84b'; }
.eneco3 .icon--europa:before {
content: '\e84c'; }
.eneco3 .icon--nederland:before {
content: '\e84d'; }
.eneco3 .icon--waterkracht:before {
content: '\e84e'; }
.eneco3 .icon--klimaatneutraal:before {
content: '\e84f'; }
.eneco3 .icon--zonneboiler:before {
content: '\e850'; }
.eneco3 .icon--grafiek-oplopend:before {
content: '\e851'; }
.eneco3 .icon--kwaliteit:before {
content: '\e852'; }
.eneco3 .icon--wereldbol:before {
content: '\e853'; }
.eneco3 .icon--advieskeuze:before {
content: '\e854'; }
.eneco3 .icon--combiketel:before {
content: '\e855'; }
.eneco3 .icon--fotocamera:before {
content: '\e856'; }
.eneco3 .icon--servicezaken:before {
content: '\e857'; }
.eneco3 .icon--geldzaken:before {
content: '\e858'; }
.eneco3 .icon--oven:before {
content: '\e859'; }
.eneco3 .icon--kraan:before {
content: '\e85a'; }
.eneco3 .icon--wasmachine:before {
content: '\e85b'; }
.eneco3 .icon--verwarming:before {
content: '\e85c'; }
.eneco3 .icon--televisie:before {
content: '\e85d'; }
.eneco3 .icon--huis:before {
content: '\e85e'; }
.eneco3 .icon--producten:before {
content: '\e85f'; }
.eneco3 .icon--klantgegevens:before {
content: '\e860'; }
.eneco3 .icon--zon:before {
content: '\e861'; }
.eneco3 .icon--info:before {
content: '\e862'; }
.eneco3 .icon--quote:before {
content: '\e863'; }
.eneco3 .icon--klantcijfer-leeg:before {
content: '\e864'; }
.eneco3 .icon--klantcijfer:before {
content: '\e865'; }
.eneco3 .icon--denkwolk:before {
content: '\e866'; }
.eneco3 .icon--personen:before {
content: '\e867'; }
.eneco3 .icon--brochure:before {
content: '\e868'; }
.eneco3 .icon--euro:before {
content: '\e869'; }
.eneco3 .icon--gesprekspunten:before {
content: '\e86a'; }
.eneco3 .icon--boormachine:before {
content: '\e86b'; }
.eneco3 .icon--moderne-lamp:before {
content: '\e86c'; }
.eneco3 .icon--documenten:before {
content: '\e86d'; }
.eneco3 .icon--welkom:before {
content: '\e86e'; }
.eneco3 .icon--mening:before {
content: '\e86f'; }
.eneco3 .icon--duurzaam:before {
content: '\e870'; }
.eneco3 .icon--auto:before {
content: '\e871'; }
.eneco3 .icon--zon-gevuld:before {
content: '\e872'; }
.eneco3 .icon--oog:before {
content: '\e873'; }
.eneco3 .icon--spaarvarken:before {
content: '\e874'; }
.eneco3 .icon--esco:before {
content: '\e875'; }
.eneco3 .icon--grafiek-afnemend:before {
content: '\e876'; }
.eneco3 .icon--pan:before {
content: '\e877'; }
.eneco3 .icon--mens-en-bomen:before {
content: '\e878'; }
.eneco3 .icon--vraagteken:before {
content: '\e879'; }
.eneco3 .icon--eneco-groep:before {
content: '\e87a'; }
.eneco3 .icon--kantoorgebouw:before {
content: '\e87b'; }
.eneco3 .icon--woning:before {
content: '\e87c'; }
.eneco3 .icon--pas:before {
content: '\e87d'; }
.eneco3 .icon--nieuws-media:before {
content: '\e87e'; }
.eneco3 .icon--euros:before {
content: '\e87f'; }
.eneco3 .icon--duitsland:before {
content: '\e880'; }
.eneco3 .icon--frankrijk:before {
content: '\e881'; }
.eneco3 .icon--engeland:before {
content: '\e882'; }
.eneco3 .icon--garantie:before {
content: '\e883'; }
.eneco3 .icon--belgie:before {
content: '\e884'; }
.eneco3 .icon--document-pdf:before {
content: '\e885'; }
.eneco3 .icon--document-www:before {
content: '\e886'; }
.eneco3 .icon--ok:before {
content: '\e887'; }
.eneco3 .icon--down-open:before {
content: '\e888'; }
.eneco3 .icon--minus:before {
content: '\e889'; }
.eneco3 .icon--toon-thermostaat:before {
content: '\e88a'; }
.eneco3 .icon--toon-vlam:before {
content: '\e88b'; }
.eneco3 .icon--toon-weer:before {
content: '\e88c'; }
.eneco3 .icon--toon-zonnepanelen:before {
content: '\e88d'; }
.eneco3 .icon--toon-apps:before {
content: '\e88e'; }
.eneco3 .icon--toon-auto:before {
content: '\e88f'; }
.eneco3 .icon--toon-bediening:before {
content: '\e890'; }
.eneco3 .icon--toon-bliksem:before {
content: '\e891'; }
.eneco3 .icon--toon-download:before {
content: '\e892'; }
.eneco3 .icon--toon-duim:before {
content: '\e893'; }
.eneco3 .icon--toon-hersenen:before {
content: '\e894'; }
.eneco3 .icon--toon-kluis:before {
content: '\e895'; }
.eneco3 .icon--toon-vergelijk:before {
content: '\e896'; }
.eneco3 .icon--toon-idee:before {
content: '\e897'; }
.eneco3 .icon--toon-mensen:before {
content: '\e898'; }
.eneco3 .icon--toon-slot:before {
content: '\e899'; }
.eneco3 .icon--toon-lamp:before {
content: '\e89a'; }
.eneco3 .icon--toon-zon:before {
content: '\e89b'; }
.eneco3 .icon--toon-support:before {
content: '\e89c'; }
.eneco3 .icon--toon-huiswifi:before {
content: '\e89d'; }
.eneco3 .icon--toon-moduleren:before {
content: '\e89e'; }
.eneco3 .icon--toon-koffer:before {
content: '\e89f'; }
.eneco3 .icon--toon-maan:before {
content: '\e8a0'; }
.eneco3 .icon--toon--multi-wave:before {
content: '\e8a1'; }
.eneco3 .icon--toon--multi-wolk:before {
content: '\e8a2'; }
.eneco3 .icon--toon--multi-zon:before {
content: '\e8a3'; }
.eneco3 .icon--toon--multi-lines:before {
content: '\e8a4'; }
.eneco3 .icon--spin6:before {
content: '\e8a5'; }
.eneco3 .icon--search:before {
content: '\e8a6'; }
.eneco3 .icon--inontwikkeling:before {
content: '\e8a7'; }
.eneco3 .icon--inonderzoek:before {
content: '\e8a8'; }
.eneco3 .icon--play-button:before {
content: '\e8a9'; }
.eneco3 .footer-bottom {
background-color: #FFFFFF; }
.eneco3 .footer .footer-block .ffSelect a {
text-decoration: none; }
.eneco3 .ask-a-question {
background-color: #FFFFFF; }
/* Nav icon mixin
* @author Ramon
* @param tile-row (y-axis)
* @param state (x-axis) Optional (it assumes the state is 1 and the hover is 2)
* Tag: ^Deprecated use new fontello font icon
* Tag: ^refactor
*
*/
/*
@mixin nav-icon($tile-row: 1, $state: 1) {
$hoverstate: 2;
$icon-size: 24px;
$sprite-tile-size: 96px;
$tile-offset-left: ($sprite-tile-size - $icon-size)/2;
$tile-offset-top: ($sprite-tile-size - $icon-size)/2;
position: relative;
&:after {
content: " ";
position: absolute;
display: block;
background-image: url(26bfb72ae731abb3d0e01fb553e575c3a97dc5cf.png) ;
background-position: ((-($state - 1) * $sprite-tile-size) - $tile-offset-left) ((-($tile-row - 1) * $sprite-tile-size) - $tile-offset-top);
background-repeat: no-repeat;
width: $icon-size;
height: $icon-size;
text-indent: -999em;
//TODO Retina?
}
&.is-active:after,
&:hover:after {
background-position: ((-($hoverstate - 1) * $sprite-tile-size) - $tile-offset-left) ((-($tile-row - 1) * $sprite-tile-size) - $tile-offset-top);
}
}*/
/* NAV ICONS */
/*
.nav-icon-stroom-en-gas {@include nav-icon(1);}
.nav-icon-cv-onderhoud {@include nav-icon(2);}
.nav-icon-zonnenpanelen {@include nav-icon(3);}
.nav-icon-isolatie {@include nav-icon(4);}
.nav-icon-toon {@include nav-icon(5);}
.nav-icon-warmte-koudte {@include nav-icon(6);}
.nav-icon-stel-u-vraag {@include nav-icon(7);}
.nav-icon-energiemanager {@include nav-icon(8);}
.nav-icon-elektrisch-laden {@include nav-icon(9);}
.nav-icon-esco {@include nav-icon(10);}
.nav-icon-besparen {@include nav-icon(11);}
.nav-icon-inzicht {@include nav-icon(12);}
.nav-icon-eigen-opwek {@include nav-icon(13);}
.nav-icon-mobiliteit {@include nav-icon(14);}
.nav-icon-duurzaam-afnemen {@include nav-icon(15);}
.nav-icon-duurzaam-investeren {@include nav-icon(16);}
.nav-icon-windenergie {@include nav-icon(17);}
*/
/*
.nav-icon-wijzijnanders {@include nav-icon(18);}
.nav-icon-leeronskennen {@include nav-icon(19);}
.nav-icon-enecogroep {@include nav-icon(20);}
.nav-icon-internationaal {@include nav-icon(21);}
.nav-icon-partners {@include nav-icon(22);}
.nav-icon-contact {@include nav-icon(23);}
.nav-icon-energiepartner {@include nav-icon(24);}
.nav-icon-innovatie {@include nav-icon(25);}
.nav-icon-energievoorziening {@include nav-icon(26);}
.nav-icon-samenleving {@include nav-icon(27);}
.nav-icon-hoewerkt {@include nav-icon(28);}
.nav-icon-aandeslag {@include nav-icon(29);}
.nav-icon-financieel {@include nav-icon(30);}
.nav-icon-prestaties {@include nav-icon(31);}
.nav-icon-media {@include nav-icon(32);}
*/
.ffPasswordWrapper,
.ffCheckboxWrapper,
.ffRadioWrapper,
.ffSubmitWrapper,
.ffResetWrapper,
.ffButtonWrapper {
display: block;
zoom: 1;
margin: 5px 0; }
.ff--align-center .ffPasswordWrapper, .ff--align-center
.ffCheckboxWrapper, .ff--align-center
.ffRadioWrapper, .ff--align-center
.ffSubmitWrapper, .ff--align-center
.ffResetWrapper, .ff--align-center
.ffButtonWrapper {
display: inline-block; }
.ffSelectWrapper {
display: inline-block;
zoom: 1;
margin: 5px 0;
height: 40px; }
.ffSelectWrapper select {
width: 100% !important; }
.ffCheckbox, .ffRadio, .ffSelectButton, .ffSelectButton span,
.ffSelectMenuWrapper div.ffSelectMenuTop,
.ffSelectMenuWrapper div.ffSelectMenuBottom,
.ffSelectMenuWrapper > div > span,
.ffSubmitWrapper a, .ffSubmitWrapper a span,
.ffResetWrapper a, .ffResetWrapper a span,
.ffButtonWrapper a, .ffButtonWrapper a span {
background-image: url(b82d6d87e31305bf610ec12b57538d4c69cb36c7.png) ;
background-repeat: no-repeat; }
/* checkbox */
.ffCheckboxWrapper a {
text-decoration: none;
color: #6F6F6F;
position: relative;
top: 1px;
font-size: 14px;
padding-left: 5px;
margin-right: 10px;
line-height: 20px; }
.ffCheckbox {
width: 20px;
height: 20px;
float: left;
background-position: 0px -336px;
cursor: pointer; }
.ffCheckboxWrapper:hover a, .ffCeckboxWrapper.focus a {
color: #4e4e4e; }
.ffCheckboxWrapper:hover .ffCheckbox, .ffCeckboxWrapper.focus .ffCheckbox {
background-position: -30px -336px; }
.ffCheckboxWrapper.on .ffCheckbox {
background-position: -60px -336px; }
.ffCheckboxWrapper.on:hover .ffCheckbox, .ffCeckboxWrapper.on.focus .ffCheckbox {
background-position: -90px -336px; }
.ffCheckboxWrapper.disabled .ffCheckbox {
background-position: -120px -336px; }
.ffCheckboxWrapper.on.disabled .ffCheckbox {
background-position: -150px -336px; }
.ffCheckboxWrapper.disabled a, .ffCeckboxWrapper.disabled:hover a, .ffCeckboxWrapper.disabled.focus a {
color: #999; }
.ffCheckboxWrapper.secondary a {
color: #FFFFFF; }
.ffCheckboxWrapper.secondary.on .ffCheckbox {
background-position: -60px -366px; }
.ffCheckboxWrapper.secondary.on:hover .ffCheckbox {
background-position: -90px -366px; }
/* radio */
.ffRadioWrapper a {
text-decoration: none;
color: #555;
position: relative;
top: 1px;
font-size: 14px;
padding-left: 5px;
margin-right: 10px; }
.ffRadioWrapper.inline {
float: left;
width: 50%; }
.ffRadio {
width: 21px;
height: 21px;
float: left;
background-position: -178px -335px;
cursor: pointer;
margin-right: 0.625em; }
.ffRadioWrapper:hover a, .ffRadioWrapper.focus a {
color: #4e4e4e; }
.ffRadioWrapper:hover .ffRadio, .ffRadioWrapper.focus .ffRadio {
background-position: -208px -335px; }
.ffRadioWrapper.on .ffRadio {
background-position: -239px -335px; }
.ffRadioWrapper.on:hover .ffRadio, .ffRadioWrapper.on.focus .ffRadio {
background-position: -269px -335px; }
.ffRadioWrapper.disabled .ffRadio {
background-position: -300px -335px; }
.ffRadioWrapper.on.disabled .ffRadio {
background-position: -330px -335px; }
.ffRadioWrapper.disabled a, .ffRadioWrapper.disabled:hover a, .ffRadioWrapper.disabled.focus a {
color: #999; }
/*.invalid-input .ffRadioWrapper .ffRadio { background-position: -240px -365px; }
.invalid-input .ffRadioWrapper:hover .ffRadio { background-position: -270px -365px; }
.invalid-input .ffRadioWrapper.on .ffRadio {background-position: -240px -335px;}
.invalid-input .ffRadioWrapper.on:hover .ffRadio, .ffRadioWrapper.on.focus .ffRadio {background-position: -270px -335px;}
*/
/* selectbox */
.ffSelectWrapper {
width: 100%;
*clear: both; }
.ffSelect {
position: relative; }
.ffSelect > a {
background-position: right -176px;
display: block;
text-decoration: none;
outline: 0;
cursor: pointer; }
.ffSelect > a > span {
display: block;
height: 40px;
margin-right: 41px;
padding-left: 10px;
background-position: 0 0;
overflow: hidden;
line-height: 40px;
font-size: 14px;
color: #555;
white-space: nowrap;
*white-space: normal;
text-overflow: ellipsis;
padding-right: 5px; }
.valid-input .ffSelectWrapper .ffSelect > a {
background-position: right -264px; }
.valid-input .ffSelectWrapper .ffSelect > a span {
background-position: left -88px; }
.invalid-input .ffSelectWrapper .ffSelect > a {
background-position: right -308px; }
.invalid-input .ffSelectWrapper .ffSelect > a span {
background-position: left -132px; }
.ffSelectWrapper.active .ffSelect > a {
z-index: 1005;
position: relative; }
.ffSelectWrapper.disabled .ffSelect > a {
background-position: right -352px; }
.ffSelectWrapper.disabled .ffSelect > a:hover {
cursor: default; }
.ffSelectWrapper.disabled .ffSelect > a > span {
background: #e1e1e1;
color: #b7b7b7;
border-color: #ededed;
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em; }
.ffSelectWrapper.disabled .ffSelect > a > span:hover {
cursor: default; }
.ffSelectMenuWrapper {
width: 100%;
z-index: 100; }
.ffSelectMenuWrapper .ffSelectMenuMidBG ul {
list-style-type: none;
margin: 0 0;
padding: 0; }
.ffSelectMenuWrapper .ffSelectMenuMidBG li {
cursor: default;
background-color: #fff;
padding-left: 5px;
text-align: left; }
.ffSelectMenuWrapper .ffSelectMenuMidBG li SPAN {
font-size: 18px; }
.ffSelectMenuWrapper .ffSelectMenuMidBG li.disabled SPAN {
color: #888; }
.ffSelectMenuWrapper .ffSelectMenuMidBG li.on {
background-color: #f6921e;
cursor: pointer;
color: #FFFFFF; }
.ffSelectMenuTop {
height: 5px;
background-position: 0 -394px; }
.ffSelectMenuTop span {
display: block;
height: 15px;
margin-left: 8px;
background: right -356px; }
.ffSelectMenuBottom {
height: 5px;
background-position: 0 -414px; }
.ffSelectMenuBottom span {
display: block;
height: 5px;
margin-left: 8px;
/*background-position: right -404px;*/
background: none !important; }
.ffSelectMenuMidBG {
background: url(60d7e0faf833214b6f71ed202808dae5e6605ce8.png) repeat-y right 0; }
.ffSelectMenuMid {
max-height: 192px;
overflow: auto;
background: #FFFFFF;
border: 1px solid #cccccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
.scrollingBarWrapper {
width: 12px;
height: 180px;
background: url(0c7777db218a7cb26f4c074cd5824dbbd531ac88.png) no-repeat;
top: 5px !important;
right: 5px !important; }
.scrollingHandle {
width: 12px;
padding-top: 20px;
background: url(19c68bae1e93c95050174187a59935c3181a9600.png) no-repeat 0 0; }
.scrollingHandleBottom {
width: 12px;
background: url(3785cb5bfbd311443f5d04a21c9beaa53815692e.png) no-repeat 0px bottom; }
/* button */
.ffButtonWrapper > a {
background-position: right -585px;
display: block;
text-decoration: none;
outline: 0; }
.ffButtonWrapper > a > span {
display: block;
height: 36px;
padding-bottom: 2px;
line-height: 39px;
font-size: 15px;
background-position: 0 -424px;
text-align: center;
padding: 0 10px 0 15px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
margin-right: 5px; }
.ffButtonWrapper:hover > a {
background-position: right -625px; }
.ffButtonWrapper:hover > a > span {
background-position: 0 -464px; }
.ffButtonWrapper > a:active {
background-position: right -665px;
position: relative; }
.ffButtonWrapper > a:active > span {
background-position: 0 -504px; }
.ffButtonWrapper.disabled > a {
background-position: right -705px;
position: static; }
.ffButtonWrapper.disabled > a > span {
background-position: 0 -544px;
color: #c1c1c1; }
input[type="text"], input[type="password"], textarea, select {
outline: none; }
/* remove webkit yellow border */
select.mobileSelect {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
display: block; }
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
.js .nav {
height: 100%;
width: 70%;
left: -70%; }
@media all and (min-width: 40em) {
.js .nav {
width: 20em;
left: -20em; } }
@media all and (min-width: 64.125em) {
.js .nav {
width: 100%;
left: 0; } }
.js .inner-wrap {
left: 0; }
.js-nav .inner-wrap,
.js-nav .header-sticky {
left: 70%; }
@media all and (min-width: 40em) {
.js-nav .inner-wrap,
.js-nav .header-sticky {
left: 20em; } }
@media all and (min-width: 64.125em) {
.js-nav .inner-wrap,
.js-nav .header-sticky {
left: 0; } }
.js-nav .nav {
left: 0;
font-size: 1em; }
/**
* Js dependent selectors
*/
.js .js--load-more-item {
display: none; }
.no-js .js--load-more-trigger {
display: none; }