*, *:before, *:after { box-sizing: border-box; } body { margin: 0px; padding: 0px; background: url('/img/bg-body.jpg') repeat top center; font-family: 'Bitter', Arial, Helvetica, sans-serif; font-size: 16px; color: #868686; padding-top: 210px; padding-bottom: 70px } html { margin: 0px; padding: 0px; } ::selection { background-color: rgba(221, 221, 221, 0.5); } ::-moz-selection { background-color: rgba(221, 221, 221, 0.5); } /*----------------------- vlak kleuren -------------------------*/ .zwart { background-color:#2a2a2a; } .zwart p { color:#FFFFFF; } .zwart h2 { color:#FFFFFF; } .wit { background-color:#FFFFFF; } .wit p { color:#707070; } .wit h2 { color:#707070; } .rood { background-color:#e30613; } .rood p { color:#FFFFFF; } .rood h2 { color:#FFFFFF; } /*----------------------- Reset -------------------------*/ img { border: none; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; } p, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea { margin: 0px; padding: 0px; } img { border: none; } form { margin: 0; padding: 0; display: inline; } table { margin:0px; padding:0px; border-spacing:0px; } td { vertical-align:top} .clear { clear: both; } /*----------------------- Einde Reset -------------------------*/ /*----------------------- Tekst -------------------------*/ h2 { font-size: 25px; color: #fff; margin-bottom: 10px; line-height: 30px; } .white-wide h2 { color: #868686; } .white-small h2 { color: #868686; } p { margin-top: 10px; margin-bottom: 10px; line-height: 23px; } p.grey { color: #868686; } p.white { color: #fff; } .tweet { font-size:36px; } /*----------------------- Twitter -------------------------*/ #retweet { width:33px; height:33px; position:absolute; right:25px; bottom:25px; background: url('/img/twitter_buttons.png') no-repeat -33px 0px; } #retweet:hover { background-position: -33px -33px; } #follow { width:33px; height:33px; position:absolute; right:67px; bottom:25px; background: url('/img/twitter_buttons.png') no-repeat 0px 0px; } #follow:hover { background-position: 0px -33px; } /*----------------------- Header -------------------------*/ #header { width: 100%; height: 210px; background: url('/img/bg-header.png') repeat-x top left; position: fixed; top: 0px; left: 0px; z-index: 99; } #logo-img { float: left; margin-top: 0px; } #head-title { clear: both; color: #707070; font-size: 30px; padding-top: 10px; padding-left: 0px; padding-right: 20px; } #portfolio-nav { list-style-type: none; position: absolute; right: 10px; bottom: 71px; } #portfolio-nav li { width: 24px; height: 24px; float: left; } #portfolio-nav li a { text-decoration: none; width: 24px; height: 24px; display: block; } #port-vorige { background: url('/img/sprite_top.png') no-repeat 0px -24px; } #port-vorige:hover { background-position: -24px -24px; } #port-vorige-off { background: url('/img/sprite_top.png') no-repeat -48px -24px; } #port-volgende { background: url('/img/sprite_top.png') no-repeat 0px 0px; margin-left: 5px; } #port-volgende:hover { background-position: -24px 0px; } #port-volgende-off { background: url('/img/sprite_top.png') no-repeat -48px 0px; margin-left: 5px; } #port-sluiten { background: url('/img/sprite_top.png') no-repeat 0px -48px; margin-left: 20px; } #port-sluiten:hover { background-position: -24px -48px; } #port-sluiten-off { background: url('/img/sprite_top.png') no-repeat -48px -48px; margin-left: 20px; } /*----------------------- curtain -------------------------*/ #curtain { min-width: 1000px; max-width:100%; top: -11px; margin-bottom: 35px; height:0px; position:relative; background-color:#2a2a2a; overflow: auto; } #curtain-content { padding:10px; } /*----------------------- Menu -------------------------*/ #mobile_menu { display:none; } #menu { float: left; list-style-type: none; margin: 0px; padding: 0px; margin-top: 35px; } #menu li { float: left; margin-left: 35px; } #menu li a { text-decoration: none; font-size: 17px; color: #707070; } #menu li a:hover { color: #e30613; } #menu-social { list-style-type: none; float: right; margin: 0px; padding: 0px; margin-top: 35px; margin-right: 10px; } #menu-social li { float: left; margin-left: 30px; } #menu-social li a { text-decoration: none; } /*----------------------- Slider -------------------------*/ /*----------------------- Content -------------------------*/ .breedte-kolom-1 { width: 300px; padding-left: 35px; padding-right: 25px; } .breedte-kolom-2 { width: 420px; padding-left: 35px; padding-right: 25px; } .breedte-kolom-3 { width: 650px; padding-left: 35px; padding-right: 25px; } .breedte-kolom-4 { width: 920px; padding-left: 35px; padding-right: 25px; } .hoogte { padding-top: 30px; padding-bottom: 20px; } .hoogte-kolom-1 { min-height: 180px; padding-top: 20px; padding-bottom: 10px; } .hoogte-kolom-2 { min-height: 430px; padding-top: 30px; padding-bottom: 20px; } .hoogte-kolom-3 { min-height: 680px; padding-top: 30px; padding-bottom: 20px; } .breedte-image-1 { width: 230px; overflow: hidden; } .breedte-image-2 { width: 480px; overflow: hidden; } .breedte-image-3 { width: 650px; overflow: hidden; } .breedte-image-4 { width: 980px; overflow: hidden; } .hoogte-image-1 { min-height: 230px; } .hoogte-image-2 { min-height: 230px; } .hoogte-image-3 { min-height: 230px; } .breedte-image-1 img { max-width: 100%; width:100%; margin-left: auto; margin-right: auto; } .breedte-image-2 img { max-width: 100%;width:100%; margin-left: auto; margin-right: auto; } .breedte-image-3 img { max-width: 100%;width:100%;margin-left: auto; margin-right: auto; } .content-type { position: absolute; left: 0px; top: 30px; right: 0px; padding: 0px; } #photo-list { list-style:none; } .photoweb { background:url('/UserFiles/Essentials/web-holder.png'); width:480px; height:430px; } .webimage { padding:20px; width:480px; height:300px; overflow:hidden } .container { width:100%; max-width: 1400px; margin: auto; position: relative;box-sizing: border-box; margin-left: auto; margin-right: auto; padding: 15px} #content-wrapper { width:100%; padding-bottom:60px } .isotope-box {position: relative; float: left; margin:7.5px; overflow: hidden; -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); } .isotope-box a { color:#FFF; text-decoration:none; } /* .isotope-box { -webkit-transition-property: left, right, top; -moz-transition-property: left, right, top; -o-transition-property: left, right, top; transition-property: left, right, top; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } */ .no-shadow { -webkit-box-shadow: none; box-shadow: none; } /* stand alone img */ .img-small { float: left; position: relative; padding: 0px; } .img-wide { float: left; position: relative; padding: 0px; } .content-img { width: 163px; height: 163px; border: 2px solid #fff; overflow: hidden; float: right; } .content-img img { margin: 0px; min-width: 163px; min-height: 163px; } .content-holder { float: left; } .breedte-kolom-3 .content-img { margin-left: 15px; } .breedte-kolom-4 .content-img { margin-left: 15px; } .isotope-box.img-small img { margin: 0px; } /*----------------------- Portfolio -------------------------*/ .customChList li input[type='checkbox'] { display:none; } .customChList li label { display: inline-block; vertical-align: middle; padding-left:20px; background: url('/img/check-off.gif') no-repeat left center; } .customChList li label.checked { background: url('/img/check-on.gif') no-repeat left center; } #filters { list-style:none; font-size: 22px; float:right; margin-top: -7px; } #filters ul { list-style:none; display:inline; } #filters li { list-style:none; display:inline; float:left; padding:10px; } #filters li img { position: relative; top: 5px; } #filters li a { color:#707070; text-decoration:none; } .portfolio-box { width: 230px; height: 230px; position: relative; overflow: hidden; } .portfolio-box img { padding: 0px; margin: 0px; max-height: 230px; } .port-overlay { width: 100%; height: 100%; position: absolute; bottom: -230px; left: 230px; background: url('/img/trans-black95.png') repeat top left; padding: 20px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; cursor: pointer; } .portfolio-box:hover .port-overlay { bottom: 0px; left: 0px; } .port-overlay-red { width: 170px; height: 240px; padding: 10px 25px 20px 35px; position: absolute; top: -40px; left: 0px; background: #e30613; opacity: 0.8; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; } .portfolio-box:hover .port-overlay-red { top: 185px; opacity: 0.95; } .port-overlay-grey { width: 170px; height: 240px; padding: 10px 25px 20px 35px; position: absolute; top: -40px; left: 0px; background: #2a2a2a; opacity: 0.8; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; } .portfolio-box:hover .port-overlay-grey { top: 185px; opacity: 0.95; } .port-overlay-white { width: 170px; height: 1240px; padding: 10px 25px 20px 35px; position: absolute; top: -1040px; left: 0px; background: #fff; opacity: 0.8; -webkit-transition: all 700ms ease-out; -moz-transition: all 700ms ease-out; -ms-transition: all 700ms ease-out; -o-transition: all 700ms ease-out; transition: all 700ms ease-out; overflow: visible; } .portfolio-box:hover .port-overlay-white { top: 185px; opacity: 0.95; } .port-overlay-white h2 { color: #2a2a2a; } /*----------------------- footer -------------------------*/ #footer { width: 100%; min-height: 30px; height:30px; background: #2a2a2a; position: fixed; bottom: 0px; left: 0px; -webkit-box-shadow: 0px -3px 5px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px -3px 5px 2px rgba(0, 0, 0, 0.3); color: #949494; z-index:99; padding:10px } #footer a { text-decoration: none; color: #949494; } #footer a:hover { color: #fff; } #nieuwsbrief { float: left; margin-top: 10px; margin-left: 10px; height: 27px;} #nieuwsbrief a { padding-left: 50px; line-height: 27px; padding-top: 10px; padding-bottom: 10px; background: url('/img/icon-mail.png') no-repeat 0px 7px; } #nieuwsbrief a:hover { background: url('/img/icon-mail-hov.png') no-repeat 0px 7px; } #footer ul { list-style-type: none; margin: 0px; padding: 0px; margin-top: 10px; } #footer ul li { float: left; width: auto; max-width:200px; padding-right:10px;} .contact-box { overflow: visible; } .contact-field { width: 400px; height: 28px; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; font-family: 'Bitter', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 32px; color: #fff; border: none; background: #464646; } .contact-field:focus { outline: none; color: #2a2a2a; background: #fff; } .contact-area { width: 400px; max-width: 400px; height: 100px; max-height: 200px; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; font-family: 'Bitter', Arial, Helvetica, sans-serif; font-size: 22px; line-height: 32px; color: #fff; border: none; background: #464646; resize: vertical; } .contact-area:focus { outline: none; color: #2a2a2a; background: #fff; } .g-recaptcha { float:left;} .submit { width: 100px; height: 28px; line-height: 28px; font-family: 'Bitter', Arial, Helvetica, sans-serif; font-size: 22px; border: none; background: #464646; color: #fff; float: right; margin-bottom: 10px; } .submit:hover { background: #fff; color: #2a2a2a; cursor: pointer; } .submit:focus { outline: none; background: #fff; color: #2a2a2a; cursor: pointer; } .submit[type="submit"]:disabled { opacity:0.5; } .submit[type="submit"]:disabled:hover, .submit[type="submit"]:disabled:focus, .submit[type="submit"]:disabled:active { background: #464646; color: #fff; opacity:0.5; cursor:auto; } #header .mobile_menu_button { display:none; } @media only screen and (max-width: 991px) { a.logo {position:relative; z-index: 100;} #header .mobile_menu_button {position: absolute; top:30px; right: 15px; display: block; cursor: pointer} #header .mobile_menu_button img { position:relative; z-index:99999; float:right; width:auto; height:32px; padding:0; padding:4px; } #menu {box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 10%); position: absolute; top:0; left:0; right:0; background:#FFFFFF; padding:15px; margin:0; opacity: 0; visibility: hidden; pointer-events: none; z-index:99; transform: translateY(-100%); transition:all 360ms;} #menu li {float: unset; text-align: center; margin:0 0 6px;} #menu li:last-child {margin-bottom:0;} #menu-social {margin:0; position: absolute; top:34px; right: 60px;} #menu-social li {margin-left:15px;} body.is-menu-open #menu {padding:90px 15px 15px; opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);} body.portfolio #head-title {font-size:25px;} } @media only screen and (max-width: 767px) { body.portfolio #head-title {font-size:22px; padding: 0;} body.portfolio #head-title #filters { font-size: 18px; } } @media only screen and (max-width: 600px) { body { font-size: 1em; } #head-title { clear: both; color: #707070; font-size: 22px; padding-top: 8px;} /*----------------------- curtain -------------------------*/ /*----------------------- Content -------------------------*/ .breedte-kolom-1 { width: 100%; } .breedte-kolom-2 { width: 100%; } .breedte-kolom-3 { width: 100%; } .breedte-kolom-4 { width: 100%; } .hoogte { padding-top: 30px; padding-bottom: 20px; } .breedte-image-1 { width: 100%; overflow: hidden; } .breedte-image-2 { width: 100%; overflow: hidden; } .breedte-image-3 { width: 100%; overflow: hidden; } .breedte-image-4 { width: 100%; overflow: hidden; } .breedte-image-1 img { width: 100%; margin-left: auto; margin-right: auto; } .breedte-image-2 img { width: 100%; margin-left: auto; margin-right: auto; } .breedte-image-3 img { width: 100%; margin-left: auto; margin-right: auto; } .content-type { position: absolute; left: 0px; top: 30px; right: 0px; padding: 0px; } #photo-list { list-style:none; } .photoweb { background:url('/UserFiles/Essentials/web-holder.png'); width:480px; height:480px; } .webimage { padding:20px; width:440px; height:260px; overflow:hidden } .container { width:100%; position: relative;box-sizing: border-box; } .isotope-box { float: left; position: relative; margin: 10px; margin-left:0px;margin-right:10px; overflow: hidden; -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); } body.portfolio .isotope-box { width: 40%; height: auto; margin:7.5px; } body.portfolio .isotope-box img { max-width: 100%; max-height: unset;} #footer { margin:0px; width: 100%; min-height: 55px; background: #2a2a2a; position: fixed; bottom: 0px; left: 0px; -webkit-box-shadow: 0px -3px 5px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px -3px 5px 2px rgba(0, 0, 0, 0.3); color: #949494; z-index:99;padding:0px } #footer ul { list-style-type: none; margin: 0px; padding: 0px; margin-top: 0px; } #footer ul li { float: left; width: 45%; font-size:14px;max-width:200px; padding-right:0px;} body.portfolio #head-title {font-size:18px;} } @media only screen and (max-width: 475px) { #head-title { font-size: 20px; } body.portfolio #header { height:auto; background-size: cover; padding-bottom:12px; } body.portfolio #head-title #filters { margin-top:5px; } body.portfolio #head-title #filters li { padding:0 0 7px 7px; } }