/* ****************************************************************************** * Responsive | Auto-enable responsiveness when resizing the browser window * | This means the responsive trigger is no longer for mobile-only * ****************************************************************************** */ /* ## Breakpoint: 480 ####################################################### */ @media only screen and (max-width : 480px), screen and (max-width : 959px) and (min-width : 480px) { /** Cookiebanner**/ #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow { width: 0.5em!important; } /* General */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; width: 100% !important; max-width: 100% !important; } body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; position: absolute; } body.responsive.popup-active { height: 100% !important; max-height: 100% !important; overflow: hidden !important; } /* Break all divs */ .responsive div { clear: both; width: 100% !important; } div.contentcontainer_mobile { margin: 0 0 2.5rem 0; } .responsive .responsiveLanguageSelector { position: relative; display: block; float: right; clear: none; overflow: hidden; text-align: right; width: auto !important; margin: 4px 0; margin-right: 10px; } .responsive .responsiveLanguageSelector a { position: relative; display: block; float: right; padding: 6px; margin: 0; margin-left: 2px; color: #000; background: #444; text-decoration: none; top: 0: font-size: 12px; } .responsive .responsiveLanguageSelector a.current { background: #fff; color: #000; } /* Fix the ones that need it */ .responsive #responsive-outer { position: relative; float: left; display: block; width: 100%; height: auto; overflow: hidden; clear: both; } .responsive #responsive-container { position: relative; float: left; left: 0; top: 0; width: 100%; height: auto; overflow: hidden; z-index: 4; } .responsive #nav { display: none; } .responsive #bgbox { display: none; } .responsive div.contentcontainer { margin: 0; padding: 0; } .responsive #contentbox { width: 90% !important; padding: 0 5%; margin: 0 !important; padding-top: 5%; } .responsive #contentbox-left, .responsive #contentbox-right, .responsive #contentbox-right-small { position: relative; float: left; overflow: hidden; padding: 0 !important; padding-bottom: 25px !important; margin: 0 !important; clear: both; min-height: 0; } .responsive #top { position: relative; float: left; margin: 0; padding: 0; top: 0; left: 0; clear: both; margin-top: 38px; } .responsive #topbox { height: auto; margin-top: 55px; } .responsive #top #top-message { } .responsive #top #top-message p { padding: 10px; } .responsive #top .languageSelector { display: none; } .responsive #top-right { display: none; } .responsive #footer #footer-content { width: 90% !important; padding: 0 5%; } .responsive #image_rotate img { width: auto !important; } .responsive #outer { width: 100% !important; margin: 0 !important; z-index: 3; } .responsive #header { position: relative; float: left; clear: both; display: none !important; z-index: 2; width: 100% !important; overflow: hidden; } .responsive #header-shadow { position: relative; float: left; clear: both; display: none !important; z-index: 2; width: 100% !important; overflow: hidden; } .responsive #header-shadow img { height: 14px; float: left; } .responsive #header #header_img { height: auto; } .responsive #header #headercontent { height: auto; } .responsive #header .bnr_display { display: block; height: auto !important; } .responsive #header .bnr_display ul li.active { position: relative !important; } /* .responsive #header .bnr_display ul li, .responsive #header .bnr_display ul li a { background: none !important; } */ .responsive #header .bnr_display ul li a img { display: block !important; width: 100% !important; } .responsive .main { width: 100% !important; margin: 0 !important; } .responsive #inner { position: relative !important; width: 100% !important; margin: 0 !important; float: none !important; } .responsive div.push { display: none; } /* .responsive #header { display: none; height: auto; } */ .responsive #cloudbox { display: none; } .responsive #logobox { height: auto; padding: 20px 0; margin: 0; border: none; } .responsive #logobox-content { width: 100% !important; } .responsive #logo { position: relative; float: none; clear: both; display: block; top: 0; left: 0; margin: 0 auto; width: 300px !important; overflow: hidden; } .responsive #logo img { position: relative; width: 96px; margin: 0 auto; clear: both; display: block; } .responsive #mid { position: relative; overflow: hidden; padding: 15px; width: auto !important; display: flex; flex-direction: column-reverse; padding-top: 0; } .responsive #mid2 .contentcontainer { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 15px; } .responsive #main_box.editmode { min-height: 0; } .responsive #image_rotate { height: auto; } .responsive .imageblock_fade { height: auto; display: none !important; } .responsive .imageblock_fade_bullets { display: none !important; } .responsive #top-left { float: left; margin: 0; width: 100% !important; overflow: hidden; clear: both; } .responsive #top-left a { top: 0; } .responsive #top-right { float: none; margin: 0 auto; width: 222px !important; overflow: hidden; clear: both; text-align: center; font-size: 12px; } .responsive #image_rotate li { position: relative; float: left; } .responsive #image_rotate li img { position: relative; float: left; } .responsive #contentbox-right { margin: 0 !important; } .responsive #footer #footer-left { height: auto; } .responsive #footer ul { float: left; margin-bottom: 10px; } .responsive #footer li { float: left; margin-left: 0; margin-right: 10px; } .responsive #footer #footer-right .right { text-align: left; } .responsive #footer ins { float: left; margin-left: 0; margin-right: 5px; left: -1px; top: -2px; } /*.responsive #responsive_nav { position: fixed; display: block; float: left; margin: 0; clear: both; height: auto; top: 0; left: 0; z-index: 5; } .responsive #responsive_nav.open { box-shadow: 0 0 30px rgba(0,0,0,0.7); } .responsive #responsive_nav_trigger { position: relative; display: block; float: left; margin: 0; clear: both; height: 40px; text-align: center; z-index: 2; } .responsive #responsive_nav_trigger img { position: relative; width: 16px; top: 13px; } .responsive #responsive_nav_trigger.open { background: #2D3034; }*/ .responsive #responsive_navigation { position: relative; display: block; float: left; margin: 0; clear: both; overflow: hidden; z-index: 2; left: 0; padding-top: 40px; } .responsive #responsive_navigation ul { position: relative; display: block; float: left; margin: 0; clear: both; width: 100%; } .responsive #responsive_navigation li { position: relative; float: left; display: block; width: 100%; clear: both; } .responsive #responsive_navigation li ul { display: none; } .responsive #responsive_navigation a { font-size: 20px; display: block; text-decoration: none; color: #fff; padding: 10px; background: url(../img/base/navdevider.png) repeat-x left bottom; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } .responsive #responsive_navigation a ins { display: none; } .responsive #responsive_navigation ul ul a { padding-left: 45px; } .responsive #responsive_navigation ul ul ul a { padding-left: 70px; } .responsive #responsive_navigation ul ul ul ul a { padding-left: 95px; } .responsive #responsive_navigation ul ul ul ul ul a { padding-left: 120px; } .responsive #responsive_navigation ul ul a ins { position: absolute; width: 16px; height: 16px; overflow: hidden; float: left; background: url(../img/base/iconsprite.png?v=0.0.1) no-repeat -16px -80px; display: block; top: 12px; margin-left: -20px; } .responsive #responsive_navigation li.subs .handle { position: absolute; top: 0; right: 0; z-index: 2; } .responsive #responsive_navigation li.subs .handle:before { content: "\f0fe"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; font-size: 20px; padding: 12px; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .responsive #responsive_navigation li.responsive-current.open > .handle:before, .responsive #responsive_navigation li.responsive-current-parent.open > .handle:before, .responsive #responsive_navigation li.subs.open > .handle:before { content: "\f147"; } .responsive #responsive_navigation li.subs.open > ul { display: block; } .responsive #responsive_navigation li.responsive-current { } .responsive #responsive_navigation li.responsive-current-parent > a { color: #fedf17; } .responsive #responsive_navigation li.responsive-current > a { background: #fedf16; color: #333; text-shadow: none; } .responsive #responsive_navigation li.responsive-current > .handle:before { color: #333; text-shadow: none;} .responsive #responsive_navigation li.responsive-current-parent > .handle:before { color: #fedf17; text-shadow: none;} /*.responsive #responsive_nav_bg { position: fixed; display: block; float: left; margin: 0; clear: both; height: 40px; top: 0; left: 0; z-index: 1; background: #333; } .responsive #responsive_nav_bg.open { height: 100%; }*/ .responsive #footer .footerlinks { margin-bottom: 20px; } .responsive .maintainCells tr { display: table-row !important; width: auto !important; float: none !important; } .responsive .maintainCells td { display: table-cell !important; width: auto !important; float: none !important; padding: 5px; } .responsive div.contactform .contactform-box-50 { margin: 3px 0; } .responsive .blog ul.blog-archive span { padding: 7px 10px; } .responsive #blog_searchresults_label { padding: 0 !important; } .responsive #blog_searchresults_label p { padding: 15px !important; line-height: 24px; } .responsive div.blog-date { width: 85px !important; margin: 0 auto; float: none; overflow: hidden; } .responsive #headertools { position: relative; display: block; float: left; margin: 0; clear: both; width: 100%; } .responsive #reloader { z-index: 9999; display: none !important; } .responsive #reloader #reloader-message { position: fixed; top: 0; background: #000; left: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; } .responsive #reloader #reloader-content { display: none; } .responsive #reloader #reloader-content-responsive { display: block; padding: 25px; padding-top: 75px; width: auto !important; overflow: hidden; text-align: center; } .responsive #reloader #reloader-logo { width: 100%; max-width: 216px; margin: 0 auto !important; float: none; } .responsive #reloader #reloader-ajax { position: absolute; margin: 0 !important; } .responsive .contactform-row .contactform-column-right { margin: 0; } .responsive span.note-green { width: 100%; border: none; padding: 0; text-indent: 10px; } .responsive span.note-red { width: 100%; border: none; padding: 0; text-indent: 10px; } .responsive #badgebar-content { padding: 10px 0; } .responsive #badgebar-content ul { width: 100%; margin: 0; padding: 0; } .responsive #badgebar-content li { width: 100%; margin: 0; padding: 0; float: left; clear: both; display: block; text-align: center; } .responsive #badgebar-content a { position: relative; margin: 0 auto; display: block; clear: both; margin-bottom: 10px; } .responsive #badgebar-content li.telenet a { margin-bottom: 0; } /* Popups */ .responsive div.iframePopupContent { width: auto !important; } .responsive div.iframePopupButtonBoxContent { width: auto !important; } .responsive div.iframePopupButtonBoxContent input { padding: 10px 25px; } .responsive .popupiframe { overflow-y: scroll !important; -webkit-overflow-scrolling: touch !important; } /* Container */ .responsive #container { background: #fff; } .responsive div.contentSide { margin-top: 48px!important; margin-left: 0; margin-right: 0; margin-bottom: 0; } .responsive div.contentLeft { margin: 0; } .responsive div.contentRight { margin: 0; } /* Footer */ .responsive #footer, .responsive #footer-left { position: relative; float: left; width: 100%; height: auto; display: block; clear: both; padding: 0; margin: 0; } .responsive #footer-left { } .responsive #footer ul { margin-bottom: 0; } .responsive #footer ul li { margin-right: 0; } .responsive #footer #footer-links { width: 92px; margin: 0 auto; float: none; } .responsive #footer-left ul { position: relative; float: left; display: block; clear: both; width: 100%; margin: 0; } .responsive #footer-left ul li { position: relative; float: left; display: block; clear: both; width: 100%; margin: 0 !important; border-bottom: 1px dashed #1A1A1A; } .responsive #footer-left ul li a { position: relative; float: left; display: block; clear: both; width: 100%; margin: 0; text-align: center; padding: 13px 0 !important; } .responsive div.footer_content { width: auto !important; padding: 10px 10px; } .responsive div.footbox { } .responsive div.footbox.left { } .responsive div.page_subnav { display: none; } /* Image */ .responsive .block_image img { width: 100%; } /* Google Maps */ .responsive .googlemaps_placeholder div { width: auto !important; } .responsive .googlemaps_placeholder div.fullWidth { width: 100% !important; } /* Blackbar */ .responsive #blackbar #blackbar-content { width: auto !important; padding: 20px 15px; } /* Nav */ .responsive #navbox { display: none; } .responsive #subnavbox { display: none; } /* Facebook avatar */ .responsive .vwb-fb { padding: 20px 0 5px 0px; } .responsive .vwb-fb .vwb-fb-avatar { width: 20% !important; clear: none; } .responsive .vwb-fb .vwb-fb-avatar img { width: 50px !important; } .responsive .vwb-fb .vwb-fb-text { width: 75% !important; clear: none; margin-left: 5%; } /* Home news */ .responsive div.main .home_news .itemsmall_pic { text-align: center; } /* 3column */ .responsive #graybar.bottom { padding: 0; } .responsive #graybar-content .graybar-column { margin: 5px 0; margin-bottom: 15px; width: auto !important; clear: both; float: none; padding: 0 10px; } .responsive #graybar-content .graybar-column#graybar-content-column3 { margin-bottom: 5px; } /* feedback */ .responsive div.feedback .feedback-item .feedback-item-photo { float: none; clear: both; width: 60px !important; margin: 0 auto; margin-bottom: 15px; } .responsive div.feedback .feedback-item .feedback-item-content { margin: 0; text-align: center; } /* feedback */ .responsive div.casestudy-small .casestudy-small-item .casestudy-small-item-photo { float: none; clear: both; width: 114px !important; margin: 0 auto; margin-bottom: 15px; } .responsive div.casestudy-small .casestudy-small-item .casestudy-small-item-content { margin: 0; text-align: center; } /* Blog feed */ .responsive div.blog_feed .blogfeed-article .blogfeed-article-date { width: 50px !important; margin: 0 auto; float: none; clear: both; margin-bottom: 10px; } .responsive div.blog_feed .blogfeed-article .blogfeed-article-content { padding: 0; } .responsive div.blog_feed .blogfeed-article .blogfeed-article-content .blogfeed-article-title { text-align: center; } .responsive div.blog_feed .blogfeed-article .blogfeed-article-button { text-align: center; border-bottom: 1px dotted #ddd; padding: 10px 0; } .responsive div.blog_feed .blogfeed-article .blogfeed-article-button a { float: none; } .responsive div.mp2Column .mp2Column1, .responsive div.mp2Column .mp2Column2 { margin: 0; padding: 0; } .responsive div.mp2Column .mp2Column1 { margin-top: 20px; } .responsive div.mp2Column .mp2Column2 { margin-top: 10px; border-top: 1px dotted #eee; padding-top: 10px; } /* Blog article */ .responsive div.contentcontainer .blog ul.blog-itemlist .blog-item-title a { word-break: break-all; } /* Klanten */ .responsive div.client_logos div.client_logo { float: none; clear: both; width: 182px !important; margin: 0 auto; margin-bottom: 10px; } /* Orange arrow */ .responsive .orangeArrow, .responsive div.main .orangeArrow, .responsive div.main a.orangeArrow { padding: 0; padding-top: 30px; background-position: center top; text-align: center; } /* services */ .responsive .mpColumnFull { padding-bottom: 20px; margin-bottom: 0; } .responsive div.services { border: none; box-shadow: none; border-top: 1px dotted #ccc; } .responsive div.services div.services-content { margin: 20px 0; margin-top: 0; } .responsive div.services div.services-photo { height: auto; margin: 30px 0; } .responsive div.services div.services-photo img { position: relative; left: auto; bottom: auto; } /* Bullet items */ .responsive div.bullet-item .bullet-item-circle { width: 60px !important; float: none; margin: 0 auto; } .responsive div.bullet-item .bullet-item-content { text-align: center; } /* mp2ColumnUneven */ .responsive div.mp2ColumnUneven { padding-top: 25px; } /* colorArrowBox */ .responsive div.colorArrowBox .colorArrowBox-content { width: auto !important; } /* iconBox */ .responsive div.iconBox .iconBox-content { width: auto !important; } /* borderBox */ .responsive div.borderBox { border: none; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); } .responsive div.borderBox .borderBox-content { width: auto !important; } /* colorbox */ .responsive div.colorBox .colorBox-content { width: auto !important; } .responsive div.colorArrowBox .colorArrowBox-content { width: auto !important; } /* Realisaties/Carousel */ .responsive div.carousel-item { margin-bottom: 25px; border-bottom: 1px dotted #ccc; padding-bottom: 40px; } .responsive div.carousel-item div.carousel-item-photobox { text-align: center; margin-bottom: 25px; } .responsive div.carousel-item div.carousel-item-content { margin: 0; } .responsive div.carousel-item div.carousel-item-content .carousel-item-navigation { display: none; } .responsive div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail1 { text-align: center; margin: 0; margin-bottom: 5px; } .responsive div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail2 { text-align: center; margin: 0; margin-bottom: 5px; } .responsive div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail3 { text-align: center; margin: 0; margin-bottom: 5px; } .responsive div.carousel-item div.carousel-item-content .carousel-item-thumbnails .carousel-item-thumbnail4 { text-align: center; margin: 0; } /* featureImageBox */ .responsive div.featureImageBox { } .responsive div.featureImageBox .featureImageBox-text { text-align: center !important; padding: 15px 0; } .responsive div.featureImageBox .featureImageBox-image { float: none; width: 220px !important; height: 220px !important; margin: 0 auto; } .responsive div.featureImageBox .featureImageBox-image img { width: 100% !important; height: auto !important; } /* Employee */ .responsive div.mp-employee .mp-employee-photo { float: none; width: 200px !important; height: 200px !important; margin: 0 auto; } .responsive div.mp-employee .mp-employee-photo img { width: 100% !important; height: auto !important; } .responsive div.mp-employee .mp-employee-details { padding-left: 0; padding-top: 25px; margin: 0; } .responsive div.mp-employee .mp-employee-details div { text-align: center; } /* Login base */ .responsive #login-base { text-align: center; display: none; } .responsive #login-base #login-content { width: 100%; padding: 0 15px; box-sizing: border-box; } .responsive #login-base #login-content.loggedin { background: rgba(255,255,255,0.95); box-shadow: 0 0 4px rgba(0,0,0,0.2); padding: 15px; margin-bottom: 5px; } .responsive #login-base #login-content h1 { text-align: center; } .responsive #login-base #login-content input { width: 100%; box-sizing: border-box; } .responsive #login-base div { text-align: center; } .responsive #login-base #login-content .login-inputs { clear: both; } .responsive #login-base #login-content .login-submit { clear: both; margin-left: 0; margin-bottom: 5px; } .responsive #login-base #login-content-form a { display: block; clear: both; } .responsive #login-base #login-content .login-register { padding: 0 !important; margin: 0; border: none; } .responsive #login-base #login-content #login-content-form form { width: 100%; } .responsive #login-base #login-content #login-base-name { margin-bottom: 5px; } .responsive #login-base #login-content #login-base-name p { text-align: center; } .responsive #login-base #login-content #login-base-tools { width: 158px !important; float: none; margin: 0 auto; display: block; clear: both; } .responsive #login-base #login-content #login-base-tools.hasadmin { width: 242px !important; float: none; margin: 0 auto; display: block; clear: both; } .responsive #login-base #login-content #login-base-tools ul.useractions { width: auto !important; float: left; margin: 0 auto; display: block; clear: none; } .responsive #login-base #login-content #login-base-tools ul.useradmin { width: auto !important; float: left; margin: 0 auto; display: block; clear: none; } .responsive #login-base #login-content #login-base-tools li.beheer { margin-left: 0; } .responsive #login-base #login-content #login-base-tools li { margin-left: 10px; } /* Home kalender */ .responsive .kalender .kalender-content .kalender-dag .kalender-eventlist li .kalender-event { min-height: 55px; } .responsive .kalender .kalender-content .kalender-dag .kalender-eventlist li .kalender-event .kalender-event-icon { position: absolute; top: 0; left: 0; width: 40px !important; } .responsive .kalender .kalender-content .kalender-dag .kalender-eventlist li .kalender-event .kalender-event-details { box-sizing: border-box; padding-left: 45px; padding-right: 47px; } .responsive .kalender .kalender-content .kalender-dag .kalender-eventlist li .kalender-event .kalender-event-label { position: absolute; top: 0; right: 0; width: 43px !important; } /* Popups */ .responsive div.popup-content { height: 80% !important; margin: 20% 0 !important; overflow: hidden; box-shadow: 0 0 35px rgba(0,0,0,0.15); } .responsive div.popup-content .frame { height: 100% !important; } /* Top FX */ #topfx { background: url(../img/base/topfx.png) no-repeat center top; margin-left: 0; } /* Signup bar */ /*#newsletter-signup { display: none; } */ /* To top */ #goingToTop { top: -40px; } /* Side subnav */ .side-subnav { display: none; } /* ################################################################################################################### */ /* ## RESPONSIVE NAVIGATION - STYLING */ /* ################################################################################################################### */ .responsive #responsive_nav_topbar { position: fixed !important; top: 0; left: 0; overflow: hidden; z-index: 3; } .responsive #responsive_nav_open { float: none !important; width: calc(100% - 40px) !important; height: 40px !important; clear: both; background: #000 url(../img/base/responsive_nav.png) no-repeat 10px center; position: relative !important; display: flex; justify-content: space-between; } .responsive #responsive_nav_open p { position: relative; float: none; margin: 0; padding: 10px; padding-left: 35px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); display: block; order: 0; } .responsive #responsive_nav_open p:first-child { padding-left: 35px; } .responsive #responsive_nav_open a { display: block; } .responsive #responsive_nav_open #mp_logout { order: 1; } .responsive #responsive_nav_open #mobile-login-link { padding-left: 25px; padding-right: 10px !important; font-size: 14px; line-height: 26px; text-align: right; flex-grow: 1; } .responsive #responsive_nav_open #mobile-login-link a { margin: 0; } .responsive #responsive_nav_open #logo { position: relative; float: right; width: 25%; height: 50%; top: 25%; right: 10px; clear: none; display: block; } .responsive #responsive_nav_open img { position: relative; float: right; width: auto !important; height: 100%; top: 0; right: 0; } .responsive #responsive_nav_close { display: none !important; } /*.responsive #responsive_nav { position: absolute; height: auto; width: 85% !important; overflow: hidden; top: 0; left: 0; background: #111; z-index: 1; -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); }*/ .responsive #responsive_nav { position: fixed; height: 100%; min-height: 100%; max-height: 100%; width: 0% !important; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; top: 0; left: 0; background: #111; z-index: 1; -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); } .responsive #responsive_nav:not(:target) { z-index: 1; } .responsive #responsive_nav_content { position: relative; display: block; clear: both; overflow: hidden; float: left; } .responsive #responsive_nav ul li i { display: none; } .responsive #responsive_container { position: relative; display: block; clear: both; overflow: hidden; float: left; left: 0; background: #fff; z-index: 2; height: 100%; max-height: 100%; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .responsive #responsive_inner { position: relative; display: block; clear: both; overflow: hidden; float: left; width: 100%; } /* ################################################################################################################### */ /* ## RESPONSIVE NAVIGATION - CORE/ANIMATION */ /* ################################################################################################################### */ .csstransforms3d.csstransitions.js-ready #responsive_nav { } .csstransforms3d.csstransitions.js-ready.js-open #responsive_nav { width: 85% !important; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: width 500ms ease, -webkit-transform 500ms ease; -moz-transition: width 500ms ease, -moz-transform 500ms ease; -o-transition: width 500ms ease, -o-transform 500ms ease; transition: width 500ms ease, transform 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .csstransforms3d.csstransitions.js-ready.js-close #responsive_nav { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: width 500ms ease, -webkit-transform 500ms ease; -moz-transition: width 500ms ease, -moz-transform 500ms ease; -o-transition: width 500ms ease, -o-transform 500ms ease; transition: width 500ms ease, transform 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .csstransforms3d.csstransitions.js-ready.js-open #responsive_nav_topbar { } .csstransforms3d.csstransitions.js-ready.js-open #responsive_nav_topbar #responsive_nav_open { } .csstransforms3d.csstransitions.js-ready.js-open #responsive_nav_topbar #responsive_nav_open p { } .csstransforms3d.csstransitions.js-ready.js-close #responsive_nav_topbar { } .csstransforms3d.csstransitions #responsive_nav_topbar #responsive_nav_open { -webkit-transition: background 500ms ease; -moz-transition: background 500ms ease; -o-transition: background 500ms ease; transition: background 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .csstransforms3d.csstransitions.js-ready.js-open #responsive_container { -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -moz-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -ms-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -o-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -webkit-transition: left 500ms ease, width 500ms ease, -webkit-transform 500ms ease; -moz-transition: left 500ms ease, width 500ms ease, -moz-transform 500ms ease; -o-transition: left 500ms ease, width 500ms ease, -o-transform 500ms ease; transition: left 500ms ease, width 500ms ease, transform 500ms ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; width: 15% !important; left: 85%; } .csstransforms3d.csstransitions.js-ready.js-close #responsive_container { -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -moz-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -ms-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -o-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); -webkit-transition: left 500ms ease, width 500ms ease, -webkit-transform 500ms ease; -moz-transition: left 500ms ease, width 500ms ease, -moz-transform 500ms ease; -o-transition: left 500ms ease, width 500ms ease, -o-transform 500ms ease; transition: left 500ms ease, width 500ms ease, transform 500ms ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .responsive.ishomepage #header #headercontent { height: 140px !important; } .responsive.ishomepage #header #headercontent #header_img { height: 100%; } .responsive.ishomepage #header #headercontent #header_img .bnr_display { height: 100% !important; } } /* ## Breakpoint: 959 ####################################################### */ @media only screen and (max-width : 959px) and (min-width : 480px) { #container, #navbox-content, #mid, #mid2, #top #topcontent, #blackbar #blackbar-content, #graybar #graybar-content, #header .header_top, #header #navtools #navtools-content, #navbox-content, #navbox .navbox, #navtools #navtools-content, .footer_subwrap, .footer_content, .footer_content.credits, div.contentcontainer, div.featureImageBox, div.contentRight.fullsized { width: 100%; } div.footer_content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 15px; } #logo { position: relative; float: none; clear: both; display: block; top: 0; left: 0; margin: 25px auto; width: 293px !important; overflow: hidden; } #logo img { position: relative; width: 96px; margin: 0 auto; clear: both; display: block; } #navbox .navbox { position: relative; width: 100%; display: block; clear: both; margin: 0; padding: 0; } #navbox .navbox #main_nav { margin: 0 15px; } #blackbar-content-wrapper { padding: 0 15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #graybar-content-column1, #graybar-content-column2, #graybar-content-column3 { width: 100%; margin: 0; padding: 0 15px; clear: both; display: block; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #graybar #graybar-content { margin: 0; padding: 0; } #graybar { margin: 0; } div.graybar-column { width: 100%; margin: 20px 0; padding: 0; text-align: left; padding-left: 75px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } div.graybar-column img { position: absolute; left: 0; } div.graybar-column h1 { margin: 0; } div.mp2Column .mp2Column1 { margin: 0; padding: 0; clear: both; display: block; width: 100%; } div.mp2Column .mp2Column2 { margin: 0; padding: 0; clear: both; display: block; width: 100%; } div.mp2Column .mp2Column2.responsivegray { background: #f5f5f5; padding: 35px 15px !important; padding-bottom: 15px !important; } div.feedback { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; margin: 0; } div.feedback .feedback-item { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; margin: 0; margin-bottom: 25px; } div.contentcontainer { padding: 50px 0; } div.feedback .feedback-item .feedback-item-content { margin: 0; padding: 0; width: 100%; clear: both; display: block; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 75px; } div.feedback .feedback-item .feedback-item-photo { position: absolute; left: 0; top: 0; } div.mp2Column .mp2Column2 { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 15px; } div.blog_feed .blogfeed-article { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 65px; min-height: 50px; } div.blog_feed .blogfeed-article .blogfeed-article-date { position: absolute; left: 0; top: 0; } div.blog_feed .blogfeed-article .blogfeed-article-content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; } div.blog_feed .blogfeed-article .blogfeed-article-content .blogfeed-article-title { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 70%; } div.blog_feed .blogfeed-article .blogfeed-article-content .blogfeed-article-button { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 20%; margin-left: 2%; } div.mpColumnFull { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 15px; } div.client_logo { margin-bottom: 10px; } div.mp3ColumnFloat { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 15px; } div.mp3ColumnFloat .mp3ColumnFloat1, div.mp3ColumnFloat .mp3ColumnFloat2, div.mp3ColumnFloat .mp3ColumnFloat3 { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; clear: both; display: block; margin: 0; } div.services { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; } div.services div.services-content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; margin: 0; padding: 20px; } div.services div.services-photo { height: auto; } div.services div.services-photo a { display: block; text-align: left; } div.services div.services-photo a img { position: relative; left: 0 !important; } div.services div.services-message { text-align: left; } div.services.services-visitekaartje div.services-photo img { margin-top: 15px; } div.mp2ColumnUneven { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 0 15px; } div.mp2ColumnUneven .mp2ColumnUneven1, div.mp2ColumnUneven .mp2ColumnUneven2 { width: 100%; margin: 0; padding: 0; clear: both; display: block; } div.bullet-item .bullet-item-circle { position: absolute; left: 0; top: 0; } div.bullet-item .bullet-item-content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding-left: 75px; } div.colorBox { width: 100%; } div.iconBox { width: 100%; } div.iconBox .iconBox-content { padding-bottom: 25px; } div.borderBox { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; } div.carousel { margin-bottom: 0; } div.carousel-item { margin-bottom: 25px; } div.carousel-item div.carousel-item-photobox { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 50%; } div.carousel-item div.carousel-item-content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 50%; margin: 0; padding-left: 15px; } div.carousel-item div.carousel-item-content .carousel-item-thumbnails div { margin-bottom: 4px; } div.carousel-item div.carousel-item-content .carousel-item-navigation { display: none; } div.mpColumnFull2 { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 0 15px; } div.mp2ColumnUnevenBottom { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 0 15px; } div.mp2ColumnUnevenBottom .mp2ColumnUnevenBottom1, div.mp2ColumnUnevenBottom .mp2ColumnUnevenBottom2 { width: 100%; margin: 0; padding: 0; clear: both; display: block; } div.iconBox.xl { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 50%; margin: 0; clear: none; float: left; } div.iconBox.xl.addSideMargin { margin: 0; } div.mpColumnFull3 { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 0 15px; } div.featureImageBox .featureImageBox-image { float: none; overflow: hidden; margin: 0 auto; padding: 0; display: block; clear: both; margin-bottom: 25px; } div.featureImageBox.alt .featureImageBox-image { float: none; } div.featureImageBox .featureImageBox-text { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; margin: 0; padding: 0; display: block; clear: both; text-align: center; } div.featureImageBox.alt .featureImageBox-text { text-align: center; } div.mp2Column .mp2Column1 { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 15px; } div.casestudy-small .casestudy-small-item .casestudy-small-item-photo { position: absolute; left: 0; top: 0; } div.casestudy-small .casestudy-small-item .casestudy-small-item-content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding-left: 115px; } div.contentRight .rightBlock { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 0 15px; } #blackbar #blackbar-content { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 25px 15px; } #blackbar div.blackbar-content-column { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; margin: 0; clear: both; } div.blackbar-content-colbox { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; text-align: left; padding-left: 75px; } div.blackbar-content-colbox img { position: absolute; left: 0; top: 30px; } #graybar.bottom div.graybar-column img { position: relative; } #graybar.bottom div.graybar-column { text-align: center; padding-left: 0; } /* Login base */ #logobox { height: auto; padding: 20px 0; margin-bottom: 5px; } #logobox-content { width: 100% !important; } #login-base { text-align: center; width: 100%; float: left; clear: both; margin: 0; padding: 0; } #login-base #login-content { width: 100%; padding: 0 15px; box-sizing: border-box; } #login-base #login-content h1 { text-align: center; } #login-base #login-content input { width: 100%; box-sizing: border-box; } #login-base div { text-align: center; } #login-base .login-block.txtRight { text-align: center; } #login-base .login-block.txtRight a { margin: 2px 0 !important; padding: 5px 0 !important; display: block; } #login-base #login-content .login-inputs { width: 65%; clear: none; } #login-base #login-content .login-inputs input { width: 49%; clear: none; float: left; box-sizing: border-box; } #login-base #login-content .login-inputs input:first-child { margin-right: 1.6%; } #login-base #login-content .login-submit { width: 33.4%; clear: none; margin-left: 1.6%; margin-bottom: 5px; } #login-base #login-content-form a { display: block; clear: both; } #login-base #login-content #login-content-form form { width: 100%; } /* Header shadow */ #header-shadow { width: 100%; } } /* ## Breakpoint: 1199 ####################################################### */ @media only screen and (max-width : 1199px) { #topbox { height: auto; } #topbox-content { width: 100%; padding: 0 15px; box-sizing: border-box; float: left; } #newsletter-signup #newsletter-signup-content { width: 100%; padding: 0 15px; box-sizing: border-box; } #goingToTop { top: -35px; right: 15px !important; } #logo { left: auto; } #navbox-content { width: 100%; box-sizing: border-box; padding: 0 15px; } } @media only screen and (max-width : 1199px) and (min-width : 960px) { #header { width: 100%; } #header-shadow { width: 960px; } #mid { width: 960px; } div.contentcontainer { width: 100%; } #logobox-content { width: 100%; } #top #topcontent { width: 100%; } #blackbar #blackbar-content { width: 100%; } #graybar #graybar-content { width: 100%; } #header .header_top { width: 100%; } #header #navtools #navtools-content { width: 100%; } div.contentcontainer { width: 100%; } #navbox-content { width: 100%; } #navtools #navtools-content { width: 100%; } #subnavbox-content { width: 100%; } #subnavbox-gray-content { width: 100%; } .footer_subwrap { width: 100%; } .footer_content { width: 100%; } .footer_content.credits { width: 100%; } div.contentLeft { width: 100%; } div.contentRight { width: 100%; } div.contentRight.fullsized { width: 100%; } div.contentLeft.hasSideBar { width: 75%; } div.contentLeft.hasRightBar { width: 75%; } div.contentLeft.hasSideBar.hasRightBar { width: 75%; } div.contentSide { width: 23.4%; overflow: hidden; } div.featureImageBox { width: 100%; } #newsletter-signup #newsletter-signup-content { width: 100%; } div.main .vwb-box h2 { word-break: break-all; } } /* ## Breakpoint: 960 ####################################################### */ @media only screen and (max-width : 959px) { #mid { box-sizing: border-box; padding: 0 15px; } div.contentRight { width: 100%; margin: 1.6% 0; } div.contentRight .rightBlock { padding: 0; } div.contentLeft.hasSideBar.hasRightBar { width: 75%; } div.contentSide { width: 23.4%; overflow: hidden; } div.main .vwb-box h2 { word-break: break-all; } }