/* Theme Name: Autosoft AutoCommerce PREMIUM Theme URI: https://www.autosoft.eu Author: Autosoft automotive internet Author URI: https://www.autosoft.eu/ Description: AC Premium weergave ontwikkeling. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: autosoft */ /**************************************************** Design: Autosoft BV - www.autosoft.eu Code & CSS: Autosoft BV - www.autosoft.eu Copyright 2020 Autosoft BV ****************************************************/ /*************************************** GLOBALS ***************************************/ /* #occasionlijstwrapper { all: initial; } * { all: unset; } */ #occasionlijstwrapper { font-size: 14px;} #occasionlijstwrapper { -webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -ms-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; } #occasionlijstwrapper * { margin: 0; padding: 0; border: 0; font-size: 100%; box-sizing: border-box; } #detailpaginawrapper { font-size: 14px;} #detailpaginawrapper * { font-size: 100%; box-sizing: border-box; } #occasionlijstwrapper img, .ac-wrapper.detailpagina img { border: 0px solid transparent!important; margin: 0!important; } label.voertuigmerk { /*text-transform: lowercase;*/ display: inline-block; color: inherit; } label.voertuigmodel { /*text-transform: lowercase;*/ display: inline-block; color: inherit; } label.voertuigmerk:first-letter, label.voertuigmodel:first-letter { /*text-transform: uppercase;*/ } .bijzonderheden label.voertuigmerk, .bijzonderheden label.voertuigmodel { color: inherit; font-weight: normal; } /*************************************** OCCASIONLIJST ***************************************//*************************************** OCCASIONLIJST ***************************************/ /*************************************** OCCASIONLIJST ***************************************//*************************************** OCCASIONLIJST ***************************************/ /* ===== ===== ===== AUTOCOMMERCE OCCASIONRESULTS ===== ===== ===== */ /* IN 1 PAGINA */ #occasionresults { float: right; width: 80%; padding: 0.8%; position: relative; box-sizing: border-box; text-align: left; } #occasionzoekfilter { float: left; width: 20%; padding: 0.8%; padding-top: 1.2%; position: relative; } /* Wijzigingen geen zoekfitler */ #filterbutton.hide { display: none !important; } #occasionzoekfilter.hide { display: none !important; } #occasionresults.fullwidth { float: unset; margin-left: 10%; } /* FILTER IN SIDEBAR #occasionresults { float: none; width: 100%; padding: 0.8%; position: relative; box-sizing: border-box; } #occasionzoekfilter { float: none; width: 100%; padding: 0.8%; padding-top: 1.2%; position: relative;} */ #occasionlijstwrapper { margin: 0 auto; width: 100%; font-size: 13px; line-height: 18px; /*font-family: 'Helvetica', Arial, sans-serif;*/ font-family: inherit; font-style: normal; font-weight: 400; color: #000000; /*max-width: 960px;*/ max-width: 1200px; text-align: center; display: block; } #occasionlijstwrapper * { vertical-align: top; } #occasionlijstwrapper .clear { clear: both; display: block; width: 0px; height: 0px; content: '.'; visibility: hidden; } #occasionlijstwrapper div.displaymode { position: absolute; right: 16px; white-space: nowrap; } /* height fix if no nav available */ #occasionlijstwrapper div.displaymode+div.ng-scope { min-height: 82px; } #occasionlijstwrapper div.nav { display: block; font-size: 0px; font-style: normal!important; margin-top: 0!important; margin-bottom: 10px!important; text-align: center!important; } #occasionlijstwrapper div.nav { font-weight: normal; color: #cccccc; text-decoration: none; } #occasionlijstwrapper div.nav b { font-weight: bold!important; color: #333333; text-decoration: none; } #occasionlijstwrapper div.displaymode a , #occasionlijstwrapper div.nav a, #occasionlijstwrapper div.nav span { font-weight: bold!important; font-size: 14px; color: #666666; text-decoration: none; white-space: nowrap; display:inline-block; margin: 20px 3px; cursor: pointer; padding: 5px 10px; background: #ffffff; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; -webkit-box-shadow: 0 0 8px 0 #cccccc; box-shadow: 0 0 8px 0 #cccccc; border-bottom: 1px solid transparent; } #occasionlijstwrapper div.nav span { margin: 20px 0px; cursor: default; box-shadow: 0 0 0 0 #cccccc; -webkit-box-shadow: 0 0 0 0 #cccccc; } #occasionlijstwrapper div.displaymode a:hover, #occasionlijstwrapper div.nav a:hover, #occasionlijstwrapper div.nav a.activePage, #occasionlijstwrapper div.nav a.activePage:hover { border-bottom: 1px solid #333333; -webkit-box-shadow: 0 0 14px 0 #cccccc; box-shadow: 0 0 14px 0 #cccccc; color: #000000; /* -moz-transform: scale(1.03); -webkit-transform: scale(1.03); transform: scale(1.03); */ } #occasionlijstwrapper div.displaymode a.currentview , #occasionlijstwrapper div.nav a.activePage { border-bottom: 1px solid #333333; pointer-events: none;} #occasionlijstwrapper div.displaymode a { font-size: 20px; } #occasionlijstwrapper div.displaymode a span { display: inline-block; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-size: 28px; } #occasionlijstwrapper form { margin-top: 0px; margin-bottom: 10px; font-size: 0; display: block; text-align: center;} #occasionlijstwrapper form select { width: 23.5%; border: 1px solid #eaeaea; background: #f2f2f2; padding: 3px; font-size: 12px; line-height: 18px; color: #333333; margin: 3px 2px 5px 2px; } .occasionfooter { display: block; width: 100%; text-align: center; } #occasionlijstwrapper .occasionfooter div.nav a { margin: 0px 3px 20px 3px; } #occasionlijstwrapper .occasionfooter div.nav span { margin: 0px 0px 20px 0px; } .occasionfooter p { margin-bottom: 2em; color: #999999; font-style: italic;} #occasionlijstwrapper .sort { text-align: center; line-height: 26px; margin-bottom: 10px; font-weight: bold; font-size: 1em; } #occasionlijstwrapper .sort label { display: inline-block; } #occasionlijstwrapper .sort select { background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.6); padding: 2px 8px; font-style: normal; font-weight: normal; font-size: 1em; max-width: 230px; } /* --- --- --- VOERTUIG RESULTATEN --- --- --- *//* --- --- --- VOERTUIG RESULTATEN --- --- --- */ /* --- --- --- VOERTUIG RESULTATEN --- --- --- *//* --- --- --- VOERTUIG RESULTATEN --- --- --- */ #occasionlijstwrapper #occasionresults .novehiclesfound { display: block; text-align: left; } #occasionlijstwrapper #occasionresults .novehiclesfound p { font-weight: bold; padding-top: 1.5em;} #occasionlijstwrapper #occasionresults { box-sizing: border-box; display: inline-block; vertical-align: top; position: relative; } /* viewport animation */ /* #occasionlijstwrapper {overflow: hidden;} #occasionlijstwrapper .occasionresult.come-in { transform: translateY(100px) rotate(8deg); animation: come-in 0.6s ease forwards; filter: alpha(opacity=0); opacity: 0; margin-bottom: 18px; } #occasionlijstwrapper .occasionresult.come-in:nth-child(odd) { transform: translateY(140px) rotate(-6deg); filter: alpha(opacity=0); opacity: 0; animation-duration: 1.0s; margin-bottom: 18px; } #occasionlijstwrapper .occasionresult.already-visible, #occasionlijstwrapper .occasionresult.already-visible:nth-child(odd) { transform: translateY(0) rotate(0deg); filter: alpha(opacity=100); opacity: 1.0; animation: none; } @keyframes come-in { to { transform: translateY(0) rotate(0deg); filter: filter: alpha(opacity=100); opacity: 1.0; } } */ #occasionlijstwrapper .occasionresult { cursor: pointer; background: #ffffff; -webkit-transition: border 450ms ease-in-out, box-shadow 450ms ease-in-out; -moz-transition: border 450ms ease-in-out, box-shadow 450ms ease-in-out; -ms-transition: border 450ms ease-in-out, box-shadow 450ms ease-in-out; -o-transition: border 450ms ease-in-out, box-shadow 450ms ease-in-out; transition: border 450ms ease-in-out, box-shadow 450ms ease-in-out; -webkit-box-shadow: 0 0 8px 0 #cccccc; box-shadow: 0 0 8px 0 #cccccc; border: 1px solid #cccccc; text-align: left; position: relative; } #occasionlijstwrapper .occasionresult:hover { -webkit-box-shadow: 0 0 10px 0 #999999; box-shadow: 0 0 10px 0 #999999; border-bottom: 1px solid #333333; } #occasionlijstwrapper .occasionresult .merkmodel { box-sizing: border-box; display: inline-block; vertical-align: top; text-align: left!important; } #occasionlijstwrapper .occasionresult .merkmodel label.voertuigmodel { display: inherit; color: inherit; } #occasionlijstwrapper .occasionresult .merkmodel .uitvoering { box-sizing: border-box; display: inline-block; vertical-align: top; margin: 5px 0px; padding-right: 6px; font-size: 12px; color: #333333; width: 100%; text-shadow: 0 0 0 #000000; text-align: left!important; } #occasionlijstwrapper .occasionresult:hover .merkmodel .uitvoering { color: #333333;} #occasionlijstwrapper .occasionresult .mndbedr { box-sizing: border-box; display: inline-block; vertical-align: top; background: #333333; padding: 3px 10px 3px 10px; box-sizing: border-box; display: inline-block; vertical-align: top; font-size: 12px; color: #ffffff; text-shadow: 0 0 0 #000000; font-style: italic; position: absolute; z-index: 10; left: 0; top: 10px; } #occasionlijstwrapper .mndbedr span { font-weight: bold; padding-lefT: 4px; } #occasionlijstwrapper .occasionresult .foto { box-sizing: border-box; display: inline-block; vertical-align: top; overflow: hidden; position: relative; background: url('../../images/noimage.png') 50% 50% no-repeat rgba(0,0,0,0); background-size: 50%; /*min-height: 210px;*/ min-height: 190px; } #inhoud #occasionlijstwrapper .occasionresult .foto img, #occasionlijstwrapper .occasionresult .foto img { box-sizing: border-box; display: inline-block; vertical-align: top; padding: 0px; width: 100%; -webkit-transition: all 460ms ease-in-out; -moz-transition: all 460ms ease-in-out; -ms-transition: all 460ms ease-in-out; -o-transition: all 460ms ease-in-out; transition: all 460ms ease-in-out; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #occasionlijstwrapper .occasionresult .foto .fotowrap { -webkit-transition: all 460ms ease-in-out; -moz-transition: all 460ms ease-in-out; -ms-transition: all 460ms ease-in-out; -o-transition: all 460ms ease-in-out; transition: all 460ms ease-in-out; display: inline-block; text-align: center; width: 100%; min-height: 100%; vertical-align: middle; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #occasionlijstwrapper .occasionresult:hover .foto .fotowrap { -moz-transform: scale(1.025) translate(-49%, -49%); -webkit-transform: scale(1.025) translate(-49%, -49%); transform: scale(1.025) translate(-49%, -49%); } #occasionlijstwrapper .occasionresult .foto .fotowrap a { max-width: 100%; display: block; text-align: center; } #occasionlijstwrapper .occasionresult .gegevens { box-sizing: border-box; display: inline-block; vertical-align: top; text-align: left!important; } #occasionlijstwrapper .occasionresult .gegevens .opties { box-sizing: border-box; display: inline-block; vertical-align: top; text-align: left!important; } #occasionlijstwrapper .occasionresult .gegevens .opties ul { -moz-columns: 3; -webkit-columns: 3; columns: 3; -moz-column-gap: 0.75rem; -webkit-column-gap: 0.75rem; column-gap: 0.75rem; margin-left: 0; padding-left: 0; text-align: left!important; } #occasionlijstwrapper .occasionresult .gegevens .opties ul li:nth-child(n+10) { display: none; } #occasionlijstwrapper .occasionresult .gegevens .basics { box-sizing: border-box; display: inline-block; vertical-align: top; text-transform: none; color: #666666; width: 100%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; text-align: left!important; } #occasionlijstwrapper .occasionresult .gegevens .basics .label, #occasionlijstwrapper .occasionresult .gegevens .basics .value { box-sizing: border-box; display: inline-block; vertical-align: middle; color: inherit; font-weight: normal; text-align: left!important; } #occasionlijstwrapper .occasionresult .gegevens .basics .value { padding-left: 5px; padding-right: 10px; line-height: 20px; vertical-align: middle;} #occasionlijstwrapper .occasionresult .gegevens .basics .label.bouwjaar, #occasionlijstwrapper .occasionresult .gegevens .basics .label.brandstof, #occasionlijstwrapper .occasionresult .gegevens .basics .label.kmstand, #occasionlijstwrapper .occasionresult .gegevens .basics .label.gewicht { width: 20px; height: 20px; text-indent: -9000px; border-radius: 50%; background-size: cover; background-position: 50% 50%; opacity: 0.5; filter: alpha(opacity=50); text-align: left!important; } #occasionlijstwrapper .occasionresult .gegevens .basics .label.bouwjaar { background-image: url('../../images/icons/bouwjaar_premium.png'); } #occasionlijstwrapper .occasionresult .gegevens .basics .label.brandstof { background-image: url('../../images/icons/brandstof_premium.png'); } #occasionlijstwrapper .occasionresult .gegevens .basics .label.brandstof.elektrisch { background-image: url('../../images/icons/elektrisch_premium.png'); } #occasionlijstwrapper .occasionresult .gegevens .basics .label.brandstof.hybride { background-image: url('../../images/icons/hybride_premium.png'); } #occasionlijstwrapper .occasionresult .gegevens .basics .label.kmstand { background-image: url('../../images/icons/kmstand_premium.png'); } #occasionlijstwrapper .occasionresult .gegevens .basics .label.gewicht { background-image: url('../../images/icons/gewicht_premium.png'); } #occasionlijstwrapper .occasionresult .prijs { box-sizing: border-box; display: inline-block; vertical-align: top; font-weight: bold; font-size: 18px; font-style: italic; width: 100%; height: 18px; padding-right: 4px; text-align: right!important; -ms-transform: translate(0, -40%); /* IE 9 */ -webkit-transform: translate(0, -40%); /* Safari */ transform: translate(0, -40%); } #occasionlijstwrapper .occasionresult .prijs span { box-sizing: border-box; display: inline-block; vertical-align: top; font-size: 11px; line-height: 12px; font-weight: normal; text-align: right!important; width: 100%; padding-top: 3px; -ms-transform: translate(0, -240%); /* IE 9 */ -webkit-transform: translate(0, -240%); /* Safari */ transform: translate(0, -240%) } #occasionlijstwrapper .occasionresult .prijs { position: relative;display: block; } #occasionlijstwrapper .occasionresult .prijs span { position: relative; right: 4px; display: block; /*-ms-transform: translate(0px, -140%;);*/ /*-webkit-transform: translate(0px, -140%;);*/ /*-ms-transform: translate(0px, -140%;);*/ } /* --- --- --- GRID TILE VIEW --- --- --- */ #occasionlijstwrapper .occasiongrid { width: 48.22%; /*float: left;*/ margin: 0px 5px 18px 5px; display: inline-block; } #occasionlijstwrapper .occasiongrid .merkmodel { color: #ffffff; font-size: 18px; text-shadow: 0 0 5px #000000; width: 100%; z-index: 10; /*margin-bottom: -50%;*/ margin-bottom: -20px; padding: 3px 0px 0px 6px; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -ms-transform: translate(0, -64%); -webkit-transform: translate(0, -64%); transform: translate(0, -64%); } #occasionlijstwrapper .occasiongrid .merkmodel strong { color: inherit;} #occasionlijstwrapper .occasiongrid .merkmodel label {color: inherit} #occasionlijstwrapper .occasiongrid:hover .merkmodel { color: #ffffff; } #occasionlijstwrapper .occasiongrid .merkmodel .uitvoering { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #occasionlijstwrapper .occasiongrid .mndbedr { left: 0; top: auto; position: relative; width: 100%; text-align: right; } #occasionlijstwrapper .occasiongrid .foto { margin-bottom: 6px; margin-right: 0px; width: 100%; min-height: 260px; max-height: 260px; } #occasionlijstwrapper .occasiongrid .foto img { width: auto; /*height: 100%;*/ } #occasionlijstwrapper .occasiongrid .gegevens { float: none; padding: 0px 5px; margin-bottom: -4px; display: block; } #occasionlijstwrapper .occasiongrid .gegevens .opties { display: none; } #occasionlijstwrapper .occasiongrid .gegevens .basics { font-size: 0.9em; line-height: 1.5em; width: 80%; margin-top: 8px; } #occasionlijstwrapper .occasiongrid:hover .gegevens .basics { color: #000000; } #occasionlijstwrapper .occasiongrid .prijs { -ms-transform: translate(0, -100%); /* IE 9 */ -webkit-transform: translate(0, -100%); /* Safari */ transform: translate(0, -100%); } /* #occasionlijstwrapper .occasiongrid .gegevens .basics .label { width: 40%; background: red;} #occasionlijstwrapper .occasiongrid .gegevens .basics .value { width: 60%; background: green;} */ /* --- --- --- MAX GALLERY VIEW --- --- --- */ #occasionlijstwrapper .occasiongrid.max { width: 98.6%; margin: 0px auto 26px auto; display: block; position: relative; float: none; } #occasionlijstwrapper .occasiongrid.max .merkmodel { font-size: 22px; display: block; width: 100%; z-index: 20; padding: 15px 20px 15px 20px; background: rgba(0,0,0,0.5); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); position: absolute; top: 0; } #occasionlijstwrapper .occasiongrid.max:hover .merkmodel { color: #ffffff; } #occasionlijstwrapper .occasiongrid.max .merkmodel .uitvoering { color: #ffffff; font-size: 16px; } #occasionlijstwrapper .occasiongrid.max .foto { margin-bottom: 0px; z-index: 10; position: relative; min-height: auto; max-height: none; } #occasionlijstwrapper .occasiongrid.max .foto .fotowrap{ position: relative; top: 0; left: 0; -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); min-height: 320px; } #occasionlijstwrapper .occasionresult.occasiongrid.max:hover .foto .fotowrap { -moz-transform: scale(1.05) translate(0, 0); -webkit-transform: scale(1.05) translate(0, 0); transform: scale(1.05) translate(0, 0); } #inhoud #occasionlijstwrapper .occasiongrid.max .foto img, #occasionlijstwrapper .occasiongrid.max .foto img { margin-top: -3%; margin-bottom: -3%; position: relative; top: 0; left: 0; -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); width: 100%; height: auto; } #occasionlijstwrapper .occasiongrid.max .gegevens { float: none; padding: 0px 5px; display: block; background: rgba(0,0,0,0.5); width:100%; position: absolute; z-index: 10; bottom: 0; margin-bottom: 0px; } #occasionlijstwrapper .occasiongrid.max .gegevens .basics { font-size: 12px; line-height: 1.5em; width: 100%; margin-top: 8px; color: #ffffff; margin-bottom: -100%; } #occasionlijstwrapper .occasiongrid.max:hover .gegevens .basics { color: #ffffff; } #occasionlijstwrapper .occasiongrid.max .gegevens .basics .value { width: auto; font-weight: bold; line-height: 20px;} #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.bouwjaar, #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.brandstof, #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.kmstand, #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.gewicht { -webkit-filter: invert(1); filter: invert(1); } #occasionlijstwrapper .occasiongrid.max .prijs { font-size: 22px; -ms-transform: translate(0, -250%); /* IE 9 */ -webkit-transform: translate(0, -250%); /* Safari */ transform: translate(0, -250%); color: #ffffff; text-shadow: 0 0 5px #000000; } #occasionlijstwrapper .occasiongrid.max .mndbedr { left: auto; right: 0; top: auto; position: absolute; width: auto; text-align: right; -ms-transform: translate(0, -350%); /* IE 9 */ -webkit-transform: translate(0, -350%); /* Safari */ transform: translate(0, -350%); } #occasionlijstwrapper .occasiongrid.max .mndbedr span { display: block; clear: both; } /* --- --- --- LIST VIEW --- --- --- */ #occasionlijstwrapper .occasionlist { width: 98%; margin: 0 0 18px 0; } #occasionlijstwrapper .occasionlist .foto { float: left; width: 39%; } #occasionlijstwrapper .occasionlist .merkmodel , #occasionlijstwrapper .occasionlist .gegevens { width: 61%; padding-top: 1%; padding-left: 2%; } #inhoud #occasionlijstwrapper .occasionlist .foto img, #occasionlijstwrapper .occasionlist .foto img { width: auto; min-width: 100%; height: 100%; } #occasionlijstwrapper .occasionlist .merkmodel { font-size: 18px; } #occasionlijstwrapper .occasionlist .merkmodel .uitvoering { font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #occasionlijstwrapper .occasionlist .gegevens { padding-top: 1%; } #occasionlijstwrapper .occasionlist .gegevens .opties { display: inline-block; width: 99%; padding-bottom: 0.5%; } #occasionlijstwrapper .occasionlist .gegevens .opties ul { color: #666666; } #occasionlijstwrapper .occasionlist .gegevens .opties ul li{ padding-left: 10px; list-style: none; font-size: 0.9em!important; overflow: hidden; text-overflow: ellipsis; line-height: 1.5em; } #occasionlijstwrapper .occasionlist .gegevens .opties ul li:before{ content: ""; border-style: solid; border-width: 3px 0 3px 3px; border-color: transparent transparent transparent #333333; width: 0; height: 0; display: block; float: left; margin-top: 6px; margin-left: -10px; } #occasionlijstwrapper .occasionlist .gegevens .basics { /* padding-top: 2%;*/ padding-top: 4%; margin-bottom: -3%; } #occasionlijstwrapper .occasionlist .gegevens .basics .label { padding-right: 1%; font-size: 0.85em; } #occasionlijstwrapper .occasionlist .gegevens .basics .value { padding-right: 2%; color: #333333; font-weight: bold!important; } #occasionlijstwrapper .occasionlist .prijs { padding-right: 4%; } #occasionlijstwrapper .occasionlist .mndbedr { bottom: auto; top: 1px; left: auto; right: 1px; padding: 2px 8px 2px 8px; font-size: 11px; } /* --- --- --- RESPONSIVE RESULTATEN --- --- --- *//* --- --- --- RESPONSIVE RESULTATEN --- --- --- */ @media screen and (max-width: 1200px) { /* #occasionlijstwrapper .occasionresult .foto { min-height: 240px; }*/ /* #occasionlijstwrapper .occasionlist .foto { min-height: 220px; }*/ } /* Large */ @media screen and (min-width: 1025px) { } /* Basic */ @media screen and (min-width: 901px) and (max-width: 1024px) { #occasionlijstwrapper .occasionlist .foto { width: 27%; margin-top: 6%; min-height: 125px;} #occasionlijstwrapper .occasionlist .gegevens { width: 73%; } #occasionlijstwrapper .occasionlist .merkmodel { width: 100%; margin-left: -27%; padding-left: 1%; } #occasionlijstwrapper .occasionlist .merkmodel .uitvoering { display: inline-block; width: auto; margin: 2px 4px;} #occasionlijstwrapper .occasionlist .gegevens .basics { padding-top: 3%;} #occasionlijstwrapper .occasionlist .gegevens .opties ul li{ font-size: 0.76em; line-height: 1.6em} #occasionlijstwrapper .occasionlist .gegevens .opties ul { -moz-column-gap: 0.2rem; -webkit-column-gap: 0.2rem; column-gap: 0.2rem; } #occasionlijstwrapper .occasiongrid { margin: 0px 5px 18px 5px; } #inhoud #occasionlijstwrapper .occasionresult .foto img, #occasionlijstwrapper .occasionresult .foto img { max-width: 100%; min-height: none; } } /* Basic small */ @media screen and (max-width: 900px) { #occasionlijstwrapper .occasionlist .foto { width: 39%; min-height: 180px;} #occasionlijstwrapper .occasionlist .merkmodel, #occasionlijstwrapper .occasionlist .gegevens { width: 61%;} #occasionlijstwrapper .occasionlist .gegevens .opties { display: none; } /*#occasionlijstwrapper .occasionlist .gegevens .basics .label { width: 22%;} #occasionlijstwrapper .occasionlist .gegevens .basics .value { width: 78%;}*/ #occasionlijstwrapper .occasiongrid .gegevens .basics { margin-top: -8px; } #occasionlijstwrapper .occasionlist .gegevens .basics .value { width: 100%; margin-left: -20px; padding-left: 30px; margin-bottom: 4px;} #occasionlijstwrapper .occasiongrid { width: 46.05%; margin: 0px 6px 18px 6px; } #occasionlijstwrapper .occasiongrid .foto { min-height: 240px; max-height: 240px; } #occasionlijstwrapper .occasiongrid .gegevens .basics .value { width: 100%; margin-left: -20px; padding-left: 30px; margin-bottom: 0px;} #occasionlijstwrapper .occasiongrid .gegevens .basics .label.bouwjaar, #occasionlijstwrapper .occasiongrid .gegevens .basics .label.brandstof, #occasionlijstwrapper .occasiongrid .gegevens .basics .label.kmstand, #occasionlijstwrapper .occasiongrid .gegevens .basics .label.gewicht{ width: 14px; height: 14px;} /*#occasionlijstwrapper .occasiongrid .foto { min-height: 0;}*/ } /* Tablet */ @media screen and (max-width: 800px) { #occasionresults { float: none; width: 100%; position: relative;} #occasionlijstwrapper .occasionresult.come-in, #occasionlijstwrapper .occasionresult.come-in:nth-child(odd) { filter: alpha(opacity=100); opacity: 100; transform: translateY(0px); animation: come-in 0s ease forwards; } /*#occasionlijstwrapper .occasionresult .foto { min-height: auto; }*/ #occasionlijstwrapper .occasiongrid .foto { min-height: 210px; } } /* Small Tablet */ @media screen and (max-width: 700px) { } /* Small Tablet */ @media screen and (max-width: 665px) { #occasionlijstwrapper div.displaymode { position: absolute; right: 50%; -ms-transform: translate(50%, 0); -webkit-transform: translate(50%, 0); transform: translate(50%, 0); } #occasionlijstwrapper div.nav { padding-top: 50px; } #occasionlijstwrapper .occasionfooter div.nav { padding-top: 0px; } /*#occasionlijstwrapper .occasiongrid .foto { min-height: 170px; }*/ #occasionlijstwrapper .occasionresult .gegevens .basics .value { line-height: 14px;} #occasionlijstwrapper .occasionresult .gegevens .basics .label.bouwjaar, #occasionlijstwrapper .occasionresult .gegevens .basics .label.brandstof, #occasionlijstwrapper .occasionresult .gegevens .basics .label.kmstand, #occasionlijstwrapper .occasionresult .gegevens .basics .label.gewicht { width: 14px; height: 14px;} } @media screen and (max-width: 500px) { #occasionlijstwrapper .occasiongrid .foto { min-height: 180px;} #occasionlijstwrapper .occasiongrid.max .merkmodel { width: 100%; padding-left: 1%; font-size: 1.2em; padding: 8px 2% 0 2%; position: relative; margin-bottom: 0; -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); background: white; color: #333333; text-shadow: 1px 1px 2px transparent; } #occasionlijstwrapper .occasiongrid.max:hover .merkmodel {color: #333333; } #occasionlijstwrapper .occasiongrid.max .merkmodel .uitvoering {font-size: 0.7em; margin: 3px 0px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; color: #333333; } #occasionlijstwrapper .occasiongrid.max .foto img { margin-top: -2%;} #occasionlijstwrapper .occasiongrid.max .gegevens { height: auto; position: relative; margin-top: 0; background: white; } #occasionlijstwrapper .occasiongrid.max .gegevens .basics { font-size: 11px;color: #333333; line-height: 14px;} #occasionlijstwrapper .occasiongrid.max:hover .gegevens .basics { color: #333333; } #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.bouwjaar, #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.brandstof, #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.kmstand, #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label.gewicht { -webkit-filter: invert(0); filter: invert(0); } #occasionlijstwrapper .occasiongrid.max .prijs { -ms-transform: translate(0, -510%); -webkit-transform: translate(0, -510%); transform: translate(0, -510%); } .ac-wrapper.detailpagina #interesseformcontent, .ac-wrapper.detailpagina .interesseformcontent{ white-space: normal; width: 85%; } } /* MOBILE */ @media screen and (max-width: 480px) { #occasionlijstwrapper .occasionlist { min-height: 152px;} #occasionlijstwrapper .occasionlist .gegevens .basics { margin-top: -5px; margin-bottom: 8px;} #occasionlijstwrapper .occasionlist .foto { width: 50%; margin-top: 48px; min-height: 95px;} #occasionlijstwrapper .occasionlist .merkmodel { width: 100%; margin-left: -50%; padding-left: 1%; font-size: 1.2em;} #occasionlijstwrapper .occasionlist .merkmodel .uitvoering {font-size: 0.7em; margin: 3px 0px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis;} #occasionlijstwrapper .occasionlist .gegevens { width: 50%; margin-top: 8px; } #occasionlijstwrapper .occasionlist .gegevens .basics .value { line-height: 11px; padding-left: 24px;} #occasionlijstwrapper .occasionlist .gegevens .basics .label.bouwjaar, #occasionlijstwrapper .occasionlist .gegevens .basics .label.brandstof, #occasionlijstwrapper .occasionlist .gegevens .basics .label.kmstand, #occasionlijstwrapper .occasionlist .gegevens .basics .label.gewicht { width: 11px; height: 11px; margin-top: -4px;} #occasionlijstwrapper .occasionlist .gegevens .basics .value { font-weight: normal;font-size: 0.8em; } #occasionlijstwrapper .occasionlist .prijs { -ms-transform: translate(-4px, 10px); -webkit-transform: translate(-4px, 10px); transform: translate(-4px, 10px); } #occasionlijstwrapper .occasiongrid { width: 96.05%; margin: 0px 6px 18px 6px; } #occasionlijstwrapper .occasiongrid.max .foto .fotowrap{ min-height: 140px; } #occasionlijstwrapper .occasiongrid.max .gegevens .basics .value { padding-left: 0; margin-lefT: 3px;} #occasionlijstwrapper .occasiongrid.max .gegevens .basics .label { display: none;} #occasionlijstwrapper .occasiongrid.max .mndbedr { left: auto; right: 0; top: auto; position: relative; width: 100%; text-align: right; -ms-transform: translate(0, 0); /* IE 9 */ -webkit-transform: translate(0, 0); /* Safari */ transform: translate(0, 0); } #occasionlijstwrapper .occasiongrid.max .mndbedr span { display: inline-block; } #occasionlijstwrapper .occasionlist .mndbedr { bottom: 0; top: 0; left: 0; right: 0; padding: 2px 10px 2px 10px; font-size: 11px; width: 100%; position: relative; text-align: right!important; margin-top: 6px; } #occasionlijstwrapper .occasionlist .mndbedr span { font-size: 11px!important;} } /* ----- AUTO360 ICON ----- */ #occasionlijstwrapper .occasionresult .foto .has360 { width: 40px; height: 40px; box-sizing: border-box; display: block; position: absolute; z-index: 10; top: 5%; left: 2.4%; background-position: 50% 50%; background-size: 95%; background-repeat: no-repeat; } #occasionlijstwrapper .occasionresult.occasiongrid.max .foto .has360 { width: 50px; height: 50px; top: 20% } @media screen and (max-width: 1024px) { #occasionlijstwrapper .occasionlist .foto .has360 { width: 30px; height: 30px; } } @media screen and (max-width: 900px) { #occasionlijstwrapper .occasionresult .foto .has360 { width: 30px; height: 30px; } #occasionlijstwrapper .occasionresult.occasiongrid.max .foto .has360 { top: 25%; width: 40px; height: 40px; } } @media screen and (max-width: 480px) { #occasionlijstwrapper .occasionresult.occasiongrid.max .foto .has360 { width: 30px; height: 30px; top: 5%; } #occasionlijstwrapper .occasionlist .foto .has360 { width: 20px; height: 20px; } } /* color */ #occasionlijstwrapper .occasionresult .foto .has360 { border-radius: 20%; background-image: url('../../images/360-shade.png'); background-color: rgba(255,255,255,0.75); /*background-image: url('./../images/360.png');*/ /*background-color: #ffffff;*/ /*border: 1px solid #1E244B;*/ } /* white #occasionlijstwrapper .occasionresult .foto .has360 { background-image: url('./../images/360white.png'); background-color: #1E244B; border: 1px solid #ffffff } */ /* SIDEBAR ZOEKFILTER */ /* Sidebar searchfilter *//* Sidebar searchfilter */ #occasionlijstwrapper .searchFilter { text-align: left; width: 100%; } #occasionlijstwrapper .searchFilter ul, #occasionlijstwrapper .searchFilter ol, #occasionlijstwrapper .searchFilter .ulPrijs, #occasionlijstwrapper .searchFilter .ulKmstand { padding: 0.8em; margin-bottom: 1em; border: 1px solid #efefef; border-bottom: 1px solid #eaeaea; background: #ffffff; margin-left: 0; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; -webkit-box-shadow: 0 0 8px 0 #cccccc; box-shadow: 0 0 8px 0 #cccccc; border: 1px solid #cccccc; } #occasionlijstwrapper .searchFilter ul:hover, #occasionlijstwrapper .searchFilter ol :hover, #occasionlijstwrapper .searchFilter .ulPrijs:hover, #occasionlijstwrapper .searchFilter .ulKmstand:hover { border-bottom: 1px solid #333333; -webkit-box-shadow: 0 0 8px 0 #cccccc; box-shadow: 0 0 8px 0 #cccccc; } #occasionlijstwrapper .searchFilter h5, #occasionlijstwrapper .searchFilter li {list-style: none; margin-left: 0px; display: block; width: 100%; } #occasionlijstwrapper .searchFilter li:hover { font-weight: bold!important; cursor: pointer; } #occasionlijstwrapper .searchFilter li.currentFilter { font-weight: bold!important; } #occasionlijstwrapper .searchFilter h5 { text-align: left; font-weight: bold; line-height: 2.5em;} #occasionlijstwrapper .searchFilter li:before { content: '\25A1'; color: #cccccc; line-height: 1.1em; width: 14px; display: inline-block; } #occasionlijstwrapper .searchFilter li:hover:before { content: '\2713'; color: #666666;} #occasionlijstwrapper .searchFilter li.currentFilter:before { content: '\2713'; color:green} #occasionlijstwrapper .searchFilter li.currentFilter:hover:before { content:'\00d7'; color: red; font-weight: bold!important;} #occasionlijstwrapper .searchFilter li.disableFilter:hover:before { content:'\00d7'; color: red; font-weight: bold!important;} #occasionlijstwrapper .searchFilter p.deleteFilter, #occasionlijstwrapper .searchFilter p.deelFilter, #occasionlijstwrapper .searchFilter li.meer, #occasionlijstwrapper .searchFilter li.minder { font-style: italic; font-size: 1em; display: inline-block; padding: 2px 8px; border: 1px solid rgba(0,0,0,0.2); margin-top: 10px; margin-bottom: 10px; cursor: pointer; width: 100%; text-align: center; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; box-sizing: border-box; background: rgba(255,255,255,0.4); font-weight: normal!important; } #occasionlijstwrapper .searchFilter p.deleteFilter { margin-bottom: 3.5em; } #occasionlijstwrapper .searchFilter p.deleteFilter:hover, #occasionlijstwrapper .searchFilter p.deelFilter:hover, #occasionlijstwrapper .searchFilter li.meer:hover, #occasionlijstwrapper .searchFilter li.minder:hover { font-weight: normal; background: rgba(0,0,0,0.05); border-bottom: 1px solid #333333; } #occasionlijstwrapper .searchFilter p.deleteFilter:before, #occasionlijstwrapper .searchFilter p.deelFilter:before { content:'\00d7'; font-size: 1.2em; display: inline-block; vertical-align: bottom; padding-right: 5px; color: red; font-weight: bold!important; font-style: normal; } #occasionlijstwrapper .searchFilter p.deelFilter { margin-bottom: 60px; } #occasionlijstwrapper .searchFilter p.deelFilter:before { content: '\00bb'; color: #000000; } #occasionlijstwrapper .searchFilter li.meer:before { content:'+'; padding-right: 5px; font-weight: bold!important; font-style: normal; color: #000000; } #occasionlijstwrapper .searchFilter li.minder:before { content:'-'; padding-right: 5px; font-weight: bold!important; font-style: normal; color: #000000; } #occasionlijstwrapper .searchFilter li.deleteFilter { float: right; display: block; width: 15px; height: 15px; line-height: 15px; background: #ff0000; overflow: hidden; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; transform: translate(-16px, -16px); } #occasionlijstwrapper .searchFilter li.deleteFilter:before { content:'X'; color: #ffffff; font-weight: bold!important; padding-left: 4px; padding-right: 4px;} /* Energielabels */ #occasionlijstwrapper .searchFilter ul.ulEnergielabel li { color: transparent!important; height: 18px; margin-top: 2px; margin-bottom: 2px; background-size: contain; background-repeat: no-repeat; background-position: 20px 50%; } #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-aplus { background-image: url('../../images/energielabels_zoekfilter/energielabel-aplus.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-a { background-image: url('../../images/energielabels_zoekfilter/energielabel-a.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-b { background-image: url('../../images/energielabels_zoekfilter/energielabel-b.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-c { background-image: url('../../images/energielabels_zoekfilter/energielabel-c.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-d { background-image: url('../../images/energielabels_zoekfilter/energielabel-d.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-e { background-image: url('../../images/energielabels_zoekfilter/energielabel-e.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-f { background-image: url('../../images/energielabels_zoekfilter/energielabel-f.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.energielabel-g { background-image: url('../../images/energielabels_zoekfilter/energielabel-g.png');} #occasionlijstwrapper .searchFilter ul.ulEnergielabel li.disableFilter { color: inherit; background-image: none; } /* dropdowns */ #occasionlijstwrapper .searchFilter select { font-style: italic; font-size: 1em; display: inline-block; padding: 2px 8px; border: 1px solid rgba(0,0,0,0.2); margin-top: 10px; margin-bottom: 10px; cursor: pointer; width: 100%; text-align: center; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; box-sizing: border-box; background: rgba(255,255,255,0.4); } /* slider selectors */ #occasionlijstwrapper .ui-slider { position: relative; text-align: left; } #occasionlijstwrapper .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } #occasionlijstwrapper .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ #occasionlijstwrapper .ui-slider.ui-state-disabled .ui-slider-handle, #occasionlijstwrapper .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } #occasionlijstwrapper .ui-slider-horizontal { height: .4em; margin-top: 1em; margin-bottom: 1em; } #occasionlijstwrapper .ui-slider-horizontal .ui-slider-handle { top: -.4em; margin-left: -.3em; } #occasionlijstwrapper .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } #occasionlijstwrapper .ui-slider-horizontal .ui-slider-range-min { left: 0; } #occasionlijstwrapper .ui-slider-horizontal .ui-slider-range-max { right: 0; } #occasionlijstwrapper .ui-widget-content { background: #efefef; border-top: 1px solid #cccccc; border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; border-left: 1px solid #cccccc; } #occasionlijstwrapper .ui-corner-all { border-radius: 4px; } #occasionlijstwrapper .ui-slider-horizontal .ui-slider-handle.ui-corner-all { border-radius: 100%; } /* Interaction states ----------------------------------*/ #occasionlijstwrapper .ui-state-default, #occasionlijstwrapper .ui-widget-content .ui-state-default, #occasionlijstwrapper .ui-widget-header .ui-state-default { border: 2px solid #333333; background: #ffffff } #occasionlijstwrapper .ui-state-hover, #occasionlijstwrapper .ui-widget-content .ui-state-hover, #occasionlijstwrapper .ui-widget-header .ui-state-hover, #occasionlijstwrapper .ui-state-focus, #occasionlijstwrapper .ui-widget-content .ui-state-focus, #occasionlijstwrapper .ui-widget-header .ui-state-focus { border: 3px solid #666666; background: #ffffff; outline: none; cursor:pointer; } #occasionlijstwrapper .ui-state-active, #occasionlijstwrapper .ui-widget-content .ui-state-active, #occasionlijstwrapper .ui-widget-header .ui-state-active { border: 4px solid #333333; background: #ffffff; } #occasionzoekfilter .searchFilter button.button { font-style: italic; font-size: 1em; display: inline-block; padding: 2px 8px; border: 1px solid rgba(0,0,0,0.2); background: #ffffff; color: inherit; font-weight: normal; margin-top: 10px; margin-bottom: 10px; cursor: pointer; width: 100%; text-align: center; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; box-sizing: border-box; } #occasionzoekfilter .searchFilter button.button:hover { font-weight: normal; background: rgba(0,0,0,0.05); border-bottom: 1px solid #333333; } /* .Sidebar searchfilter *//* .Sidebar searchfilter */ #filterbutton, #closefilterbutton, #detailpaginaback { position: fixed; z-index: 1000; bottom: 0px; left:0; width: 100%; box-sizing: border-box; padding: 10px; font-weight: bold; font-size: 14px; text-align: center!important; cursor: pointer; font-weight: bold; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; background: rgba(255,255,255,1); -webkit-box-shadow: 0 0 8px 0 #333333; box-shadow: 0 0 8px 0 #333333; display: none; } #detailpaginabackbutton, .topcta a { box-sizing: border-box; text-decoration: none; padding: 10px!important; font-weight: bold; font-size: 14px; text-align: center!important; cursor: pointer; font-weight: bold; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; background: rgba(0,0,0,0.04); margin-bottom: 10px; margin-left: 0.5%; display: inline-block; } /* Share Modal *//* Share Modal */ /* The Modal (background) */ .share-url-modal { display: none; position: fixed; z-index: 25000000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } /* Modal Content/Box */ .share-url-modal .modal-content { position: relative; top: 50%; left: 50%; width: 80% !important; min-width: 200px; max-width: 520px; background-color: #fefefe; padding: 20px !important; border: 1px solid #888 !important; border-radius: 10px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .share-url-modal .share-links{ width: 90%; margin: 15px auto !important; padding-left: 0!important; text-align: center; } .share-url-modal .share-links li{ list-style: none; width: 100%; max-width: 175px; margin: 10px 5px !important; display: inline-block; } .share-url-modal .share-links li .copy-succeeded{ display: none; border: 1px solid black; background: #000000; color: #FFFFFF; font-weight: bold; margin-top: 5px !important; border-radius: 5px; } .share-url-modal li.copylink a{ background: url('../../images/icons/social/copy-url.png') 8px 49% no-repeat #cccccc; background-size: 23px 23px; color: #333333; } .share-url-modal li.emaillink a{ background: url('../../images/icons/social/mailafriend.png') 8px 49% no-repeat #cccccc; background-size: 23px 23px; color: #333333; } .share-url-modal li.facebooklink a{ background: url('../../images/icons/social/facebook.png') 8px 49% no-repeat #3B5998; background-size: 23px 23px; } .share-url-modal li.twitterlink a{ background: url('../../images/icons/social/x.png') 8px 49% no-repeat #000000; background-size: 23px 23px; } .share-url-modal li.linkedinlink a{ background: url('../../images/icons/social/linkedin.png') 8px 49% no-repeat #0E76A8; background-size: 23px 23px; } .share-url-modal li.whatsapplink a{ background: url('../../images/icons/social/whatsapp.png') 8px 49% no-repeat #53be18; background-size: 23px 23px; } .share-url-modal li a:hover { -webkit-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px; text-shadow: none !important; } .share-url-modal li a{ padding-left: 26px!important; padding-right: 5px!important; display: block; text-decoration: none; color: #ffffff; height: 42px; line-height: 42px; font-size: 1.1em; cursor: pointer; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background-size: 10px 10px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; text-shadow: none !important; } .share-url-modal .close { color: #aaa; float: right; font-size: 28px !important; font-weight: bold; padding: 7px 0 !important; } .share-url-modal .close:hover, .share-url-modal .close:focus { color: black; text-decoration: none; cursor: pointer; } /* .Share Modal *//* .Share Modal */ @media screen and (max-width: 800px) { #filterbutton, #detailpaginaback, #detailpaginabackbutton { display: block; } #detailpaginabackbutton { position: fixed; z-index: 1000; bottom: 0px; left:0; width: 100%; margin-bottom: 0px; margin-left: 0; background: rgba(255,255,255,1); -webkit-box-shadow: 0 0 8px 0 #333333; box-shadow: 0 0 8px 0 #333333; } #detailpaginaback {display: none;} body.fullscreen #detailpaginaback, body.fullscreen #detailpaginabackbutton {display: none;} #closefilterbutton { display: none; max-width: 480px; } #occasionzoekfilter { box-sizing: border-box; position: fixed; top: 0; left: 0; background: rgba(255,255,255,1); height: 100vh; width: 100%; max-width: 480px; overflow-y: hidden; z-index: 999999; display: none; -webkit-box-shadow: 0 0 8px 0 #333333; box-shadow: 0 0 8px 0 #333333; } #occasionzoekfilter .searchFilter { height: 100vh; width: 100%; overflow-y: scroll; padding: 20px 20px 60px 20px; } .occtoplink, .occtoplink:hover { bottom: 42px!important; right: 5px!important; } a#occtoplink { padding: 10px 10px 10px 10px!important; } } /*************************************** DETAILPAGINA ***************************************//*************************************** DETAILPAGINA ***************************************/ /*************************************** DETAILPAGINA ***************************************//*************************************** DETAILPAGINA ***************************************/ /* .ac-wrapper { all: initial; } * { all: unset; } */ .ac-wrapper img { border: 0; padding: 0;} .ac-wrapper{ color: #666666; /*font-family: 'Helvetica', Arial, sans-serif;*/ font-family: inherit; font-size: 1em; line-height: 1.5em; width: 100%; max-width: 1200px; margin: 20px auto; min-height: 10px; text-align: center; } .topcta a.primarycolor { background: #333333; color: #ffffff; } .topcta a { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; text-shadow: none; } .topcta { display: block; width: 70%; padding-right: 0.5%; float: right; text-align: right; } .ac-wrapper input, .ac-wrapper textarea { font-family: 'Helvetica', Arial, sans-serif; } body.fullscreen { color: #666666; font-family: 'Helvetica', Arial, sans-serif; font-size: 1em; line-height: 1.5em; } .primarycolor , .ac-wrapper .primarycolor { color: #333333; } .secondarycolor , .ac-wrapper .secondarycolor { color: #666666; } .ac-wrapper .fotorama__thumb-border, body.fullscreen .fotorama__thumb-border { border-color: #333333; } /* .ac-wrapper ul li:before, body.fullscreen ul li:before { content: ""; border-style: solid; border-width: 3px 0 3px 3px; border-color: transparent transparent transparent #333333; width: 0; height: 0; display: block; float: left; margin-top: 6px; margin-left: -10px; } */ .ac-wrapper ul li:before, body.fullscreen ul li:before { content: ""; border-style: solid; border-width: 4px 0 4px 4px; border-color: transparent transparent transparent #333333; width: 6px; height: 0; display: inline-block; margin-left: -10px; } .ac-wrapper .clear { clear: both; display: block; width: 0px; height: 0px; content: '.'; visibility: hidden; } .ac-wrapper * { vertical-align: top; } .ac-wrapper a { color: #000000; text-decoration: underline; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .ac-wrapper a:hover { text-decoration: none; } .ac-wrapper a:focus { outline: none; } .ac-wrapper h1, .ac-wrapper h2, .ac-wrapper h3, .ac-wrapper h4, .ac-wrapper h5, .ac-wrapper h6, .ac-wrapper p.title { /*font-family: Arial, sans-serif;*/ font-weight: 400; line-height: 1.5em; margin-top: 0; margin-bottom: 0.8em; text-align: left; text-transform: none; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; padding-top: 0; background: transparent; } .ac-wrapper h1 { font-size: 2.4em!important; } .ac-wrapper h2 { font-size: 2.2em!important; margin-top: 0; } .ac-wrapper h3 { font-size: 1.2em!important; } .ac-wrapper h4 { font-size: 1.2em!important; opacity: 0.75; filter: alpha(opacity=75); } .ac-wrapper .alternatieven h4 { opacity: 1; filter: alpha(opacity=100); } .ac-wrapper h5, .ac-wrapper p.title { font-size: 1.0em!important; opacity: 0.75; filter: alpha(opacity=75); margin-top: 1em; font-weight: bold!important;} .ac-wrapper h6 { font-size: 0.8em!important; opacity: 0.75; filter: alpha(opacity=75); } .ac-wrapper p, .ac-wrapper ul, .ac-wrapper ol, body.fullscreen .imgoverlay p, body.fullscreen .imgoverlay ul, body.fullscreen .imgoverlay ol { font-size: 0.9em; margin-left: 0!important; margin-right: 0!important; margin-top: 0!important; margin-bottom: 0.8em!important; padding-left: 0!important; } .ac-wrapper strong { font-family: Arial, sans-serif; font-weight: bold!important; } .ac-wrapper em { font-style: italic; } .ac-wrapper ul li, body.fullscreen ul li { list-style: none!important; margin-left: 1.2em!important; /*font-size: 0.9em;*/ line-height: 1.5em; } .ac-wrapper hr { height: 0px; border: 0px; border-collapse: collapse; border-bottom: 1px solid rgba(0,0,0,0.1); margin-top: 2.5em; margin-bottom: 0.5em; } .ac-wrapper .huge { font-size: 1.4em!important; } .ac-wrapper .huge * { font-size: 1em!important; } .ac-wrapper .big { font-size: 1.2em!important; } .ac-wrapper .big * { font-size: 1em!important; } .ac-wrapper .small { font-size: 0.8em!important; } .ac-wrapper .small * { font-size: 1em!important; } .ac-wrapper .tiny { font-size: 0.7em!important; } .ac-wrapper .tiny * { font-size: 1em!important; } .ac-wrapper .flex { padding: 0; margin: 0 auto; list-style: none; -ms-flex-direction: row; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .ac-wrapper .row { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 1%; } .ac-wrapper .block, .ac-wrapper .mainblock { padding: 0.4em 1.5%; margin: 0 0.5% 0.5% 0.5%!important; text-align: left; border: 1px solid #ffffff; background: rgba(0,0,0,0.04); /*box-shadow: 0 0 3px rgba(0,0,0,0.2);*/ } .ac-wrapper .block { order: 0; flex-grow: 1; display: inline-block; vertical-align: top; box-sizing: border-box; width: 24%; } .ac-wrapper .first { order: -1; flex-grow: 1; } .ac-wrapper .block.third { width: 32.1%; } .ac-wrapper .block.twothird { width: 65.5% ;} .ac-wrapper .block.fourth { width: 24%; } .ac-wrapper .block.threefourth { width: 74%; } .ac-wrapper .block.full { width: 99%; } .ac-wrapper .inner { padding: 0!important; padding-top: 0.5em!important; margin: 0!important; border: 0px solid transparent!important; background: transparent!important; box-shadow: 0 0 0 transparent!important; } /* Alignment -------------------*/ .ac-wrapper .float.left { float: left; } .ac-wrapper .float.right { float: right; } .ac-wrapper .alignleft, .ac-wrapper img.alignleft { display: inline; float: left; margin-right: 20px; text-align: left; } .ac-wrapper .alignright, .ac-wrapper img.alignright { display: inline; float: right; margin-left: 20px; text-align: right; } .ac-wrapper .aligncenter, .ac-wrapper img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; text-align: center; } /*************************************** Main AC DETAILS layout ***************************************/ /* merk model */ .ac-wrapper.detailpagina .merkmodel {} .ac-wrapper.detailpagina .merkmodel h1 { font-size: 2.4em!important; font-weight: 400; margin-bottom: 0; margin-top: 0!important; padding: 0!important; background: transparent;} .ac-wrapper.detailpagina .merkmodel h2 { font-size: 1.2em!important; margin-bottom: 0; padding: 0!important;background: transparent;} .ac-wrapper.detailpagina .merkmodel h3 { font-size: 2.4em!important; font-weight: 400; margin-bottom: 0; padding: 0!important;background: transparent;} .ac-wrapper.detailpagina .merkmodel h4 { font-size: 1.0em!important; margin-bottom: 0; margin-top: 0.1em; padding: 0!important;background: transparent;} .ac-wrapper.detailpagina .merkmodel h2 span { display: inline-block; font-size: 0.8em!important; padding-left: 20px; margin-top: 0.1em; } .ac-wrapper.detailpagina .merkmodel h2 span * { font-size: 1em!important; } .ac-wrapper.detailpagina .merkmodel h4 span { display: inline-block; font-size: 0.9em!important; margin-top: 0.1em; font-style: italic; } .ac-wrapper.detailpagina .merkmodel h4 span * { font-size: 1em!important; } /* fotos & details */ .ac-wrapper.detailpagina #voertuigfotos { width: 99%; margin-bottom: 1% } .ac-wrapper.detailpagina #voertuigfotos.float { width: 61%; } .ac-wrapper.detailpagina #voertuigfotos { text-align: center!important; border: none; background: transparent; box-shadow: none; padding: 0 0 0.5% 0; /*padding-bottom: 1em;*/ /*margin-top: -10px!important;*/ } /*.ac-wrapper.detailpagina #voertuigfotos img { margin: 0 auto!important; }*/ .ac-wrapper.detailpagina #voertuigdetails { width: 99%; margin-top: 1%; } .ac-wrapper.detailpagina #voertuigdetails.float { width: 37%; } .ac-wrapper.detailpagina #voertuigdetails ol li { list-style: none!important; margin-left: 0em!important; font-size: 1.3em!important; font-weight: bold!important; margin-bottom: 0.8em; display: inline-block; width: 32.3%; } .ac-wrapper.detailpagina #voertuigdetails ol li.hide { display: none; } .ac-wrapper.detailpagina #voertuigdetails ol li * { font-size: 1em!important; } .ac-wrapper.detailpagina #voertuigdetails.float ol li { width: 48%; } .ac-wrapper.detailpagina #voertuigdetails ol li span.label { display: block; font-size: 0.7em!important; font-weight: normal; opacity: 0.75; filter: alpha(opacity=75); } .ac-wrapper.detailpagina #voertuigdetails li img.napweblabel { max-width: 65px!important; margin-top: -12px; margin-left: 10px; } .ac-wrapper.detailpagina #voertuigdetails li.financieringsbutton span { display: none!important; } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button { display: inline-block; /*background: #00a9ec;*/ background: #fefefe!important; /*color:white!important;*/ color:#333333!important; font-style: normal; text-decoration: none; padding: 0px 15px; border-radius: 5px; text-align: center; font-weight: normal; font-size: 13px!important; /*border-bottom: 3px solid #0082b6;*/ border: 1px solid #cccccc!important; border-bottom: 3px solid #cccccc!important; margin-top: -2px!important; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button { margin: 0px 0.2em 2px 0.2em!important; } .ac-wrapper.detailpagina #voertuigdetails li a.consulease:hover, .ac-wrapper.detailpagina #voertuigdetails li a.dtc:hover, .ac-wrapper.detailpagina #voertuigdetails li a.findio:hover, .ac-wrapper.detailpagina #voertuigdetails li a.royaallease:hover, .ac-wrapper.detailpagina #voertuigdetails li a.overig:hover { /*border-bottom: 1px solid #005a7d;*/ border-bottom: 1px solid #cccccc; margin-top: 2px!important; margin-bottom: 0px!important; } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.findio:before, .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.dtc:before, .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.royaallease:before, .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.consulease:before, .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.overig:before { content:''; display: block; margin: 5px auto; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; width: 100%; padding-top: 15%; } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.findio:before { background-image: url('../../images/financieringen/findio-logo.png'); } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.dtc:before { background-image: url('../../images/financieringen/dtc-logo.png'); } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.royaallease:before { background-image: url('../../images/financieringen/royaallease-logo.png'); } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.consulease:before { background-image: url('../../images/financieringen/consulease-logo.png'); } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button.overig:before { background-image: url('../../images/financieringen/overig-logo.png'); } .ac-wrapper.detailpagina #voertuigdetails li a.wegenbelastinginfo { background-image: url('../../images/icons/info-wegbel.png'); background-size: cover; background-position: 50% 50%; opacity: 0.5; display: inline-block; width: 20px; height: 20px; margin-top: 1px; text-indent: -9000px; } .ac-wrapper.detailpagina #voertuigdetails li a.wegenbelastinginfo:hover { opacity: 1; } /* vrije omschrijving / labels */ .ac-wrapper.detailpagina img.energielabel { max-height: 20px;} .ac-wrapper.detailpagina img.nap, .ac-wrapper.detailpagina img.energielabel, .ac-wrapper.detailpagina p.garantielabels img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out; width: auto!important; display: inline-block; } .ac-wrapper.detailpagina p.garantielabels { padding: 1.2em 0; } .ac-wrapper.detailpagina img.nap:hover, .ac-wrapper.detailpagina img.energielabel:hover, .ac-wrapper.detailpagina p.garantielabels img:hover { -webkit-filter: grayscale(0); filter: grayscale(0); } /* RDW Rapport -----------------------------------*/ a#btn_rdwvoertuigrapport { display: inline-block; box-sizing: border-box; float: right; color:#333333!important; padding: 10px 10px 10px 50px; border-radius: 10px; border: 1px solid #cccccc!important; border-bottom: 3px solid #cccccc!important; background: url('../../images/icons/rdw-icon.png') 0% 50% no-repeat #ffffff; background-size: 50px; font-size: 12px!important; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a#btn_rdwvoertuigrapport:hover { border-bottom: 1px solid #cccccc!important; } .ac-wrapper.detailpagina iframe.leasemakelaar{ border: 1px solid #aaaaaa; border: 1px solid var(--ACbordercolor); box-sizing: border-box; width: 640px; height: 310px; max-width: 100%!important; padding: 6px; margin-top: 10px; margin-bottom: 10px; } .ac-wrapper.detailpagina .financial_frame_financiallease_nl iframe { height: 820px!important; } .ac-wrapper.detailpagina .financial_frame_regeljelease iframe { height: 820px!important; } .ac-wrapper.detailpagina .financial_frame_inlease iframe { height: 820px!important; } @media screen and (max-width: 760px) { .ac-wrapper.detailpagina iframe.leasemakelaar { height: 360px; } } .ac-wrapper.detailpagina .financieel_frame_bizniz iframe { height: 700px!important; } @media screen and (max-width: 820px) { .ac-wrapper.detailpagina .financieel_frame_bizniz iframe { height: 1100px!important; } } @media screen and (max-width: 480px) { .ac-wrapper.detailpagina .financieel_frame_bizniz iframe { height: 900px!important; } } .ac-wrapper.detailpagina .financieel_frame_leasepuntauto .la-calculator-inner { max-width: 100%; } .ac-wrapper.detailpagina .financieel_frame_leasepuntauto .la-calculator-inner input { z-index: 1; opacity: 1; position: relative; } .ac-wrapper.detailpagina .financieel_frame_leasepuntauto .la-calculator-inner label { padding-left: 0; } /* Panorama */ .panowrap { position: relative; padding-bottom: 56.25%; } #panocontainer { width: 100%; height: 100%; position: absolute; top:0; left: 0; } /* opties / extras / techniek / elektrisch */ .ac-wrapper.detailpagina section ol { margin-bottom: 0!important; } .ac-wrapper.detailpagina section ol li { margin-left: 0em!important; margin-bottom: 0.8em; display: inline-block; width: 32.3%; } .ac-wrapper.detailpagina section ol li::before { display: none; } .ac-wrapper.detailpagina section ol li span.label{ display: block; font-size: 1em!important; font-weight: normal; opacity: 0.75; filter: alpha(opacity=75); } .ac-wrapper.detailpagina section ol li span.label sup { font-size: 75%!important; bottom: 5px!important; position: relative!important; vertical-align: baseline!important; } .ac-wrapper.detailpagina .techniekverbruik section ol li span.label, .ac-wrapper.detailpagina .financiering section ol li span.label { display: block; font-size: 0.9em!important; font-weight: normal; opacity: 0.75; filter: alpha(opacity=75); } .ac-wrapper.detailpagina section ol li.full { width: 100%; } .ac-wrapper.detailpagina img.nap, #inhoud .ac-wrapper.detailpagina img.nap { max-width: 50px!important; height: auto!important; display: inline-block; margin-left: 10px; } /* optie columns */ .ac-wrapper.detailpagina section .row.columns { padding-top: 0.5em; display: block; } .ac-wrapper.detailpagina section .row.columns h5 { padding-bottom: 0; margin-bottom: 0.2em; } .ac-wrapper.detailpagina section .row.columns h5:first-child { padding-top: 0px!important; margin-top: 0!important; } .ac-wrapper.detailpagina section .row.columns { -moz-columns: 3; -webkit-columns: 3; columns: 3; -moz-column-gap: 1.25rem; -webkit-column-gap: 1.25rem; column-gap: 1.25rem; } .ac-wrapper.detailpagina section .row.columns span, .ac-wrapper.detailpagina section .row.columns div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; display: block; } .ac-wrapper.detailpagina section .row.columns span.uitgelichteopties, .ac-wrapper.detailpagina section .row.columns span.extraopties, .ac-wrapper.detailpagina section .row.columns div.uitgelichteopties, .ac-wrapper.detailpagina section .row.columns div.extraopties { -webkit-column-break-inside: auto; page-break-inside: auto; break-inside: auto; display: initial; } .ac-wrapper.detailpagina ul.uitgelicht li { font-size: 1em; padding-left: 14px; line-height: 24px; font-weight: bold; } .ac-wrapper.detailpagina ul.uitgelicht li:before { border-width: 0; content: "\2714"; margin-top: -1px; margin-left: -30px; width: 26px; color: green; font-size: 24px; /*text-shadow: 1px 1px 1px #ffffff;*/ } .ac-wrapper.detailpagina .elektrischespecificaties { display: none; } .ac-wrapper.detailpagina .elektrischespecificaties.aktief { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* afleverpakketten */ .ac-wrapper.detailpagina .afleverpakketten .tab-content .block { background: #ffffff; } .ac-wrapper.detailpagina .afleverpakketten p.pakketnaam { font-weight: bold!important; font-size: 1.1em!important;} .ac-wrapper.detailpagina .afleverpakketten p.pakketprijs { font-weight: bold!important; font-size: 1.2em!important; } .ac-wrapper.detailpagina .afleverpakketten p.pakketomschrijving { font-style: italic;font-size: 1em!important;} .ac-wrapper.detailpagina .afleverpakketten .pakketinhoud * {font-size: 0.8em!important; line-height: 1.6em!important;} /* alternatieven */ .ac-wrapper.detailpagina .altvoertuig { background: #ffffff; } .ac-wrapper.detailpagina .altvoertuig .altfotowrapper { text-align: center; margin: 10px 0px; max-width: 100%; overflow: hidden; border: 1px solid white; } .ac-wrapper.detailpagina .altvoertuig .altfotowrapper img { width:100%!important; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .ac-wrapper.detailpagina .altvoertuig .altfotowrapper { width:100%!important; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .ac-wrapper.detailpagina .altvoertuig:hover .altfotowrapper , .ac-wrapper.detailpagina .altvoertuig:focus .altfotowrapper { -ms-transform: scale(1.025); -webkit-transform: scale(1.025); transform: scale(1.025); } /* .ac-wrapper.detailpagina .altvoertuig .float.left { max-width: 66%;} .ac-wrapper.detailpagina .altvoertuig .float.right { max-width: 34%; margin-left: 0px; } */ .ac-wrapper.detailpagina .altvoertuig .float.left { width: 100%; max-width: 100%;} .ac-wrapper.detailpagina .altvoertuig .float.right { width: 100%; max-width: 100%; margin-left: 0px; text-align: right; } .ac-wrapper.detailpagina .altvoertuig .float.right p.secondarycolor{ display: inline-block; text-align: left; padding-left: 0.4em; } .ac-wrapper.detailpagina .altvoertuig p { font-size: 0.9em!important; margin-bottom: 0.2em!important; } .ac-wrapper.detailpagina .altvoertuig p.secondarycolor { font-size: 0.8em!important; margin-bottom: 0.8em!important; } .ac-wrapper.detailpagina .altvoertuig .float.right p.secondarycolor {margin-bottom: 0!important; } .ac-wrapper.detailpagina .altvoertuig p.secondarycolor strong{ font-size: 1.2em!important; } .ac-wrapper.detailpagina .altvoertuig p em { font-size: 0.9em!important; } .ac-wrapper.detailpagina .altvoertuig.transp { border: 0px solid transparent!important; background: transparent!important; box-shadow: 0 0 0 transparent!important; } /* misc */ .ac-wrapper.detailpagina .nawdetails a.interestlink, .ac-wrapper.detailpagina .nawdetails a.fullinterestlink { position: relative; top: 0; left: 0; -ms-transform: translate(0%,0%); -webkit-transform: translate(0%,0%); transform: translate(0%,0%); font-size: 1em!important; padding: 10px 18px; width: 100%; display: block; margin-top: 1.2em; text-align: center; } .ac-wrapper.detailpagina a.interestlink:after, .ac-wrapper.detailpagina a.fullinterestlink:after { content: "\25B8"; padding-left: 4px; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route{ display: block; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_title{ margin-bottom: 8px; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_input{ display: block; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_input span{ display: inline-block; vertical-align: middle; padding-right: 15px; width: 100px; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_input input{ display: inline-block; width: 100%; padding: 8px 12px; border: 1px solid #cccccc; border-radius: 4px; vertical-align: middle; font-size: 100%; color: #333333!important; font-family: 'Helvetica', Arial, sans-serif; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_input:focus{ outline: none; border: 1px solid #333333; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_button { display: inline-block; margin: 10px 0; padding: 8px 16px; width: 100%; text-align: center; font-size: 14px!important; } .ac-wrapper.detailpagina .bedrijfsgegevens .bereken_route .bereken_route_button:after { content: "\25B8"; padding-left: 4px; } .ac-wrapper.detailpagina .nawdetails a.whatsapplink, .ac-wrapper.detailpagina .nawdetails a.belonslink, .ac-wrapper.detailpagina .nawdetails a.printlink { display: block; width: 35px; height: 35px; float: right; text-indent: -9000px; background: url('../../images/icons/social/whatsapp.png') 50% 50%; background-size: 40px 40px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 0 0 4px 0 #cccccc; box-shadow: 0 0 4px 0 #cccccc; -ms-transform: translate(-10%,-358%); -webkit-transform: translate(-10%,-358%); transform: translate(-10%,-358%); margin-bottom: -200%; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .ac-wrapper.detailpagina .nawdetails a.whatsapplink:hover, .ac-wrapper.detailpagina .nawdetails a.belonslink:hover, .ac-wrapper.detailpagina .nawdetails a.printlink:hover { -webkit-border-radius: 30px 30px 30px 30px; border-radius: 30px 30px 30px 30px; } .ac-wrapper.detailpagina .nawdetails a.belonslink { background: url('../../images/icons/telefoon.png') 50% 50%; background-size: 40px 40px; -ms-transform: translate(-10%,-232%); -webkit-transform: translate(-10%,-232%); transform: translate(-10%,-232%); } .ac-wrapper.detailpagina .nawdetails a.printlink { background: url('../../images/icons/printer.png') 50% 50%; background-size: 40px 40px; -ms-transform: translate(-10%,-110%); -webkit-transform: translate(-10%,-110%); transform: translate(-10%,-110%); } .ac-wrapper.detailpagina .nawdetails ul { padding-left: 0;} .ac-wrapper.detailpagina .nawdetails ul.sharelinks li { margin-bottom: 5px; margin-left: 0!important; width: 49%; padding: 3px 5px 8px 5px!important ; display: inline-block;} .ac-wrapper.detailpagina .nawdetails ul.sharelinks li a { /* padding-left: 38px;*/ padding-left: 20px; padding-right: 5px; display: block; text-decoration: none; color: #ffffff; height: 42px; line-height: 42px; font-size: 1.1em; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background-size: 10px 10px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; text-shadow: none!important; text-align: center; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li a:hover { -webkit-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px; text-shadow: none!important; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li.facebooklink a { background: url('../../images/icons/social/facebook.png') 8px 50% no-repeat #3B5998; background-size: 23px 23px; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li.twitterlink a { background: url('../../images/icons/social/x.png') 8px 49% no-repeat #000000; background-size: 23px 23px; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li.whatsapplink a { background: url('../../images/icons/social/whatsapp.png') 8px 49% no-repeat #53be18; background-size: 23px 23px; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li.linkedinlink a { background: url('../../images/icons/social/linkedin.png') 8px 49% no-repeat #0E76A8; background-size: 23px 23px; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li.emaillink a { background: url('../../images/icons/social/mailafriend.png') 8px 49% no-repeat #cccccc; background-size: 23px 23px; color: #333333; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li.copylink a{ background: url('../../images/icons/social/copy-url.png') 8px 49% no-repeat #cccccc; background-size: 23px 23px; color: #333333; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li:before { display: none; } .ac-wrapper.detailpagina #footnotes { margin: 0 auto; text-align: center; opacity: 0.85; filter: alpha(opacity=85); } .ac-wrapper.detailpagina #footnotes a {font-weight: bold!important; text-decoration: none;} .ac-wrapper.detailpagina #footnotes a:hover {font-weight: bold!important; text-decoration: underline;} /* button */ .ac-wrapper.detailpagina .button, body.fullscreen .button { -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; -webkit-border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px; background: rgba(255,255,255,0.45); text-decoration: none; font-size: 1.2em!important; padding: 10px 18px; cursor: pointer; color: #000000; border: 1px solid #333333; } .ac-wrapper.detailpagina .button:hover, body.fullscreen .button:hover { color: #333333; padding: 10px 24px; background: rgba(255,255,255,0.65); -webkit-border-radius: 40px 40px 40px 40px; border-radius: 40px 40px 40px 40px; } .ac-wrapper.detailpagina .button.dark, body.fullscreen .button.dark { color: #ffffff; background: #333333; border: 0; } .ac-wrapper.detailpagina .button.dark:hover, body.fullscreen .button.dark:hover{ color: #ffffff; background: #333333; border: 0; } .ac-wrapper.detailpagina .bijzonderheden .button { display: inline-block; } /* RISK BUTTON */ .ac-wrapper.detailpagina #voertuigdetails ol li.verzekeringbutton, .ac-wrapper.detailpagina #voertuigdetails ol li.financieringsbutton { /* display: block; */ /* width: 100%; */ /* text-align: center; */ padding-top: 18px; vertical-align: middle; } .ac-wrapper.detailpagina #voertuigdetails a#premiumVerzekeringsButton.button { font-size: 0.8em !important; font-weight: normal!important; padding: 6px 14px; display: inline-block; } .ac-wrapper.detailpagina #voertuigdetails a#premiumVerzekeringsButton.button:hover { padding: 6px 20px; } /* PRIVATE LEASE CALCULATOR */ .ACVDP-privatelease { page-break-inside: avoid; display: block; width: 360px; max-width: 100%; border: 1px solid var(--ACsecondary)!important; background: #ffffff!important; margin: 10px 0px 20px 0px!important; padding: 10px 20px!important; } @media screen and (min-width: 701px) { .ACVDP-privatelease { float: right; margin-top: 0px!important; margin-left: 20px!important; } } .ACVDP-privatelease .LeaseBedragTitel p { margin-bottom: 0!important; font-weight: bold; font-size: 1.2em!important; } .ACVDP-privatelease .LeaseBedragTentoonsteller p { font-size: 1.4em!important; font-weight: bold!important; display: inline-block!important; padding-right: 20px!important; } .ACVDP-privatelease .LeaseBedragTentoonsteller p#LeaseBedrag { color: var(--ACprimary)!important; } .ACVDP-privatelease .LeaseBedragTentoonsteller p#LeaseBedrag::after { content: ',-'; } .ACVDP-privatelease .PrivateLeaseKM, .ACVDP-privatelease .PrivateLeaseMaanden { display: inline-block; width: 48%; } .ACVDP-privatelease .PrivateLeaseKM p#KilometerRangeOutput::after { content:'km'; padding-left: 0.4em; } .ACVDP-privatelease .PrivateLeaseMaanden p#MaandenRangeOutput::after { content:'mnd'; padding-left: 0.4em; } .ACVDP-privatelease label { font-size: 1em!important; display: block!important; padding: 0.5em 0 !important; margin-bottom: 0.2em!important; } .ACVDP-privatelease label.ACctalink { -webkit-transition: all 0.35s!important; -o-transition: all 0.35s!important; transition: all 0.35s!important; -webkit-border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px; background: rgba(255,255,255,0.45); margin: 0 0 5px 0!important; text-decoration: none; cursor: pointer; color: #000000!important; border: 1px solid #333333!important; border: 1px solid var(--ACsecondary)!important; font-size: 1.1em !important; font-weight: normal!important; padding: 6px 14px!important; display: inline-block; } .ACVDP-privatelease label.ACctalink:hover { color: #333333!important; background: rgba(255,255,255,0)!important; -webkit-border-radius: 40px 40px 40px 40px; border-radius: 40px 40px 40px 40px; padding: 6px 20px!important; } @media all and (min-width: 1024px) and (max-width: 1160px) { .ACVDP-privatelease .LeaseBedragTentoonsteller { flex-flow: column; } .ACVDP-privatelease .LeaseBedragTentoonsteller p { margin-bottom: 0!important; } .ACVDP-privatelease label { font-size: 0.85em !important; } } @media all and (max-width: 480px) { .ACVDP-privatelease .LeaseBedragTitel p.VDPtitle { font-size: 1.3em!important; margin-bottom: 1em!important; } .ACVDP-privatelease .PrivateLeaseKM, .ACVDP-privatelease .PrivateLeaseMaanden { display: block!important; width: 100%!important; } .ACVDP-privatelease .LeaseBedragTentoonsteller { flex-flow: column; } .ACVDP-privatelease .LeaseBedragTentoonsteller p { margin-bottom: 0!important; } } /* PRIVATE LEASE SLIDERS */ .ACVDP-privatelease input[type='range'] { -webkit-appearance: none; appearance: none; position: relative; background: transparent; cursor: pointer; width: 90%; z-index:2; } @media all and (max-width: 480px) { .ACVDP-privatelease input[type='range'] { width: 100%; } } .ACVDP-privatelease input[type='range']::-webkit-slider-runnable-track { background: #efefef; -webkit-box-shadow:inset 2px 4px 10px 0 #cccccc; box-shadow:inset 2px 4px 10px 0 #cccccc; height: 1rem; border-radius: 10px; border: 1px solid var(--ACprimary); } .ACVDP-privatelease input[type='range']::-moz-range-track { background: #efefef; -webkit-box-shadow:inset 2px 4px 10px 0 #cccccc; box-shadow:inset 2px 4px 10px 0 #cccccc; height: 1rem; border-radius: 10px; border: 1px solid var(--ACprimary); } .ACVDP-privatelease input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; background-color: var(--ACprimary); height: 1rem; width: 1rem; margin-top: 0px; border-radius: 10px; } .ACVDP-privatelease input[type="range"]::-moz-range-thumb { background-color: var(--ACprimary); height: 1rem; width: 1rem; border-radius: 10px; border: none; } .ACVDP-privatelease .PrivateLeaseKM datalist, .ACVDP-privatelease .PrivateLeaseMaanden datalist { display: flex; background: transparent; width: calc(90% + 2px); margin-top: -2px!important; margin-left: -1px!important; pointer-events: none; position: relative; z-index:1; } @media all and (max-width: 480px) { .ACVDP-privatelease .PrivateLeaseKM datalist, .ACVDP-privatelease .PrivateLeaseMaanden datalist { width: calc(100% + 2px); } } /* ticks */ .ACVDP-privatelease .PrivateLeaseKM datalist option, .ACVDP-privatelease .PrivateLeaseMaanden datalist option { display: inline-block!important; width: calc((100% - 14px) / (var(--lease-list-length) - 1)); position: relative; } .ACVDP-privatelease .PrivateLeaseKM datalist option::after, .ACVDP-privatelease .PrivateLeaseMaanden datalist option::after { display: block; position: absolute; background: #cccccc; width: 1px; height:4px; left: 50%; content: ''; } .ACVDP-privatelease .PrivateLeaseKM datalist option:first-child, .ACVDP-privatelease .PrivateLeaseMaanden datalist option:first-child, .ACVDP-privatelease .PrivateLeaseKM datalist option:last-child, .ACVDP-privatelease .PrivateLeaseMaanden datalist option:last-child { width: calc((100% - 14px) / ((var(--lease-list-length) - 1) * 2) + 8px); } /*************************************** Foto overlay styles ***************************************/ .ac-wrapper.detailpagina .imgoverlay, body.fullscreen .imgoverlay { background: rgba(0,0,0,0.60); display: inline-block; padding: 5px 10px!important; margin: 5px 10px!important; min-width: 30%; max-width: 65%; max-height: 100%; box-sizing: border-box; border: 1px solid #000000; bottom: 10px;left: 0; position: absolute; text-align: left; color: #ffffff; text-shadow: 1px 1px 0px #000000; } /* .ac-wrapper.detailpagina .imgoverlay { left: 50%; -ms-transform: translate(-50%,0%); -webkit-transform: translate(-50%,0%); transform: translate(-50%,0%); } */ .ac-wrapper.detailpagina .imgoverlay li, #sitecontainer .ac-wrapper.detailpagina .imgoverlay li, body.fullscreen .imgoverlay li { color: #ffffff!important; font-size: 12px!important; text-shadow: 1px 1px 0px #000000; } body.fullscreen .ac-wrapper .merkmodel, body.fullscreen .ac-wrapper.dark .merkmodel { background: rgba(0,0,0,0.55); position: absolute; border: none;display: block; z-index: 19999999!important; -ms-transform: translate(-50%,0%); -webkit-transform: translate(-50%,0%); transform: translate(-50%,0%); width: 88%!important; box-sizing: border-box!important; margin: 15px 0px!important; padding: 10px 20px!important; text-shadow: 1px 1px 2px #000000; top: 0; left: 50%; display: none; } body.fullscreen .ac-wrapper .merkmodel .secondarycolor { color: #ffffff; } .ac-wrapper.detailpagina .imgoverlay *, body.fullscreen .imgoverlay * { color: #ffffff; text-shadow: 1px 1px 0px #000000; } .ac-wrapper.detailpagina .imgoverlay ul, body.fullscreen .imgoverlay ul { -moz-column-count: 3!important; -moz-column-gap: 10px!important; -webkit-column-count: 3!important; -webkit-column-gap: 10px!important; column-count: 3!important; column-gap: 10px!important; font-size: 0.8em; } @-webkit-keyframes fadeInUpBig { 0% { -webkit-transform: translate3d(0, 2000px, 0); opacity: 0; transform: translate3d(0, 2000px, 0) } to { -webkit-transform: translateZ(0); opacity: 1; transform: translateZ(0) } } @keyframes fadeInUpBig { 0% { -webkit-transform: translate3d(0, 2000px, 0); opacity: 0; transform: translate3d(0, 2000px, 0) } to { -webkit-transform: translateZ(0); opacity: 1; transform: translateZ(0) } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } .animated { -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both; animation-duration: 1s; animation-fill-mode: both } /*************************************** Interesseform ***************************************/ .ac-wrapper.detailpagina .interesseslide, body.fullscreen .interesseslide { background: rgba(255,255,255,0.85); width: 100%; height: 100vh; display: block; text-align: center; } .ac-wrapper.detailpagina a.interestlink, body.fullscreen .interesseslide a.interestlink { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /*body.fullscreen .interessefoto { display: none!important; }*/ .ac-wrapper.detailpagina #interesseform, .ac-wrapper.detailpagina #fullinteresseform, .ac-wrapper.detailpagina #leaseinteresseform, body.fullscreen #interesseform, body.fullscreen #fullinteresseform, body.fullscreen #leaseinteresseform { width: 100%; height: 100%; background: rgba(255,255,255,0.85); position: fixed; top: 0; left: 0; text-align: center; z-index: 500000000!important; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .ac-wrapper.detailpagina #interesseform.hidden, .ac-wrapper.detailpagina #fullinteresseform.hidden, .ac-wrapper.detailpagina #leaseinteresseform.hidden { visibility: hidden; opacity: 0; filter: alpha(opacity=0); } .ac-wrapper.detailpagina #interesseform.visible, .ac-wrapper.detailpagina #fullinteresseform.visible, .ac-wrapper.detailpagina #leaseinteresseform.visible { visibility: visible; opacity: 1; filter: alpha(opacity=100); } .ac-wrapper.detailpagina #interesseformcontent, .ac-wrapper.detailpagina .interesseformcontent, .ac-wrapper.detailpagina #leaseinteresseformcontent, .ac-wrapper.detailpagina .leaseinteresseformcontent { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background: #ffffff; border: 2px solid #e3e3e3; padding: 10px; text-align: center; -webkit-box-shadow: 0 0 12px 0 #ffffff; box-shadow: 0 0 12px 0 #ffffff; max-height: 60%; white-space: nowrap; } .ac-wrapper.detailpagina #interesseformcontent , .ac-wrapper.detailpagina .interesseformcontent, .ac-wrapper.detailpagina #leaseinteresseformcontent , .ac-wrapper.detailpagina .leaseinteresseformcontent { height: 56%; width: 500px; max-width: 90%; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent { height: 56%; width: 500px; max-width: 90%;} .ac-wrapper.detailpagina #interesseformcontent .formwrap, .ac-wrapper.detailpagina .interesseformcontent .formwrap, .ac-wrapper.detailpagina #leaseinteresseformcontent .formwrap, .ac-wrapper.detailpagina .leaseinteresseformcontent .formwrap, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent .formwrap, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent .formwrap .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent .formwrap, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent .formwrap { -webkit-overflow-scrolling: touch; /*overflow-x: hidden;*/ /*overflow-y: auto;*/ display: block; height: 100%; padding: 0px; } .ac-wrapper.detailpagina #interesseformcontent h4, .ac-wrapper.detailpagina .interesseformcontent h4, .ac-wrapper.detailpagina #leaseinteresseformcontent h4, .ac-wrapper.detailpagina .leaseinteresseformcontent h4 { font-weight: 600; margin-bottom: 0.8em; text-transform: uppercase; text-align: center; } .ac-wrapper.detailpagina #interesseformcontent p, .ac-wrapper.detailpagina .interesseformcontent p, .ac-wrapper.detailpagina #leaseinteresseformcontent p, .ac-wrapper.detailpagina .leaseinteresseformcontent p { padding-top: 0.8em; } .ac-wrapper.detailpagina #interesseformcontent a.closeform, .ac-wrapper.detailpagina .interesseformcontent a.closeform, .ac-wrapper.detailpagina #interesseformcontent a.closefullform, .ac-wrapper.detailpagina .interesseformcontent a.closefullform, .ac-wrapper.detailpagina #leaseinteresseformcontent a.closeleaseform, .ac-wrapper.detailpagina .leaseinteresseformcontent a.closeleaseform, .ac-wrapper.detailpagina #interesseformcontent a.closeform:hover, .ac-wrapper.detailpagina .interesseformcontent a.closeform:hover, .ac-wrapper.detailpagina #interesseformcontent a.closefullform:hover, .ac-wrapper.detailpagina .interesseformcontent a.closefullform:hover, .ac-wrapper.detailpagina #leaseinteresseformcontent a.closeleaseform:hover, .ac-wrapper.detailpagina .leaseinteresseformcontent a.closeleaseform:hover { display: block; width: 31px; height: 31px; cursor: pointer; float: right; position: relative; margin-right: -25px; margin-top: -25px; border: 2px solid #ffffff; background: #000000; color: #FFFFFF; font-weight: bold!important; line-height: 26px; font-size: 26px!important; text-decoration: none; text-align: center; -webkit-border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ac-wrapper.detailpagina #interesseformcontent input[type=text], .ac-wrapper.detailpagina #interesseformcontent input[type=tel], .ac-wrapper.detailpagina #interesseformcontent input[type=email], .ac-wrapper.detailpagina #interesseformcontent select, .ac-wrapper.detailpagina #interesseformcontent textarea, .ac-wrapper.detailpagina .interesseformcontent input[type=text], .ac-wrapper.detailpagina .interesseformcontent input[type=tel], .ac-wrapper.detailpagina .interesseformcontent input[type=email], .ac-wrapper.detailpagina .interesseformcontent select, .ac-wrapper.detailpagina .interesseformcontent textarea, .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=text], .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=tel], .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=email], .ac-wrapper.detailpagina #leaseinteresseformcontent select, .ac-wrapper.detailpagina #leaseinteresseformcontent textarea, .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=text], .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=tel], .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=email], .ac-wrapper.detailpagina .leaseinteresseformcontent select, .ac-wrapper.detailpagina .leaseinteresseformcontent textarea { width: 100%; padding: 8px 12px; border: 1px solid #cccccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; box-sizing: border-box; } .ac-wrapper.detailpagina #interesseformcontent input[type=text]:focus, .ac-wrapper.detailpagina #interesseformcontent input[type=tel]:focus, .ac-wrapper.detailpagina #interesseformcontent input[type=email]:focus, .ac-wrapper.detailpagina #interesseformcontent select:focus, .ac-wrapper.detailpagina #interesseformcontent textarea:focus, .ac-wrapper.detailpagina .interesseformcontent input[type=text]:focus, .ac-wrapper.detailpagina .interesseformcontent input[type=tel]:focus, .ac-wrapper.detailpagina .interesseformcontent input[type=email]:focus, .ac-wrapper.detailpagina .interesseformcontent select:focus, .ac-wrapper.detailpagina .interesseformcontent textarea:focus, .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=text]:focus, .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=tel]:focus, .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=email]:focus, .ac-wrapper.detailpagina #leaseinteresseformcontent select:focus, .ac-wrapper.detailpagina #leaseinteresseformcontent textarea:focus, .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=text]:focus, .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=tel]:focus, .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=email]:focus, .ac-wrapper.detailpagina .leaseinteresseformcontent select:focus, .ac-wrapper.detailpagina .leaseinteresseformcontent textarea:focus { outline: none; border: 1px solid #333333; } .ac-wrapper.detailpagina #interesseformcontent input[type=submit], .ac-wrapper.detailpagina .interesseformcontent input[type=submit], .ac-wrapper.detailpagina #leaseinteresseformcontent input[type=submit], .ac-wrapper.detailpagina .leaseinteresseformcontent input[type=submit] { border: none; font-size: 0.9em; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#naam, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#telefoon, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#merk, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#kenteken, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#bouwjaar, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#kmstand, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#naam, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#telefoon, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#merk, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#kenteken, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#bouwjaar, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#kmstand, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#naam, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#telefoon, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#merk, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#kenteken, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#bouwjaar, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#kmstand, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#naam, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#telefoon, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#merk, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#kenteken, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#bouwjaar, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#kmstand { width: 48.5%; margin-right: 2%; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#telefoon, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#kenteken, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#kmstand, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#telefoon, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#kenteken, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#kmstand, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#telefoon, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#kenteken, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#kmstand, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#telefoon, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#kenteken, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#kmstand { margin-right: 0; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#postcode, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#postcode, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#postcode, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#postcode { width: 32%; margin-right: 2%; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#woonplaats, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#woonplaats, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#woonplaats, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#woonplaats { width: 65%; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent textarea, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent textarea, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent textarea, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent textarea { height: 100px; } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent .checklabel, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent .checklabel, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent .checklabel, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent .checklabel { display: inline-block; font-size: 0.9em!important; margin-top: -3px; } .ac-wrapper.detailpagina #interesseformcontent iframe, .ac-wrapper.detailpagina .interesseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseformcontent iframe, .ac-wrapper.detailpagina .leaseinteresseformcontent iframe { border: 0px; width: 100%; overflow: hidden;} .ac-wrapper.detailpagina #interesseformcontent iframe, .ac-wrapper.detailpagina .interesseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseformcontent iframe, .ac-wrapper.detailpagina .leaseinteresseformcontent iframe { height: 280px!important; max-height: 280px!important } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent iframe, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent iframe { height: 870px!important; max-height: 870px!important; } .ac-wrapper.detailpagina #fullinteresseform.vernieuwd .interesseformcontent iframe { height: 400px!important; max-height: 400px!important; margin-bottom: 0 !important; } /*************************************** fotorama overrides ***************************************/ /*.ac-wrapper.detailpagina .fotorama { background: rgba(0,0,0,0.04); }*/ .ac-wrapper.detailpagina .fotorama .fotorama__nav-wrap * { box-sizing: content-box!important; } .ac-wrapper.detailpagina .fotorama__thumb-border { -webkit-box-shadow:inset 0 0 4px 2px #666666; box-shadow:inset 0 0 4px 2px #666666; } /* .ac-wrapper.detailpagina .fotorama img {max-width: 100%!important; min-height: 100%!important;} #inhoud .ac-wrapper.detailpagina .fotorama img {max-width: 100%!important; min-height: 100%!important;} */ .ac-wrapper.detailpagina .fotorama .fotorama__nav-wrap img {max-width: none!important;} #inhoud .ac-wrapper.detailpagina .fotorama .fotorama__nav-wrap img {max-width: none!important;} .fotorama--fullscreen .fotorama__nav { /* display: none!important*/ } /* reset main image size & position */ .fotorama__nav__shaft > div:last-child { background: url('../../images/icons/info.png') 50% 50% no-repeat; background-size: contain; } .fotorama__nav__shaft > div:last-child .fotorama__thumb { background-color: white; background-color: rgba(255,255,255,.2); } .fotorama__nav__shaft > div:last-child img { position: relative; z-index: -1; opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%);} /*.ac-wrapper.detailpagina .fotorama .fotorama__stage__frame img { width: 100%!important; height: auto!important; left: 0!important; bottom: 0!important; top: auto!important; }*/ /* full width fotorama on mobile */ @media screen and (max-width: 480px) { .ac-wrapper.detailpagina .fotorama { position: relative!important; padding: 0!important; width: 100vw!important; left: 50%!important; -webkit-transform: translate(-50%, 0%)!important; -ms-transform: translate(-50%, 0%)!important; transform: translate(-50%, 0%)!important; } /* .ac-wrapper.detailpagina .fotorama .fotorama__stage__frame img { width: 100vw!important; height: auto!important; left: 0!important; bottom: 0!important; top: auto!important; } */ } /*************************************** ACCORDION FUNCTIONS ***************************************/ .ac-wrapper.detailpagina article.tab { position: relative; margin-bottom: 1px; width: 100%; overflow: hidden; } .ac-wrapper.detailpagina article input { position: absolute; opacity: 0; z-index: -1; } .ac-wrapper.detailpagina article label { position: relative; display: block; font-weight: 600; line-height: 1.5em; cursor: pointer; padding-left: 2em; margin-bottom: -2px; } .ac-wrapper.detailpagina article .tab-content { max-height: 0; margin-top: 0em; overflow: hidden; background: transparent; -webkit-transition: max-height 1s, margin-top 0.5s; -o-transition: max-height 1s, margin-top 0.5s; transition: max-height 1s, margin-top 0.5s; } .ac-wrapper.detailpagina article .tab-content .row { margin-bottom: 0; } .ac-wrapper.detailpagina article .tab-content .row:nth-of-type(2) .inner { padding-top: 0!important; } /* :checked */ .ac-wrapper.detailpagina article input:checked ~ .tab-content { /*max-height: 145em;*/ max-height: 999em; margin-top: 0.5em; } /* Icon */ .ac-wrapper.detailpagina article label::after { position: absolute; /*right: 0;*/ /*top: 2px;*/ left: 0; top: 0; display: block; /*width:1em;*/ width:0.5em; height: 0.6em; line-height: 0.7em; text-align: center; font-size: 2em!important; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .ac-wrapper.detailpagina article input[type=checkbox] + label::after { content: "+"; } .ac-wrapper.detailpagina article input[type=radio] + label::after { content: "\25BC"; } .ac-wrapper.detailpagina article input[type=checkbox]:checked + label::after { content: "+"; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);} .ac-wrapper.detailpagina article input[type=radio]:checked + label::after { -ms-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .ac-wrapper.detailpagina article h5.articleheading {display: none!important; } .ac-wrapper.detailpagina section h6.sectionheading {display: none!important; } /* = MEDIAQUERIES -------------------------------------------------------------- */ @media screen and (orientation: landscape) { .ac-wrapper.detailpagina .fotorama .fotorama__stage__frame img { /*width: auto!important; height: 100%!important; */ left: 50%!important; top: 50%!important; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media screen and (orientation: portrait) { .ac-wrapper.detailpagina .fotorama .fotorama__stage__frame img { /*width: 100%!important; height: auto!important; */ left: 50%!important; top: 50%!important; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /* Large */ @media screen and (min-width: 1025px) { .ac-wrapper.detailpagina .fotorama .fotorama__stage__frame img { /*width: 100%!important; height: auto!important; */ left: 50%!important; top: 50%!important; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ac-wrapper.detailpagina .interesseformcontent{ min-height: 550px; } } /* Basic */ @media screen and (max-width: 1024px) { .ac-wrapper.detailpagina .merkmodel .float.left { max-width: 68%; } .ac-wrapper.detailpagina .merkmodel .float.right { max-width: 30%; } .ac-wrapper.detailpagina #fullinteresseform.vernieuwd .interesseformcontent { top: 20%; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); height: 70%; max-height: 70%; } } /* Basic small */ @media screen and (max-width: 900px) { .ac-wrapper.detailpagina .merkmodel h2{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .ac-wrapper.detailpagina .merkmodel h2 span { display: block; padding-left: 0;} } /* Tablet */ @media screen and (max-width: 800px) { .topcta { display: block; width: 100%; padding-right: 0; float: none; text-align: center!important; } .ac-wrapper.detailpagina section .row.columns { -moz-columns: 2; -webkit-columns: 2; columns: 2; -moz-column-gap: 1.5rem; -webkit-column-gap: 1.5rem; column-gap: 1.5rem; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li a { font-size: 0.9em!important; padding-left: 34px; padding-right: 8px; } .ac-wrapper.detailpagina .imgoverlay, body.fullscreen .imgoverlay { max-width: 98%; zoom: 0.95; } body.fullscreen .ac-wrapper .merkmodel, body.fullscreen .ac-wrapper.dark .merkmodel { display: none; } .ac-wrapper.detailpagina .bedrijfsgegevens .block { width: 48%; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li { width: 16%; padding: 3px 2px 8px 1px!important; overflow: hidden; } .ac-wrapper.detailpagina iframe.autofinancier_iframe{ height: 1650px !important; } } /* Small Tablet */ @media screen and (max-width: 700px) { .ac-wrapper .block { width: 49%; } .ac-wrapper .third { width: 49%; } .ac-wrapper .twothird { width: 49% ;} .ac-wrapper .fourth { width: 29%; } .ac-wrapper .threefourth { width: 69%; } .ac-wrapper .full { width: 99%; } .ac-wrapper.detailpagina #voertuigdetails ol li, .ac-wrapper.detailpagina section ol li { width: 48.6%; } } /* Small Tablet */ @media screen and (max-width: 665px) { .ac-wrapper.detailpagina .merkmodel .float.left { width: 74%; } .ac-wrapper.detailpagina .merkmodel .float.right { width: 23%; margin-left: 0; white-space: nowrap; } .ac-wrapper.detailpagina .merkmodel h1 { font-size: 2.0em!important; line-height: 1.2em; margin-bottom: 0.2em; } .ac-wrapper.detailpagina .merkmodel h2 { font-size: 0.9em!important; } .ac-wrapper.detailpagina .merkmodel h3 { font-size: 1.6em!important; padding-top: 0.4em;} .ac-wrapper.detailpagina .merkmodel h4 { font-size: 0.7em!important; } .ac-wrapper.detailpagina .imgoverlay, body.fullscreen .imgoverlay { display: none; } .ac-wrapper.detailpagina .bijzonderheden .button {font-size: 0.9em!important; } } @media screen and (max-width: 600px) { .ac-wrapper.detailpagina .bedrijfsgegevens .block { width: 99%; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li { width: 32%; } } @media screen and (max-width: 500px) { .ac-wrapper.detailpagina #interesseformcontent, .ac-wrapper.detailpagina .interesseformcontent, .ac-wrapper.detailpagina #leaseinteresseformcontent, .ac-wrapper.detailpagina .leaseinteresseformcontent { white-space: normal; width: 85%;} } /* Mobile */ @media screen and (max-width: 480px) { .ac-wrapper .block { width: 99%; } .ac-wrapper .block.third { width: 99%; } .ac-wrapper .block.twothird { width: 99% ;} .ac-wrapper .block.fourth { width: 99%; } .ac-wrapper .block.threefourth { width: 99%; } .ac-wrapper .block.full { width: 99%; } .ac-wrapper.detailpagina .bedrijfsgegevens .block { width: 99%; } .ac-wrapper.detailpagina .merkmodel .float.left { width: 100%; max-width: 100%; float: none; text-align: center; } .ac-wrapper.detailpagina .merkmodel .float.right { width: 100%; max-width: 100%; margin-left: 0; white-space: nowrap; float: none; text-align: center; } .ac-wrapper.detailpagina .merkmodel h2{ white-space: normal; overflow: visible; text-overflow: clip; padding: 0% 2%; } .ac-wrapper.detailpagina .merkmodel h4 { font-size: 0.7em; float: right; -ms-transform: translate(0%,-150%); -webkit-transform: translate(0%,-150%); transform: translate(0%,-150%); margin-bottom: -200%!important; } .ac-wrapper .block, .ac-wrapper .mainblock { padding: 0.4em 3%; } .ac-wrapper .block.merkmodel { padding: 0.4em 1.5%; } .ac-wrapper.detailpagina #voertuigdetails ol li span.label, .ac-wrapper.detailpagina section ol li span.label { } .ac-wrapper.detailpagina #voertuigdetails ol li, .ac-wrapper.detailpagina section ol li { padding-left: 10px; padding-right: 10px; width: 48.6%; font-size: 1.1em!important; line-height: 1.3em; } .ac-wrapper.detailpagina #voertuigdetails li a.consulease, .ac-wrapper.detailpagina #voertuigdetails li a.dtclink, .ac-wrapper.detailpagina #voertuigdetails li a.findio, .ac-wrapper.detailpagina #voertuigdetails li a.royaallease, .ac-wrapper.detailpagina #voertuigdetails li a.overig { text-align: center!important; font-size: 11px!important; line-height: 14px; padding: 0px 10px; } .ac-wrapper.detailpagina .financiering section ol li { width: 100%; } .ac-wrapper.detailpagina #voertuigdetails ol li.verzekeringbutton { display: block; width: 100%; text-align: center; } .ac-wrapper.detailpagina #voertuigdetails ol li:nth-child(4) { width: 100%; } .ac-wrapper.detailpagina .techniekverbruik section ol li span.label, .ac-wrapper.detailpagina .elektrischespecificaties section ol li span.label { font-size: 0.7em!important; } .ac-wrapper.detailpagina section .row.columns { -moz-columns: 1; -webkit-columns: 1; columns: 1; -moz-column-gap: 0rem; -webkit-column-gap: 0rem; column-gap: 0rem; } .ac-wrapper.detailpagina section .row.columns li { padding-left: 10px; padding-right: 10px; width: 99.9%;} .ac-wrapper.detailpagina section.prestaties ol li { padding-left: 10px; padding-right: 10px; width: 48.6%;} #content .ac-wrapper.detailpagina img.energielabel { max-height: 20px;} #content .ac-wrapper.detailpagina img.nap, #content .ac-wrapper.detailpagina img.energielabel, #content .ac-wrapper.detailpagina p.garantielabels img {width: auto!important;} .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#naam, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#telefoon, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#merk, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#kenteken, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#bouwjaar, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#kmstand, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#postcode, .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent input#woonplaats .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#naam, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#telefoon, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#merk, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#kenteken, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#bouwjaar, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#kmstand, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#postcode, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent input#woonplaats, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#naam, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#telefoon, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#merk, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#kenteken, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#bouwjaar, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#kmstand, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#postcode, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent input#woonplaats .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#naam, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#telefoon, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#merk, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#kenteken, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#bouwjaar, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#kmstand, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#postcode, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent input#woonplaats { width: 100%; margin-right: 0; } .ac-wrapper.detailpagina #interesseformcontent iframe, .ac-wrapper.detailpagina .interesseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseformcontent iframe, .ac-wrapper.detailpagina .leaseinteresseformcontent iframe { height: 280px!important; max-height: 280px!important } .ac-wrapper.detailpagina #fullinteresseform #interesseformcontent iframe, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseform #leaseinteresseformcontent iframe, .ac-wrapper.detailpagina #leaseinteresseform .leaseinteresseformcontent iframe { height: 950px!important; max-height: 950px!important; } .ac-wrapper.detailpagina #fullinteresseform.vernieuwd .interesseformcontent{ top: 15%; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); height: 80%; max-height: 80%; } .ac-wrapper.detailpagina .nawdetails ul { padding-left: 0;} .ac-wrapper.detailpagina .nawdetails ul.sharelinks li { margin-left: 0!important; width: 48%;padding: 3px 4px 8px 4px!important; } .ac-wrapper.detailpagina .nawdetails ul.sharelinks li a { padding-left: 20px; padding-right: 4px; } .topcta a { width: 100% } .topcta a { width: 46%; font-size: 85%!important; padding: 5px 10px!important; line-height: 1.6em; } .ac-wrapper.detailpagina #voertuigdetails li.financieringsbutton { width: 100%; } .ac-wrapper.detailpagina #voertuigdetails li a.financiering-button { display: block; } .ac-wrapper.detailpagina iframe.autofinancier_iframe{ height: 1700px !important; } } /* CONFERENCE BUTTONS -------------------------------------------------------------- */ #detailpaginawrapper .ACVDPcta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; width: 100%; } #detailpaginawrapper a.ACctalink, #detailpaginawrapper label.ACctalink { margin: 1em calc(20px / 2); color: #ffffff; padding: 4px 15px; font-size: 1em; text-align: center; white-space: nowrap; -webkit-transition: background 0.5s ease; -o-transition: background 0.5s ease; transition: background 0.5s ease; display: inline-block!important; width: auto; } #detailpaginawrapper a.ACctalink:hover, #detailpaginawrapper label.ACctalink:hover { background: #aaaaaa; cursor: pointer; } #detailpaginawrapper a.ACctalink, #detailpaginawrapper label.ACctalink { color: #ffffff; } #detailpaginawrapper .ACVDPcta a, #detailpaginawrapper .ACconferencelinks a.ACctalink, #detailpaginawrapper .ACVDPcta label.ACctalink { margin: calc(20px * 0.2) calc(20px / 2); -webkit-box-flex: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 30%; /* IE */ -ms-flex: 0 1 calc(50% - 20px); flex: 0 1 calc(50% - 20px); } /* conference call links */ #detailpaginawrapper .cta-transparent { /*hide older versions */ color: transparent!important; display: block; } #detailpaginawrapper .ACconferencelinks { display: inherit; text-align: right; vertical-align: top; margin-right: 2px; font-size: 0; padding: 0 0.5%; } @media screen and (max-width: 800px) { #detailpaginawrapper .ACconferencelinks { text-align: center; } } #detailpaginawrapper .ACconferencelinks a { margin: 0 0 10px 5px; -webkit-transition: background 0.5s ease; -o-transition: background 0.5s ease; transition: background 0.5s ease; display: inline-block!important; padding: 5.5px!important; } #detailpaginawrapper .ACconferencelinks a span { display: block; vertical-align: middle; height: 30px; width: 30px; text-indent: -9000px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; filter: invert(100%); } #detailpaginawrapper a.whatsapp span { background-image: url('../../images/icons/social/whatsapp_trans.png'); } #detailpaginawrapper a.zoomchat span { background-image: url('../../images/icons/social/zoomchat.png'); } #detailpaginawrapper a.msteams span { background-image: url('../../images/icons/social/msteams.png'); } #detailpaginawrapper a.skype span { background-image: url('../../images/icons/social/skype.png'); } #detailpaginawrapper a.whatsapp { background-color: #53be18; } #detailpaginawrapper a.zoomchat { background-color: #2D8CFF; } #detailpaginawrapper a.msteams { background-color: #6264A7; } #detailpaginawrapper a.skype { background-color: #12A5F4; } #detailpaginawrapper a.whatsapp:hover, #detailpaginawrapper a.zoomchat:hover, #detailpaginawrapper a.msteams:hover, #detailpaginawrapper a.skype:hover { background-color: #aaaaaa; } #detailpaginawrapper .ACVDPcta a span { display: inline-block; vertical-align: middle; height: 26px; width: 26px; text-indent: -9000px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; filter: invert(100%); margin-top: -6px; margin-bottom: -2px; margin-right: 4px; } #detailpaginawrapper .ACVDPcta a.ACctalink, #detailpaginawrapper .ACVDPcta a.ACctalink, #detailpaginawrapper .ACVDPcta label.ACctalink { flex-grow: 1; flex-shrink: 1; flex-basis: 15%; flex: 0 1 calc(25% - 20px); } @media screen and (max-width: 480px) { #detailpaginawrapper .ACconferencelinks { text-align: center!important;} #detailpaginawrapper .ACconferencelinks a { display: inline-block; margin: 0 2px 5px 2px; width: auto!important; height: auto!important; float: none!important; } } /* TOPLINK --------------------------------------------- */ .occtoplink { position: fixed; z-index: 1000; bottom: 10px; right: 20px; opacity: 0.9; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .occtoplink:hover { bottom: 15px; opacity: 1; } a#occtoplink { cursor: pointer; display: inline-block; padding: 10px 14px 10px 14px; background: rgba(255,255,255,0.5); -webkit-box-shadow: 0 0 8px 0 #cccccc; box-shadow: 0 0 8px 0 #cccccc; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; } .triangle { position: relative; text-align: left; display: block; width: 0px; height: 0px; overflow: hidden; border-style: solid; border-width: 0 8px 14px 8px; border-color: transparent transparent #333333 transparent } /***** DETAILPAGINA LOADER *****/ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; background: white; opacity: 1.0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; display: none!important; /* disable loader overlay */ } #occasionlijstwrapper .occasionresult #loader-wrapper{ display: block!important; position: absolute; background-color: rgba(0, 0, 0, 0.1); } #loader { display: block; position: relative; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; border: 3px solid transparent; border-top-color: #cccccc; -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #333333; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #666666; -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222; z-index: 1000; } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } /* Loaded styles */ .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-100%); /* IE 9 */ transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(100%); /* IE 9 */ transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-100%); /* IE 9 */ transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.3s 1s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s 1s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } /********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********/ /********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********/ /********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********/ body.dark { background: rgba(0,0,0,0.99); } .ac-wrapper.detailpagina.dark { color: #efefef; } .primarycolor, .ac-wrapper.detailpagina.dark .primarycolor { color: #333333; } .secondarycolor, .ac-wrapper.detailpagina.dark .secondarycolor { color: #ffffff; } .ac-wrapper.detailpagina.dark .block, .ac-wrapper.detailpagina.dark .mainblock { border: 1px solid #111111; background: rgba(255,255,255,0.03); } .ac-wrapper.detailpagina.dark .afleverpakketten .tab-content .block { background: #000000; } .ac-wrapper.detailpagina.dark .altvoertuig { background: #000000; } .ac-wrapper.detailpagina.dark .altvoertuig .altfotowrapper { border: 1px solid #000000; } .ac-wrapper.detailpagina.dark hr { border-bottom: 1px solid rgba(255,255,255,0.05); } .ac-wrapper.detailpagina.dark .interesseslide { background: rgba(0,0,0,0.75); } .ac-wrapper.detailpagina.dark a.interestlink, .ac-wrapper.detailpagina.dark a.fullinterestlink { color: #efefef; border: 1px solid #ffffff; background: rgba(0,0,0,0.25); } .ac-wrapper.detailpagina.dark a.interestlink:hover, .ac-wrapper.detailpagina.dark a.fullinterestlink:hover { color: #333333; background: rgba(0,0,0,0.85); } .ac-wrapper.detailpagina.dark .nawdetails a.whatsapplink, .ac-wrapper.detailpagina.dark .nawdetails a.belonslink, .ac-wrapper.detailpagina.dark .nawdetails a.printlink { -webkit-box-shadow: 0 0 4px 0 #000000; box-shadow: 0 0 4px 0 #000000; } .ac-wrapper.detailpagina.dark .button.dark { color: #000000; background: #efefef; } .ac-wrapper.detailpagina.dark .button.dark:hover { color: #000000; background: #efefef; } .ac-wrapper.detailpagina.dark #interesseform , .ac-wrapper.detailpagina.dark #fullinteresseform { background: rgba(0,0,0,0.75); } .ac-wrapper.detailpagina.dark #interesseformcontent, .ac-wrapper.detailpagina.dark .interesseformcontent { background: black; border: 1px solid white; border: 2px solid #222222; -webkit-box-shadow: 0 0 12px 0 #000000; box-shadow: 0 0 12px 0 #000000; } .ac-wrapper.detailpagina.dark #interesseformcontent input[type=text], .ac-wrapper.detailpagina.dark #interesseformcontent input[type=tel], .ac-wrapper.detailpagina.dark #interesseformcontent input[type=email], .ac-wrapper.detailpagina.dark #interesseformcontent select, .ac-wrapper.detailpagina.dark #interesseformcontent textarea, .ac-wrapper.detailpagina.dark .interesseformcontent input[type=text], .ac-wrapper.detailpagina.dark .interesseformcontent input[type=tel], .ac-wrapper.detailpagina.dark .interesseformcontent input[type=email], .ac-wrapper.detailpagina.dark .interesseformcontent select, .ac-wrapper.detailpagina.dark .interesseformcontent textarea { border: 1px solid #666666; background:#111111; color: #ffffff; } .ac-wrapper.detailpagina.dark #interesseformcontent input[type=text]:focus, .ac-wrapper.detailpagina.dark #interesseformcontent input[type=tel]:focus, .ac-wrapper.detailpagina.dark #interesseformcontent input[type=email]:focus, .ac-wrapper.detailpagina.dark #interesseformcontent select:focus, .ac-wrapper.detailpagina.dark #interesseformcontent textarea:focus, .ac-wrapper.detailpagina.dark .interesseformcontent input[type=text]:focus, .ac-wrapper.detailpagina.dark .interesseformcontent input[type=tel]:focus, .ac-wrapper.detailpagina.dark .interesseformcontent input[type=email]:focus, .ac-wrapper.detailpagina.dark .interesseformcontent select:focus, .ac-wrapper.detailpagina.dark .interesseformcontent textarea:focus { border: 1px solid #ffffff; } .ac-wrapper.detailpagina.dark a { color: #ffffff;} .ac-wrapper.detailpagina.dark a:hover { color: #ffffff;} .ac-wrapper.detailpagina.dark .fotorama { background: rgba(255,255,255,0.03); } .ac-wrapper.detailpagina.dark .fotorama__nav__shaft > div:last-child { -webkit-filter: invert(1); filter: invert(1); } .ac-wrapper.detailpagina.dark .fotorama__nav__shaft > div:last-child .fotorama__thumb { background-color: black; background-color: rgba(0,0,0,.2); } /**************************************************** Design: Autosoft BV - www.autosoft.eu Code & CSS: Autosoft BV - www.autosoft.eu Copyright 2020 Autosoft BV ****************************************************/ /********** WIDGETS **********//********** WIDGETS **********//********** WIDGETS **********//********** WIDGETS **********/ /********** WIDGETS **********//********** WIDGETS **********//********** WIDGETS **********//********** WIDGETS **********/ /********** WIDGETS **********//********** WIDGETS **********//********** WIDGETS **********//********** WIDGETS **********/ /* Minizoeker --------------------------------------------- */ #minizoeker {font-size: 0;} #minizoeker label { display: inline-block; width: 30%; margin-bottom: 3px; font-size: 12px; line-height: 18px; color: #666666; font-weight: bold; } #minizoeker select, #minizoeker input { width: 100%; border: 1px solid #666666; background: #ffffff; padding: 5px; font-size: 12px; line-height: 16px; color: #000000; cursor: pointer; background: #f6f6f6; } #minizoeker select , #minizoeker input[type=button]{ display: inline-block; width: 60%; margin-bottom: 3px;} #minizoeker input[type=button] {margin-left: 30%; text-align: center!important} #minizoeker input[type=button]:hover{background: #ffffff;} #minizoeker p.ac_minizoeker_invalid { display: none; background: #cc0000; text-shadow: none; color: #ffffff!important; font-size: 12px; font-weight: normal; text-align: center; line-height: 24px; } /* Auto van de week --------------------------------------------- */ .AutoCommerceAvdwWidget { padding: 0; width: 100%; clear: both; } .AutoCommerceAvdwWidget ul { margin-left: 0px; padding-left: 0px; text-align: center;} .AutoCommerceAvdwWidget ul li { margin-left: 0px; padding-left: 0px; list-style: none; display: inline-block; vertical-align: top; padding: 0; width: 23.5%; margin: 0% 0.5%; overflow: hidden; max-height: 220px; } .AutoCommerceAvdwWidget ul li:hover {cursor: pointer;} #carslider ul li:hover {cursor: pointer;} .AutoCommerceAvdwWidget ul li .avdwfoto{ display: block; width: 100%; height: 140px; overflow: hidden; float: left; margin-right: 10px; margin-left: 0; } .AutoCommerceAvdwWidget ul li .avdwfoto img { max-width: 100%!important; height: auto!important; margin-top: -20px; } .AutoCommerceAvdwWidget ul li .avdwgegevens { display: block; float: left; width: 100%; } .AutoCommerceAvdwWidget ul li .avdwgegevens .avdwmerkmodel { display: block; max-width: 100%;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 4px; margin-top: 4px;} .AutoCommerceAvdwWidget ul li .avdwgegevens .avdwuitvoering {display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 4px;} .AutoCommerceAvdwWidget ul li .avdwgegevens .avdwbouwjaar {display: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; padding: 0px 4px;} .AutoCommerceAvdwWidget ul li .avdwgegevens .avdwkmstand {display: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-size: 0.9em; padding: 0px 4px;} .AutoCommerceAvdwWidget ul li .avdwgegevens .avdwprijs {display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-size: 1.2em; padding: 0px 4px;} .AutoCommerceAvdwWidget ul li .avdwgegevens .avdwprijs .prijslabel {display:none; } @media screen and (max-width: 800px) { .AutoCommerceAvdwWidget ul li .avdwfoto img { margin-top: 0px; } } @media screen and (max-width: 480px) { .AutoCommerceAvdwWidget ul li { width: 47.5%; min-height: 160px; max-height: 160px; } .AutoCommerceAvdwWidget ul li .avdwfoto{ height: 89px;} .AutoCommerceAvdwWidget ul li .avdwfoto img { margin-top: -10px; } } /* WIDGET VOERTUIG SCROLLER */ /* = scroller = */ #scroller { margin: 20px 1%; } @media screen and (max-width: 600px) { #minizoeker .label, #minizoeker select, #minizoeker input[type=button] { width: 100%!important; margin-left: 0!important; } } .jcarousel-wrapper { position: relative; padding: 0; width: 96%; clear: both; text-align: center; margin: 0 auto; } /** Carousel **/ .jcarousel { position: relative; overflow: hidden; } .jcarousel ul { width: 100%; position: relative; margin-left: 0px; padding-left: 0px; white-space: nowrap; } .jcarousel ul li { margin-left: 0px; list-style: none; display: inline-block; width: 1px; width: 24.5%; max-width: 295px!important; margin: 0% 0.3%; overflow: hidden; padding: 2px; padding-left: 0px; box-sizing: border-box; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; vertical-align: middle; font-size: 0; } .jcarousel ul li:hover { margin-top: -4px; margin-bottom: 4px; cursor: pointer; } .jcarousel ul li, .jcarousel ul li a { text-decoration: none; } #autoscroller a:hover { text-decoration: none; } .jcarousel ul li .avdwfoto { display: block; width: 100%; height: auto!important; overflow: hidden; float: left; margin-right: 10px; margin-left: 0; box-sizing: border-box; } .jcarousel ul li .avdwfoto img { max-width: 100%!important; width: 100%!important; height: auto!important; margin-top: 0px; } .jcarousel ul li .avdwgegevens { display: block; float: left; width: 100%; font-size: 14px; } .jcarousel ul li .avdwmerkmodel { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; } .jcarousel ul li .avdwmerkmodel strong { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 4px; margin-top: 0.5em; margin-bottom: 0; font-size: 1.2em; color: #cccccc; color: var(--ACprimary)!important; } .jcarousel ul li .avdwuitvoering { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 4px; } .jcarousel ul li .avdwuitvoering em { font-size: 0.9em; line-height: 1.8em; font-style: normal; } .jcarousel ul li .avdwbouwjaar, .jcarousel ul li .avdwkmstand { display: none } .jcarousel ul li .detail { display: none } .jcarousel ul li .detaildata { display: none } .jcarousel ul li .avdwprijs strong { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 4px; margin-top: 0em; margin-bottom: 0; font-size: 1.2em; } .jcarousel ul li .avdwprijs em { font-style: normal; } .jcarousel ul li .avdwprijs .prijslabel { display: none } /** Carousel Controls **/ a.jcarousel-control-prev, a.jcarousel-control-next{ text-decoration: none; font-size: 0; line-height: 0; position: absolute; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; text-align:center!important; width: 35px; top: 50%; } a.jcarousel-control-prev { left: 0; margin-left: -45px; } a.jcarousel-control-next { right: 0; margin-right: -42px;} a.jcarousel-control-prev:before, a.jcarousel-control-next:before { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; opacity: 0.75!important; line-height: 0px!important; z-index: 500; position: relative; color: #666666; } a.jcarousel-control-prev:hover:before, a.jcarousel-control-next:hover:before { opacity: 1!important; color: #cccccc; color: var(--ACprimary)!important; } a.jcarousel-control-prev:before { content: '\2329'!important; font-size: 3rem!important; } a.jcarousel-control-next:before { content: '\232A'!important; font-size: 3rem!important; } @media screen and (max-width: 820px) { .jcarousel ul li { width: 33%; } a.jcarousel-control-prev { float: left; margin-left: -50px; } a.jcarousel-control-next { float: right; margin-right: -50px;} } @media screen and (max-width: 480px) { .jcarousel ul li { width:50%; } /* force bigger width for scroll to work */ body.home .inhoud .jcarousel ul li .avdwmerkmodel strong, body.home #inhoud .jcarousel ul li .avdwmerkmodel strong, body #subfooter .jcarousel ul li .avdwmerkmodel strong {font-size: 14px!important; line-height: 16px!important; } .jcarousel ul li .avdwuitvoering em { font-size: 12px!important; } .jcarousel ul li .avdwprijs strong { font-size: 14px!important; } .jcarousel ul li .avdwfoto img { margin-bottom: -6px; } a.jcarousel-control-prev { margin-left: -50px; } a.jcarousel-control-next { margin-right: -40px; } } /********** PRIMARY COLORS **********//********** PRIMARY COLORS **********//********** PRIMARY COLORS **********//********** PRIMARY COLORS **********/ /********** PRIMARY COLORS **********//********** PRIMARY COLORS **********//********** PRIMARY COLORS **********//********** PRIMARY COLORS **********/ /********** PRIMARY COLORS **********//********** PRIMARY COLORS **********//********** PRIMARY COLORS **********//********** PRIMARY COLORS **********/ /*#loader-wrapper {display: none!important; }*/ /* main */ .primarycolor , .ac-wrapper .primarycolor { color: var(--ACprimary); } .secondarycolor , .ac-wrapper .secondarycolor { color: var(--ACsecondary); } .ac-wrapper .fotorama__thumb-border, body.fullscreen .fotorama__thumb-border { border-color: var(--ACprimary); } /* nav */ #occasionlijstwrapper div.displaymode a:hover, #occasionlijstwrapper div.nav a:hover, #occasionlijstwrapper div.nav a.activePage, #occasionlijstwrapper div.nav a.activePage:hover, #occasionlijstwrapper div.displaymode a.currentview , #occasionlijstwrapper div.nav a.activePage { border-bottom: 1px solid var(--ACprimary); } /* results */ #occasionlijstwrapper .occasionresult:hover { border-bottom: 1px solid var(--ACprimary); } #occasionlijstwrapper .occasionlist .gegevens .opties ul li:before{ border-color: transparent transparent transparent var(--ACprimary); } #occasionlijstwrapper .occasionresult .mndbedr.primarycolor { color: #ffffff; background: var(--ACsecondary); } .ac-wrapper ul li:before, body.fullscreen ul li:before { border-color: transparent transparent transparent var(--ACprimary); } .ac-wrapper.detailpagina .button:hover,body.fullscreen .button:hover { color: var(--ACprimary); } .topcta a.primarycolor { color: #ffffff; background: var(--ACprimary); } .topcta a.primarycolor:hover { color: #ffffff; background: var(--ACsecondary); } /* fotooverlay */ .ac-wrapper.detailpagina .imgoverlay li:before, #sitecontainer .ac-wrapper.detailpagina .imgoverlay li:before, body.fullscreen .imgoverlay li:before { border-color: transparent transparent transparent var(--ACsecondary); width: 10px; margin-left: -14px; } .ac-wrapper.detailpagina .button:hover,body.fullscreen .button:hover { color: var(--ACprimary); } .triangle { border-color: transparent transparent var(--ACprimary) transparent; } #loader:before { border-top-color: var(--ACprimary); } /* searchfilter */ #occasionlijstwrapper .searchFilter ul:hover, #occasionlijstwrapper .searchFilter ol :hover, #occasionlijstwrapper .searchFilter .ulPrijs:hover, #occasionlijstwrapper .searchFilter .ulKmstand:hover { border-bottom: 1px solid var(--ACprimary); } #occasionlijstwrapper .searchFilter p.deleteFilter:hover, #occasionlijstwrapper .searchFilter p.deelFilter:hover, #occasionlijstwrapper .searchFilter li.meer:hover, #occasionlijstwrapper .searchFilter li.minder:hover { border-bottom: 1px solid var(--ACprimary); } #occasionlijstwrapper .ui-state-default, #occasionlijstwrapper .ui-widget-content .ui-state-default, #occasionlijstwrapper .ui-widget-header .ui-state-default { border: 2px solid var(--ACprimary); } #occasionlijstwrapper .ui-state-active, #occasionlijstwrapper .ui-widget-content .ui-state-active, #occasionlijstwrapper .ui-widget-header .ui-state-active { border: 4px solid var(--ACprimary); } #occasionzoekfilter .searchFilter button.button:hover { border-bottom: 1px solid var(--ACprimary); } /********** PRINT **********//********** PRINT **********//********** PRINT **********//********** PRINT **********/ /********** PRINT **********//********** PRINT **********//********** PRINT **********//********** PRINT **********/ /********** PRINT **********//********** PRINT **********//********** PRINT **********//********** PRINT **********/ @media print { body { margin: 0 0 0 0!important; padding: 0 0 0 0!important; color: #000; background-color: #fff; overflow: hidden!important; min-width: 940px!important; width: 940px!important; max-width: 940px!important; } body * { font-family: 'Helvetica', Arial, Sans-serif!important; color: #000!important; text-shadow: none!important; -webkit-text-fill-color: #000!important; background: transparent; } body * .wrap, body * .wrapper, body * .wrappercontent, body * .entry-content, .ac-wrapper, #page, #main , #inhoud, #content, #container, body * #page.boxed { padding-top: 0!important; padding-right: 0!important; padding-bottom: 0!important; padding-left: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; min-width: 940px!important; width: 940px!important; max-width: 940px!important; min-height: none!important; box-sizing: border-box!important; border: none!important; webkit-box-shadow: none!important; -moz-box-shadow: none!important; -ms-box-shadow: none!important; -o-box-shadow: none!important; box-shadow: none!important; } img { border: none!important; webkit-box-shadow: none!important; -moz-box-shadow: none!important; -ms-box-shadow: none!important; -o-box-shadow: none!important; box-shadow: none!important; } body #detailpaginawrapper { display: block!important; padding-top: 30px; width: 940px!important; max-width: 940px!important; margin-left: 0; } /* AC elements */ #loader-wrapper, #detailpaginaback, .occtoplink, #alternatieven, #fulltinteresseform, #interesseform, ol#voertuigdata a, .techniekverbruik a, .bijzonderheden a, #voertuigdetails a, #voertuigdetails a.callmeback, .row.flex.cta, a.findiolink, .btnoverlay { display: none!important; } ol#voertuigdata a.consulease, ol#voertuigdata a.dtclink, ol#voertuigdata a.findio, ol#voertuigdata a.royaallease, ol#voertuigdata a.overig { display: inline-block!important; } .ac-wrapper.detailpagina .block, .ac-wrapper.detailpagina .mainblock { border: 0px solid transparent!important; background: transparent!important; } /* fotorama elements */ .fotorama__nav-wrap, .fotorama__fullscreen-icon, .fotorama__arr, .fotorama__video-close { display: none; } .fotorama { max-width: 920px!important; max-height: 600px!important; } .ac-wrapper.detailpagina .fotorama .fotorama__wrap, .ac-wrapper.detailpagina .fotorama .fotorama__wrap .fotorama__stage, .ac-wrapper.detailpagina .fotorama .fotorama__wrap .fotorama__stage .fotorama__stage__shaft, .ac-wrapper.detailpagina .fotorama .fotorama__wrap .fotorama__stage .fotorama__stage__frame { max-width: 920px!important; max-height: 500px!important; text-align: center!important; } .ac-wrapper.detailpagina .fotorama .fotorama__stage img { padding-top: 0!important; padding-right: 0!important; padding-bottom: 0!important; padding-left: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; height: auto!important; max-width: 800px!important; max-height: 500px!important; width: auto!important; left: 50%!important; -ms-transform: translate(-50%,0); /* IE 9 */ -webkit-transform: translate(-50%,0); /* Safari */ transform: translate(-50%,0); } /* open tabs + page breaks */ .ac-wrapper.detailpagina article .tab-content { max-height: 145em; margin-top: 0.5em; } .ac-wrapper.detailpagina article input[type=checkbox] + label::after { display: none; } .row.flex.bijzonderheden, .row.flex.optiesextras, .row.flex.afleverpakketten, .row.flex.techniekverbruik /*.row.flex.valuelease,*/ /*.row.flex.financiering*/ { page-break-before: always!important; margin-top: 3em!important; } .row.flex.interieurpano, .row.flex.valuelease img, .row.flex.financiering a, .row.flex.financiering ol li:nth-child(7), .row.flex.afleverpakketten label { display: none; } .row.flex.afleverpakketten .block { min-width: 48%!important; margin-bottom: 40px; } /* misc */ .row.flex.bedrijfsgegevens .block, .row.flex.bedrijfsgegevens .block .belonslink, .row.flex.bedrijfsgegevens .block .whatsapplink, .row.flex.bedrijfsgegevens .block .printlink { display: none; } .row.flex.bedrijfsgegevens .block:first-child { display: block; } .ac-wrapper.detailpagina img.nap, .ac-wrapper.detailpagina img.energielabel, .ac-wrapper.detailpagina p.garantielabels img { -webkit-filter: grayscale(0); filter: grayscale(0); } .ac-wrapper.detailpagina #footnotes { text-align: right; margin-top: -40px; } .ac-wrapper.detailpagina #footnotes a:last-child{ display: none; } .entry-content a, .entry-summary a, .widget a, .site-footer .widget-area a, .posts-navigation a, .widget_authors a strong, .ac-wrapper.detailpagina #voertuigdetails li a.consulease, .ac-wrapper.detailpagina #voertuigdetails li a.dtclink, .ac-wrapper.detailpagina #voertuigdetails li a.findio, .ac-wrapper.detailpagina #voertuigdetails li a.royaallease, .ac-wrapper.detailpagina #voertuigdetails li a.overig { -webkit-box-shadow: none; box-shadow: none; border: 0; } /* site elements */ #top, #topbar, #top-bg, nav, #nav, #access, header, #header, #header-sticky-wrapper, .header-wrap, .mainheader-content, #visual, .visual, .wonderpluginslider, #merken, #mainvisual-sticky-wrapper, #bottomcontent, footer, #footer, #copyright, .footerlogos, #toplink, .toplink, .toplink.foot, a#scroll-to-top, #catapult-cookie-bar, #cookie-law-info-bar, #cookie-law-info-again, #kv-float, .ctatabs, hr, footer#colophon, #site-generator, #container > div#loader-wrapper, #container > div#detailpaginaback, .slide-facebook, .slide-twitter, .slide-linkedin, .slide-youtube, #facebooklink, #sharebar, .elementor-location-header, .elementor-location-footer, .supsystic-social-sharing, .wpsr-followbar, #ssttbutton, #buttonizer-button, #cta, #colofon, #nieuwsticker, iframe, .wrappercontent { display: none!important; } #sitecontainer.pull-up { margin-top: 0; padding-top: 0; } } /* FIXES */ #occasionlijstwrapper .occasionresult .foto { height: auto!important; /*min-height: 0px!important;*/ max-height: none!important; } #occasionlijstwrapper .occasionresult .foto .fotowrap { position: relative; top: 0; left: 0; -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } #occasionlijstwrapper .occasionresult:hover .foto .fotowrap { -moz-transform: scale(1.025) translate(0, 0); -webkit-transform: scale(1.025) translate(0, 0); transform: scale(1.025) translate(0, 0); } #inhoud #occasionlijstwrapper .occasionresult .foto img, #occasionlijstwrapper .occasionresult .foto img { position: relative; top: 0; left: 0; -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } #occasionlijstwrapper .occasiongrid .foto img { width: 100%!important; height: auto!important; } #occasionlijstwrapper .occasionlist .foto img { width: 100%!important; height: auto!important; } #occasionlijstwrapper .occasiongrid .foto { min-height: 200px; } #occasionlijstwrapper .occasionlist .foto { min-height: 160px; } @media screen and (max-width: 1024px) { #occasionlijstwrapper .occasiongrid .foto { min-height: 200px; } #occasionlijstwrapper .occasionlist .foto { min-height: 108px; } } @media screen and (max-width: 900px) { #occasionlijstwrapper .occasiongrid .foto { min-height: 190px; } #occasionlijstwrapper .occasionlist .foto { min-height: 156px; } } @media screen and (max-width: 800px) { #occasionlijstwrapper .occasiongrid .foto { min-height: 180px; } #occasionlijstwrapper .occasionlist .foto { min-height: 156px; } } @media screen and (max-width: 480px) { #occasionlijstwrapper .occasiongrid .foto { min-height: 130px; } #occasionlijstwrapper .occasionlist .foto { min-height: 96px; } } /* AUTO360 */ .ac-wrapper .block.full.pull {padding: 0.4em 0.4em 0.4em 0.4em!important;} .ac-wrapper a.swapbutton { border: 1px solid #333333!important; background: #ffffff!important; color: #333333!important; text-align: center!important; } .ac-wrapper a.swapbutton:hover, .ac-wrapper a.swapbutton.current { background: #333333!important; color: #ffffff!important; } .ac-wrapper .block.full.pull img { margin-top: 2px!important; margin-right: 4px!important; } @media screen and (max-width: 480px) { .ac-wrapper a.swapbutton { width: 49%!important; margin-top: 0.2em!important; margin-bottom: 0.2em!important; font-size: 12px!important; font-weight: normal!important; } .ac-wrapper .block.full.pull img { display: none; } .ac-wrapper .ACviewer { position: relative!important; padding: 0!important; width: 100vw!important; left: 50%!important; -webkit-transform: translate(-50%, 0%)!important; -ms-transform: translate(-50%, 0%)!important; transform: translate(-50%, 0%)!important; } } /* DEFINE BASE COLORS */ :root { --ACprimary: #333333; /* Main color accent */ /* var(--ACprimary) */ --ACsecondary: #666666; /* 2nd color */ /* var(--ACsecondary) */ } /**************************************************** Design: Autosoft BV - www.autosoft.eu Code & CSS: Autosoft BV - www.autosoft.eu Copyright 2020 Autosoft BV ****************************************************/