/* ------------------------------------------------ BASIC STYLING OF PAGE and REUSABLE CLASSNAMES */

/* ----CSS RESET BY ERIC MEYERS

http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* other resets - we don't want extra spaces that we can not control */
img {
    line-height: 0;
}
/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
}  


/* ------------------------- BASIC */

body {
    background: url("images/top-pattern.jpg") 0px 1px repeat-x #f7f8f8;
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
    color: #000; 
    margin:0; 
    padding: 0;
}

@media screen and (max-device-width: 640px) and (orientation: portrait) {
    body {
        background: url("images/top-pattern-small.jpg") 0px 1px repeat-x #f7f8f8;
        font-size: 62.5%;
        font-family: Arial, Helvetica, sans-serif;
        color: #000; 
        margin:0; 
        padding: 0;
    }
    
}


/* ----- Reusable classes */

/* When we want to hide a title with an indent, you can use this selector 
* for example h2.noshowtitle and in the code <h2 class="noshowtitle">Title</h2
*/
.noshowtitle { 
    text-indent: -9999px;
    float: left;
}

.topmargin {
    padding: 20px 0 0 0;
}


/* ----- Titles */

/* h1 is reserved for titles of pages - in this case we hide it because we didn't design a title on the homepage
* so we hide it by putting a negative text-indent and make it float, otherwise it would be visible 
*/
h1 {}

h2 {
    font-size: 100%;
    margin-bottom: 25px;
    font-weight: bold;
    font-size: 1.9rem;
    font-size: 25px;
    color: #CE4684;
}

h3 {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 1.3rem;
    font-size: 13px;
}

h4 {
    line-height: 12px; 
    font-weight:  bold;
}



/* ------------------------------------------------------------------------------------------------ POSITION OF BASE ELEMENTS
* --------------------------------------------------------------------------------------------------------------------------
*/


/* We have multiple containers that have a with of 100% - full screen width - and a wrap that has the width of 1460px to wrap content
* this way of working gives us the posibility to put a theme on the site when needed
*/

/* The main markup of the style consists of HEADER - LEFT - BODY-MAIN  (IN BODY-MAIN WE HAVE IMAGETOP - LEFTSIDE AND RIGHTSIDE) - FOOTER
*/



#container {
    /*width: 90%;
    */ max-width: 1460px;
    margin: 0 auto;
}

#bodycontainer {
    /* width: 90%;
    */ max-width: 1460px;
    margin: 0 auto;
    background: #f7f8f8;
    overflow: hidden;
}

/* this reduces content to 960px and we center it on the page */
.wrap {
    margin: 0 auto;
    max-width: 1040px; /* 90%;*/
    position: relative; /* this element is positioned as relative, because this is needed to position the logo as absolute */
}

@media screen and (max-device-width: 640px) and (orientation: portrait) {
    .wrap {
        margin: 0 auto;
        max-width: 90%;
        position: relative; /* this element is positioned as relative, because this is needed to position the logo as absolute */
    }
}

#bodycontainer .wrap {
    overflow: hidden;
    padding-top: 3.69%; /*40px*/;
}

#header {
    height: 116px;
}

@media screen and (max-device-width: 640px) and (orientation: portrait) {
    #header {
        height: 229px;
    }
}

.left {
    float: left;
    width: 24.47916667%;    /* 235px / 960px */
    margin-right: 4.6875%;  /*  45px / 960px */
    color: #6a6a6a;
    font-size 1.2 rem;
    font-size: 12px;
    line-height 2.2 rem;
    line-height: 22px;
}
.leftnavigation {
    width: 100%;
    margin-bottom: 27.65957447%;    /* 65px / 235px */
}

.bodymain{
    width: 70.834% /* 678px*/;
    float: left;
    position: relative;
    
}

footer{
    width: 100%;
    clear: both;
    background: #3b5985;
    border-top: solid 1px #436597; 
    box-shadow: inset #5785c6 0 1px 0 0 ;
}

footer .wrap {
    color: #cfd8ee;
    font-size: 1.2rem;
    font-size: 12px;
    line-height: 1.6rem;
    line-height: 16px;
    padding: 40px 0 40px 0;    
}



/* ------------------------------------------------------------------------------------------------ DETAILS FOR BASE ELEMENTS
* --------------------------------------------------------------------------------------------------------------------------
*/



/* -------------------------------- HEADER  --------------------------------*/

#slogan {
    float: right;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 9px;
    font-size: 0.9rem;
    text-align: center;
    padding: 1.2% 1% 1.3%; /* 14px 10px 5px 10px*/;
    margin-top: 7px;
    text-shadow: 1px 1px 2px #696969;
    background: #e74790;
    /*box shadow */
    box-shadow:         1px 3px 3px #b2b2b2;
    -moz-box-shadow:    1px 3px 3px #b2b2b2;
    -webkit-box-shadow: 1px 3px 3px #b2b2b2;
}

.ie7 #slogan,
.ie8 #slogan {
    
    float: right;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    font-size: 1.2rem;
    text-align: center;
    padding: 1.2% 1% 1.3%; /* 14px 10px 5px 10px*/;
    margin-top: 7px;
}

@media screen and (max-device-width: 640px) and (orientation: portrait)  {
    #slogan {
        float: none;
        font-size: 10px;
        font-size: 1.0rem;
        text-align: center;
        padding: 1.8% 0% 3.5% 0%; /* 14px 10px 5px 10px*/;
        margin-top: -53px;
    }
}

#logo {
    background: url( "images/logo.jpg" ) no-repeat;
    width: 258px;
    height: 47px;
    text-indent: -999px;
    position: absolute;
    top: 35px;
    left: -6px;
    margin-left: 5px;
}

@media screen and (max-device-width: 640px) and (orientation: portrait)  {
    #logo {
        background: url( "images/logo.jpg" ) no-repeat;
        width: 258px;
        height: 47px;
        margin-left: 5px;
        text-indent: -999px;
        position: relative;
        margin: 0 auto;
        top: 68px;
    }
}

/* ----- TOP NAVIGATION -----  */


.topnavigation {
    position: absolute;
    top:70px;
    right: 0px;
}

@media screen and (max-device-width: 640px) and (orientation: portrait) {
    .topnavigation {
        position: relative;
        height: 50px;
        clear: both;
        top: 118px;
        margin-top: 0px;
        width: 100%;
        float: left;
    }
}

.topnavigation li {
    list-style: none;
    float: left;
}

.topnavigation li a {
    display: inline-block;
    margin: 0 0 0 4px;
    padding: 15px;
    height: 1px;
    text-decoration: none;
    font-weight: bold;
    color: #7d7D7D;
    font-size: 1.3rem;
    font-size: 13px;
    line-height:  0px;
    /* text-dropshadow - in this case inside the characters */
    text-shadow: 1px 1px #fff, -1px -1px #dcdcdc;
    /* rounded corners */
    border-radius: .3em;
    -moz-border-radius: .3em;
    background: #d8d8d8;
    /* background* */
    background: -moz-linear-gradient(#fefefe, #d8d8d8);
    background: -ms-linear-gradient(#fefefe, #d8d8d8);
    background: -o-linear-gradient(#fefefe, #d8d8d8);
    background: -webkit-linear-gradient(#fefefe, #d8d8d8);
    /* box shadow */
    box-shadow:         0 1px 2px #ababab;
    -moz-box-shadow:    0 1px 2px #ababab;
    -webkit-box-shadow: 0 1px 2px #ababab;
}

.topnavigation li a:hover,
.topnavigation li a.active {
    color: #fff;
    /* text-dropshadow - in this case inside the characters */
    text-shadow: 1px 1px #e9599b, -1px -1px #bf3b77;
    /* rounded corners */
    border-radius: .3em;
    -moz-border-radius: .3em;
    background: #bf3b77;
    /* background */
    background: -moz-linear-gradient(#e9599b, #bf3b77);
    background: -ms-linear-gradient(#e9599b, #bf3b77);
    background: -o-linear-gradient(#e9599b, #bf3b77);
    background: -webkit-linear-gradient(#e9599b, #bf3b77);
    /* box shadow */
    box-shadow:         1px -1px 2px #000;
    -moz-box-shadow:    1px -1px 2px #ababab;
    -webkit-box-shadow: 1px -1px 2px #ababab;
}



/* -------------------------------- GENERAL ELEMENTS - THEY ARE USED IN DIFFERENT AREAS  --------------------------------*/


.videocompilatie {
    margin-bottom: 25px;
    float: left;
}

.videocompilatie h3 {
    margin: 0 0 20px 0;
}

.videocompilatie p {
    float: left;
    padding: 0 20px 0 0;
    margin: 10px 0 0 0;
}

.img-videocompilatie {
    clear: both;
    position: relative;
}

.videocompilatie .img-videocompilatie img {
    width: 100%;
}

.videocompilatie .img-videocompilatie a {
    display:block;
}

.centered-icon {
    background-position: center center;
    background-repeat: no-repeat;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 100%;
}

.icon.centered-icon:hover {
    background-image: url("data:;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxlJREFUeNq0l21rUmEYx291m1P3ZHoUG6bTQGEji2ktBlJrn2Av9mKwzYGfICgi6E2DXtRn6EXsK2zUu0Cs9WBUoiSxJ3HT+QBC6Qu30v6XO4uD+HDO0d1w4TnH2//vvjzXfd//W8G6bLVaTdbvFBL62hEziBuIAYSDf76HOEF8RXzAQA7EiPWJ6HMbsWo0Gt1Wq9XCcZxRqVSqhoaGRujLUqn0q1qt/s3n84VUKpVRKBQJPN7AAN7JzZhDPHQ4HHcQNr1ez4nJpFgsFvb395O7u7tvcfscA8hLAU8hHnu9Xt/ExMRVOe8Q8J1IJPIZl88Aj4kBE3Td7/ffNJvNl7spvGw2mw6FQp9w+aQRrmzoa0Y86gW0LgYN0iJNvHtzO/B9n8830w46Pz/PICIJTpqk3Qo863Q679ntdmc7obm5ObawsMBUKpX4eQhN0saAZ5uBl1FItk4ip6enDBmwxcVFplarRcN57eVG8NT4+Pg1TBmj2JXK4/GwpaUlptPpRIFJmxjIekoInrZYLJzU4nG5XGxlZYWNjo6K6s8zpoVgN0akl1O5NpuNBQIBZjAYxGRNDLcQbMVfNix32iATtra2Vv9s13iGVQjW9aF1M2exlrNgMMgmJydbbwxnDF2zedxVi0aj7PDwUFTf8yzLf9D6+/sH5ELD4TDb3Nxs24cYxBJmnCqXy78vElrP7oyREoIT2M6KFwnlt0xiJITgL5lMJn+RUGrHx8cF3qn8B8eOjo6itIl39Er8BiEVStoovO9Y+aKNVb1BzqGTAAqQbW9vS4LyxoC0N87vhVtMCqNywktZxsbG9G3mItva2pIETSaTe7FY7DWyfdnKgdDS8wKb991eGAGBCyH/9QDgTLOM66YR8RMjdGElGkH2wz2AkvVZB3RP+F2z3TyHiAN+RavVarCuX5Jr9lAL73H5tJnZa2UjCB5Kp9OGSqWiHhwcHNBoNFqx1fsDLR6Pv+FN3oHckwTZlVWTyUSG3oxXwDUz9IVCIQ9Dn83lcrRAvOrG0Dc28te3ENdbHGG+IT4CuNPrs1NPD23/BBgAv99IJ+/oeOwAAAAASUVORK5CYII=");
    cursor: pointer;
}

.icon.centered-icon {
    background-image: url("data:;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAvhJREFUeNq0l11r2lAYx5dE++Jb1dqo9YWog+5CWsbsxdhaxobs5VsUvPBCpd+m9LMMBus63EUZzDm80Tmnzldq12pZR6v7P1soWWhsEvWBB6I5+f/OSc45z/8wdyaM0Wik6zlGQ1s70o/0IjmkQ/y/h7xCNpA1dOREjZhBRZsAcsOFCAQC1pWVFRPLsozFYpmnm/1+/2I4HI46nc55tVo9Yximi79z6MB3vSM2Ix+Fw2EBueRwOMxqRtLr9c7L5fJJqVT6hp/v0YGBFjCP3IrFYr5QKOTU8w0BPz46Oqrj8h3gbTVggj7d3t72ud1u6yQTr9VqnR0cHBD8jRzOytpakI+nAaUgDdIiTXx7yzjww83NTf846M7OzgOO4xgtcNIkbSVwMBKJhARBGPtNIXI/nU5vGY1GVi2cNEkbow7eBF7HRLLfJnKFWFtbu7e7u/vEarUa1cJF7XU5mPf5fG4sGZOKnervVoUldjeTyTzD8l5QAyZtYmDUvBS86vV6zVonj9/vDwL+HIKqnhUZq1KwCz1a0DNzsZO5U6nUC7xKm4pRE8MlBdvMZvO83mVjt9uXk8nky2g0ujyunciwScFzBoOBnWTN2my2pUQi8SoejwuKheEfY+6mdTxRFIvFr4VCoaOlOv2+vLwcYm1yeqG5XO7z3t5edlwbYhBLOuLTwWBwMUsohcg4lYK7KGe/ZgkVSyYxulLwj0ajMZgllKLZbJ6LTuUa3K7X6y0q4rd6JYQeKGnXarUmNr6WfFbnyDncJoDKxOXz+S9aoKIxIO3ctY7k3k/0ygkvZcWGsKgk4PF4uP39/Q9aoJVKpYfOFjHaj0oOhOpwHMU7NA0jIHEhZVy+BvhMyQjQjUOyK/TAlKBkfQ6lUPmrvl5uNNnwepZMJpMRG/uiXrOXzWaruHyr1uz9Z2/hHAQq4mpq9TTsrTTIrmzwPE+G3oLCT4aelRn6YbfbJUPfb7fbtEF8msTQy8MpHmE8CkeYpniEOZ722Wmqh7Y/AgwAm99XbaFC11UAAAAASUVORK5CYII=");
    cursor: pointer;
}

.rightside .videocompilatie .play{
    border: solid red 2px;
    height: 20px;
    width: 20px;
}



/* -------------------------------- LEFT  --------------------------------*/



/* ----- LEFT NAVIGATION -----  */

.leftnavigation {}

.leftnavigation h3 {
    margin: 0 0 10px 0;
}

.leftnavigation li { 
    margin: 0 0 4px 0;
}

.leftnavigation li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 1.3rem;
    font-size: 13px;
    line-height: 1.3rem;
    line-height: 13px;
    width: 92.5%;
    padding: 5% 3% 4.1% 5%;
    /* text-dropshadow */
    text-shadow: 1px 1px 2px #32486a;
    /* rounded corners */
    border-radius: .3em;
    -moz-border-radius: .3em;
    /*background*/
    background: #395681; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  #466aa0 0%, #395681 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#466aa0), color-stop(100%,#395681)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #466aa0 0%,#395681 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #466aa0 0%,#395681 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #466aa0 0%,#395681 100%); /* IE10+ */
    background: linear-gradient(top,  #466aa0 0%,#395681 100%); /* W3C */
    /*box shadow */
    box-shadow:         0 1px 1px #6f7070;
    -moz-box-shadow:    0 1px 1px #6f7070;
    -webkit-box-shadow: 0 1px 1px #6f7070;
}

.ie7 .leftnavigation li a {display: block; }
.ie8 .leftnavigation li a {text-indent: -9999px; }

.ie9 {filter: none;}

.leftnavigation li a.active { /* for the hover state I flipped all properties compared to the normal state */
    background: #395681; /* Old browsers */
    color: #c9d8e6;
    /* text-dropshadow */
    text-shadow: 1px -1px 2px #32486a;
    /*background*/
    background: #adbfd6; /* Old browsers */
    background: -moz-linear-gradient(top,  #adbfd6 0%, #7792b7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#adbfd6), color-stop(100%,#7792b7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #adbfd6 0%,#7792b7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #adbfd6 0%,#7792b7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #adbfd6 0%,#7792b7 100%); /* IE10+ */
    background: linear-gradient(top,  #adbfd6 0%,#7792b7 100%); /* W3C */
    /*box shadow */
    box-shadow:         inset 5px 5px 5px #7792B7;
    -moz-box-shadow:    inset 5px 5px 5px #7792B7;
    -webkit-box-shadow: inset 5px 5px 5px #7792B7;
}

.ie7 .leftnavigation li a.active,
.ie8 .leftnavigation li a.active,
.ie9 .leftnavigation li a.active {color: #000;}

.leftnavigation li a:hover {  /* for the hover state I flipped all properties compared to the normal state */
    /*background*/
    background: #395681; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5NCUiIHN0b3AtY29sb3I9IiMzOTU2ODEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDY2YWEwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  #395681 94%, #466aa0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(94%,#395681), color-stop(100%,#466aa0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #395681 94%,#466aa0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #395681 94%,#466aa0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #395681 94%,#466aa0 100%); /* IE10+ */
    background: linear-gradient(top,  #395681 94%,#466aa0 100%); /* W3C */
    
}

.ie7 .leftnavigation li a {
    text-indent: -999px;
}
/* older browsers need to have a fallback - in this case I used a sprite with a full button image for the backgrounds */
.ie7 .leftnavigation li.schilderwerken a,
.ie8 .leftnavigation li.schilderwerken a,
.ie7 .leftnavigation li.ontmossen a,
.ie8 .leftnavigation li.ontmossen a,
.ie7 .leftnavigation li.gevelschilderen a,
.ie8 .leftnavigation li.gevelschilderen a,
.ie7 .leftnavigation li.spuitwerken a,
.ie8 .leftnavigation li.spuitwerken a,
.ie7 .leftnavigation li.waterdichtingswerken a,
.ie8 .leftnavigation li.waterdichtingswerken a,
.ie7 .leftnavigation li.contact a,
.ie8 .leftnavigation li.contact a,
.ie7 .leftnavigation li.offerte a,
.ie8 .leftnavigation li.offerte a{
    background: url("images/sprite.png") no-repeat;
    text-decoration: none;
    color: #fff;
    font-size: 1.3rem;
    font-size: 13px;
    line-height: 1.3rem;
    line-height: 13px;
    padding: 5% 3% 4.1% 5%;
    width: 205px;
    height: 10px;
}

.ie7 .leftnavigation li.schilderwerken a               {background-position: -9px -208px }
.ie7 .leftnavigation li.ontmossen a                    {background-position: -9px -242px }
.ie7 .leftnavigation li.gevelschilderen a              {background-position: -9px -277px }
.ie7 .leftnavigation li.spuitwerken a                  {background-position: -9px -311px }
.ie7 .leftnavigation li.waterdichtingswerken a          {background-position: -9px -345px }
.ie7 .leftnavigation li.contact a                      {background-position: -9px -379px }
.ie7 .leftnavigation li.offerte a                      {background-position: -9px -413px }

.ie7 .leftnavigation li.schilderwerken a:hover         {background-position: -241px -208px}
.ie7 .leftnavigation li.ontmossen a:hover              {background-position: -241px -242px}
.ie7 .leftnavigation li.gevelschilderen a:hover        {background-position: -241px -277px}
.ie7 .leftnavigation li.spuitwerken a:hover            {background-position: -241px -311px}
.ie7 .leftnavigation li.waterdichtingswerken a:hover    {background-position: -241px -345px}
.ie7 .leftnavigation li.contact a:hover                {background-position: -241px -379px}
.ie7 .leftnavigation li.offerte a:hover                {background-position: -241px -413px}

.ie8 .leftnavigation li.schilderwerken a               {background-position: -9px -208px }
.ie8 .leftnavigation li.ontmossen a                    {background-position: -9px -242px }
.ie8 .leftnavigation li.gevelschilderen a              {background-position: -9px -277px }
.ie8 .leftnavigation li.spuitwerken a                  {background-position: -9px -311px }
.ie8 .leftnavigation li.waterdichtingswerken a          {background-position: -9px -345px }
.ie8 .leftnavigation li.contact a                      {background-position: -9px -379px }
.ie8 .leftnavigation li.offerte a                      {background-position: -9px -413px }

.ie8 .leftnavigation li.schilderwerken a:hover         {background-position: -241px -208px}
.ie8 .leftnavigation li.ontmossen a:hover              {background-position: -241px -242px}
.ie8 .leftnavigation li.gevelschilderen a:hover        {background-position: -241px -277px}
.ie8 .leftnavigation li.spuitwerken a:hover            {background-position: -241px -311px}
.ie8 .leftnavigation li.waterdichtingswerken a:hover   {background-position: -241px -345px}
.ie8 .leftnavigation li.contact a:hover                {background-position: -241px -379px}
.ie8 .leftnavigation li.offerte a:hover                {background-position: -241px -413px}



/* ----- TROEVEN -----  */

.troeven {
    margin-bottom: 65px
}

.troeven ol li {
    padding-left: 20px;
    Background-image: url(images/check.png);
    background-repeat: no-repeat;
    background-position: 0 .5em;
}


/* ----- VIDEOCOMPILATIE -----  */

.left .img-videocompilatie {
    width: 100% /*7%*/;
}



/* -------------------------------- BODY-MAIN   --------------------------------*/



/* --------------------- TOP IMAGE WITH SLOGAN */

.image-top {
    position: relative;
    margin: 0 0 6% 0;
}

img.dak-reinigen {
    position: relative;
    width: 100%;
}

a.slogan {
    display: block;
    width: 96.0%;
    position: static;
    overflow: hidden;
    left: 0;
    bottom: 0;
    margin: -4px 0 0 0;
    background-color: #e74790;
    color: #fff;
    text-decoration: none;
    font-size: 8.5px;
    font-size: 0.85rem;
    line-height: 11px;
    line-height: 1.1rem;
    padding: 2% ;
    box-shadow: -5px 10px 15px #888;
    color: #fff;
    
}

a.slogan:hover {color:#222;}
a.slogan:visited {color:#fff;}

span.image-slogan-left {
    float: left;
    width: 65%;
    color: #fff;
}

span.image-slogan-right {
    float: right;
    text-align: right;
    width: 25%;
    color: #fff;
}

.ie7 a.slogan,
.ie8 a.slogan {
    font-size: 12px;
}




/* --------------------- BODYMAIN (LEFTSIDE AND RIGHTSIDE )*/

/* ----- Properties for bodymain -----  */ 


/* ----- Links */

.bodymain a,
.bodymain a:visited { 
    color:#3b5985;
}

.bodymain a:hover { 
    text-decoration: none;
    border-bottom: 1px dotted;
}

.bodymain section.rightside section.videocompilatie div.img-videocompilatie a:hover { /* making sure that the image at the rightside doesn't get a border bottom when hovering */
    border-bottom: none;
}

.bodymain .image-gallery li a:hover {
    border: none;
}

.bodymain section.image-top a:hover {
    border: none;
}

/* ----- This is the leftside of main -----  */ 

.bodymain section.leftside {
    width: 74%;
    margin: 0 5.55% 0 0;
    float: left;
    color: #6a6a6a;
    font-size: 1.2rem;
    font-size: 12px;
    line-height: 2.2rem;
    line-height: 22px;
}

.bodymain section.leftside.contentpagina article{
    margin: 0 0 45px 0;
}

.bodymain section.leftside article ul.inhoud-werken{
    margin: 0 0 5px 0;
}

.bodymain section.leftside em{
    color: #9BA0A0;
    font-style: italic;
}

.bodymain section.leftside article {
    margin: 0 0 25px 0;
}

.bodymain section.leftside article h3 {
    margin: 20px 0 10px 0;
    font-size: 16px;
}

/* ----- This is the rightside of main -----  */ 

.bodymain section.rightside {
    width: 20.15%;
    float: left;
    color: #6a6a6a;
    font-size: 1.2rem;
    font-size: 12px;
    line-height: 1.6rem;
    line-height: 16px;
}

.rightside .videocompilatie {
    width: 100%;
}

/* ----- This is the leftside of contact -----  */ 

.bodymain section.leftside.contact {
    width: 44%;
    margin: 0 5.55% 0 0;
    float: left;
    color: #6a6a6a;
    font-size: 1.2rem;
    font-size: 12px;
    line-height: 2.2rem;
    line-height: 22px;
}

.bodymain section.leftside.contact p {
    margin: 0 0 20px 0;
}
/* ----- This is the rightside of contact -----  */ 

.bodymain section.rightside.contact {
    width: 50.15%;
    float: left;
    color: #6a6a6a;
    font-size: 1.2rem;
    font-size: 12px;
    line-height: 1.6rem;
    line-height: 16px;
    margin: 0 0 40px 0;
}

.googlemap {
    margin: 0 0 40px 0;
}

.googlemap h3 {
    margin: 5px 0 0 0;
}

.qr {
    margin: 0 0 40px 0;
}

/* ----- Contentpage-----  */ 

ul.inhoud-werken li {
    margin: 0 0 0 20px;
}

.leftside.contentpagina article ol{
    margin: 0 0 20px 20px;
}

.leftside.contentpagina p {
    margin: 0 0 20px 0;
}

ul.stappenplan {
    margin: 0 0 0 20px;
    list-style: disc;
}



/* -------------------------------- Image gallery  --------------------------------*/

.image-gallery ul {
    list-style: none;
}

.image-gallery ul li{
    display: inline-block;
    width: 160px;
    margin: 0 15px 15px 0;
}

.ie7 .image-gallery ul li{
    display: inline;
}

/* -------------------------------- FOOTER  --------------------------------*/



/*give the footer a gradient */




/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.cookie-banner.hidden {
    display: none;
}

.cookie-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #e5e7eb;
    max-width: 28rem;
    width: 100%;
    pointer-events: auto;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-content.show {
    transform: translateY(0);
    opacity: 1;
}

.cookie-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0 1.5rem;
    margin-bottom: 1rem;
}

.cookie-title-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #d97706;
}

.cookie-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.close-btn:hover {
    color: #6b7280;
    background-color: #f3f4f6;
}

.cookie-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.cookie-description {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.cookie-details {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.cookie-details.hidden {
    display: none;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.detail-icon.analytics {
    color: #2563eb;
}

.detail-icon.privacy {
    color: #059669;
}

.detail-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    margin: 0 0 0.25rem 0;
}

.detail-desc {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.learn-more-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.learn-more-btn:hover {
    color: #1d4ed8;
}

.cookie-actions {
    display: flex;
    gap: 0.75rem;
}

.btn {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-decline {
    color: #374151;
    background-color: #f3f4f6;
}

.btn-decline:hover {
    background-color: #e5e7eb;
}

.btn-accept {
    color: white;
    background-color: #2563eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-accept:hover {
    background-color: #1d4ed8;
}

.cookie-footer {
    padding: 0.75rem 1.5rem;
    background-color: #f9fafb;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    text-align: center;
}

.footer-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.footer-link {
    color: #2563eb;
    text-decoration: underline;
}

.footer-link:hover {
    color: #1d4ed8;
}

.note {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 2rem;
}

.note p {
    color: #92400e;
    font-size: 0.875rem;
    margin: 0;
}

.note code {
    background-color: #fbbf24;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}