File: D:/HostingSpaces/BVerhoeven/verhoevendak.nl/wwwroot/css/style.css
@charset "UTF-8";
@keyframes movingDown {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
-moz-transform: translate3d(0, 0, 0) rotate(0deg);
-ms-transform: translate3d(0, 0, 0) rotate(0deg);
-o-transform: translate3d(0, 0, 0) rotate(0deg);
-spec-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg); }
50% {
-webkit-transform: translate3d(0, 8px, 0) rotate(0deg);
-moz-transform: translate3d(0, 8px, 0) rotate(0deg);
-ms-transform: translate3d(0, 8px, 0) rotate(0deg);
-o-transform: translate3d(0, 8px, 0) rotate(0deg);
-spec-transform: translate3d(0, 8px, 0) rotate(0deg);
transform: translate3d(0, 8px, 0) rotate(0deg); } }
@keyframes movingRight {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
50% {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); } }
/* ==========================================================================
* Functions used in grid calculation
* ========================================================================== */
/**
* This is where the magic happens
* Return percentage based on amount of columns
* Use parent column size to adjust the origin
*/
/**
* Default function for columns
* Return as percentage
*/
/**
* Return as viewport width
*/
/*==========================================================================
* Font related functions
* ========================================================================== */
/**
* Add some functions for readability
* Return font-weight based on name
*/
/**
* Define grid columns
* The inner grid is the section where the content is
* The outer grid is the inner grid with extra margin columns on each side
*/
/**
* Define breakpoint for given formats
*/
html, body {
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; }
/* Set up the base font size for using rem
*/
html {
font-size: 20px; }
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.4px;
max-width: 100%; }
@media screen and (max-width: 840px) {
body {
padding-top: 60px; } }
* {
box-sizing: border-box; }
* ::selection {
background: #1b71dd;
color: white; }
img {
border: none;
display: block; }
h1, h2, h3, h4, h5, figure {
margin: 0; }
img {
border: none; }
input, textarea {
font-family: "Lato", sans-serif; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s; }
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s; }
input:-moz-placeholder, textarea:-moz-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s; }
.gridHolder {
display: none;
position: fixed;
height: 100%;
width: 100%; }
.gridHolder .exampleGrid {
border: solid 1px red;
height: 100%; }
.gridHolder .exampleGrid .col-1 {
border-left: solid 1px red;
height: 100%; }
.gridHolder .exampleGrid .col-1:first-child {
border-left: none; }
.pull-right {
float: right; }
.pull-left {
float: left; }
/* Default content styling
* =============================== */
.content {
color: #737373;
font-size: 0.9rem;
line-height: 1.2; }
.content h1, .content h2 {
font-size: 2rem;
line-height: 1.2;
max-width: 580px;
margin: 0 0 40px; }
.content p {
margin: 1rem 0; }
.content p a {
color: #ff8f00;
text-decoration: underline;
transition: color 0.3s; }
.content p a:hover {
color: #396EC2; }
.content ul, .content ol {
padding-left: 20px;
list-style: none; }
.content ul li, .content ol li {
position: relative;
padding-left: 20px; }
.content ul li:before, .content ol li:before {
content: "•";
position: absolute;
color: #0f46a1;
font-size: 0.8rem;
line-height: 1;
left: -20px; }
.content ol {
counter-reset: ol-counter; }
.content ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
font-size: 1rem;
top: 2px; }
.content strong {
color: #333; }
.content a {
color: #424242;
text-decoration: none;
transition: color 0.3s; }
.content a:hover {
color: #1c1c1c; }
@media screen and (max-width: 840px) {
.big-hexagon-holder {
display: none; } }
/*==========================================================================
* Grid
* ========================================================================== */
/**
* Grid row
*
* 1. The outer two columns are just margin
* 2. Prevent inline-block cells wrapping
* 3. Prevent vertical spacing between inline-blocks
*/
.grid-row {
width: 85.7142857143%;
max-width: 1266px;
margin: 0 auto;
font-size: 0;
line-height: 0;
letter-spacing: 0;
/**
* The full row doesn't have the two outer margin rows
* They stretch till both ends of the window
*/ }
.grid-row.full-row {
width: 100%;
max-width: none; }
/**
* Grid column
*
* 1. Reset white-space inherited from `.grid`
* 2. Reset font-size inherited from `.grid`
* 3. Reset line-height inherited from `.grid`
* 3. Reset letter-spacing inherited from `.grid`
*/
.grid-col {
position: relative;
display: inline-block;
overflow: hidden;
white-space: normal;
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0.4px;
/**
* Center column
*
* 1. 'inline-block' doesn't center with margin '0 auto'
*/ }
.grid-col.center {
display: block;
margin: 0 auto; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-1, .col-lg-1 {
width: 8.3333333333%; }
.full-row .col-1, .full-row .col-lg-1 {
width: 7.1428571429%; }
/* Column shifts
* ========================================================================== */
.offset-1, .offset-lg-1 {
margin-left: 8.3333333333%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-2, .col-lg-2 {
width: 16.6666666667%; }
.full-row .col-2, .full-row .col-lg-2 {
width: 14.2857142857%; }
/* Column shifts
* ========================================================================== */
.offset-2, .offset-lg-2 {
margin-left: 16.6666666667%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-3, .col-lg-3 {
width: 25%; }
.full-row .col-3, .full-row .col-lg-3 {
width: 21.4285714286%; }
/* Column shifts
* ========================================================================== */
.offset-3, .offset-lg-3 {
margin-left: 25%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-4, .col-lg-4 {
width: 33.3333333333%; }
.full-row .col-4, .full-row .col-lg-4 {
width: 28.5714285714%; }
/* Column shifts
* ========================================================================== */
.offset-4, .offset-lg-4 {
margin-left: 33.3333333333%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-5, .col-lg-5 {
width: 41.6666666667%; }
.full-row .col-5, .full-row .col-lg-5 {
width: 35.7142857143%; }
/* Column shifts
* ========================================================================== */
.offset-5, .offset-lg-5 {
margin-left: 41.6666666667%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-6, .col-lg-6 {
width: 50%; }
.full-row .col-6, .full-row .col-lg-6 {
width: 42.8571428571%; }
/* Column shifts
* ========================================================================== */
.offset-6, .offset-lg-6 {
margin-left: 50%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-7, .col-lg-7 {
width: 58.3333333333%; }
.full-row .col-7, .full-row .col-lg-7 {
width: 50%; }
/* Column shifts
* ========================================================================== */
.offset-7, .offset-lg-7 {
margin-left: 58.3333333333%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-8, .col-lg-8 {
width: 66.6666666667%; }
.full-row .col-8, .full-row .col-lg-8 {
width: 57.1428571429%; }
/* Column shifts
* ========================================================================== */
.offset-8, .offset-lg-8 {
margin-left: 66.6666666667%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-9, .col-lg-9 {
width: 75%; }
.full-row .col-9, .full-row .col-lg-9 {
width: 64.2857142857%; }
/* Column shifts
* ========================================================================== */
.offset-9, .offset-lg-9 {
margin-left: 75%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-10, .col-lg-10 {
width: 83.3333333333%; }
.full-row .col-10, .full-row .col-lg-10 {
width: 71.4285714286%; }
/* Column shifts
* ========================================================================== */
.offset-10, .offset-lg-10 {
margin-left: 83.3333333333%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-11, .col-lg-11 {
width: 91.6666666667%; }
.full-row .col-11, .full-row .col-lg-11 {
width: 78.5714285714%; }
/* Column shifts
* ========================================================================== */
.offset-11, .offset-lg-11 {
margin-left: 91.6666666667%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-12, .col-lg-12 {
width: 100%; }
.full-row .col-12, .full-row .col-lg-12 {
width: 85.7142857143%; }
/* Column shifts
* ========================================================================== */
.offset-12, .offset-lg-12 {
margin-left: 100%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-13, .col-lg-13 {
width: 108.3333333333%; }
.full-row .col-13, .full-row .col-lg-13 {
width: 92.8571428571%; }
/* Column shifts
* ========================================================================== */
.offset-13, .offset-lg-13 {
margin-left: 108.3333333333%; }
/* Column dimensions
* ========================================================================== */
/* Calculate width by dividing a full width into 12 columns
* Create a class for each column
*/
.col-14, .col-lg-14 {
width: 116.6666666667%; }
.full-row .col-14, .full-row .col-lg-14 {
width: 100%; }
/* Column shifts
* ========================================================================== */
.offset-14, .offset-lg-14 {
margin-left: 116.6666666667%; }
/* Media queries
* ========================================================================== */
*
* /*
* * Create a separate loop because of order for css rendering
* * because else it would overrule a previous media query
*/
@media screen and (min-width: 1680px) {
.col-xl-1 {
width: 8.3333333333%; }
.offset-xl-1 {
margin-left: 8.3333333333%; } }
@media screen and (max-width: 1366px) {
.col-md-1 {
width: 8.3333333333%; }
.offset-md-1 {
margin-left: 8.3333333333%; } }
@media screen and (max-width: 768px) {
.col-sm-1 {
width: 8.3333333333%; }
.offset-sm-1 {
margin-left: 8.3333333333%; } }
@media screen and (max-width: 400px) {
.col-xs-1 {
width: 8.3333333333%; }
.offset-xs-1 {
margin-left: 8.3333333333%; } }
@media screen and (min-width: 1680px) {
.col-xl-2 {
width: 16.6666666667%; }
.offset-xl-2 {
margin-left: 16.6666666667%; } }
@media screen and (max-width: 1366px) {
.col-md-2 {
width: 16.6666666667%; }
.offset-md-2 {
margin-left: 16.6666666667%; } }
@media screen and (max-width: 768px) {
.col-sm-2 {
width: 16.6666666667%; }
.offset-sm-2 {
margin-left: 16.6666666667%; } }
@media screen and (max-width: 400px) {
.col-xs-2 {
width: 16.6666666667%; }
.offset-xs-2 {
margin-left: 16.6666666667%; } }
@media screen and (min-width: 1680px) {
.col-xl-3 {
width: 25%; }
.offset-xl-3 {
margin-left: 25%; } }
@media screen and (max-width: 1366px) {
.col-md-3 {
width: 25%; }
.offset-md-3 {
margin-left: 25%; } }
@media screen and (max-width: 768px) {
.col-sm-3 {
width: 25%; }
.offset-sm-3 {
margin-left: 25%; } }
@media screen and (max-width: 400px) {
.col-xs-3 {
width: 25%; }
.offset-xs-3 {
margin-left: 25%; } }
@media screen and (min-width: 1680px) {
.col-xl-4 {
width: 33.3333333333%; }
.offset-xl-4 {
margin-left: 33.3333333333%; } }
@media screen and (max-width: 1366px) {
.col-md-4 {
width: 33.3333333333%; }
.offset-md-4 {
margin-left: 33.3333333333%; } }
@media screen and (max-width: 768px) {
.col-sm-4 {
width: 33.3333333333%; }
.offset-sm-4 {
margin-left: 33.3333333333%; } }
@media screen and (max-width: 400px) {
.col-xs-4 {
width: 33.3333333333%; }
.offset-xs-4 {
margin-left: 33.3333333333%; } }
@media screen and (min-width: 1680px) {
.col-xl-5 {
width: 41.6666666667%; }
.offset-xl-5 {
margin-left: 41.6666666667%; } }
@media screen and (max-width: 1366px) {
.col-md-5 {
width: 41.6666666667%; }
.offset-md-5 {
margin-left: 41.6666666667%; } }
@media screen and (max-width: 768px) {
.col-sm-5 {
width: 41.6666666667%; }
.offset-sm-5 {
margin-left: 41.6666666667%; } }
@media screen and (max-width: 400px) {
.col-xs-5 {
width: 41.6666666667%; }
.offset-xs-5 {
margin-left: 41.6666666667%; } }
@media screen and (min-width: 1680px) {
.col-xl-6 {
width: 50%; }
.offset-xl-6 {
margin-left: 50%; } }
@media screen and (max-width: 1366px) {
.col-md-6 {
width: 50%; }
.offset-md-6 {
margin-left: 50%; } }
@media screen and (max-width: 768px) {
.col-sm-6 {
width: 50%; }
.offset-sm-6 {
margin-left: 50%; } }
@media screen and (max-width: 400px) {
.col-xs-6 {
width: 50%; }
.offset-xs-6 {
margin-left: 50%; } }
@media screen and (min-width: 1680px) {
.col-xl-7 {
width: 58.3333333333%; }
.offset-xl-7 {
margin-left: 58.3333333333%; } }
@media screen and (max-width: 1366px) {
.col-md-7 {
width: 58.3333333333%; }
.offset-md-7 {
margin-left: 58.3333333333%; } }
@media screen and (max-width: 768px) {
.col-sm-7 {
width: 58.3333333333%; }
.offset-sm-7 {
margin-left: 58.3333333333%; } }
@media screen and (max-width: 400px) {
.col-xs-7 {
width: 58.3333333333%; }
.offset-xs-7 {
margin-left: 58.3333333333%; } }
@media screen and (min-width: 1680px) {
.col-xl-8 {
width: 66.6666666667%; }
.offset-xl-8 {
margin-left: 66.6666666667%; } }
@media screen and (max-width: 1366px) {
.col-md-8 {
width: 66.6666666667%; }
.offset-md-8 {
margin-left: 66.6666666667%; } }
@media screen and (max-width: 768px) {
.col-sm-8 {
width: 66.6666666667%; }
.offset-sm-8 {
margin-left: 66.6666666667%; } }
@media screen and (max-width: 400px) {
.col-xs-8 {
width: 66.6666666667%; }
.offset-xs-8 {
margin-left: 66.6666666667%; } }
@media screen and (min-width: 1680px) {
.col-xl-9 {
width: 75%; }
.offset-xl-9 {
margin-left: 75%; } }
@media screen and (max-width: 1366px) {
.col-md-9 {
width: 75%; }
.offset-md-9 {
margin-left: 75%; } }
@media screen and (max-width: 768px) {
.col-sm-9 {
width: 75%; }
.offset-sm-9 {
margin-left: 75%; } }
@media screen and (max-width: 400px) {
.col-xs-9 {
width: 75%; }
.offset-xs-9 {
margin-left: 75%; } }
@media screen and (min-width: 1680px) {
.col-xl-10 {
width: 83.3333333333%; }
.offset-xl-10 {
margin-left: 83.3333333333%; } }
@media screen and (max-width: 1366px) {
.col-md-10 {
width: 83.3333333333%; }
.offset-md-10 {
margin-left: 83.3333333333%; } }
@media screen and (max-width: 768px) {
.col-sm-10 {
width: 83.3333333333%; }
.offset-sm-10 {
margin-left: 83.3333333333%; } }
@media screen and (max-width: 400px) {
.col-xs-10 {
width: 83.3333333333%; }
.offset-xs-10 {
margin-left: 83.3333333333%; } }
@media screen and (min-width: 1680px) {
.col-xl-11 {
width: 91.6666666667%; }
.offset-xl-11 {
margin-left: 91.6666666667%; } }
@media screen and (max-width: 1366px) {
.col-md-11 {
width: 91.6666666667%; }
.offset-md-11 {
margin-left: 91.6666666667%; } }
@media screen and (max-width: 768px) {
.col-sm-11 {
width: 91.6666666667%; }
.offset-sm-11 {
margin-left: 91.6666666667%; } }
@media screen and (max-width: 400px) {
.col-xs-11 {
width: 91.6666666667%; }
.offset-xs-11 {
margin-left: 91.6666666667%; } }
@media screen and (min-width: 1680px) {
.col-xl-12 {
width: 100%; }
.offset-xl-12 {
margin-left: 100%; } }
@media screen and (max-width: 1366px) {
.col-md-12 {
width: 100%; }
.offset-md-12 {
margin-left: 100%; } }
@media screen and (max-width: 768px) {
.col-sm-12 {
width: 100%; }
.offset-sm-12 {
margin-left: 100%; } }
@media screen and (max-width: 400px) {
.col-xs-12 {
width: 100%; }
.offset-xs-12 {
margin-left: 100%; } }
@media screen and (min-width: 1680px) {
.col-xl-13 {
width: 108.3333333333%; }
.offset-xl-13 {
margin-left: 108.3333333333%; } }
@media screen and (max-width: 1366px) {
.col-md-13 {
width: 108.3333333333%; }
.offset-md-13 {
margin-left: 108.3333333333%; } }
@media screen and (max-width: 768px) {
.col-sm-13 {
width: 108.3333333333%; }
.offset-sm-13 {
margin-left: 108.3333333333%; } }
@media screen and (max-width: 400px) {
.col-xs-13 {
width: 108.3333333333%; }
.offset-xs-13 {
margin-left: 108.3333333333%; } }
@media screen and (min-width: 1680px) {
.col-xl-14 {
width: 116.6666666667%; }
.offset-xl-14 {
margin-left: 116.6666666667%; } }
@media screen and (max-width: 1366px) {
.col-md-14 {
width: 116.6666666667%; }
.offset-md-14 {
margin-left: 116.6666666667%; } }
@media screen and (max-width: 768px) {
.col-sm-14 {
width: 116.6666666667%; }
.offset-sm-14 {
margin-left: 116.6666666667%; } }
@media screen and (max-width: 400px) {
.col-xs-14 {
width: 116.6666666667%; }
.offset-xs-14 {
margin-left: 116.6666666667%; } }
/*==========================================================================
* Navigation / Header
* ========================================================================== */
header, #sticky-navigation {
position: relative;
z-index: 10;
/* Navigation
* ========================================================================== */ }
header .shadow-container, #sticky-navigation .shadow-container {
position: relative;
background-color: white;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.5); }
header .shadow-container .nav-bar, #sticky-navigation .shadow-container .nav-bar {
max-height: 100px;
padding: 13px 0 30px 0;
overflow: visible;
position: relative; }
header .shadow-container .nav-bar .offerte-button, #sticky-navigation .shadow-container .nav-bar .offerte-button {
z-index: -1;
font-size: 17px;
line-height: 53px;
height: 49px;
min-width: 200px;
letter-spacing: -0.3px;
padding-left: 12px;
position: absolute;
right: 0;
top: 95%; }
header .grid-col, #sticky-navigation .grid-col {
vertical-align: baseline; }
header .top-bar, #sticky-navigation .top-bar {
height: 35px;
display: block;
padding: 0;
color: white;
background-color: #424242; }
header .top-bar .right-bar, #sticky-navigation .top-bar .right-bar {
height: 100%;
line-height: 34px;
font-size: 15px;
letter-spacing: -0.01px;
font-weight: bold;
text-align: right;
overflow: visible;
position: static; }
header .top-bar .right-bar a, #sticky-navigation .top-bar .right-bar a {
color: white;
text-decoration: none; }
header .top-bar .right-bar .mail, #sticky-navigation .top-bar .right-bar .mail {
position: relative;
z-index: 1; }
header .top-bar .right-bar .mail:before, #sticky-navigation .top-bar .right-bar .mail:before {
content: "";
background: url("/img/svg/sprites.svg") 0px -4px no-repeat;
background-size: 423px 139px;
width: 14px;
height: 10px;
display: inline-block;
margin: 0 12px 0 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
header .top-bar .right-bar .tel, #sticky-navigation .top-bar .right-bar .tel {
position: relative;
z-index: 1; }
header .top-bar .right-bar .tel:before, #sticky-navigation .top-bar .right-bar .tel:before {
content: "";
background: url("/img/svg/sprites.svg") 0px -32px no-repeat;
background-size: 423px 139px;
width: 18px;
height: 14px;
display: inline-block;
margin: 0 6px 0 40px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
header .top-bar .right-bar .bar-stretcher, #sticky-navigation .top-bar .right-bar .bar-stretcher {
width: 45%;
background: linear-gradient(90deg, #ff8f00 0%, #ff6f00 100%);
height: 35px;
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 0; }
header .logo, #sticky-navigation .logo {
overflow: visible;
width: 16.0714285714%;
max-width: 200px; }
header nav, #sticky-navigation nav {
width: 80%; }
header nav ul, #sticky-navigation nav ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
list-style: none; }
header nav ul li, #sticky-navigation nav ul li {
align-self: center; }
header nav ul li a, #sticky-navigation nav ul li a {
color: #424242;
font-size: 14px;
letter-spacing: -0.14px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold; }
header nav ul li.active a, #sticky-navigation nav ul li.active a {
color: #ff8f00;
position: relative; }
header nav ul li.active a:before, #sticky-navigation nav ul li.active a:before {
content: "";
position: absolute;
left: 33%;
display: block;
bottom: -8px;
background: transparent url(/img/svg/active-arrow.svg) no-repeat center;
height: 222%;
width: 35%; }
header nav.arrow:before, #sticky-navigation nav.arrow:before {
right: 10px;
font-size: 22px; }
#sticky-navigation {
position: fixed;
top: 0;
left: 0;
z-index: 50;
opacity: 0;
width: 100%;
height: 60px;
transform: translate3d(0, -60px, 0);
transition: transform 0.4s, opacity 0.4s; }
#sticky-navigation.active {
opacity: 1;
transform: translate3d(0, 0, 0); }
#sticky-navigation .shadow-container .nav-bar {
max-height: 60px;
padding-top: 8px; }
#sticky-navigation .shadow-container .nav-bar .logo {
max-width: 100px; }
#sticky-navigation .shadow-container .nav-bar nav {
line-height: 0; }
#sticky-navigation .shadow-container .nav-bar .offerte-button {
top: 85%; }
@media screen and (max-width: 1025px) {
header .top-bar .right-bar {
font-size: 14px;
width: 60%; }
header .top-bar .right-bar .bar-stretcher {
width: 54%; } }
@media screen and (max-width: 840px) {
header .shadow-container, header .offerte-button {
display: none; }
#sticky-navigation {
display: none; } }
/*==========================================================================
* Breadcrumb
* ========================================================================== */
.breadcrumb {
margin: 72px 0 0 8.3333333333%;
font-size: 14px;
line-height: 38.46px;
letter-spacing: -0.14px;
color: #263238; }
.breadcrumb ol, .breadcrumb ul {
list-style: none;
padding: 0;
margin: 0; }
.breadcrumb ol li, .breadcrumb ul li {
display: inline-block; }
.breadcrumb ol li a, .breadcrumb ul li a {
text-decoration: none;
color: #263238; }
.breadcrumb ol li a span, .breadcrumb ol li a:after, .breadcrumb ul li a span, .breadcrumb ul li a:after {
color: #263238;
text-decoration: none;
transition: color 0.2s; }
.breadcrumb ol li a:hover span, .breadcrumb ol li a:hover:after, .breadcrumb ul li a:hover span, .breadcrumb ul li a:hover:after {
color: #455b66; }
.breadcrumb ol li:nth-child(2) a, .breadcrumb ol li:nth-child(2) span, .breadcrumb ul li:nth-child(2) a, .breadcrumb ul li:nth-child(2) span {
text-transform: capitalize; }
.breadcrumb ol li:not(:last-child):after, .breadcrumb ul li:not(:last-child):after {
content: "";
display: inline-block;
margin: 0 5px;
padding-top: 4px;
width: 14px;
height: 14px;
position: relative;
top: 5px;
background-position: -46px center;
background-size: 400%;
background-repeat: no-repeat;
background-image: url("/img/svg/button_arrow.svg"); }
.breadcrumb ol li:last-child a, .breadcrumb ol li:last-child span, .breadcrumb ul li:last-child a, .breadcrumb ul li:last-child span {
color: #ff8f00; }
.breadcrumb ol li:last-child a:hover, .breadcrumb ol li:last-child span:hover, .breadcrumb ul li:last-child a:hover, .breadcrumb ul li:last-child span:hover {
color: #ffa533; }
@media screen and (max-width: 840px) {
.breadcrumb {
margin-top: 0;
font-size: 11px; } }
.form {
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
max-width: 560px; }
.form .form-element {
position: relative;
margin-bottom: 10px; }
.form .form-element .error-message {
display: none;
position: absolute;
right: 0;
top: -25px;
color: #EF5350;
font-size: 0.75rem; }
.form .form-element .error-message.active {
display: inline-block; }
.form .form-element.multiple-elements {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start; }
.form .form-element.multiple-elements > * {
width: calc(50% - 20px); }
.form .form-element.text-area {
margin-bottom: 0;
display: block; }
.form .form-element.text-area label {
margin-top: 15px; }
.form .form-element.select-element {
position: relative; }
.form .form-element.select-element span {
background-image: url("/img/down.png");
width: 16px;
height: 16px;
background-size: contain;
display: inline-block;
position: absolute;
right: 10px;
top: 25px;
pointer-events: none; }
.form .form-element.select-element select {
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
-spec-appearance: none;
appearance: none;
outline: none;
height: 45px;
width: 100%;
font-size: 15px;
line-height: 16px;
font-weight: 500;
background-color: #f3f3f3;
color: #1d1d1d;
padding: 0 30px 0 20px;
border: 1.5px transparent solid; }
.form .form-element.select-element .selectric-wrapper {
margin-top: 10px;
width: 100%;
display: inline-block; }
.form .form-element.select-element .selectric-items li {
padding-left: 20px;
padding-right: 20px;
font-size: 15px;
line-height: 16px;
font-weight: 500; }
.form .form-element.select-element .selectric {
background-color: #f3f3f3; }
.form .form-element.select-element .selectric .label {
padding: 0 20px 0 10px;
font-size: 15px;
line-height: 16px;
font-weight: 500;
color: #1d1d1d;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center; }
.form .form-element label {
width: 100%;
display: block;
color: #98a0b3; }
.form .form-element input, .form .form-element textarea {
margin-top: 0px;
height: 45px;
width: 100%;
margin-left: 0;
background-color: white;
color: #333;
padding: 0 20px;
border: 1.5px #1b71dd solid;
font-size: 0.8rem; }
.form .form-element input.alert, .form .form-element textarea.alert {
border-color: #EF5350; }
.form .form-element input:-webkit-autofill, .form .form-element input:-webkit-autofill:hover, .form .form-element input:-webkit-autofill:focus, .form .form-element input:-webkit-autofill:active, .form .form-element textarea:-webkit-autofill, .form .form-element textarea:-webkit-autofill:hover, .form .form-element textarea:-webkit-autofill:focus, .form .form-element textarea:-webkit-autofill:active {
transition: 9999s background-color;
-webkit-text-fill-color: #1b71dd;
transition-delay: 9999s; }
.form .form-element textarea {
height: 152px;
padding-top: 15px;
padding-bottom: 10px;
resize: vertical;
margin-left: 0;
font-weight: 500;
display: block; }
.form .submit {
margin-top: 45px;
background-color: #1b71dd;
border-radius: 26px;
max-width: 210px;
cursor: pointer;
transition: background-color 0.3s; }
.form .submit p {
font-size: 1rem;
line-height: 1;
font-weight: 700;
color: white;
padding: 16px 30px; }
.form .submit p:after {
content: "";
display: inline-block;
margin-left: 25px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s; }
.form .submit:hover {
background-color: #0f46a1; }
.form .submit:hover p:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
.form .submit input {
display: none;
border: 1.5px transparent solid;
font-size: 15px;
line-height: 15px;
width: 100%;
max-width: 300px;
background: #1b71dd;
color: white;
padding: 15px 0;
cursor: pointer; }
.form .submit input:hover {
background: #1865c6; }
.form input:focus, .form textarea:focus {
box-shadow: none;
outline: none; }
@media screen and (max-width: 800pxpx) {
.form .form-element {
margin-bottom: 30px; }
.form .form-element.text-area {
display: block; }
.form .form-element.select-element {
display: block; }
.form .form-element.select-element select {
width: 100%; }
.form .form-element.select-element .selectric-wrapper {
width: 100%;
display: block; }
.form .form-element label {
display: block;
width: 100%;
padding-left: 20px; }
.form .form-element input, .form .form-element textarea {
width: 100%;
margin-left: 0; } }
/*==========================================================================
* Footer
* ========================================================================== */
footer {
background-color: #424242;
padding-top: 80px;
color: white;
/* Sub footer for pay off and our branding
* ========================================================================== */ }
footer h2 {
margin: 50px 0 27px 0;
font-style: italic;
font-size: 30px;
letter-spacing: 0.7px; }
footer .topLeft .footer-diensten-menu {
height: 730px; }
footer .topLeft .footer-diensten-menu .grid-col {
vertical-align: top;
display: flex;
flex-direction: column; }
footer .topLeft .footer-diensten-menu .grid-col .button {
width: 80%;
font-size: 22px;
height: 96px;
margin-bottom: 0;
border: none;
background: none;
border-bottom: solid 1px white;
text-align: left;
border-radius: 0;
color: #F5F5F5;
padding-left: 0;
line-height: 100px; }
footer .topLeft .footer-diensten-menu .grid-col .button.arrow:after {
right: 0; }
footer .topLeft .footer-diensten-menu .grid-col .button:before {
content: "";
transition: width 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .grid-col .button:hover {
color: #ff8f00;
transition: color 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .grid-col .button:hover:before {
content: "";
margin: 0 6% 0 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
footer .topLeft .footer-diensten-menu .grid-col .button:hover:after {
background-position: -62px center; }
footer .topLeft .footer-diensten-menu .dakbedekking {
order: 0;
transition: width 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .dakbedekking:before {
background: url("/img/svg/sprites.svg") -49px 4px no-repeat;
background-size: 423px 139px;
width: 48px;
height: 36px;
display: inline-block;
width: 0; }
footer .topLeft .footer-diensten-menu .dakbedekking:hover:before {
width: 48px;
transition: width 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .dakrenovatie {
order: 1; }
footer .topLeft .footer-diensten-menu .dakrenovatie:before {
background: url("/img/svg/sprites.svg") -126px 11px no-repeat;
background-size: 423px 139px;
width: 48px;
height: 36px;
display: inline-block;
width: 0; }
footer .topLeft .footer-diensten-menu .dakrenovatie:hover:before {
width: 48px;
transition: width 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .leien {
order: 2; }
footer .topLeft .footer-diensten-menu .leien:before {
background: url("/img/svg/sprites.svg") -45px -48px no-repeat;
background-size: 423px 139px;
width: 48px;
height: 36px;
display: inline-block;
width: 0; }
footer .topLeft .footer-diensten-menu .leien:hover:before {
width: 48px;
transition: width 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .na-isolatie {
order: 3; }
footer .topLeft .footer-diensten-menu .na-isolatie:before {
background: url("/img/svg/sprites.svg") -122px -53px no-repeat;
background-size: 423px 139px;
width: 48px;
height: 36px;
display: inline-block;
width: 0; }
footer .topLeft .footer-diensten-menu .na-isolatie:hover:before {
width: 48px;
transition: width 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .zonnepanelen {
order: 4; }
footer .topLeft .footer-diensten-menu .zonnepanelen:before {
background: url("/img/svg/sprites.svg") -44px -99px no-repeat;
background-size: 423px 139px;
width: 48px;
height: 36px;
display: inline-block;
width: 0; }
footer .topLeft .footer-diensten-menu .zonnepanelen:hover:before {
width: 48px;
transition: width 0.25s ease-in-out; }
footer .topRight p {
padding-top: 1px;
color: #F5F5F5; }
footer .topRight a.button {
letter-spacing: 0; }
footer .topRight a.button:hover {
background: none;
background-color: #396EC2; }
footer .grid-col {
vertical-align: top; }
footer .offerte-button {
position: absolute;
margin-top: -42px;
right: 7.1428571429%;
z-index: 0;
font-size: 15px;
line-height: 17.73px;
letter-spacing: -0.3px;
height: 42px;
min-width: 200px;
padding-left: 12px;
border-radius: 11px 11px 0 0;
padding-top: 12px; }
footer .offerte-button.arrow {
box-shadow: none; }
footer .offerte-button.arrow:before {
right: 10px;
font-size: 22px; }
footer .gradientholder {
background: linear-gradient(90deg, #424242 0%, #616161 100%); }
footer .main-item {
width: 100%;
padding: 6px 0 45px 0;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.1); }
footer .main-item .menu {
margin-left: 7.1428571429%; }
footer .main-item .menu ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center; }
footer .main-item .menu ul.extra-margin-bellow {
margin-bottom: 100px; }
footer .main-item .menu ul li a {
color: white; }
footer .main-item .menu ul li a:hover {
color: #ff8f00; }
footer .main-item .menu ul li a:hover span {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
footer .main-item .menu ul li.active a {
color: #ff8f00; }
footer .main-item .menu ul.schools {
margin-left: 7.1428571429%; }
footer h5 {
font-size: 0.97rem; }
footer ul {
list-style: none;
padding: 0;
margin: 32px 0 0;
font-size: 14px;
letter-spacing: -0.14px;
font-weight: bold; }
@media screen and (max-width: 600px) {
footer ul {
margin-bottom: 50px; } }
footer ul li {
color: white; }
footer ul li a {
color: white;
text-decoration: none;
text-transform: uppercase; }
footer ul li a:hover {
color: white; }
footer ul li.active, footer ul li.active a {
color: #0f46a1;
font-weight: 700; }
footer .secondary-menu {
padding: 87px 0 85px 0; }
footer .secondary-menu > .grid-col {
width: 21.4285714286%;
font-size: 0.9rem; }
footer .secondary-menu .leftCol {
margin-left: 7.1428571429%; }
footer .secondary-menu .footerletter {
color: #ff8f00;
font-weight: bold;
margin-right: 5px;
width: 40px;
display: inline-block; }
footer .secondary-menu .secondCol {
width: 25%; }
footer .secondary-menu .thirdCol {
margin-left: 2.1428571429%; }
footer .secondary-menu .thirdCol img {
width: 100px;
height: 100px;
float: left;
margin: 0 10px; }
footer .secondary-menu a {
color: white;
text-decoration: none;
padding: 5px 0 1px 0;
display: inline-block;
font-size: 16px;
line-height: 30px;
letter-spacing: -0.16px; }
footer .secondary-menu .lastCol {
width: 14.2857142857%;
margin-left: 1.4285714286%; }
footer .sub-footer {
background-color: #040404;
height: 55px;
padding: 15px 0; }
footer .sub-footer .grid-col {
font-size: 0.9rem; }
footer .sub-footer .pay-off {
margin-top: 0;
margin-bottom: 0;
color: #1b71dd; }
footer .sub-footer a {
position: relative;
color: #1b71dd;
text-align: right;
text-decoration: none; }
footer .sub-footer a:hover {
color: #3a87e7; }
footer .sub-footer a:hover:before {
transform: rotate(360deg); }
footer .sub-footer a:before {
content: "";
position: absolute;
right: 180px;
display: inline-block;
background: url("/img/svg/sprites.svg") -95px -78px no-repeat;
background-size: 423px 139px;
width: 24px;
height: 24px;
transform: rotate(0deg);
transition: all 0.5s; }
@media screen and (max-width: 840px) {
footer .sub-footer .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center; }
footer .sub-footer .grid-row .grid-col {
margin-left: 0; } }
@media screen and (max-width: 600px) {
footer .sub-footer {
height: auto;
padding: 0; }
footer .sub-footer .grid-row {
display: block;
width: 100%; }
footer .sub-footer .pay-off, footer .sub-footer .komma {
padding: 15px 7.1428571429%;
width: 100%;
text-align: center; }
footer .sub-footer .komma {
background-color: rgba(255, 255, 255, 0.05); }
footer .sub-footer .komma:before {
position: relative;
right: 0;
left: -16px;
top: 6px; } }
@media screen and (max-width: 840px) {
footer {
padding-top: 35px; }
footer > .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin-bottom: 100px;
width: 100%; }
footer .main-item {
width: 100%;
padding: 0 7.1428571429%;
margin-left: auto;
margin-right: auto; }
footer .main-item .menu {
margin-left: 0;
width: 100%; }
footer .main-item .logo {
display: none; }
footer .main-item.location {
-webkit-order: 2;
-ms-order: 2;
order: 2;
border-top: 2px solid rgba(152, 160, 179, 0.2);
padding-top: 40px; }
footer .main-item.schools, footer .main-item.menu {
display: none; }
footer .main-item > a {
display: inline-block; }
footer .main-item ul.extra-margin-bellow {
margin-bottom: 35px; } }
@media screen and (max-width: 760px) {
footer h2 {
font-size: 24px; }
footer .topLeft, footer .topRight {
width: 100%; }
footer .topLeft .footer-diensten-menu {
height: auto; }
footer .topLeft .footer-diensten-menu .grid-col .button {
height: auto;
margin-bottom: 6%;
font-size: 18px;
width: 92%; }
footer .topLeft .footer-diensten-menu .grid-col .button:before {
content: normal;
transition: none; }
footer .topLeft .footer-diensten-menu .grid-col .button:hover {
color: #ff8f00;
transition: color 0.25s ease-in-out; }
footer .topLeft .footer-diensten-menu .grid-col .button:hover:before {
content: none;
margin: 0; }
footer .topRight {
padding-right: 10%; }
footer .gradientholder .main-item {
display: none; }
footer .secondary-menu {
padding: 40px 0; }
footer .secondary-menu .grid-col {
width: 100%;
padding-left: 7.1428571429%;
margin-left: 0;
margin-bottom: 5%; } }
@media screen and (max-width: 435px) {
footer .footer-top {
margin-bottom: 30px; }
footer .topLeft .footer-diensten-menu .grid-col .button {
line-height: 80px; }
footer .offerte-button {
position: relative;
margin-top: 30px;
right: 0;
border-radius: 11px;
min-width: 247px;
height: 53px;
padding: 0 20px;
line-height: 51px;
margin-left: 7.1428571429%; } }
.pagination {
text-align: right; }
.pagination ul {
display: inline-block;
list-style: none;
padding: 0;
margin: 0; }
.pagination ul li {
display: inline-block;
float: left;
margin: 0 6px; }
.pagination ul li a {
color: #1b71dd;
text-decoration: none; }
.pagination ul li.active {
color: #0f46a1; }
.pagination ul li.disabled {
opacity: 0.3; }
.preventScroll {
overflow: hidden;
overflow-y: scroll;
position: fixed;
width: 100%; }
.mobile-navigation {
position: fixed;
z-index: 1000;
height: 100vh;
display: none;
overflow: hidden;
width: 100%;
left: 0;
top: 0;
pointer-events: none; }
.mobile-navigation.active .bar {
opacity: 1; }
.mobile-navigation .bar {
height: 60px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11);
pointer-events: all;
position: relative;
z-index: 4;
transition: opacity 0.4s;
transition-delay: 0.4s;
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%); }
.mobile-navigation .bar .toggle-menu {
width: 60px;
height: 100%;
z-index: 3;
border: rgba(255, 255, 255, 0.1);
background-color: #424242;
cursor: pointer;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center; }
.mobile-navigation .bar .toggle-menu .icon span {
position: relative;
width: 25px;
height: 3px;
margin-bottom: 3px;
background-color: white;
border-radius: 9999px;
display: block;
transition: all 0.3s; }
.mobile-navigation .bar .toggle-menu .icon span:last-of-type {
margin-bottom: 0;
width: 17px;
bottom: 0; }
.mobile-navigation .bar .toggle-menu .icon span:first-of-type {
top: 0; }
.mobile-navigation .bar .toggle-menu:hover .icon span:last-of-type {
width: 25px; }
.mobile-navigation .bar .logo {
width: 150px;
max-width: 150px;
position: fixed;
left: 40%;
top: 15px; }
.mobile-navigation .bar .mobile-contact {
position: fixed;
z-index: 30;
opacity: 1;
background-color: transparent;
padding: 0;
margin: 0;
right: 0;
height: 60px;
width: auto; }
.mobile-navigation .bar .mobile-contact .contact-info {
height: 60px;
padding: 0;
text-align: right; }
.mobile-navigation .bar .mobile-contact .contact-info .tel:before {
content: "";
display: inline-block;
background: url(/img/svg/sprites.svg) 100px -85px no-repeat;
margin: 0 6px 0 40px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
background-size: 800%;
width: 150px;
height: 90px; }
.mobile-navigation .bar .contact-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60px;
z-index: 5; }
.mobile-navigation .bar .contact-button a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
height: 100%; }
.mobile-navigation .bar .contact-button a:before {
content: "";
background: url("/img/svg/sprites.svg") -99px -397px no-repeat;
background-size: 423px 139px;
width: 23px;
height: 25px;
display: inline-block; }
.mobile-navigation .shader {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #0f46a1;
opacity: 0;
transition-delay: 0.4s;
z-index: 2; }
.mobile-navigation .menu {
height: calc(100% - 60px);
width: 80%;
left: 0;
top: 60px;
background-color: #424242;
color: white;
min-width: 275px;
position: absolute;
overflow-x: auto;
pointer-events: all;
z-index: 5;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-spec-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
@media screen and (max-width: 500px) {
.mobile-navigation .menu {
width: 90%; } }
.mobile-navigation nav {
margin-top: 50px;
padding: 0 10px 80px 60px;
font-size: 1rem;
line-height: 1.6rem; }
.mobile-navigation nav h3 {
font-size: 1.3rem;
color: white; }
.mobile-navigation nav ul {
padding: 0;
list-style: none; }
.mobile-navigation nav ul.locations {
margin-bottom: 45px; }
.mobile-navigation nav ul.locations, .mobile-navigation nav ul.business {
margin-top: 5px; }
.mobile-navigation nav ul li {
margin-bottom: 4px; }
.mobile-navigation nav ul li a, .mobile-navigation nav ul li span {
color: white;
position: relative;
display: inline-block;
text-decoration: none;
transition: color 0.2s;
cursor: pointer; }
.mobile-navigation nav ul li > ul {
padding-left: 20px;
font-size: 0.85em;
overflow: hidden;
opacity: 1;
transition: height 0.5s, opacity 0.2s; }
.mobile-navigation nav ul li > ul.hide {
height: 0 !important;
opacity: 0; }
.mobile-navigation nav ul li > ul.noTrans {
transition: height 0s;
opacity: 0; }
.mobile-navigation nav ul li > ul li a {
color: white; }
.mobile-navigation nav ul li > ul li a:before {
content: "";
display: inline-block;
margin: 0 5px;
padding-top: 4px;
width: 14px;
height: 14px;
position: relative;
top: 5px;
background-position: -46px center;
background-size: 400%;
background-repeat: no-repeat;
background-image: url("/img/svg/button_arrow.svg"); }
.mobile-navigation nav ul li > ul li.active a {
color: #ff8f00 !important; }
.mobile-navigation nav ul li.active a, .mobile-navigation nav ul li.active span {
color: #ff8f00; }
.mobile-navigation nav ul li.active > ul li a {
color: white; }
.mobile-navigation.active .bar .toggle-menu {
border-left: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-navigation.active .bar .toggle-menu .icon span {
opacity: 0;
transition-delay: 0.4s; }
.mobile-navigation.active .bar .toggle-menu .icon span:first-of-type {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-spec-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
top: 6px; }
.mobile-navigation.active .bar .toggle-menu .icon span:last-of-type {
width: 25px;
opacity: 1;
bottom: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-spec-transform: rotate(-45deg);
transform: rotate(-45deg); }
.mobile-navigation.active .menu {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.mobile-navigation.shader-active .shader {
opacity: 0.4;
pointer-events: all; }
.mobile-navigation.allow-animation .shader {
transition: all 0.2s; }
.mobile-navigation.allow-animation .menu {
transition: all 0.3s;
transition-timing-function: ease-in-out; }
@media screen and (max-width: 840px) {
.mobile-navigation {
display: block; }
.mobile-navigation header {
height: 60px;
visibility: hidden;
overflow: hidden; }
.mobile-navigation .sticky-header, .mobile-navigation .sticky-header.show {
display: none; }
.mobile-navigation .mobile-navigation {
display: block; } }
@media screen and (max-width: 550px) {
.mobile-navigation .bar .logo {
left: 37%; } }
@media screen and (max-width: 435px) {
.mobile-navigation .bar .logo {
left: 33%; }
.mobile-navigation nav {
padding-left: 30px; }
.mobile-navigation nav ul {
font-size: 1.2rem; } }
@media screen and (max-width: 375px) {
.mobile-navigation .bar .logo {
left: 31%; } }
@media screen and (max-width: 321px) {
.mobile-navigation .bar .logo {
left: 27%; } }
.mobile-contact {
display: none;
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
-spec-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
padding: 50px 7.1428571429%;
background-color: white;
color: #737373;
font-size: 0.9rem;
transition: opacity 0.4s, transform 0.4s; }
.mobile-contact.active {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: all; }
.mobile-contact h1, .mobile-contact h2 {
font-size: 2rem;
line-height: 1.2;
max-width: 580px;
color: #0f46a1;
margin: 0 0 40px; }
.mobile-contact p {
margin: 1rem 0; }
.mobile-contact strong {
color: #333; }
.mobile-contact a:not(.button) {
color: #1b71dd;
text-decoration: none;
transition: color 0.3s, border 0.3s, opacity 0.3s; }
.mobile-contact a:not(.button):hover {
color: #134e99; }
.mobile-contact a.button {
display: inline-block;
margin-top: 20px;
padding: 15px 20px;
border-radius: 25px;
background-color: #1b71dd;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s; }
.mobile-contact a.button:after {
content: "";
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s; }
.mobile-contact a.button:hover {
background-color: #0f46a1; }
.mobile-contact a.button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
@media screen and (max-width: 840px) {
.mobile-contact {
display: block; } }
/*==========================================================================
* Dynamic Blocks
* ========================================================================== */
.dynamic-block .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center; }
.dynamic-block .content {
font-size: 0.9rem;
line-height: 1.6; }
.dynamic-block .content h2 {
font-size: 1.2rem;
color: #0f46a1;
margin: 0 0 40px; }
.dynamic-block .content ul, .dynamic-block .content ol {
padding-left: 20px;
list-style: none; }
.dynamic-block .content ul li, .dynamic-block .content ol li {
position: relative;
padding-left: 20px;
color: rgba(115, 115, 115, 0.8); }
.dynamic-block .content ul li:before, .dynamic-block .content ol li:before {
content: "•";
position: absolute;
color: #0f46a1;
font-size: 1.2rem;
line-height: 1;
left: -20px; }
.dynamic-block .content ol {
counter-reset: ol-counter; }
.dynamic-block .content ol li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ".";
font-size: 1rem;
top: 2px; }
.dynamic-block .content p {
color: #737373; }
.dynamic-block .content p:first-of-type {
margin-top: 0; }
.dynamic-block .content p:last-of-type {
margin-bottom: 0; }
.dynamic-block .content p strong {
color: #333; }
.dynamic-block .content p a {
color: #333;
text-decoration: none;
border-bottom: 2px solid #333;
transition: color 0.3s, border 0.3s, opacity 0.3s; }
.dynamic-block .content p a:hover {
color: black;
border-bottom-color: #0d0d0d; }
.dynamic-block .content.white h2 {
color: rgba(255, 255, 255, 0.8); }
.dynamic-block .content.white ul li, .dynamic-block .content.white ol li {
color: rgba(255, 255, 255, 0.8); }
.dynamic-block .content.white ul li:before, .dynamic-block .content.white ol li:before {
color: white; }
.dynamic-block .content.white p {
color: rgba(255, 255, 255, 0.8); }
.dynamic-block .content.white p strong {
color: white; }
.dynamic-block .content.white p a {
color: white;
border-bottom-color: white; }
.dynamic-block .content.white p a:hover {
opacity: 0.6; }
.dynamic-block a.button {
display: inline-block;
margin-top: 50px;
padding: 15px 20px;
border-radius: 25px;
background-color: #1b71dd;
text-decoration: none;
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
color: white;
transition: background-color 0.3s; }
.dynamic-block a.button:after {
content: "";
margin-left: 20px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.3s; }
.dynamic-block a.button:hover {
background-color: #0f46a1; }
.dynamic-block a.button:hover:after {
-webkit-transform: translate3d(5px, 0, 0);
-moz-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
-o-transform: translate3d(5px, 0, 0);
-spec-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
.two-text-columns {
padding: 0 0 45px; }
.two-text-columns .content-container {
position: relative;
z-index: 10;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start; }
.two-text-columns .content-container .left-content, .two-text-columns .content-container .right-content {
background: white;
width: calc(50% - 20px);
padding: 0; }
.two-text-columns .content-container .left-content h1, .two-text-columns .content-container .left-content h2, .two-text-columns .content-container .right-content h1, .two-text-columns .content-container .right-content h2 {
text-align: left;
font-weight: 700;
color: #ff6f00; }
.two-text-columns .content-container .left-content p, .two-text-columns .content-container .left-content em, .two-text-columns .content-container .left-content span, .two-text-columns .content-container .right-content p, .two-text-columns .content-container .right-content em, .two-text-columns .content-container .right-content span {
color: #98a0b3; }
.two-text-columns .content-container .left-content p a, .two-text-columns .content-container .left-content em a, .two-text-columns .content-container .left-content span a, .two-text-columns .content-container .right-content p a, .two-text-columns .content-container .right-content em a, .two-text-columns .content-container .right-content span a {
color: #ff6f00; }
.two-text-columns .content-container .left-content p strong, .two-text-columns .content-container .left-content em strong, .two-text-columns .content-container .left-content span strong, .two-text-columns .content-container .right-content p strong, .two-text-columns .content-container .right-content em strong, .two-text-columns .content-container .right-content span strong {
color: #0f46a1; }
.two-text-columns .content-container .left-content p a, .two-text-columns .content-container .left-content em a, .two-text-columns .content-container .left-content span a, .two-text-columns .content-container .right-content p a, .two-text-columns .content-container .right-content em a, .two-text-columns .content-container .right-content span a {
text-decoration: underline; }
.two-text-columns .content-container .left-content ul, .two-text-columns .content-container .right-content ul {
list-style: none;
padding-left: 20px;
margin-top: 20px;
margin-bottom: 0; }
.two-text-columns .content-container .left-content ul li, .two-text-columns .content-container .right-content ul li {
position: relative;
color: #ff6f00;
font-size: 16px;
line-height: 24px;
margin-bottom: 5px; }
.two-text-columns .content-container .left-content ul li:before, .two-text-columns .content-container .right-content ul li:before {
content: "";
background: url("/img/svg/sprites.svg") -443px 0 no-repeat;
background-size: 423px 139px;
width: 16px;
height: 12px;
display: inline-block;
position: absolute;
left: -23px;
top: 6px; }
.two-text-columns .content-container .left-content {
margin-right: 19px; }
.two-text-columns .content-container .left-content.content66 {
width: calc(100% / 3 * 2 - 20px); }
.two-text-columns .content-container .left-content.content50 {
width: calc(100% / 2 - 20px); }
.two-text-columns .content-container .left-content.content33 {
width: calc(100% / 3 - 20px); }
.two-text-columns .content-container .right-content {
margin-left: 19px; }
.two-text-columns .content-container .right-content.content66 {
width: calc(100% / 3 - 20px); }
.two-text-columns .content-container .right-content.content50 {
width: calc(100% / 2 - 20px); }
.two-text-columns .content-container .right-content.content33 {
width: calc(100% / 3 * 2 - 20px); }
@media screen and (max-width: 650pxpx) {
.two-text-columns .content-container {
display: block; }
.two-text-columns .content-container .left-content, .two-text-columns .content-container .right-content {
width: 100% !important;
margin: 0; }
.two-text-columns .content-container .left-content {
margin-bottom: 40px; } }
.full-image-column {
padding: 0 0 45px; }
.full-image-column .content-container img {
width: 100%;
display: block; }
.full-image-column .content-container img.large, .full-image-column .content-container img.medium {
display: none; }
@media screen and (max-width: 1370pxpx) {
.full-image-column .content-container img.original {
display: none; }
.full-image-column .content-container img.large {
display: block; } }
@media screen and (max-width: 680pxpx) {
.full-image-column .content-container img.original, .full-image-column .content-container img.large {
display: none; }
.full-image-column .content-container img.medium {
display: block; } }
.content-block .grid-row {
position: relative; }
.content-block .image {
position: absolute;
height: 100%; }
.content-block .image span {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover; }
.content-block .image .medium {
display: none; }
.content-block .content {
padding: 100px 8.3333333333%; }
.content-block[data-size-type='33'] {
padding: 100px 0; }
.content-block[data-size-type='33'] .image {
width: 58.3333333333%;
position: relative; }
.content-block[data-size-type='33'] .image img {
width: 100%; }
.content-block[data-size-type='33'] .content {
padding-top: 0;
padding-bottom: 0;
width: 41.6666666667%;
margin-left: 0; }
.content-block[data-size-type='50'] .image {
top: 0;
width: 41.6666666667%;
left: 8.3333333333%; }
.content-block[data-size-type='50'] .content {
width: 50%;
margin-left: 50%; }
.content-block[data-size-type='66'] {
background-color: #1b71dd; }
.content-block[data-size-type='66'] .image {
top: 0;
width: 41.6666666667%;
left: -8.3333333333%; }
.content-block[data-size-type='66'] .content {
width: 50%;
margin-right: 8.3333333333%;
margin-left: 41.6666666667%; }
.content-block[data-image-location='right'] .grid-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center; }
.content-block[data-image-location='right'] .content {
-webkit-order: 1;
-ms-order: 1;
order: 1;
margin-left: 0; }
.content-block[data-image-location='right'] .image {
-webkit-order: 2;
-ms-order: 2;
order: 2;
top: 0;
right: 8.3333333333%;
left: auto; }
.content-block[data-image-location='right'][data-size-type='33'] .image {
right: 0; }
.content-block[data-image-location='right'][data-size-type='66'] .content {
margin-left: 0; }
.content-block[data-image-location='right'][data-size-type='66'] .image {
right: -8.3333333333%; }
@media screen and (max-width: 1366px) {
.content-block .image {
left: 0;
width: 50%; }
.content-block .content {
width: 50%;
margin-right: 0;
margin-left: 50%;
padding: 100px 8.3333333333%; }
.content-block[data-image-location='right'] .content {
margin-left: 0;
margin-right: 0; }
.content-block[data-image-location='right'] .image {
right: 0; } }
@media screen and (max-width: 1000px) {
.content-block[data-size-type='66'] .content {
width: 58.3333333333%;
margin-right: 0; }
.content-block[data-size-type='50'] .content {
width: 58.3333333333%; }
.content-block[data-size-type='33'] .content {
padding-right: 0; }
.content-block[data-size-type='33'][data-image-location='right'] .image {
width: 50%; } }
@media screen and (max-width: 840px) {
.content-block .grid-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%; }
.content-block .image {
position: relative;
width: 100% !important;
-webkit-order: 2;
-ms-order: 2;
order: 2;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
padding-bottom: 65%; }
.content-block .content {
-webkit-order: 1;
-ms-order: 1;
order: 1;
width: 85.7142857143% !important;
margin: 0 auto !important;
padding: 50px 0;
font-size: 1rem; } }
.multiple-images {
padding-bottom: 45px; }
.multiple-images .grid-row {
position: relative; }
.multiple-images .grid-row.main66 .main-image {
width: calc(100% / 3 * 2 - 15px); }
.multiple-images .grid-row.main66 .main-image .medium {
display: none; }
.multiple-images .grid-row.main66 .sub-images {
width: calc(100% / 3 - 15px); }
.multiple-images .grid-row.main66 .sub-images img.large {
display: none; }
.multiple-images .grid-row.main50 .main-image {
width: calc(100% / 2 - 15px); }
.multiple-images .grid-row.main50 .main-image .medium {
display: none; }
.multiple-images .grid-row.main50 .sub-images {
width: calc(100% / 2 - 15px); }
.multiple-images .grid-row.main50 .sub-images img.medium {
display: none; }
.multiple-images .grid-row.main33 .main-image {
width: calc(100% / 3 - 15px); }
.multiple-images .grid-row.main33 .main-image .large {
display: none; }
.multiple-images .grid-row.main33 .sub-images {
width: calc(100% / 3 * 2 - 15px); }
.multiple-images .grid-row.main33 .sub-images img.medium {
display: none; }
.multiple-images .grid-row img {
width: 100%;
display: block; }
.multiple-images .grid-row .main-image {
height: calc(100%); }
.multiple-images .grid-row .main-image .responsive {
display: none; }
.multiple-images .grid-row .main-image.left {
position: absolute;
top: 0;
bottom: 0;
left: 0; }
.multiple-images .grid-row .main-image.right {
position: absolute;
top: 0;
right: 0;
bottom: 0; }
.multiple-images .grid-row .main-image > div {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
background-position: 50% 50%; }
.multiple-images .grid-row .sub-images {
float: right; }
.multiple-images .grid-row .sub-images.right {
float: left;
padding-left: 0; }
.multiple-images .grid-row .sub-images .half:nth-child(2) {
margin-top: 30px; }
@media screen and (max-width: 850pxpx) {
.multiple-images .content-container.main66 .main-image, .multiple-images .content-container.main66 .sub-images, .multiple-images .content-container.main33 .main-image, .multiple-images .content-container.main33 .sub-images {
width: 100%; }
.multiple-images .content-container.main66 .main-image, .multiple-images .content-container.main33 .main-image {
position: relative;
margin-bottom: 30px; }
.multiple-images .content-container.main66 .main-image div:not(.buttons), .multiple-images .content-container.main33 .main-image div:not(.buttons) {
display: none; }
.multiple-images .content-container.main66 .main-image .responsive, .multiple-images .content-container.main33 .main-image .responsive {
display: block;
margin-bottom: 30px; }
.multiple-images .content-container.main66 .main-image .responsive.medium, .multiple-images .content-container.main33 .main-image .responsive.medium {
display: none; }
.multiple-images .content-container.main66 .sub-images img.medium, .multiple-images .content-container.main33 .sub-images img.medium {
display: none; }
.multiple-images .content-container.main66 .sub-images img.large, .multiple-images .content-container.main33 .sub-images img.large {
display: block; } }
@media screen and (max-width: 650pxpx) {
.multiple-images .content-container.main50 .main-image, .multiple-images .content-container.main50 .sub-images {
width: 100%; }
.multiple-images .content-container.main50 .main-image {
position: relative;
margin-bottom: 30px; }
.multiple-images .content-container.main50 .main-image div:not(.buttons) {
display: none; }
.multiple-images .content-container.main50 .main-image .responsive {
display: block;
margin-bottom: 30px; }
.multiple-images .content-container.main50 .main-image .responsive.medium {
display: none; }
.multiple-images .content-container.main50 .sub-images img.medium {
display: none; }
.multiple-images .content-container.main50 .sub-images img.large {
display: block; } }
@media screen and (max-width: 500pxpx) {
.multiple-images .content-container.main33 .main-image .responsive.medium, .multiple-images .content-container.main50 .main-image .responsive.medium, .multiple-images .content-container.main66 .main-image .responsive.medium {
display: block; }
.multiple-images .content-container.main33 .main-image .responsive.large, .multiple-images .content-container.main50 .main-image .responsive.large, .multiple-images .content-container.main66 .main-image .responsive.large {
display: none; }
.multiple-images .content-container.main33 .sub-images img.medium, .multiple-images .content-container.main50 .sub-images img.medium, .multiple-images .content-container.main66 .sub-images img.medium {
display: block; }
.multiple-images .content-container.main33 .sub-images img.large, .multiple-images .content-container.main50 .sub-images img.large, .multiple-images .content-container.main66 .sub-images img.large {
display: none; } }
.full-text-block {
background-image: url("/img/forest_top_view.jpg");
background-position: right bottom;
background-size: cover; }
.full-text-block .grid-row {
position: relative;
display: block;
padding: 180px 0 140px;
text-align: center; }
.full-text-block .text {
max-width: 680px;
margin: auto;
text-align: center;
font-size: 1.2rem; }
.full-text-block .text ul li:before, .full-text-block .text ol li:before {
position: relative;
left: 0;
margin-left: -45px;
margin-right: 10px; }
.full-text-block a.button {
margin-top: 60px; }
.full-text-block .icon {
display: inline-block;
position: absolute;
left: -30px;
top: -60px;
width: 60px;
height: 212px; }
.full-text-block .icon:after {
content: "";
display: block;
background: url("/img/svg/sprites.svg") -195px 0 no-repeat;
background-size: 423px 139px;
width: 60px;
height: 212px; }
[class^="vso"] .full-text-block {
background-image: url("/img/forest_top_view_green.jpg"); }
[class^="services"] .full-text-block {
background-image: url("/img/forest_top_view_grey.jpg"); }
@media screen and (max-width: 840px) {
.full-text-block .grid-row {
padding: 50px 0;
text-align: left; }
.full-text-block .text {
text-align: left;
font-size: 1rem; }
.full-text-block a.button {
margin-top: 30px; }
.full-text-block .icon {
display: none; } }
.video-block {
width: 100%;
max-width: 960px;
margin: auto; }
.video-block .video-wrapper {
position: relative;
padding-bottom: 53.6%;
padding-top: 25px;
height: 0; }
.video-block .video-wrapper iframe, .video-block .video-wrapper .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.video-block .video-wrapper .video-overlay {
z-index: 2;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
opacity: 1;
cursor: pointer;
transition: all 0.2s; }
.video-block .video-wrapper .video-overlay .button {
width: 25%;
max-width: 85px;
transform: scale(1);
transition: all 0.4s; }
.video-block .video-wrapper .video-overlay .button img {
width: 100%; }
.video-block .video-wrapper .video-overlay:hover .button {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
-o-transform: scale(0.85);
-spec-transform: scale(0.85);
transform: scale(0.85); }
.video-block .video-wrapper .video-overlay.hide {
opacity: 0;
pointer-events: none;
transition: all 0.5s;
transition-delay: 0.7s; }
.video-block .video-wrapper .video-overlay.hide .button {
transition: all 0.8s;
transform: scale(0.3); }
/*==========================================================================
* News row
* ========================================================================== */
.post-row {
position: relative;
min-height: 500px;
padding-bottom: 50px; }
/* Read more news
* ========================================================================== */
.next-news-items {
margin-top: 60px; }
body.home h1 {
font-style: italic;
font-weight: bold;
font-size: 40px;
line-height: 38.46px;
letter-spacing: -0.2px;
margin: 45px 0;
color: #424242; }
body.home p {
font-size: 18px;
line-height: 28px; }
body.home .home-header .logo {
display: none; }
body.home .home-vid-container, body.home .home-img-container {
position: relative;
height: 31vw;
max-height: 625px;
z-index: 0;
background: url("/img/header-img.jpg") no-repeat;
background-size: cover;
background-position: top center; }
body.home .home-vid-container:before, body.home .home-img-container:before {
content: "";
display: none;
width: 100%;
height: 31vw;
background: url("/img/header-img.jpg") no-repeat;
background-size: cover;
background-position: center center; }
body.home .home-vid-container .home-img, body.home .home-img-container .home-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon, body.home .home-img-container .header-hexagon .overlay-hexagon {
color: white;
width: 33.3333333333%;
height: 56vw;
max-height: 832px;
margin-top: 12vw;
padding: 10% 4% 0 4%;
background: transparent url("/img/svg/overlay-hexagon.svg") no-repeat -9px top;
background-size: 105%;
z-index: 1; }
body.home .home-vid-container .header-hexagon .overlay-hexagon h2, body.home .home-img-container .header-hexagon .overlay-hexagon h2 {
font-size: 145%;
line-height: 130%;
font-style: italic; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
font-size: 100%;
line-height: 150%;
letter-spacing: -0.18px; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .text, body.home .home-img-container .header-hexagon .overlay-hexagon .text {
height: 66%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .bottom, body.home .home-img-container .header-hexagon .overlay-hexagon .bottom {
width: 100%;
height: 53px;
display: flex;
align-items: center;
flex-direction: column; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .bottom .scroll-hinter, body.home .home-img-container .header-hexagon .overlay-hexagon .bottom .scroll-hinter {
position: static;
width: 30%;
height: 0; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .bottom .scroll-hinter svg, body.home .home-img-container .header-hexagon .overlay-hexagon .bottom .scroll-hinter svg {
position: relative; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .bottom .button, body.home .home-img-container .header-hexagon .overlay-hexagon .bottom .button {
margin: 0 20%;
top: -55px;
min-width: unset;
width: 75%;
max-width: 70%; }
body.home .home-vid-container {
display: block;
position: relative;
height: 0;
padding-bottom: 31%;
z-index: 0;
background-color: #2e2e2e; }
body.home .home-vid-container #video {
width: 100%;
padding-bottom: 31%;
position: absolute;
left: 0;
top: 0; }
body.home .home-vid-container #video iframe {
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
transition: opacity 0.8s; }
body.home .home-intro {
padding: 40px 0;
min-height: 500px;
background-color: #F9F9FA; }
body.home .home-intro .grid-row .grid-col {
width: 58.3333333333%; }
body.home .home-intro .video-wrapper {
width: 100%;
margin-bottom: 50px; }
body.home .home-intro .video-wrapper #video {
position: relative;
width: 100%;
padding-bottom: 56.25%; }
body.home .home-intro .video-wrapper #video iframe {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%; }
body.home .home-intro .text {
max-width: 625px; }
body.home .home-intro p {
color: #546E7A; }
body.home .home-intro .tel {
position: relative;
z-index: 1; }
body.home .home-intro .tel:before {
content: "";
background: url("/img/svg/sprites.svg") 0px -117px no-repeat;
background-size: 423px 139px;
width: 18px;
height: 16px;
background-size: 540px 252px;
display: inline-block;
margin: 0 6px 0 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
body.home .home-diensten-menu {
height: 838px; }
body.home .home-diensten-menu .diensten-menu .grid-col a {
flex-basis: 46%;
flex-grow: 0;
margin-right: 4%; }
body.home .home-diensten-menu h1 {
margin: 70px 0 77px 0; }
body.home .home-projecten {
position: relative; }
body.home .home-projecten:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: -1;
position: absolute;
background: white url("/img/clouds_bg.jpg") no-repeat;
-moz-transform: scaleX(-1) scaleY(-1);
-o-transform: scaleX(-1) scaleY(-1);
-webkit-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1); }
body.home .home-projecten h1 {
color: white;
margin: 3.41% 0; }
body.home .home-projecten > .grid-row {
position: relative; }
body.home .home-projecten > .grid-row .grid-col {
position: relative;
overflow: visible;
z-index: 1; }
body.home .home-projecten > .grid-row .grid-col img {
width: 100%; }
body.home .home-projecten > .grid-row .nieuwbouw, body.home .home-projecten > .grid-row .renovatie {
vertical-align: top; }
body.home .home-projecten > .grid-row .nieuwbouw h1, body.home .home-projecten > .grid-row .renovatie h1 {
position: absolute;
top: 17%;
left: -15%;
z-index: 20;
color: white;
border-bottom: solid 10px #396EC2;
transition: transform 0.2s; }
body.home .home-projecten > .grid-row .nieuwbouw img, body.home .home-projecten > .grid-row .renovatie img {
transition: transform 0.2s; }
body.home .home-projecten > .grid-row .nieuwbouw:hover h1, body.home .home-projecten > .grid-row .nieuwbouw:hover img, body.home .home-projecten > .grid-row .renovatie:hover h1, body.home .home-projecten > .grid-row .renovatie:hover img {
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
-ms-transform: scale(1.01);
-o-transform: scale(1.01);
-spec-transform: scale(1.01);
transform: scale(1.01); }
body.home .home-projecten > .grid-row .nieuwbouw {
margin-right: 2%; }
body.home .home-projecten .hexagon-frame {
position: absolute;
top: 0;
z-index: 0;
height: 75%;
width: 100%;
overflow: hidden;
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
body.home .home-projecten .hexagon-frame .big-hexagon-holder {
left: 38.5%;
position: relative;
top: -10%; }
body.home .home-projecten .hexagon-frame .big-hexagon-holder svg {
-webkit-animation: spin3 360s linear infinite;
animation: spin3 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin3 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1); } }
body.home .home-projecten .projectenLink {
width: 100%;
font-size: 18px;
line-height: 24px;
text-align: center;
padding: 155px 0 149px; }
body.home .home-projecten .projectenLink:after {
content: "-";
color: #ff6f00;
font-weight: bold;
display: block;
margin: 18px;
font-size: 32px; }
body.home .home-projecten .projectenLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
body.home .home-projecten .projectenLink a:hover {
color: #ff8f00;
border-bottom: solid 2px #ff8f00; }
body.home .home-referenties {
background-color: #ff6f00;
height: auto;
position: relative;
z-index: 1;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }
body.home .home-referenties .references-text {
margin-left: 13.5714285714%;
max-width: 25%;
vertical-align: top;
padding-top: 4.5%; }
body.home .home-referenties h2 {
color: white;
font-style: italic;
font-size: 32px;
margin-bottom: 30px;
line-height: 42px; }
body.home .home-referenties h2 p {
color: white;
font-style: italic;
font-size: 32px;
margin-bottom: 30px;
line-height: 42px; }
body.home .home-referenties a {
font-size: 18px;
line-height: 28px;
letter-spacing: -0.36px;
padding-top: 12px; }
body.home .home-referenties .references-imgHolder {
margin-left: 11.4285714286%; }
body.home .home-referenties .references-imgHolder figure {
display: block;
width: 100%;
height: 0;
padding-bottom: 47.1%;
padding-top: 10%;
margin: 0;
background-repeat: no-repeat;
background-size: cover; }
body.home .diensten-blok {
background: white url("/img/clouds_bg.jpg") no-repeat;
padding-top: 128px;
position: relative; }
body.home .diensten-blok h1 {
margin: 0 auto;
margin-bottom: 60px;
line-height: 55px;
text-align: center;
position: relative;
z-index: 2; }
body.home .diensten-blok .icon-holder {
height: 645px;
background-color: #424242;
margin-left: 3.5714285714%;
width: 92.8571428571%;
z-index: 2;
padding-top: 5px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); }
body.home .diensten-blok .icon-holder .grid-row {
height: 275px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col {
padding: 90px 0 0 65px;
text-align: center;
color: white;
width: 31.7857142857%;
height: 100%;
letter-spacing: 0.2px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col h4 {
font-size: 25px;
line-height: 30px;
padding-bottom: 16px;
padding-top: 10px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col img {
width: 55px;
height: 70px;
margin: 0 auto; }
body.home .diensten-blok .icon-holder .grid-row .grid-col p {
font-size: 16px;
line-height: 28px;
margin-top: -8px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col .button {
margin-top: 70px;
font-size: 18px;
line-height: 28px;
letter-spacing: -0.36px;
padding-top: 12px; }
body.home .diensten-blok .hexagon-frame {
height: 100%;
width: 100%;
position: absolute;
top: 0;
overflow: hidden;
z-index: 0; }
body.home .diensten-blok .hexagon-frame .big-hexagon-holder {
left: 62.5%;
position: relative;
top: 20%; }
body.home .diensten-blok .hexagon-frame .big-hexagon-holder svg {
-webkit-animation: spin4 360s linear infinite;
animation: spin4 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin4 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1);
transform: translate3d(0, 0, 0) rotate(360deg) scale(1.1); } }
body.home .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0 {
fill: url(#SVGID_1_); }
body.home .diensten-blok .dienstenLink {
width: 100%;
font-size: 18px;
line-height: 24px;
text-align: center;
padding: 67px 0 125px;
color: #616161;
position: relative;
z-index: 2; }
body.home .diensten-blok .dienstenLink:after {
content: "-";
color: #ff6f00;
font-weight: bold;
display: block;
margin: 18px;
font-size: 32px; }
body.home .diensten-blok .dienstenLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
body.home .diensten-blok .dienstenLink a:hover {
color: #ff8f00;
border-bottom: solid 2px #ff8f00; }
body.home .call-to-action-contact {
margin-bottom: 150px; }
body.home .call-to-action-contact:after {
background: none; }
body.IE .home-vid-container .header-hexagon .overlay-hexagon, body.IE .home-img-container .header-hexagon .overlay-hexagon {
padding-top: 13%; }
@media screen and (min-width: 1025px) {
body.home .home-vid-container .header-hexagon .overlay-hexagon h2, body.home .home-img-container .header-hexagon .overlay-hexagon h2 {
font-size: 100%;
line-height: 150%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
font-size: 65%;
line-height: 158%; } }
@media screen and (min-width: 1230px) {
body.home .home-vid-container .header-hexagon .overlay-hexagon h2, body.home .home-img-container .header-hexagon .overlay-hexagon h2 {
font-size: 120%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
font-size: 80%;
line-height: 160%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .button, body.home .home-img-container .header-hexagon .overlay-hexagon .button {
margin: 0 15%; } }
@media screen and (min-width: 1390px) {
body.home .home-vid-container .header-hexagon .overlay-hexagon h2, body.home .home-img-container .header-hexagon .overlay-hexagon h2 {
font-size: 136%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
font-size: 90%; } }
@media screen and (min-width: 1520px) {
body.home .home-vid-container .header-hexagon .overlay-hexagon .button, body.home .home-img-container .header-hexagon .overlay-hexagon .button {
margin: 0 100px; } }
@media screen and (max-width: 1120px) {
body.home .home-vid-container .header-hexagon .overlay-hexagon .button, body.home .home-img-container .header-hexagon .overlay-hexagon .button {
margin: 0 12%; }
body.home .home-diensten-menu {
height: 930px; }
body.home .home-diensten-menu .diensten-menu .grid-col a {
flex-basis: 100%;
flex-grow: 0;
margin-right: 0;
margin-bottom: 40px;
line-height: 80px; }
body.home .home-projecten .hexagon-frame .big-hexagon-holder > svg {
width: 60%; } }
@media screen and (max-width: 1025px) {
body.home .home-vid-container, body.home .home-img-container {
position: relative;
height: auto;
max-height: none;
background: none; }
body.home .home-vid-container:before, body.home .home-img-container:before {
display: block; }
body.home .home-vid-container #video, body.home .home-img-container #video {
padding-bottom: 56vw; }
body.home .home-vid-container .header-hexagon, body.home .home-img-container .header-hexagon {
position: relative;
top: -1px;
background-color: #424242;
padding: 0 9.0909090909% 5% 9.0909090909%;
width: 100%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon, body.home .home-img-container .header-hexagon .overlay-hexagon {
position: static;
width: 100%;
max-width: 100%;
background: none;
height: auto;
margin-top: 0;
padding: 4%; }
body.home .home-vid-container .header-hexagon .overlay-hexagon h2, body.home .home-img-container .header-hexagon .overlay-hexagon h2 {
width: 100%;
margin: 20px 0;
padding: 0 2%;
position: static;
max-width: 100%;
font-size: 28px;
line-height: 40px; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
position: static;
width: 95%;
padding: 0 2%;
max-width: 100%;
margin-bottom: 30px;
font-size: 18px;
line-height: 28px; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .bottom, body.home .home-img-container .header-hexagon .overlay-hexagon .bottom {
display: block; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .bottom .button, body.home .home-img-container .header-hexagon .overlay-hexagon .bottom .button {
font-size: 18px;
margin: 0 2%;
top: 0;
max-width: unset;
width: auto;
min-width: 247px; }
body.home .home-vid-container .header-hexagon .overlay-hexagon .scroll-hinter, body.home .home-vid-container .header-hexagon .overlay-hexagon .overlay-hexagon-holder, body.home .home-img-container .header-hexagon .overlay-hexagon .scroll-hinter, body.home .home-img-container .header-hexagon .overlay-hexagon .overlay-hexagon-holder {
display: none; }
body.home .overlay-hexagon-holder > svg {
display: none; }
body.home .home-intro {
padding: 20px 0 60px 0;
height: auto; }
body.home .home-intro .grid-row .offset-5 {
padding: 0 8.3333333333% 5% 8.3333333333%;
width: 100%;
margin-left: 0; }
body.home .home-referenties h2 p {
font-size: 22px;
margin-bottom: 30px;
line-height: 36px; }
body.home .home-referenties .references-text {
padding-top: 3.5%; }
body.home .content a.button {
padding-top: 8px;
min-width: 180px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col .button {
top: 90px;
font-size: 16px;
line-height: 20px; }
body.home .diensten-blok .dienstenLink {
padding: 90px 0 60px; } }
@media screen and (max-width: 840px) {
body.home .home-vid-container:before, body.home .home-img-container:before {
height: 45vw; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
width: 95%; }
body.home .home-vid-container .overlay-hexagon, body.home .home-img-container .overlay-hexagon {
top: 100%;
padding: 2% 12%;
color: white;
width: 100%;
max-width: unset;
height: 200px;
display: block;
position: absolute;
background-color: #424242;
left: 0; }
body.home .home-vid-container .overlay-hexagon h2, body.home .home-img-container .overlay-hexagon h2 {
width: 100%; }
body.home h1 {
font-size: 32px; }
body.home .home-diensten-menu {
height: auto;
padding: 10% 0; }
body.home .home-diensten-menu h1 {
margin-top: 0; }
body.home .home-diensten-menu .diensten-menu .grid-col a {
height: 80px;
font-size: 18px; }
body.home .home-diensten-menu .diensten-menu .grid-col a svg {
width: 40px;
left: 30px;
top: 10px; }
body.home .home-diensten-menu .diensten-menu .grid-col a .bg {
width: 80px;
height: 80px;
left: 10px;
top: 10px; }
body.home .home-projecten .projectenLink {
padding: 155px 0 90px; }
body.home .home-projecten .hexagon-frame {
box-shadow: none; }
body.home .home-referenties .references-text {
padding-top: 0; }
body.home .home-referenties a {
padding-top: 12px !important; }
body.home .content a.button {
min-width: 180px;
font-size: 14px;
line-height: 26px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col {
padding: 90px 0 0 24px;
vertical-align: top; }
body.home .diensten-blok .icon-holder .grid-row .grid-col h4 {
font-size: 20px;
line-height: 26px; }
body.home .diensten-blok .icon-holder .grid-row .grid-col p {
font-size: 14px;
margin-top: 0; }
body.home .diensten-blok .icon-holder .grid-row .grid-col a.button {
min-width: 165px;
height: 40px;
font-size: 14px;
line-height: 16px;
top: 41%; }
body.home .diensten-blok .icon-holder .grid-row .grid-col a.button.arrow {
padding-right: 45px; }
body.home .diensten-blok .dienstenLink {
padding: 90px 0 60px; } }
@media screen and (max-width: 760px) {
body.home .home-projecten .grid-row {
padding-bottom: 5%;
height: auto;
width: 100%;
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%); }
body.home .home-projecten .grid-row .grid-col {
width: 90%;
margin-top: 10%; }
body.home .home-projecten .grid-row .grid-col h1 {
top: 0;
left: 0;
font-size: 26px;
padding-left: 8.3333333333%; }
body.home .home-projecten .grid-row .renovatie {
margin-left: 0; }
body.home .home-projecten .hexagon-frame {
height: 50%;
bottom: 0;
background: none; }
body.home .home-referenties {
height: auto;
padding: 10%; }
body.home .home-referenties .references-text {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
body.home .home-referenties .references-text h2 p {
font-size: 28px;
line-height: 40px; }
body.home .home-referenties .references-text a.button {
font-size: 22px;
line-height: 24px; }
body.home .home-referenties .references-imgHolder {
display: none; }
body.home .diensten-blok h1 {
padding: 3%; }
body.home .diensten-blok .icon-holder {
height: auto;
width: 100%;
margin-left: 0; }
body.home .diensten-blok .icon-holder .grid-row {
height: auto;
width: 100%; }
body.home .diensten-blok .icon-holder .grid-row .grid-col {
width: 100%;
text-align: left;
padding: 50px 0 40px 7.1428571429%;
border-bottom: solid 1px lightgray; }
body.home .diensten-blok .icon-holder .grid-row .grid-col:last-child {
border-bottom: none; }
body.home .diensten-blok .icon-holder .grid-row .grid-col img {
float: left; }
body.home .diensten-blok .icon-holder .grid-row .grid-col h4 {
font-size: 18px;
float: left;
width: 70%;
margin-left: 10%;
padding-top: 0; }
body.home .diensten-blok .icon-holder .grid-row .grid-col p {
float: left;
width: 70%;
margin-left: 10%; }
body.home .diensten-blok .icon-holder .grid-row .grid-col a.button {
font-size: 16px;
line-height: 20px;
padding-top: 12px;
min-width: 180px;
height: 40px;
margin: 20px 0; }
body.home .diensten-blok .icon-holder .grid-row .grid-col a.button.arrow {
padding-right: 52px; } }
@media screen and (max-width: 520px) {
body.home .home-diensten-menu {
height: auto; }
body.home .home-diensten-menu .diensten-menu .grid-col a:before {
margin-right: 40%; } }
@media screen and (max-width: 435px) {
body.home h1 {
font-size: 24px;
line-height: 28px; }
body.home p {
font-size: 16px;
line-height: 24px; }
body.home .home-header .logo {
padding-top: 15px;
height: 80px; }
body.home .home-vid-container, body.home .home-img-container {
background-size: contain;
background-position: center -65px; }
body.home .home-diensten-menu h1 {
margin-bottom: 10%; }
body.home .home-diensten-menu .grid-row .col-11 {
width: 100%;
margin-left: 0; }
body.home .home-diensten-menu .grid-row .col-11 a {
height: 70px;
line-height: 70px;
padding-top: 0; }
body.home .home-diensten-menu .grid-row .col-11 a:before {
margin-right: 30%; }
body.home .home-diensten-menu .grid-row .col-11 a svg {
left: 18px;
width: 35px;
top: 0; }
body.home .home-diensten-menu .grid-row .col-11 a .bg {
width: 70px;
height: 70px;
left: 0;
top: 0; }
body.home .home-vid-container .header-hexagon, body.home .home-img-container .header-hexagon {
padding: 5% 0; }
body.home .home-vid-container .header-hexagon .overlay-hexagon h2, body.home .home-img-container .header-hexagon .overlay-hexagon h2 {
font-size: 24px;
line-height: 28px;
margin-top: 0; }
body.home .home-vid-container .header-hexagon .overlay-hexagon p, body.home .home-img-container .header-hexagon .overlay-hexagon p {
font-size: 16px;
line-height: 24px; }
body.home .home-intro {
padding: 0; }
body.home .home-intro .grid-row {
width: 100%; }
body.home .home-intro .grid-row .offset-5 {
padding: 10% 5%; }
body.home .home-intro .grid-row .offset-5 h1 {
margin-top: 0; }
body.home .home-projecten .grid-row {
padding-bottom: 0; }
body.home .home-projecten .grid-row .grid-col {
width: 100%;
margin-left: 0;
margin-top: 4%;
overflow: hidden; }
body.home .home-projecten .grid-row .grid-col .nieuwbouw,
body.home .home-projecten .grid-row .grid-col .renovatie {
height: 200px;
overflow: hidden; }
body.home .home-projecten .grid-row .grid-col .renovatie {
margin-top: 0; }
body.home .home-projecten .projectenLink {
display: none; }
body.home .home-referenties .references-text a {
padding-top: 14px !important; }
body.home .home-referenties .references-text a.button {
font-size: 18px; }
body.home .diensten-blok {
padding-top: 0; }
body.home .diensten-blok h1 {
margin-bottom: 0;
color: white;
background-color: #424242; }
body.home .diensten-blok .icon-holder .grid-row .grid-col {
padding: 30px 0 20px 7.1428571429%; }
body.home .diensten-blok .icon-holder .grid-row .grid-col:first-child {
border-top: solid 1px lightgray; }
body.home .diensten-blok .icon-holder .grid-row .grid-col:last-child {
padding: 20px 0 20px 7.1428571429%; }
body.home .diensten-blok .icon-holder .grid-row .grid-col img {
width: 40px; }
body.home .diensten-blok .dienstenLink {
display: none; }
body.home .call-to-action-contact {
margin-bottom: 0;
padding-bottom: 0; }
body.home .call-to-action-contact .grid-row {
width: 100%; }
body.home .call-to-action-contact .grid-row .cta-text {
width: 100%;
margin: 0;
padding-bottom: 5%; }
body.home .call-to-action-contact .grid-row .cta-text h2, body.home .call-to-action-contact .grid-row .cta-text h4 {
padding-left: 30%; }
body.home .call-to-action-contact .grid-row .round-portrait {
left: 10%; }
body.home .call-to-action-contact .phone, body.home .call-to-action-contact .mail {
height: 65px; }
body.home .call-to-action-contact .phone img, body.home .call-to-action-contact .mail img {
height: 75%; } }
/* ==========================================================================
* Holder with mouse icon that tells the user he can scroll
* ========================================================================== */
.scroll-hinter {
position: absolute;
z-index: 35;
top: 34%;
left: 37.8571428571%;
width: 24.2857142857%;
height: 0; }
@media screen and (max-width: 768px) {
.scroll-hinter {
display: none; } }
.scroll-hinter .sizer {
width: 100%;
border-top-left-radius: 500px;
border-top-right-radius: 500px;
-webkit-transform: translateY(-199%);
-moz-transform: translateY(-199%);
-ms-transform: translateY(-199%);
-o-transform: translateY(-199%);
-spec-transform: translateY(-199%);
transform: translateY(-199%); }
.scroll-hinter .icon {
position: absolute;
top: 30%;
left: 38%;
width: 24%;
cursor: pointer; }
.scroll-hinter .icon .mouse-body,
.scroll-hinter .icon .mouse-wheel,
.scroll-hinter .icon .arrow {
fill: #fff; }
.scroll-hinter .icon .arrow {
transition: transform 200ms ease-out; }
.scroll-hinter .icon:hover .arrow {
-webkit-transform: translate3D(0, 30%, 0);
-moz-transform: translate3D(0, 30%, 0);
-ms-transform: translate3D(0, 30%, 0);
-o-transform: translate3D(0, 30%, 0);
-spec-transform: translate3D(0, 30%, 0);
transform: translate3D(0, 30%, 0); }
.scroll-hinter .mouse-wheel {
animation: moveUpDown 1s ease-out infinite; }
@keyframes moveUpDown {
0% {
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
-spec-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0); }
50% {
-webkit-transform: translate3D(0, 7%, 0);
-moz-transform: translate3D(0, 7%, 0);
-ms-transform: translate3D(0, 7%, 0);
-o-transform: translate3D(0, 7%, 0);
-spec-transform: translate3D(0, 7%, 0);
transform: translate3D(0, 7%, 0); }
100% {
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
-spec-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0); } }
/* ==========================================================================
* Buttons
* ========================================================================== */
*
* /*
* Main settings for each button
*
* 1. Reset default link property
*/
.button {
position: relative;
display: inline-block;
min-width: 247px;
height: 53px;
padding: 0 20px;
border-radius: 11px;
font-size: 18px;
letter-spacing: -0.36px;
line-height: 51px;
text-decoration: none;
cursor: pointer;
/* Color types
* ========================================================================== */
/* Icons
* ========================================================================== */ }
.button:focus {
outline: none; }
.button.stroked.white {
border: 2px solid #fff;
color: #fff; }
.button.stroked.white:hover {
border-color: #1b71dd;
color: #fff;
background: #1b71dd; }
.button.stroked.blue {
border: 2px solid #1b71dd;
color: #1b71dd; }
.button.stroked.blue:hover {
border-color: #fff;
color: #fff;
background: #1b71dd; }
.button.blue {
background-color: #396EC2;
color: #fff;
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1); }
.button.blue:hover {
border-color: #fff;
color: #fff;
background: #1b71dd; }
.button.stroked.light-blue {
border: 2px solid #80d6ff;
color: #80d6ff; }
.button.stroked.light-blue:hover {
border-color: #fff;
color: #fff; }
.button.orangeGrad {
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%);
color: #fff; }
.button.like {
padding-left: 52px; }
.button.like:before {
position: absolute;
top: 14px;
left: 14px;
width: 25px;
height: 24px;
content: "";
background: url("/img/svg/sprites.svg") -45px -60px no-repeat;
background-size: 423px 139px;
width: auto;
height: auto; }
.button.arrow {
padding-right: 52px; }
.button.arrow:after {
content: "";
position: absolute;
right: 10%;
top: 1px;
width: 14px;
height: 100%;
background-position: 0px center;
background-size: 500%;
background-repeat: no-repeat;
background-image: url("/img/svg/button_arrow.svg"); }
.call-to-action-contact {
color: white;
position: relative;
padding-bottom: 8%; }
.call-to-action-contact:after {
content: "";
opacity: 0.5;
top: -33%;
left: 0;
bottom: 0;
right: 0;
width: 108%;
position: absolute;
z-index: -2;
background: white url("/img/clouds_bg.jpg") no-repeat;
-moz-transform: scaleX(-1) scaleY(-1);
-o-transform: scaleX(-1) scaleY(-1);
-webkit-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1);
filter: "FlipH";
-ms-filter: "FlipH"; }
.call-to-action-contact .grid-row {
position: relative; }
.call-to-action-contact .grid-row .cta-text {
background: linear-gradient(90deg, #ff8f00 0%, #ff6f00 100%);
padding: 11% 0 9.5% 16.7857142857%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
.call-to-action-contact .grid-row .round-portrait {
width: 19vw;
height: 19vw;
max-width: 250px;
max-height: 250px;
border-radius: 50%;
position: absolute;
left: 40.5%;
top: 30%;
overflow: hidden;
z-index: 10; }
.call-to-action-contact .grid-row .round-portrait figure {
height: 100%;
background-size: cover;
background-position: center center; }
.call-to-action-contact h2 {
color: white;
font-style: italic;
font-size: 24px;
line-height: 30px;
letter-spacing: -0.24px;
margin-bottom: 24px; }
.call-to-action-contact h4 {
font-size: 18px;
line-height: 24px;
font-weight: normal; }
.call-to-action-contact .cta-imgHolder {
padding-top: 11%;
display: block;
float: left; }
.call-to-action-contact .cta-imgHolder img {
width: 67%;
height: 300px;
float: right; }
.call-to-action-contact .phone, .call-to-action-contact .mail {
height: 75px;
display: block;
color: white;
text-decoration: none; }
.call-to-action-contact .phone img, .call-to-action-contact .mail img {
height: 100%;
float: left;
margin: 0 0 0 -7px;
transform: scale3d(1, 1, 1);
transform-origin: 50%;
transition: transform 0.3s; }
.call-to-action-contact .phone:hover img, .call-to-action-contact .mail:hover img {
transform: scale3d(0.8, 0.8, 1); }
.call-to-action-contact .phone span, .call-to-action-contact .mail span {
display: block;
padding: 4%;
font-size: 20px;
line-height: 22px;
letter-spacing: -0.4px; }
.call-to-action-contact .hexagon-frame {
height: 100%;
width: 100%;
position: absolute;
top: 0;
overflow: hidden;
z-index: -1; }
.call-to-action-contact .hexagon-frame .big-hexagon-holder {
left: 27.5%;
position: relative;
top: 34%; }
.call-to-action-contact .hexagon-frame .big-hexagon-holder svg {
-webkit-animation: spin5 360s linear infinite;
animation: spin5 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin5 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.5);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.5);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.5);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.5);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.5);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.5); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); } }
body.home .call-to-action-contact:after {
width: 100%; }
@media screen and (max-width: 1500px) {
.call-to-action-contact .grid-row .round-portrait {
left: 39.5%; } }
@media screen and (max-width: 1025px) {
.call-to-action-contact .phone img, .call-to-action-contact .mail img {
height: 70%; }
.call-to-action-contact .grid-row .cta-text {
padding: 11% 0 9.5% 14.2857142857%; }
.call-to-action-contact .grid-row .round-portrait {
left: 39.5%; } }
@media screen and (max-width: 840px) {
.call-to-action-contact .phone img, .call-to-action-contact .mail img {
height: 65%; }
.call-to-action-contact .phone span, .call-to-action-contact .mail span {
font-size: 16px; }
.call-to-action-contact .grid-row .cta-text {
padding: 11% 0 9.5% 10.7142857143%; }
.call-to-action-contact .grid-row .round-portrait {
width: 16.86%;
height: 26.3%;
border-radius: 50%;
position: absolute;
left: 41.5%;
top: 28%; } }
@media screen and (max-width: 760px) {
.call-to-action-contact:after {
top: -50%; }
.call-to-action-contact h2, .call-to-action-contact h4 {
padding-left: 25px; }
.call-to-action-contact .grid-row .cta-imgHolder {
display: none; }
.call-to-action-contact .grid-row .cta-text {
padding: 11% 0 9.5% 14.2857142857%;
width: 85%;
margin: 5% 0 0 18%; }
.call-to-action-contact .grid-row .round-portrait {
width: 25vw;
height: 25vw;
border-radius: 50%;
position: absolute;
left: 3%;
top: 13%; } }
.uit-je-dak {
background: linear-gradient(-90deg, #ff8f00 50%, #ff6f00 100%);
position: relative;
overflow: hidden;
font-size: 1em;
line-height: 1.6em;
height: 28.57vw;
max-height: 550px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); }
.uit-je-dak .textholder {
vertical-align: top;
letter-spacing: 0.2px;
margin-left: 13.9285714286%; }
.uit-je-dak .textholder h1 {
margin: 21% 0 10% 0;
font-style: italic;
font-size: 40px;
line-height: 54px;
letter-spacing: -0.3px;
color: white; }
.uit-je-dak .imgholder {
width: 50%;
margin-left: 7.1428571429%;
vertical-align: bottom;
background-size: cover;
height: 28.57vw;
max-height: 550px;
position: absolute; }
@media screen and (max-width: 1025px) {
.uit-je-dak .textholder h1 {
margin-top: 20%;
font-size: 30px;
line-height: 42px; } }
@media screen and (max-width: 760px) {
.uit-je-dak {
height: auto;
padding: 10%; }
.uit-je-dak .textholder {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
.uit-je-dak .textholder h1 {
margin: 10% 0; }
.uit-je-dak .textholder h2 p {
font-size: 28px;
line-height: 40px; }
.uit-je-dak .textholder a.button {
font-size: 22px;
line-height: 40px; }
.uit-je-dak .imgholder {
display: none; } }
.diensten-menu .grid-col {
vertical-align: top;
display: flex;
flex-direction: column;
flex-flow: wrap;
width: 100%; }
.diensten-menu .grid-col a {
flex-basis: 100%;
flex-grow: 0;
width: 100%;
font-family: "Lato", sans-serif;
font-size: 24px;
line-height: 100px;
letter-spacing: -0.01px;
font-weight: bold;
height: 100px;
margin-bottom: 70px;
border: none;
background: none;
text-align: left;
color: #424242;
transition: color 0.25s ease-in-out 0.2s; }
.diensten-menu .grid-col a.active {
color: #ff8f00; }
.diensten-menu .grid-col a.active.arrow:after {
background-position: -84px center; }
.diensten-menu .grid-col a.dakrenovatie > svg .cls-2 {
stroke-width: 5.38px; }
.diensten-menu .grid-col a:before {
content: "";
margin: 0 25% 0 2.5%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-spec-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.diensten-menu .grid-col a.arrow:after {
right: 8%;
background-position: -40px center;
background-size: 700%; }
.diensten-menu .grid-col a svg {
width: 48px;
position: absolute;
top: 0;
left: 27px;
height: 100%; }
.diensten-menu .grid-col a svg .cls-1, .diensten-menu .grid-col a svg .cls-2 {
fill: none;
stroke-miterlimit: 10; }
.diensten-menu .grid-col a svg .cls-1 {
stroke: #fff; }
.diensten-menu .grid-col a svg .cls-2 {
stroke: #ff8f00; }
.diensten-menu .grid-col a.na-isolatie > svg .cls-1 {
stroke: #ff8f00; }
.diensten-menu .grid-col a.na-isolatie > svg .cls-2 {
stroke: #fff; }
.diensten-menu .grid-col a.na-isolatie:hover > svg .cls-1 {
stroke: #424242; }
.diensten-menu .grid-col a.na-isolatie:hover > svg .cls-2 {
stroke: #fff; }
.diensten-menu .grid-col a .bg {
background: #424242;
width: 100px;
height: 100px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
z-index: -1;
transition: background 0.25s ease-in-out, width 0.25s ease-in-out 0s; }
.diensten-menu .grid-col a:hover {
color: white;
transition: color 0.25s ease-in-out 0s; }
.diensten-menu .grid-col a:hover.arrow:after {
background-position: 0px center;
right: 7%; }
.diensten-menu .grid-col a:hover .bg {
background: #ff6f00 linear-gradient(90deg, #ff8f00 0%, #ff6f00 100%);
width: 100%;
transition: background 0.25s ease-in-out, width 0.25s ease-in-out 0s; }
.diensten-menu .grid-col a:hover svg .cls-2 {
stroke: #424242; }
@media screen and (max-width: 426px) {
.diensten-menu .grid-col a {
height: 80px; }
.diensten-menu .grid-col a .bg {
width: 80px;
height: 80px; }
.diensten-menu .grid-col a svg {
width: 42px;
top: 5%;
left: 21px; } }
/*==========================================================================
* Home page
* ========================================================================== */
.home {
/* Mobile view
* ========================================================================== */ }
/*==========================================================================
* Main page
* ========================================================================== */
.page {
/* Mobile view
* ========================================================================== */ }
.projects-overview:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: white url("/img/clouds_bg.jpg") no-repeat; }
.projects-overview .breadcrumb {
margin: 108px 0 0 4.1666666667%; }
.projects-overview .overview-placeholder {
padding: 75px 4.2857142857% 0 4.2857142857%; }
.projects-overview .overview-placeholder h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -0.2px;
font-style: italic;
margin-top: 0;
vertical-align: top;
color: #424242; }
.projects-overview .overview-header {
vertical-align: top; }
.projects-overview .overview-header .pagination {
text-align: right; }
.projects-overview .pagination {
text-align: center; }
.projects-overview .pagination li {
color: #616161;
border-left: solid 1px #616161;
padding-left: 10px; }
.projects-overview .pagination li:first-child {
border-left: none; }
.projects-overview .pagination li.active {
color: #ff8f00;
font-weight: bold; }
.projects-overview .pagination li a {
color: #616161; }
.projects-overview .categorie-holder {
width: 46.4285714286%;
margin-left: 6.0714285714%;
max-width: 600px; }
.projects-overview .categorie-holder .categories {
line-height: 0.9rem;
display: flex;
justify-content: space-between;
background-color: #424242;
padding: 10px 20px 0 20px;
height: 50px;
list-style: none;
border-radius: 10px;
font-weight: bold;
font-size: 20px;
color: white;
margin: 0;
margin-bottom: 16px; }
.projects-overview .categorie-holder .categories li input[type="checkbox"] {
display: none; }
.projects-overview .categorie-holder .categories li input[type="checkbox"] + label {
cursor: pointer;
line-height: 1.4em;
color: #d0d0d0; }
.projects-overview .categorie-holder .categories li input[type="checkbox"] + label:hover {
color: white; }
.projects-overview .categorie-holder .categories li input[type="checkbox"] + label span {
display: inline-block;
width: 40px;
height: 30px;
vertical-align: middle;
background: url(../../img/svg/checkboxes.svg) -30px top no-repeat;
background-size: 160%;
position: relative;
right: 10px;
top: -2px; }
.projects-overview .categorie-holder .categories li input[type="checkbox"]:checked + label span {
display: inline-block;
width: 40px;
height: 30px;
vertical-align: middle;
background: url(../../img/svg/checkboxes.svg) 6px top no-repeat;
background-size: 160%;
position: relative;
right: 12px;
top: -2px; }
.projects-overview .categorie-holder .categories li:first-child {
font-style: italic;
font-weight: normal;
color: #a0a0a0;
line-height: 1.4em; }
.projects-overview .articles {
padding: 80px 4.2857142857% 0 4.2857142857%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; }
.projects-overview .articles article {
margin-bottom: 3.5%;
text-align: center; }
.projects-overview .articles article a {
text-decoration: none; }
.projects-overview .articles article a figure {
background-color: #EEEEEE;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 105%;
position: relative;
overflow: hidden; }
.projects-overview .articles article a figure .overlay:before {
content: ">";
width: 7px;
height: 40px;
display: block;
color: white;
position: absolute;
right: 5%;
bottom: 0;
text-align: right;
z-index: 1;
font-size: 26px;
font-weight: bold;
transform: scale(0.6, 1); }
.projects-overview .articles article a figure:after {
content: "";
display: block;
width: 0;
height: 0;
bottom: -80%;
position: absolute;
border-top: 500px solid transparent;
border-right: 475px solid #ff8f00;
transition: bottom 0.25s ease-in-out; }
.projects-overview .articles article a:hover figure:before {
content: "Meer informatie";
width: 170px;
height: 50px;
display: block;
position: absolute;
bottom: -10px;
right: 40px;
z-index: 1;
color: white;
opacity: 1;
font-size: 18px;
font-weight: bold; }
.projects-overview .articles article a:hover figure:after {
bottom: 0; }
.projects-overview .articles article a:hover figure .overlay:before {
width: 25px;
height: 46px; }
.projects-overview .articles article a .content {
padding-top: 5px; }
.projects-overview .articles article a .content h3 {
font-size: 18px;
line-height: 28px;
color: #424242; }
.projects-overview .bottom-categories {
margin-top: 50px;
text-align: center; }
.projects-overview .bottom-categories .categorie-holder {
width: 43.9285714286%;
margin: 0; }
.projects-overview .referencesLink {
width: 100%;
font-size: 18px;
line-height: 28px;
text-align: center;
margin: 74px 0 50px 0; }
.projects-overview .referencesLink:after {
content: "-";
color: #ff6f00;
font-weight: bold;
display: block;
margin: 18px;
font-size: 32px; }
.projects-overview .referencesLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
.projects-overview .referencesLink a:hover {
color: #ff6f00;
border-bottom-color: #ff6f00; }
.projects-overview .project-referenties {
background-color: #ff6f00;
height: 28.57vw;
max-height: 550px;
position: relative;
z-index: 1;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }
.projects-overview .project-referenties .references-text {
margin-left: 13.5714285714%;
max-width: 25%;
vertical-align: top;
padding-top: 6.5%; }
.projects-overview .project-referenties h2 {
color: white;
font-style: italic;
font-size: 32px;
margin-bottom: 30px;
line-height: 42px; }
.projects-overview .project-referenties h2 p {
color: white;
font-style: italic;
font-size: 32px;
margin-bottom: 30px;
line-height: 42px; }
.projects-overview .project-referenties a {
font-size: 18px;
line-height: 28px;
letter-spacing: -0.36px;
padding-top: 12px; }
.projects-overview .project-referenties .references-imgHolder {
margin-left: 11.4285714286%; }
.projects-overview .project-referenties .references-imgHolder figure {
display: block;
width: 100%;
height: 28.58vw;
max-height: 550px;
margin: 0;
background-repeat: no-repeat;
background-size: cover; }
body.IE .projects-overview .categorie-holder .categories li input[type="checkbox"] + label span {
background-position: -42px -18px; }
body.IE .projects-overview .categorie-holder .categories li input[type="checkbox"]:checked + label span {
background-position: left -18px; }
@media screen and (max-width: 1450px) {
.projects-overview .categorie-holder .categories {
font-size: 20px; }
.projects-overview .categorie-holder .categories li input[type="checkbox"] + label span {
width: 35px;
height: 33px;
margin: -3px 8px -8px 0;
background: url(../../img/svg/checkboxes.svg) -30px top no-repeat;
background-size: 175%;
right: 0; }
.projects-overview .categorie-holder .categories li input[type="checkbox"]:checked + label span {
width: 35px;
height: 33px;
margin: -9px 0px -14px 0;
background: url(../../img/svg/checkboxes.svg) 3px top no-repeat;
background-size: 175%;
right: 8px; } }
@media screen and (max-width: 1130px) {
.projects-overview .categorie-holder .categories {
font-size: 16px;
padding: 14px 20px 0 20px; }
.projects-overview .categorie-holder .categories li input[type="checkbox"] + label span {
width: 30px;
height: 28px;
margin: 0px 0px -8px 0;
background: url(../../img/svg/checkboxes.svg) -24px top no-repeat;
background-size: 150%;
right: 0; }
.projects-overview .categorie-holder .categories li input[type="checkbox"]:checked + label span {
width: 30px;
height: 28px;
margin: -6px 0px -14px 0;
background: url(../../img/svg/checkboxes.svg) 9px top no-repeat;
background-size: 150%;
right: 10px; }
.projects-overview .project-referenties .references-text {
padding-top: 4.5%; }
.projects-overview .project-referenties .references-text h2 {
font-size: 22px;
margin-bottom: 30px;
line-height: 36px; }
.projects-overview .project-referenties .references-text a.button {
padding-top: 8px;
min-width: 180px;
height: 45px; } }
@media screen and (max-width: 900px) {
.projects-overview .breadcrumb {
margin-top: 40px; }
.projects-overview .categorie-holder {
width: 57.1428571429%; }
.projects-overview .bottom-categories .categorie-holder {
width: 57.1428571429%; }
.projects-overview .project-referenties .references-text {
padding-top: 2%; }
.projects-overview .articles article {
width: 45%; } }
@media screen and (max-width: 760px) {
.projects-overview .overview-placeholder {
padding-top: 20px; }
.projects-overview .overview-header h1 {
margin-bottom: 20px; }
.projects-overview .overview-header .categorie-holder {
width: 105%; }
.projects-overview .overview-header .categorie-holder ul.categories li:first-child {
display: none; }
.projects-overview .overview-header .pagination {
text-align: center; }
.projects-overview .articles {
padding-top: 30px;
padding-bottom: 30px; }
.projects-overview .articles article a figure:after, .projects-overview .articles article a:hover figure:after {
display: none; }
.projects-overview .articles article a figure .overlay, .projects-overview .articles article a:hover figure .overlay {
display: none; }
.projects-overview .articles article a figure:before, .projects-overview .articles article a:hover figure:before {
display: none; }
.projects-overview .bottom-categories .categorie-holder {
width: 100%; }
.projects-overview .bottom-categories .categorie-holder ul.categories li:first-child {
display: none; }
.projects-overview .project-referenties {
height: auto;
padding: 10%; }
.projects-overview .project-referenties .references-text {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
.projects-overview .project-referenties .references-text h2 {
font-size: 28px;
line-height: 40px; }
.projects-overview .project-referenties .references-text a.button {
font-size: 22px;
line-height: 24px; }
.projects-overview .project-referenties .references-imgHolder {
display: none; } }
@media screen and (max-width: 500px) {
.projects-overview .articles article {
width: 100%; } }
@media screen and (max-width: 435px) {
.projects-overview > .grid-row {
width: 100%; }
.projects-overview .overview-header .categorie-holder {
width: 110%;
float: none;
margin-left: -5%; }
.projects-overview .overview-header .categorie-holder ul {
border-radius: 0; }
.projects-overview .bottom-categories {
margin-top: 0; }
.projects-overview .categorie-holder .categories {
border-radius: 0;
margin-bottom: 0; }
.projects-overview .referencesLink {
display: none; } }
/*==========================================================================
* News detail page
* ========================================================================== */
.news-detail:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: white url("/img/clouds_bg.jpg") no-repeat; }
.news-detail .breadcrumb {
margin: 56px 0 0 0; }
.news-detail h1 {
font-size: 42px;
font-style: italic; }
.news-detail .content-placeholder .grid-row .grid-col {
vertical-align: top; }
.news-detail .content-placeholder .top {
padding-top: 50px; }
.news-detail .content-placeholder .top p {
padding-top: 32px;
font-size: 26px;
line-height: 38px;
color: #616161; }
.news-detail .content-placeholder .top h1 {
margin: 42px 0 34px 0;
color: #424242; }
.news-detail .content-placeholder .top a.back-to-projects {
text-decoration: none;
font-size: 16.5px;
color: #424242;
opacity: 0.33; }
.news-detail .content-placeholder .top a.back-to-projects:hover {
opacity: 0.8; }
.news-detail .content-placeholder .top a.back-to-projects:hover .icon-grid-view {
opacity: 0.8; }
.news-detail .content-placeholder .top a.back-to-projects .icon-grid-view {
background: url(/img/svg/icon-grid-view.svg);
width: 16px;
height: 16px;
display: block;
float: left;
margin: 9px 10px 0 0;
opacity: 0.4; }
.news-detail .content-placeholder .main {
padding-top: 75px; }
.news-detail .content-placeholder .main .images {
overflow: visible; }
.news-detail .content-placeholder .main .images figure {
position: relative;
width: 100%;
padding-bottom: 75%;
margin-bottom: 60px;
background-color: #EEEEEE;
z-index: 1; }
.news-detail .content-placeholder .main .images figure:hover {
cursor: pointer; }
.news-detail .content-placeholder .main .images figure:hover:after {
content: "+";
display: block;
width: 50px;
position: absolute;
left: 47%;
top: 45%;
background-color: rgba(255, 111, 0, 0.8);
padding: 10px 0;
text-align: center;
color: white;
font-weight: bold; }
.news-detail .content-placeholder .main .images figure.img-0 {
padding-bottom: 42%; }
.news-detail .content-placeholder .main .images figure.img-1 {
width: 43%;
padding-bottom: 45%;
float: left; }
.news-detail .content-placeholder .main .images figure.img-2 {
width: 48.5%;
padding-bottom: 51.5%;
float: right;
margin-bottom: 75px; }
.news-detail .content-placeholder .main .images figure span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center; }
.news-detail .content-placeholder .main .images figure span.medium {
display: none; }
.news-detail .content-placeholder .main .big-hexagon-holder {
position: absolute;
top: 14%;
left: 9%;
z-index: 0;
-webkit-animation: spin11 360s linear infinite;
animation: spin11 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin11 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.8);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.8);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.8);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.8);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.8);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.8); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8); } }
.news-detail .content-placeholder .main .description h2 {
font-size: 32px;
line-height: 32px;
margin-bottom: 38px;
color: #424242; }
.news-detail .content-placeholder .main .description table {
border-spacing: 0;
width: 100%;
border-collapse: collapse;
color: #616161; }
.news-detail .content-placeholder .main .description table tr {
width: 100%;
border-bottom: solid 1px; }
.news-detail .content-placeholder .main .description table tr td {
height: 52px;
font-size: 22px; }
.news-detail .content-placeholder .main .description table tr td:first-child {
width: 34%;
font-weight: bold; }
.news-detail .content-placeholder .main .description table tr td:last-child {
color: #ff8f00; }
.news-detail .content-placeholder .main .description p {
letter-spacing: 0.1px;
color: #ff8f00; }
.news-detail .content-placeholder .main .description p b {
font-size: 22px;
color: #616161; }
.news-detail .content-placeholder .main .description .offerte-button {
margin-top: 28px; }
.news-detail .content-placeholder .bottom .reference-linkholder {
text-align: center;
margin: 0 0 32px 0;
font-size: 0.96rem; }
.news-detail .content-placeholder .bottom .reference-linkholder a {
padding-bottom: 1px;
border-bottom: solid 1px;
text-decoration: none;
color: #616161; }
.news-detail .content-placeholder .bottom .reference-linkholder .yellowline {
width: 10px;
height: 10px;
margin: 20px 0;
display: inline-block;
border-bottom: solid 2px #ff8f00; }
.news-detail .content-placeholder .nearby-projects {
background-color: #424242;
padding-top: 70px;
height: 400px;
margin-bottom: 300px; }
.news-detail .content-placeholder .nearby-projects h1, .news-detail .content-placeholder .nearby-projects h3 {
color: white;
text-align: center;
letter-spacing: -1.8px; }
.news-detail .content-placeholder .nearby-projects h3 {
letter-spacing: 0px;
font-size: 27px;
margin: -7px 0 70px 0; }
.news-detail .content-placeholder .nearby-projects .grid-col {
text-align: center; }
.news-detail .content-placeholder .nearby-projects .grid-col article {
margin: 0 3.5%;
text-align: center; }
.news-detail .content-placeholder .nearby-projects .grid-col article a {
text-decoration: none; }
.news-detail .content-placeholder .nearby-projects .grid-col article a figure {
background-color: #EEEEEE;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 105%;
position: relative;
overflow: hidden; }
.news-detail .content-placeholder .nearby-projects .grid-col article a figure .overlay:before {
content: ">";
width: 7px;
height: 40px;
display: block;
color: white;
position: absolute;
right: 5%;
bottom: 0;
text-align: right;
z-index: 1;
font-size: 26px;
font-weight: bold;
transform: scale(0.6, 1); }
.news-detail .content-placeholder .nearby-projects .grid-col article a figure:after {
content: "";
display: block;
width: 0;
height: 0;
bottom: -70%;
position: absolute;
border-top: 500px solid transparent;
border-right: 475px solid #ff8f00;
transition: bottom 0.25s ease-in-out; }
.news-detail .content-placeholder .nearby-projects .grid-col article a:hover figure:before {
content: "Meer informatie";
width: 170px;
height: 50px;
display: block;
position: absolute;
bottom: -10px;
right: 40px;
z-index: 1;
color: white;
opacity: 1;
font-size: 18px;
font-weight: bold; }
.news-detail .content-placeholder .nearby-projects .grid-col article a:hover figure:after {
bottom: 0; }
.news-detail .content-placeholder .nearby-projects .grid-col article a:hover figure .overlay:before {
width: 25px;
height: 46px; }
.news-detail .content-placeholder .nearby-projects .grid-col article .content {
padding-top: 25px; }
.news-detail .content-placeholder .home-referenties {
background-color: #ff6f00;
height: auto;
position: relative;
z-index: 1;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }
.news-detail .content-placeholder .home-referenties .references-text {
margin-left: 13.5714285714%;
max-width: 25%;
vertical-align: top;
padding-top: 4.5%; }
.news-detail .content-placeholder .home-referenties h2 {
color: white;
font-style: italic;
font-size: 32px;
margin-bottom: 30px;
line-height: 42px; }
.news-detail .content-placeholder .home-referenties h2 p {
color: white;
font-style: italic;
font-size: 32px;
margin-bottom: 30px;
line-height: 42px; }
.news-detail .content-placeholder .home-referenties a {
font-size: 18px;
line-height: 28px;
letter-spacing: -0.36px;
padding-top: 12px; }
.news-detail .content-placeholder .home-referenties .references-imgHolder {
margin-left: 11.4285714286%; }
.news-detail .content-placeholder .home-referenties .references-imgHolder figure {
display: block;
width: 100%;
height: 0;
padding-bottom: 47%;
padding-top: 10%;
margin: 0;
background-repeat: no-repeat;
background-size: cover; }
.news-detail .image-slider {
display: none;
position: fixed;
z-index: 15;
width: 100%;
height: 100%;
top: 0;
left: 0; }
.news-detail .image-slider .slider-bg {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5); }
.news-detail .image-slider .image-holder {
position: relative;
top: 10%;
margin: 0 auto;
width: 80%;
overflow: visible;
padding: 40px 150px;
background-color: #424242; }
.news-detail .image-slider .image-holder .close-button {
font-weight: bold;
font-size: 36px;
color: white;
position: absolute;
top: 2%;
right: 3%;
cursor: pointer; }
.news-detail .image-slider .image-holder figure {
position: relative;
width: 100%;
padding-bottom: 60%;
left: 0.5%;
background-color: #616161; }
.news-detail .image-slider .image-holder figure .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: opacity 0.4s; }
.news-detail .image-slider .image-holder figure .image.active {
opacity: 1;
z-index: 2; }
.news-detail .image-slider .image-holder figure .image span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center; }
.news-detail .image-slider .image-holder figure .image span.medium {
display: none; }
.news-detail .image-slider .image-holder .image-slider-nav {
height: 65%;
position: absolute;
display: block;
width: 100%;
left: 0;
bottom: 0; }
.news-detail .image-slider .image-holder .image-slider-nav .nav-button {
height: 50px;
width: 50px;
cursor: pointer;
position: absolute;
font-size: 5vw;
transform: scaleY(1.9);
font-weight: 100;
color: darkorange; }
.news-detail .image-slider .image-holder .image-slider-nav .nav-button.previous {
left: 3%; }
.news-detail .image-slider .image-holder .image-slider-nav .nav-button.next {
right: 3%; }
@media screen and (max-width: 1025px) {
.news-detail .content-placeholder .main .images figure.img-2 {
top: -32%; }
.news-detail .content-placeholder .bottom .reference-linkholder {
margin: -90px 0 72px; }
.news-detail .content-placeholder .nearby-projects {
margin-bottom: 250px; }
.news-detail .content-placeholder .home-referenties h2 p {
font-size: 22px;
margin-bottom: 30px;
line-height: 36px; }
.news-detail .content-placeholder .home-referenties .references-text {
padding-top: 3.5%; }
.news-detail .content-placeholder .home-referenties a {
padding-top: 0; }
.news-detail .content-placeholder a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; } }
@media screen and (max-width: 840px) {
.news-detail .content-placeholder .top {
padding-top: 0; }
.news-detail .content-placeholder .top .grid-col {
width: 100%;
margin-left: 0; }
.news-detail .content-placeholder .top .grid-col p {
font-size: 20px; }
.news-detail .content-placeholder .main .images {
width: 100%;
height: auto; }
.news-detail .content-placeholder .main .images figure {
cursor: default;
pointer-events: none; }
.news-detail .content-placeholder .main .images figure.img-1, .news-detail .content-placeholder .main .images figure.img-2 {
padding-bottom: 50%; }
.news-detail .content-placeholder .main .images figure.img-2 {
top: 0; }
.news-detail .content-placeholder .main .images .big-hexagon-holder {
display: none; }
.news-detail .content-placeholder .main .description {
width: 90%;
margin-left: 0; }
.news-detail .content-placeholder .main .description h2 {
font-size: 28px; }
.news-detail .content-placeholder .main .description table tr td {
font-size: 16px; }
.news-detail .content-placeholder .main .description table tr td:first-child {
width: 50%; }
.news-detail .content-placeholder .main .description p {
font-size: 16px; }
.news-detail .content-placeholder .main .description p b {
font-size: 16px; }
.news-detail .content-placeholder .bottom .reference-linkholder {
margin: 73px 0 36px;
font-size: 1rem; }
.news-detail .content-placeholder .nearby-projects {
margin-bottom: 150px; }
.news-detail .home-referenties .references-text {
padding-top: 0; }
.news-detail .home-referenties a {
padding-top: 0; }
.news-detail .content-placeholder a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; } }
@media screen and (max-width: 760px) {
.news-detail .content-placeholder .home-referenties {
height: auto;
padding: 10%; }
.news-detail .content-placeholder .home-referenties .references-text {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
.news-detail .content-placeholder .home-referenties .references-text h2 p {
font-size: 28px;
line-height: 40px; }
.news-detail .content-placeholder .home-referenties .references-text a.button {
font-size: 22px; }
.news-detail .content-placeholder .home-referenties .references-imgHolder {
display: none; } }
@media screen and (max-width: 550px) {
.news-detail .content-placeholder .nearby-projects {
height: auto;
margin-bottom: 0; }
.news-detail .content-placeholder .nearby-projects .grid-col article {
width: 60%;
margin-bottom: 30px; } }
@media screen and (max-width: 435px) {
.news-detail .content-placeholder .top h1 {
margin: 0; }
.news-detail .content-placeholder .top p {
padding-top: 0; }
.news-detail .content-placeholder .top .offset-1 {
margin-left: 0; }
.news-detail .content-placeholder .top .grid-col {
width: 100%; }
.news-detail .content-placeholder .top .grid-col p {
font-size: 16px;
line-height: 24px; }
.news-detail .content-placeholder .main {
padding-top: 0; }
.news-detail .content-placeholder .main .images {
margin-bottom: 30px; }
.news-detail .content-placeholder .main .images figure.img-0,
.news-detail .content-placeholder .main .images figure.img-1,
.news-detail .content-placeholder .main .images figure.img-2 {
width: 100%;
margin-bottom: 10px;
float: none; }
.news-detail .content-placeholder .main p {
font-size: 16px;
line-height: 24px; }
.news-detail .content-placeholder .main .description {
padding-bottom: 30px; }
.news-detail .content-placeholder .bottom {
display: none; }
.news-detail .content-placeholder .nearby-projects {
margin-bottom: 0; }
.news-detail .content-placeholder .nearby-projects h1 {
font-size: 28px;
line-height: 42px;
padding: 0 10% 5%; }
.news-detail .content-placeholder .nearby-projects h3 {
margin: -7px 0 50px 0; }
.news-detail .content-placeholder .nearby-projects .grid-col article {
width: 75%; }
.news-detail .content-placeholder .home-referenties {
height: auto;
padding: 10%; }
.news-detail .content-placeholder .home-referenties .references-text {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
.news-detail .content-placeholder .home-referenties .references-text h2 p {
font-size: 28px;
line-height: 40px; }
.news-detail .content-placeholder .home-referenties .references-text a.button {
font-size: 22px;
line-height: 24px;
padding-top: 6px; }
.news-detail .content-placeholder .home-referenties .references-imgHolder {
display: none; } }
/*==========================================================================
* Contact page
* ========================================================================== */
.contact-content {
overflow: hidden; }
.contact-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -5;
background: white url("/img/clouds_bg.jpg") no-repeat; }
.contact-content .grid-row .grid-col {
vertical-align: top; }
.contact-content .breadcrumb {
margin: 88px 0 0 0; }
.contact-content .intro {
padding-top: 70px;
padding-bottom: 80px;
border-bottom: solid 1px rgba(0, 0, 0, 0.1); }
.contact-content .intro h1, .contact-content .intro h2 {
font-style: italic;
color: #424242; }
.contact-content .intro h1 {
font-size: 40px;
line-height: 50px;
letter-spacing: -0.2px;
margin: 27px 0 55px 0; }
.contact-content .intro h2 {
font-size: 24px; }
.contact-content .intro h3 {
font-size: 24px;
color: #ff8f00;
font-style: italic; }
.contact-content .intro p {
font-size: 24px;
line-height: 34px;
color: #616161; }
.contact-content .intro .right {
margin-left: 19.2857142857%;
overflow: visible; }
.contact-content .intro .right .grid-col {
overflow: visible;
padding-bottom: 100%; }
.contact-content .intro .right .grid-col h2, .contact-content .intro .right .grid-col h3 {
font-size: 24px;
line-height: 30px;
letter-spacing: -0.24px; }
.contact-content .intro .right .grid-col .round-portrait {
width: 150%;
height: 65%;
border-radius: 50%;
position: absolute;
left: -50%;
top: -10%;
overflow: hidden;
z-index: 10;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); }
.contact-content .intro .right .grid-col .round-portrait figure {
height: 100%;
background-size: cover;
background-position: center center; }
.contact-content .intro .right .grid-col .scroll-hinter {
top: 132%;
left: 28%;
width: 33%;
height: 0; }
.contact-content .intro .right .grid-col .scroll-hinter .icon {
top: 0; }
.contact-content .intro .right .grid-col .scroll-hinter .icon .mouse-body,
.contact-content .intro .right .grid-col .scroll-hinter .icon .mouse-wheel,
.contact-content .intro .right .grid-col .scroll-hinter .icon .arrow {
fill: #E0E0E0; }
.contact-content .formholder {
padding-bottom: 30px;
position: relative;
clear: both; }
.contact-content .formholder .letterholder .footerletter {
color: #ff8f00;
font-weight: bold;
margin-right: 5px;
width: 40px;
display: inline-block; }
.contact-content .formholder .letterholder a {
text-decoration: none;
color: #424242; }
.contact-content .formholder .letterholder a:hover {
color: #616161; }
.contact-content .formholder .form, .contact-content .formholder h2 {
max-width: 100%;
padding-top: 75px; }
.contact-content .formholder .form label, .contact-content .formholder h2 label {
font-size: 10px;
line-height: 30px;
text-transform: uppercase;
color: #757575;
top: 0;
position: absolute;
margin: -30px 0 0 0; }
.contact-content .formholder .form div.first_name, .contact-content .formholder .form div.last_name,
.contact-content .formholder .form div.email, .contact-content .formholder .form div.phone, .contact-content .formholder h2 div.first_name, .contact-content .formholder h2 div.last_name,
.contact-content .formholder h2 div.email, .contact-content .formholder h2 div.phone {
width: 48%; }
.contact-content .formholder .form div.extra_message, .contact-content .formholder h2 div.extra_message {
clear: both; }
.contact-content .formholder .form .form-element, .contact-content .formholder h2 .form-element {
margin-bottom: 72px;
position: relative; }
.contact-content .formholder .form .form-element input, .contact-content .formholder .form .form-element textarea, .contact-content .formholder h2 .form-element input, .contact-content .formholder h2 .form-element textarea {
border: none;
background-color: #EEEEEE;
border-left: solid 10px #CCCCCC; }
.contact-content .formholder .form .form-element input:focus, .contact-content .formholder .form .form-element textarea:focus, .contact-content .formholder h2 .form-element input:focus, .contact-content .formholder h2 .form-element textarea:focus {
border-left: solid 10px #ff8f00; }
.contact-content .formholder .form .form-element input:focus + label, .contact-content .formholder .form .form-element textarea:focus + label, .contact-content .formholder h2 .form-element input:focus + label, .contact-content .formholder h2 .form-element textarea:focus + label {
color: #ff8f00; }
.contact-content .formholder .form .form-element input.alert, .contact-content .formholder .form .form-element textarea.alert, .contact-content .formholder h2 .form-element input.alert, .contact-content .formholder h2 .form-element textarea.alert {
border-left: solid 10px #EF5350; }
.contact-content .formholder .form .form-element input, .contact-content .formholder h2 .form-element input {
height: 55px; }
.contact-content .formholder .form .form-element textarea, .contact-content .formholder h2 .form-element textarea {
height: 275px; }
.contact-content .formholder .form .submit, .contact-content .formholder h2 .submit {
border-radius: 11px;
max-width: 250px;
font-size: 18px;
line-height: 28px;
letter-spacing: -0.36px; }
.contact-content .formholder .form .submit p, .contact-content .formholder h2 .submit p {
position: relative;
padding: 15px 18px; }
.contact-content .formholder .form .submit p:after, .contact-content .formholder h2 .submit p:after {
position: absolute;
right: 10%;
top: 17%;
width: 14px;
font-weight: bold;
font-size: 31px;
content: ">";
-webkit-transform: scale(0.6, 1);
-moz-transform: scale(0.6, 1);
-ms-transform: scale(0.6, 1);
-o-transform: scale(0.6, 1);
-spec-transform: scale(0.6, 1);
transform: scale(0.6, 1); }
.contact-content .formholder .big-hexagon-holder {
position: absolute;
right: -10%;
bottom: -11%;
transform: rotate(22deg) scale(1.15);
z-index: -1; }
.contact-content .formholder .big-hexagon-holder svg .st0 {
fill: url(#SVGID_1_); }
.contact-content .formholder h4 {
font-size: 22px;
line-height: 30px;
letter-spacing: -0.22px;
color: #424242;
padding: 0 45% 0 0;
font-weight: bold;
margin: 62px 0; }
.contact-content .mapholder {
height: 47.4vw;
max-height: 550px;
background-color: #424242; }
.contact-content .mapholder .headerholder {
margin-left: 14.2857142857%;
font-size: 22px;
line-height: 46px;
letter-spacing: -0.36px;
font-style: italic;
color: white;
display: table;
height: 100%; }
.contact-content .mapholder .headerholder h1 {
display: table-cell;
vertical-align: middle; }
.contact-content .mapholder #map {
height: 47.4vw;
max-height: 550px; }
.contact-content .referencesLink {
width: 100%;
font-size: 18px;
line-height: 28px;
color: #616161;
text-align: center;
margin: 133px 0 95px 0; }
.contact-content .referencesLink:after {
content: "-";
color: #ff6f00;
font-weight: bold;
display: block;
margin: 18px;
font-size: 32px; }
.contact-content .referencesLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
.contact-content .referencesLink a:hover {
color: #ff8f00;
border-bottom: solid 2px #ff8f00; }
@media screen and (max-width: 1025px) {
.contact-content a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; }
.contact-content .formholder .big-hexagon-holder {
transform: rotate(22deg) scale(1); } }
@media screen and (max-width: 840px) {
.contact-content .breadcrumb {
margin-top: 40px; }
.contact-content .intro {
padding-bottom: 40px;
margin-bottom: 60px; }
.contact-content .intro .right {
height: 200px;
float: none;
margin-left: 8.3333333333%; }
.contact-content .intro .left {
width: 100%; }
.contact-content .intro .left h1 {
margin: 27px 0; }
.contact-content .intro .left h1 br {
display: none; }
.contact-content .formholder .left, .contact-content .formholder .right {
width: 100%; }
.contact-content .formholder .left .textholder {
float: left; }
.contact-content .formholder .left .letterholder {
width: 45%;
float: right; }
.contact-content .formholder h4 {
margin: 0;
padding: 0; }
.contact-content .formholder .big-hexagon-holder {
transform: rotate(22deg) scale(0.8); }
.contact-content .mapholder .headerholder {
font-size: 16px; } }
@media screen and (max-width: 760px) {
.contact-content .intro {
padding-bottom: 18px; }
.contact-content .intro .right {
width: 100%; }
.contact-content .intro .right .grid-col .round-portrait {
width: 90%;
height: 40%;
left: 0;
top: -5%; }
.contact-content .intro .left h1 {
font-size: 36px;
margin: 27px 0 10px 0; }
.contact-content .intro .left p {
font-size: 18px; }
.contact-content .formholder .left .textholder, .contact-content .formholder .left .letterholder {
float: none;
width: 100%; }
.contact-content .formholder .form div.first_name, .contact-content .formholder .form div.last_name, .contact-content .formholder .form div.email, .contact-content .formholder .form div.phone {
width: 100%; }
.contact-content .mapholder {
height: auto;
padding-bottom: 0; }
.contact-content .mapholder .headerholder {
font-size: 14px;
width: 100%;
margin-left: 0;
padding: 10% 5%; }
.contact-content .mapholder #map {
float: none;
width: 100%;
padding-bottom: 70%; }
.contact-content .referencesLink {
margin: 45px 0 35px 0; }
.contact-content .uit-je-dak .textholder a.button {
font-size: 16px;
line-height: 40px; } }
@media screen and (max-width: 435px) {
.contact-content .intro h1 {
font-size: 26px;
margin: 5%; }
.contact-content .intro .right {
float: none;
margin-left: 0;
height: 100px; }
.contact-content .intro .right .grid-col {
float: none; }
.contact-content .intro .left h1 {
font-size: 26px;
line-height: 1.6em; }
.contact-content .intro .left p {
font-size: 16px;
line-height: 24px; }
.contact-content .formholder h4 {
margin-bottom: 20px; }
.contact-content .formholder .left {
font-size: 16px;
line-height: 24px; }
.contact-content .mapholder {
background-color: transparent; }
.contact-content .mapholder .headerholder {
color: #424242;
padding: 5%; }
.contact-content .referenties {
display: none; }
.contact-content .referencesLink {
display: none; } }
/*==========================================================================
* Main page
* ========================================================================== */
body.about {
/* Mobile view
* ========================================================================== */ }
body.about .about-content {
position: relative; }
body.about .about-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: white url("/img/clouds_bg.jpg") no-repeat; }
body.about .top {
position: relative;
overflow: visible;
font-size: 1em;
line-height: 1.6em;
height: 90vw;
max-height: 1200px;
padding-top: 65px; }
body.about .top .textholder {
vertical-align: top;
font-size: 18px;
line-height: 28px;
color: #616161;
overflow: visible; }
body.about .top .textholder h1 {
margin-top: 41%;
font-style: italic;
font-size: 34px;
line-height: 38.46px;
letter-spacing: -0.2px;
color: #424242;
margin-bottom: 50px; }
body.about .top .textholder p {
margin-bottom: 60px; }
body.about .top .imgholder {
vertical-align: bottom;
overflow: visible;
z-index: 5;
max-height: 850px;
height: 60vw; }
body.about .top .imgholder figure {
width: 100%;
margin-top: 80px;
background-size: cover;
background-position: bottom center;
height: 100%;
display: block; }
body.about .top .big-hexagon-holder {
display: block;
bottom: 0;
overflow: visible;
position: absolute;
height: 250px;
left: -344px;
z-index: -1; }
body.about .top .big-hexagon-holder > svg {
transform: rotate(30deg) scale(0.4); }
body.about .top .big-hexagon-holder > svg > .st0 {
fill: url(#SVGID_1_); }
body.about .top .scroll-hinter {
position: absolute;
z-index: 35;
top: 98%;
left: -120px;
width: 130px; }
body.about .testimonial-left,
body.about .testimonial-right {
padding-top: 120px;
margin-bottom: 20px;
position: relative; }
body.about .testimonial-left .grid-col,
body.about .testimonial-right .grid-col {
overflow: visible;
padding-bottom: 15%; }
body.about .testimonial-left .textholder,
body.about .testimonial-right .textholder {
padding: 4% 0 9% 11%;
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%);
box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.13);
z-index: 2; }
body.about .testimonial-left .textholder .grid-row .quoteholder,
body.about .testimonial-right .textholder .grid-row .quoteholder {
vertical-align: middle;
color: white;
padding: 35px 10px 0 0;
width: 62.1428571429%;
letter-spacing: 0; }
body.about .testimonial-left .textholder .grid-row .quoteholder h1,
body.about .testimonial-right .textholder .grid-row .quoteholder h1 {
font-style: italic;
font-size: 35px;
line-height: 38.46px;
letter-spacing: -0.35px;
margin-bottom: 45px; }
body.about .testimonial-left .textholder .grid-row .quoteholder p,
body.about .testimonial-right .textholder .grid-row .quoteholder p {
font-size: 18px;
line-height: 28px; }
body.about .testimonial-left .textholder .grid-row .nameholder,
body.about .testimonial-right .textholder .grid-row .nameholder {
vertical-align: middle;
color: white;
padding: 85px 0 0 2px;
width: 25%; }
body.about .testimonial-left .textholder .grid-row .nameholder h2,
body.about .testimonial-right .textholder .grid-row .nameholder h2 {
font-weight: bold;
font-size: 24px;
margin: 0; }
body.about .testimonial-left .textholder .grid-row .nameholder .mail,
body.about .testimonial-right .textholder .grid-row .nameholder .mail {
width: 75px;
height: 75px;
display: block;
position: relative;
left: -8px;
top: 10px; }
body.about .testimonial-left .textholder .grid-row .nameholder .mail .mail-icon,
body.about .testimonial-right .textholder .grid-row .nameholder .mail .mail-icon {
transform: scale3d(1, 1, 1);
transform-origin: 50%;
transition: transform 0.3s; }
body.about .testimonial-left .textholder .grid-row .nameholder .mail:hover .mail-icon,
body.about .testimonial-right .textholder .grid-row .nameholder .mail:hover .mail-icon {
transform: scale3d(0.8, 0.8, 1); }
body.about .testimonial-left .round-portrait,
body.about .testimonial-right .round-portrait {
width: 263%;
height: 150%;
border-radius: 50%;
position: absolute;
left: -35%;
bottom: -90%;
overflow: hidden;
z-index: 10; }
body.about .testimonial-left .round-portrait figure,
body.about .testimonial-right .round-portrait figure {
height: 100%;
background-size: cover;
background-position: center center; }
body.about .testimonial-left .big-hexagon-holder,
body.about .testimonial-right .big-hexagon-holder {
position: absolute;
right: -104px;
bottom: -49%;
z-index: 0;
-webkit-animation: spin6 360s linear infinite;
animation: spin6 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin6 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16); } }
body.about .testimonial-left .big-hexagon-holder svg,
body.about .testimonial-right .big-hexagon-holder svg {
width: 100%; }
body.about .testimonial-right .textholder {
padding: 4% 8% 9% 0;
background: #424242; }
body.about .testimonial-right .textholder .grid-row .quoteholder {
padding: 35px 0 0 20px;
float: left; }
body.about .testimonial-right .textholder .grid-row .nameholder .mail {
float: right; }
body.about .testimonial-right .textholder .grid-row .nameholder .mail .mail-icon .cls-3 {
fill: #ff8f00; }
body.about .testimonial-right .round-portrait {
left: auto;
right: 75%;
bottom: -100%; }
body.about .testimonial-right .big-hexagon-holder {
position: absolute;
right: 55%;
bottom: -52%;
z-index: 0;
-webkit-animation: spin7 360s linear infinite;
animation: spin7 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin7 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.25);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.25);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.25);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.25);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.25);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.25); } }
body.about .testimonial-right .big-hexagon-holder svg > .st0 {
fill: url(#SVGID_1_); }
body.about .testimonial-left.first .big-hexagon-holder {
z-index: 1; }
body.about .testimonial-left.last .big-hexagon-holder {
position: absolute;
right: -22%;
bottom: -47%;
z-index: 0;
-webkit-animation: spin8 360s linear infinite;
animation: spin8 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin8 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.26);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.26);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.26);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.26);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.26);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.26); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.26);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.26);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.26);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.26);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.26);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.26); } }
body.about .testimonial-left.last .big-hexagon-holder svg {
width: 100%; }
body.about .testimonial-left.last .big-hexagon-holder svg > .st0 {
fill: #396EC2; }
body.about .reference-linkholder {
text-align: center;
margin: 115px 0 60px 0;
font-size: 18px;
line-height: 28px;
color: #616161; }
body.about .reference-linkholder a {
padding-bottom: 1px;
border-bottom: solid 2px #616161;
text-decoration: none;
color: #616161; }
body.about .reference-linkholder a:hover {
color: #ff6f00;
border-bottom-color: #ff6f00; }
body.about .reference-linkholder .yellowline {
width: 10px;
height: 10px;
margin: 20px 0;
display: inline-block;
border-bottom: solid 2px #ff8f00; }
@media screen and (min-width: 2000px) {
body.about .testimonial-right .round-portrait {
bottom: -80%; } }
@media screen and (max-width: 1025px) {
body.about .top .textholder h1 {
margin-top: 34%;
font-size: 30px; }
body.about .top .textholder p {
font-size: 15px;
line-height: 25px; }
body.about .top .big-hexagon-holder, body.about .top .scroll-hinter {
display: none; }
body.about .testimonial-left .textholder .grid-row .quoteholder p,
body.about .testimonial-right .textholder .grid-row .quoteholder p {
font-size: 14px; }
body.about .testimonial-left .textholder .grid-row .quoteholder h1,
body.about .testimonial-right .textholder .grid-row .quoteholder h1 {
font-size: 30px; }
body.about .testimonial-right .round-portrait {
bottom: -140%; }
body.about .about-content a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; } }
@media screen and (max-width: 840px) {
body.about .about-content a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; }
body.about .testimonial-left .textholder, body.about .testimonial-right .textholder {
padding: 1% 0 7% 8%; }
body.about .testimonial-left .textholder .grid-row .quoteholder h1, body.about .testimonial-right .textholder .grid-row .quoteholder h1 {
font-size: 24px;
line-height: 34px;
margin-bottom: 16px; }
body.about .testimonial-right .textholder {
padding: 1% 7% 7% 0%; } }
@media screen and (max-width: 760px) {
body.about .top {
height: auto;
padding-bottom: 0; }
body.about .top .textholder {
width: 100%;
margin-left: 0; }
body.about .top .textholder h1 {
margin: 10% 0; }
body.about .top .imgholder {
width: 100%; }
body.about .testimonial-left, body.about .testimonial-right {
width: 100%;
margin-bottom: 0;
margin-top: 0;
padding: 0; }
body.about .testimonial-left .col-1, body.about .testimonial-right .col-1 {
vertical-align: top; }
body.about .testimonial-left .col-1 .round-portrait, body.about .testimonial-right .col-1 .round-portrait {
display: none; }
body.about .testimonial-left .textholder, body.about .testimonial-right .textholder {
width: 100%;
padding: 5% 0 9% 5%; }
body.about .testimonial-left .textholder .grid-row .nameholder, body.about .testimonial-right .textholder .grid-row .nameholder {
width: 100%;
padding-top: 0; }
body.about .testimonial-left .textholder .grid-row .nameholder h2, body.about .testimonial-right .textholder .grid-row .nameholder h2 {
float: left;
padding-top: 17px; }
body.about .testimonial-left .textholder .grid-row .nameholder .mail, body.about .testimonial-right .textholder .grid-row .nameholder .mail {
float: right;
width: 60px; }
body.about .testimonial-left .textholder .grid-row .quoteholder, body.about .testimonial-right .textholder .grid-row .quoteholder {
width: 95%;
margin-left: 0;
padding-left: 0; }
body.about .testimonial-right .textholder .grid-row .nameholder {
margin-left: 0; }
body.about .uit-je-dak {
height: auto;
padding: 10%; }
body.about .uit-je-dak .textholder {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
body.about .uit-je-dak .textholder h1 {
margin: 10% 0; }
body.about .uit-je-dak .textholder h2 p {
font-size: 28px;
line-height: 40px; }
body.about .uit-je-dak .textholder a.button {
font-size: 16px;
line-height: 40px; }
body.about .uit-je-dak .imgholder {
display: none; } }
@media screen and (max-width: 435px) {
body.about .top {
padding-top: 30px;
width: 100%; }
body.about .top .breadcrumb {
margin-left: 8.3333333333%; }
body.about .top .textholder {
padding: 0 8.3333333333% 40px 8.3333333333%; }
body.about .top .imgholder {
float: none; }
body.about .top .imgholder figure {
margin-top: 0; }
body.about .testimonial-left .col-1,
body.about .testimonial-right .col-1 {
display: none; }
body.about .referenties {
display: none; } }
.services-content {
overflow: hidden; }
body.services .services-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -5;
background: white url("/img/clouds_bg.jpg") no-repeat; }
body.services .services-content .breadcrumb {
margin: 108px 0 0 0; }
body.services h1 {
font-style: italic;
font-size: 40px;
line-height: 38.46px;
letter-spacing: -0.2px;
color: #424242;
margin: 58px 0; }
body.services .services-intro {
padding: 0;
height: 440px;
z-index: 1; }
body.services .services-intro .grid-col {
vertical-align: top; }
body.services .services-intro .grid-col h1 {
margin: 73px 0; }
body.services .services-intro .textholder {
margin-left: 7.1428571429%; }
body.services .services-intro .textholder .text {
font-size: 24px;
line-height: 38px;
color: #616161;
padding-top: 45px; }
body.services .services-intro .textholder .text p {
letter-spacing: -0.3px; }
body.services .services-diensten-menu {
margin-bottom: 110px;
z-index: 1; }
body.services .services-diensten-menu .diensten-menu .grid-col a {
flex-basis: 46%;
flex-grow: 0;
margin-right: 4%; }
body.services .services-diensten-menu h1 {
margin: 70px 0 77px 0; }
body.services .diensten-blok {
padding-top: 128px;
position: relative; }
body.services .diensten-blok h1 {
margin-bottom: 60px;
line-height: 60px;
text-align: center; }
body.services .diensten-blok .icon-holder {
height: 645px;
background-color: #424242;
margin-left: 3.5714285714%;
width: 92.8571428571%;
z-index: 1;
padding-top: 5px; }
body.services .diensten-blok .icon-holder .grid-row {
height: 275px; }
body.services .diensten-blok .icon-holder .grid-row .grid-col {
padding: 90px 0 0 65px;
text-align: center;
color: white;
width: 31.7857142857%;
height: 100%;
letter-spacing: 0.2px; }
body.services .diensten-blok .icon-holder .grid-row .grid-col h4 {
font-size: 28px;
line-height: 62px; }
body.services .diensten-blok .icon-holder .grid-row .grid-col img {
width: 55px;
height: 70px;
margin: 0 auto; }
body.services .diensten-blok .icon-holder .grid-row .grid-col p {
font-size: 18px;
line-height: 24px;
margin-top: -8px; }
body.services .diensten-blok .icon-holder .grid-row .grid-col .button {
top: 70px; }
body.services .diensten-blok .hexagon-frame {
height: 100%;
width: 100%;
position: absolute;
top: 0;
overflow: hidden;
z-index: 0; }
body.services .diensten-blok .hexagon-frame .big-hexagon-holder {
left: 62.5%;
position: relative;
top: 25%; }
body.services .diensten-blok .hexagon-frame .big-hexagon-holder svg {
transform: rotate(10deg) scale(1.1); }
body.services .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0 {
fill: url(#SVGID_1_); }
body.services .diensten-blok .dienstenLink {
width: 100%;
font-size: 19px;
line-height: 24px;
text-align: center;
padding: 67px 0 125px; }
body.services .diensten-blok .dienstenLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
body.services .uit-je-dak {
margin-bottom: 165px; }
body.services .call-to-action-contact {
left: -7.1428571429%; }
@media screen and (max-width: 1120px) {
body.services .services-diensten-menu {
height: 930px; }
body.services .services-diensten-menu .diensten-menu .grid-col a {
flex-basis: 100%;
flex-grow: 0;
margin-right: 0; }
body.services .services-diensten-menu .diensten-menu .grid-col a .button {
margin-bottom: 40px; } }
@media screen and (max-width: 840px) {
body.services .services-content .breadcrumb {
margin-top: 40px; }
body.services .top {
padding-top: 30px; }
body.services .services-intro .offset-1 {
margin-left: 0; }
body.services .services-intro .textholder .text {
font-size: 20px; }
body.services .services-diensten-menu {
margin-bottom: 110px;
z-index: 1; }
body.services .services-diensten-menu .offset-1 {
margin-left: 0; }
body.services .services-diensten-menu .diensten-menu .grid-col a {
flex-basis: 100%;
font-size: 18px; }
body.services .uit-je-dak a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; } }
@media screen and (max-width: 760px) {
body.services .services-intro {
height: auto;
padding-bottom: 0;
margin-bottom: 50px; }
body.services .services-intro .grid-col {
width: 100%; }
body.services .services-intro .grid-col h1 {
margin: 10% 0; }
body.services .services-intro .textholder {
margin-left: 0; }
body.services .services-intro .textholder .text {
padding-top: 0;
font-size: 18px; }
body.services .services-intro .imgholder {
width: 100%; }
body.services .services-diensten-menu {
height: auto;
margin-bottom: 50px; } }
@media screen and (max-width: 435px) {
body.services .services-content .breadcrumb {
margin-top: 0; }
body.services .services-intro .grid-col h1 {
font-size: 32px; }
body.services .services-intro .textholder .text p {
margin: 0;
font-size: 16px;
line-height: 24px; }
body.services .services-diensten-menu h1 {
margin-bottom: 10%; }
body.services .services-diensten-menu .grid-row .col-13 {
width: 100%;
margin-left: 0; }
body.services .services-diensten-menu .grid-row .col-13 a {
height: 70px;
line-height: 70px;
padding-top: 0;
margin-bottom: 30px; }
body.services .services-diensten-menu .grid-row .col-13 a:before {
margin-right: 30%; }
body.services .services-diensten-menu .grid-row .col-13 a svg {
left: 18px;
width: 35px;
top: 0; }
body.services .services-diensten-menu .grid-row .col-13 a .bg {
width: 70px;
height: 70px;
left: 0;
top: 0; }
body.services .uit-je-dak {
margin-bottom: 1px; }
body.services .call-to-action-contact {
margin-bottom: 0;
padding-bottom: 0;
left: 0; }
body.services .call-to-action-contact .grid-row {
width: 100%; }
body.services .call-to-action-contact .grid-row .cta-text {
width: 100%;
margin: 0;
padding-bottom: 5%; }
body.services .call-to-action-contact .grid-row .cta-text h2, body.services .call-to-action-contact .grid-row .cta-text h4 {
padding-left: 30%; }
body.services .call-to-action-contact .grid-row .round-portrait {
left: 10%; }
body.services .call-to-action-contact .phone, body.services .call-to-action-contact .mail {
height: 65px; }
body.services .call-to-action-contact .phone img, body.services .call-to-action-contact .mail img {
height: 75%; } }
body.service_roofing .services-content .breadcrumb, body.service_insulation .services-content .breadcrumb, body.service_renovation .services-content .breadcrumb, body.service_slates .services-content .breadcrumb, body.service_solarpanels .services-content .breadcrumb {
margin: 105px 0 70px 0; }
body.service_roofing .services-content:after, body.service_insulation .services-content:after, body.service_renovation .services-content:after, body.service_slates .services-content:after, body.service_solarpanels .services-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -5;
background: white url("/img/clouds_bg.jpg") no-repeat; }
body.service_roofing .services-intro, body.service_insulation .services-intro, body.service_renovation .services-intro, body.service_slates .services-intro, body.service_solarpanels .services-intro {
padding: 0;
height: 1400px;
z-index: 1; }
body.service_roofing .services-intro .grid-row .grid-col, body.service_insulation .services-intro .grid-row .grid-col, body.service_renovation .services-intro .grid-row .grid-col, body.service_slates .services-intro .grid-row .grid-col, body.service_solarpanels .services-intro .grid-row .grid-col {
vertical-align: top; }
body.service_roofing .services-intro .grid-row .grid-col h1, body.service_insulation .services-intro .grid-row .grid-col h1, body.service_renovation .services-intro .grid-row .grid-col h1, body.service_slates .services-intro .grid-row .grid-col h1, body.service_solarpanels .services-intro .grid-row .grid-col h1 {
margin: 0 0 35px 0;
color: #424242; }
body.service_roofing .services-intro .grid-row .grid-col h1 svg, body.service_insulation .services-intro .grid-row .grid-col h1 svg, body.service_renovation .services-intro .grid-row .grid-col h1 svg, body.service_slates .services-intro .grid-row .grid-col h1 svg, body.service_solarpanels .services-intro .grid-row .grid-col h1 svg {
width: 48px;
height: 36px;
margin-right: 20px; }
body.service_roofing .services-intro .grid-row .grid-col h1 svg .cls-1, body.service_insulation .services-intro .grid-row .grid-col h1 svg .cls-1, body.service_renovation .services-intro .grid-row .grid-col h1 svg .cls-1, body.service_slates .services-intro .grid-row .grid-col h1 svg .cls-1, body.service_solarpanels .services-intro .grid-row .grid-col h1 svg .cls-1 {
stroke: #424242; }
body.service_roofing .services-intro .grid-row .grid-col h1 svg .cls-2, body.service_insulation .services-intro .grid-row .grid-col h1 svg .cls-2, body.service_renovation .services-intro .grid-row .grid-col h1 svg .cls-2, body.service_slates .services-intro .grid-row .grid-col h1 svg .cls-2, body.service_solarpanels .services-intro .grid-row .grid-col h1 svg .cls-2 {
stroke: #ff8f00; }
body.service_roofing .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-1, body.service_insulation .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-1, body.service_renovation .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-1, body.service_slates .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-1, body.service_solarpanels .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-1 {
stroke: #ff8f00; }
body.service_roofing .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-2, body.service_insulation .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-2, body.service_renovation .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-2, body.service_slates .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-2, body.service_solarpanels .services-intro .grid-row .grid-col h1.na-isolatie > svg .cls-2 {
stroke: #424242; }
body.service_roofing .services-intro .grid-row .grid-col .text, body.service_insulation .services-intro .grid-row .grid-col .text, body.service_renovation .services-intro .grid-row .grid-col .text, body.service_slates .services-intro .grid-row .grid-col .text, body.service_solarpanels .services-intro .grid-row .grid-col .text {
font-size: 24px;
line-height: 38px;
padding-right: 13.5714285714%;
margin-bottom: 80px;
color: #616161; }
body.service_roofing .services-intro .grid-row .grid-col .first-img, body.service_insulation .services-intro .grid-row .grid-col .first-img, body.service_renovation .services-intro .grid-row .grid-col .first-img, body.service_slates .services-intro .grid-row .grid-col .first-img, body.service_solarpanels .services-intro .grid-row .grid-col .first-img {
width: 100%;
padding-bottom: 42%;
display: block;
background-size: cover;
margin-bottom: 90px; }
body.service_roofing .services-intro .grid-row .grid-col .second-img, body.service_roofing .services-intro .grid-row .grid-col .third-img, body.service_insulation .services-intro .grid-row .grid-col .second-img, body.service_insulation .services-intro .grid-row .grid-col .third-img, body.service_renovation .services-intro .grid-row .grid-col .second-img, body.service_renovation .services-intro .grid-row .grid-col .third-img, body.service_slates .services-intro .grid-row .grid-col .second-img, body.service_slates .services-intro .grid-row .grid-col .third-img, body.service_solarpanels .services-intro .grid-row .grid-col .second-img, body.service_solarpanels .services-intro .grid-row .grid-col .third-img {
padding-bottom: 45%;
background-size: cover; }
body.service_roofing .services-intro .grid-row .grid-col .third-img, body.service_insulation .services-intro .grid-row .grid-col .third-img, body.service_renovation .services-intro .grid-row .grid-col .third-img, body.service_slates .services-intro .grid-row .grid-col .third-img, body.service_solarpanels .services-intro .grid-row .grid-col .third-img {
width: 44.2857142857%; }
body.service_roofing .services-intro .diensten-menu, body.service_insulation .services-intro .diensten-menu, body.service_renovation .services-intro .diensten-menu, body.service_slates .services-intro .diensten-menu, body.service_solarpanels .services-intro .diensten-menu {
height: 740px;
margin-top: 45px; }
body.service_roofing .services-intro .diensten-menu .grid-col, body.service_insulation .services-intro .diensten-menu .grid-col, body.service_renovation .services-intro .diensten-menu .grid-col, body.service_slates .services-intro .diensten-menu .grid-col, body.service_solarpanels .services-intro .diensten-menu .grid-col {
vertical-align: top;
display: flex; }
body.service_roofing .services-intro .diensten-menu .grid-col .button, body.service_insulation .services-intro .diensten-menu .grid-col .button, body.service_renovation .services-intro .diensten-menu .grid-col .button, body.service_slates .services-intro .diensten-menu .grid-col .button, body.service_solarpanels .services-intro .diensten-menu .grid-col .button {
width: 100%;
font-size: 27px;
height: 96px;
margin-bottom: 0px;
border: none;
background: none;
border-bottom: solid 2px rgba(0, 0, 0, 0.08);
text-align: left;
border-radius: 0;
padding-left: 0;
transition: all 0.25s ease-in-out; }
body.service_roofing .services-intro .diensten-menu .grid-col .button .icon-grid-view, body.service_insulation .services-intro .diensten-menu .grid-col .button .icon-grid-view, body.service_renovation .services-intro .diensten-menu .grid-col .button .icon-grid-view, body.service_slates .services-intro .diensten-menu .grid-col .button .icon-grid-view, body.service_solarpanels .services-intro .diensten-menu .grid-col .button .icon-grid-view {
background: url(/img/svg/icon-grid-view.svg);
width: 0;
height: 34px;
display: block;
float: left;
margin: 32px 0 0 -60px;
transition: margin-left 0.25s ease-in-out; }
body.service_roofing .services-intro .diensten-menu .grid-col .button svg, body.service_insulation .services-intro .diensten-menu .grid-col .button svg, body.service_renovation .services-intro .diensten-menu .grid-col .button svg, body.service_slates .services-intro .diensten-menu .grid-col .button svg, body.service_solarpanels .services-intro .diensten-menu .grid-col .button svg {
width: 0;
height: 36px;
top: 30px;
left: 0;
transition: width 0.25s ease-in-out; }
body.service_roofing .services-intro .diensten-menu .grid-col .button svg .cls-1, body.service_insulation .services-intro .diensten-menu .grid-col .button svg .cls-1, body.service_renovation .services-intro .diensten-menu .grid-col .button svg .cls-1, body.service_slates .services-intro .diensten-menu .grid-col .button svg .cls-1, body.service_solarpanels .services-intro .diensten-menu .grid-col .button svg .cls-1 {
stroke: #424242; }
body.service_roofing .services-intro .diensten-menu .grid-col .button svg .cls-2, body.service_insulation .services-intro .diensten-menu .grid-col .button svg .cls-2, body.service_renovation .services-intro .diensten-menu .grid-col .button svg .cls-2, body.service_slates .services-intro .diensten-menu .grid-col .button svg .cls-2, body.service_solarpanels .services-intro .diensten-menu .grid-col .button svg .cls-2 {
stroke: #ff8f00; }
body.service_roofing .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-1, body.service_insulation .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-1, body.service_renovation .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-1, body.service_slates .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-1, body.service_solarpanels .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-1 {
stroke: #ff8f00; }
body.service_roofing .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-2, body.service_insulation .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-2, body.service_renovation .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-2, body.service_slates .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-2, body.service_solarpanels .services-intro .diensten-menu .grid-col .button.na-isolatie > svg .cls-2 {
stroke: #424242; }
body.service_roofing .services-intro .diensten-menu .grid-col .button.arrow:after, body.service_insulation .services-intro .diensten-menu .grid-col .button.arrow:after, body.service_renovation .services-intro .diensten-menu .grid-col .button.arrow:after, body.service_slates .services-intro .diensten-menu .grid-col .button.arrow:after, body.service_solarpanels .services-intro .diensten-menu .grid-col .button.arrow:after {
right: 0; }
body.service_roofing .services-intro .diensten-menu .grid-col .button:before, body.service_insulation .services-intro .diensten-menu .grid-col .button:before, body.service_renovation .services-intro .diensten-menu .grid-col .button:before, body.service_slates .services-intro .diensten-menu .grid-col .button:before, body.service_solarpanels .services-intro .diensten-menu .grid-col .button:before {
margin: 0;
content: ""; }
body.service_roofing .services-intro .diensten-menu .grid-col .button:hover, body.service_insulation .services-intro .diensten-menu .grid-col .button:hover, body.service_renovation .services-intro .diensten-menu .grid-col .button:hover, body.service_slates .services-intro .diensten-menu .grid-col .button:hover, body.service_solarpanels .services-intro .diensten-menu .grid-col .button:hover {
color: #ff8f00;
padding-left: 60px;
border-bottom: solid 2px #ff8f00;
transition: all 0.25s ease-in-out; }
body.service_roofing .services-intro .diensten-menu .grid-col .button:hover.arrow:after, body.service_insulation .services-intro .diensten-menu .grid-col .button:hover.arrow:after, body.service_renovation .services-intro .diensten-menu .grid-col .button:hover.arrow:after, body.service_slates .services-intro .diensten-menu .grid-col .button:hover.arrow:after, body.service_solarpanels .services-intro .diensten-menu .grid-col .button:hover.arrow:after {
background-position: -84px center; }
body.service_roofing .services-intro .diensten-menu .grid-col .button:hover .icon-grid-view, body.service_insulation .services-intro .diensten-menu .grid-col .button:hover .icon-grid-view, body.service_renovation .services-intro .diensten-menu .grid-col .button:hover .icon-grid-view, body.service_slates .services-intro .diensten-menu .grid-col .button:hover .icon-grid-view, body.service_solarpanels .services-intro .diensten-menu .grid-col .button:hover .icon-grid-view {
width: 34px; }
body.service_roofing .services-intro .diensten-menu .grid-col .button:hover svg, body.service_insulation .services-intro .diensten-menu .grid-col .button:hover svg, body.service_renovation .services-intro .diensten-menu .grid-col .button:hover svg, body.service_slates .services-intro .diensten-menu .grid-col .button:hover svg, body.service_solarpanels .services-intro .diensten-menu .grid-col .button:hover svg {
width: 48px; }
body.service_roofing .services-intro .button, body.service_insulation .services-intro .button, body.service_renovation .services-intro .button, body.service_slates .services-intro .button, body.service_solarpanels .services-intro .button {
margin-bottom: 30px; }
body.service_roofing .services-intro .right, body.service_insulation .services-intro .right, body.service_renovation .services-intro .right, body.service_slates .services-intro .right, body.service_solarpanels .services-intro .right {
position: relative; }
body.service_roofing .services-intro .right .big-hexagon-holder, body.service_insulation .services-intro .right .big-hexagon-holder, body.service_renovation .services-intro .right .big-hexagon-holder, body.service_slates .services-intro .right .big-hexagon-holder, body.service_solarpanels .services-intro .right .big-hexagon-holder {
position: absolute;
bottom: 10%;
left: 9%;
z-index: -1;
transform: rotate(15deg) scale(0.8); }
body.service_roofing .diensten-blok, body.service_insulation .diensten-blok, body.service_renovation .diensten-blok, body.service_slates .diensten-blok, body.service_solarpanels .diensten-blok {
padding-top: 128px;
position: relative; }
body.service_roofing .diensten-blok h1, body.service_insulation .diensten-blok h1, body.service_renovation .diensten-blok h1, body.service_slates .diensten-blok h1, body.service_solarpanels .diensten-blok h1 {
margin-bottom: 60px;
line-height: 60px;
text-align: center; }
body.service_roofing .diensten-blok .icon-holder, body.service_insulation .diensten-blok .icon-holder, body.service_renovation .diensten-blok .icon-holder, body.service_slates .diensten-blok .icon-holder, body.service_solarpanels .diensten-blok .icon-holder {
height: 645px;
background-color: #424242;
margin-left: 3.5714285714%;
width: 92.8571428571%;
z-index: 1;
padding-top: 5px; }
body.service_roofing .diensten-blok .icon-holder .grid-row, body.service_insulation .diensten-blok .icon-holder .grid-row, body.service_renovation .diensten-blok .icon-holder .grid-row, body.service_slates .diensten-blok .icon-holder .grid-row, body.service_solarpanels .diensten-blok .icon-holder .grid-row {
height: 275px; }
body.service_roofing .diensten-blok .icon-holder .grid-row .grid-col, body.service_insulation .diensten-blok .icon-holder .grid-row .grid-col, body.service_renovation .diensten-blok .icon-holder .grid-row .grid-col, body.service_slates .diensten-blok .icon-holder .grid-row .grid-col, body.service_solarpanels .diensten-blok .icon-holder .grid-row .grid-col {
padding: 90px 0 0 65px;
text-align: center;
color: white;
width: 31.7857142857%;
height: 100%;
letter-spacing: 0.2px; }
body.service_roofing .diensten-blok .icon-holder .grid-row .grid-col h4, body.service_insulation .diensten-blok .icon-holder .grid-row .grid-col h4, body.service_renovation .diensten-blok .icon-holder .grid-row .grid-col h4, body.service_slates .diensten-blok .icon-holder .grid-row .grid-col h4, body.service_solarpanels .diensten-blok .icon-holder .grid-row .grid-col h4 {
font-size: 28px;
line-height: 62px; }
body.service_roofing .diensten-blok .icon-holder .grid-row .grid-col img, body.service_insulation .diensten-blok .icon-holder .grid-row .grid-col img, body.service_renovation .diensten-blok .icon-holder .grid-row .grid-col img, body.service_slates .diensten-blok .icon-holder .grid-row .grid-col img, body.service_solarpanels .diensten-blok .icon-holder .grid-row .grid-col img {
width: 55px;
height: 70px;
margin: 0 auto; }
body.service_roofing .diensten-blok .icon-holder .grid-row .grid-col p, body.service_insulation .diensten-blok .icon-holder .grid-row .grid-col p, body.service_renovation .diensten-blok .icon-holder .grid-row .grid-col p, body.service_slates .diensten-blok .icon-holder .grid-row .grid-col p, body.service_solarpanels .diensten-blok .icon-holder .grid-row .grid-col p {
font-size: 18px;
line-height: 24px;
margin-top: -8px; }
body.service_roofing .diensten-blok .icon-holder .grid-row .grid-col .button, body.service_insulation .diensten-blok .icon-holder .grid-row .grid-col .button, body.service_renovation .diensten-blok .icon-holder .grid-row .grid-col .button, body.service_slates .diensten-blok .icon-holder .grid-row .grid-col .button, body.service_solarpanels .diensten-blok .icon-holder .grid-row .grid-col .button {
top: 70px; }
body.service_roofing .diensten-blok .hexagon-frame, body.service_insulation .diensten-blok .hexagon-frame, body.service_renovation .diensten-blok .hexagon-frame, body.service_slates .diensten-blok .hexagon-frame, body.service_solarpanels .diensten-blok .hexagon-frame {
height: 100%;
width: 100%;
position: absolute;
top: 0;
overflow: hidden;
z-index: 0; }
body.service_roofing .diensten-blok .hexagon-frame .big-hexagon-holder, body.service_insulation .diensten-blok .hexagon-frame .big-hexagon-holder, body.service_renovation .diensten-blok .hexagon-frame .big-hexagon-holder, body.service_slates .diensten-blok .hexagon-frame .big-hexagon-holder, body.service_solarpanels .diensten-blok .hexagon-frame .big-hexagon-holder {
left: 62.5%;
position: relative;
top: 25%; }
body.service_roofing .diensten-blok .hexagon-frame .big-hexagon-holder svg, body.service_insulation .diensten-blok .hexagon-frame .big-hexagon-holder svg, body.service_renovation .diensten-blok .hexagon-frame .big-hexagon-holder svg, body.service_slates .diensten-blok .hexagon-frame .big-hexagon-holder svg, body.service_solarpanels .diensten-blok .hexagon-frame .big-hexagon-holder svg {
transform: rotate(10deg) scale(1.1); }
body.service_roofing .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0, body.service_insulation .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0, body.service_renovation .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0, body.service_slates .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0, body.service_solarpanels .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0 {
fill: url(#SVGID_1_); }
body.service_roofing .diensten-blok .dienstenLink, body.service_insulation .diensten-blok .dienstenLink, body.service_renovation .diensten-blok .dienstenLink, body.service_slates .diensten-blok .dienstenLink, body.service_solarpanels .diensten-blok .dienstenLink {
width: 100%;
font-size: 19px;
line-height: 24px;
text-align: center;
padding: 67px 0 125px; }
body.service_roofing .diensten-blok .dienstenLink a, body.service_insulation .diensten-blok .dienstenLink a, body.service_renovation .diensten-blok .dienstenLink a, body.service_slates .diensten-blok .dienstenLink a, body.service_solarpanels .diensten-blok .dienstenLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
body.service_roofing .soorten-dakbedekking, body.service_insulation .soorten-dakbedekking, body.service_renovation .soorten-dakbedekking, body.service_slates .soorten-dakbedekking, body.service_solarpanels .soorten-dakbedekking {
background-color: #424242;
position: relative;
overflow: visible;
font-size: 1em;
line-height: 1.6em;
height: 485px;
margin-bottom: 165px;
padding-top: 117px;
color: white; }
body.service_roofing .soorten-dakbedekking .left, body.service_insulation .soorten-dakbedekking .left, body.service_renovation .soorten-dakbedekking .left, body.service_slates .soorten-dakbedekking .left, body.service_solarpanels .soorten-dakbedekking .left {
margin-left: 8.5714285714%;
width: 25%; }
body.service_roofing .soorten-dakbedekking .left h2, body.service_insulation .soorten-dakbedekking .left h2, body.service_renovation .soorten-dakbedekking .left h2, body.service_slates .soorten-dakbedekking .left h2, body.service_solarpanels .soorten-dakbedekking .left h2 {
margin: 0 50px 75px 0;
font-style: italic;
font-size: 35px;
line-height: 38.46px;
letter-spacing: -0.35px; }
body.service_roofing .soorten-dakbedekking .left .imgHolder, body.service_insulation .soorten-dakbedekking .left .imgHolder, body.service_renovation .soorten-dakbedekking .left .imgHolder, body.service_slates .soorten-dakbedekking .left .imgHolder, body.service_solarpanels .soorten-dakbedekking .left .imgHolder {
width: 100%;
padding-bottom: 95%;
background-repeat: no-repeat;
background-size: cover; }
body.service_roofing .soorten-dakbedekking .textholder, body.service_insulation .soorten-dakbedekking .textholder, body.service_renovation .soorten-dakbedekking .textholder, body.service_slates .soorten-dakbedekking .textholder, body.service_solarpanels .soorten-dakbedekking .textholder {
vertical-align: top;
font-size: 18px;
line-height: 28px;
width: 50%; }
body.service_roofing .soorten-dakbedekking .textholder .text p, body.service_insulation .soorten-dakbedekking .textholder .text p, body.service_renovation .soorten-dakbedekking .textholder .text p, body.service_slates .soorten-dakbedekking .textholder .text p, body.service_solarpanels .soorten-dakbedekking .textholder .text p {
margin: 4px 0; }
body.service_roofing .soorten-dakbedekking .textholder .text p a, body.service_insulation .soorten-dakbedekking .textholder .text p a, body.service_renovation .soorten-dakbedekking .textholder .text p a, body.service_slates .soorten-dakbedekking .textholder .text p a, body.service_solarpanels .soorten-dakbedekking .textholder .text p a {
color: rgba(255, 255, 255, 0.7); }
body.service_roofing .soorten-dakbedekking .textholder .text p a:hover, body.service_insulation .soorten-dakbedekking .textholder .text p a:hover, body.service_renovation .soorten-dakbedekking .textholder .text p a:hover, body.service_slates .soorten-dakbedekking .textholder .text p a:hover, body.service_solarpanels .soorten-dakbedekking .textholder .text p a:hover {
color: white; }
body.service_roofing .soorten-dakbedekking .imgholder, body.service_insulation .soorten-dakbedekking .imgholder, body.service_renovation .soorten-dakbedekking .imgholder, body.service_slates .soorten-dakbedekking .imgholder, body.service_solarpanels .soorten-dakbedekking .imgholder {
vertical-align: bottom;
height: 100%;
background-size: cover; }
body.service_roofing .dienstenLink, body.service_insulation .dienstenLink, body.service_renovation .dienstenLink, body.service_slates .dienstenLink, body.service_solarpanels .dienstenLink {
width: 100%;
font-size: 18px;
line-height: 28px;
color: #616161;
text-align: center;
margin: -50px 0 120px 0; }
body.service_roofing .dienstenLink:after, body.service_insulation .dienstenLink:after, body.service_renovation .dienstenLink:after, body.service_slates .dienstenLink:after, body.service_solarpanels .dienstenLink:after {
content: "-";
color: #ff6f00;
font-weight: bold;
display: block;
margin: 18px;
font-size: 32px; }
body.service_roofing .dienstenLink a, body.service_insulation .dienstenLink a, body.service_renovation .dienstenLink a, body.service_slates .dienstenLink a, body.service_solarpanels .dienstenLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
body.service_roofing .call-to-action-contact, body.service_insulation .call-to-action-contact, body.service_renovation .call-to-action-contact, body.service_slates .call-to-action-contact, body.service_solarpanels .call-to-action-contact {
left: -7.1428571429%; }
body.service_roofing .uit-je-dak .imgholder, body.service_insulation .uit-je-dak .imgholder, body.service_renovation .uit-je-dak .imgholder, body.service_slates .uit-je-dak .imgholder, body.service_solarpanels .uit-je-dak .imgholder {
width: 49.8%;
float: right; }
@media screen and (max-width: 840px) {
body.service_roofing, body.service_insulation, body.service_renovation, body.service_slates, body.service_solarpanels {
padding-top: 120px; }
body.service_roofing .services-content .breadcrumb, body.service_insulation .services-content .breadcrumb, body.service_renovation .services-content .breadcrumb, body.service_slates .services-content .breadcrumb, body.service_solarpanels .services-content .breadcrumb {
margin-top: 0;
margin-bottom: 20px; }
body.service_roofing .services-intro, body.service_insulation .services-intro, body.service_renovation .services-intro, body.service_slates .services-intro, body.service_solarpanels .services-intro {
height: auto;
margin-bottom: 80px; }
body.service_roofing .services-intro .grid-row, body.service_insulation .services-intro .grid-row, body.service_renovation .services-intro .grid-row, body.service_slates .services-intro .grid-row, body.service_solarpanels .services-intro .grid-row {
width: 100%;
margin: 0; }
body.service_roofing .services-intro .grid-row > .col-4, body.service_insulation .services-intro .grid-row > .col-4, body.service_renovation .services-intro .grid-row > .col-4, body.service_slates .services-intro .grid-row > .col-4, body.service_solarpanels .services-intro .grid-row > .col-4 {
display: none; }
body.service_roofing .services-intro .grid-row .right, body.service_insulation .services-intro .grid-row .right, body.service_renovation .services-intro .grid-row .right, body.service_slates .services-intro .grid-row .right, body.service_solarpanels .services-intro .grid-row .right {
width: 92.8571428571%;
margin-left: 7.1428571429%; }
body.service_roofing .services-intro .grid-row .right .text, body.service_insulation .services-intro .grid-row .right .text, body.service_renovation .services-intro .grid-row .right .text, body.service_slates .services-intro .grid-row .right .text, body.service_solarpanels .services-intro .grid-row .right .text {
font-size: 18px;
line-height: 30px; }
body.service_roofing .services-intro .grid-row .right .full-row, body.service_insulation .services-intro .grid-row .right .full-row, body.service_renovation .services-intro .grid-row .right .full-row, body.service_slates .services-intro .grid-row .right .full-row, body.service_solarpanels .services-intro .grid-row .right .full-row {
margin: 0;
width: 90%; }
body.service_roofing .services-intro .grid-row .grid-col .first-img, body.service_insulation .services-intro .grid-row .grid-col .first-img, body.service_renovation .services-intro .grid-row .grid-col .first-img, body.service_slates .services-intro .grid-row .grid-col .first-img, body.service_solarpanels .services-intro .grid-row .grid-col .first-img {
width: 90%; }
body.service_roofing .soorten-dakbedekking, body.service_insulation .soorten-dakbedekking, body.service_renovation .soorten-dakbedekking, body.service_slates .soorten-dakbedekking, body.service_solarpanels .soorten-dakbedekking {
height: auto;
padding: 50px 0; }
body.service_roofing .soorten-dakbedekking .left, body.service_roofing .soorten-dakbedekking .right, body.service_insulation .soorten-dakbedekking .left, body.service_insulation .soorten-dakbedekking .right, body.service_renovation .soorten-dakbedekking .left, body.service_renovation .soorten-dakbedekking .right, body.service_slates .soorten-dakbedekking .left, body.service_slates .soorten-dakbedekking .right, body.service_solarpanels .soorten-dakbedekking .left, body.service_solarpanels .soorten-dakbedekking .right {
margin-left: 0;
width: 100%; }
body.service_roofing .soorten-dakbedekking .left h2, body.service_roofing .soorten-dakbedekking .right h2, body.service_insulation .soorten-dakbedekking .left h2, body.service_insulation .soorten-dakbedekking .right h2, body.service_renovation .soorten-dakbedekking .left h2, body.service_renovation .soorten-dakbedekking .right h2, body.service_slates .soorten-dakbedekking .left h2, body.service_slates .soorten-dakbedekking .right h2, body.service_solarpanels .soorten-dakbedekking .left h2, body.service_solarpanels .soorten-dakbedekking .right h2 {
margin-bottom: 55px; }
body.service_roofing .soorten-dakbedekking .left .imgHolder, body.service_roofing .soorten-dakbedekking .right .imgHolder, body.service_insulation .soorten-dakbedekking .left .imgHolder, body.service_insulation .soorten-dakbedekking .right .imgHolder, body.service_renovation .soorten-dakbedekking .left .imgHolder, body.service_renovation .soorten-dakbedekking .right .imgHolder, body.service_slates .soorten-dakbedekking .left .imgHolder, body.service_slates .soorten-dakbedekking .right .imgHolder, body.service_solarpanels .soorten-dakbedekking .left .imgHolder, body.service_solarpanels .soorten-dakbedekking .right .imgHolder {
padding-bottom: 50%; }
body.service_roofing .soorten-dakbedekking .textholder, body.service_insulation .soorten-dakbedekking .textholder, body.service_renovation .soorten-dakbedekking .textholder, body.service_slates .soorten-dakbedekking .textholder, body.service_solarpanels .soorten-dakbedekking .textholder {
width: 100%;
margin-left: 0; }
body.service_roofing .uit-je-dak .textholder a.button, body.service_insulation .uit-je-dak .textholder a.button, body.service_renovation .uit-je-dak .textholder a.button, body.service_slates .uit-je-dak .textholder a.button, body.service_solarpanels .uit-je-dak .textholder a.button {
min-width: 180px;
height: 40px;
font-size: 16px;
line-height: 40px; } }
@media screen and (max-width: 760px) {
body.service_roofing .uit-je-dak, body.service_insulation .uit-je-dak, body.service_renovation .uit-je-dak, body.service_slates .uit-je-dak, body.service_solarpanels .uit-je-dak {
height: auto;
padding: 10%; }
body.service_roofing .uit-je-dak .textholder, body.service_insulation .uit-je-dak .textholder, body.service_renovation .uit-je-dak .textholder, body.service_slates .uit-je-dak .textholder, body.service_solarpanels .uit-je-dak .textholder {
width: 100%;
margin: 0 5%;
max-width: 90%;
text-align: center; }
body.service_roofing .uit-je-dak .textholder h1, body.service_insulation .uit-je-dak .textholder h1, body.service_renovation .uit-je-dak .textholder h1, body.service_slates .uit-je-dak .textholder h1, body.service_solarpanels .uit-je-dak .textholder h1 {
margin: 10% 0; }
body.service_roofing .uit-je-dak .textholder h2 p, body.service_insulation .uit-je-dak .textholder h2 p, body.service_renovation .uit-je-dak .textholder h2 p, body.service_slates .uit-je-dak .textholder h2 p, body.service_solarpanels .uit-je-dak .textholder h2 p {
font-size: 28px;
line-height: 40px; }
body.service_roofing .uit-je-dak .textholder a.button, body.service_insulation .uit-je-dak .textholder a.button, body.service_renovation .uit-je-dak .textholder a.button, body.service_slates .uit-je-dak .textholder a.button, body.service_solarpanels .uit-je-dak .textholder a.button {
font-size: 16px;
line-height: 40px; }
body.service_roofing .uit-je-dak .imgholder, body.service_insulation .uit-je-dak .imgholder, body.service_renovation .uit-je-dak .imgholder, body.service_slates .uit-je-dak .imgholder, body.service_solarpanels .uit-je-dak .imgholder {
display: none; } }
@media screen and (max-width: 435px) {
body.service_roofing, body.service_insulation, body.service_renovation, body.service_slates, body.service_solarpanels {
padding-top: 90px; }
body.service_roofing .services-intro, body.service_insulation .services-intro, body.service_renovation .services-intro, body.service_slates .services-intro, body.service_solarpanels .services-intro {
margin-bottom: 20px; }
body.service_roofing .services-intro .grid-row .grid-col h1, body.service_insulation .services-intro .grid-row .grid-col h1, body.service_renovation .services-intro .grid-row .grid-col h1, body.service_slates .services-intro .grid-row .grid-col h1, body.service_solarpanels .services-intro .grid-row .grid-col h1 {
font-size: 1.7em; }
body.service_roofing .services-intro .grid-row .grid-col h1 svg, body.service_insulation .services-intro .grid-row .grid-col h1 svg, body.service_renovation .services-intro .grid-row .grid-col h1 svg, body.service_slates .services-intro .grid-row .grid-col h1 svg, body.service_solarpanels .services-intro .grid-row .grid-col h1 svg {
width: 40px;
height: 24px;
margin-right: 14px; }
body.service_roofing .services-intro .grid-row .right .text, body.service_insulation .services-intro .grid-row .right .text, body.service_renovation .services-intro .grid-row .right .text, body.service_slates .services-intro .grid-row .right .text, body.service_solarpanels .services-intro .grid-row .right .text {
font-size: 16px;
line-height: 24px;
margin-bottom: 40px; }
body.service_roofing .services-intro .grid-row .grid-col .first-img,
body.service_roofing .services-intro .grid-row .grid-col .second-img,
body.service_roofing .services-intro .grid-row .grid-col .third-img, body.service_insulation .services-intro .grid-row .grid-col .first-img,
body.service_insulation .services-intro .grid-row .grid-col .second-img,
body.service_insulation .services-intro .grid-row .grid-col .third-img, body.service_renovation .services-intro .grid-row .grid-col .first-img,
body.service_renovation .services-intro .grid-row .grid-col .second-img,
body.service_renovation .services-intro .grid-row .grid-col .third-img, body.service_slates .services-intro .grid-row .grid-col .first-img,
body.service_slates .services-intro .grid-row .grid-col .second-img,
body.service_slates .services-intro .grid-row .grid-col .third-img, body.service_solarpanels .services-intro .grid-row .grid-col .first-img,
body.service_solarpanels .services-intro .grid-row .grid-col .second-img,
body.service_solarpanels .services-intro .grid-row .grid-col .third-img {
width: 90%;
margin: 0;
margin-bottom: 10px;
float: none;
pointer-events: none; }
body.service_roofing .services-intro .grid-row .grid-col .second-img,
body.service_roofing .services-intro .grid-row .grid-col .third-img, body.service_insulation .services-intro .grid-row .grid-col .second-img,
body.service_insulation .services-intro .grid-row .grid-col .third-img, body.service_renovation .services-intro .grid-row .grid-col .second-img,
body.service_renovation .services-intro .grid-row .grid-col .third-img, body.service_slates .services-intro .grid-row .grid-col .second-img,
body.service_slates .services-intro .grid-row .grid-col .third-img, body.service_solarpanels .services-intro .grid-row .grid-col .second-img,
body.service_solarpanels .services-intro .grid-row .grid-col .third-img {
width: 100%; }
body.service_roofing .soorten-dakbedekking, body.service_insulation .soorten-dakbedekking, body.service_renovation .soorten-dakbedekking, body.service_slates .soorten-dakbedekking, body.service_solarpanels .soorten-dakbedekking {
padding-top: 20px;
margin-bottom: 0; }
body.service_roofing .soorten-dakbedekking .left h2, body.service_insulation .soorten-dakbedekking .left h2, body.service_renovation .soorten-dakbedekking .left h2, body.service_slates .soorten-dakbedekking .left h2, body.service_solarpanels .soorten-dakbedekking .left h2 {
margin: 0 50px 30px 0;
font-size: 28px; }
body.service_roofing .soorten-dakbedekking .textholder .text p, body.service_insulation .soorten-dakbedekking .textholder .text p, body.service_renovation .soorten-dakbedekking .textholder .text p, body.service_slates .soorten-dakbedekking .textholder .text p, body.service_solarpanels .soorten-dakbedekking .textholder .text p {
font-size: 16px;
line-height: 24px; }
body.service_roofing .dienstenLink, body.service_insulation .dienstenLink, body.service_renovation .dienstenLink, body.service_slates .dienstenLink, body.service_solarpanels .dienstenLink {
display: none; }
body.service_roofing .call-to-action-contact, body.service_insulation .call-to-action-contact, body.service_renovation .call-to-action-contact, body.service_slates .call-to-action-contact, body.service_solarpanels .call-to-action-contact {
margin-bottom: 0;
padding-bottom: 0;
left: 0; }
body.service_roofing .call-to-action-contact .grid-row, body.service_insulation .call-to-action-contact .grid-row, body.service_renovation .call-to-action-contact .grid-row, body.service_slates .call-to-action-contact .grid-row, body.service_solarpanels .call-to-action-contact .grid-row {
width: 100%; }
body.service_roofing .call-to-action-contact .grid-row .cta-text, body.service_insulation .call-to-action-contact .grid-row .cta-text, body.service_renovation .call-to-action-contact .grid-row .cta-text, body.service_slates .call-to-action-contact .grid-row .cta-text, body.service_solarpanels .call-to-action-contact .grid-row .cta-text {
width: 100%;
margin: 0;
padding-bottom: 5%; }
body.service_roofing .call-to-action-contact .grid-row .cta-text h2, body.service_roofing .call-to-action-contact .grid-row .cta-text h4, body.service_insulation .call-to-action-contact .grid-row .cta-text h2, body.service_insulation .call-to-action-contact .grid-row .cta-text h4, body.service_renovation .call-to-action-contact .grid-row .cta-text h2, body.service_renovation .call-to-action-contact .grid-row .cta-text h4, body.service_slates .call-to-action-contact .grid-row .cta-text h2, body.service_slates .call-to-action-contact .grid-row .cta-text h4, body.service_solarpanels .call-to-action-contact .grid-row .cta-text h2, body.service_solarpanels .call-to-action-contact .grid-row .cta-text h4 {
padding-left: 30%; }
body.service_roofing .call-to-action-contact .grid-row .round-portrait, body.service_insulation .call-to-action-contact .grid-row .round-portrait, body.service_renovation .call-to-action-contact .grid-row .round-portrait, body.service_slates .call-to-action-contact .grid-row .round-portrait, body.service_solarpanels .call-to-action-contact .grid-row .round-portrait {
left: 10%; }
body.service_roofing .call-to-action-contact .phone, body.service_roofing .call-to-action-contact .mail, body.service_insulation .call-to-action-contact .phone, body.service_insulation .call-to-action-contact .mail, body.service_renovation .call-to-action-contact .phone, body.service_renovation .call-to-action-contact .mail, body.service_slates .call-to-action-contact .phone, body.service_slates .call-to-action-contact .mail, body.service_solarpanels .call-to-action-contact .phone, body.service_solarpanels .call-to-action-contact .mail {
height: 65px; }
body.service_roofing .call-to-action-contact .phone img, body.service_roofing .call-to-action-contact .mail img, body.service_insulation .call-to-action-contact .phone img, body.service_insulation .call-to-action-contact .mail img, body.service_renovation .call-to-action-contact .phone img, body.service_renovation .call-to-action-contact .mail img, body.service_slates .call-to-action-contact .phone img, body.service_slates .call-to-action-contact .mail img, body.service_solarpanels .call-to-action-contact .phone img, body.service_solarpanels .call-to-action-contact .mail img {
height: 75%; } }
/*==========================================================================
* Main page
* ========================================================================== */
body.contractors {
/* Mobile view
* ========================================================================== */ }
body.contractors .contractors-content {
position: relative; }
body.contractors .contractors-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40%;
position: absolute;
z-index: -1;
background: white url("/img/clouds_bg.jpg") no-repeat; }
body.contractors .top {
position: relative;
overflow: visible;
font-size: 1em;
line-height: 1.6em;
height: 0;
padding-bottom: 73%;
padding-top: 65px; }
@media screen and (min-width: 1400px) {
body.contractors .top {
padding-bottom: 1024px; } }
body.contractors .top .textholder {
vertical-align: top;
font-size: 18px;
line-height: 28px;
color: #616161;
overflow: visible; }
body.contractors .top .textholder h1 {
margin-top: 41%;
font-style: italic;
font-size: 40px;
line-height: 38.46px;
letter-spacing: -0.2px;
color: #424242;
margin-bottom: 50px; }
body.contractors .top .textholder .text {
margin-bottom: 60px;
font-size: 18px;
line-height: 28px;
color: #616161; }
body.contractors .top .imgholder {
vertical-align: bottom;
max-height: 400px;
overflow: visible;
z-index: 5; }
body.contractors .top .imgholder figure {
width: 100%;
margin-top: 80px;
background-size: cover;
background-position: bottom center;
max-height: 700px;
display: block;
padding-bottom: 130%; }
body.contractors .top .big-hexagon-holder {
display: block;
bottom: 360px;
overflow: visible;
position: relative;
left: -344px;
z-index: -1; }
body.contractors .top .big-hexagon-holder > svg {
transform: rotate(30deg) scale(0.4); }
body.contractors .top .big-hexagon-holder > svg > .st0 {
fill: url(#SVGID_1_); }
body.contractors .top .scroll-hinter {
position: relative;
z-index: 35;
bottom: 660px;
left: -120px;
width: 130px; }
body.contractors .keurmerk {
margin-top: 110px;
margin-bottom: 150px;
height: 650px;
position: relative; }
body.contractors .keurmerk .imgholder {
margin-left: 12.1428571429%;
z-index: 2;
padding-bottom: 3%; }
body.contractors .keurmerk .imgholder img {
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 50px; }
body.contractors .keurmerk .textholder {
margin-left: -7.8571428571%;
padding: 6% 9% 6.5% 16.4285714286%;
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%);
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1);
z-index: 1; }
body.contractors .keurmerk .textholder h1 {
font-style: italic;
font-size: 35px;
line-height: 38.46px;
letter-spacing: -0.35px;
color: #FFFFFF; }
body.contractors .keurmerk .textholder p {
padding-top: 23px;
font-size: 18px;
line-height: 28px;
color: #FFFFFF; }
body.contractors .keurmerk .big-hexagon-holder {
position: relative;
right: -50%;
top: -44%;
z-index: 0;
width: 10%;
-webkit-animation: spin1 360s linear infinite;
animation: spin1 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin1 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.16); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.16); } }
body.contractors .keurmerk .big-hexagon-holder svg {
width: 50%; }
body.contractors .contact {
background-color: #424242;
height: 450px;
color: white;
padding-top: 72px;
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1);
position: relative; }
body.contractors .contact .grid-col {
vertical-align: top; }
body.contractors .contact .titleholder {
margin-left: 14.2857142857%;
padding-right: 50px; }
body.contractors .contact .titleholder h1 {
margin-top: 12px;
font-style: italic;
font-size: 35px;
line-height: 38.46px;
letter-spacing: -0.35px; }
body.contractors .contact .textholder {
color: white; }
body.contractors .contact .textholder p {
font-size: 18px;
line-height: 28px;
padding-bottom: 12px; }
body.contractors .contact .big-hexagon-holder {
position: absolute;
left: -1.5%;
bottom: -64%;
z-index: -1;
-webkit-animation: spin2 360s linear infinite;
animation: spin2 360s linear infinite;
-webkit-backface-visibility: hidden; }
@-webkit-keyframes spin2 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.32);
-moz-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.32);
-ms-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.32);
-o-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.32);
-spec-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.32);
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.32); }
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.32);
-moz-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.32);
-ms-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.32);
-o-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.32);
-spec-transform: translate3d(0, 0, 0) rotate(360deg) scale(0.32);
transform: translate3d(0, 0, 0) rotate(360deg) scale(0.32); } }
body.contractors .contact .big-hexagon-holder > svg {
width: 100%; }
body.contractors .contact .big-hexagon-holder > svg > .st0 {
fill: url(#SVGID_1_); }
body.contractors .reference-linkholder {
text-align: center;
margin: 90px 0 60px 0;
font-size: 18px;
line-height: 28px; }
body.contractors .reference-linkholder a {
text-decoration: none;
color: #616161;
padding-bottom: 1px;
border-bottom: solid 2px; }
body.contractors .reference-linkholder a:hover {
color: #ff8f00;
border-bottom: solid 2px #ff8f00; }
body.contractors .reference-linkholder .yellowline {
width: 10px;
height: 10px;
margin: 20px 0;
display: inline-block;
border-bottom: solid 2px #ff8f00; }
body.contractors .uit-je-dak .imgholder {
position: absolute; }
@media screen and (max-width: 1025px) {
body.contractors .top .textholder h1 {
margin-top: 34%;
font-size: 30px; }
body.contractors .top .textholder p {
font-size: 15px;
line-height: 25px; }
body.contractors .top .big-hexagon-holder, body.contractors .top .scroll-hinter {
display: none; }
body.contractors .keurmerk .imgholder {
padding-bottom: 15%; }
body.contractors .contractors-content a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; } }
@media screen and (max-width: 840px) {
body.contractors .top .breadcrumb {
margin-bottom: 75px; }
body.contractors .top .textholder h1 {
margin-top: 0; }
body.contractors .top .imgholder img {
margin-top: 0; }
body.contractors .contractors-content a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; }
body.contractors .contact .titleholder, body.contractors .contact .textholder {
width: 75%;
margin-left: 14.2857142857%; } }
@media screen and (max-width: 760px) {
body.contractors .top {
height: auto;
padding-bottom: 0;
padding-top: 35px; }
body.contractors .top .imgholder figure {
margin-top: 0; }
body.contractors .top .breadcrumb {
margin-bottom: 0;
margin-left: 0; }
body.contractors .top .textholder {
width: 100%;
margin-left: 0;
margin-bottom: 50px; }
body.contractors .top .textholder h1 {
margin-top: 10%; }
body.contractors .top .imgholder {
width: 100%;
max-height: none;
margin-bottom: 50px; }
body.contractors .keurmerk {
height: auto;
width: 100%;
margin: 110px 0 0 0; }
body.contractors .keurmerk .big-hexagon-holder {
display: none; }
body.contractors .keurmerk .textholder {
width: 100%;
margin-left: 0;
padding: 6% 9%; }
body.contractors .keurmerk .imgholder {
width: 100%;
background: linear-gradient(-90deg, #ff8f00 0%, #ff6f00 100%);
margin-left: 0;
padding: 9% 0 0 9%; }
body.contractors .keurmerk .imgholder img {
margin-bottom: 0;
float: left;
width: 40%;
margin-right: 10%; }
body.contractors .contact {
height: auto;
padding: 72px 0; }
body.contractors .contact .titleholder, body.contractors .contact .textholder {
width: 85%;
margin-left: 7.1428571429%; } }
@media screen and (max-width: 435px) {
body.contractors .top .textholder h1 {
font-size: 26px;
margin: 5% 0; }
body.contractors .top .textholder .text {
margin-bottom: 30px; }
body.contractors .top .imgholder {
float: none;
width: 116.6666666667%;
position: relative;
margin-left: -8.3333333333%;
margin-bottom: 0; }
body.contractors .keurmerk {
margin: 0; }
body.contractors .keurmerk .textholder h1 {
font-size: 26px;
margin: 5% 0; }
body.contractors .keurmerk .textholder p {
font-size: 16px;
line-height: 24px; }
body.contractors .contact {
padding: 15px 0px 45px 0; }
body.contractors .contact .titleholder h1 {
font-size: 26px;
margin: 5% 0; }
body.contractors .contact .textholder p {
font-size: 16px;
line-height: 24px; }
body.contractors .referenties {
display: none; } }
/*==========================================================================
* Main page
* ========================================================================== */
body.testimonials {
/* Mobile view
* ========================================================================== */ }
body.testimonials .testimonials-content {
position: relative; }
body.testimonials .testimonials-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: white url("/img/clouds_bg.jpg") no-repeat; }
body.testimonials .breadcrumb {
margin: 0;
padding: 108px 0 0 8.3333333333%; }
body.testimonials .top {
position: relative;
overflow: visible;
font-size: 1em;
line-height: 1.6em;
height: 380px; }
body.testimonials .top .textholder {
vertical-align: top;
text-align: center; }
body.testimonials .top .textholder h1 {
margin-top: 100px;
font-style: italic;
font-size: 40px;
line-height: 38.46px;
letter-spacing: -0.2px;
color: #424242; }
body.testimonials .top .textholder .text {
margin-bottom: 30px; }
body.testimonials .top .textholder .text p {
font-size: 26px;
line-height: 38px;
color: #616161; }
body.testimonials .top .imgholder {
width: 49.6428571429%;
vertical-align: bottom;
z-index: 5; }
body.testimonials .top .imgholder img {
width: 100%;
margin-top: 80px; }
body.testimonials .top .big-hexagon-holder {
display: block;
bottom: -14%;
overflow: visible;
position: absolute;
left: 26.5%;
z-index: 0; }
body.testimonials .top .big-hexagon-holder > svg {
transform: rotate(30deg) scale(0.4); }
body.testimonials .top .big-hexagon-holder > svg > .st0 {
fill: url(#SVGID_1_); }
body.testimonials .top .scroll-hinter {
position: absolute;
z-index: 35;
top: 87%;
left: 42%;
width: 7.5%; }
body.testimonials .testimonial-left {
padding: 120px 0 60px 0;
margin-bottom: 40px;
border-bottom: solid 1px rgba(0, 0, 0, 0.1); }
body.testimonials .testimonial-left:last-child {
border-bottom: none; }
body.testimonials .testimonial-left .grid-col {
overflow: visible;
vertical-align: top; }
body.testimonials .testimonial-left .textholder {
padding: 50px 0 65px 60px;
box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.15);
background-color: #FAFAFA; }
body.testimonials .testimonial-left .textholder h2 {
font-style: italic;
font-size: 18px;
line-height: 28px;
margin: 32px 0;
text-align: center;
width: 100%;
color: #ff8f00; }
body.testimonials .testimonial-left .textholder .project-date, body.testimonials .testimonial-left .textholder .project-location {
font-style: italic;
font-family: "Myriad Pro", sans-serif;
font-size: 15px;
line-height: 28px;
color: #424242;
opacity: 0.45;
filter: alpha(opacity=45) progid:DXImageTransform.Microsoft.Alpha(opacity=45); }
body.testimonials .testimonial-left .textholder .project-location {
font-family: "Lato", sans-serif;
text-align: right; }
body.testimonials .testimonial-left .round-portrait {
width: 31%;
height: 0;
border-radius: 50%;
position: absolute;
left: 36%;
margin-top: -28%;
overflow: hidden;
z-index: 10;
padding-bottom: 31%;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1); }
body.testimonials .testimonial-left .round-portrait figure {
height: 100%;
background-size: cover; }
body.testimonials .testimonial-left p {
font-size: 18px;
line-height: 28px;
color: #616161;
height: 155px; }
body.testimonials .testimonial-left a {
font-size: 18px;
line-height: 28px;
text-decoration: none;
color: #616161;
border-bottom: solid 1px;
top: 15px;
position: relative; }
body.testimonials .testimonial-left .images {
overflow: visible; }
body.testimonials .testimonial-left .images .main-image-holder {
width: 65.7142857143%; }
body.testimonials .testimonial-left .images .right-image-holder {
width: 17.1428571429%; }
body.testimonials .testimonial-left .images figure {
position: relative;
background-color: #616161; }
body.testimonials .testimonial-left .images figure.main-image {
padding-bottom: 90%;
width: 100%; }
body.testimonials .testimonial-left .images figure.right-image {
width: 100%;
padding-bottom: 100%;
margin-bottom: 28px; }
body.testimonials .testimonial-left .images figure span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center; }
body.testimonials .testimonial-left .images figure span.medium {
display: none; }
body.testimonials .call-to-action-contact {
margin-top: 150px;
padding-bottom: 200px; }
@media screen and (max-width: 840px) {
body.testimonials .top .textholder {
width: 75%;
margin-left: 10.7142857143%; }
body.testimonials .breadcrumb {
padding-top: 40px; } }
@media screen and (max-width: 760px) {
body.testimonials .top {
height: auto; }
body.testimonials .top .textholder {
width: 100%;
margin-left: 0; }
body.testimonials .top .textholder .text h1 {
font-size: 36px;
margin: 27px 0 10px 0; }
body.testimonials .top .textholder .text p {
font-size: 18px; }
body.testimonials .testimonial-left {
padding: 18% 0 60px 0;
width: 100%;
border-bottom: none; }
body.testimonials .testimonial-left .textholder, body.testimonials .testimonial-left .images {
width: 100%; }
body.testimonials .testimonial-left .textholder {
padding: 22px 20px;
padding-top: 28%;
box-shadow: none;
background-color: white; }
body.testimonials .testimonial-left .textholder h2 {
margin: 0; }
body.testimonials .testimonial-left .grid-col .col-12 {
width: 100%; }
body.testimonials .testimonial-left .images .main-image-holder {
width: 100%;
padding: 22px 20px;
margin-left: 0; }
body.testimonials .testimonial-left .images .right-image-holder {
width: 100%;
padding-left: 20px;
margin-left: 0; }
body.testimonials .testimonial-left .images .right-image-holder .right-image {
width: 31%;
padding-bottom: 30%;
margin-right: 2%;
float: left; }
body.testimonials .testimonial-left p {
font-size: 16px;
height: auto;
text-align: justify; }
body.testimonials .testimonial-left .round-portrait {
margin-top: -45%; } }
.jobs-content {
overflow: hidden; }
.job-description {
margin-bottom: 60px; }
.job-description h2 {
color: #ff8f00; }
.job-description p, .job-description ul {
color: #424242; }
@media screen and (max-width: 760px) {
.job-description {
width: 78.5714285714%; } }
.job-imgholder {
padding-top: 3.5em; }
.job-imgholder figure {
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center; }
@media screen and (max-width: 760px) {
.job-imgholder {
display: none; } }
body.jobs .jobs-content:after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -5;
background: white url("/img/clouds_bg.jpg") no-repeat; }
body.jobs .jobs-content .breadcrumb {
margin: 108px 0 0 0; }
body.jobs h1 {
font-style: italic;
font-size: 40px;
line-height: 38.46px;
letter-spacing: -0.2px;
color: #424242;
margin: 58px 0; }
body.jobs .jobs-intro {
padding: 0;
height: auto;
margin-bottom: 60px;
z-index: 1; }
body.jobs .jobs-intro .grid-col {
vertical-align: top; }
body.jobs .jobs-intro .grid-col h1 {
margin: 73px 0; }
body.jobs .jobs-intro .textholder {
margin-left: 7.1428571429%; }
body.jobs .jobs-intro .textholder .text {
font-size: 24px;
line-height: 38px;
color: #616161;
padding-top: 45px; }
body.jobs .jobs-intro .textholder .text p {
letter-spacing: -0.3px; }
body.jobs .jobs-diensten-menu {
margin-bottom: 110px;
z-index: 1; }
body.jobs .jobs-diensten-menu .grid-col {
vertical-align: top;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
overflow: visible; }
body.jobs .jobs-diensten-menu .grid-col article {
margin-bottom: 60px;
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1); }
body.jobs .jobs-diensten-menu .grid-col article a {
text-decoration: none;
padding: 30px;
background-color: white;
width: 100%; }
body.jobs .jobs-diensten-menu .grid-col article a .content {
color: #737373; }
body.jobs .jobs-diensten-menu .grid-col article a .content h3 {
color: #ff8f00; }
body.jobs .jobs-diensten-menu .grid-col article a:hover .content {
color: #333; }
body.jobs .jobs-diensten-menu h1 {
margin: 70px 0 77px 0; }
body.jobs .diensten-blok {
padding-top: 128px;
position: relative; }
body.jobs .diensten-blok h1 {
margin-bottom: 60px;
line-height: 60px;
text-align: center; }
body.jobs .diensten-blok .icon-holder {
height: 645px;
background-color: #424242;
margin-left: 3.5714285714%;
width: 92.8571428571%;
z-index: 1;
padding-top: 5px; }
body.jobs .diensten-blok .icon-holder .grid-row {
height: 275px; }
body.jobs .diensten-blok .icon-holder .grid-row .grid-col {
padding: 90px 0 0 65px;
text-align: center;
color: white;
width: 31.7857142857%;
height: 100%;
letter-spacing: 0.2px; }
body.jobs .diensten-blok .icon-holder .grid-row .grid-col h4 {
font-size: 28px;
line-height: 62px; }
body.jobs .diensten-blok .icon-holder .grid-row .grid-col img {
width: 55px;
height: 70px;
margin: 0 auto; }
body.jobs .diensten-blok .icon-holder .grid-row .grid-col p {
font-size: 18px;
line-height: 24px;
margin-top: -8px; }
body.jobs .diensten-blok .icon-holder .grid-row .grid-col .button {
top: 70px; }
body.jobs .diensten-blok .hexagon-frame {
height: 100%;
width: 100%;
position: absolute;
top: 0;
overflow: hidden;
z-index: 0; }
body.jobs .diensten-blok .hexagon-frame .big-hexagon-holder {
left: 62.5%;
position: relative;
top: 25%; }
body.jobs .diensten-blok .hexagon-frame .big-hexagon-holder svg {
transform: rotate(10deg) scale(1.1); }
body.jobs .diensten-blok .hexagon-frame .big-hexagon-holder svg .st0 {
fill: url(#SVGID_1_); }
body.jobs .diensten-blok .dienstenLink {
width: 100%;
font-size: 19px;
line-height: 24px;
text-align: center;
padding: 67px 0 125px; }
body.jobs .diensten-blok .dienstenLink a {
color: #616161;
text-decoration: none;
border-bottom: solid 2px #616161;
padding-bottom: 1px; }
body.jobs .call-to-action-contact {
left: -7.1428571429%; }
@media screen and (max-width: 1120px) {
body.jobs .jobs-diensten-menu {
height: 930px; }
body.jobs .jobs-diensten-menu .diensten-menu .grid-col a {
flex-basis: 100%;
flex-grow: 0;
margin-right: 0; }
body.jobs .jobs-diensten-menu .diensten-menu .grid-col a .button {
margin-bottom: 40px; } }
@media screen and (max-width: 840px) {
body.jobs .jobs-content .breadcrumb {
margin-top: 40px; }
body.jobs .top {
padding-top: 30px; }
body.jobs .jobs-intro .offset-1 {
margin-left: 0; }
body.jobs .jobs-intro .textholder .text {
font-size: 20px; }
body.jobs .jobs-diensten-menu {
margin-bottom: 110px;
z-index: 1; }
body.jobs .jobs-diensten-menu .offset-1 {
margin-left: 0; }
body.jobs .jobs-diensten-menu .grid-col article {
width: 100%;
margin-left: 10px; }
body.jobs .jobs-diensten-menu .grid-col article a {
flex-basis: 100%;
font-size: 18px; }
body.jobs .uit-je-dak a.button {
min-width: 180px;
height: 40px;
font-size: 14px;
line-height: 40px; } }
@media screen and (max-width: 760px) {
body.jobs .jobs-intro {
height: auto;
padding-bottom: 0;
margin-bottom: 50px; }
body.jobs .jobs-intro .grid-col {
width: 100%; }
body.jobs .jobs-intro .grid-col h1 {
margin: 10% 0; }
body.jobs .jobs-intro .textholder {
margin-left: 0; }
body.jobs .jobs-intro .textholder .text {
padding-top: 0;
font-size: 18px; }
body.jobs .jobs-intro .imgholder {
width: 100%; }
body.jobs .jobs-diensten-menu {
height: auto;
margin-bottom: 50px; } }
@media screen and (max-width: 435px) {
body.jobs .jobs-content .breadcrumb {
margin-top: 0; }
body.jobs .jobs-intro .grid-col h1 {
font-size: 32px; }
body.jobs .jobs-intro .textholder .text p {
margin: 0;
font-size: 16px;
line-height: 24px; }
body.jobs .jobs-diensten-menu h1 {
margin-bottom: 10%; }
body.jobs .jobs-diensten-menu .grid-row .col-13 {
width: 100%;
margin-left: 0; }
body.jobs .jobs-diensten-menu .grid-row .col-13 a {
height: 70px;
line-height: 70px;
padding-top: 0;
margin-bottom: 30px; }
body.jobs .jobs-diensten-menu .grid-row .col-13 a:before {
margin-right: 30%; }
body.jobs .jobs-diensten-menu .grid-row .col-13 a svg {
left: 18px;
width: 35px;
top: 0; }
body.jobs .jobs-diensten-menu .grid-row .col-13 a .bg {
width: 70px;
height: 70px;
left: 0;
top: 0; }
body.jobs .uit-je-dak {
margin-bottom: 1px; }
body.jobs .call-to-action-contact {
margin-bottom: 0;
padding-bottom: 0;
left: 0; }
body.jobs .call-to-action-contact .grid-row {
width: 100%; }
body.jobs .call-to-action-contact .grid-row .cta-text {
width: 100%;
margin: 0;
padding-bottom: 5%; }
body.jobs .call-to-action-contact .grid-row .cta-text h2, body.jobs .call-to-action-contact .grid-row .cta-text h4 {
padding-left: 30%; }
body.jobs .call-to-action-contact .grid-row .round-portrait {
left: 10%; }
body.jobs .call-to-action-contact .phone, body.jobs .call-to-action-contact .mail {
height: 65px; }
body.jobs .call-to-action-contact .phone img, body.jobs .call-to-action-contact .mail img {
height: 75%; } }
/*==========================================================================
* Sitemap page
* ========================================================================== */
.sitemap .content {
padding: 60px 0; }
.sitemap ul {
padding-bottom: 20px; }
.sitemap ul ul {
padding-top: 15px;
padding-left: 20px; }
/*==========================================================================
* Error pages
* ========================================================================== */
.error-page .content-placeholder {
padding: 100px 0; }
@media screen and (max-width: 840px) {
.error-page .content-placeholder {
padding-top: 160px; } }
.error-page .content-placeholder .content h2 {
max-width: none; }
/*# sourceMappingURL=style.css.map */