/*#region Algemene tags*/
html{
font-size: 16px;
}
body{
background-image: url(/img/background.jpg);
color: #5b5549;
font-family: "myriad-pro";
font-size: 16px;
}
body > img {
position: absolute;
}
figure img{
width: 100%;
}
a,
input,
button{
outline: none;
}
h1 {
color: #e47e05;
font-size: 30px;
font-weight: 600;
margin: 0 0 20px 0;
text-transform: uppercase;
}
h2 {
color: #e47e05;
font-size: 23px;
font-weight: 600;
margin: 36px 0 14px 0;
text-transform: uppercase;
}
a:hover{
text-decoration: none;
}
.no-img-resize img{
width: auto;
}
/*#endregion*/
/*#region Header & Navigatie*/
nav img,
header img{
max-width: 650px;
width: 100%;
}
nav a.phone{
background-color: #e47e05;
border-radius: 10px;
color: #000000;
float: right;
font-size: 19px;
margin: 18px 0 0 0;
padding: 2px 15px 4px 35px;
position: relative;
}
nav a.phone:before{
content: "\e007";
font-family: webstart75;
font-size: 22px;
left: 10px;
position: absolute;
top: 0;
}
nav a.phone_small{
display: block;
float: right;
height: 32px;
margin: 16px 0 0 0;
}
nav a.phone_small:before{
color: #e47e05;
content: "\e007";
font-family: webstart75;
font-size: 30px;
}
nav a.location_small{
display: block;
float: right;
height: 32px;
margin: 12px 0 0 0;
}
nav a.location_small:before{
color: #e47e05;
content: "\e000";
font-family: webstart75;
font-size: 30px;
}
nav .wide-container{
min-height: 60px;
}
nav .companylogo{
float: left;
width: 190px;
}
nav .navcontent{
float: right;
min-width: 150px;
}
nav .navbar-header{
height: 80px;
}
nav .caret{
display: none;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > span > a {
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
padding-left: 20px;
position: relative;
}
.navbar-default .navbar-nav > li > span > a {
padding: 15px 15px 15px 20px;
width: 90%;
}
.navbar-fixed-top .navbar-collapse{
max-height: none;
}
.navbar-default .navbar-nav > .active > a:after,
.navbar-default .navbar-nav > .active > span > a:after{
content: "\e00a";
font-family: webstart75;
font-size: 20px;
left: 0;
position: absolute;
top: 10px;
}
.navbar-default .navbar-nav > li > span {
display: block;
overflow: auto;
}
.navbar-default .navbar-nav > li > span.open{
height: 20px;
}
.navbar-toggle{
background-color: #0d0903;
margin-right: 5px;
margin-top: 16px;
padding-right: 0;
}
.navbar-toggle .icon-bar{
background-color: #e98110;
height: 3px;
width: 30px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 7px;
}
.navbar-header input.search{
background-color: #5b5549;
background-image: url(/img/icons/search.png);
background-position: center left 5px;
background-repeat: no-repeat;
border: 0;
border-radius: 10px;
color: #ffffff;
float: right;
font-size: 19px;
height: 33px;
margin: 18px 15px 0 0;
padding: 0 5px 0 35px;
width: 180px;
}
.navbar-default .navbar-nav > li.dropdown span .open-submenu{
background-image: none;
display: block;
float: right;
padding-top: 0;
text-align: center;
width: 10%;
}
.dropdown-menu{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
float: none;
margin-top: -20px;
padding-left: 20px;
position: inherit;
}
.dropdown-menu > li > a{
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
}
header .wide-container{
margin-top: 80px;
}
header .wide-container.intro{
position: relative;
}
header .wide-container.intro img{
max-width: none;
position: relative;
}
header .wide-container.intro .intro-text{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAC1CAYAAACnM5sFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+FJREFUeNrs2zFKA1EYhVHRsbAQrGwVexsRVyC2FuJyXIiNZAdWgoU7SAgRN5BgIYKCrRCCV5iAsbBx5q/OgQvD41Wv+4pptrc2rtcAAAD+Z5E9Z6/ZOHtsz1Y03gkAAOjAerbX7iSbZjdtkKxcAgAA6Np+dpWdChAAAKDCZnaZXQgQAACgyll2LEAAAIAq51kjQAAAgAq72ZEAAQAAqhwKEAAAoMqBAAEAAKrsCBAAAKCKn9ABAIA6AgQAABAgAACAAAEAABAgAACAAAEAABAgAACAAAEAAAQIAACAAAEAAAQIAACAAAEAAAQIAAAgQAAAAAQIAAAgQAAAAAQIAAAgQAAAAAECAAAgQAAAAAECAAAgQAAAAAECAAAIEAAAAAECAAAIEAAAAAECAAAIEAAAQIAAAAAIEAAAQIAAAAAIEAAAQIAAAAAIEAAAQIAAAAACBAAAQIAAAAACBAAAQIAAAAACBAAAECAAAAACBAAAECAAAAACBAAAECAAAIAAAQAAECAAAIAAAQAAECAAAIAAAQAABAgAAIAAAQAABAgAAIAAAQAABAgAACBAAAAABAgAACBAAAAABAgAACBAAAAABAgAACBAAAAAAQIAACBAAAAAAQIAACBAAAAAAQIAAAgQAAAAAQIAAAgQAAAAAQIAAAgQAABAgAAAAAgQAABAgAAAAAgQAABAgAAAAAIEAABAgAAAAAIEAABAgAAAAAIEAAAQIAAAAAIEAAAQIAAAAAIEAAAQIAAAAAIEAAAQIAAAgAABAAAQIAAAgAABAAAQIAAAgAABAAAECAAAgAABAAAECAAAgAABAAAECAAAIEAAAAAECAAAIEAAAAAECAAAIEAAAAABAgAAIEAAAAABAgAAIEAAAAABAgAACBAAAAABAgAACBAAAAABAgAACBAAAECAAAAACBAAAECAAAAACBAAAECAAAAACBAAAECAAAAAAgQAAECAAAAAAgQAAECAAAAAAgQAABAgAAAAAgQAABAgAAAAAgQAABAgAACAAAEAABAgAACAAAEAABAgAACAAAEAAAQIAACAAAEAAAQIAACAAAEAAAQIAAAgQAAAAAQIAAAgQAAAAAQIAAAgQAAAAAQIAAAgQAAAAAECAAAgQAAAAAECAAAgQAAAAAECAAAIEAAAAAECAAAIEAAAAAECAAAIEAAAQIAAAAAIEAAAQIAAAAD86VOAAAAAVT4ECAAAUGUmQAAAgCpPAgQAAKjwlo0FCAAAUOE2mwsQAACgbw/Z6Puj8RYAAEBP5tlddr88ECAAAEAfptkge/l5KEAAAICuzLL3bJhNssXvC18CDAAjkB8yEd7MVAAAAABJRU5ErkJggg==') /*/img/intro-background.png*/;
background-position: right;
background-repeat: no-repeat;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
bottom: 30px;
color: #f4f2ed;
font-size: 21px;
max-width: 748px;
padding: 30px 80px 35px 15px;
position: absolute;
width: 80%;
}
header .wide-container.intro .intro-text h2{
font-size: 55px;
font-weight: 600;
margin: 10px 0 10px 0;
text-transform: uppercase;
}
header .container {
color: #ffffff;
}
/*#endregion*/
/*#region Containers*/
.wide-container{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
}
.wide-container.light{
background-color: #f4f2ed;
}
.wide-container.medium{
background-color: #e47e05;
color: #ffffff;
}
.wide-container.dark{
background-color: #0d0903;
color: #f4f2ed;
}
.wide-container.semi-dark{
background-color: #252423;
color: #ffffff;
}
.container.padding-vert{
padding: 55px 15px;
}
.container.footer{
padding: 25px 0 50px 15px;
}
.light h1{
color: #e47e05;
margin-bottom: 20px;
}
.medium h1{
color: #f4f2ed;
margin-bottom: 40px;
}
.dark h1{
color: #e47e05;
margin-bottom: 18px;
}
.dark a{
color: #f4f2ed;
}
/*#endregion*/
/*#region Sliders & Gallery */
.page-slider{
margin: 25px 0 25px 0;
}
.page-slider .item{
background-color: #ffffff;
display: block;
height: 345px;
margin: 0 16px 0 16px;
width: 25%;
}
.page-slider .item .image-container{
border-bottom: 1px solid #e4e1d9;
/*height: 160px;*/
padding-top: 50px;
width: 100%;
}
.page-slider .item .image-container img{
margin: 0 auto;
width: auto;
}
.page-slider .item .title{
display: block;
font-size: 25px;
padding-top: 20px;
text-align: center;
text-transform: uppercase;
}
.page-slider .item .readmore{
display: block;
background-color: #e47e05;
border-radius: 5px;
height: 35px;
margin: 15px auto 0 auto;
position: relative;
width: 35px;
}
.page-slider .item .readmore:before{
content: "+";
font-size: 22px;
left: 11px;
position: relative;
}
.page-slider .slick-prev,
.page-slider .slick-next{
background-color: transparent;
/*background-image: url(/img/icons/page-slider-controls.png);
background-repeat: no-repeat;*/
border: none;
height: 33px;
padding: 1px 0;
position: absolute;
top: 125px;
width: 21px;
z-index: 10;
}
.page-slider .slick-prev{
background-position: 0 0;
left: 0;
}
.page-slider .slick-next{
background-position: -21px 0;
right: 20px;
}
.page-slider .slick-prev:before,
.page-slider .slick-next:before{
font-family: webstart75;
font-size: 42px;
position: relative;
left: 0;
top: 0;
}
.page-slider .slick-prev:before{
content: "\e00b";
}
.page-slider .slick-next:before{
content: "\e00c";
}
.reference-slider{
/*height: 200px;*/
padding: 30px 0 30px 0;
}
.reference-slider a{
display: block;
margin: 0 15px 0 15px;
}
.gallery-slider .slider-image{
background-color: transparent;
height: auto;
}
.gallery-slider .slider-image img{
padding: 0 7px 0 7px;
width: 100%;
}
.gallery-slider .slick-prev,
.gallery-slider .slick-next{
background-color: transparent;
background-image: url(/img/icons/gallery-slider-controls.png);
background-repeat: no-repeat;
border: none;
height: 63px;
position: absolute;
top: 45%;
width: 47px;
}
.gallery-slider .slick-prev{
left: 20px;
}
.gallery-slider .slick-next{
background-position: -47px 0;
right: 20px;
}
/*#region Gallery*/
.gallery-thumbs{
margin: 15px 7px 0 7px;
}
.gallery-thumbs img{
width: 100%;
}
.gallery-thumbs .thumb{
cursor: pointer;
margin-bottom: 15px;
}
/*#endregion*/
/*#endregion*/
/*#region Knoppen*/
.button{
background-color: #0d0903;
border: none;
color: #ffffff;
display: inline-block;
font-size: 25px;
margin-bottom: 60px;
margin-top: 15px;
padding: 7px 13px;
text-align: center;
text-transform: uppercase;
}
.button:hover,
.button:focus,
.button:active{
text-decoration: none;
}
.buttongroup a{
margin-right: 15px;
text-align: center;
width: 230px;
}
.page-buttons .button:first-of-type{
margin-top: 35px;
}
.page-buttons .button{
margin: 5px 5px 5px 0;
}
/*#endregion*/
/*#region Nieuws*/
.more-news-link{
color: #f4f2ed;
display: block;
float: left;
font-size: 25px;
font-weight: 400;
padding: 0 0 0 0;
position: relative;
text-transform: uppercase;
}
.more-news-link:after{
content: "\e00c";
font-family: "webstart75";
font-size: 28px;
left: 7px;
position: relative;
top: 5px;
}
.news-item{
display: block;
margin: 0 0 50px 0;
}
.news-item .title{
background-color: #5b5549;
background-image: url(/img/icons/next.png);
background-position: right 20px center;
background-repeat: no-repeat;
color: #f4f2ed;
font-size: 16px;
padding: 20px 50px 20px 30px;
text-transform: uppercase;
}
.news-item img{
position: relative;
width: 100%;
z-index: 10;
}
.news-item:hover{
text-decoration: none;
}
.news-item figure.hovercaption{
position: relative;
overflow: auto;
z-index: 10;
}
.news-item figure.hovercaption figcaption{
background-color: #e47e05;
color: #ffffff;
display: none;
font-size: 16px;
height: 100%;
padding: 33px 22px 33px 22px;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
/*#endregion*/
/*#region Diensten*/
.service-container .item{
background-color: #ffffff;
display: block;
margin: 0 0 60px 0;
}
.service-container .item .image-container{
border-bottom: 1px solid #e4e1d9;
/*height: 160px;*/
padding-top: 30px;
width: 100%;
}
.service-container .item .image-container img{
display: block;
margin: 0 auto;
max-width: 280px;
}
.service-container .item .title{
display: block;
font-size: 25px;
text-align: center;
text-transform: uppercase;
}
.service-container .item .readmore{
display: block;
background-color: #e47e05;
border-radius: 5px;
height: 35px;
margin: 45px auto 0 auto;
position: relative;
width: 35px;
}
.service-container .item .readmore:before{
content: "\e022";
font-family: "webstart75";
font-size: 22px;
left: 7px;
position: relative;
top: 2px;
}
/*#endregion*/
/*#region Social links*/
.social-share {
color: #f5f3ee;
font-size: 25px;
font-weight: 300;
margin: 25px 0 0 0;
text-transform: uppercase;
}
.social-share span{
display: block;
float: left;
}
.social-share a{
background-repeat: no-repeat;
background-size: 100%;
display: block;
float: left;
height: 32px;
margin: 0 0 0 10px;
}
.social-share a:before{
font-family: webstart75;
}
.social-share a.sociallink-facebook:before{
content: "\e003";
}
.social-share a.sociallink-twitter:before{
content: "\e002";
}
.social-share a.sociallink-linkedin:before{
content: "\e004";
}
.social-share a.sociallink-googleplus:before{
content: "\e001";
}
.social-share a.sociallink-instagram:before{
content: "\e01a";
}
.social-share a.sociallink-pinterest:before{
content: "\e019";
}
.contact .social-share{
float: left;
font-size: 25px;
margin-bottom: 15px;
margin-top: 5px;
}
.contact .social-share a{
background-size: 100%;
height: 26px;
margin: 3px 7px 0 7px;
}
.contact .social-share a.social-facebook{
background-image: url(/img/icons/social-facebook.png);
width: 13px;
}
.contact .social-share a.social-twitter{
background-image: url(/img/icons/social-twitter.png);
background-position: 0 3px;
width: 26px;
}
.contact .social-share a.social-linkedin{
background-image: url(/img/icons/social-linkedin.png);
width: 26px;
}
.contact .fb-page{
margin-top: 25px;
}
.twitter-container iframe{
margin-top: 25px !important;
}
/*#endregion*/
/*#region Contact*/
.contact .companyname,
.contact-page .companyname{
padding-right: 20px;
}
.contact .phone,
.contact-page .phone{
padding-right: 20px;
}
.contact-page span a{
color: #e47e05;
}
.contact-page span.phone a{
color: #5b5549;
}
.contact-page form{
margin-top: 36px;
}
.contact-page form ol{
list-style: none;
margin: 0;
padding: 0;
}
.contact-page form ol li{
margin: 0 0 15px 0;
}
.contact-page form legend{
border: none;
float: left;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0 12px;
width: 100px;
}
.contact-page form label span{
font-weight: 400;
margin-right: 40px;
}
.contact-page form input[type=radio]{
background-color: #f4f2ed;
border: none;
}
.contact-page form input[type=text],
.contact-page form input[type=email]{
background-color: #f4f2ed;
border: none;
padding: 12px;
width: 100%;
}
.contact-page form textarea{
background-color: #f4f2ed;
border: none;
height: 180px;
padding: 12px;
width: 100%;
}
.contact-page form input.error,
.contact-page form textarea.error{
border: 1px solid #ff0000;
}
.contact-page form .errorlabel{
color: #ff0000;
font-size: 12px;
font-weight: 500;
line-height: 14px;
margin: 0 0 0 0;
}
.form-element{
display: none;
}
.contact-page form ol li.checkbox{
margin: 0 0 5px 20px;
}
/*#endregion*/
/*#region Google Map*/
#map{
height: 421px;
}
/*#endregion*/
/* #region FAQ*/
.faq-item {
margin-bottom: 15px;
}
.faq-item a {
display: block;
font-size: 20px;
font-weight: 400;
padding: 10px 30px;
position: relative;
text-transform: uppercase;
}
.faq-item a:after {
content: "\e023";
font-family: "webstart75";
font-size: 20px;
margin-right: 3px;
position: absolute;
right: 15px;
top: 10px;
}
.faq-item.active a:after {
content: "\e027";
}
.faq-item .answer {
display: none;
padding: 15px 30px;
}
.faq-item.active .answer {
display: block;
}
/* #endregion */
/*region Sitemap*/
.sitemap > ul{
margin: 0;
}
.sitemap a{
color: #c42f26;
}
.sitemap ul {
padding: 0 0 0 20px;
}
/*endregion*/
/*#region Youtube*/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*#endregion*/
/*#region Agenda*/
.agendarow:first-of-type {
margin-top: 25px;
}
.agendarow:last-of-type {
margin-bottom: 125px;
}
.agendarow {
position: relative;
}
.agendarow > div {
padding-bottom: 17px;
padding-top: 17px;
width: 100%;
}
.dateLabel {
display: inline-block;
font-weight: 400;
width: 225px;
}
/*#endregion*/
/*#region Subnavigatie*/
.subnav,
.subnav ul{
list-style: none;
margin: 0;
padding: 0;
}
.subnav li{
margin: 0;
padding: 0;
}
.subnav a{
color: #5b5549;
display: block;
font-size: 23px;
margin: 0 0 10px 0;
text-transform: uppercase;
}
.subnav li.active > a{
color: #e47e05;
}
.subnav > li > ul{
margin-left: 23px;
}
.subnav ul {
display: none;
}
.subnav li.active ul{
display: block;
}
/*#endregion*/
/*#region Footer*/
.footer a{
color: #f4f2ed;
font-size: 13px;
}
.footer .divider{
padding: 0 10px;
}
.footer a.ipsis{
padding: 0 0 0 10px;
position: relative;
}
.footer a.ipsis:before{
content: "\e008";
font-family: "webstart75";
font-size: 15px;
margin-right: 3px;
position: relative;
top: 3px;
}
.footer .scroll-to-top{
background-image: url(/img/icons/to-top.png);
background-repeat: no-repeat;
display: block;
float: right;
height: 33px;
margin: 0 15px 0 0;
width: 33px;
}
.footer-companies figure{
float: left;
margin: 0 30px 0 0;
}
/*#endregion*/
/*#region Diversen*/
.page-images figure{
margin-bottom: 45px;
}
.clickbox{
cursor: pointer;
}
.spacer{
display: block;
height: 60px;
}
/*#endregion*/
/*#region VANAF 768px (Small) */
@media (min-width: 768px) {
.navbar-toggle{
margin-left: 20px;
margin-top: 30px;
}
nav .navbar-header {
height: 60px;
}
nav .wide-container{
min-height: 120px;
}
header .wide-container{
margin-top: 120px;
}
nav a.phone{
margin: 38px 0 0 0;
}
nav .companylogo{
height: 120px;
width: auto;
}
nav .companylogo a {
display: block;
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav .navbar-collapse{
margin-top: 60px;
}
.navbar-right .dropdown-menu {
right: auto;
left: 10px;
}
.nav > li > span > a {
width: auto;
}
.more-news-link{
float: right;
}
.social-share a{
margin: 0 0 0 20px;
}
.contact .social-share{
float: right;
margin-bottom: 0;
}
.news-item .title{
font-size: 22px;
}
.news-item .title:after{
content: "\e00c";
font-family: "webstart75";
font-size: 28px;
position: absolute;
right: 30px;
}
.contact-page form legend{
width: 200px;
}
.contact-page form label span{
margin-right: 80px;
}
}
/*#endregion*/
/*#region VANAF 992px (Medium) */
@media (min-width: 992px) {
h1{
font-size: 39px;
}
nav a.phone{
margin: 18px 0 0 0;
}
.navbar-toggle{
margin-top: 30px;
padding-right: 10px;
}
.navbar-nav > li > .dropdown-menu{
background-color: #e47e05;
float: left;
padding: 20px 0 20px 0;
position: absolute;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > span > a:hover,
.navbar-default .navbar-nav > li > span > a:focus,
.navbar-default .navbar-nav > .active > span > a,
.navbar-default .navbar-nav > .active > span > a:hover,
.navbar-default .navbar-nav > .active > span > a:focus{
padding-bottom: 20px;
padding-left: 20px;
}
.navbar-default .navbar-nav > li > a:hover:after,
.navbar-default .navbar-nav > li > a:focus:after,
.navbar-default .navbar-nav > .active > a:after,
.navbar-default .navbar-nav > .active > a:hover:after,
.navbar-default .navbar-nav > .active > a:focus:after,
.navbar-default .navbar-nav > li > span > a:hover:after,
.navbar-default .navbar-nav > li > span > a:focus:after,
.navbar-default .navbar-nav > .active > span > a:after,
.navbar-default .navbar-nav > .active > span > a:hover:after,
.navbar-default .navbar-nav > .active > span > a:focus:after {
bottom: 0;
content: "\e016";
font-family: webstart75;
font-size: 12px;
/*left: calc(50% - 7px);*/
left: 50%;
position: absolute;
top: auto;
}
.navbar-default .navbar-nav > li > span {
display: block;
overflow: hidden;
padding-bottom: 22px;
}
.navbar-nav > li > span > a{
padding: 15px 15px 15px 15px;
width: auto;
}
li.dropdown{
margin-top: 11px;
}
.dropdown-menu > li > a{
color: #0d0903;
font-size: 17px;
padding: 5px 35px 5px 25px;
text-transform: uppercase;
}
.dropdown-menu > li > a:hover{
background-color: #0d0903;
background-color: rgba(13,9,3, 0.9);
color: #ffffff;
}
.page-slider .slick-prev{
left: -30px;
}
.page-slider .slick-next{
right: -10px;
}
.button{
margin-bottom: 0;
}
.social-share {
font-size: 25px;
}
.social-share a{
margin: 0 0 0 15px;
}
nav .navbar-collapse{
margin-top: 0;
}
header .wide-container.intro .intro-text{
bottom: 60px;
}
}
/*#endregion*/
/*#region Vanaf 1250px (Large (1200+)) */
@media (min-width: 1250px) {
.wide-container{
max-width: 1520px;
}
header .wide-container.intro .intro-text{
padding-left: 150px;
}
.page-slider .slick-prev{
left: -20px;
}
.page-slider .slick-next{
right: 0;
}
}
/*#endregion*/