body{margin: 0; padding: 0; font-family: "Montserrat", sans-serif; background: #fff; color: #202020; font-size: 16px;} *{margin: 0; padding: 0; box-sizing: border-box; } .h1,.h2,.h3,.h4,.h5,.h6, h1,h2,h3,h4,h5,h6{line-height: 100%; display: block; font-weight: 700} h1,.h1{font-size: 36px} h2,.h2{font-size: 23px} h3,.h3{font-size: 20px} h4,.h4{font-size: 18px} h5,.h5{font-size: 17px} h6,.h6{font-size: 16px} /**** Page ****/ #maxw1{max-width: 1230px; margin: 0 auto; padding: 0 15px;} #maxw0{max-width: 1475px; margin: 0 auto; padding: 0 15px;} .frame {margin: 0 auto; max-width: 100%; } .frame:after{content: ""; display: table; clear: both; } .bit-1 {float: left; width: 100%; } .clear:after{content: "\00a0"; visibility: hidden; display: block; height: 0; clear: both; } b, strong{font-weight:700} /**** Custum ****/ *:focus{outline: none;} .fa{font-weight: 400!important} input, select, textarea, button{font-family: 'Open Sans', sans-serif;} a{text-decoration: none;} img{max-width: 100%;} ul li{list-style-type: none;} input[type="button"], input[type="submit"], a, button, .knop{transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; cursor: pointer;} .transition{transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out;} .n_shadow{-webkit-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); -moz-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24);} /**** Buttons ****/ .btn{display: inline-block; border: none; background: transparent; color: transparent; text-align: center; border-radius: 5px; font-weight:700} .s_btn{font-size: 13px; line-height: 16px; padding: 8px 15px;} .n_btn{font-size: 14px; line-height: 16px; padding: 11px 20px;} .l_btn{font-size: 18px; line-height: 16px; padding: 18px 30px;} .xl_btn{font-size: 20px; line-height: 16px; padding: 18px 30px;} .btn.color_1{background: #fd901c; color: #202020;} .btn.color_1:hover{background: #eee; color: #202020;} .btn.color_2{background: #0aaf41; color: #fff;} .btn.color_2:hover{background: #eee; color: #202020;} .btn.color_3{background: #f9f9f9; color: #202020;} .btn.color_3:hover{background: #202020; color: #f9f9f9;} .btn .left{display: inline-block; margin-right: 15px;} .btn .right{display: inline-block; margin-left: 15px;} .btn.l_btn .left{margin-right: 25px;} .btn.l_btn .right{margin-left: 25px;} .btn.xl_btn .left{margin-right: 35px;} .btn.xl_btn .right{margin-left: 35px;} .flexbox{display:flex; flex-wrap:wrap} .flexbox.space_between{justify-content: space-between;} .flexbox.justify_center{justify-content: center;} .flexbox.align_right{justify-content: flex-end;} .flexbox.align_center{align-items: center;} .flexbox.align_bottom{align-items: flex-end;} .flexbox.align_top{align-items: flex-start;} /**** Content container ****/ #content_container{line-height: 190%;} #content_container > *:first-child{margin-top: 0;} #content_container > *:last-child{margin-bottom: 0;} #content_container h1 + *, #content_container h2 + *, #content_container h3 + *, #content_container h4 + *, #content_container h5 + *, #content_container h6 + *{margin-top: 5px!important} #content_container > ul,#content_container > ol,#content_container table, #content_container p, p{margin: 1.8em 0;} #content_container > ol, #content_container > ul{padding: 0 0 0 20px;} #content_container ul li{list-style-type: disc;} #content_container ol ul,#content_container ol ol,#content_container ul ol,#content_container ul ul{padding: 0 0 0 20px;} #content_container a{text-decoration: underline; color: #202020} #content_container a:hover{color: #fd901c;} /**** Header ****/ .logo{float: left; font-size: 0; margin: 0px 0; width: 330px; height: 100px; text-align: left; display: table;} .logo span{display: table-cell; vertical-align: middle} .logo img{max-width: 100%; max-height: 100px;} .right_header{text-align: right; width: 680px; max-width: calc(100% - 370px); } .search_form{float: left; width: 270px; position: relative;} #mobile-menu .search_form{display: none;} .search_form input{float: left; width: 100%; height: 54px; border-radius: 50px; border: 1px solid #eee; padding: 0 70px 0 30px; font-size: 14px;} .search_form input::-webkit-input-placeholder{color: #ccc; } .search_form input::-moz-placeholder{color: #ccc;} .search_form input:-ms-input-placeholder{color: #ccc;} .search_form input:-moz-placeholder{color: #ccc;} .search_form button{float: left; width: 70px; color: #ccc; height: 54px; position: absolute; top: 0; right: 0; border-radius: 100%; border: none; background: transparent; font-size: 16px;} .rh_btns{margin: 0 0 0 0px} .rh_btns a{display:inline-block; width: 54px; height: 54px; line-height: 54px; font-size: 18px; background: #fd901c; color: #202020; border-radius: 100%; text-align: center; margin: 0 0 0 16px; } .rh_btns a:first-child{margin: 0;} .rh_btns a.whatsapp{background: #0aaf41; color:#fff} .rh_btns a:hover{background: #202020; color:#fff} /**** Menu ****/ #menu{background: #202020; position: relative; z-index: 2;} .menu{float: left;} .menu > li{float: left; position: relative; margin-right:60px;} .menu > li > a{float: left; line-height: 70px; color: #fff; font-size: 20px; font-weight:500;} .menu > li.menu-item-has-children > a:after{content: "\f0d7"; font-family:"Font Awesome 6 Pro";font-weight:900; margin: 0 0 0 10px; display:inline-block; font-size: 0.95em;} .menu > li.active > a, .menu > li:hover > a{color: #fd901c} .menu > li:hover > ul{display: block;} .menu ul{display: none; position: absolute; top: 100%; left: 0; float: left; min-width: 230px; background: #fff; -webkit-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); -moz-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); white-space: nowrap;} .menu ul li{float: left; width: 100%;} .menu ul li a{float: left; width: 100%; line-height: 14px; padding: 14px 15px; color: #202020; border-left: 4px solid #fff;} .menu ul li a:hover{border-color: #fd901c; background: #eee} .menu ul ul{display: none!important;} .rh_btns .menu_btn{display: none; background: #202020!important; color:#fff!important; position:relative;} .rh_btns .menu_btn span{position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; font-size: 9px; line-height: 1;} #mobile-menu{display: none;} .menu_overlay{display: none;} .menu_overlay{position: fixed; top: 0; left: 0; height: 100%; background: #202020; opacity: 0.3; z-index: 190} .menu_overlay.active{display: inline-block} /**** Slider ****/ #slider{position: relative; z-index: 1;} .home_slide{padding: 34.3% 0 0; min-height: 420px;} .page_slide{padding: 20.8% 0 0; min-height: 250px;} #slider .overlay{position:absolute; top:0; left:0; height:100%; width:100%; background:rgba(0,0,0,0.25)} .slide_content{position: absolute; left: 0; top: 0; margin: auto 0;} .slide_content .h1{font-weight: 400; color: #fff; text-align: center; font-size: 60px; text-shadow: 0 0 16px rgba(0,0,0,0.56);} .slide_content .subtitle{color: #fff; text-align: center; font-size: 30px; line-height:1.3; margin-top:1.5em; padding: 0 100px} .slide_btns{text-align: center; font-size: 0; margin: 90px 0 0} .slide_btns a{vertical-align: top; margin: 4px 10px;} /**** Breadcrumbs ****/ #breadcrumbs{padding: 25px 0; font-size:12px; line-height:16px; text-align:right} .breadcrumbs_container{color: #bcbcbc} .breadcrumbs_container > *{display:inline-block; line-height: 16px;} .breadcrumbs_container i.fa-angle-right{margin: 0 7px;} .breadcrumbs_container a{color: #bcbcbc} .breadcrumbs_container a:hover{color: #fd901c} /**** Content ****/ #content{padding: 0 0 70px;} .left_column{float: left; width: 60%; padding: 15px 0 0; margin: 0 0 40px;} .left_column.full_width{width: 100%;} .right_column{float: right; width: 32.9%} .page_head{margin: 0 0 45px;} .page_head span{color: #fd901c} .contact_info{background: #f9f9f9; padding: 35px; margin-bottom:20px; border-radius:20px} .contact_info .h3{color: #fd901c; margin: 0 0 25px;} .contact_info li{float: left; width: 100%; line-height: 16px; padding: 3px 0;} .contact_info li span{display: inline-block; width: 45px;} .contact_info li i{color: #fd901c} .contact_info li a{color: #202020} .contact_info li a:hover{color: #0aaf41} .contact_info .route_btn{margin: 25px 0 0;} .douglas_inzet{background:#f4f4f4; padding:30px 40px; border-radius:15px;} .douglas_inzet .douglas_logo{width:85px; margin-right:30px;} .douglas_inzet .text{width:calc(100% - 115px)} .douglas_inzet .text > *{margin-top:0!important} .douglas_inzet .text > *:last-child{margin-bottom:0!important} .rc_thumb img{border-radius: 20px; } .rc_usps{margin: 45px 0 0;} .rc_usps span{float: left; width: 100%; line-height: 16px; font-size: 114%; font-weight: 600; padding: 14px 0 14px 75px;} .rc_usps span:before{content: "\f00c"; font-family:"Font Awesome 6 Pro";font-weight:900; float: left; line-height: 16px; margin: 0 0 0 -42px; color: #fd901c} /**** Content btns ****/ .content_btns{margin: 30px 0 0;} .content_btns a{ display: block; text-align: left; margin: 10px 0px 0 0; display:block; position:relative; padding-right:50px} .content_btns a i{position:absolute; right:30px; top:50%; transform:translatey(-50%); margin:0} /**** Zoeken ****/ .search_item{margin: 0 0 30px;} .search_item .h3{margin: 0 0 15px; color: #fd901c} .search_item_content{padding: 20px; border: 1px solid #f9f9f9} .search_item_bottom{padding: 15px 20px; background: #f9f9f9} /**** Footer ****/ #footer{background: #202020; padding: 65px 0 0; color:#fff; line-height:2} .footer_left{width:25%; margin: 0 0px 35px 0; } .footer_logo{width:180px;} .footer_left .btn{margin: 20px 0 0;} .footer_adres{width: calc(30%)} .footer_adres a{color:#fff;} .footer_adres a i{display:inline-block; width:30px; color:#fd901c} .footer_center{width: calc(45% - 190px); padding: 10px 0 0} .footer_center ul{ width: 100%; } .footer_center a{display: inline-block; padding: 0 0 0 34px; color: #fff; } .footer_center a:before{content: "\f178"; font-family:"Font Awesome 6 Pro";font-weight:900; width:34px; display:inline-block;margin: 0 0 0 -34px; color: #fd901c} .footer_center a:hover{color: #fd901c} .footer_right{ width: 190px} .social_btns{ width: calc(100% + 12px); margin: 0 -6px; text-align: right;} .social_btns a{display: inline-block; width: 54px; height: 54px; line-height: 54px; font-size: 22px; background: #fd901c; color: #fff; border-radius: 100%; text-align: center; margin: 5px 6px;} .social_btns a:hover{background: #0aaf41} .bottom{margin: 60px 0 0; font-size:0.95em; text-align: center; border-top: 1px solid rgba(225,225,225,0.13); line-height: 16px; padding: 28px 0; color: rgba(225,225,225,0.35)} .bottom a{color: rgba(225,225,225,0.35)} .bottom a:hover{color: #fd901c} /**** Formulieren ****/ #content_container div.wpcf7{float: left; width: 100%; margin: 15px 0;} #content_container .wpcf7-form{float: left; width: 550px; max-width: 100%;} #content_container .wpcf7 .form_item{float: left; width: 100%; position: relative; padding: 0 0 0 160px; margin: 0 0 15px;} #content_container .wpcf7 .form_label{float: left; width: 150px; line-height: 16px; margin: 13px 0 0 -160px;} #content_container .wpcf7 input, #content_container .wpcf7 select, #content_container .wpcf7 textarea{float: left; width: 100%; height: 42px; border: 1px solid #e3e3e3; padding: 0 15px; font-size: 14px; background: #fff;} #content_container .wpcf7 textarea{height: 140px; padding: 10px 15px;} #content_container .wpcf7 .wpcf7-radio{float: left; width: 100%; margin: 0 0 13px; line-height: 16px;} #content_container .wpcf7 .wpcf7-radio .wpcf7-list-item{float: left; width: 100%; margin: 13px 0 0;} #content_container .wpcf7 input[type="checkbox"], #content_container .wpcf7 input[type="radio"]{float: left; width: auto; height: 16px; margin: 0 5px 0 0} span.wpcf7-not-valid-tip{display: none!important;} [aria-invalid="true"]{border-color: red!important;} div.wpcf7-response-output{float: left; width: 100%; margin: 10px 0 0!important; border: none!important; padding: 0!important; color: #79ad31} div.wpcf7-response-output.wpcf7-validation-errors{color: red;} /**** Galerij ****/ .gallery_block{background: #f9f9f9; padding: 25px; margin: 40px 0 0} .gallery_list{float: left; width: calc(100% + 12px); margin: -6px;} .gallery_list a{float: left; width: calc(25% - 12px); margin: 6px;} .gallery_list a span{padding: 85% 0 0;} .gallery_list a:hover span{background: #000; opacity: 0.3} /**** FAQ ****/ .faq_block{margin: 25px 0 0;} .faq_block .h3{color: #fd901c; margin: 15px 0 15px;} .faq_item{margin: 0 0 20px;} .faq_item:last-child{margin: 0;} .faq_question{background: #f9f9f9; cursor: pointer; padding: 15px 50px 15px 15px; font-weight: bold; position: relative; border-bottom: 1px solid #202020} .faq_question i{position: absolute; float: left; width: 50px; text-align: center; line-height: 30px; right: 0; top: 50%; margin: -15px 0 0;} .faq_item.active .faq_question i{transform: rotate(180deg);} .faq_answer{padding: 15px; display: none; font-size: 93%} /**** Downloads ****/ .download_block{margin: 40px 0 0;} .download_block .h3{color: #fd901c; margin: 0 0 15px;} .download_item{background: #f9f9f9; cursor: pointer; padding: 15px 15px 15px 60px; font-weight: bold; position: relative; border-bottom: 1px solid transparent; margin: 0 0 5px; color: #202020} .download_item i{position: absolute; float: left; width: 14px; text-align: center; line-height: 20px; left: 23px; top: 50%; margin: -10px 0 0; border-bottom: 2px solid #202020;} .download_item:hover{border-color: #202020} /**** Item list ****/ .item_list{float: left; width: calc(100% + 30px); margin: 15px -15px;} .item_item{float: left; width: calc(33.333% - 30px); margin: 20px 15px; border-bottom: 3px solid #fd901c} .item_item:hover{border-color: #202020} .item_item:hover .item_title{background: #202020} .item_image{padding: 50% 0 0;} .item_title{height: 60px; padding: 0 20px; background: #fd901c; color: #fff;} .item_title h4{height: 60px; display: table;} .item_title h4 span{display: table-cell; vertical-align: middle} .item_content{padding: 15px 20px;} .item_content #content_container{font-size: 93%; height: 100px; overflow: hidden; position: relative; color: #202020} .item_content #content_container:after{content: "\00a0"; float: left; width: 100%; position: absolute; left: 0; bottom: 0; height: 60px; background: url(img/overlay.png) repeat-x center / auto 60px; } /****************** MEDIAQUERIES *****************/ @media screen and (max-width: 1450px){ #menu .xl_btn { font-size: 18px; padding: 15px 20px;} .menu > li{margin-right:50px} .menu > li > a {font-size: 18px;} .slide_btns { margin: 60px 0 0;} } @media screen and (max-width: 1250px){ body{margin: 90px 0 0;} #header{position: fixed; top: 0; left: 0; z-index: 900; background: #fff; -webkit-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); -moz-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24); box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.24);} #menu{display: none;} .rh_btns .menu_btn{display: inline-block;} .rh_btns .menu_btn.active i:before{content: "\f00d";} .menu{display: none;} #mobile-menu{float: left; display: block; position: fixed; display: inline-block; padding: 30px 20px; left: 0; top: 90px; height: calc(100% - 90px); width: 340px; max-width: 100%; background: #fff; z-index: 700; margin: 0 0 0 -340px; transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -webkit-transition: 0.1s ease-in-out; overflow: auto; -webkit-overflow-scrolling: touch;} #mobile-menu.active{margin: 0;} #mobile-menu > ul{float: right; width: 500px; max-width: 100%; margin-bottom:30px;} #mobile-menu > ul > li{float: left; width: 100%; margin: 0 0 15px;} #mobile-menu > ul > li:last-child{margin: 0;} #mobile-menu > ul > li > a{float: left; width: 100%; background: #202020; color: #fff; line-height: 16px; font-size: 15px; padding: 16px 20px; position: relative; border-radius: 5px; font-weight: 600;} #mobile-menu > ul > li > a:hover, #mobile-menu > ul > li.sub > a{background: #fd901c;} #mobile-menu > ul > li.sub > a i:before{content:"\f106"; font-family:"Font Awesome 6 Pro";font-weight:900;} #mobile-menu ul ul{display: none; float: left; width: 100%; border-radius: 5px; overflow: hidden; margin: 10px 0 0;} #mobile-menu ul ul > li{float: left; width: 100%; margin: 0} #mobile-menu ul ul > li > a{float: left; width: 100%; padding: 10px 25px; background: #eee; color: #202020;} #mobile-menu ul ul > li > a:hover{background: #202020; color: #fff;} #mobile-menu li.child > a i{float: left; position: absolute; right: 0; top: 0; height: 100%; width: 50px; text-align: center;} #mobile-menu li.child > a i:before{float: left; width: 100%; height: 30px; line-height: 30px; position: absolute; top: 50%; margin: -15px 0 0; left: 0; font-size: 20px; border-left: 1px solid rgba(255,255,255,0.3)} .slide_content .h1{font-size:45px} .slide_content .subtitle { font-size: 24px;} } @media screen and (max-width: 1100px){ .slide_content .subtitle { padding: 0 0px;} } @media screen and (max-width: 960px){ body{margin: 80px 0 0;} #mobile-menu{top:80px; height:calc(100% - 80px)} .logo{margin: 10px 0; width: 250px; height: 60px;} .logo img{max-height: 60px;} .search_form input{height: 42px;} .search_form button{height: 42px;} .right_header{ max-width: calc(100% - 280px); width: 560px;} .slide_btns{margin: 20px 0 0} #footer{padding: 40px 0 0} .footer_left{width:100%; } .footer_adres{width:50%; margin-bottom:40px;} .footer_center{ width: 50%; margin-bottom:40px;} .footer_right{width: 100%; margin: 0 0 20px;} .social_btns{text-align: left;} .social_btns a{height: 42px; line-height: 42px; width: 42px; margin: 0 0 0 12px;} } @media screen and (max-width: 830px){ body{font-size: 15px;} h1,.h1{font-size: 30px} h2,.h2{font-size: 22px} h3,.h3{font-size: 20px} h4,.h4{font-size: 18px} h5,.h5{font-size: 16px} h6,.h6{font-size: 15px} .xl_btn{font-size: 15px; line-height: 16px; padding: 14px 30px;} .l_btn { font-size: 16px; padding: 16px 20px;} .right_header{width: auto; max-width: none;} .rh_btns a{height: 42px; line-height: 42px; width: 42px; margin: 0 0 0 12px;} .rh_btns .menu_btn span { bottom: 6px; font-size: 7px;} #header .search_form{display: none;} #mobile-menu .search_form{display: block;} .search_form{width: 100%; margin: 0 0 30px;} .slide_content .h1{font-size:36px} .slide_content .subtitle { font-size: 20px;} #content{padding: 0 0 40px 0;} .left_column{width: 100%; padding: 0;} .right_column{width: 100%;} .page_head{margin: 0 0 25px;} .rc_thumb{text-align: center; font-size: 0;} .rc_thumb a{width: 400px; max-width: 100%; float: none; display: inline-block;} .item_list{width: calc(100% + 18px); margin: 20px -9px;} .item_item{width: calc(50% - 18px); margin: 15px 9px;} .item_title{padding: 0 15px; height: 50px;} .item_title h4{height: 50px; font-size: 16px} .item_content{padding: 15px;} } @media screen and (max-width: 720px){ .footer_adres{width:100%} .footer_center{width: 100%;} } @media screen and (max-width: 600px){ .slide_btns .btn{ display: block; text-align: left; margin: 10px 0px 0 0; position:relative; padding-right:50px} .slide_btns .btn i{position:absolute; right:30px; top:50%; transform:translatey(-50%); margin:0} } @media screen and (max-width: 550px){ body{margin: 60px 0 0;} #maxw0{padding: 0 10px;} #maxw1{padding: 0 10px;} #mobile-menu{top: 60px; height: calc(100% - 60px);} .logo{margin: 5px 0; width: 130px; height: 50px;} .logo img{max-height: 50px;} .rh_btns{margin: 0;} .rh_btns a{height: 36px; line-height: 36px; width: 36px; margin: 0 0 0 2px; font-size: 14px;} .slide_content .h1{font-size:30px} .slide_content .subtitle { font-size: 18px;} #content_container .wpcf7 .form_item{padding: 0; margin: 0 0 25px;} #content_container .wpcf7 .form_label{margin: 0 0 6px; width: 100%;} .gallery_list a{width: calc(33.3333% - 12px);} .douglas_inzet{ padding:30px 30px;} .douglas_inzet .douglas_logo{width:65px; margin-right:20px;} .douglas_inzet .text{width:calc(100% - 85px)} } @media screen and (max-width: 470px){ .item_item{width: calc(100% - 18px);} .content_btns a{width: 100%;} .douglas_inzet{ padding:30px 15px;} .douglas_inzet .douglas_logo{width:45px; margin-right:20px;} .douglas_inzet .text{width:calc(100% - 65px)} }