/* ----------------------------------------- */ /* View: Overizicht - start */ /* ----------------------------------------- */ label { width: 100%; } .form-group select { display: inline!important; width: 100%; } select#toolset-maps-distance { display: none !important; } input#toolset-maps-distance-value { width: 60px; } .js-toolset-maps-distance-current-location { display: block; margin: 20px auto 0; } form.wpv-filter-form { max-width: 100%; padding: 30px; background: white; margin: -170px auto 50px; box-shadow: 0px 0px 200px rgba(0,0,0,0.3); } input#toolset-maps-distance-center { width: 100%; } .js-toolset-maps-distance-current-location { color: transparent; display:none !important; } .js-toolset-maps-distance-current-location:before { color: black; position: relative; left: -3px; } .btn-default { margin-top: 7px; } span.js-wpv-dps-spinner { width: 100%; position: absolute; height: 100%; background: rgba(255, 255, 255, 0.88); top: 0px; z-index: 10000; left: 0px; } form.wpv-filter-form { position: relative !important; } span.js-wpv-dps-spinner img { position: absolute; left: 50%; top: 40%; transform: translate(-50%) scale(2); } .checkbox { width: 33% !important; display: inline-block !important; } .js-wpv-sort-control-order { margin-top: 7px; display: block; } a.woning-buitenkant:after { border: 17px solid transparent; content: ""; position: absolute; width:100%; top: 3%; left: 3%; height: 100%; } a.woning-buitenkant:hover:after { border: 10px solid white; content: ""; position: absolute; width: 94%; height: 94%; transition: border .5s ease; top: 3%; left: 3%; } span.ontdek-meer { border-radius: 0px !important; background: #C00404 !important; color: white !important; font-weight: 600 !important; text-transform: uppercase; } input.zoek-knop.wpv-submit-trigger.js-wpv-submit-trigger { background: #d90022 !important; color: white; width: 100%; } button.reset-knop { width: 100%; background: #f2f2f2 !important; padding: 16px!important; font-family: Source Sans Pro; text-transform: none!important; font-size: 24px; font-weight: 300; border: 0px; } .bovenste-rij { margin-bottom: -20px; } /* ----------------------------------------- */ /* View: Overizicht - end */ /* ----------------------------------------- */

/* ----------------------------------------- */ /* Content Template: Loop item in Overizicht - start */ /* ----------------------------------------- */ a.woning-buitenkant { display: block; position: relative; height: 479px; overflow: hidden; } .eerste-afbeelding { position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; } .woning-container { position: absolute; bottom: 0px; padding: 40px; width: 100%; } .woning-container h2 { font-size: 20px !important; color: white; line-height: 22px; margin-bottom: 20px; } .woning-container span { display: block; color: white; font-weight: 400; opacity: .8; } .woning-overlay { width: 100%; height: 100%; position: absolute; top: 0px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+41,1+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 41%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 1%,rgba(0,0,0,0) 41%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 1%,rgba(0,0,0,0) 41%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .tweede-afbeelding { position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; opacity: 0; transition: opacity .5s ease, transform 5s ease; } a.woning-buitenkant:hover .tweede-afbeelding { opacity: 1; transition: opacity .5s ease, transform 5s ease; transform: scale(1.2); } span.ontdek-meer { background: white; color: black; padding: 10px; margin-top: 17px; text-align: center; border-radius: 100px; transition: all .4s ease; transform: translateY(50px); } .woning-container { transform: translateY(70px); } span.ontdek-meer { background: white; color: black; padding: 10px; margin-top: 17px; text-align: center; border-radius: 100px; transition: all .4s ease; transform: translateY(50px); opacity: 1 !important; } span.ontdek-meer:hover { background: rgba(255,255,255,.8); color: black; opacity: 1 !important; transition: all .4s ease; } .woning-container { transform: translateY(70px); transition: all .4s ease; } a.woning-buitenkant:hover .woning-container { transform: translateY(0px); transition: all .4s ease; } a.woning-buitenkant:hover span.ontdek-meer { transition: all .4s ease; transform: translateY(0px); } img.overzicht-icoon { width: 12px !important; display: inline-block; margin-right: 7px; } .woning-container:hover { transition: transform .4s ease !important; } /* ----------------------------------------- */ /* Content Template: Loop item in Overizicht - end */ /* ----------------------------------------- */