@charset "utf-8"; /* RESET ############################################################################### */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var,u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html, body { width: 100%; height: 100%; min-height: 100%; -webkit-text-size-adjust: none; } /* BASIC ############################################################################### */ h1, h2, h3, h4, .container, .content{ position: relative; float: left; width: 100%; } .fl{ position: relative; float: left; } .fr{ position: relative; float: right; } .left, .right{ position: relative; float: left; width: 50%; } .centered{ position: relative; width: 1600px; margin: 0 auto 0 auto; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;} div:before, div:after, ::before, ::after{ content:''; } a, div, li, ul, .fl, .fr, .left, .right, h1, h2, h3, h4, .container, .content{ box-sizing: border-box; } #gebruikerstest input{ display: none; } .mobielzichtbaar { display: none; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } img{ max-width: 100%; height: auto; } img a{ border: 0px; outline:none; } a{ outline:none; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } input[type=submit] { -webkit-appearance: none; } .transition, .trans{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .transition5, .trans5{ transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear; } .transition10, .trans10{ transition:all 1s linear; -o-transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; } .video { margin-left: 0 !important; } /* OPMAAK ############################################################################### */ html, body { font-family: 'Roboto Slab', serif; font-size:16px; font-weight: normal; background: #301C0C; color: #fff; line-height: 200%; } body.noscroll { overflow: hidden; } a{ color: #C49A6C; text-decoration:none; } a:hover{ text-decoration:underline; } h1, h2, h3, h4, h5{ color: #C49A6C; line-height: 130%; } h1 span, h2 span, h3 span{ } h1{ font-size: 40px; padding-bottom: 25px; color: #fff; } h2{ font-size: 32px; padding-bottom: 25px; color: #fff; } h3{ font-size: 18px; padding-bottom: 15px; color: #fff; } h4{ font-size: 14px; padding-bottom: 25px; color: #fff; } #voorbeeldweergave { position: fixed; bottom: 0; left: 0; right: 0; padding: 0 8px; letter-spacing: 1px; border-top: 1px solid rgba(255,255,255,0.3); text-align: center; z-index: 10; font-weight: 500; text-transform: uppercase; font-size: 10px; background: #4849FF; color: #fff; box-shadow: 0px -9px 20px rgb(72 73 255 / 30%); } .centered.smaller { width: 1460px; } /* BUTTONS ############################################################################################################################# */ .btn{ border-radius: 50px; font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase; background: #C49A6C; padding: 0 35px; height: 50px; line-height: 50px; position: relative; float: left; } .btn{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .btn:hover{ background: #333; text-decoration: none; } .btn:before{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .btn:after{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .btn.transparant { background: none; color: #707070; box-shadow: none; } .btn.transparant:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; border: 2px solid #E5E5E5; border-radius: 50px; } .btn.transparant:before { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .btn.transparant:hover:before { border: 2px solid #009239; } .btn.transparant:hover { background: #009239; color: #fff; } .btn.transparantwit { background: none; color: #fff; box-shadow: none; } .btn.transparantwit:before { content:''; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; border: 2px solid rgba(255,255,255,0.2); border-radius: 50px; } .btn.transparantwit:before { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .btn.transparantwit:hover:before { border: 2px solid #009239; } .btn.transparantwit:hover { background: #009239; color: #fff; } .btn.scan { padding-left: 60px; background: #009239; color: #fff; box-shadow: none;} .btn.scan:after { content:''; position: absolute; top: 14px; left: 20px; width: 24px; height: 24px; background: url("../img/svg-schoonmaakscan-wit.svg") no-repeat center center; background-size: auto 100%; } .btn.scan:hover { background: #01319a; } .btn.openmenu { padding-left: 70px; background: #fff; color: #3c3c3b; box-shadow: none; font-weight: bold; font-size: 16px;} .btn.openmenu:after { content:''; position: absolute; top: 16px; left: 20px; width: 24px; height: 18px; background: url("../img/svg-menu.svg") no-repeat center center; background-size: auto 100%; } .btn.openmenu:hover { color: #009239; } .btn.openmenu:hover:after { background: url("../img/svg-menu-kleur.svg") no-repeat center center; background-size: auto 100%; } .btn.tel { padding-left: 50px; background: #fff; color: #301C0C; box-shadow: none; line-height: 55px; height: 55px;} .btn.tel span { z-index: 1; } .btn.tel:after { z-index: 0; content:''; position: absolute; top: 18px; left: 20px; width: 18px; height: 18px; background: url("../img/svg-telefoon-licht.svg") no-repeat center center; background-size: auto 100%; } .btn.tel:before { box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); z-index: 0; opacity: 0; border-radius: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/visual-btn-licht.jpg") no-repeat center center; background-size: cover; } .btn.tel:hover { color: #fff!important; } .btn.tel:hover:after { background: url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 100%; } .btn.tel:hover:before { opacity: 1; } .btn.wit { background: #fff; color: #301C0C; box-shadow: none; text-shadow: none; line-height: 55px; height: 55px;} .btn.wit span { z-index: 1; } .btn.wit:before { box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); z-index: 0; opacity: 0; border-radius: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/visual-btn.jpg") no-repeat center center; background-size: cover; } .btn.wit:hover { color: #fff!important; } .btn.wit:hover:before { opacity: 1; } .btn.wit2 { text-shadow: 0 3px 15px rgba(0,0,0,0.7); color: #fff!important; background: url("../img/visual-btn-licht.jpg") no-repeat center center; background-size: cover; color: #301C0C; box-shadow: none; line-height: 55px; height: 55px;} .btn.wit2 span { z-index: 1; } .btn.wit2:before { box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); z-index: 0; opacity: 0; border-radius: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/visual-btn-lichter.jpg") no-repeat center center; background-size: cover; } .btn.wit2:hover { color: #000!important; } .btn.wit2:hover:before { opacity: 1; } .btn-leesverder{ background: #C49A6C; margin-bottom: 30px; font-size: 15px; text-decoration: none!important; font-weight: 600; margin-right: 10px; text-transform: uppercase; padding: 0 35px; height: 55px; line-height: 55px; position: relative; float: left; } .btn-leesverder{ border-radius: 50px; color: #fff!important; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .btn-leesverder:hover{ text-decoration: none!important; background: #C49A6C; } .btn.arrow { padding-right: 50px;} .btn.arrow:after { content:''; position: absolute; top: 50%; margin-top: -7px; right: 19px; width: 8px; height: 14px; background: url("../img/svg-pijl-rechts-wit.svg") no-repeat center center; background-size: auto 100%; } .btn.donker { font-size: 16px; box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); text-shadow: 0 3px 15px rgba(0,0,0,0.7); border-radius: 55px; border: 0; text-transform: uppercase; background: #C49A6C url("../img/visual-btn.jpg") no-repeat center center; background-size: cover; padding: 0 65px; color:#fff; line-height: 55px; height: 55px; } .btn.donker:before { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 17px; left: 20px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } .btn.donker:after { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 17px; right: 20px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } .btn.donker:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } .btn.donker:after { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } .btn.donker:hover { color: #fff!important; background: #C49A6C url("../img/visual-btn-licht.jpg") no-repeat center center; background-size: cover; text-decoration: none; } .btn.donker:hover:before { transform: rotate(90deg); } .btn.donker:hover:after { transform: rotate(-90deg); } /* MENU ############################################################################################################################# */ #menu{ position: absolute; top: 10px; right: 0; list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 3; } #menu li{ position: relative; float: left; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;} #menu a{ position: relative; float: left; height: 60px; line-height: 60px; padding: 0 18px 0 18px; border: 0; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; border-bottom: 3px solid transparent;} #menu a.active{ text-decoration: none; } #menu .openmenu .menuitem{ margin-left: 10px; margin-right: 5px; height: 54px; width: 54px; border-radius: 100%; } #menu .openmenu .menuitem:before{ position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -9px; width: 18px; height: 14px; } #menu .last .menuitem { line-height: 49px; margin-left: 10px; padding: 0 25px; border-radius: 5px; border: 2px solid transparent; } #menu .tel { margin-left: 0px; padding-right: 40px; } #menu .tel .tel{ padding-left: 30px; font-weight: bold; } #menu .tel .tel:before{ content:''; position: absolute; top: 50%; margin-top: -8px; left: 0px; width: 13px; height: 19px; background: url("../img/svg-telefoon-licht.svg") no-repeat; background-size: auto 100%; } #menu .tel .tel:after{ content:''; position: absolute; top: 50%; margin-top: -3px; right: -15px; width: 6px; height: 6px; border-radius: 100%; background: #C49A6C; } #menu a:hover{ } #menu a.active:hover{ text-decoration: underline; } #menu li:hover{ z-index: 1; } #menu .menumetsubmenu.active{ } #menu .menumetsubmenuli{ margin-right: 15px; } #menu .menumetsubmenuli:before{ position: absolute; top: 50%; margin-top: -3px; right: -2px; width: 10px; height: 6px; background: url("../img/svg-pijl-beneden-kleur-1.svg") no-repeat top left; background-size: auto 100%; } #menu .menumetsubmenuli a{ } #menu .menumetsubmenuli .submenu a{ cursor: pointer!important; } #menu .menusplit { height: 15px; } .submenucontainer{ position: relative; float: left; } .submenucontainer:hover .submenu{ display: block; } .submenuklikoverlay{ position: absolute; top: 50px; left: 0%; } .submenu{ position: relative; float: left; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); margin-top: 0px; width: 260px; border-radius: 10px; display: none; box-sizing: border-box;} .submenu a{ position: relative!important; float: left!important; font-size: 12px!important; border-right: 0!important; height: auto!important; padding: 15px 20px 15px 20px!important; width: 100%!important; margin: 0!important; line-height: 140%!important; box-sizing: border-box; } .submenu li{ border-bottom: 1px solid rgba(255,255,255,0.3); position: relative; float: left; width: 100%; } .submenu li:first-of-type a{ border-radius: 10px 10px 0 0!important;} .submenu a:hover{ padding-left: 35px!important; text-decoration: none!important; box-shadow: inset 0px 12px 5px -9px rgba(0,0,0,0.2); } .submenu a:before{ content:''; opacity: 0; position: absolute; top: 21px; left: 10px; width: 4px; height: 4px; border-radius: 100%; background: #fff; transition:all .4s linear; -o-transition:all .4s linear; -moz-transition:all .4s linear; -webkit-transition:all .4s linear; } .submenu a:hover:before{ opacity: 1; left: 20px; } .submenu:after{ position: absolute; bottom: -2px; width: 30px; height: 4px; border-radius: 4px; left: 50%; margin-left: -15px; } .mobilesubmenuitem { display: none; } #menu .mobielmenuzichtbaar { display:none; } #menu a{ color: #301C0C; font-size: 14px; font-weight: bold; text-transform: uppercase; } #menu a.active{ color: #C49A6C!important; text-decoration: underline; } #menu a:hover{ color: #C49A6C!important; } #menu a.active:hover{ } #menu .openmenu .menuitem{ background: #533B27 url("../img/visual-openmenu.jpg") no-repeat center center; background-size: cover; } #menu .openmenu .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%;} #menu .openmenu:hover .menuitem{ box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); background: #533B27 url("../img/visual-openmenu-hover.jpg") no-repeat center center; background-size: cover; } #menu .openmenu:hover .menuitem:before{ background: url("../img/svg-menu-wit.svg") no-repeat; background-size: auto 100%;} #menu .last .menuitem { box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); text-shadow: 0 3px 15px rgba(0,0,0,0.7); border-radius: 55px; border: 0; text-transform: uppercase; background: #C49A6C url("../img/visual-btn-licht.jpg") no-repeat center center; background-size: cover; padding: 0 55px; color:#fff; line-height: 55px; height: 55px; margin-left: 20px; } #menu .last .menuitem:before { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 17px; left: 20px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } #menu .last .menuitem:after { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 17px; right: 20px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } #menu .last .menuitem:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #menu .last .menuitem:after { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #menu .last:hover .menuitem { color: #fff!important; background: #C49A6C url("../img/visual-btn.jpg") no-repeat center center; background-size: cover; text-decoration: none; } #menu .last:hover .menuitem:before { transform: rotate(90deg); } #menu .last:hover .menuitem:after { transform: rotate(-90deg); } #menu .menusplit { background: #444; } .submenu{ border-bottom: 15px solid #C49A6C; background: #C49A6C; } .submenu a{ color: #fff!important; } .submenu a:hover{ background:#C49A6C!important; color: #C49A6C!important; } .submenu:after{ background: #fff; } /* MENU OVERLAY ############################################################################################################################# */ #bg.onzichtbaar { display: none; } #menuoverlay { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 10000; display: none; } #menuoverlay:before { z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom:0; opacity: 1; background: #C49A6C url("../img/visual-menu.jpg") no-repeat right top; background-size: cover; } #menuoverlay:after { position: absolute; top: 0px; left: 50%; margin-left: -800px; width: 240px; height: 120px; border-radius: 0 0 20px 20px ; background:url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #menuoverlay.active { display: block; } #menuoverlay .content{ height: 100vh; z-index: 10000; } #menuoverlay .logowit { position: absolute; top: 30px; left: 40px; width: 215px; height: 55px; background: url("../img/logo-aannemersbedrijfsiebers.svg") no-repeat; background-size: auto 100%; } #menuoverlay .bg{ z-index: 1; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } #menuoverlay .bg:before{ position: absolute; bottom: 0; right: 0; width: 400px; height: 300px; transform: scaleX(-1); background: url("../img/visual-schaafsel3.png") no-repeat left top; background-size: 100% auto; } #menuoverlay #adres { z-index: 1; position: absolute; bottom: 45px; left: 0px; color: rgba(255,255,255,0.8); font-size: 12px; line-height: 160%; } #menuoverlay #adres a{ color: rgba(255,255,255,0.8); } #menuoverlay #adres a:hover{ color: #fff; } #menuoverlay #adres span{ font-weight: bold; } #menuoverlay #adres .kolom.adres{ width: 190px; } #menuoverlay #adres .kolom.adres2{ width: 190px; } #menuoverlay #adres .kolom.postbus{ width: 160px; } #menuoverlay #adres .kolom.telefoon{ width: 170px; } #menuoverlay #adres .kolom.email{ width: 250px; } #menuoverlay #adres .kolom.socialmedia a:hover{ margin-top: -3px; } #menuoverlay #adres .kolom.socialmedia .linkedin{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .twitter{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-twitter-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .instagram{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .pinterest{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-pinterest-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube-wit.svg") no-repeat; margin-right: 5px; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .linkedin:hover{ background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .facebook:hover{ background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .twitter:hover{ background: url("../img/svg-socialmedia-twitter-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .youtube:hover{ background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .instagram:hover{ background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .pinterest:hover{ background: url("../img/svg-socialmedia-pinterest-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay #adres .kolom.socialmedia .youtube:hover{ background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat; background-size: auto 100%; } #menuoverlay-top { position: absolute; top: 35px; right: 0px; } #menuoverlay-top #sluiten { z-index: 1; cursor: pointer; margin-left: 10px; border-radius: 50px; height: 50px; width: 50px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.10); } #menuoverlay-top #sluiten:before{ position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; background: url("../img/svg-sluiten.svg") no-repeat;} #menuoverlay-top #sluiten:hover { background: #C49A6C url("../img/visual-openmenu-hover.jpg") no-repeat center center; background-size: cover; } #menuoverlay-top #sluiten:hover:before{ background: url("../img/svg-sluiten-wit.svg") no-repeat;} #menuoverlay-top .afspraak { z-index: 1; background:#301C0C; text-transform: uppercase; font-weight: 500; font-size: 16px; line-height: 59px; color: #fff; margin-left: 10px; height: 65px; padding: 0 45px; border-radius: 5px; border: 2px solid transparent; } #menuoverlay-top .afspraak { } #menuoverlay-top .afspraak:hover { border: 2px solid rgba(255,255,255,0.4); background: #1c2443; text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,0.3); } #menuoverlay-top-menu { position: absolute; top: 150px; left: 0px; } #menuoverlay-top-menu .titel{ position: relative; float: left; width: 100%; color: #C49A6C; text-transform: uppercase; font-size: 13px; font-weight: 500; padding-bottom: 25px; } #menuoverlay-top-menu .titel:after{ position: absolute; top: 30px; left: 0; right: 30px; border-top: 1px solid #fff; opacity: 0.1; } #menuoverlay-top-menu a{ color: #fff; padding: 5px 0; position: relative; float: left; width: 100%; line-height: 140%; } #menuoverlay-top-menu ul{ list-style: none; padding: 0 0 0 0px; margin: 0;z-index: 1; width: 100%; } #menuoverlay-top-menu li{ position: relative; float: left; width: 100%; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;} #menuoverlay-top-menu li.menumetsubmenuli{ width:25%; padding-right: 30px; padding-bottom: 50px; box-sizing: border-box; } #menuoverlay-top-menu ul li ul{ width: 100%; padding-right: 50px; box-sizing: border-box; } #menuoverlay-top-menu li.menuzondersubmenuli{ clear: both; width: 400px; padding-right: 100px; box-sizing: border-box; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 500; padding-bottom: 20px; } .noscrolllayer { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #menuoverlay-top .aanvraag { position: fixed; bottom: 30px; right: 30px; font-size: 16px; box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); text-shadow: 0 3px 15px rgba(0,0,0,0.7); border-radius: 55px; border: 0; text-transform: uppercase; background: #C49A6C url("../img/visual-btn.jpg") no-repeat center center; background-size: cover; padding: 0 65px; color:#fff; line-height: 55px; height: 55px; } #menuoverlay-top .aanvraag:before { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 17px; left: 20px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } #menuoverlay-top .aanvraag:after { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 17px; right: 20px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } #menuoverlay-top .aanvraag:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #menuoverlay-top .aanvraag:after { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #menuoverlay-top .aanvraag:hover { color: #fff!important; background: #C49A6C url("../img/visual-btn-licht.jpg") no-repeat center center; background-size: cover; text-decoration: none; } #menuoverlay-top .aanvraag:hover:before { transform: rotate(90deg); } #menuoverlay-top .aanvraag:hover:after { transform: rotate(-90deg); } /* TOPCONTAINER ############################################################################################################################# */ #top{ position: fixed; box-shadow: 0 3px 6px rgba(0,0,0,0.1); top: 0px; left: 0px; z-index: 999; height: 115px; background: #fff url("../img/visual-menu-bg.jpg") no-repeat center center; background-size: cover;} #top .logo{ position: absolute; top: 6px; left: 0px; width: 200px; height: 65px; background: url("../img/logo-aannemersbedrijfsiebers.svg") no-repeat left center; background-size: auto 100%; z-index: 2;} #top .bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #top .bg:before{ position: absolute; top: -20px; margin-left: -930px; left: 50%; width: 90px; height: 90px; background: url("../img/visueel-schaafsel-menu1.png") no-repeat center center; background-size: contain; } #top .bg2{ position: absolute; top: 0; bottom: 0; width: 50%; right: 0; } #top .bg2:before{ position: absolute; top: -60px; margin-left: 790px; left: 0%; width: 200px; height: 170px; background: url("../img/visueel-schaafsel-menu2.png") no-repeat center center; background-size: contain; } #topbar{ color: #fff; background: #1A1818; background: url(../img/visueel-bg-usp.jpg) no-repeat top center; background-size: cover; } #topbar .topsplit { float: right; margin-top: 10px; width: 1px; height: 20px; background: #7F7E7E; } #topbar .topblok { float: right; margin-left: 0px; padding: 3px 25px 3px 25px; font-size: 14px; font-weight: bold; } #topbar a.topblok { color:#fff!important; } /* mobielctamenu ############################################################################################################################# */ #mobielctamenu{ display: none; z-index: 100; position: fixed; bottom: 0; left: 0; background: #fff url("../img/visual-btn-lichter.jpg") no-repeat top center; background-size: cover; box-shadow: 0 -3px 6px rgba(0,0,0,0.2); text-align: center; } #mobielctamenu a { width: 50%; padding: 10px 0; font-weight: 900; text-transform: uppercase; color: #301C0C; } #mobielctamenu a.whatsapp { padding-left: 15px; } #mobielctamenu a.whatsapp:before { position: absolute; top: 14px; left: 20px; width: 18px; height: 18px; background: url("../img/svg-whatsapp-donker.svg") no-repeat top left; background-size: auto 100%; } #mobielctamenu a.contact { padding-left: 15px; } #mobielctamenu a.contact:before { position: absolute; top: 14px; left: 20px; width: 18px; height: 18px; background: url("../img/svg-contact-telefoon-hover.svg") no-repeat top left; background-size: auto 100%; } #mobielctamenu a.offerte:before { position: absolute; top: 14px; left: 20px; width: 18px; height: 18px; background: url("../img/svg-contact-afspraak-donker.svg") no-repeat top left; background-size: auto 100%; } #mobielctamenu a.offerte { padding-left: 15px; } #mobielctamenu .split { position: absolute; top: 0px; bottom: 0; left: 50%; width: 1px; background: #ddd; } /* TOP VERVOLG + SCROLL ############################################################################################################################# */ #top.top1off{ } #top.top1off #menu{ } #top.top1off .logo{ } #top.top1off #menu .menuitem { } #top.top1off #menu .last .menuitem { } #top.top1off #menu .last .menuitem:hover { } #top.top1off #menu .last .menuitem:after { } #top.vervolgpagina{ } #top.vervolgpagina #menu{ } #top.vervolgpagina .logo{ } #top.vervolgpagina #menu .menuitem { } #top.vervolgpagina #menu .last .menuitem { } #top.vervolgpagina #menu .last .menuitem:hover { } #top.vervolgpagina #menu .last .menuitem:after { } /* HEADER ############################################################################################################################# */ #header{ height: 850px; } #header .bg{ position: absolute; top: 0px; left: 0; right: 0; height: 1080px; overflow: hidden; } #header .bg:before { position: absolute; top: 0px; right: 0px; bottom: 0; left: 0px; background: url("../img/visual-header.jpg") no-repeat center bottom; background-size: auto 100%; } #header .bg.animate { opacity: 0; } #header .bg.animate-active { opacity: 1; } #header div.banner{ z-index: 1; position: absolute; top: 230px; left:0px; width: 580px; } #header .container h1{ color: #301C0C; font-weight: 900; padding-bottom: 15px; font-size: 66px; line-height: 125%; text-transform: uppercase; } #header .container h1 span{ color: #301C0C; text-decoration: underline; } #header .container h3{ padding-bottom: 15px; line-height: 140%; padding-right: 20px; font-size: 22px; color: #301C0C; font-weight: 400; } #header .container h3 span{ font-weight: 900; } #header .container .btn{ margin: 20px 15px 0 0 ; } #header div.banner.animate { opacity: 0; transform: translateX(-20px); } #header div.banner.animate-active { opacity: 1; transform: translateX(0px); } /* uspbar ############################################################################################################################# */ #uspbar { box-shadow: inset 5px 18px 20px rgba(0,0,0,0.8); padding: 60px 0 60px; background: url("../img/visueel-bg-usp.jpg") no-repeat top center; background-size: cover; } #uspbar .uspbar { padding: 0 5%; } #uspbar .uspbar ul{ position: relative; float: left; width: 100%; } #uspbar .uspbar li{ position: relative; float: left; width: 33%; line-height: 160%; } #uspbar .uspbar li.middle{ } #uspbar .uspbar li.last{ } #uspbar .uspbar li span{ padding: 0px 50px 0px 75px; text-shadow: 0 3px 5px rgba(0,0,0,0.97); } #uspbar .uspbar li span:after{ position: absolute; top: 0px; left: 1px; width: 46px; height: 46px; background: url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 30% ;} #uspbar .uspbar li span:before{ position: absolute; top: 0px; left: 0px; width: 46px; height: 46px; border-radius: 100%; background: #C49A6C url("../img/visual-vink.jpg") no-repeat center center; background-size: cover; } #uspbar .uspbar li span:before{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } #uspbar .uspbar li.animate { opacity: 0; transform: translateY(-20px); } #uspbar .uspbar li.animate-active { opacity: 1; transform: translateY(0px); } #uspbar .uspbar li.first { transition-delay: 0.3s; transition-property: opacity, transform; } #uspbar .uspbar li.middle { transition-delay: 0.4s; transition-property: opacity, transform; } #uspbar .uspbar li.last { transition-delay: 0.5s; transition-property: opacity, transform; } /* INTRO ############################################################################################################################# */ #intro { padding: 150px 0 150px; text-shadow: 0 3px 5px rgba(0,0,0,0.5); z-index: 1; } #intro .bg { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; overflow: hidden; } #intro .bg:before {box-shadow: inset 5px 18px 20px rgba(0,0,0,0.8); position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: url("../img/visual-intro.jpg") no-repeat top left; background-size: cover; } #intro .bg2 { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; } #intro .bg2 .lb { position: absolute; top: 30px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #intro .bg2 .lo { position: absolute; bottom: 20px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #intro .bg2 .rb { position: absolute; top: 30px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #intro .bg2 .ro { position: absolute; bottom: 20px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #intro .bg2:before { position: absolute; bottom:-100px; left: 10px; width: 300px; height: 460px; background: url("../img/visual-tool1.png") no-repeat center center; background-size: contain; } #intro .bg2:after { position: absolute; top: 50px; right: 0px; width: 260px; height: 640px; background: url("../img/visueel-tool4.png") no-repeat left center; background-size: auto 100% } #intro .centered { width: 1460px; } #intro .intro{ padding: 0px 30px 0 55% ; } #intro .intro h2{ font-size: 50px; padding-bottom: 5px; font-weight: 900; } #intro .intro h3{ font-size: 26px; padding-bottom: 20px; } #intro .intro .txt{ padding: 0 0 40px; font-size: 20px; line-height: 180%; } #intro .intro .btn{ margin-left: 15px; } #intro .intro #fotos{ position: absolute; top: 0px; left: 0px; width: 48%; bottom: 0; } #intro .intro #fotos .foto1{ position: absolute; top: 0px; left: 0px; width: 70%; bottom: 40%; background: url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #intro .intro #fotos .foto2{ position: absolute; top: 40%; right: 0px; width: 50%; bottom: 15%; background: url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #intro .intro #fotos .foto3{ position: absolute; top: 65%; left: 5%; width: 40%; bottom: 0; background: url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #intro .intro #fotos .foto{ box-shadow: 0 5px 25px rgba(0,0,0,0.6); } #intro .intro #fotos .foto:before{ position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px;} #intro .intro #fotos .foto1:before{ background: url("../img/visual-aannemersbedrijf-1.jpg") no-repeat center center; background-size: cover;} #intro .intro #fotos .foto2:before{ background: url("../img/visual-aannemersbedrijf-2.jpg") no-repeat center center; background-size: cover;} #intro .intro #fotos .foto3:before{ background: url("../img/visual-aannemersbedrijf-3.jpg") no-repeat center center; background-size: cover;} #intro .intro #fotos .foto1.animate { opacity: 0; transform: translateY(-20px); } #intro .intro #fotos .foto2.animate { opacity: 0; transform: translateX(-20px); } #intro .intro #fotos .foto3.animate { opacity: 0; transform: translateY(-20px); } #intro .intro #fotos .foto.animate { transition-delay: 0.2s; transition-property: opacity, transform; } #intro .intro #fotos .foto2.animate { transition-delay: 0.4s; transition-property: opacity, transform; } #intro .intro #fotos .foto3.animate { transition-delay: 0.5s; transition-property: opacity, transform; } #intro .intro #fotos .foto1.animate-active { opacity: 1; transform: translateY(0px); } #intro .intro #fotos .foto2.animate-active { opacity: 1; transform: translateX(0px); } #intro .intro #fotos .foto3.animate-active { opacity: 1; transform: translateY(0px); } /* diensten ############################################################################################################################# */ #diensten { text-shadow: 0 3px 15px rgba(0,0,0,0.7); padding: 100px 0; text-align: center; z-index: 0; } #diensten .diensten { padding: 0 130px; } #diensten .bg { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; overflow: hidden; } #diensten .bg:before {box-shadow: inset 3px 5px 20px rgba(0,0,0,0.6); position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: url("../img/visual-producten.jpg") no-repeat top center; background-size: cover; } #diensten .bg:after { position: absolute; top: 80px; left: 50%; margin-left: -1200px; width: 400px; height: 420px; background: url("../img/visual-schaafsel1.png") no-repeat center center; background-size: auto 100%; } #diensten .bg2 { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; } #diensten .bg2 .lb { position: absolute; top: 30px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #diensten .bg2 .lo { position: absolute; bottom: 20px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #diensten .bg2 .rb { position: absolute; top: 30px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #diensten .bg2 .ro { position: absolute; bottom: 20px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #diensten .bg2 { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; } #diensten .diensten h2{ text-shadow: 0 3px 15px rgba(0,0,0,0.7); color: #fff; font-size: 50px; font-weight: 900; text-align: center; padding-bottom: 10px; } #diensten .diensten h3{ text-shadow: 0 3px 15px rgba(0,0,0,0.7); font-size: 22px; text-align: center; padding-bottom: 45px; } #diensten .diensten .dienstoverzicht{ } #diensten .diensten .dienstoverzicht .dienstitem{ width: 23%; margin-top: 20px; margin-left: 2.66%; height: 320px; text-align: center; background: url("../img/visual-blok.jpg") no-repeat center right; background-size: cover;} #diensten .diensten .dienstoverzicht .dienstitem:nth-child(1){ margin-left: 0%; } #diensten .diensten .dienstoverzicht .dienstitem:nth-child(5){ margin-left: 0%; } #diensten .diensten .dienstoverzicht .dienstitem span{ position: absolute; line-height: 140%; bottom: 25px; padding: 0 40px; left: 20px; right: 20px; color: #fff; font-weight: bold; } #diensten .diensten .dienstoverzicht .dienstitem.tweelijn span{ font-size: 16px; bottom: 15px; } #diensten .diensten .dienstoverzicht .dienstitem.drielijn span{ font-size: 14px; bottom: 10px; } #diensten .diensten .dienstoverzicht .dienstitem span:before, #diensten .diensten .dienstoverzicht .dienstitem span:after{ border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: url(../img/visual-schroef1.png) no-repeat center center; background-size: contain; } #diensten .diensten .dienstoverzicht .dienstitem span:before{ right: 10px; } #diensten .diensten .dienstoverzicht .dienstitem span:after{ left: 10px; } #diensten .diensten .dienstoverzicht .dienstitem span:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #diensten .diensten .dienstoverzicht .dienstitem span:after { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #diensten .diensten .dienstoverzicht .dienstitem:before{ position: absolute; top: 0; right: 0; left: 0; height: 240px; background:rgba(0,0,0,0.3); } #diensten .diensten .dienstoverzicht .dienstitem:hover { background: url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover;} #diensten .diensten .dienstoverzicht .dienstitem:hover span { text-shadow: none; color: #301C0C!important; } #diensten .diensten .dienstoverzicht .dienstitem:hover span:before { transform: rotate(90deg); box-shadow: none; } #diensten .diensten .dienstoverzicht .dienstitem:hover span:after { transform: rotate(-90deg); box-shadow: none; } #diensten .diensten .dienstoverzicht .dienstitem.kozijnen:before{ background: url("../img/blokken/aannemersbedrijf-siebers-kozijnen.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.voordeuren:before{ background: url("../img/blokken/aannemersbedrijf-siebers-voordeuren.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.schuiframen:before{ background: url("../img/blokken/aannemersbedrijf-siebers-schuiframen.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.vouwpui:before{ background: url("../img/blokken/aannemersbedrijf-siebers-vouwpui.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.jaren30kozijnen:before{ background: url("../img/blokken/aannemersbedrijf-siebers-jaren-30-kozijnen.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.kiepramen:before{ background: url("../img/blokken/aannemersbedrijf-siebers-draaikiepramen.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.openslaandedeuren:before{ background: url("../img/blokken/aannemersbedrijf-siebers-openslaandedeuren.jpg") no-repeat center center; background-size: cover; } #diensten .diensten .dienstoverzicht .dienstitem.getoogdwerk:before{ background: url("../img/blokken/aannemersbedrijf-siebers-rond-werk.jpg") no-repeat center center; background-size: cover; } #diensten .diensten.animate { opacity: 0; transform: translateY(-20px); } #diensten .diensten.animate-active { opacity: 1; transform: translateY(0px); } #reviewbalk { width: 30%; margin: 0 35%; border-radius: 10px; margin-top: 60px; background: #fff url(../img/visual-menu-bg.jpg) no-repeat center center; background-size: cover; } #reviewbalk.vervolgpagina { width: 34%; margin: 60px 33%; } #reviewbalk.sliderreviews { width: 80%; margin: 20px 10% 20px; padding: 30px 0 20px 30px; } #reviewbalk.sliderreviews.home { width: 60%; margin: 80px 20% 0px; } #reviewbalk.sliderreviews.offerte { width: 60%; margin: 80px 20% 0px; } #reviewbalk.sliderreviews #reviewslidertablet{ display:none; } #reviewbalk.sliderreviews #reviewslidermobiel{ display:none; } .offertereview #offertereviewtablet{ width: 880px!important; } .bedanktafbeelding{border-radius: 10px; margin-bottom: 40px; height: auto; } /* cta ############################################################################################################################# */ #cta { text-shadow: 0 3px 15px rgba(0,0,0,0.7); padding: 100px 0 400px; text-align: center; } #cta .centered{ width: 550px; } #cta .bg { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; } #cta .bg:before { position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: url("../img/visual-cta.jpg") no-repeat top center; background-size: cover; } #cta .bg:after { position: absolute; top: -100px; left: 50%; margin-left: -1060px; width: 260px; height: 320px; background: url("../img/visueel-schaafsel3.png") no-repeat center center; background-size: auto 100%; } #cta .cta h2{ color: #fff; font-size: 50px; font-weight: 900; text-align: center; padding-bottom: 5px; } #cta .cta h3{ font-size: 26px; text-align: center; padding-bottom: 15px; } #cta .cta .txt{ font-size: 18px; } #cta .btn{ margin-left: 120px; } #cta .btn span:after{ box-shadow: none; transform: scale(-1, 1); position: absolute; top: -10px; right: -240px; width: 130px; height: 80px; background: url("../img/svg-pijl-getekend.svg") no-repeat center center; background-size: 100% auto; } #cta .btn span:after{ -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -webkit-animation-name: arrowup; animation-name: arrowup; } @-webkit-keyframes arrowup { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes arrowup { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } #cta .cta.animate { opacity: 0; transform: translateY(-20px); } #cta .cta.animate-active { opacity: 1; transform: translateY(0px); } /* meerdetails ############################################################################################################################# */ #meerdetails { text-shadow: 0 3px 15px rgba(0,0,0,0.7); padding: 150px 0; z-index: 0; } #meerdetails .meerdetails { padding: 0 60% 0 80px; } #meerdetails .bg { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; overflow: hidden; } #meerdetails .bg:before {box-shadow: inset 5px 18px 20px rgba(0,0,0,0.8); position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: url("../img/visual-diensten.jpg") no-repeat top center; background-size: cover; } #meerdetails .bg2 { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; } #meerdetails .bg2 .lb { position: absolute; top: 30px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #meerdetails .bg2 .lo { position: absolute; bottom: 20px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #meerdetails .bg2 .rb { position: absolute; top: 30px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #meerdetails .bg2 .ro { position: absolute; bottom: 20px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #meerdetails .meerdetails h2{ color: #fff; font-size: 50px; font-weight: 900; padding-bottom: 10px; } #meerdetails .meerdetails h3{ font-size: 22px; padding-bottom: 35px; margin-bottom: 35px; } #meerdetails .meerdetails h3:before{ position: absolute; bottom: 0; left: 0; right: 0; height: 2px; opacity: 0.2; background: #fff; } #meerdetails .meerdetails .socialmedia{ font-weight: bold; margin-top: 30px; } #meerdetails .meerdetails .socialmedia a{ width: 40px; height: 40px; margin-right: 10px; margin-top: 10px; } #meerdetails .meerdetails .socialmedia a.facebook{ background: url("../img/svg-socialmedia-facebook-wit.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.instagram{ background: url("../img/svg-socialmedia-instagram-wit.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.linkedin{ background: url("../img/svg-socialmedia-linkedin-wit.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.pinterest{ background: url("../img/svg-socialmedia-pinterest-wit.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.youtube{ background: url("../img/svg-socialmedia-youtube-wit.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.facebook:hover{ background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.instagram:hover{ background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.linkedin:hover{ background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.pinterest:hover{ background: url("../img/svg-socialmedia-pinterest-hover.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .socialmedia a.youtube:hover{ background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .introductievideo{ position: absolute; top: -20px; right: 0; width: 45%; height: 400px; box-shadow: 0 5px 25px rgba(0,0,0,0.6); background: url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #meerdetails .meerdetails .introductievideo:before{ position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px;} #meerdetails .meerdetails .introductievideo:before{ background: url("../img/visual-aannemersbedrijf-video.jpg") no-repeat center center; background-size: cover;} #meerdetails .meerdetails .introductievideo:after{ position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; background: url("../img/svg-play.svg") no-repeat center center; background-size: contain; } #meerdetails .meerdetails .introductievideo:after{ transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s; } #meerdetails .meerdetails .introductievideo:hover:after{ transform: translateY(-10px); } #meerdetails .meerdetailstxt.animate { opacity: 0; transform: translateX(-20px); } #meerdetails .meerdetailstxt.animate-active { opacity: 1; transform: translateX(0px); } #meerdetails .meerdetails .socialmedia a.animate { opacity: 0; transform: translateY(-15px); } #meerdetails .meerdetails .socialmedia a.animate.facebook { transition-delay: 0.1s; transition-property: opacity, transform; } #meerdetails .meerdetails .socialmedia a.animate.instagram { transition-delay: 0.3s; transition-property: opacity, transform; } #meerdetails .meerdetails .socialmedia a.animate.linkedin { transition-delay: 0.5s; transition-property: opacity, transform; } #meerdetails .meerdetails .socialmedia a.animate.pinterest { transition-delay: 0.7s; transition-property: opacity, transform; } #meerdetails .meerdetails .socialmedia a.animate.youtube { transition-delay: 0.9s; transition-property: opacity, transform; } #meerdetails .meerdetails .socialmedia a.animate-active { opacity: 1; transform: translateY(0px); } /* vacaturelaag ############################################################################################################################# */ #vacaturelaag { text-shadow: 0 3px 15px rgba(0,0,0,0.7); padding: 150px 0; z-index: 0; } #vacaturelaag .vacaturelaag { padding: 0 40px 0 40px; } #vacaturelaag .bg { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; overflow: hidden; } #vacaturelaag .bg:before {box-shadow: inset 5px 18px 20px rgba(0,0,0,0.8); position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: url("../img/visual-diensten.jpg") no-repeat top left; background-size: cover; } #vacaturelaag .bg2 { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; } #vacaturelaag .bg2 .lb { position: absolute; top: 30px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #vacaturelaag .bg2 .lo { position: absolute; bottom: 20px; left: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #vacaturelaag .bg2 .rb { position: absolute; top: 30px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #vacaturelaag .bg2 .ro { position: absolute; bottom: 20px; right: 20px; width: 30px; height: 30px; border-radius: 100%; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: contain; box-shadow: 0 5px 5px rgba(0,0,0,0.5); } #vacaturelaag .vacaturelaag h2{ color: #fff; font-size: 50px; font-weight: 900; padding-bottom: 20px; } #vacaturelaag .vacaturelaag h3{ font-size: 22px; padding-bottom: 35px; margin-bottom: 35px; } #vacaturelaag .vacaturelaag h3:before{ position: absolute; bottom: 0; left: 0; right: 0; height: 2px; opacity: 0.2; background: #fff; } #vacaturelaag .vacatureitem{ border-radius: 5px; color: #fff; background: url(../img/visual-blok.jpg) no-repeat center right; background-size: cover; width: 49%; padding: 35px 90px 0 190px; min-height: 140px; margin: 0 0 30px 0; box-shadow: 0 3px 26px rgb(0 84 164 / 10%); } #vacaturelaag .vacatureitem:nth-child(odd){ margin-right: 2%; } #vacaturelaag .vacatureitem .top{ position: absolute; top: 0px; left: 0px; width: 350px; height: auto!important; } #vacaturelaag .vacatureitem .top img{ background: rgba(0,0,0,0.1); width: 140px; height: 140px!important; object-fit: cover; object-position: center center; } #vacaturelaag .vacatureitem .bottom{ padding: 0; letter-spacing: 1px; font-size: 15px; line-height: 200%; } #vacaturelaag .vacatureitem .bottom .leesverder{ padding: 0; display: none; } #vacaturelaag .vacatureitem .bottom .titel{ font-size: 22px; line-height: 130%; padding-top: 5px; padding-bottom: 5px; font-weight: bold; } #vacaturelaag .vacatureitem .bottom .logo{ display: none;} #vacaturelaag .vacatureitem:before{ position: absolute; bottom: 50%; margin-bottom: -8px; right: 40px; width: 8px; height: 16px; background: url("../img/svg-pijl-rechts.svg") no-repeat center center; background-size: 100% auto; } #vacaturelaag .vacatureitem:hover { background: url(../img/visual-blok-lichter.jpg) no-repeat center right; background-size: cover; color: #fff; box-shadow: 0px 6px 20px rgb(0 0 0 / 50%); } #vacaturelaag .vacatureitem:hover:before { background: url("../img/svg-pijl-rechts-wit.svg") no-repeat center center; background-size: 100% auto; } #vacaturelaag .vacatureitem:hover:before{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -webkit-animation-name: interactiekolomarrow; animation-name: interactiekolomarrow; } #vacaturelaag .toonalles{ color: #fff; position: absolute; right: 0px; top: 10px; font-size: 11px; text-transform: uppercase; font-weight: 500; opacity: 0.6; } #vacaturelaag .toonalles:hover{ opacity: 1; } @-webkit-keyframes interactiekolomarrow { 0% { opacity: 1; -webkit-transform: translateX(-3px); transform: translateX(-3px); } 50% { opacity: 0.6; -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { opacity: 0; -webkit-transform: translateX(5px); transform: translateX(5px); } } @keyframes interactiekolomarrow { 0% { opacity: 1; -webkit-transform: translateX(-3px); transform: translateX(-3px); } 50% { opacity: 0.6; -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { opacity: 0; -webkit-transform: translateX(5px); transform: translateX(5px); } } /* portfolio ############################################################################################################################# */ #portfolio { padding: 90px 0 90px; text-align: center; text-shadow: 0 3px 15px rgba(0,0,0,0.7); z-index: 1; } #portfolio .portfolio { padding: 0 250px; } #portfolio .bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #portfolio .bg:before { position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; background: url("../img/visual-intro.jpg") no-repeat top center; background-size: cover; } #portfolio .bg:after { position: absolute; right: 0px; bottom: -180px; width: 350px; height: 660px; background: url("../img/visual-tool2.png") no-repeat left top; background-size: cover; } #portfolio .bg2 { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #portfolio .bg2:before { position: absolute; left: 50%; margin-left: -1250px; bottom: -70px; width: 600px; height: 340px; background: url("../img/visual-schaafsel2.png") no-repeat left top; background-size: cover; } #portfolio .bg2:after { position: absolute; top: -40px; left: 50%; margin-left: -1200px; width: 400px; height: 420px; background: url("../img/visual-schaafsel1.png") no-repeat center center; background-size: auto 100%; } #portfolio .portfolio h2{ color: #fff; font-size: 50px; text-align: center; padding-bottom: 10px; font-weight: 900; } #portfolio .portfolio h3{ font-size: 26px; text-align: center; padding-bottom: 45px; } #portfolio .slideblok { box-shadow: 0 20px 20px rgba(0,0,0,0.4); padding: 10px; background: url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #portfolio .swiper { z-index: 0; width: 100%; height: 100%; } #portfolio .swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #portfolio .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } #portfolio .swiper-button-prev { top: 50%; left: 50%; margin-left: -650px; color: #301C0C; margin-top: -25px; width: 50px; height: 50px; border-radius: 100%; text-align: center; } #portfolio .swiper-button-next { top: 50%; right: 50%; margin-right: -650px; color: #301C0C; margin-top: -25px; width: 50px; height: 50px; border-radius: 100%; text-align: center; } #portfolio .swiper-button-prev { box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); text-shadow: 0 3px 15px rgba(0,0,0,0.7); border-radius: 55px; background: #C49A6C url("../img/visual-arrow-bg.jpg") no-repeat center center; background-size: cover; } #portfolio .swiper-button-next { box-shadow: inset 2px 7px 25px rgba(0,0,0,0.5); text-shadow: 0 3px 15px rgba(0,0,0,0.7); border-radius: 55px; background: #C49A6C url("../img/visual-arrow-bg.jpg") no-repeat center center; background-size: cover; } #portfolio .swiper-button-prev:after { font-size: 16px; text-shadow: 0 3px 6px rgba(0,0,0,0.6); font-weight: bold; color: #fff; } #portfolio .swiper-button-next:after { font-size: 16px; text-shadow: 0 3px 6px rgba(0,0,0,0.6); font-weight: bold; color: #fff; } #portfolio .btn { margin-top: 70px; margin-left: 420px; } #portfolio .swiper-button-prev:hover { box-shadow: 2px 7px 25px rgba(0,0,0,0.5); text-shadow: none; background: #fff url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #portfolio .swiper-button-next:hover { box-shadow: 2px 7px 25px rgba(0,0,0,0.3); text-shadow: none; background: #fff url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover; } #portfolio .swiper-button-prev:hover:after { color: #301C0C; } #portfolio .swiper-button-next:hover:after { color: #301C0C; } /* faq ############################################################################################################################# */ #faq { padding: 150px 0 150px 0; z-index: 0; } #faq .bg{ position: absolute; top: 0; left: 0; right: 0; height: 900px;} #faq .bg:before{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/visual-faq.jpg") no-repeat left top; background-size: cover; } #faq .faq h2{ text-shadow: 0 3px 15px rgba(0,0,0,0.7); color: #fff; font-size: 50px; font-weight: 900; text-align: center; padding-bottom: 10px; } #faq .faq h3{ text-shadow: 0 3px 15px rgba(0,0,0,0.7); font-size: 22px; text-align: center; padding-bottom: 45px; } #faq .centered{ width: 900px; text-align: center; } #faq .faqitems{ } #faq .faqitems .faqitem{ cursor: pointer; padding: 15px 25px 15px 30px; background: #fff; border-radius: 30px; margin: 10px 0; text-align: left; font-weight: 500; color: #301C0C; } #faq .faqitems .faqitem .nummer{ position: absolute; top: 15px; left: 15px; height: 30px; width: 30px; line-height: 28px; font-weight: bold; background: url("../img/visual-schroef3.png") no-repeat center center; background-size: cover; text-align: center; border-radius: 100%; color: #fff; margin-right: 20px; } #faq .faqitems .faqitem .vraag{ font-weight: bold; padding: 0px 35px; } #faq .faqitems .faqitem .sluiten{ position: absolute; overflow: hidden; width: 0px; opacity: 0; top: 15px; right: 20px; height: 25px; line-height: 25px; color: #fff; background: #C49A6C url("../img/visual-contactblok.jpg") no-repeat; background-size: cover; text-align: center; text-transform: uppercase; font-size: 10px; font-weight: bold; border-radius: 15px; } #faq .faqitems .faqitem .antwoord{ height: 0px; overflow: hidden; padding: 0 30px; opacity: 0; background: #f5f5f5; box-shadow: inset 1px 3px 10px rgba(0,0,0,0.05); border-radius: 10px; } #faq .faqitems .faqitem:after{ position: absolute; top: 3px; right: 20px; height: 55px; width: 25px; background: url("../img/svg-pijl-beneden-kleur-1.svg") no-repeat center center; background-size: 50% auto; } #faq .faqitems .faqitem:after{ transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s; } #faq .btn { margin-left: 460px; } #faq .btn.arrow2:after{ transform: scale(-1, 1); position: absolute; top: 30px; right: -180px; width: 130px; height: 30px; background: url("../img/svg-pijl-getekend.svg") no-repeat center center; background-size: 100% auto; } #faq .faqitems .faqitem.active .vraag { font-weight: bold; color: #C49A6C; } #faq .faqitems .faqitem.active .antwoord { height: auto; margin: 10px 0; padding: 20px 30px; opacity: 1; } #faq .faqitems .faqitem.active .sluiten { width: 110px; opacity: 1; } #faq .faqitems .faqitem.active .nummer { transform: rotate(90deg); } #faq .faqitems .faqitem.active:after { opacity: 0; } #faq .faqitems .faqitem ul{ text-align: left; padding: 20px 0 20px 40px; } #faq .faqitems .faqitem ul li{ list-style: disc; padding: 5px 0 5px 30px; list-style-position: outside; } #faq .faqitems .faqitem ol{ text-align: left; padding: 20px 0 20px 40px; } #faq .faqitems .faqitem ol li{ list-style: decimal; padding: 5px 0 5px 30px; list-style-position: outside; } #faq .faqitems .faqitem:hover{ } #faq .faqitems .faqitem:hover .vraag{ font-weight: bold; color: #C49A6C; } /* CONTACT ############################################################################################################################# */ #contact{ text-shadow: 0 3px 15px rgba(0,0,0,0.7); z-index: 1; padding: 150px 0 90px; font-weight: 500; color: #fff; } #contact .bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 215px; overflow: hidden; } #contact .bg:before { box-shadow: inset 5px 8px 20px rgba(0,0,0,0.8); position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; background: url("../img/visual-contact.jpg") no-repeat top center; background-size: cover; } #contact .bg2 { position: absolute; left: 50%; top: 0px; width: 70px; height: 40px; margin-left: -35px; overflow: hidden; } #contact .bg2:before { position: absolute; left: 0; top: -35px; width: 70px; height: 70px; border-radius: 100%; background: url("../img/visual-contactblok.jpg") no-repeat center center; box-shadow: 0 5px 2px rgba(0,0,0,0.6); } #contact .bg3 { position: absolute; left: 50%; top: -10px; width: 30px; height: 30px; margin-left: -15px; background: url("../img/visual-schroef2.png") no-repeat center center; background-size: cover; border-radius: 100%; box-shadow: 0 5px 5px rgba(0,0,0,0.7); } #contact .bg4 { position: absolute; top: -370px; width: 50%; right: 0px; bottom: 0px; overflow: hidden; } #contact .bg4:before { position: absolute; left: 0; margin-left: 700px; top: 0px; width: 360px; height: 490px; background: url("../img/visual-tool3.png") no-repeat center center; background-size: cover; } #contact .centered { width: 1460px; } #contact .contactintro { padding: 0 68% 0 0; } #contact .contactintro:before { position: absolute; top: -40px; right: 30px; left: 0; bottom: -57px; background: url("../img/visual-team-aannemersbedrijf-siebers-tools.png") no-repeat right bottom; background-size: auto 100%; } #contact h2{ color: #fff; font-size: 46px;font-weight: 900; line-height: 120%; padding-bottom: 20px; } #contact a{ color: #fff; } #contact .intro{ font-size: 22px;} #contact .opties{ padding: 50px 0 50px; font-size: 16px; } #contact .tel { width: 290px; height: 55px; padding-left: 55px; text-align: left; margin-top: 50px; line-height: normal; } #contact .tel span{ font-size: 25px; padding-top: 5px; } #contact .tel:before { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 38px; background:url("../img/svg-telefoon-wit.svg") no-repeat top left; background-size: 100% auto; } #contact .tel:hover { text-decoration: none; } #contact .contactblokken .contactblok{ font-size: 13px; text-align: left; width: 31%; line-height: 180%; border-radius: 20px; padding: 40px 40px 40px 170px; background: #fff; box-shadow: 0 3px 35px rgba(0,0,0,0.5); } #contact .contactblokken .contactblok .titel{ font-weight: bold; font-size: 20px; padding-bottom: 5px; } #contact .contactblokken .contactblok.middle{ margin: 0 3.5%; } #contact .contactblokken .contactblok { background: url("../img/visual-contactblok.jpg") no-repeat center center; background-size: cover; } #contact .contactblokken .contactblok:after { border-radius: 100%; box-shadow: 0 4px 5px rgba(0,0,0,0.5); position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; background: url("../img/visual-schroef1.png") no-repeat center center; background-size: contain; } #contact .contactblokken .contactblok:after { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s; } #contact .contactblokken .contactblok:before { border: 2px solid rgba(255,255,255,0.2); position: absolute; top: 50%; margin-top: -50px; left: 35px; width: 100px; height: 100px; border-radius: 100%; } #contact .contactblokken .contactblok:before { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #contact .contactblokken .contactblok1:before { background: rgba(0,0,0,0.3) url("../img/svg-contact-afspraak.svg") no-repeat center center; background-size: 100% 42px;} #contact .contactblokken .contactblok2:before { background: rgba(0,0,0,0.3) url("../img/svg-contact-email.svg") no-repeat center center; background-size: 100% 42px;} #contact .contactblokken .contactblok3:before { background: rgba(0,0,0,0.3) url("../img/svg-contact-groep.svg") no-repeat center center; background-size: 100% 42px;} #contact .contactblokken .contactblok.animate { opacity: 0; transform: translateY(-20px); } #contact .contactblokken .contactblok1.animate { transition-delay: 0.2s; transition-property: opacity, transform; } #contact .contactblokken .contactblok2.animate { transition-delay: 0.2s; transition-property: opacity, transform; } #contact .contactblokken .contactblok3.animate { transition-delay: 0.3s; transition-property: opacity, transform; } #contact .contactblokken .contactblok.animate-active { opacity: 1; transform: translateY(0px); } #contact .contactblokken .contactblok:hover { text-shadow: none; color: #301C0C; background: url("../img/visual-blok-licht2.jpg") no-repeat center center; background-size: cover; } #contact .contactblokken .contactblok:hover:before { border: 2px solid #fff; box-shadow: 0px 2px 3px rgba(0,0,0,0.1); } #contact .contactblokken .contactblok1:hover:before { box-shadow: 0 5px 10px rgba(0,0,0,0.1); background: rgba(255,255,255,0.7) url("../img/svg-contact-afspraak-hover.svg") no-repeat center center; background-size: 100% 42px;} #contact .contactblokken .contactblok2:hover:before { box-shadow: 0 5px 10px rgba(0,0,0,0.1); background: #fff url("../img/svg-contact-email-hover.svg") no-repeat center center; background-size: 100% 42px;} #contact .contactblokken .contactblok3:hover:before { box-shadow: 0 5px 10px rgba(0,0,0,0.1); background: #fff url("../img/svg-contact-groep-hover.svg") no-repeat center center; background-size: 100% 42px;} #contact .contactblokken .contactblok:hover:after { transform: rotate(90deg); box-shadow: none; } /* AFSLUITING ############################################################################################################################# */ #afsluiting { text-shadow: 0 3px 15px rgba(0,0,0,0.7); padding: 0 0 240px; font-size: 13px; line-height: 180%; text-align: center; font-weight: 500; z-index: 0; } #afsluiting .afsluiting { padding-top: 0px; } #afsluiting .werkgebied { padding: 0 350px 30px; } #afsluiting .werkgebied h3{ padding-bottom: 10px; } #afsluiting .bg { position: absolute; bottom: 0px; left: 0px; right: 0px; top: -215px; overflow: hidden; } #afsluiting .bg:before { position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; background: url("../img/visual-footer.jpg") no-repeat top center; background-size: 100% auto; } #afsluiting .bg:after { position: absolute; left: -50px; width: 300px; height: 260px; bottom: 0; background:url("../img/visual-schaafsel3.png") no-repeat right top; background-size: contain; } #afsluiting .bg2 { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 150px; overflow: hidden; } #afsluiting .bg2:after { position: absolute; bottom: -200px; left: -200px; width: 300px; height: 300px; background: url("../img/visual-naarboven.jpg") no-repeat left bottom; background-size: contain; border-radius: 100%; } #afsluiting .bg3 { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 150px; overflow: hidden; } #afsluiting .bg3:before { position: absolute; top: 0px; left: 50%; margin-left: -150px; width: 300px; height: 150px; border-radius: 20px 20px 0 0; background:url("../img/visual-blok-licht.jpg") no-repeat center center; background-size: cover;} #afsluiting .bg3:after { position: absolute; top: 0px; left: 50%; margin-left: -140px; width: 300px; height: 150px; background:url("../img/logo-aannemersbedrijfsiebers.svg") no-repeat center center; background-size: 80% auto;} #afsluiting .bg4 { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 250px; overflow: hidden; } #afsluiting .bg4:before { position: absolute; top: 0px; left: 50%; margin-left: -550px; width: 180px; bottom: 0; background:url("../img/visual-tools5.png") no-repeat center bottom; background-size: contain; } #afsluiting .bg4:after { position: absolute; top: 0px; left: 50%; margin-left: 250px; width: 440px; bottom: -20px; background:url("../img/visual-tools4.png") no-repeat center bottom; background-size: contain; } #afsluiting a{ color: #fff; } #afsluiting a:hover{ color: #fff; } #afsluiting #naarboven{ z-index: 1; cursor: pointer; position: absolute; bottom: 30px; left: 30px; width: 50px; height: 50px; background: #C49A6C url("../img/visual-blok.jpg") no-repeat center center; background-size: contain; border: 2px solid #E7CFBA; box-shadow: 0px 9px 20px rgb(0 0 0 / 15%); border-radius: 100%; } #afsluiting #naarboven span{ position: absolute; top: 50%; margin: -25px 0 0 -25px; left: 50%; width: 50px; height: 50px; padding: 0; } #afsluiting #naarboven span:before{ content:''; background: url("../img/svg-pijl-boven-wit.svg") no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; margin: -4px 0 0 -6px; left: 50%; width: 12px; height: 8px; padding: 0;} #afsluiting #naarboven:hover span:before{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(3px); transform: translateY(3px); } 50% { opacity: 0.6; -webkit-transform: translateY(-3px); transform: translateY(-3px); } 100% { opacity: 0; -webkit-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(3px); transform: translateY(3px); } 50% { opacity: 0.6; -webkit-transform: translateY(-3px); transform: translateY(-3px); } 100% { opacity: 0; -webkit-transform: translateY(-5px); transform: translateY(-5px); } } /* FANCYBOX ############################################################################################################################# */ #fancybox-overlay { position: fixed; top: 5%; left: 5%; width: 90%; height: 90% !important; } #fancybox-wrap { position: fixed; } /* CONTACTOPNEMEN ############################################################################################################################# */ #contactopnemenbol { position: fixed; bottom: 0px; right: 0px; width: 150px; height: 150px; overflow: hidden; z-index: 2000; } #contactopnemenbol .circle{ position: fixed; bottom: 9px; right: -120px; width: 70px; height: 70px; background: #fff url("../img/rosanne-siebers.jpg") no-repeat center center; background-size: cover; border-radius: 100%; border: 2px solid #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3); } #contactopnemenbol .circle{ -webkit-animation: contactopnemenbol 2s ease 0s 1 normal forwards; animation: contactopnemenbol 2s ease 0s 1 normal forwards; animation-delay: 2s; } @keyframes contactopnemenbol { 0% { opacity: 0; -webkit-transform: rotate(359deg); right: -120px; } 100% { opacity: 1; -webkit-transform: rotate(0deg); right: 10px; } } @-webkit-keyframes contactopnemenbol { 0% { opacity: 0; -webkit-transform: rotate(359deg); right: -120px; } 100% { opacity: 1; -webkit-transform: rotate(0deg); right: 10px; } } @-moz-keyframes contactopnemenbol { 0% { opacity: 0; -webkit-transform: rotate(359deg); right: -120px; } 100% { opacity: 1; -webkit-transform: rotate(0deg); right: 10px; } } #contactopnemenbol .circle:before{ position: absolute; right: -5px; top: -30px; width: 31px; height: 30px; } #contactopnemenbol .circle a.contactoptie{ position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 100%; opacity: 0; } #contactopnemenbol .circle a.whatsapp{ top: -23px; left: -5px; background: #533B27 url(../img/svg-whatsapp-wit.svg) no-repeat center center; background-size: auto 60%; } #contactopnemenbol .circle a.telefoon{ top: 0px; left: -25px; background: #533B27 url("../img/svg-telefoon-wit.svg") no-repeat center center; background-size: auto 60%; } #contactopnemenbol .circle a.email{ top: 30px; left: -30px; background: #533B27 url("../img/svg-email-wit.svg") no-repeat center center; background-size: auto 36%; } #contactopnemenbol .circle a.instagram{ top: -30px; left: 25px; background: #533B27 url("../img/svg-instagram.svg") no-repeat center center; background-size: auto 60%; } #contactopnemenbol .circle a.faq{ top: -23px; left: -5px; background: #533B27 url("../img/svg-faq.svg") no-repeat center center; background-size: auto 80%; } #contactopnemenbol .circle a.whatsapp:hover{ background-color: #C49A6C; } #contactopnemenbol .circle a.telefoon:hover{ background-color: #C49A6C; } #contactopnemenbol .circle a.email:hover{ background-color: #C49A6C; } #contactopnemenbol .circle a.instagram:hover{ background-color: #C49A6C; } #contactopnemenbol .circle a.faq:hover{ background-color: #C49A6C; } #contactopnemenbol .circle a.instagram{ -webkit-animation: circlefade 2s ease 0s 1 normal forwards; animation: circlefade 2s ease 0s 1 normal forwards; animation-delay: 4s; } #contactopnemenbol .circle a.faq{ -webkit-animation: circlefade 2s ease 0s 1 normal forwards; animation: circlefade 2s ease 0s 1 normal forwards; animation-delay: 4.5s; } #contactopnemenbol .circle a.whatsapp{ -webkit-animation: circlefade 2s ease 0s 1 normal forwards; animation: circlefade 2s ease 0s 1 normal forwards; animation-delay: 4.5s; } #contactopnemenbol .circle a.telefoon{ -webkit-animation: circlefade 2s ease 0s 1 normal forwards; animation: circlefade 2s ease 0s 1 normal forwards; animation-delay: 5s; } #contactopnemenbol .circle a.email{ -webkit-animation: circlefade 2s ease 0s 1 normal forwards; animation: circlefade 2s ease 0s 1 normal forwards; animation-delay: 5.5s; } @keyframes circlefade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes circlefade { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes circlefade { 0% { opacity: 0; } 100% { opacity: 1; } } #contactopnemenbol .circle .hi{ position: absolute; top: -30px; left: 30px; width: 40px; height: 40px; background: url(../img/svg-hi.svg) no-repeat center center; background-size: auto 100%; opacity: 1; } #contactopnemenbol .circle .hi{ -webkit-animation: hifade 2s ease 0s 1 normal forwards; animation: hifade 2s ease 0s 1 normal forwards; animation-delay: 5s; } @keyframes hifade { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes hifade { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes hifade { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; display: none; } } #contactopnemenbol .circle .overlay{ position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 100%; } #contactopnemenbol:before { z-index: 0; position: absolute; right: -150px; bottom: -150px; width: 150px; height: 150px; background:url("../img/visueel-cta-schaafsel.png") no-repeat right bottom; background-size: contain; } #contactopnemenbol:before{ -webkit-animation: beforefade 1s ease 0s 1 normal forwards; animation: beforefade 1s ease 0s 1 normal forwards; animation-delay: 3s; } @keyframes beforefade { 0% { right: -150px; bottom: -150px; } 100% { right: 0px; bottom: 0px; } } @-webkit-keyframes beforefade { 0% { right: -150px; bottom: -150px; } 100% { right: 0px; bottom: 0px; } } @-moz-keyframes beforefade { 0% { right: -150px; bottom: -150px; } 100% { right: 0px; bottom: 0px; } }