/* ----------------------------- RESET ----------------------------- */ html, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; background: transparent; } ol, ul { list-style: none; } select{-moz-appearance:none;} hr{height:1px; border-width:0; background:#ccc; margin-top:15px; margin-bottom:10px;} img{border:0px;} form{display:inline;} p{margin-top:5px; margin-bottom:15px; line-height:20px;} .clearfix{clear:both;} .highlite{color:#AA0000;} .bold{font-weight:bold;} .normal{} .underline{text-decoration:underline;} .line-through{text-decoration:line-through;} .mce-content{word-wrap: break-word;} .mce-content ul{list-style-type:disc; margin-left:30px; padding:5px 0 10px 0;} .mce-content ol{list-style-type:decimal; margin-left:30px; padding:5px 0 10px 0;} .mce-content table{margin:25px 0;} .white{color:#FFFFFF;} .red{color:#AA0000;} .orange{color:#FF6600;} .yellow{color:#FFCC00;} .lime{color:#9ACD32;} .green{color:#228B22;} .blue{color:#384F85;} .ls-3{letter-spacing:-3px;} .ls-2{letter-spacing:-2px;} .ls-1{letter-spacing:-1px;} .ls-0{letter-spacing:0px;} .ls1{letter-spacing:1px;} .ls2{letter-spacing:2px;} .ls3{letter-spacing:3px;} .none{display:none;} .block{display:block;} .center{text-align:center;} .uppercase{text-transform: uppercase;} .error{border:1px solid #BB0000 !important; background-color:#FAEBEB;} .errorborder{border:1px solid #BB0000 !important;} .errorback{background-color:#FAEBEB;} .pointer{cursor:pointer;} .em{font-style:italic;} .blink{text-decoration:blink;} .textfix{font-family:Arial, Helvetica, sans-serif;} .arblack{font-family:Arial Black, Helvetica, sans-serif;} .text9{font-size:9px;} .text10{font-size:10px;} .text11{font-size:11px;} .text12{font-size:12px;} .text13{font-size:13px;} .text14{font-size:14px;} .text15{font-size:15px;} .text16{font-size:16px;} .text17{font-size:17px;} .text18{font-size:18px;} .text19{font-size:19px;} .text20{font-size:20px;} .text22{font-size:22px;} .text24{font-size:24px;} .text26{font-size:26px;} .text28{font-size:28px;} .text30{font-size:30px;} .text32{font-size:32px;} .text34{font-size:34px;} .text36{font-size:36px;} .textleft{text-align:left;} .textcenter{text-align:center;} .textright{text-align:right;} .searchcolour-box{width:28px; height:20px; margin-top:3px; border:1px solid #DDDDDD;} .searchcolour-black{background-color:#000000; background-image:url(/images/search-colourbk.png);} .searchcolour-blue{background-color:#274583; background-image:url(/images/search-colourbk.png);} .searchcolour-silver{background-color:#eee; background-image:url(/images/search-colourbk.png);} .searchcolour-grey{background-color:#bbb; background-image:url(/images/search-colourbk.png);} .searchcolour-orange{background-color:#FF6600; background-image:url(/images/search-colourbk.png);} .searchcolour-white{background-color:#FFFFFF;} .searchcolour-red{background-color:#DD0000; background-image:url(/images/search-colourbk.png);} .searchcolour-green{background-color:#3B9221; background-image:url(/images/search-colourbk.png);} .searchcolour-gold{background-color:#F7D057; background-image:url(/images/search-colourbk.png);} .searchcolour-yellow{background-color:#FFD800; background-image:url(/images/search-colourbk.png);} .left-black-0{background: linear-gradient(to right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-10{background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-20{background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-30{background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-40{background: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-50{background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-60{background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-70{background: linear-gradient(to right, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-80{background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-90{background: linear-gradient(to right, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-black-100{background: linear-gradient(to right, rgba(0,0,0,1.0) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-0{background: linear-gradient(to left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-10{background: linear-gradient(to left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-20{background: linear-gradient(to left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-30{background: linear-gradient(to left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-40{background: linear-gradient(to left, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-50{background: linear-gradient(to left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-60{background: linear-gradient(to left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-70{background: linear-gradient(to left, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-80{background: linear-gradient(to left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-90{background: linear-gradient(to left, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-100{background: linear-gradient(to left, rgba(0,0,0,1.0) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-white-0{background: linear-gradient(to right, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-10{background: linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-20{background: linear-gradient(to right, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-30{background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-40{background: linear-gradient(to right, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-50{background: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-60{background: linear-gradient(to right, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-70{background: linear-gradient(to right, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-80{background: linear-gradient(to right, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-90{background: linear-gradient(to right, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-100{background: linear-gradient(to right, rgba(255,255,255,1.0) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-0{background: linear-gradient(to left, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-10{background: linear-gradient(to left, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-20{background: linear-gradient(to left, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-30{background: linear-gradient(to left, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-40{background: linear-gradient(to left, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-50{background: linear-gradient(to left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-60{background: linear-gradient(to left, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-70{background: linear-gradient(to left, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-80{background: linear-gradient(to left, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-90{background: linear-gradient(to left, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-100{background: linear-gradient(to left, rgba(255,255,255,1.0) 0%,rgba(255,255,255,0) 100%); color:#000;} @media screen and (max-width:480px){ .left-black-0{background: linear-gradient(to top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0) 100%); color:#fff;} .left-black-10{background: linear-gradient(to top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-20{background: linear-gradient(to top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-30{background: linear-gradient(to top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-40{background: linear-gradient(to top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-50{background: linear-gradient(to top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-60{background: linear-gradient(to top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-70{background: linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-80{background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-90{background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .left-black-100{background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.0) 100%); color:#fff;} .right-black-0{background: linear-gradient(to top, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-10{background: linear-gradient(to top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-20{background: linear-gradient(to top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-30{background: linear-gradient(to top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-40{background: linear-gradient(to top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-50{background: linear-gradient(to top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-60{background: linear-gradient(to top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-70{background: linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-80{background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-90{background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); color:#fff;} .right-black-100{background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); color:#fff;} .left-white-0{background: linear-gradient(to top, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-10{background: linear-gradient(to top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-20{background: linear-gradient(to top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-30{background: linear-gradient(to top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-40{background: linear-gradient(to top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-50{background: linear-gradient(to top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-60{background: linear-gradient(to top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-70{background: linear-gradient(to top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-80{background: linear-gradient(to top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-90{background: linear-gradient(to top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); color:#000;} .left-white-100{background: linear-gradient(to top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-0{background: linear-gradient(to top, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-10{background: linear-gradient(to top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-20{background: linear-gradient(to top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-30{background: linear-gradient(to top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-40{background: linear-gradient(to top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-50{background: linear-gradient(to top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-60{background: linear-gradient(to top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-70{background: linear-gradient(to top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-80{background: linear-gradient(to top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-90{background: linear-gradient(to top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); color:#000;} .right-white-100{background: linear-gradient(to top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); color:#000;} } /* ----------------------------- Variables ----------------------------- */ :root { --font-family: 'DM Sans', 'Arial', sans-serif; --section-width: 1600px; --background-color: #1a1a1a; --text-color: #fff; } /* ----------------------------- Initial Styles ----------------------------- */ body{margin:auto; font-family:var(--font-family); font-size:16px; background:#fff; color:#111; -webkit-text-size-adjust: 100%;} button{display:inline-block; margin:2% 0; padding:8px 24px; font-family:var(--font-family); font-size:16px; background:#1a1a1a; border:2px solid #1a1a1a; color:#FFF !important; border-radius:30px; cursor:pointer; -webkit-appearance:button; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} button:hover{background:#fff; color:#1a1a1a !important;} .hollow-btn{border:2px solid #1a1a1a; color: #1a1a1a !important; background: #fff;} .hollow-btn:hover{border:2px solid #1a1a1a; color:#fff !important; background: #1a1a1a;} input,select,textarea{width:92%; margin:0 0 1% 0; padding:3% 4%; font-family:var(--font-family); font-size:15px; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:none; border-radius: 5px; border:1px solid #ddd; background: #fff; color:#333;} input[type='checkbox']{width:20px; -webkit-appearance: checkbox; padding:0;} input[type='radio']{width:20px; -webkit-appearance: radio; padding:0;} select{background:#fff url(https://www.autosynergy.co.uk/assets/icons/select-arrow-black.png) no-repeat; background-position:97% center; background-size:22px;} .reg{background:#fc0 url(https://www.autosynergy.co.uk/assets/icons/bg-form-reg.png) 0 0 no-repeat; background-size:contain; font-family:uk-number-plate, Arial; text-align:center; color:#000; font-size:32px; border:0; border-radius:5px; text-transform:uppercase;} @media screen and (max-width: 480px){ button{width:90%; padding:10px 20px;} .hollow-btn{padding: 8px 18px;} } p{line-height:22px;} .no-mobile{display:block;} .no-desktop{display:none;} .newspaper{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;} .newspaper3{-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;} @media screen and (max-width: 768px){ .no-mobile{display:none;} .no-desktop{display:block;} .newspaper{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;} .newspaper3{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;} } .close{position:absolute; top:5%; right:5%; font-family:helvetica-thin, Arial, Verdana, Helvetica, sans-serif; font-size:36px; cursor:pointer; transform: rotate(45deg); -webkit-transform: rotate(45deg);} /* --------------------------------------- FONTS ------------------------------------------*/ @font-face { font-family: 'open-sans-light'; src: url('/fonts/open-sans-light-webfont.eot'); src: url('/fonts/open-sans-light-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/open-sans-light-webfont.woff') format('woff'), url('/fonts/open-sans-light-webfont.ttf') format('truetype'), url('/fonts/open-sans-light-webfont.svg#open-sans-light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open-sans'; src: url('/fonts/open-sans-webfont.eot'); src: url('/fonts/open-sans-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/open-sans-webfont.woff') format('woff'), url('/fonts/open-sans-webfont.ttf') format('truetype'), url('/fonts/open-sans-webfont.svg#open-sans') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open-sans-semi-bold'; src: url('/fonts/open-sans-semi-bold-webfont.eot'); src: url('/fonts/open-sans-semi-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/open-sans-semi-bold-webfont.woff') format('woff'), url('/fonts/open-sans-semi-bold-webfont.ttf') format('truetype'), url('/fonts/open-sans-semi-bold-webfont.svg#open-sans-semi-bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open-sans-bold'; src: url('/fonts/open-sans-bold-webfont.eot'); src: url('/fonts/open-sans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/open-sans-bold-webfont.woff') format('woff'), url('/fonts/open-sans-bold-webfont.ttf') format('truetype'), url('/fonts/open-sans-bold-webfont.svg#open-sans-bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'helvetica-thin'; src: url('/fonts/helvetica-thin-webfont.eot'); src: url('/fonts/helvetica-thin-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/helvetica-thin-webfont.woff') format('woff'), url('/fonts/helvetica-thin-webfont.ttf') format('truetype'), url('/fonts/helvetica-thin-webfont.svg#helvetica-thin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'uk-number-plate'; src: url('/fonts/uk-number-plate-webfont.eot'); src: url('/fonts/uk-number-plate-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/uk-number-plate-webfont.woff') format('woff'), url('/fonts/uk-number-plate-webfont.ttf') format('truetype'), url('/fonts/uk-number-plate-webfont.svg#uk-number-plate-webfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'montserrat'; src: url('/fonts/montserrat-webfont.eot'); src: url('/fonts/montserrat-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/montserrat-webfont.woff') format('woff'), url('/fonts/montserrat-webfont.ttf') format('truetype'), url('/fonts/montserrat-webfont.svg#montserrat') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'montserrat-light'; src: url('/fonts/montserrat-light-webfont.eot'); src: url('/fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/montserrat-light-webfont.woff') format('woff'), url('/fonts/montserrat-light-webfont.ttf') format('truetype'), url('/fonts/montserrat-light-webfont.svg#montserrat-light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'montserrat-bold'; src: url('/fonts/montserrat-bold-webfont.eot'); src: url('/fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/montserrat-bold-webfont.woff') format('woff'), url('/fonts/montserrat-bold-webfont.ttf') format('truetype'), url('/fonts/montserrat-bold-webfont.svg#montserrat-bold') format('svg'); font-weight: normal; font-style: normal; } h1{font-size:28px; font-family:var(--font-family); display:block; margin:0 0 0.5% 0;} h2{font-size:22px; font-family:var(--font-family); display:block; margin:0 0 0.5% 0;} h3{font-size:20px; font-family:var(--font-family); display:block; margin:0 0 0.5% 0;} h4{ display:inline;} @media screen and (max-width: 768px){ h1{font-size:4.0vw;} } @media screen and (max-width: 480px){ h1{font-size:7.1vw; letter-spacing:-1px;} } a:link {color:#444;text-decoration:none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} a:visited {color:#444;text-decoration:none;} a:hover {color:#aa0000; text-decoration:none; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;} .chat-icon{position:fixed; left:0; top:50%; margin-top:50px; color:#0000FF; cursor:pointer; z-index:99;} .ui-datepicker-trigger{width: 28px; cursor: pointer;} /* --------------------------------------- Header & Navigation ------------------------------------------ */ #topper{background:#111; color:rgba(255, 255, 255, 0.85); padding:10px 5px; border-bottom:1px solid #ffffff23;} #topper ul{max-width:var(--section-width); margin: auto; text-align: right; font-family:var(--font-family); font-size: 14px; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end;} #topper ul li{display: inline-flex; flex-flow: row nowrap; align-items:center; gap:5px; padding:5px 10px; cursor: pointer;} #topper ul li img{vertical-align: middle; height:20px;} #topper ul li span{display: inline-block; vertical-align: middle;} #topper ul li a{display: inline-block; vertical-align: middle; padding:0; color:rgba(255, 255, 255, 0.85);} #topper ul li.tel{font-family:var(--font-family);} @media screen and (max-width:768px){ #topper ul{font-size: 13px;} #topper ul li{padding:5px 7px;} #topper ul li.tel{font-size:16px; padding-right:20px;} /* #topper ul li.tel img{height:24px;} */ #topper ul li.tel span{display:none !important;} #topper ul li.fuel span{display:none !important;} #topper ul li.contact{display:none !important;} } header{position:relative; height:125px; background:#111;background: #262626; background: linear-gradient(160deg,rgba(38, 38, 38, 1) 1%, rgba(0, 0, 0, 1) 50%, rgba(38, 38, 38, 1) 100%); color:rgba(255, 255, 255, 0.85); border-bottom:1px solid #ffffff23} header #head{max-width:var(--section-width); margin:auto; padding:0; position:relative; height:100%; clear:both; display:flex; flex-flow:row nowrap; align-items:center;} header .logo{height:80px; margin:0 15px 0 0;} header #js-peek{width:80px; margin:0; cursor: pointer;} header #js-peek #disc{width:50px; height:50px; margin:auto; padding:6px; background:rgb(6, 171, 212); border-radius: 50px; text-align: center;} header #js-peek #disc div{position: relative; width:42px; height:34px; padding:8px 0 0; border:4px solid #fff; border-radius: 50px; font-size: 21px; color:#fff;} header #js-peek #disc div span{position: absolute; top:0; right:0; z-index:2; padding:2px; background:rgb(6, 171, 212); font-size: 9px; line-height: 8px; border-radius: 50px;} header #js-peek #jslogo{width:100%;} @media screen and (max-width: 1024px){ header .logo{height:75px; margin:10px 0 0 0;} } @media screen and (max-width: 768px){ header{height:70px; padding:0; border-bottom:1px solid #EEE;} header #head .logo{height:50px; margin:10px 0 0 10px;} header #js-peek{display:none;} } @media screen and (max-width: 480px){ header{height:60px; padding:0;} header #head .logo{height:36px;} } /* --------------------------------------- Navigation ------------------------------------------*/ nav{float:right; text-align:right; flex:1; background: rgba(255,255,255,0.0); color:rgba(255, 255, 255, 0.9); font-family:var(--font-family); font-size:16px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; height:100%; margin-left:auto;} nav li{display:inline-block; vertical-align: top; text-align: center; border-right:1px solid #ffffff23;} nav li a{display:block; color:rgba(255, 255, 255, 0.9) !important; white-space: nowrap; padding:10px 20px;} nav li:last-of-type {border-right:0;} /* nav li.home{width:10%} nav li.used-cars{width:13%} nav li.used-vans{width:13%} nav li.offers{width:9%} nav li.part-exchange{width:16%} nav li.finance{width:11%} nav li.warranties{width:13%} nav li.testimonials{width:15%} */ .menu-single{position:absolute; top:100px; right:0; z-index:99; width:250px; background:#8ec1e2;} .menu-mega{position:absolute; top:100px; left:0; z-index:99; width:100%; background:#8ec1e2;} .menu-mega .wrapper{max-width:var(--section-width); margin:auto; text-align: left;} @media screen and (max-width:1024px){ nav{font-size: 15px; letter-spacing: -1px;} } @media screen and (max-width:980px){ nav{font-size: 14px;} } @media screen and (max-width:768px){ nav{display: none; position: absolute; top:70px; left:0; z-index: 1001; width:100%; background:#8ec1e2; font-size: 17px;} nav li{width:100% !important; border-bottom: 1px solid #fff; background:#eee;} nav li a{margin:0; padding:2.5% 0; border:0; color:#000 !important;} .menu-mega{position:static; top:0; left:0; width:100%;} } @media screen and (max-width:480px){ nav{top:60px;} nav li a{padding:5% 0;} } /* --------------------------------------- Navigation ------------------------------------------*/ .mobilemenu{display:none;} @media screen and (max-width: 768px){ .mobilemenu{display:block; margin-left:auto; font-size:14px; line-height:20px; margin-right:10px; padding:21px 0; text-align:center; vertical-align: middle;} .icon-bar{background: #fff; display: block; height: 1px; line-height: 15px; margin-top: 6px; vertical-align: text-top; width:25px; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;} .rotateLeft {margin-top: 13px; position: relative; transform: rotate(-225deg); -webkit-transform: rotate(-225deg);} .rotateRight {margin-top: -1px; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg);} } @media screen and (max-width: 480px){ .mobilemenu{padding:16px 8px;} } /* --------------------------------------- Model Menu (inc-model-menu.php) ------------------------------------------*/ .nav-model dt{display:inline-block; vertical-align:top; width:16.66%; padding:0.75% 0; text-align: center;} .nav-model dt img{width:100%;} .nav-model dt a{font-size:18px; color:#fff !important;} .nav-model dt span{display:inline-block; vertical-align: top; width:11px; height:11px; margin:0 0 0 5px; padding:4px; background:#a00; color:#fff; font-size: 9px; line-height: 10px; border-radius:32px;} @media screen and (max-width: 1024px){ .nav-model dt{width:20%;} } @media screen and (max-width: 768px){ .nav-model dt{width:33.33%;} } @media screen and (max-width: 480px){ .nav-model dt{width:50%;} } /* --------------------------------------- Model Menu (inc-model-menu.php) ------------------------------------------*/ .menu-model{display:inline-block; vertical-align:top; width:15%; padding:1% 0.5%;} .menu-model img{width:100%;} .menu-model a{display:block; } .menu-model div a{display:inline-block; width:44%; margin:0 1px 0 0; padding:2%; background:#EEE; text-align:center;} @media screen and (max-width: 768px){ .menu-model{width:31.5%; padding:1% 0.5%;} } @media screen and (max-width: 480px){ .menu-model{width:42%; padding:3%;} } /* --------------------------------------- Mega Menu Items ------------------------------------------*/ .menus-list{margin:2% 0;} .menus-list dt{display:inline-block; vertical-align: middle; width:25%; font-size:17px; line-height: 17px;} .menus-list a{display:block; vertical-align:top; margin:0 1% !important; padding:10px 5% !important; border-bottom:1px solid #fff; color:#fff !important;} .menus-list img{display:inline-block; vertical-align:middle; width:15%; margin:0 2%;} .menus-list span{display:inline-block; vertical-align:middle; width:0%; height:0; padding:0 0 15% 0; margin:0 2%;} .menus-list div{display:inline-block; vertical-align:middle; width:80%;} .menus-list b{} .menus-list p{margin:0; padding:0; font-size:11px; line-height: 14px;} @media screen and (max-width: 768px){ .menus-list{margin:0;} .menus-list dt{width:50%; font-size:16px;} .menus-list span{width:1.5%; padding:0 0 20% 0;} .menus-list img{width:20%;} .menus-list a{margin:0 !important; border-top:1px solid #b0d3e9 !important; background:#9fccea;} .menus-list div{width:70%;} } @media screen and (max-width: 480px){ .menus-list dt{width:100%; padding:0%; font-size:17px;} .menus-list span{width:0%; padding:0 0 14% 0;} .menus-list img{width:14%;} .menus-list a{padding:2% 3% !important; border-bottom:1px solid #555;} } /* --------------------------------------- Control Bar / Page Nos ------------------------------------------*/ .control-bar{padding:1%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .control-bar li{display:inline-block; vertical-align:middle; padding-left:1%;} .control-bar select{width:60%;} .control-bar .viewing{width:24.33%;} .control-bar .sorted{width:28.33%;} .control-bar .page-numbers{width:44.33%; text-align:right;} .control-bar .page-numbers a{display:inline-block; padding:1.8% 2.2%; border:1px solid #ddd; border-right:0;} .control-bar .page-numbers a.last{border-right:1px solid #ddd;} .control-bar .page-numbers a:hover{background:#ddd; color:#FFF;} .control-bar .page-numbers .sel{background:#1a1a1a; color:#FFF; border:1px solid #1a1a1a;} .control-bar .page-numbers .sel:hover{background:#ddd; cursor:default;} .page-btns{display:none;} @media screen and (max-width: 768px){ .control-bar select{width:90%;} .control-bar .viewing{width:49%;} .control-bar .sorted{width:49%; text-align: right;} .control-bar .sorted span{display: none;} .control-bar .page-numbers{display:none;} /* Page Numbers (Mobile) */ .page-btns{display:block; clear:both; height:40px;} .page-btns a{display:inline-block; line-height:40px; background-color:#CCC; color:#444; text-decoration:none; text-align:center;} .page-btns .full{width:100%;} .page-btns .half{width:49%;} .page-btns .third{width:32%;} .page-btns .marg{margin-right:2%;} } /* --------------------------------------- Breadcrumbs ------------------------------------------*/ .breadcrumbs{clear:both; width:100%; min-height:10px; background:#000; color:#fff !important;} .breadcrumbs div{max-width:var(--section-width); margin:auto; padding:0 10px 0 10px; font-size:10px; text-transform:uppercase; letter-spacing:2px;} .breadcrumbs a{display:inline-block; padding:8px; color:#fff !important;} .breadcrumbs span{display:inline-block; padding:8px;} @media screen and (max-width: 768px){ .breadcrumbs{display:none;} } /* --------------------------------------- default video fluid container ------------------------------------------*/ .video-default{position:relative; width:100%; height:0; padding:0 0 60.25% 0;} .video-default iframe{position:absolute; top:0; left:0; width:100%; height:100%;} @media screen and (max-width: 768px){ .video-default{padding:0 0 56.25% 0;} } .btn-quick-check {background: #FFF; border: 2px solid #197edd; color: #AA0000; letter-spacing: -1px;} /* --------------------------------------- Feat Offers (Multiple Pages) ------------------------------------------*/ #feat-offers{position:relative; padding:3% 0 1px 0; background:#F3F3F3; text-align:center;} #feat-offers p{margin:auto; padding:0.5% 10%;} #feat-offers .inst{position:absolute; left:47%; top:30%; width:50px; z-index:9; padding:5px 15px 5px 15px; border-radius:28px; background:rgb(0,0,0); background:rgba(255,255,255,0.4); box-shadow:1px 1px 1px #222;} #feat-offers-list{width:100%; margin:1% 0 0 0;} #feat-offers-list li{position:relative; margin:0 0.5% 0 0.5%; cursor:pointer;} #feat-offers-list .photo{position:relative; width:100%; line-height:0px;} #feat-offers-list .photo img{width:100%;} #feat-offers-list .capWrap{position:absolute; top:0; z-index:1; width:100%; height:150px; margin:3% 0 0 0; font-family:open-sans, Arial, Verdana, Helvetica, sans-serif; font-size:16px;} #feat-offers-list .capWrap.right{right:0; text-align:right;} #feat-offers-list .capWrap.left{left:0; text-align:left;} #feat-offers-list .capWrap .cap{display:inline-block; margin:1px 0 0 0; padding:1.5% 2% 1.5% 3%;} #feat-offers-list .capWrap .cap.headline{font-family:open-sans, Arial, Verdana, Helvetica, sans-serif; font-size:22px;} #feat-offers-list .detail{position:relative; padding:3%; min-height:100px; background:#e8e8e8; color:#000;} #feat-offers-list .detail span{position:absolute; left:46%; top:-13px; z-index:1; width:0; height:0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 17px solid #e8e8e8;} #feat-offers-list .detail small{display:block; margin:2% 0 0 0;} @media screen and (min-width: 1280px){ #feat-offers-list li{margin:0 0.3% 0 0.3%;} } @media screen and (max-width: 768px){ #feat-offers .inst{left:36%;} #feat-offers-list{width:100%; margin:2% 0 0 0;} #feat-offers-list li{margin:0 0.4% 0 0.4%;} #feat-offers-list .detail{min-height:70px;} } @media screen and (max-width: 480px){ #feat-offers{position:relative; padding:7% 0;} #feat-offers-list li{margin:0;} #feat-offers-list .detail{padding:4%; min-height:80px;} #feat-offers-list .capWrap{margin:2% 0 0 0; font-size:3vw;} #feat-offers-list .capWrap .cap{padding:1.5% 2% 1.5% 3%;} #feat-offers-list .capWrap .cap.headline{font-size:4vw;} } /* --------------------------------------- Main Structure ------------------------------------------*/ .limit{max-width:var(--section-width); margin:auto;} .limit aside{float:left; width:23%; min-height:50px; background:#fff;} .limit section{float:right; width:75%;} .limit section .wrapper{padding:2.5% 0 0 0;} .limit .global-form{min-height:300px;} .full{clear:both; background:#FFF; width:100%; padding:0; overflow:hidden;} .full section{position:relative; width:100%; overflow:hidden;} .full section .wrapper{position:relative; margin:auto; max-width:var(--section-width);} .full section h1{font-size:32px;} /*.full section h2{font-size:28px;} .full section h3{font-size:22px;}*/ .pad{padding:2% 2.5%;} @media screen and (max-width: 768px){ .full section h1{font-size:4.5vw;} /*.full section h2{font-size:5.6vw;} .full section h3{font-size:3.6vw;}*/ .pad{padding:5%;} } @media screen and (max-width: 600px){ .full section h1{font-size:6.5vw;} /*.full section h2{font-size:5.9vw;} .full section h3{font-size:4.9vw;}*/ } @media screen and (max-width: 768px){ .limit{margin:0 auto auto auto;} .limit aside{float:none; width:100%; min-height:30px;} .limit section{float:none; width:100%;} .limit section .wrapper{padding:0;} .inner{padding:5%;} } /* --------------------------------------- Home Page ------------------------------------------*/ #js-wrap{max-width:var(--section-width) !important;} /* Hero */ #hero{width:100%; max-width:1980px; height:400px; margin:0 auto; background:#DDD; overflow:hidden;} #hero .royalSlider{width:100%; height:400px;} #hero .infoBlock {position: absolute; top: 20px; left: 0; right: auto; width: 100%; padding-bottom: 0; overflow: hidden; color: #FFF;} #hero .terms{position: absolute; bottom:2%; right:2%; z-index: 99; font-size: 12px;} #hero .capWrap{margin:5% 5% 0 5%; display:inline-block; font-family:var(--font-family); font-size:48px; letter-spacing:-1px;} #hero .capWrap.right{float:right; text-align:right;} #hero .capWrap.left{float:left; text-align:left;} #hero .capWrap .cap{display:inline-block; margin:1px 0 0 0; padding:7px 15px 7px 15px;} #hero .capWrap .cap.one{font-family:var(--font-family);} #hero .capWrap .cap b{font-family:var(--font-family); } @media screen and (min-width: 1260px){ #hero{height:400px;} #hero .royalSlider{height:400px;} } @media screen and (max-width: 1024px){ #hero{height:380px;} #hero .royalSlider{height:380px;} #hero .capWrap{font-size:4.6vw; margin:8% 2% 0 2%;} #hero .capWrap .cap{padding:5px 10px 5px 10px;} } /* Tablets */ @media screen and (max-width: 768px){ #hero{height:260px;} #hero .royalSlider{height:260px;} } @media screen and (max-width: 600px){ #hero{height:280px;} #hero .royalSlider{height:280px;} } /* Mobiles */ @media screen and (max-width: 480px){ #hero{height:235px;} #hero .royalSlider{height:235px;} } @media screen and (max-width: 360px){ #hero{height:200px;} #hero .royalSlider{height:200px;} } /* Welcome / Features*/ #home #welcome{padding:3% 0; text-align:center; background:#1a1a1a !important; border:1px solid #ffffff23; color:#fff; border-width:1px 0; background:linear-gradient(160deg,rgba(38, 38, 38, 1) 1%, rgba(0, 0, 0, 1) 50%, rgba(38, 38, 38, 1) 100%) !important; color: rgba(255, 255, 255, 0.85);} #home #welcome p{margin:2% 10%;} @media screen and (max-width: 768px){ #home #welcome{padding:5% 0;} #home #welcome h1{font-size:4.5vw;} #home #welcome p{margin:2% 5%;} } @media screen and (max-width: 600px){ #home #welcome{padding:7% 0 0 0;} #home #welcome h1{font-size:6vw;} } #promo {border-top:1px solid #ffffff23 !important; background:#000 !important;} #promo .video {height:600px !important; max-width:2800px !important; background:#000 !important; width:100% !important;} @media screen and (max-width: 1100px){ #promo .video {height:0 !important; padding:0 0 33% 0;} } #home-feat{background:#f6f6f6;} #home-feat ul{max-width: 1600px; margin:auto; text-align:center;} #home-feat li{display:inline-block; vertical-align:top; width:25%; height:0; padding:0 0 28.25% 0;} #home-feat li.news{background:#EEE;} #home-feat li.news .contain{padding: 7%; text-align: left;} #home-feat li.news .contain .news-caro{margin:3% 0 0;} #home-feat li.news .contain .news-caro a{font-size: 28px; font-family:var(--font-family); } #home-feat li.social{color:#fff;} #home-feat li.social dt{float:left; height:0;} #home-feat li.social dt img{width:20%;} #home-feat li.social dt.twitter{width:90%; padding:10% 5% 52.5% 5%; background:#00b0ec;} #home-feat li.social dt.twitter p{margin:0; padding:0; font-size:12px; line-height: 17px;} #home-feat li.social #tweet-fade{position:relative;} #home-feat li.social #tweet-fade p{position:absolute; left:0; top:0; background:#00b0ec;} #home-feat li.social dt.facebook{width:50%; padding:15% 0 40% 0; background:#3b589e;} #home-feat li.social dt.facebook img{width:33%;} #home-feat li.social dt.google{width:50%; padding:15% 0 40% 0; background:#c23a2e;} #home-feat li.social dt.google img{width:33%;} #home-feat li.service{background: url(/images/bg-book-service-home.jpg); background-size: cover;} #home-feat li.service .contain{width:90%; height: 0; padding:50% 5% 65% 5%; background:rgb(0,0,0); background:rgba(0,0,0,0.5); color:#fff;} #home-feat li.tv{background:#3e63a0;} #home-feat li.tv .contain{width:90%; height: 0; padding:30% 5% 85% 5%; background:rgb(0,0,0); background:rgba(0,0,0,0.1); color:#fff;} #home-feat li.tv .contain img{width:60%;} @media screen and (min-width: 1280px){ #home-feat li.social dt.twitter p{margin:0; padding:0; font-size:14px; line-height: 20px;} } @media screen and (max-width:var(--section-width)){ #home-feat li.news .contain .news-caro a{font-size: 24px;} } @media screen and (max-width: 1024px){ #home-feat li.news .contain .news-caro a{font-size: 18px;} } @media screen and (max-width: 768px){ #home-feat li{width:50%; padding:0 0 55% 0;} #home-feat li.news .contain .news-caro a{font-size: 20px; font-family:var(--font-family); } } @media screen and (max-width: 480px){ #home-feat li{width:100%; padding:0 0 110% 0;} } /* Featured Offers */ #home #feat-offers{padding:2% 0;text-align:center;} #home .offer-caro{margin:2% 0;} #home .offer-caro li{margin:0 2%;} #home .offer-caro img{width:100%;} @media screen and (max-width: 768px){ #home #feat-offers{padding:5% 0;} #home .offer-caro li{margin:0;} } /* Extra */ #home #extra-seo h1{font-size:18px;} #home #extra-seo h2{display:block; font-size:15px;} .c2a-btns{max-width: 600px; margin:0 auto 3% auto; text-align:center;} .c2a-btns button{min-width: 150px;} .c2a-btns li{display: inline-block; width:30%; cursor: pointer;} .c2a-btns li img{width:40%;} .c2a-btns li span{display: block; font-family:var(--font-family); font-size: 24px; letter-spacing: -1px; color: #a00; } @media screen and (max-width: 768px){ .c2a-btns li {width:30%;} .c2a-btns li img{width:40%;} .c2a-btns li span{font-size: 4vw;} } @media screen and (max-width: 480px){ .c2a-btns li img{width:70%;} .c2a-btns li span{font-size: 5vw;} } /* --------------------------------------- Banner Terms & Conditions ------------------------------------------*/ #banner-tc{background: #f6f6f6; padding: 3% 0;} #banner-tc ul{max-width: 1170px; margin: auto;} #banner-tc ul li{width:94%; padding:1.5% 3%; border-bottom:1px solid #eee;} #banner-tc ul li.heading{font-size: 18px; font-weight: bold;} #banner-tc ul b{display: block; font-weight: normal;} #banner-tc ul div{width:100%; padding:2% 0 0;} #banner-tc ul p{font-size: 12px;} @media screen and (max-width:768px){ #banner-tc{padding: 5% 0;} #banner-tc ul li{width:90%; padding:3% 5%;} } /* --------------------------------------- Veh Book (part-exchange.php, part-exchange-cap.php, book-service.php) ------------------------------------------*/ #veh-book #hero{max-height: 360px;} #veh-book #hero #enter-reg{max-width:270px;} #veh-book #hero #enter-reg input{display:inline-block; padding:20px 20px;} #veh-book #sticky-head{background:rgb(255,255,255); background:rgba(255,255,255,0,97);} #veh-book #sticky-head .contain{max-width:1170px; margin:auto; padding:1.2% 2%; border-bottom:1px solid #eee; overflow: hidden;} #veh-book #sticky-head .left{float:left; width:70%;} #veh-book #sticky-head .right{float:left; width:30%; text-align: right;} #veh-book #sticky-head .right .model{display:none;} #veh-book #sticky-head b{display:block; font-size:28px;} #veh-book #sticky-head p{margin:0; padding:0; font-size:12px; line-height: 14px;} #veh-book #sticky-head button{margin:5px 0 0; padding:4px 8px; font-size:12px;} #veh-book #vehicle{float:left; width:49%;} #veh-book #vehicle #sticky .inner{padding:2% 2.5%; text-align: center;} #veh-book #vehicle #model{width:90%;} #veh-book #detail{float:right; width:45%; padding:0 5% 0 0;} #veh-book #detail #form-contain{position: relative; min-height: 300px;} #veh-book #detail input{background:#f9f9f9;} #veh-book #detail select{background:#f9f9f9 url(https://www.autosynergy.co.uk/assets/icons/select-arrow-black.png) no-repeat; background-position:97% center; background-size:22px;} #veh-book #detail textarea{background:#f9f9f9;} #veh-book #detail #veh-head{width:100%; background: rgb(255,255,255); background: rgba(255,255,255,0.95);} #veh-book #detail #veh-head .inner{padding:5% 4% 1% 4%; overflow: hidden;} #veh-book #detail #veh-head #model-thumb{display:none; float:right; width:30%;} #veh-book #detail .sect{border-bottom: 1px solid #eee;} #veh-book #detail .sect .inner{padding:5% 4%;} #veh-book #detail .sect h3{font-size: 22px;} #veh-book #detail .sect p{font-size:12px;} #veh-book #detail .layer{position: absolute; top:0; left:0; width:90%; background: rgb(255,255,255); background: rgba(255,255,255,0.99); text-align: center;} #veh-book #detail .load{z-index:5; padding:20% 5% 30% 5%;} #veh-book #detail .load img{width:48px;} #veh-book #detail .thanks{z-index:4; padding:18% 5%;} #veh-book #detail .thanks img{width:56px;} #veh-book #detail .result{z-index:3; width:100%; margin: 1% 0 0; border:0; text-align: left; overflow: hidden;} #veh-book #detail .result ul{text-align: center;} #veh-book #detail .result li{display:inline-block; vertical-align: top; width:26%; margin: 2% 0; padding:3%; border-radius: 5px; color:#fff;} #veh-book #detail .result li div{font-family:var(--font-family); font-size:24px;} #veh-book #detail .result li.good{background:#58ABE4;} #veh-book #detail .result li.average{background:#65B8F1;} #veh-book #detail .result li.poor{background:#71C4FD;} #veh-book #detail .radios li{margin:1% 0 0; overflow: hidden;} #veh-book #detail .radios div{display:block; border:1px solid #ddd; padding:3% 4%; border-radius: 5px; background: #f9f9f9;} #veh-book #detail .radios div input[type="radio"]{float:right;} #veh-book #detail .radios p{padding:2%;} #veh-book #detail .house{width:56%;} #veh-book #detail .postcode{float:right; width:26%;} @media screen and (max-width:768px){ #veh-book #hero{max-height: 360px;} #veh-book #sticky-head .contain{padding:2% 5%;} #veh-book #sticky-head .contain h2{font-size:4vw;} #veh-book #sticky-head .left{padding:1% 0;} #veh-book #sticky-head .right .model{display:inline; width:150px;} #veh-book #sticky-head p{font-size:2.4vw; line-height: 4.4vw;} #veh-book #vehicle{display:none; float:left; width:100%;} #veh-book #detail{float:right; width:100%; padding:0;} #veh-book #detail #form-contain{min-height: 400px;} #veh-book #detail .section{padding:2% 5%; border-bottom: 1px solid #eee;} #veh-book #detail #veh-head{display:inline-block; background: #ddd;} #veh-book #detail #veh-head #model-thumb{display:inline-block;} #veh-book #detail #veh-head h2{font-size: 18px !important;} #veh-book #detail .result{width:90%; margin: 1% 5%; border:0;} } @media screen and (max-width:480px){ #veh-book #hero{min-height: 300px;} #veh-book #sticky-head .contain h2{font-size:5.2vw;} #veh-book #sticky-head .right .model{width:90px;} #veh-book #sticky-head p{font-size:3.4vw; line-height: 4.4vw;} #veh-book #detail .house{width:90%;} #veh-book #detail .postcode{float:none; width:90%;} #veh-book #detail .load{min-height: 400px;} #veh-book #detail .result li{width:94%; margin: 2% 0; padding:3%;} } /* --------------------------------------- New Model Overview (new-model-overview.php) ------------------------------------------*/ #nmo #hero-banner{background: #e5e5e5;} #nmo #hero-banner .wrapper{position:relative;} #nmo #hero-banner .price{font-size:28px;} #nmo #hero-banner .price span{font-size:16px;} #nmo #hero-banner .offer-alert{position: absolute; top:25%; right:25%; z-index:9; width:12%; height:0; padding:3.5% 0 8.5% 0; border-radius:200px; background:#a00; color:#fff; font-family:open-sans-bold, Arial, Helvetica, sans-serif; font-size: 2.3vw; line-height: 2.3vw; text-align: center; cursor: pointer; letter-spacing: -1px;} #nmo #hero-banner .offer-alert span{display:block;} #nmo #hero-banner .veh-txt{position:relative; width:100%; height:0; padding:0 0 33% 0; font-family:open-sans-bold, Arial, Helvetica, sans-serif; font-size:200px; letter-spacing:4px; color:#eee; text-align:center; overflow:hidden;} #nmo #hero-banner .veh-txt.w2{font-size:250px; line-height:250px;} #nmo #hero-banner .veh-txt.w3{font-size:240px; line-height:240px;} #nmo #hero-banner .veh-txt.w4{font-size:220px; line-height:220px;} #nmo #hero-banner .veh-txt.w5{font-size:240px; line-height:210px;} #nmo #hero-banner .veh-txt.w6{font-size:205px; line-height:205px;} #nmo #hero-banner .veh-txt.w7{font-size:200px; line-height:200px;} #nmo #hero-banner .veh-txt.w8{font-size:150px; line-height:150px; letter-spacing: -2px;} #nmo #hero-banner .veh-txt.w9{font-size:140px; line-height:140px; letter-spacing: -2px;} #nmo #hero-banner .veh-txt.w10{font-size:130px; line-height:130px; letter-spacing: -3px;} #nmo #hero-banner .veh-txt.w11{font-size:120px; line-height:120px; letter-spacing: -3px;} #nmo #hero-banner .veh-txt.w12{font-size:120px; line-height:120px; letter-spacing: -3px;} #nmo #hero-banner .veh-txt .vehicle{position:absolute; top:15%; left:25%; width:50%;} #nmo #overview{padding:3% 0 4% 0; background:#F6F6F6;} @media screen and (min-width:1280px){ #nmo #hero-banner .offer-alert{font-size: 28px; line-height: 28px;} } @media screen and (max-width: 1024px){ #nmo #hero-banner .veh-txt{padding:0 0 50% 0; } #nmo #hero-banner .veh-txt .vehicle{top:5%; left:15%; width:70%;} #nmo #hero-banner .veh-txt.w2{font-size:22vw; line-height:22vw;} #nmo #hero-banner .veh-txt.w3{font-size:21vw; line-height:21vw;} #nmo #hero-banner .veh-txt.w4{font-size:20vw; line-height:20vw;} #nmo #hero-banner .veh-txt.w5{font-size:19vw; line-height:19vw;} #nmo #hero-banner .veh-txt.w6{font-size:17vw; line-height:17vw;} #nmo #hero-banner .veh-txt.w7{font-size:15vw; line-height:15vw;} #nmo #hero-banner .veh-txt.w8{font-size:14vw; line-height:14vw;} #nmo #hero-banner .veh-txt.w9{font-size:13vw; line-height:13vw;} #nmo #hero-banner .veh-txt.w10{font-size:12vw; line-height:12vw;} #nmo #hero-banner .veh-txt.w11{font-size:11vw; line-height:11vw;} #nmo #hero-banner .veh-txt.w12{font-size:12vw; line-height:12vw;} } @media screen and (max-width: 768px){ #nmo #hero-banner .price{font-size:5.3vw;} #nmo #hero-banner .veh-txt .vehicle{top:5%; left:5%; width:90%;} #nmo #hero-banner .offer-alert{top:20%; right:20%; width:14%; height:0; padding:4% 0 11% 0;} } @media screen and (max-width: 480px){ #nmo #hero-banner .price{font-size:5.9vw;} #nmo #hero-banner .veh-txt .vehicle{top:0%; left:0%; width:100%;} } #nmo #model-menu{background:#666; color:#FFF; text-align:center; box-shadow:0 3px 8px -6px #000;} #nmo #model-menu li{display:inline-block; width:98%; padding:5% 1%; cursor:pointer; font-size:17px; border-right:1px solid #999;} #nmo #model-menu li:hover{background:#aaa;} #nmo #model-menu img{display:inline-block; vertical-align:middle; width:32px;} #nmo #model-menu span{display:inline-block; vertical-align:middle; padding:1.5%;} @media screen and (max-width: 768px){ #nmo #model-menu img{width:28px; margin:10% 0;} #nmo #model-menu span{display:none;} } #nmo #grades{padding:3% 0; background:#EEE; text-align:center;} #nmo #grades li{width:96%; margin:0 2%; text-align:left;} #nmo #grades img{width:90%;} @media screen and (max-width: 768px){ #nmo #grades{padding:7% 0;} } #nmo #review .wrapper{overflow: hidden;} #nmo #review #video{position:relative; float:left; width:50%; height:0; padding:0 0 28.1% 0; background: #555;} #nmo #review #video iframe{position:absolute; top:0; left:0; width:100%; height:100%;} #nmo #review #spec{float:right; width:48%;} @media screen and (max-width: 768px){ #nmo #review #video{width:100%; padding:0 0 56.2% 0;} #nmo #review #spec{width:100%; margin:5% 0 0;} } /* --------------------------------------- Item Carosel ------------------------------------------*/ #item-caro{text-align:center; background:#fff; padding:3% 0;} #item-caro .title-logo{width:128px;} #item-caro h2{font-size:28px;} #item-caro-list li{padding:5%;} #item-caro-list img{width:100px;} #item-caro-list b{display:block; font-size:16px; font-family:montserrat, Arial, Verdana, Helvetica, sans-serif; } #item-caro-list small{display:block; font-size:18px; font-family:montserrat, Arial, Verdana, Helvetica, sans-serif; color:#FFCC00;} #item-caro-list p{display:none;} #item-caro .disclaimer{font-size:10px;} @media screen and (max-width: 768px){ #item-caro{padding:4% 0;} #item-caro h2{font-size:22px;} #item-caro-list img{width:80px;} } @media screen and (max-width: 480px){ #item-caro{padding:7% 0;} #item-caro-list img{width:80px;} } /* --------------------------------------- Vehicle Details (new-detail.php, used-detail.php) ------------------------------------------*/ .rsDefault, .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs {background:#fff !important;} #veh-detail{width:96%; margin-top:-1px; padding:2%; background:#ddd; overflow:hidden;} #veh-detail .wrapper{max-width:var(--section-width);} #veh-detail #media{position:relative; float:left; width:50%; height:0; padding:0 0 37.4% 0; border:1px solid #fff; overflow: hidden;} #veh-detail #media #view-alert{display:none; position:absolute; bottom:0; right:0; z-index:99; margin:0.6% 0 0 0; padding:2.5%; background: rgb(0,0,0); background: rgba(180,0,0,0.9); color:#fff; border-radius:0; font-size:15px;} #veh-detail #media .warranty-logo{position:absolute; bottom:0; left:0; z-index:49; width:25%; padding:0.25%; background: rgb(255,255,255); background: rgba(255,255,255,0.98);} #veh-detail #media .warranty-logo img{width:100%;} #veh-detail #media .sash{position:absolute; top:35px; left:-45px; z-index:97; width: 200px; padding:7px 0; font-family:var(--font-family); font-size: 17px; text-align: center; letter-spacing:-1px; background:rgb(0,0,0); background:rgba(0,0,0,0.95); color:#fff; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} #veh-detail #media .sash.special{z-index:97; background:rgb(190,0,0);} #veh-detail #media .sash.reserved{z-index:98; background:rgb(75,158,215);} #veh-detail #media #photo-count{display: inline-block; position:absolute; bottom:0; left:0; z-index:90; padding:4px 7px; background:rgb(0,0,0); background:rgba(0,0,0,0.95); color:#fff;} #veh-detail #media #photo-count img{display: inline-block; vertical-align: middle; width:28px;} #veh-detail #media #photo-count span{display: inline-block; vertical-align: middle;} #veh-detail #media.new{padding:0 0 31.3% 0;} #veh-detail #media.wide{padding:0 0 33.33% 0;} #veh-detail #media #play-video{position:absolute; top:45px; right:6px; z-index:96; width:24px; padding:4px 4px 2px 4px; border-radius:3px; background:rgb(185,0,0); background:rgba(185,0,0,0.9); cursor:pointer;} #veh-detail #media #play-video:hover{background:rgb(0,0,0); background:rgba(0,0,0,0.8);} #veh-detail #media #play-video img{width:100%;} #veh-detail #media #video-player{display:none; position: absolute; top:0; left:0; z-index:99; width:100%; height:0; padding:0 0 75% 0; background: rgba(0,0,0,0.8);} #veh-detail #media #video-player iframe{position: absolute; top:0; left:0; width:100%; height:100%;} #veh-detail #media .royalSlider{position:absolute; top:0; left:0; width:100%; height:100%;} #veh-detail #media .rsDefault{width:100%; margin:0; line-height:0; background: #fff;} #veh-detail #media .royalSlider .photo{width:100%;} #veh-detail #media .note{position:absolute; bottom:-40px; width:100%; text-align:center;} #veh-detail #overview{float:right; width:47%;} #veh-detail #overview .reg-plate{display:inline-block; padding:8px 30px 8px 42px; border-radius:3px;} #veh-detail #overview .attn-grabber{margin:1% 0; font-size:22px;} #veh-detail #overview .price{float:right; padding:0 0 0 10px; font-family:var(--font-family); font-size:32px; text-align: right; color:#a00;} #veh-detail #overview .price .was{display:block; font-size:14px; color:#444;} #veh-detail #overview .price div{font-size:22px; line-height: 42px;} #veh-detail #overview .c2a-btns{padding:2%; text-align:center;} #veh-detail #overview .c2a-btns button{min-width: 150px;} #veh-detail .extra{float:left; width:48%; padding:1%; text-align: center;} #veh-detail .extra .warranty-logo{width:50%;} @media screen and (max-width: 768px){ #veh-detail{width:100%; padding:0;} #veh-detail #media{float:none; width:100%; padding:0 0 75% 0; border:0px;} #veh-detail #media .warranty-logo{bottom:0;} #veh-detail #media.new{padding:0 0 62.6% 0;} #veh-detail #media.wide{padding:0 0 66.66% 0;} #veh-detail #media #play-video{position:absolute; top:10px; right:12px; width:32px;} #veh-detail #media #callus{display:block; position:absolute; bottom:30px; right:10px; z-index:99; width:48px;} #veh-detail #overview{float:right; width:100%;} #veh-detail #overview .price{font-size:26px;} #veh-detail .extra{width:98%; padding:2% 1%;} } .key-list{clear:both; margin:3% 0; text-align:center;} .key-list li{display:inline-block; vertical-align:top; width:13.5%;} .key-list img{width:60%;} .key-list b{display:block; font-size:15px;} @media screen and (max-width: 1024px){ .key-list li{width:18%;} } @media screen and (max-width: 768px){ .key-list{margin:4% 0;} .key-list li{width:18%;} } @media screen and (max-width: 480px){ .key-list{margin:5% 0;} .key-list li{width:23%;} } .veh-location{padding:3% 0 0 3%; text-align: center; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .veh-location small{display:block; font-size:20px; line-height:20px; letter-spacing:-1px;} .veh-location b{font-size:36px; line-height:36px; color:#aa0000; letter-spacing:-1px;} @media screen and (max-width: 768px){ .veh-location{padding:3%; text-align:center;} } .key-specs{text-align:center; margin:0 0 2% 0;} .key-specs span{display:block; font-size:18px;} .key-specs img{width:40%;} .specs-list{-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;} .specs-list li{padding:2% 3%; border-top:1px solid #EEE;} @media screen and (max-width: 768px){ .specs-list{text-align:left; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 33px; -moz-column-gap: 33px; column-gap: 33px;} .specs-list li{padding:3% 5%;} } @media screen and (max-width: 580px){ .key-specs{text-align:center; margin:0 0 2% 0;} .key-specs span{ font-size:15px;} .key-specs img{width:50%;} .specs-list{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px;} .specs-list li{padding:3% 5%;} } #ncap{background:#fff; margin:0 0 1px 0;} #ncap .wrapper{padding:4%; overflow:hidden;} #ncap .safety-overview{float:left; width:50%; margin:10px 3% 0 0; overflow:hidden; text-align:center;} #ncap .safety-overview .logo{width:50%;} #ncap .safety-overview .stars{float:left; width:100%; margin: 0 15% 0 0; padding:1% 0 1% 0; text-align:center;} #ncap .safety-overview .stars img{height:30px;} #ncap .safety-overview .info{padding:5% 10% 0 10%;} #ncap .safety{float:right; width:40%; margin:10px 3% 0 0; overflow:hidden;} #ncap .safety li{float:left; width:100%; margin:0 3% 0 0; padding:1.5% 0 1.5% 0;} #ncap .safety .badge{float:left; width:12%; margin:0 3% 0 0;} #ncap .safety .detail{float:left; width:80%; padding:5px 0 0 0;} #ncap .safety .detail b{padding:0 0 0 10px;} #ncap .safety .detail .bar{width:100%; padding:3px; margin:5px 0 0 0; background:#ddd; overflow:hidden; } #ncap .safety .detail .bar .value{height:12px;} @media screen and (max-width: 768px){ #ncap .safety-overview{width:100%;} #ncap .safety{width:92%; padding:0 3% 3% 5%;} #ncap .safety .badge{width:12%;} #ncap .safety .detail{width:80%; } } @media screen and (max-width: 480px){ #ncap .safety .badge{width:18%;} #ncap .safety .detail{width:70%; } } /* --------------------------------------- Vehicle Carousel (index.php, used-detail.php) ------------------------------------------*/ #veh-caro{background:#111; color:#fff; padding:60px 0; text-align:left; border-bottom:1px solid #ffffff23;} #veh-caro .inner {max-width:var(--section-width); margin:0 auto;} /* #veh-caro .veh-caro {width:4000px; overflow:visible;} */ #veh-caro h3{font-size: 16px;} #veh-caro ul{margin:40px 0;} .veh-caro li{position:relative; margin:0 1px; background:#ddd; text-align: left; overflow: hidden;} .veh-caro .sash{position:absolute; top:40px; left:-45px; z-index:97; width:200px; padding:5px 0; text-align: center; font-family:var(--font-family); font-size: 17px; letter-spacing:-1px; background:rgb(0,0,0); color:#fff; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} .veh-caro .sash.special{z-index:7; background:rgb(190,0,0);} .veh-caro .sash.reserved{z-index:8; background:rgb(75,158,215);} .veh-caro .attn{display:none; position:absolute; top:0; left:0; z-index:10; width:90%; padding:2% 5%; background:#5c5c5b; color:#fff; text-align: center;} .veh-caro .photo{line-height: 0;} .veh-caro .photo img{width:100%;} .veh-caro .title{position: relative; padding:3.5%; min-height:40px; background: #1a1a1a; color:#fff;} .veh-caro .title span{position:absolute; left:45%; top:-12px; z-index:1; width:0; height:0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 13px solid #1a1a1a;} .veh-caro .title a{color:#fff;} .veh-caro .key-info{border-bottom:1px solid #fff; text-align:center; } .veh-caro .key-info dt{display:inline-block; vertical-align:top; width:20%; padding:5% 0; font-size:11px; color:#000;} .veh-caro .key-info dt img{height:32px;} .veh-caro .price{height:45px; padding:3.5%; font-size:20px; color:#a00;} .veh-caro .price .was{font-size:13px; color: #555;} @media screen and (max-width: 1024px){ .veh-caro .key-info dt{letter-spacing: -1px;} } @media screen and (max-width: 768px){ #veh-caro{padding:5% 0;} .veh-caro ul{margin:5% 0;} .veh-caro li{margin:0 5px;} } @media screen and (max-width:480px){ .veh-caro li{margin:0 10px;} .veh-caro .key-info dt img{height:36px;} } /* --------------------------------------- Branch Assoc (new-detail.php) ------------------------------------------*/ #branch-assoc{padding:2% 0; text-align:center;} #branch-assoc li{display:inline-block; vertical-align:top; width:32%; padding:3% 0 3% 0; text-align:left;} #branch-assoc li:lastchild{border-right:0px solid #EEE;} #branch-assoc li.plus3{width:99%;} #branch-assoc .photo{float:left; width:33%; height:0; margin:0 0 0 5%; padding:0 0 33% 0%; border-radius:100%; overflow:hidden; background:#AAA;} #branch-assoc .photo img{width:100%;} #branch-assoc p{float:right; width:50%; margin:0 5% 0 0; border-right:1px solid #EEE;} /* --------------------------------------- Engine Performance Stats ------------------------------------------*/ #stats{background:#fff url(/images/bg-engine-specs.jpg) 50% 50%;} #stats{background:#555; color: #fff;} #stats .grade-list{float:left; width:25%; max-height:400px; margin:0 0 0 5%; overflow:auto;} #stats .grade-list li{width:100%; font-size:18px; cursor:pointer;} #stats .grade-list li a{display:block; padding:5%; border-right:0px solid #ddd; transition: all 0.2s ease-out;} #stats .grade-list li a:hover{border-right:5px solid #a00; transition: all 0.2s ease-out; color:#fff !important;} #stats .grade-list li .sel{border-right:5px solid #ddd; transition: all 0.2s ease-out;} #stats .perf-list{float:left; width:40%; border-left:1px solid #ddd;} #stats .perf-list li{width:96%; padding:2% 4%; border-bottom:1px solid #ddd; overflow:hidden;} #stats .perf-list img{float:left; width:18%;} #stats .perf-list div{float:right; width:78%;} #stats .perf-list label{display:block; font-size:18px;} #stats .perf-list b{display:block; font-size:48px; line-height:48px; } #stats .perf-list small{font-size:32px;} #stats .perf-list p{font-size:12px; margin:0;} #stats .perf-list a{color: #fc0 !important;} @media screen and (max-width: 768px){ #stats .grade-list{width:40%; max-height:400px; margin:0;} #stats .grade-list li{width:100%; font-size:3vw; line-height:3vw;} #stats .grade-list li a{padding:6% 2%;} #stats .perf-list{width:59%;} #stats .perf-list li{padding:4% 4%;} #stats .perf-list label{font-size:3vw; line-height:3vw;} #stats .perf-list b{font-size:7vw; line-height:7vw;} #stats .perf-list small{font-size:4vw; line-height:4vw;} #stats .perf-list p{font-size:2vw; line-height:2vw; margin:3% 0 0;} } @media screen and (max-width: 480px){ #stats .perf-list li{padding:8% 4%;} #stats .perf-list img{float:left; width:25%;} #stats .perf-list div{float:right; width:70%;} #stats .perf-list label{font-size:3.2vw; line-height:3.2vw;} #stats .perf-list b{font-size:9vw; line-height:9vw;} #stats .perf-list small{font-size:4vw; line-height:4vw;} #stats .perf-list p{font-size:2.5vw; line-height:3.6vw; margin:3% 0 0;} } /* --------------------------------------- Part Exchange Widget ------------------------------------------*/ #px-widget{margin:1px 0; background:#f7f7f7 url(/images/hero/bg-valuation.jpg) 50% 50% no-repeat; text-shadow: 1px 1px 1px #fff;} #px-widget h4{font-size:24px;} #px-widget ::-webkit-input-placeholder {color:#fff;} #px-widget #enter-reg{max-width:270px;} #px-widget #enter-reg input{display:inline-block; padding:20px 20px;} @media screen and (max-width:768px){ #px-widget{background:#f7f7f7 url(/images/hero/bg-valuation.jpg) 23% 50% no-repeat; text-shadow: 1px 1px 1px #fff;} } /* --------------------------------------- FAQ's included on multiple pages ------------------------------------------*/ .faq-block{background: #f7f7f7; margin:1px 0;} .faq-block .wrapper{max-width: 1200px !important;} .faq-block ul{margin:3% 0;} .faq-block li{padding:2%; border-top:1px solid #ddd; cursor: pointer;} .faq-block span{float:right; margin-left: 10px;} .faq-block b{font-weight: normal; color:#1a1a1a;} .faq-block p{padding:1% 0;} @media screen and(max-width:768px){ .faq-block li{padding:3% 0%; } } @media screen and(max-width:480px){ .faq-block li{padding:4% 0%; } } /* --------------------------------------- New Models (new-models.php) ------------------------------------------*/ #nm #makes{clear:both; text-align:center;} #nm #makes li{display:inline-block; vertical-align:top; width:15%; margin:2% 1%; padding:2%; cursor:pointer; border-bottom:1px solid #EEE; } #nm #makes img{width:100%;} #nm #models{clear:both; text-align:center;} #nm #models li{display:inline-block; vertical-align:top; width:27%; margin:2% 1%; padding:2%; cursor:pointer; border-bottom:1px solid #EEE; } #nm #models h2{font-size:20px;} #nm #models .photo img{width:100%;} @media screen and (max-width: 1024px){ #nm #models li{width:27%; margin:2% 1%;} } @media screen and (max-width: 768px){ #nm #models li{width:44%; margin:2% 1%;} } @media screen and (max-width: 480px){ #nm #models li{width:98%; padding:2% 0;} } /* --------------------------------------- Used Search (inc-used-search.php) ------------------------------------------*/ .used-search{background:#111; color:#fff; font-family:var(--font-family); border-top:1px solid #ffffff23;} .used-search .wrapper{position: relative; padding:2% 0;} .used-search .wrapper.status-true{padding:2% 0 0 !important;} .used-search b{display:block; font-family:var(--font-family); font-size: 32px; letter-spacing: -1px; text-align: center;} .used-search ul{margin:0.5% 1%; display: flex; flex-flow: row wrap; align-items: center;} .used-search li{display:inline-block; vertical-align: top; width:16.66%; margin:1% 0 0;} .used-search li.search-type{width:33.33%;} .used-search li.payment-type{width:33.33%;} .used-search li.blank{width:33.33%;} .used-search li.heading{width:100%;} .used-search .search-type ul{width:70%; margin:0; border:1px solid #FFF; border-radius:3px; overflow:hidden; font-size:16px; text-align: center;} .used-search .search-type ul li{float:left; width:50%; margin:0;} .used-search .search-type ul label{display:block; padding:8px 0; cursor:pointer;} .used-search .search-type ul li.sel{background:#FFF; color:#555; cursor:default;} .used-search .payment-type ul{width:70%; margin:0; border:1px solid #FFF; border-radius:3px; overflow:hidden; font-size:16px; text-align: center;} .used-search .payment-type ul li{float:left; width:50%; margin:0;} .used-search .payment-type ul label{display:block; padding:8px 0; cursor:pointer;} .used-search .payment-type ul li.sel{background:#FFF; color:#555; cursor:default;} .used-search input[type="text"]{width:85%;padding:5%;} .used-search select{width:85%;padding:5%;} .used-search button{width:90%; margin:0;} .used-search .filter{display:inline-block; vertical-align: top; width:90%; margin: 0 0; padding:3.5% 0; border:2px solid #1a1a1a; border-radius: 5px; text-align: center; cursor: pointer;} .used-search .filter img{display:inline-block; vertical-align: middle; width:28px;} .used-search .filter span{display:inline-block; vertical-align: middle;} .used-search #filter-options{display:none; border-top:1px solid rgba(255,255,255,0.2);} .used-search #filter-options .sel{background:#fc0 !important;} .used-search li.extras span{display:block;} .used-search .bodystyle{width:96% !important; padding:10px 0; text-align: left;} .used-search .bodystyle dt{display:inline-block; vertical-align: top; margin:0 10px; text-align: center;} .used-search .bodystyle img{height:48px;} .used-search .bodystyle small{display: block;} .used-search .bodystyle input{width:30px;} .used-search .colour-group{width:96% !important; padding:10px 0; text-align: left;} .used-search .colour-group dt{display:inline-block; vertical-align: top; border-radius: 5px; margin:5px 0 0;} .used-search .colour-group dt label{display:block; padding:5px 18px 10px 5px;} .used-search .colour-group input{width:30px;} .used-search .update-search{display: none;} .used-search #filter-status{margin: 2% 0 0; text-align: center;} .used-search #filter-status li{width:99%; border-right:1px solid #fff;} .used-search #filter-status a{display:block; padding:7% 7% 7% 0; background: #fef534;} .used-search #filter-status a:hover{background: #fff;} .used-search #filter-status li span{float:right; font-family:helvetica-thin, Arial, Verdana, Helvetica, sans-serif; font-size:20px; line-height:16px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} @media screen and (max-width: 768px){ .used-search{text-align: center;} .used-search .wrapper{padding:4% 0;} .used-search b{font-size: 22px;} .used-search li{width:50%; margin:1.4% 0 0;} .used-search li.blank{display:none;} .used-search li.search-type {width:100%;} .used-search li.extras{width:100%;} .used-search li.extras span{display:inline-block; width:48%; text-align: left;} .used-search li.extras span label{display:block; padding:2%;} .used-search .keywords{width:100%;} .used-search .keywords input{width:92%; padding:3%;} .used-search .bodystyle dt{width:24%; margin:2% 0;} .used-search .search-type ul{margin:auto auto 10px auto;} .used-search li.payment-type {width:100%;} .used-search .payment-type ul{margin:auto;} .used-search button{width:90%; padding:4% 0;} .used-search .hollow-btn{width:90%; padding:3.2% 0;} .used-search #filter-status{font-size:13px; letter-spacing: -1px;} } @media screen and (max-width: 600px){ .used-search .bodystyle dt{width:32%;} } @media screen and (max-width: 480px){ .used-search .wrapper{padding:4% 0 12% 0;} .used-search li{margin:1% 0 0;} .used-search li.blank{display:none;} .used-search button{padding:6px 10px;} .used-search #filter-status{font-size:12px;} .used-search .update-search{display: block; margin:3% 5%; padding:3% 5%;} } /* --------------------------------------- Media Gallery (new-model-overview.php) ------------------------------------------*/ #media-gallery{background:#DDD; padding:3% 0; text-align:center;} .media-gallery-caro{margin:2% 0;} .media-gallery-caro li{padding:0 1%;} .media-gallery-caro img{width:100%;} @media screen and (max-width: 768px){ #media-gallery{padding:7% 0;} .media-gallery-caro li{padding:0;} } /* --------------------------------------- News (news.php) ------------------------------------------*/ #news section{float:left;} #news aside{float:right; padding:3% 0 0;} #news small{display:inline-block; padding:2% 3%; background:#555; color:#FFF;} #news .breaking{background:#FFCC00; color:#000;} #news .snippet{padding:2% 0; font-family:open-sans, Arial, Helvetica, sans-serif; font-size:18px;} #news .video{float:left; width:70%; margin:2% 0 0;} #news .photo{width:70%; margin:2% 0 0;} #news #detial-social{float:right; width:28%; margin:2% 0 0; text-align:center; } #news #detial-social .addthis_sharing_toolbox{margin:10% 0 0;} #news #detial-social #author{margin:15% 0;} #news #detial-social #author #profile-pic{width:30%; height:0; margin:3% auto; padding:0 0 30% 0; background:#AAA; border-radius:100%; overflow:hidden;} #news #detial-social #author #profile-pic img{width:100%;} #news #other-news li{position:relative; width:100%; height:0; margin:1px 0 0; padding:0 0 100% 0; background:#555; overflow:hidden;} #news #other-news b{position:absolute; display:block; bottom:0; left:0; width:42%; height:0; padding:4% 4% 44% 4%; color:#EEE; background:rgb(0,0,0); background:rgba(0,0,0,0.75); transition: all 0.2s ease-out; cursor: pointer;} #news #other-news b:hover{width:88%; height:0; padding:6% 6% 94% 6%; transition: all 0.2s ease-out;} #news #other-news .post-date{font-size:12px; padding:0 0 4% 0;} #news #other-news a{color:#aa0000;} #news #other-news .thumb{width:100%; line-height:0;} #news #other-news .thumb img{width:100%; line-height:0;} @media screen and (max-width: 768px){ #news small{padding:2% 4%;} #news .video{width:100%;} #news .photo{width:100%;} #news #detial-social{width:100%;} #news #detial-social #author{display:none;} #news #detial-social .addthis_sharing_toolbox{margin:3% 0 0;} #news #other-news li{float:left; width:33.15%; margin:1px 1px 0 0; padding:0 0 33.15% 0;} } @media screen and (max-width: 600px){ #news #other-news li{float:left; width:49.6%; padding:0 0 49.6% 0;} } @media screen and (max-width: 480px){ #news #other-news li{width:100%; margin:1px 0 0; padding:0 0 100% 0;} } /* --------------------------------------- News Results (news-results.php) ------------------------------------------*/ #news #feat{width:97.9%; margin:1% 1% 2%;} #news #feat .thumb{float:left; width:48%; margin:0 2% 0 0;} #news #feat .thumb img{width:100%;} #news #feat .detail{padding:1% 2% 0 0;} #news #feat .detail .logo{float:right; width:6%;} #news .articles li{width:31.3%; margin:1%; background:#eee; border-top: 4px solid #aa0000; border-radius: 4px;} #news .articles .thumb{} #news .articles .thumb img{width:100%;} #news .articles .detail{padding: 4% 6% 6%;} #news .articles .detail .logo{float:right; width:20%;} #news #results-more{text-align:center;} #news #results-more-load{padding:2% 0; text-align:center;} #news .search{display:block; padding:6%; background:#eee; margin:0 0 10%;} #news .search button{background:#aa0000; color:#fff;} #news .side-ttl{font-size:20px; font-family:open-sans-bold, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-transform:uppercase;} #news #side-articles{border-top:1px solid #eee; padding:4% 0 0; margin:4% 0 10%;} #news #side-articles li{font-size:13px; border-bottom:1px solid #eee; padding:0 0 4%; margin:0 0 4%;} #news #side-articles img{float:left; width:20%; margin:0 4% 0 0;} #news #archive{border-top:1px solid #eee; margin:4% 0 10%;} #news #archive .year{border-bottom:1px solid #eee; padding:3% 0;} #news #archive .ttl{font-weight:bold; cursor:pointer;} #news #archive ul{margin:1% 0 0;} #news #archive li{font-size:13px; padding:1% 0 1% 10%;} #news #archive li a{color:#888;} @media screen and (max-width: 768px){ #news #feat{width:92%; margin:0 4% 2%;} #news .articles{margin:0 3%;} #news .articles li{width:48%;} #news .side-ttl{margin:0 4%;} #news #side-articles{margin:2% 4% 6%;} #news #side-articles li{float:left; width:50%;} #news #archive{margin:2% 4% 10%;} } @media screen and (max-width: 480px){ #news #feat{width:90%; margin:0 5% 3%;} #news #feat .thumb{float:none; width:100%; margin:0;} #news #feat .detail .logo{width:20%;} #news .articles li{width:90%; margin:2.5% 5%;} #news .side-ttl{margin:0 5%;} #news #side-articles{margin:4% 5% 10%;} #news #side-articles li{float:none; width:100%; font-size:16px;} #news #archive{margin:4% 5% 10%;} #news #archive li{font-size:16px;} } /* --------------------------------------- Reviews (reviews.php) ------------------------------------------*/ #reviews #hero-banner{min-height:420px; padding:2% 0 0; background:#013b5c url(/images/bg-reviews-banner.jpg) 50% 50% no-repeat;} #reviews #hero-banner #judge-logo{width:320px;} #reviews #hero-banner #stars-overall{width:220px;} #reviews #hero-banner .detail{width:50%; padding:2%; margin:auto;} #reviews #hero-banner .detail p{width:90%; margin:2% 5%; color:#0095D6; font-size:18px; font-weight:bold;} #reviews #hero-banner .detail .disc{position:relative; width:22%; height:0; margin:auto; padding:2% 2% 24% 2%; background:#0095D6; border-radius:100%;} #reviews #hero-banner .detail .disc .disc-white{width:84%; height:0; padding:8% 8% 92% 8%; background:#FFF; border-radius:100%;} #reviews #hero-banner .detail .disc .disc-white .disc-inner{width:90%; height:0; padding:5% 5% 95% 5%; background:#0095D6; color:#FFF; border-radius:100%; font-weight:bold; letter-spacing:-2px; font-size:5.4vw; line-height:7.5vw; } #reviews #hero-banner .detail .disc span{position:absolute; top:12%; right:12%; width:18%; padding:1.2%; background:#0095D6; color:#FFF; border-radius:100%; font-size:1.2vw; line-height:1.5vw; } #reviews .inner{padding:2.5% 2.5% 0 2.5%; } @media screen and (min-width: 1280px){ #reviews #hero-banner .detail .disc .disc-white .disc-inner{font-size:68px; line-height:98px;} } @media screen and (max-width: 768px){ #reviews #hero-banner{min-height:380px;} #reviews #hero-banner .detail{width:80%; padding:2%; margin:auto;} #reviews #hero-banner .detail .disc .disc-white .disc-inner{font-size:8.1vw; line-height:12.2vw;} #reviews #hero-banner .detail .disc span{font-size:3.5vw; line-height:4.4vw;} #reviews .inner{padding:3% 4% 0 4%;} } @media screen and (max-width: 480px){ #reviews #hero-banner{padding:7% 0;} #reviews #hero-banner #judge-logo{width:70%;} #reviews #hero-banner .detail{width:100%; margin:5% auto; padding:0%;} #reviews #hero-banner .detail .disc .disc-white .disc-inner{font-size:8.4vw; line-height:13.2vw;} #reviews .inner{padding:4% 5% 0 5%;} } #review-list li{display:inline-block; width:26.5%; margin:1.4%; padding:2% 2% 1% 2%; background:#EEE; border-radius:5px;} #review-list p{font-size:18px; line-height: 24px;} #review-list p span{font-size:22px; font-style:italic; } #review-list .profile{border-top:1px solid #DDD; padding:3% 0; overflow:hidden;} #review-list .avatar{float:left; width:20%; height:0; padding:0 0 20% 0; border-radius:100px; background:#CCC; overflow:hidden;} #review-list .avatar.mr{background:#009afa;} #review-list .avatar.mrs{background:#ffcc00;} #review-list .avatar.miss{background:#fe65dc;} #review-list .avatar img{width:100%;} #review-list .detail{float:left; width:76%; padding:1% 0 2.5% 4%;} #review-list .detail .stars{width:40%;} #review-list .detail b{display:block; } #review-list .purchase{border-top:1px solid #DDD; margin:2% 0 0; padding:3% 0 0; font-size:11px;} @media screen and (max-width: 768px){ #review-list li{width:44%; margin:1%; padding:2% 2% 1% 2%;} } @media screen and (max-width: 480px){ #review-list li{width:88%; margin:2%; padding:2% 4% 1% 4%;} } .rating-stars{clear:both; height:30px;} .rating-stars .ttl{margin:0 0 4px;} .rating-stars .star{float:left; cursor:pointer;} .rating-stars .star-bg{width:15px; height:30px;} .rating-stars .star-l .star-bg-hov{background-position:0 -30px !important;} .rating-stars .star-l .star-bg-sel{background-position:0 -60px;} .rating-stars .star-r .star-bg{background-position:-15px 0;} .rating-stars .star-r .star-bg-hov{background-position:-15px -30px !important;} .rating-stars .star-r .star-bg-sel{background-position:-15px -60px;} .rating-stars .desc{float:left; line-height:30px; margin:0 0 0 10px;} @media screen and (max-width: 768px){ .rating-stars{height:70px; padding:10px 0 0; text-align:center;} .rating-stars .star{float:none; display:inline-block;} .rating-stars .desc{float:none; line-height:normal; margin:0;} } /* --------------------------------------- Plus Page (page.php) ------------------------------------------*/ #page .section{margin:0 0 4% 0; overflow:hidden;} #page .media{float:right; margin:0 0 0 3%;} #page .media img{width:100%; margin:0 0 2% 0;} #page .media.s{width:25%;} #page .media.m{width:35%;} #page .media.l{width:48.6%;} #page .media.f{float:left; width:100%; margin:0 0 3% 0;} #page .angel{display:inline-block; width:100%; height:100%; margin:0 0 1% 0; padding:3% 0 0 0; vertical-align:top; overflow:hidden;} #page .angel img{width:100%; margin:0 0 10px 0;} #page .angel.col2{width:47.7%; margin:0 3.4% 1% 0;} #page .angel.col3{width:30.5%; margin:0 3.3% 1% 0;} #page .angel.last{margin-right:0;} #page .video{position:relative; height:0; margin:0 0 15px 0; padding:30px 0 48.25% 0; overflow:hidden;} #page .video iframe{position:absolute; top:0; left:0; width:100%; height:100%;} @media screen and (max-width: 768px){ #page .media{margin:0 0 0 3%;} #page .media img{margin:0 0 3% 0;} #page .media.s{width:50%;} #page .media.m{width:50%;} #page .media.l{width:100%; margin:0;} #page .media.f{float:none; width:100%;} #branch-foot li{width:40%; padding:4.2%;} } @media screen and (max-width: 680px){ #page .media img{margin:0 0 4% 0;} #page .angel{margin:0 0 7% 0;} #page .angel.col2{width:100%; margin:0 0 7% 0;} #page .angel.col3{width:100%; margin:0 0 7% 0;} } /* --------------------------------------- FUEL SAVE ------------------------------------------*/ #fuel-save{display:none; position:fixed; top:0; left:25%; z-index:101; width:50%; background:rgb(32,201,52); background:rgba(32,201,52,0.95); color:#fff; box-shadow: 0px 3px 8px -6px #000;} #fuel-save div{padding:5%;} #fuel-save b{display: block; font-size:20px; font-family:var(--font-family);} #fuel-save li{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3);} #fuel-save li.loading{z-index:4; background:#ddd; text-align: center; color:#444;} #fuel-save li.loading div{padding:15% 5%;} #fuel-save li.loading img{width:36px;} #fuel-save li.vehicle{z-index:3; background:#eee; color:#444;} #fuel-save li.vehicle input{width:40.9%;} #fuel-save li.start{position:static;} #fuel-save .reset{background:#999;} @media screen and (min-width:1280px){ #fuel-save{left:32.5%; width:35%;} #fuel-save div{padding:6%;} } @media screen and (max-width:1024px){ #fuel-save{left:10%; width:80%;} #fuel-save div{padding:6%;} } @media screen and (max-width:768px){ #fuel-save{left:8%; width:86%;} #fuel-save button{width:30%;} } @media screen and (max-width:600px){ #fuel-save{left:0; width:100%;} #fuel-save div{padding:8%;} } /* --------------------------------------- Offer Results ------------------------------------------*/ #or #list{clear:both;} #or #list li{position:relative; margin:2% 0%; cursor:pointer;} #or #list .photo{position:relative; overflow:hidden; border-bottom:1px solid #FFF; line-height:0;} #or #list .photo img{width:100%;} #or #list .capWrap{position:absolute; top:0; z-index:1; width:100%; height:150px; margin:3% 0 0 0; font-size:20px;} #or #list .capWrap.right{right:0; text-align:right;} #or #list .capWrap.left{left:0; text-align:left;} #or #list .capWrap .cap{display:inline-block; margin:1px 0 0 0; padding:1.5% 2% 1.5% 3%;} #or #list .capWrap .cap.headline{font-size:26px;} #or #list .detail{position:relative; padding:1.5%; background:#e8e8e8;} #or #list .detail .logo{float:right; width:80px;} #or #list .detail h2{font-size:18px;} #or #list .detail span{position:absolute; left:47%; top:-13px; z-index:9; width:0; height:0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 17px solid #e8e8e8;} #or #list .detail a{color:#000;} @media screen and (max-width: 768px){ #or #list li{position:relative; margin:0 0 5px 0;} #or #list .photo{border:0;} #or #list .detail{padding:4%;} #or #list .detail h2{font-size:5vw;} #or #list .capWrap{margin:2% 0 0 0; font-size:3.5vw;} #or #list .capWrap .cap{padding:1.5% 2% 1.5% 3%;} #or #list .capWrap .cap.headline{font-size:4vw;} } /* --------------------------------------- Used Detail ------------------------------------------*/ #od #headImg{position:relative; margin:2% 0;} #od #headImg h2{display:block; margin:1.5%;} #od #headImg .logo{position:absolute; bottom:2%; right:1%; z-index:5; width:10%;} #od #headImg .photo{position:relative; overflow:hidden; border-bottom:1px solid #FFF; line-height:0;} #od #headImg .photo img{width:100%;} #od #headImg .capWrap{position:absolute; top:0; z-index:1; width:100%; height:150px; margin:3% 0 0 0; font-family:vauxhall, Arial, Verdana, Helvetica, sans-serif; font-size:20px;} #od #headImg .capWrap.right{right:0; text-align:right;} #od #headImg .capWrap.left{left:0; text-align:left;} #od #headImg .capWrap .cap{display:inline-block; margin:1px 0 0 0; padding:1.5% 2% 1.5% 3%;} #od #headImg .capWrap .cap.headline{font-family:vauxhall, Arial, Verdana, Helvetica, sans-serif; font-size:26px;} #od #caption{font-family:vauxhall, Arial, Verdana, Helvetica, sans-serif; font-size:20px; line-height:28px; letter-spacing:-1px;} #od .tel-equire{clear:both; float:right; width:25%; text-align:center;} #od .tel-equire span{display:block; font-family:vauxhall, Arial, Verdana, Helvetica, sans-serif; font-size:20px; color:#AA0000;} #od .offer-video{position:relative; width:100%; height:0; margin:2% 0; padding:0 0 58.25% 0; background:#EEE;} #od .offer-video iframe{position:absolute; top:0; left:0; width:100%; height:100%;} #od .c2a{clear:both; text-align:center;} #od .c2a span{margin:1%;} #od .c2a button{margin:1%;} #od td{padding: 2%;} #od thead {background: #111; color:#fff;} #od tr:nth-child(even) {background: #f5f5f5;} #od tr:nth-child(odd) {background: transparent;} #od #hotUk{float:right;} #od #hotUk iframe{width:65px; height:33px;} @media screen and (max-width: 768px){ #od .tel-equire{width:40%;} #od #hotUk{width:100%; height:33px; margin:5% 0 0 0; text-align:center;} #od #hotUk iframe{margin:auto;} #od table{width:100%;} } @media screen and (max-width: 480px){ #od #headImg li{position:relative; margin:0 0 5px 0;} #od #headImg .photo{border:0;} #od #headImg .logo{width:15%;} #od #headImg .capWrap{margin:2% 0 0 0; font-size:3.5vw;} #od #headImg .capWrap .cap{padding:1.5% 2% 1.5% 3%;} #od #headImg .capWrap .cap.headline{font-size:4vw;} #od #caption{font-size:5vw; line-height:6.5vw;} #od .tel-equire{width:100%; padding:0 0 3% 0;} } /* --------------------------------------- Used Results ------------------------------------------*/ #ur .heading{padding:2%;} #ur #gallery{margin:1% 0; padding:1% 0;} #ur #gallery li{position:relative; display:inline-block; vertical-align:top; width:32%; margin:0.5%; background: #ddd; cursor:pointer; overflow: hidden;} #ur #gallery #rep .heading{min-height:auto; font-family:var(--font-family); font-size:20px;} #ur #gallery #rep p{line-height:13px;} #ur #gallery .attn{width:90%; padding:2% 5%; background:#5c5c5b; color:#fff; text-align: center; font-size:13px;} #ur #gallery .photo{position:relative; width:100%; height:0; padding:0 0 75% 0; line-height:0;overflow: hidden;} #ur #gallery .photo.new{padding:0 0 62% 0;} #ur #gallery .photo.wide{padding:0 0 66% 0;} #ur #gallery .photo .warranty-logo{position:absolute; bottom:34px; left:1px; z-index:9; width:35%; background:rgba(255,255,255,0.99);} #ur #gallery .photo .warranty-logo img{width:100%;} #ur #gallery .sash{position:absolute; top:45px; left:-45px; z-index:4; width:200px; padding:14px 0; text-align: center; font-family:var(--font-family); font-size: 17px; letter-spacing:-1px; background:rgb(0,0,0); color:#fff; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} #ur #gallery .sash.special{z-index:5; background:rgb(190,0,0);} #ur #gallery .sash.reserved{z-index:6; background:rgb(75,158,215);} #ur #gallery .photo .media-info{position:absolute; bottom:0; left:0; width:96%; padding:2% 3%; line-height:20px; background:rgba(0,0,0,0.3); color:#FFF; font-size:12px;} #ur #gallery .photo .media-info img{width:24px; vertical-align:-7px; margin:0 6px 0 0;} #ur #gallery .photo img{width:100%;} #ur #gallery .heading{position:relative; margin:0; min-height:64px; padding:3% 4% 4% 5%; background:#000; color:#fff; font-size:16px;} #ur #gallery .heading span{position:absolute; left:45%; top:-12px; z-index:1; width:0; height:0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 13px solid #1a1a1a;} #ur #gallery .heading h3{font-size:18px;} #ur #gallery .heading a{color:#fff;} #ur #gallery .key-info{border-bottom:1px solid #fff; text-align:center; } #ur #gallery .key-info dt{display:inline-block; vertical-align:top; width:20%; padding:5% 0; font-size:12px;} #ur #gallery .key-info dt img{width:65%;} #ur #gallery .location{padding: 0 5% 3%;} #ur #gallery .location img{float:left; width:16%; margin:0 2% 0 0;} #ur #gallery .location b{display:block; font-size:18px;} #ur #gallery .location p{margin:0; font-size:18px;} #ur #gallery .price-container{position: relative; height:100px; padding:1.5% 5%;} #ur #gallery .fuel-save{position: absolute; top:0; right:0; z-index:95; padding:4px 8px; border-radius: 3px 0 0 3px; font-size:16px; line-height: 17px; background:#20c934; color:#fff; text-align: right; box-shadow: -1px 1px 4px -1px #000;} #ur #gallery .fuel-save small{display: block; font-size:10px; line-height: 10px;} #ur #gallery .price{font-size:24px; color:#AA0000;} #ur #gallery .price .vat{font-size:15px; color:#555;} #ur #gallery .was{display:block; font-size:13px; color:#AA0000;} #ur #gallery .price-month{display: inline-block; clear:left; margin:10px 0 0; font-size:24px; line-height: 22px; color:#AA0000;} #ur #gallery .price-month small{display:block; font-size:12px; line-height: 12px; color:#555;} #ur #gallery .price-month span{font-size:17px;} @media screen and (max-width: 1120px){ #ur #gallery li{width:32.33%; margin:0.5%;} } @media screen and (max-width: 768px){ #ur #gallery li{width:48%; margin:1%;} } @media screen and (max-width: 520px){ #ur #gallery li{width:96%; margin:1% 2%;} } /* --------------------------------------- Franchise Logo (new-model.php, new-model-overview.php, new-results.php) ------------------------------------------*/ .franchise-logo{float:right; width:100px; margin:0 0 0 0.25%;} @media screen and (max-width: 768px){ .franchise-logo{width:80px;} } @media screen and (max-width: 480px){ .franchise-logo{width:60px;} } /* --------------------------------------- Used Details ------------------------------------------*/ .spec-cat{clear:both; padding:1%; border-top:1px solid #DDD; font-size:18px; cursor:pointer; vertical-align: middle;} .spec-list{margin:0 0 3% 0; padding:1%; overflow:hidden;} .spec-list li{float:left; width:30.8%; padding:1%; margin:0 0.5% 0 0%;} @media screen and (min-width: 1280px){ .spec-list li{width:22.5%;} } @media screen and (max-width: 768px){ .spec-cat{margin:0; padding:3% 5% 3.2% 5%; font-size:16px; letter-spacing:-1px; text-align:left;} .spec-list{margin:0 1% 3% 1%; padding:0 5%; overflow:hidden; text-align:left;} .spec-list li{width:47.5%; letter-spacing:-1px;} } @media screen and (max-width: 500px){ .spec-list li{width:97.5%; padding:2% 1% 2% 1%; } } /* --------------------------------------- Tabs Menus / tab content ------------------------------------------*/ #tab-menu{padding:2% 0 0 0; background:#f2f2f2; text-align:center;} #tab-btns li{display:inline-block; vertical-align:bottom; padding:1.2% 2%; background:#aa0000; color:#fff; border-radius:3px 3px 0 0; cursor:pointer;} #tab-btns .sel{padding:1.5% 2%; background:#fff; color:#555; cursor:default;} @media screen and (max-width: 480px){ #tab-menu{padding:5% 0 0 0;} #tab-btns li{padding:3% 5%;} #tab-btns .sel{padding:3.5% 5%;} } .tab-content{margin:0 0 1px 0; padding:3% 0;} .tab-content b{margin:1% 0 2% 0; display:block; font-size:28px;} .tab-content.offer{text-align:center;} @media screen and (max-width: 768px){ .tab-content{text-align:center;} } .rep-example{background: #eee; width:100%;} .rep-example tr{background: #fff; padding:3%;} .rep-example td{padding:3%;} .rep-example p{line-height:12px;} /* --------------------------------------- Finance Styling (inc-finance.php) ------------------------------------------*/ #finance-detail{text-align: center;} #finance-detail li{display:inline-block; width:31.6%; margin:0 0.5%; vertical-align:top; background:#ddd;} #finance-detail li.plus{width:48%;} #finance-detail table{width:100%; border-spacing:1px; text-align:left;} #finance-detail table th{padding:3%; font-size:18px; text-align:left;} #finance-detail table tr{background:#fff;} #finance-detail table td{padding:3%;} #finance-detail table td .field{padding:0%;} #finance-detail button{min-width:200px;} #finance-detail .disclaimer{font-size:11px;} #finance-detail .representative{font-size:18px;} #finance-detail .video-finance{position:relative; width:100%; height:0; padding:0 0 68% 0; background:#FFF;} #finance-detail .video-finance iframe{position:absolute; top:0; left:0; width:100%; height:100%;} @media screen and (max-width: 1024px){ #finance-detail li{font-size:12px;} #finance-detail table th{padding:2%;} #finance-detail table td{padding:2%;} } @media screen and (max-width: 768px){ #finance-detail li{width:100%; margin:0 0 4% 0;} #finance-detail li.plus{width:100%; margin:0 0 4% 0;} #finance-detail table td{padding:3%; text-align:left;} } /* --------------------------------------- Offer Filters ------------------------------------------*/ #offer-filters #offer-cat-menu{margin:2% 0;} #offer-filters #offer-cat-menu li{position:relative; padding:3% 0 4% 0; border-top:1px solid #EEE; font-size:17px; cursor:pointer;} #offer-filters #offer-cat-menu li:hover{background:#F3F3F3;} #offer-filters #offer-cat-menu span{position:absolute; left:47%; top:0px; z-index:9; width:0; height:0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 11px solid #aa0000;} #offer-filters #offer-cat-menu img{display:inline-block; vertical-align:middle; width:28px; margin:0 10px;} #offer-filters #offer-cat-menu a{display:inline-block; vertical-align:middle;} #offer-filters #franchises{clear:both; text-align:center;} #offer-filters #franchises li{display:inline-block; vertical-align:center; width:32%; height:0; padding:5% 0 25% 0; border:1px solid #F5F5F5;} #offer-filters #franchises img{width:75%;} @media screen and (max-width: 768px){ #offer-filters #offer-cat-menu{margin:0;} #offer-filters #offer-cat-menu li{padding:6% 0; background:#eee; text-align:center;} #offer-filters #offer-cat-menu img{width:30px; margin:10px 0 0;} #offer-filters #offer-cat-menu a{display:block; } #offer-filters #franchises{margin:0; background:#F5F5F5;} #offer-filters #franchises li{width:90%; height:0; padding:5% 0 60% 0;} #offer-filters #franchises img{width:80%;} } /* --------------------------------------- Book a Service ------------------------------------------*/ #bs .arrow-flow{position:absolute; left:48.6%; top:0; z-index:3; width:0; height:0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 13px solid #0c1823;} #bs .arrow-flow.service{border-top: 13px solid #e5e5e5;} #bs .arrow-flow.you{margin-top:-1px; border-top: 13px solid #f5f5f5;} #bs .left{float:left; width:48%;} #bs .right{float:right; width:48%;} #bs #hero-banner{background:#EEE url(/images/bg-book-service-banner.jpg) 50% 50% no-repeat; color:#FFF;} #bs #hero-banner .info{width:50%; margin:0; padding:1% 2% 2% 2%;} #bs #hero-banner b{display:block; font-size:24px;} #bs #hero-banner h1{font-size:38px;} #bs #hero-banner small{display:block; font-size:20px;} #bs #hero-banner p{margin:5% 0;} #bs #hero-banner .reg{max-width:300px; padding:2.5%;} #bs #your-vehicle{background:#e5e5e5;} #bs #your-vehicle .wrapper{padding:2% 5%; overflow:hidden;} #bs #your-vehicle h2{display:block;} #bs #your-vehicle .right{text-align:center;} #bs #your-vehicle .right img{width:80%;} #bs #your-vehicle .right h3{display:block;} #bs #your-vehicle .left b{display:inline-block; width:30%; padding:2.5;} #bs #your-vehicle .left input{width:55%;} #bs #your-vehicle .left .tick{vertical-align:middle; width:5%;} #bs #your-service{background:#f5f5f5;} #bs #your-service .wrapper{padding:2% 5%; overflow:hidden;} #bs #your-service li{padding:3%; border-top:1px solid #FFF;} #bs #your-service li span{color:#FF6600; cursor:pointer;} #bs #your-service label{float:right; width:25%; text-align:right;} #bs #your-service label small{vertical-align:middle;} #bs #your-service label input{width:20px; vertical-align:middle;} #bs #your-service #selectDate{width:60%;} #bs #your-service #selectDate input{width:60%; vertical-align:middle;} #bs #your-service #selectDate img{vertical-align:middle;} #bs #about-you{background:#FFF;} @media screen and (max-width: 1024px){ #bs #hero-banner .info{width:75%;} } @media screen and (max-width: 768px){ #bs .left{float:none; width:100%;} #bs .right{float:none; width:100%;} #bs #hero-banner{background:#0c1823 url(/images/bg-book-service-banner.jpg) 60% 50% no-repeat;} #bs #hero-banner .info{width:75%; margin:2% 0; padding:1% 2% 2% 2%; border-right:0px solid #7e848c;} #bs #hero-banner b{font-size:3.8vw;} #bs #hero-banner h1{font-size:4.9vw;} #bs #hero-banner small{font-size:3.2vw;} #bs #your-vehicle .wrapper{padding:0;} #bs #your-vehicle .right img{width:60%;} #bs #your-vehicle .left b{display:none;} #bs #your-vehicle .left input{width:90%; color:#FFF;} #bs #your-vehicle .left .tick{display:none !important;} #bs #your-service .wrapper{padding:0;} #bs #your-service li{padding:4% 5%;} } @media screen and (max-width: 480px){ #bs #hero-banner .info{width:96%;} #bs #hero-banner b{font-size:5.5vw;} #bs #hero-banner h1{font-size:6.9vw;} #bs #hero-banner small{font-size:4.2vw;} #bs #hero-banner p{font-size:3.6vw;} #bs #hero-banner .reg{max-width:none; width:93%; padding:3.5%;} #bs #your-vehicle .right img{width:80%;} #bs #your-service #selectDate{width:100%;} #bs #your-service #selectDate input{width:100%;} } /* --------------------------------------- Value My Vehicle ------------------------------------------*/ #vmv .arrow-flow{position:absolute; left:48.6%; top:0; z-index:3; width:0; height:0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 13px solid #bcbcbc;} #vmv .arrow-flow.you{border-top: 13px solid #888;} #vmv .left{float:left; width:48%;} #vmv .right{float:right; width:48%;} #vmv #hero-banner{min-height:400px; background:#EEE url(/images/bg-value-my-vehicle-banner.jpg) 50% 50% no-repeat; color:#FFF;} #vmv #hero-banner .info{width:50%; margin:0; padding:1% 2% 2% 2%;} #vmv #hero-banner b{display:block; font-size:24px;} #vmv #hero-banner h1{font-size:38px;} #vmv #hero-banner small{display:block; font-size:20px;} #vmv #hero-banner p{margin:5% 0;} #vmv #hero-banner .reg{max-width:300px; padding:2.5%;} #vmv #your-vehicle{background:#888; color:#FFF;} #vmv #your-vehicle .wrapper{padding:2% 5%; overflow:hidden;} #vmv #your-vehicle h2{display:block;} #vmv #your-vehicle .right{text-align:center;} #vmv #your-vehicle .right img{width:80%;} #vmv #your-vehicle .right h3{display:block;} #vmv #your-vehicle .left b{display:inline-block; width:30%; padding:2.5;} #vmv #your-vehicle .left input{width:50%;} #vmv #your-vehicle .left select{width:50%;} #vmv #your-vehicle .left .tick{vertical-align:middle; width:5%;} #vmv #about-you{background:#FFF;} @media screen and (max-width: 1024px){ #vmv #hero-banner .info{width:75%;} } @media screen and (max-width: 768px){ #vmv .left{float:none; width:100%;} #vmv .right{float:none; width:100%;} #vmv #hero-banner{background:#92a295 url(/images/bg-value-my-vehicle-banner.jpg) 60% 50% no-repeat;} #vmv #hero-banner .info{width:75%; margin:2% 0; padding:1% 2% 2% 2%; border-right:0px solid #7e848c;} #vmv #hero-banner b{font-size:3.8vw;} #vmv #hero-banner h1{font-size:4.9vw;} #vmv #hero-banner small{font-size:3.2vw;} #vmv #your-vehicle .wrapper{padding:0;} #vmv #your-vehicle .right img{width:60%;} #vmv #your-vehicle .left b{display:none;} #vmv #your-vehicle .left input{width:90%; color:#FFF;} #vmv #your-vehicle .left select{width:90%; color:#FFF;} #vmv #your-vehicle .left .tick{display:none !important;} } @media screen and (max-width: 480px){ #vmv #hero-banner{min-height:300px;} #vmv #hero-banner .info{width:96%;} #vmv #hero-banner b{font-size:5.5vw;} #vmv #hero-banner h1{font-size:6.9vw;} #vmv #hero-banner small{font-size:4.2vw;} #vmv #hero-banner p{font-size:3.6vw;} #vmv #hero-banner .reg{max-width:none; width:93%; padding:3.5%;} #vmv #your-vehicle .right img{width:80%;} } /* --------------------------------------- Save & Compare {save-list.php} ------------------------------------------*/ #compare-key{float:left; width:15%; margin:0 0 5% 0; border-top:1px solid #eee; background: #f7f7f7;} #compare-key li{border:1px solid #eee; border-right:0; border-top:0; padding:10px 5%;} #compare-key li.head-photo{height:150px;} #compare-key li img{width:100%; max-height: 150px;} #compare-list{float:left; width:85%; margin:0 0 5% 0; border-top:1px solid #eee;} #compare-list .empty{color:#ddd;} #compare-list dt{position:relative; border:1px solid #eee; border-left:0; border-top:0; padding:10px 5%;} #compare-list dt img{width:100%; max-height: 150px;} #compare-list dt.head-photo{height:150px;} #compare-list dt .del-btn{position:absolute; top:0; right:0; width:30px; height:24px; padding:6px 0 0 0; background: #a00; color: #fff; text-align: center;} @media screen and (max-width:1024px){ #compare-key{float:left; width:25%;} #compare-list{float:left; width:75%;} } @media screen and (max-width:480px){ #compare-key{font-size: 12px;} #compare-list{font-size: 12px;} } /* --------------------------------------- Status X ------------------------------------------*/ .status{float:right; font-family:helvetica-thin, Arial, Verdana, Helvetica, sans-serif; font-size:22px; line-height:16px; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;} .status.rotateLeft{position:relative; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-top:0px;} /* --------------------------------------- Map ------------------------------------------*/ #map-wrapper{position:relative; height:460px; background: #eee;} #map{height:460px;} #map-wrapper #loc-detail{position:absolute; bottom:0; right:0; z-index:5; width:30%; height:100%; border-left:1px solid #fff; background:#151515e3; backdrop-filter:blur(5px); color:#fff;} #map-wrapper #loc-detail .inner{padding:7%;} #map-wrapper #loc-detail .inner b{display:block; } #map-wrapper #loc-detail .inner h3{display:block; margin:5% 0 0 ; font-size:24px;} #map-wrapper #loc-detail .inner span{display:block;} #map-wrapper #loc-detail .inner .tel{margin:0 0 5% 0;font-weight: bold; font-size: 18px;} #map-wrapper #loc-detail a{font-weight: normal; color:#fff;} #map-wrapper #loc-detail #location-caro h3{margin:0 0 3% 0; } #map-wrapper #loc-detail #location-caro li{padding:5%; } #map-wrapper #loc-detail #location-caro .photo{float:right; width:50%; } #map-wrapper #loc-detail #location-search{clear:both; display:block; margin:3% 1% 0 1%; text-align:center;} #map-wrapper #loc-detail #location-search span{display:inline-block;} #map-wrapper #loc-detail #location-search input{width:25%; padding:3%; text-transform:uppercase;} @media screen and (max-width: 1024px){ #map-wrapper #loc-detail{width:40%;} } @media screen and (max-width: 768px){ #map-wrapper{position:relative; height:740px;} #map{height:300px;} #map.used{height:400px;} #map-wrapper #loc-detail .inner{padding:5%;} #map-wrapper #loc-detail{width:100%; height:440px;} #map-wrapper #loc-detail.used{height:340px;} #map-wrapper #loc-detail .inner h3{ margin:2% 0 0 ;} #map-wrapper #loc-detail .inner .tel{margin:0 0 4% 0;} #map-wrapper #loc-detail #location-caro .photo{float:right; width:40%; } } @media screen and (max-width: 480px){ #map-wrapper{height:660px;} #map{height:300px;} #map-wrapper #loc-detail{height:360px;} } /* --------------------------------------- Location Results ------------------------------------------*/ #lr #location-list{text-align:center; margin:0 0 3% 0;} #lr #location-list li{position: relative; display:inline-block; vertical-align:top; width:24%; margin:1% 0.5%; min-height:350px; background:#eee; text-align:left; cursor:pointer;} #lr #location-list.limit3 li{width:30%;} #lr #location-list .photo{width:100%; height:0; padding:0 0 50% 0; background:#555;} #lr #location-list .photo img{width:100%;} #lr #location-list .detail{padding:6% 5% 5%;} #lr #location-list .detail button{font-size: small;} #lr #location-list .detail p{min-height: 50px;} #lr #location-list .depts{width:100%;} #lr #location-list .depts dt{display: inline-block; vertical-align: top; width:10%;} #lr #location-list .depts dt img{width:100%;} #lr #location-list .distance{margin:10px 0 0; color:#aaa; font-size:12px;} #lr #location-list .distance img{display:inline-block; vertical-align:middle; width:24px;} #lr #location-list a{color:#aa0000;} #lr #location-list h2{font-size:18px;} #lr #location-list .tel{margin:5% 0; padding:5% 0; border-bottom:1px dotted #555;} #lr #location-list .tel b{display:inline-block; padding:5% 0 2% 0; border-top:1px dotted #555;} #lr #location-list .tel span{display:block;} @media screen and (max-width: 1024px){ #lr #location-list li{width:32%;} #lr #location-list.limit3 li{width:32%;} } @media screen and (max-width: 768px){ #lr #location-list li{width:46%;} #lr #location-list.limit3 li{width:46%;} } @media screen and (max-width: 480px){ #lr #location-list li{width:100%; margin:1% 0; } #lr #location-list.limit3 li{width:100%; margin:1% 0; } #lr #location-list .detail p{min-height: auto;} } /* --------------------------------------- Location Detail ------------------------------------------*/ #ld .wrapper{padding:2% 2.5%; overflow:hidden;} #ld #address{float:left; width:37%;} #ld #address .sat-nav{display: block; color:#c00;} #ld #address #address-wrapper{position:relative;} #ld #address #franchises{position:absolute; top:5%; right:10%;} #ld #address #franchises li{} #ld #address #franchises img{width:100px;} #ld .social{} #ld .social li{display:inline-block; width:42px; height:42px; margin:0 5px 0 0; border-radius:100px;} #ld .social #facebook{background:#305891;} #ld .social #twitter{background:#2ca8d2;} #ld .social #google-plus{background:#db4936;} #ld .social #youtube{background:#c3282d;} #ld .social img{width:42px;} #ld #opening{float:left; width:26%; margin:4% 0 0 0;} #ld #opening .times .depthead{padding:3% 2%; overflow:hidden; border-bottom:1px solid #DDD; text-align:left; cursor:pointer;} #ld #opening .times .days{margin:0 0 10px 0; overflow:hidden;} #ld #opening .times .days li{padding:3% 2%; overflow:hidden; border-bottom:1px solid #EEE; text-align:right;} #ld #opening .times .days span{float:left;} #ld .depts{width:90%; margin:5% 0 0;} #ld .depts dt{display: inline-block; vertical-align: top; width:9%; margin:0 0.5%;} #ld .depts dt img{width:100%;} #ld #photo-caro{float:right; width:33%; height:0; margin:4% 0 0 0; padding:0 0 24.75% 0; background:#F5F5F5;} #ld #photo-caro img{width:100%;} #ld #map-wrapper{position: relative;} #ld #map-wrapper button{position: absolute; bottom:0; left:40%; z-index: 999; width:20%; padding:10px 20px;} @media screen and (max-width: 768px){ #ld .wrapper{padding:0;} #ld #address{width:100%;} #ld #opening{width:100%;} #ld #opening .times .depthead{padding:3% 5%;} #ld #opening .times .days li{padding:3% 5%;} #ld #photo-caro{width:100%; padding:0 0 37.5% 0;} } @media screen and (max-width: 600px){ #ld #photo-caro{width:100%; padding:0 0 75% 0;} #ld #map{width:100%; height:600px !important;} } /* --------------------------------------- Satff Carousel ------------------------------------------*/ .staff-caro{padding:1.5% 0 1% 0; text-align: center; background: #f2f2f2; font-family:vauxhall, Arial, Helvetica, sans-serif;} .staff-caro li{display:inline-block; vertical-align:top; max-width: 220px; padding:2% 0;} .staff-caro b{display: block; font-size:18px; font-weight: normal;} .staff-caro span{display: block;} .staff-caro img{width:50%; border-radius: 100%; border:3px solid #fff; background:#ddd;} @media screen and (max-width: 768px){ .staff-caro{padding:6% 0 4% 0;} .staff-caro img{width:60%; border:2px solid #fff;} } @media screen and (max-width: 480px){ .staff-caro{padding:10% 0 4% 0;} } /* --------------------------------------- Job Results ------------------------------------------*/ #jr .list{border-top:1px solid #eee;} #jr .list .job{padding:2%; border-bottom:1px solid #eee;} #jr .list .info{margin:30px 0;} #jr .list .info li{margin:0 0 10px;} #jr .list .info b{display:inline-block; width:160px;} /* --------------------------------------- Job Detail ------------------------------------------*/ #jd .info{margin:30px 0;} #jd .info li{margin:0 0 10px;} #jd .info b{display:inline-block; width:160px;} /* --------------------------------------- Global Form ------------------------------------------*/ .global-form{position:relative; min-height:400px; margin:1px 0; background:#ddd; overflow:hidden;} .global-form .close{position:absolute; top:5%; right:5%; font-family:helvetica-thin, Arial, Verdana, Helvetica, sans-serif; font-size:28px; cursor:pointer;} .global-form .container{margin:auto; padding:2% 3%; max-width:var(--section-width); overflow:hidden;} .global-form .left{float:left; width:46%; margin:2% 0 0;} .global-form .right{float:right; width:50%; margin:2% 0 0;} .global-form .nameTitle{width:24%;} .global-form .firstName{float:right; width:58%;} .global-form .telephone{float:left; width:28%; margin-right:1.2%} .global-form .houseNameNo{float:left; width:26%;} .global-form .postcode{float:right; width:18.5%; text-transform:uppercase;} .global-form .left50{float:left; width:41%;} .global-form .right50{float:right; width:41%;} .global-form .branch{float:left; width:40%;} .global-form .dept{float:left; width:40%;} .global-form .pref-date{float:left; width:40%;} .global-form .mail-list{clear:left; margin:1% 1% 1.5% 1%;} .global-form .disclaimer{clear:both; margin:2% 5%; color:#AAA; font-size:11px; text-align:center;} .global-form .process{position:absolute; top:0; left:0; width:100%; height:100%; padding:8% 0 10% 0; background:#555; color:#FFF; text-align:center;} .global-form .process img{width:48px;} .global-form .process b{display:block; font-size:22px; } .global-form .process p{padding:0% 5%} .global-form .process.loading{background:#999; z-index:5;} .global-form .process.thankyou{background:#aaa; z-index:4;} .global-form .process.close{color:#FFF;} @media screen and (max-width: 768px){ .global-form{min-height:240px;} .global-form .close{top:5%; right:8%;} .global-form .container{padding:5%;} .global-form p{padding:0 0 0 5%;} .global-form .left{float:left; width:100%;} .global-form .right{float:left; width:100%;} .global-form .nameTitle{width:92.2%;} .global-form .firstName{float:none; width:92.2%;} .global-form .telephone{width:92.2%;} .global-form .houseNameNo{float:none; width:92.2%; } .global-form .postcode{float:none; width:92.2%; } .global-form .left50{float:none; width:92.2%; } .global-form .dept{float:none; width:92.2%; } .global-form .right50{float:none; width:92.2%; } .global-form .pref-date{float:none; width:92.2%; } .global-form #datepicker{float:none; width:60%; } .global-form .mail-list{margin:3% 5%;} .global-form .disclaimer{margin:5%;} .global-form button{width:100%; margin-top:3%;} .global-form .process{padding:15% 0 10% 0;} } /* --------------------------------------- Scroll to Top ------------------------------------------*/ #top-scroll{position:fixed;right:0;bottom:10%;z-index:999;width:32px;display:none;padding:5px 5px 5px 7px;border-radius:3px 0 0 3px; background:rgb(0,0,0); background:rgba(0,0,0,0.6);cursor:pointer;} /* --------------------------------------- Notifications ------------------------------------------*/ .notes{display:none; position:fixed; bottom:0; left:0; z-index:1001; width:30%; box-shadow: 0px 3px 3px #000;} .notes .bar{padding:1.5% 3%; background:rgb(0,0,0); background:rgba(0,0,0,0.9); color:#fff; border-top:1px solid #fff; text-align: right; cursor: pointer;} .notes .note-caro{background:#000;} .notes .note-caro img{width:100%;} .notes .note-caro b{display:block; padding:1.8% 2.2%; color:#FFF;} @media screen and (max-width: 1024px){ .notes{width:45%;} } @media screen and (max-width: 768px){ .notes{width:75%; left:12.5%;} .notes .bar{padding:2.5% 5%;} } @media screen and (max-width: 480px){ .notes{width:100%; left:0; box-shadow: 0;} .notes .note-caro b{padding:2.5% 4%;} } /* --------------------------------------- journey links for SEO ------------------------------------------*/ .journey-links{max-width:var(--section-width); margin:auto; padding:2%; font-size:12px;} .journey-links li{display:inline-block; vertical-align: top; width:20%;} .journey-links li.ti{width:100%; font-family:var(--font-family); font-size:16px;} .journey-links li.ti a{margin:0 0.5%; padding:12px 0.75%; border:0; background: none;} .journey-links a{display:block; margin:0 2%; padding:12px 4% 12px 10%; border-top: 1px solid #eee; background: url(https://www.autosynergy.co.uk/assets/icons/bullet-arrow-333.png) no-repeat; background-position:2% center; background-size:16px;} @media screen and (max-width:var(--section-width)){ .journey-links li{width:25%;} } @media screen and (max-width:980px){ .journey-links li{width:33.33%;} } @media screen and (max-width:680px){ .journey-links li{width:50%;} } @media screen and (max-width:480px){ .journey-links li{width:100%;} } /* --------------------------------------- twitter feed ------------------------------------------*/ #twitter-feed{min-height:200px; background:#1ea2f2; color:#fff; text-align: center;} #twitter-feed img{width:48px;} @media screen and (max-width: 768px){ #twitter-feed{min-height:260px;} } /* --------------------------------------- Cookie Notice ------------------------------------------*/ #cookie{position:fixed; left:0; bottom:0; z-index:9999; width:90%; padding:1.4% 5%; background:rgb(0,0,0); background:rgba(0,0,0,0.8); color:#fff;} #cookie div{margin:auto; max-width:var(--section-width);} #cookie p{float:left; margin:0; padding:5px 0;} #cookie button{float:right; margin:0;} #cookie a{color:#fff;} @media screen and (max-width: 768px){ #cookie{padding:2.3% 5%; text-align: center;} #cookie button{float:none; margin:auto;} } /* --------------------------------------- Alerts ------------------------------------------*/ #alert{position:fixed; bottom:0; left:25%; width:50%; z-index:99; max-width:800px; background: rgb(0,0,0); background: rgba(0,0,0,0.8); color:#fff;} #alert a{color:#fff;} #alert .head{padding:12px 16px; border-bottom: 1px solid #fff;} #alert .head span{float:right; font-family:helvetica-thin, Arial, Verdana, Helvetica, sans-serif; width:24px; height:24px; font-size:36px; line-height: 16px; cursor:pointer; transform: rotate(45deg); -webkit-transform: rotate(45deg);} #alert #alert-caro img{width:100%;} #alert #alert-caro b{display: block; padding:2.5% 3%; font-family:var(--font-family); font-size:18px;} #alert #alert-caro .note{padding:5%;} #alert #alert-caro .note b{padding:0;} @media screen and (max-width:1024px){ #alert{left:20%; width:60%;} } @media screen and (max-width:768px){ #alert{left:0; width:100%;} #alert #alert-caro .note{padding:5% 5% 10% 5%;} } /* --------------------------------------- Footer ------------------------------------------*/ footer{clear:both; width:100%; margin:0; background: #262626; background: linear-gradient(160deg,rgba(38, 38, 38, 1) 1%, rgba(0, 0, 0, 1) 50%, rgba(38, 38, 38, 1) 100%); color:rgba(255, 255, 255, 0.85); color:#d9d9d9; border-top:1px solid #fff;} footer a {color:#fff !important;} footer #foot{max-width:var(--section-width); padding:2%; min-height:200px; margin:auto;} footer #foot #left{float:left; width:59%;} footer #foot #right{float:right; width:39%; text-align:right;} footer #foot #fine-print{clear:both; margin:3% 0 0 0; font-size:11px;} footer #foot .franchises{float:left; width:100%; margin:1% 0 2% 0;} footer #foot .franchises li{display: inline-block; vertical-align: top; width:8%;} footer #foot .franchises li img{width:90%;} footer .social{margin:0 0 20px 0; text-align:right;} footer .social li{display:inline-block; width:42px; height:42px; margin:0 5px 0 0; border-radius:100px;} footer .social #facebook{background:#305891;} footer .social #twitter{background:#2ca8d2;} footer .social #google-plus{background:#db4936;} footer .social #youtube{background:#c3282d;} footer .social #instagram{background:#fb3958;} footer .social img{width:42px;} footer .footer-logo{height:60px; margin:0 5px 0;} @media screen and (max-width: 768px){ footer #foot{padding:5%;} footer #foot #left{width:100%;} footer #foot #right{width:100%; text-align:left;} footer .social{margin:2.5% 0; text-align: left;} footer .social li{width:36px; height:36px;} footer .social img{width:36px;} footer #foot .franchises li{width:15%;} footer .social{margin:2.5% 0; text-align: left;} footer .social li{width:36px; height:36px;} footer .social img{width:36px;} footer .footer-logo{height:50px; margin:0 10px 0 0;} } #foot-social {padding:15px 0 !important;} #foot-social li {background:none !important;} #fine-print {color:#888;} /*- Sets background color & opacity for offer and banner overlay text -*/ .black0 div{background:rgb(0,0,0); background:rgba(0,0,0,0.0); color:#FFF;} .black10 div{background:rgb(0,0,0); background:rgba(0,0,0,0.1); color:#FFF;} .black20 div{background:rgb(0,0,0); background:rgba(0,0,0,0.2); color:#FFF;} .black30 div{background:rgb(0,0,0); background:rgba(0,0,0,0.3); color:#FFF;} .black40 div{background:rgb(0,0,0); background:rgba(0,0,0,0.4); color:#FFF;} .black50 div{background:rgb(0,0,0); background:rgba(0,0,0,0.5); color:#FFF;} .black60 div{background:rgb(0,0,0); background:rgba(0,0,0,0.6); color:#FFF;} .black70 div{background:rgb(0,0,0); background:rgba(0,0,0,0.7); color:#FFF;} .black80 div{background:rgb(0,0,0); background:rgba(0,0,0,0.8); color:#FFF;} .black90 div{background:rgb(0,0,0); background:rgba(0,0,0,0.9); color:#FFF;} .black100 div{background:rgb(0,0,0); background:rgba(0,0,0,1); color:#FFF;} .white0 div{background:rgb(255,255,255); background:rgba(255,255,255,0.0); color:#000;} .white10 div{background:rgb(255,255,255); background:rgba(255,255,255,0.1); color:#000;} .white20 div{background:rgb(255,255,255); background:rgba(255,255,255,0.2); color:#000;} .white30 div{background:rgb(255,255,255); background:rgba(255,255,255,0.3); color:#000;} .white40 div{background:rgb(255,255,255); background:rgba(255,255,255,0.4); color:#000;} .white50 div{background:rgb(255,255,255); background:rgba(255,255,255,0.5); color:#000;} .white60 div{background:rgb(255,255,255); background:rgba(255,255,255,0.6); color:#000;} .white70 div{background:rgb(255,255,255); background:rgba(255,255,255,0.7); color:#000;} .white80 div{background:rgb(255,255,255); background:rgba(255,255,255,0.8); color:#000;} .white90 div{background:rgb(255,255,255); background:rgba(255,255,255,0.9); color:#000;} .white100 div{background:rgb(255,255,255); background:rgba(255,255,255,1); color:#000;}