/* =========================================================================================
    BELANGRIJK: Denk eraan dat deze extra regels ook invloed hebben op smartphone
                We kunnen een media-query gebruiken, maar dan moeten we oppassen voor IE8
============================================================================================ */

/* GENERAL */
*{font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif !important;font-weight:100 !important;letter-spacing:normal !important;}
h1{font-weight:400;text-align:center;}
p{line-height:1.2 !important;}
strong,b{font-weight:400 !important;}
li{font-size:14px;}
em,i{font-weight:normal !important;font-style:italic !important;}
#modalContent strong, b{font-weight:400 !important;}
#modalContent em, i{font-weight:normal !important;font-style:italic !important;}
.pane-bundle-afbeelding-tekst header + .imagetext{margin:1em 0 0 0 !important;}
.panels-modal-add-config span{color:#333 !important;}
.tabs li.active a,.tabs li a:hover{background-color:#477100 !important;}
.popup.custom img, .popup.custom h1{display:none;}
.field-name-field-links a, span.summary,.pane a, .pane a:hover, .file a{color:#477100 !important;}
.newslettername{display: none !important;}

/* FOOTER */
footer.sticky-footer{background:#333;color:#fff;font-size:14px;}
footer.sticky-footer footer{background:none;}
footer.sticky-footer footer.main h3{color:#b2e943 !important;font-size:16px;text-transform:uppercase;font-weight:bold !important;margin-bottom:0.2em !important;}
footer.sticky-footer footer.main p,footer.sticky-footer footer.main ul{margin:0 !important;padding:0 !important;}
footer.sticky-footer footer.main ul li{list-style:none !important;margin:0 !important;}
footer.sticky-footer footer.main ul li ul{display:none;}
footer.sticky-footer footer.main ul li a{display:inline-block !important;text-transform:uppercase !important;color:#fff !important;text-decoration:none !important;}
footer.sticky-footer footer.main ul li.active-trail a,footer.sticky-footer footer.main ul li:hover a{font-weight:bold !important;color:#fff !important;}
footer.copyright{text-align:right;padding-right:30px !important;}
footer.copyright a, footer.copyright small{color:#7c7c7c !important;}
/*footer.sticky-footer input[type='submit']{background:#8bbd07;margin:15px 15px 0 0;}*/
footer.sticky-footer input[type="email"]{color: #a9a9a9; width: 100%; max-width: 290px; margin-bottom: 10px;}
footer.sticky-footer input[type="submit"]{color: #333333; background: #b2e943;}

/* TOP NAV */
section#top{background:#333333;text-align:right;}
section#top .inner{display:block;margin:0 auto;display:block;width:1170px;overflow:visible;}
section#top nav#navigation{display:inline-block;margin:0 !important;}
section#top nav#navigation ul{margin:0 !important;padding:0 !important;}
section#top nav#navigation ul li{position:relative;padding:0 !important;}
section#top nav#navigation ul li a{display:block;color:#dfdfdf;font-size:12px;padding:0px 20px;margin:10px 0;border-left:1px solid #858585;text-transform:uppercase;font-weight:normal !important;}
section#top nav#navigation ul li:first-child a{border-left:0;}
section#top nav#navigation ul li:hover a{color:#b2e943 !important;}
section#top nav#navigation ul li.active-trail a{color:#b2e943 !important;font-weight:bold !important;}
section#top nav#navigation ul li.expanded:hover ul{display:block !important;}
section#top nav#navigation ul li.expanded ul{position:absolute;background:#555;}
section#top nav#navigation ul li.expanded ul li{margin:0;}
section#top nav#navigation ul li.expanded ul li a{border:none;color:#fff !important;}
section#top nav#navigation ul li.expanded ul li.active-trail a,section#top nav#navigation ul li.expanded ul li:hover a{color:#b2e943 !important;}
section#top nav#navigation.secondarymenu ul li a{background:#b2e943;color:#333333;margin:0; padding:5px 15px;}
section#top nav#navigation.secondarymenu ul li.active-trail a{color:#333 !important;text-decoration:underline !important;}
section#top nav#navigation.secondarymenu ul li:hover a{color:#333 !important;text-decoration:underline !important;}

/* SPECIAL PANELS */
#layout.custom .pane-bundle-afbeelding-tekst .imagetext a{text-decoration:none !important;}
#layout.custom .pane-bundle-afbeelding-tekst .field-name-field-text{color:#333 !important;}
#layout.custom .pane-bundle-afbeelding-tekst.services header h2{font-size:26px;text-align:center;background:black;color:#b2e943;padding:5px 10px;text-transform:uppercase;margin-bottom:10px;}
#layout.custom .pane-bundle-afbeelding-tekst.services .main-image{margin:0 !important;float:none !important;display:block;}
#layout.custom .pane-bundle-afbeelding-tekst.services .field-name-field-text{text-align:center;font-size:18px;}
#layout.custom .pane-bundle-afbeelding-tekst.links{background:#b2e943;height:110px;}
#layout.custom .pane-bundle-afbeelding-tekst.links header h2{font-size:26px;font-weight:bold !important;margin-bottom:0em;text-transform:uppercase !important;}
#layout.custom .pane-bundle-afbeelding-tekst.links .main-image{margin:0;display:inline-block;float:none;}
#layout.custom .pane-bundle-afbeelding-tekst.links .wrapper{display:inline-block;vertical-align:top;padding:1em;max-width:270px;}
#layout.custom .pane-bundle-afbeelding-tekst.links .field-name-field-text{font-size:18px;}

/* PAGE */
body.front h1.title{color:#4b4a4d !important;margin:25px 0 40px 0 !important;}
body.not-front h1.title{margin:0 !important;padding-bottom:5px;text-transform:uppercase;border-bottom:1px solid #ddd;color:#4b4a4d !important;font-size:40px !important;}
body.not-front #layout h2.pane-title{margin:0 !important;color:#8bbd07 !important;font-size:33px;min-height:35px;}
body.not-front #layout p{font-size:20px;}

/* LEFT MENU PANE */
.pane-block{}
.pane-block ul{margin:0;padding:0 !important;display:inline-block;width:100%;}
.pane-block ul li{margin:0.5em 0 0 0 !important;padding:0 !important;display:block;width:100%;}
.pane-block ul li.active-trail a, .pane-block ul li:hover a{background:#8bbd07 !important;}
.pane-block ul li:first-child{margin:0 !important;}
.pane-block ul li a{display:inline-block;padding:5px 7px !important;background:#ddd;color:#333333 !important;width:100%;font-size:18px;}

/* APPLICATIONS & PRODUCTS */
#layout.layout-2{}
#layout.layout-2 .pane{position:relative;padding:0 !important;border:1px solid #b0ef53 !important;}
#layout.layout-2 .pane.background-image:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
#layout.layout-2 .pane.background-image.opacity-10:after{background:rgba(255,255,255,0.1);}
#layout.layout-2 .pane.background-image.opacity-20:after{background:rgba(255,255,255,0.2);}
#layout.layout-2 .pane.background-image.opacity-30:after{background:rgba(255,255,255,0.3);}
#layout.layout-2 .pane.background-image.opacity-40:after{background:rgba(255,255,255,0.4);}
#layout.layout-2 .pane.background-image.opacity-50:after{background:rgba(255,255,255,0.5);}
#layout.layout-2 .pane.background-image.opacity-60:after{background:rgba(255,255,255,0.6);}
#layout.layout-2 .pane.background-image.opacity-70:after{background:rgba(255,255,255,0.7);}
#layout.layout-2 .pane.background-image.opacity-80:after{background:rgba(255,255,255,0.8);}
#layout.layout-2 .pane.background-image.opacity-90:after{background:rgba(255,255,255,0.9);}
#layout.layout-2 .pane.background-image.opacity-100:after{background:rgba(255,255,255, 1);}
#layout.layout-2 .pane h2.pane-title{font-weight:bold !important;padding:10px 0;}
//#layout.layout-2 .pane .inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1;}
#layout.layout-2 .pane .inner{width:100%;text-align:center;z-index:1;}
#layout.layout-2 .pane.background-image .inner{position:absolute;bottom:0;left:0;}
#layout.layout-2 .pane .inner header a{display:block;color:#333 !important;background-color:#b0ef53;}
#layout.layout-2 .pane .inner header h2{color:#333 !important;background-color:#b0ef53 !important;}
#layout.layout-2 .pane .inner header + .imagetext{margin:0 !important;}
#layout.layout-2 .pane .inner header + .imagetext > .field{margin-top:2em;}
#layout.layout-2 .second-row .pane .inner header + .imagetext > .field{margin-top:0.5em;}

#layout.layout-2 .row .pane.background-image{height:250px;}
#layout.layout-2 .first-row .pane{height:250px;}
#layout.layout-2 .first-row .pane h2.pane-title{font-size:25px;}
#layout.layout-2 .second-row .pane{height:125px;}
#layout.layout-2 .second-row .pane h2.pane-title{font-size:18px;}

/* BACKGROUND IMAGE */
#layout.layout-2 .pane.no-background-image{height:auto !important;}
.pane{position:relative;background-repeat:no-repeat !important;background-position:center center !important;-webkit-background-size:cover !important;-moz-background-size:cover !important;-o-background-size:cover !important;background-size:cover !important;}
/*.pane .background-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}*/

/* POPUP */
.popup{}
.popup .popup-heading{overflow:hidden;}
.popup .popup-heading h2{float:left;margin:0 !important;}
.popup .popup-heading a{float:right;color:#888 !important;padding:5px 7px !important;border:1px solid #888;}

/* SOCIAL MEDIA */
#top .inner{position:relative;}
#block-xdesign-social-media{position:absolute;}
#block-xdesign-social-media .inner{display:inline-block;width:auto !important;}
#block-xdesign-social-media .network{display:inline-block;margin:12px 20px 0 0;}
#block-xdesign-social-media img{display:block;height:15px;width:auto;}

/* ADD PAGE */
form fieldset.form-wrapper{border:1px solid #333 !important;background:#ededed !important;padding:5px !important;margin-top:10px !important;}
form fieldset.form-wrapper legend{padding:0 !important;background:none !important;}

form input.form-text, 
form input.form-file,
form input.form-submit,
form textarea,
form .fieldset-title{color:#333;font-weight:bold;}

/* TABLET + DESKTOP */
@media all and (min-width:767px){
    /* HEADER */
    header.main{border-bottom:1px solid #8bbd07 !important;} 
    header.main > .inner{background-repeat:no-repeat;background-position:right;}
    body.not-front header.main > .inner{background-size:0;}
    header.main #logo{/*width:320px;*/margin:20px 0 !important;}
    header.main #logo img{max-width:none !important;}
    header.main #top{display:inline-block;float:left;width:auto !important;}
    header.main #menu{display:inline-block;float:right;width:auto !important;margin:20px 0 !important;}
    header.main nav#navigation{display:inline-block;}
    header.main nav#navigation + nav#navigation{margin:0 !important;}
    header.main nav#navigation ul{display:inline-block;margin:0 !important;}
    header.main #menu > nav#navigation ul li{display:inline-block;margin:0 0 0 10px !important;width:112px;height:100px;border:1px solid #333;padding:0 !important;}
    header.main nav#navigation ul li a{display:block;}
    header.main nav#navigation ul li a img{display:block;}
    header.main nav#navigation ul li a span{display:block;font-size:12px;text-align:center;text-transform:uppercase;}
    header.main nav#navigation ul li.active,header.main nav#navigation ul li:hover{background:#333;}
    header.main nav#navigation ul li.active span{color:#b2e943;font-weight:bold !important;}
    header.main nav#navigation ul li:hover span{color:#b2e943;}
    header.main nav#navigation.block-menu-block-split{display:none;}
    section#top nav#navigation.secondarymenu ul li a{font-size:14px !important;font-weight:bold !important;}

    /* CONTENT + LAYOUT */
    #content{margin-top:15px !important;}
    #layout.custom .row.two .pane-bundle-afbeelding-tekst .imagetext .wrapper > a{margin-left:30px;}
    #layout.custom .row.one .pane-bundle-afbeelding-tekst .imagetext .main-image{border:1px solid black;}

    /* PANELS */
    #layout.custom .pane-bundle-afbeelding-tekst .imagetext a{display:inline-block !important;}

    /* STICKY FOOTER */
    #content{padding-bottom:220px;}
    footer.sticky-footer{height:220px;}
}

/* TABLET */
@media all and (max-width:1024px) and (min-width:767px){
    /* GENERAL */
    #layout.custom .pane-bundle-afbeelding-tekst.services header h2{font-size:20px !important;}

    /* TOP */
    #top > .inner{width:100% !important;padding:0 30px !important;}

    /* FOOTER */
    footer{width:100% !important;}
    footer > .inner{width:100% !important;padding:0 30px !important;}

    /* MENU */
    #menu > #navigation.mainmenu > ul > li{margin:0 5px 0 0 !important;width:85px !important;height:auto !important;}
    #menu > #navigation.mainmenu ul li a span{font-size:10px;}

    /* CONTENT */
    #content{padding-bottom:220px !important;}
    #layout.custom .pane-bundle-afbeelding-tekst.links{height:auto !important;}
    #layout.custom .pane-bundle-afbeelding-tekst.links .main-image{display:none !important;}

    /* PANELS */
    /*.pane{height:auto !important;}*/
    #content .pane > .background-image{display:none !important;}
    /*#layout.layout-2 .pane .inner{width:auto !important;height:auto !important;position:relative !important;top:0 !important;left:0 !important;transform:none !important;}*/
}

/* MOBILE */
@media all and (max-width:767px){
    /* GENERAL */
    .collapse{max-width:50px !important;display:block !important;}

    /* TOP */
    #top{} 
    #top > .inner{width:100% !important;text-align:center;padding:10px 0 5px 0 !important;}
    #top .inner nav{display:none !important;}
    #top .inner nav#navigation.secondarymenu{display:inline-block !important;vertical-align:top;}
    #top .inner section{position:relative;display:inline-block;}
    #top .inner a.network{margin:0 10px !important;}
    #top .inner a.network:first-child{margin:0 !important;}
    #top .inner a.network img{width:25px;height:auto !important;}
    
    /* PAGE */
    body.not-front h1.title{font-size:2em !important;}

    /* HEADER */
    section.page > header.main .inner{background-image:none !important;}

    /* IMAGES */
    .imagetext img{width:100% !important;}

    /* FOOTER */
    footer{width:auto !important;text-align:center !important;}
    footer .inner{width:auto !important;}
    footer ul li a{text-align:center !important;width:100% !important;}
    footer input[type='email']{width:80%;margin:0 auto;}

    /* PANELS */
    /*.pane{height:auto !important;}*/
    #content .pane > .background-image{display:none !important;}
    #layout.custom .row.two .pane{height:auto !important;}
    /*#layout.layout-2 .pane .inner{width:auto !important;height:auto !important;position:relative !important;top:0 !important;left:0 !important;transform:none !important;}*/

    /* FANCYBOX */
    .fancybox-wrap{width:80% !important;}
    .fancybox-inner{width:100% !important;}
}