body{margin:auto; font-family:Arial, Helvetica, sans-serif; background:#fff; color:#555; -webkit-text-size-adjust: 100%;} button{display:inline-block; margin:1% 0; padding:7px 14px; border:1px; border-radius:0px; cursor:pointer; -webkit-appearance:button; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} button:hover{} .btn{display:inline-block; margin:1% 0; padding:7px 14px; cursor:pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .btn2{display:inline-block; margin:1% 0; padding:7px 14px; cursor:pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .owl-theme .owl-dots .owl-dot {margin: 0 !important;} .owl-theme .owl-dots .owl-dot span {width: 7px !important; height: 7px !important; margin: 5px 5px !important;} .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #515151 !important;} input,select,textarea{width:100%; margin:0 0 5px 0; padding:13px; font-size:14px; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:none; border-radius: 3px; border:1px solid #ddd; background: #fff; color:#333; box-sizing: border-box;} input[type='checkbox']{width:20px; -webkit-appearance: checkbox; padding:0;} input[type='radio']{width:20px; -webkit-appearance: radio; padding:0;} select{background:#fff url(//www.autosynergy.co.uk/assets/icons/select-arrow-black.png) no-repeat; background-position:right 10px center; background-size:22px;} .reg{max-width:300px; padding:12px; background:#fc0 url(//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:3px; text-transform:uppercase;} .reg.white{background:#fff url(//www.autosynergy.co.uk/assets/icons/bg-form-reg.png) 0 0 no-repeat; background-size:contain;} label{display:inline-block; padding:10px 1% 10px 0.5%; cursor: pointer;} textarea{font-family: Arial;} p{line-height:24px;} .w-auto{width:auto; padding-right:40px;} .w-100{width:99.7%;} .w-50{width:49.65%;} .w-33{width:32.95%;} .w-25{width:23%;} @media screen and (max-width: 1024px){ body{font-size:15px;} .w-100{width:99.5%;} .w-50{width:49.5%;} .w-33{width:32.8%;} .w-25{width:23%;} } @media screen and (max-width: 768px){ body{font-size:14px;} .w-100{width:100%;} .w-50{width:100%;} .w-33{width:100%;} .w-25{width:100%;} } .close{position:absolute; top:5%; right:5%; width:25px; height:25px; font-family:helvetica-thin, Arial, Verdana, Helvetica, sans-serif; font-size:36px; line-height: 18px; cursor:pointer; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .flip-h{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";} h1{font-size:28px; font-weight:normal; display:block; margin:0 0 0.5% 0; color:#111;} h2{font-size:24px; font-weight:normal; display:block; margin:0 0 0.5% 0; color:#111;} h3{font-size:22px; font-weight:normal; display:block; margin:0 0 0.5% 0; color:#111;} h4{font-weight:normal; display:block; margin:0 0 0.5% 0; color:#111;} @media screen and (max-width: 768px){ h1{font-size:26px;} h2{font-size:22px;} h3{font-size:20px;} } @media screen and (max-width: 480px){ h1{font-size:22px;} h2{font-size:20px;} h3{font-size:18px;} } a:link {color:#444;text-decoration:none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} a:visited {color:#444;text-decoration:none;} a:hover {color:#aa0000; text-decoration:none;} a.arrow{padding-left: 20px; text-decoration: none;} a.arrow:before {font-family: 'Font Awesome Kit'; content: '\e008'; margin: 0 5px 0 -15px;} .ui-datepicker-trigger{width:24px; margin:0 3px 0 -32px; cursor: pointer;} .ui-timepicker-div select{width:auto; padding:6px; background:none; -webkit-appearance:menulist;} .valign {position:relative;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);} .valign-contain{position: absolute; top:0; bottom:0; width:100%; height:100%;} .disclaimer-global{max-width:1320px; margin:auto; padding: 0 25px; font-size:11px; color:#777;} .disclaimer{font-size:11px; color:#777;} .mce-content ul{line-height:20px !important;} /* --------------------------------------- Below Fold Arrow ------------------------------------------*/ .below-fold{position:fixed; bottom:0; left:48%; z-index: 99; width:2%; padding:15px 1%; font-size:24px; text-align: center; background: rgb(255,255,255); background: rgba(255,255,255,0.9); cursor: pointer;} .below-fold.remove{display:none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} @media screen and (max-width:1024px){ .below-fold{left:46.5%; width:5%;} } @media screen and (max-width:768px){ .below-fold{display:none;} } /* --------------------------------------- Header ------------------------------------------*/ /* Mobile Menu Btn*/ .mobile-menu{display:none;} @media screen and (max-width: 768px){ .mobile-menu{display:block; float:right; width:28px; height:26px; padding:15px; 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;} .rotate-left {margin-top: 13px; position: relative; transform: rotate(-225deg); -webkit-transform: rotate(-225deg);} .rotate-right {margin-top: -1px; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg);} } @media screen and (max-width: 480px){ .mobile-menu{width:24px; height:28px; margin:0 !important; padding:11px;} } /* --------------------------------------- Main Structure ------------------------------------------*/ .full{clear:both; width:100%; overflow:hidden;} .full section{position:relative; width:100%; overflow:hidden;} .full section .wrapper{position:relative; margin:auto; max-width:1380px; box-sizing: border-box;} @media screen and (max-width: 768px){ .full section header{padding:30px 5%;} } .pad{padding:25px; box-sizing: border-box;} .pad.heading{padding:35px 25px 0;} @media screen and (max-width:1280px){ .pad{padding:2%;} .pad.heading{padding:2.5% 2% 0;} } @media screen and (max-width:768px){ .pad{padding:4%;} .pad.heading{padding:5% 4% 0;} } .wrapper-v4{margin:auto; max-width:1380px;} .wrapper-v4.intro{padding:60px; text-align: center;} .wrapper-v4.intro p{max-width: 1170px; margin:auto;} .wrapper-v4.pad{padding: 50px 25px;} .wrapper-v4.pad.heading{padding: 50px 25px 0;} @media screen and (max-width:1600px){ .wrapper-v4.intro{padding:40px;} .wrapper-v4.pad{padding: 40px 25px;} } @media screen and (max-width:768px){ .wrapper-v4.intro{padding:25px; text-align: left;} .wrapper-v4.pad{padding: 30px 25px;} } /* --------------------------------------- Mega Menu Items ------------------------------------------*/ .menus-list{margin:1% 0 2% 0;} .menus-list dt{display:inline-block; vertical-align: middle; width:24.5%; font-size:17px; line-height: 17px;} .menus-list a{display:block; vertical-align:top; margin:0 1% !important; padding:10px 0% !important; border-bottom:1px solid #fff; color:#555 !important;} .menus-list img{display:inline-block; vertical-align:middle; width:15%; margin:0 2%;} .menus-list.frans img{display:inline-block; vertical-align:middle; width:23%; margin:0 4% 0 1%;} .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.frans div{display:inline-block; vertical-align:middle; width:70%;} .menus-list b{font-weight:normal;} .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; vertical-align: top; background: #ddd;} .menus-list span{width:1.5%; padding:0 0 20% 0;} .menus-list img{width:16%;} .menus-list a{margin:0 !important; border-top:1px solid #ddd !important;} .menus-list a:hover{background: #eee;} .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 #aaa !important;} } .menu-single .menus-list{margin: 0;} .menu-single .menus-list dt{display:inline-block; vertical-align: middle; width:100%; font-size:16px; line-height: 16px; text-align: left;} .menu-single .menus-list a{display:block; padding:10px 3% !important;} @media screen and (max-width: 768px){ .menu-single .menus-list dt{width:50%;} .menu-single .menus-list a{display:block; padding:16px !important;} .menu-single .menus-list span{display: inline-block; padding:10px 0;} } @media screen and (max-width: 480px){ .menu-single .menus-list dt{width:100%; padding:0%; font-size:17px;} .menu-single .menus-list span{width:0%; padding:0 0 14% 0;} .menu-single .menus-list img{width:14%;} .menu-single .menus-list a{padding:2% 3% !important; border-bottom:1px solid #aaa !important;} } /* --------------------------------------- Model Menu (inc-model-menu.php) ------------------------------------------*/ .nav-model dt{position: relative; display:inline-block; vertical-align:top; width:20%; text-align: center;} .nav-model.extend dt{width:16.66%;} .nav-model dt div{padding: 3% 2%;} .nav-model dt .offer-note{position: absolute; display: inline-block; top:8%; right:5%; z-index:2; padding:4px 10px; background: #a00; color:#fff; border-radius:50px; font-size: 12px;} .nav-model dt .offer-note:hover{background: #fc0; cursor: pointer;} .nav-model dt .fuel-note{position: absolute; display: inline-block; top:21%; right:4%; z-index:2; padding:4px 10px; background: #018f23; color:#fff; border-radius:50px; font-size: 11px;} .nav-model dt .fuel-note i{font-size:24px;} .nav-model dt img{width:100%;} .nav-model dt a{font-size:14px;} .nav-model dt .ti-box{display:inline-block; width:100%; padding: 5px 0; background:#ccc;} @media screen and (max-width: 1024px){ .nav-model dt{width:20%;} .nav-model.extend dt{width:16.66%;} } @media screen and (max-width: 768px){ .nav-model dt{width:33.33%;} .nav-model.extend dt{width:33.33%;} .nav-model dt .fuel-note{top:10%; right:1%; padding:3px 7px; font-size: 11px;} .nav-model dt .offer-note{top:10%; right:1%; padding:3px 7px; font-size: 11px;} } @media screen and (max-width: 600px){ .nav-model dt{width:50%;} .nav-model.extend dt{width:50%;} } /* --------------------------------------- Control Bar / Page Nos ------------------------------------------*/ /* --------------------------------------- Feat Offers (Multiple Pages) ------------------------------------------*/ /* --------------------------------------- Home Page ------------------------------------------*/ /* --------------------------------------- Pages & Paras ------------------------------------------*/ /* --------------------------------------- Hero Parallax ------------------------------------------*/ #hero-parlax{position: relative; max-width:1400px; height:330px; margin:auto; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #hero-parlax .cover{position:absolute; top:0; left:0; width:100%; height:100%; padding:0 5%; box-sizing: border-box; background:rgba(0,0,0,0.05); color: #fff; text-shadow: 1px 1px 1px #000;} #hero-parlax .reg{max-width:300px;} @media screen and (max-width:1400px){ #hero-parlax{height:0; padding:0 0 21%; 0;} } @media screen and (max-width:1024px){ #hero-parlax{height:0; padding:0 0 30%; 0;} } @media screen and (max-width:768px){ #hero-parlax{height:0; padding:0 0 40%; 0;} #hero-parlax h1{font-size:22px;} } @media screen and (max-width:480px){ #hero-parlax{height:0; padding:0 0 60%; 0;} #hero-parlax h1{font-size:19px;} #hero-parlax p{font-size:12px;} } /* --------------------------------------- Franchise Choice ------------------------------------------*/ #fran-choice{padding:40px 0; text-align: center; border-bottom:1px solid #eee;} #fran-choice ul{max-width:1280px; margin:auto;} #fran-choice li.heading{width: 100%; padding:20px 0; cursor: none;} #fran-choice li{position: relative; display: inline-block; vertical-align: top; width: 12.5%; cursor: pointer;} #fran-choice li .status{position: absolute; top:0; right:30%; width:20px; height:20px; border-radius: 15px; background: #a00;} #fran-choice li img{width:66%;} @media screen and (max-width:768px){ #fran-choice li{width: 25%;} #fran-choice li img{width: 55%;} } @media screen and (max-width:480px){ #fran-choice li{width: 33%; margin:10px 0;} #fran-choice li img{width: 70%;} } /* --------------------------------------- Model Choice ------------------------------------------*/ #model-choice{padding:40px 0; margin:1px auto 0; text-align: center; background: #FCFCFC; border-bottom:1px solid #f5f7f9;} #model-range{padding:40px 0; margin:1px auto 0; text-align: center; background: #f6f6f6; border-bottom:1px solid #f5f7f9;} .new-model-caro li{position: relative; margin:0 8px;} .new-model-caro li h4{font-size:15px;} .new-model-caro li .vehicle{width:100%; border-bottom: 2px solid #f6f6f6; cursor: pointer; transition: all 0.2s ease-in-out;} .new-model-caro li .elite-logo{width: auto !important; height:22px !important;} .new-model-caro li a{display: block; padding:5px 10px; text-align: left;} .new-model-caro li .offer-note{position: absolute; display: inline-block; z-index:2; top:7%; right:5%; padding:4px 10px; background: #a00; color:#fff; border-radius:50px; font-size: 12px;} .new-model-caro li .offer-note:hover{background: #fc0; cursor: pointer;} .new-model-caro li .fuel-note{position: absolute; display: inline-block; top:21%; right:4%; z-index:2; padding:4px 10px; background: #018f23; color:#fff; border-radius:50px; font-size: 11px;} /* --------------------------------------- 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{min-height: 360px;} #veh-book #hero .wrapper{padding:5%; text-shadow: 1px 1px 1px #000;} #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:1280px; margin:auto; padding:1.2% 1.5%; 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{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(//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:vauxhall-bold, Arial, Helvetica, sans-serif; font-size:24px;} #veh-book #detail .result li.good{background:#f1c94b;} #veh-book #detail .result li.average{background:#bdc4cb;} #veh-book #detail .result li.poor{background:#cbb670;} #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:60%;} #veh-book #detail .postcode{float:right; width:39%;} @media screen and (max-width:768px){ #veh-book #hero{max-height: 360px;} #veh-book #hero .wrapper{padding:10% 5%;} #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: #F2F9FD;} #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:100%;} #veh-book #detail .postcode{float:none; width:100%;} #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 .prologue p{margin:15px 0; font-size:medium; line-height: 28px !important;} #nmo button{min-width:200px; padding:10px 0; } #nmo #tech-info{text-align:center;} #nmo #tech-info .item{display:inline-block; width:33.33%; height:0; padding:0 0 24%; position:relative;} #nmo #tech-info .inner{position:absolute; left:0; top:0; width:88%; height:88%; padding:6%; border-left:1px solid #eee;} #nmo #tech-info .last{border-right:1px solid #eee;} #nmo #tech-info h4{font-size:24px; margin:0 0 14px;} #nmo #tech-info .model-image{-webkit-filter:grayscale(100%); filter:grayscale(100%); opacity:0.5; filter:alpha(opacity=50); max-width:60%;} #nmo #tech-info #scale{width:80%; padding:2px 0; margin:0 auto 10px auto; border-left:1px solid #b1c8db; border-right:1px solid #b1c8db;} #nmo #tech-info #scale li{display:inline-block; width:6.25%;} #nmo #tech-info #scale li div{height:10px; border-right:1px solid #b1c8db;} #nmo #tech-info #dimensions{font-size:13px;} #nmo #tech-info #dimensions li{display:inline-block; margin:0 5%;} #nmo #tech-info .icons li{display:inline-block; width:23%; margin:0 4%;} #nmo #tech-info .icons img{width:80%;} @media screen and (min-width:1280px){ #nmo #tech-info .item{padding:0 0 22%;} } @media screen and (max-width: 1024px){ #nmo #tech-info .item{padding:0 0 28%;} #nmo #tech-info #dimensions{font-size:12px;} #nmo #tech-info #dimensions li{margin:0 4%;} } @media screen and (max-width: 768px){ #nmo #tech-info .item{display:block; width:auto; height:auto; padding:0;} #nmo #tech-info .inner{position:static; width:auto; height:auto; padding:10% 0; border:0; border-bottom:1px solid #eee;} #nmo #tech-info .last{border:0;} } /* --------------------------------------- New Style Vehicle Details (used-detail.php) ------------------------------------------*/ #veh-d .wrapper{max-width:1440px;} #veh-d #media{position: relative; float:left; width:50%; height:0; margin:2% 0 4% 0; padding:0 0 33.3% 0; background: #fff;} #veh-d #media #viewed{display:none; position: absolute; bottom:0%; left:0; z-index:50; width:96%; padding:2%; background: rgb(0,0,0); background: rgba(0,0,0,0.95); color:#fff; text-align: center; font-size: 15px;} #veh-d #media #attn{display:none; position: absolute; bottom:0%; left:0; z-index:49; width:96%; padding:2%; color:#fff; text-align: center; font-size: 15px;} #veh-d #media #sash-contain{position:absolute; top:0; left:0; width:50%; height:65%; background:rgba(0,0,0,0.0); overflow: hidden;} #veh-d #media .sash{position:absolute; top:35px; left:-45px; z-index:97; width: 200px; padding:7px 0; font-size: 17px; text-align: center; letter-spacing:-1px; background:#000; color:#fff; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} #veh-d #media .sash.special{z-index:5;} #veh-d #media .sash.reserved{z-index:6;} #veh-d #media #photo-caro{width:100%; height:0; padding:0 0 66.6% 0;} #veh-d #media #photo-caro li{border:1px solid #fff; line-height: 0;} #veh-d #media #photo-caro li img{width:100%;} #veh-d #media #photo-caro li.na{position:relative; width:100%; height:0; padding:0 0 66% 0; text-align: center;} #veh-d #media #photo-caro li.na img{width:25%; margin:auto;} #veh-d #media #photo-caro li.na b{display:block; margin:20px 0 5px; font-size:17px;} #veh-d #media #veh-video{display:none; position: absolute; top:0; left:0; z-index:50; width:100%; height:0; padding:0 0 75% 0; background: rgba(0,0,0,0.8);} #veh-d #media #veh-video .close{position: absolute; top:2%; right:1%; width:36px; height:36px; line-height: 31px; border-radius: 24px; text-align: center; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer;} #veh-d #media #veh-video .close:hover{} #veh-d #media #veh-video iframe{position:absolute;z-index:-100;width: 100%; height:100%;} #veh-d #media #options{position: absolute; top:3%; right:2%; text-align: center;z-index:2;} #veh-d #media #options li{position: relative; width:40px; height:40px; margin:1px 0 0; border-radius: 2px; background:rgba(0,0,0,0.7); cursor: pointer;} #veh-d #media #options li div{position: absolute; top:5%; right:0; z-index:1; width:40px; padding:12px 0 0; font-size:13px;} #veh-d #media #options li img{width:75%; padding:12.5% 0 0;} #veh-d #detail{float:right; width:45%; padding:2%;} #veh-d #detail #heading{position: relative; width:100%; margin:2% 0 2% 0;} #veh-d #detail #heading h1{font-size:32px; letter-spacing: -1px;} #veh-d #detail #heading #price{font-size:26px;} #veh-d #detail #heading #price small{font-size:16px;} #veh-d #detail #heading #price .was{color:#444;} #veh-d #detail .back{position: absolute; top:-25px; right:10px;} #veh-d #detail #desc{float:left; width:55%;} #veh-d #detail #desc ul{margin:2% 0 0 2%;} #veh-d #detail #desc li{padding:5px 0;} #veh-d #detail #desc li img{width:26px; margin:0 5px 0 0; vertical-align: middle;} #veh-d #detail #c2a{float:right; width:45%; text-align: center;} #veh-d #detail #c2a ul{padding:2% 0 2% 2%; text-align: center;} #veh-d #detail #c2a ul li{padding:5px 0;} #veh-d #detail #c2a ul img{width: 26px; vertical-align: text-bottom;} #veh-d #detail #c2a button{width:95%; text-transform: uppercase;} #veh-d #detail #c2a .telephone span{font-size:22px; letter-spacing: -1px;} #veh-d #detail #c2a .telephone p{text-align: center;} @media screen and (max-width: 1280px){ #veh-d #detail #heading h1{font-size:2.5vw;} #veh-d #detail #heading #price{font-size:2.0vw;} #veh-d #detail #heading #price small{font-size:1.25vw;} } @media screen and (max-width: 768px){ #veh-d #media{width:100%; height:0; margin:0; padding:0 0 66.6% 0;} #veh-d #media #photo-caro li{border:0;} #veh-d #media #options .zoom{display: none;} #veh-d #detail{width:90%; padding:5%;} #veh-d #detail #heading h1{font-size:4.7vw;} #veh-d #detail #heading #price{font-size:3.4vw;} #veh-d #detail #heading #price small{font-size:2.25vw;} } @media screen and (max-width: 600px){ #veh-d #detail #desc{width:100%;} #veh-d #detail #c2a{width:100%;} #veh-d #detail #c2a ul{margin:5% 0 0; padding:3% 0 15px 2%; border-top: 1px solid #ddd;} #veh-d #detail #c2a ul li{padding:8px 0;} #veh-d #detail #c2a ul img{width: 42px; vertical-align: middle;} } @media screen and (max-width: 480px){ #veh-d #detail #heading h1{font-size:6.8vw;} #veh-d #detail #heading #price{font-size:5.5vw;} #veh-d #detail #heading #price small{font-size:3.0vw;} } /* --------------------------------------- Branch Assoc (offer-detail.php) ------------------------------------------*/ .branch-assoc{padding:2% 0; text-align: center; background: #f6f6f6;} .branch-assoc ul{max-width:1280px;} .branch-assoc li{ margin:1.5% 0 0;} .branch-assoc li article{padding:2.5% 5%;} .branch-assoc li .photo{float:left; width:44%;} .branch-assoc li .photo img{border: 3px solid #fff; border-radius: 100%;} .branch-assoc li .address{float:right; width:50%; text-align: left;} .branch-assoc li .address h3{font-size:18px;} .branch-assoc li .address p{font-size:13px;} /* --------------------------------------- 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;} /* --------------------------------------- Part Exchange Widget ------------------------------------------*/ #px-widget{margin:1px 0; padding:2% 0; background:#f7f7f7 url(/images/bg-valuation.jpg) 50% 50% no-repeat; background-size: cover; 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;} @media screen and (max-width:768px){ #px-widget{background:#f7f7f7 url(/images/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:#4b9ed7;} .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;} #nm #models li{position: relative; display:inline-block; vertical-align:top; width:25%; padding:1% 1% 25px; box-sizing: border-box; cursor:pointer;} #nm #models li .cover{position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.70); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display:none;} #nm #models li .cover:hover{background: rgba(255,255,255,0.0);} #nm #models li .cover.sel{background: rgba(255,255,255,0.0);} #nm #models li .arrow{position:absolute; left:47%; bottom:0; z-index:1; width:0; height:0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 17px solid #f4f4f4; display:none;} #nm #models a{display:block;} #nm #models a h2{display:inline-block; vertical-align: top;} #nm #models .elite-logo{height: 21px;} #nm #models .price{font-size: small; color: #777;} #nm #models .model-child{position: relative; display:inline-block; vertical-align:top; width:25%;} #nm #models .model-child img{width:90%;} #nm .gridder-show{display: block; float: left; width: 110%; margin:0 -5%; padding:30px 5%; box-sizing: border-box; position: relative; background: #f4f4f4;} #nm .gridder-content {display: none;} #nm #models li .offer-note{position: absolute; display: inline-block; top:10%; left:5%; z-index:2; padding:5px 12px; color:#777; border-radius:50px; font-size: 11px;} #nm #models li .offer-note:hover{cursor: pointer;} #nm #models li .fuel-note{position: absolute; display: inline-block; top:10%; right:15%; z-index:2; padding:4px 10px; color:#777; border-radius:50px; font-size: 11px;} #nm #models li .fuel-note i{font-size:20px; color:#777;} #nm #models li .fuel-note .ic-fuel-electric{color:#090;} #nm #models h2{font-size:20px;} #nm #models .photo img{width:100%;} @media screen and (max-width: 1280px){ } @media screen and (max-width: 1024px){ #nm #models li{width:33.33%;} #nm #models li .cover{background: rgba(255,255,255,0.33);} #nm #models .model-child{width:33.33%;} #nm .gridder-show{width: 110%; margin:0 -5%; padding:2% 5%} } @media screen and (max-width: 768px){ #nm #models li{width:50%;} #nm #models .model-child{width:50%;} } @media screen and (max-width: 480px){ #nm #models li{width:100%;} #nm #models li .cover{background: rgba(255,255,255,0.10);} } /* --------------------------------------- Branches Include ------------------------------------------*/ #branches-inc{padding:50px 0; background:#fafafa; text-align: center;} #branches-inc .snip{padding:0 5%;} #branches-inc .search{} #branches-inc .search input{width:140px; padding:10px 0; text-transform:uppercase; text-align:center; border-radius: 60px;} #branches-inc .search button{margin:0;} #branches-inc .search .load{width:40px; display:none;} #branches-inc ul{max-width:1400px; text-align: center; margin:auto; padding: 25px 0;} #branches-inc ul li{position: relative; display:inline-block; vertical-align: top; width:25%; margin:0 0 20px 0; padding:10px; box-sizing: border-box;} #branches-inc ul .photo{display:inline-block; vertical-align: top; width:30%; height:0; margin:0 0 0 2%; padding:0 0 30% 0; border-radius:100%; border:3px solid #fff; overflow: hidden; cursor: pointer;} #branches-inc ul .photo img{width:140%;} #branches-inc ul .photo.na{background: #eee;} #branches-inc ul .photo.na img{width:75%; padding:20% 0 0;} #branches-inc ul h4{line-height: 20px;} #branches-inc ul .specialist-logo{position: absolute; top: 2%; left:32%; width:24px;} #branches-inc ul .address{display:inline-block; vertical-align: top; width:63%; padding:0 10px; box-sizing: border-box; text-align: left;} #branches-inc ul p{margin:0 0 4px 0; font-size: smaller; line-height: 17px;} #branches-inc ul .distance{font-size:12px;} #branches-inc ul .distance i{margin:0 0 0 -5px; font-size:24px; vertical-align: middle;} #branches-inc ul .distance span{} @media screen and (max-width:1170px){ #branches-inc ul li{width:33.33%;} } @media screen and (max-width:768px){ #branches-inc ul li{width:50%;} #branches-inc button{width:auto !important;} } @media screen and (max-width:550px){ #branches-inc ul li{width:100%;} } /* --------------------------------------- Used Search (inc-used-search.php) ------------------------------------------*/ .used-search{background:#eee; color:#444; border-bottom:1px solid #d4d4d4;} .used-search .wrapper{position: relative; padding:60px 0;} .used-search .wrapper.status-true{padding:2% 0 0 !important;} .used-search b{display:block; font-weight:normal; font-size: 26px; letter-spacing: -1px; text-align: center;} .used-search ul{margin:0.5% 1%;} .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 .type-title{display:inline-block; vertical-align: middle;} .used-search .payment-type ul{display:inline-block; vertical-align: middle; width:60px; height:30px; margin:0; border:1px solid #FFF; border-radius:5px; overflow:hidden; font-size:16px; text-align: center; background: #aaa; box-shadow: 1px 1px 1px #666 inset;} .used-search .payment-type ul li{float:left; width:28px; height:28px; border-radius:3px; margin:1px;} .used-search .payment-type ul label{display:block; padding:8px 0; height:28px; cursor:pointer;} .used-search .payment-type ul li.sel{background:#FFF; cursor:default;} .used-search input[type="text"]{width:97%;} .used-search select{width:97%;} .used-search .filter{display:inline-block; vertical-align: top; width:90%; margin: 0 0; padding:3% 0; border:0px solid #4b9ed7; 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{border-top:1px solid #ddd;} .used-search #filter-options .sel{color:#fff;} .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 i{font-size: 32px; color:#777;} .used-search .bodystyle small{display: block; margin:5px 0 0;} .used-search .bodystyle input{width:20px;} .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 -5px 0;text-align:center;} .used-search #filter-status li{width:99.6%; box-sizing: border-box;} .used-search #filter-status a{display:block; padding:10px; border-radius: 4px 4px 0 0; background: #ccc;} .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) ------------------------------------------*/ #gallery-media{background:#fafafa;} #gallery-media p{font-size:12px; text-align: center;} #gallery-tiles{padding:4% 0;} #gallery-tiles .grid-sizer, #gallery-tiles li{width:20%;} #gallery-tiles li{float:left;} #gallery-tiles li .inner{width:100%; height:0; padding:0 0 75%; position:relative;} #gallery-tiles li .inner div{position:absolute; left:1.8%; top:2.4%; width:96.4%; height:95.2%; overflow:hidden;} #gallery-tiles li .inner img{width:100%;} #gallery-tiles li .inner a{position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0; filter:alpha(opacity=0);} #gallery-tiles li .inner a:hover{opacity:0.5; filter:alpha(opacity=50);} #gallery-tiles li .inner a img{position:absolute; left:50%; top:50%; width:40px; margin:-20px 0 0 -20px;} #gallery-tiles li .inner iframe{width:100%; height:100%;} #gallery-tiles li.item-2x1{width:40%;} #gallery-tiles li.item-2x1 .inner{padding:0 0 37.5%;} #gallery-tiles li.item-2x1 .inner div{left:0.9%; width:98.2%;} #gallery-tiles li.item-2x2{width:40%;} #gallery-tiles li.item-2x2 .inner div{left:0.9%; top:1.2%; width:98.2%; height:97.6%;} #gallery-tiles li.item-3x1{width:60%;} #gallery-tiles li.item-3x1 .inner{padding:0 0 25%;} #gallery-tiles li.item-3x1 .inner div{left:0.6%; width:98.8%;} #gallery-tiles li .inner.ttl div{left:8%; top:22%; width:84%; height:56%; font-size:26px;} #gallery-tiles li .inner.ttl h4{font-size:46px; margin:0;} #gallery-mobile{display:none; background:#fafafa; padding:3% 0; text-align:center;} @media screen and (max-width: 1280px){ #gallery-tiles li .inner.ttl div{font-size:2vw;} #gallery-tiles li .inner.ttl h4{font-size:3.5vw;} } @media screen and (max-width: 600px){ #gallery-media{display:none;} #gallery-mobile{display:block;} } .gallery-caro{margin:2% 0;} .gallery-caro li{padding:0 1%;} .gallery-caro img{width:100%;} @media screen and (max-width: 768px){ #gallery-mobile{padding:7% 0;} .gallery-caro li{padding:0;} } /* --------------------------------------- News ------------------------------------------*/ #news-list{float:left; width:65%;} #news-list li{padding:5%; border-bottom: 1px solid #eee;} #news-list .author{font-size:14px; color:#777;} #news-list .media{float:right; width:40%; margin: 1% 0 1% 2%;} #news-list .media img{width:100%;} #news-extra{float:right; width:25%; padding:5%;} #news-detail{float:left; width:65%;} #news-detail article{padding:5%; border-bottom: 1px solid #eee;} #news-detail .media{float:right; width:100%; margin: 2% 0;} #news-detail .media img{width:100%;} #news-detail .author{font-size:14px; color:#777;} @media screen and (max-width:768px){ #news-list{width:100%;} #news-list .media{float:right; width:100%; margin:3% 0;} #news-extra{width:90%; padding:5%;} #news-detail{width:100%;} } .searchfield{position:relative; display:inline-block; width:100%; margin:5% 0;} .searchfield input{width:92%; padding:4%; font-size:15px; background: #f3f3f3; border: 1px solid #eee; border-radius: 50px;} .searchfield button{position: absolute; top:2%; right:2%; z-index:2; margin:2.2%; padding:0; background: transparent;} .searchfield button img{width:28px; cursor: pointer;} /* --------------------------------------- Author ------------------------------------------*/ #author{padding:5% 0 0 0; text-align: center;} #author .avatar{padding:5% 25%;} #author .avtr{font-size: 72px;} #author b{font-size: 20px; font-weight: normal;} #author p{font-size: 14px; line-height: 18px;} @media screen and (max-width:1280px){ #author .avtr{font-size: 6.1vw;} } @media screen and (max-width:768px){ #author .avatar{padding:5% 30%;} #author .avtr{font-size: 16.2vw;} } /* --------------------------------------- Avatars ------------------------------------------*/ .avtr{width:100%; height:0; margin:auto; padding:0 0 100% 0; background:#ddd; color:#fff; border-radius:100%; text-align: center; overflow: hidden;} .avtr img{width:100%;} .avtr div{width:100%; height:0; padding: 17.5% 0 82.5% 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; 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;} } .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;} } /* --------------------------------------- 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.98); color:#fff; box-shadow: 0px 3px 8px -6px #000;} #fuel-save div{padding:5%;} #fuel-save b{display: block; font-size:20px;} #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:#F2F9FD; 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%;} } /* --------------------------------------- CALL BACK REQUEST ------------------------------------------*/ #call-back{display:none; position:fixed; top:0; left:25%; z-index:101; width:50%; color:#fff; box-shadow: 0px 3px 8px -6px #000;} #call-back div{padding:5%;} #call-back b{display: block; font-size:20px;} #call-back li{position:absolute; top:0; left:0; width:100%; height:100%; background:#444;} #call-back li.loading{z-index:4; background:#F2F9FD; text-align: center; color:#444;} #call-back li.loading div{padding:25% 5%;} #call-back li.thanks{z-index:3; background:#444; text-align: center;} #call-back li.thanks div{padding:25% 5%;} #call-back li img{width:36px;} #call-back li.start{position:static;} #call-back .nameTitle{width:25%;} #call-back .firstName{float:right; width:57%;} #call-back .prefBranch{width:50%;} #call-back .dept{float:right; width:32%;} @media screen and (min-width:1280px){ #call-back{left:32.5%; width:35%;} #call-back div{padding:6%;} } @media screen and (max-width:1024px){ #call-back{left:10%; width:80%;} #call-back div{padding:6%;} } @media screen and (max-width:768px){ #call-back{left:8%; width:86%;} #call-back button{width:30%;} } @media screen and (max-width:600px){ #call-back{left:0; width:100%;} #call-back 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 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:24%; margin:0.5%; background: #eee; cursor:pointer; overflow: hidden;} #ur #gallery #rep .heading{min-height:auto; font-size:20px;} #ur #gallery #rep p{line-height:13px;} #ur #gallery .attn{width:90%; padding:2% 5%; background:#222; 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-size: 17px; letter-spacing:-1px; background:#000; color:#fff; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} #ur #gallery .sash.special{z-index:5;} #ur #gallery .sash.reserved{z-index:6;} #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:50px; padding:3% 4% 4% 5%; background:#00f; 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 #00f;} #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:50%;} #ur #gallery .location{padding:3% 5%;} #ur #gallery .location img{float:left; width:16%; margin:0 2% 0 0;} #ur #gallery .location b{display:block; font-weight:normal; font-size:18px;} #ur #gallery .location p{margin:0; font-size:18px;} #ur #gallery .fuel-save{width:90%; padding:2% 5%; background:#009035; color:#fff;} #ur #gallery .price {height:85px;} #ur #gallery .price dt{display: inline-block; vertical-align: bottom; width:40%; padding:2% 5%;} #ur #gallery .price dt small{display:block;} #ur #gallery .price dt b{font-size:22px; font-weight: normal;} #ur #gallery .price dt .price-month small{font-size:12px; color:#444;} #ur #gallery .price dt.save{width:90%; padding:0 5% 2%; font-size: 13px;} @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:#a00; 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%;} } /* New tabs on Used Detail */ .tab-menu{padding:1% 0 0;} .tab-menu ul{max-width:1280px; margin:auto; text-transform: uppercase;} .tab-menu li{display: inline-block; vertical-align: bottom; padding:15px 3%; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .tab-menu li:hover{border-bottom: 2px solid #555; background:#fff;} .tab-menu li.sel{padding:20px 3%;border-bottom: 2px solid #fff; background: #fff; box-shadow: 0px -5px 8px -6px #000;} @media screen and (max-width: 1024px){ .tab-menu li{padding:15px 2%; font-size: 14px;} } @media screen and (max-width: 768px){ .tab-menu{display:none;} } /* New tab content on Used Detail */ .tab-content{margin:0 0 1px 0;} .tab-content .wrapper{padding:2%;} @media screen and (max-width: 768px){ .tab-content .wrapper{padding:1% 5% 5%;} } .rep-example{background: #eee; width:100%;} .rep-example tr{background: #fff; padding:3%;} .rep-example td{padding:3%;} .rep-example p{line-height:12px;} /* --------------------------------------- Countdown Clock (offer-detail) ------------------------------------------*/ .countdown-ti{font-size: 11px; text-transform: uppercase;} #countdown{padding:1px 0;} #countdown li{width:32px; margin:0 6px 0 0; display:inline-block; font-size:11px; text-align:center;} #countdown li div{width:100%; padding:7px 0; margin:0 0 4px; background:#222; border-radius:2px; color:#fff; font-size:18px; overflow:hidden; position:relative;} #countdown li div span{position:relative; z-index:2;} #countdown li div i.line{display:block; position:absolute; left:0; top:50%; width:100%; height:10px; margin:-10px 0 0; border-bottom:1px solid #000; z-index:3;} #countdown li div i.grad{display:block; position:absolute; left:0; bottom:0; width:100%; height:50%; background:#333; background:-webkit-linear-gradient(#333,#222); background:-o-linear-gradient(#333,#222); background:-moz-linear-gradient(#333,#222); background:linear-gradient(#333,#222); z-index:1;} #countdown li div b{display:block; position:absolute; left:0; top:0; width:100%; height:10px; margin:-10px 0 0; background:#000; z-index:4;} #countdown li div.attn{background:#b00;} #countdown li div.attn i.line{border-bottom:1px solid #a00;} #countdown li div.attn i.grad{background:#c00; background:-webkit-linear-gradient(#c00,#a00); background:-o-linear-gradient(#c00,#a00); background:-moz-linear-gradient(#c00,#a00); background:linear-gradient(#c00,#a00);} #countdown li div.attn b{background:#a00;} #expiry-date{padding:1% 0; font-size:22px;} /* --------------------------------------- Remind Bar (used-detail.php, new-model-overview.php) ------------------------------------------*/ #remind-bar{position: fixed; top:0; left:0; z-index: 99; width:100%; border-bottom: 1px solid #fff; background:rgb(255,255,255); background:rgba(255,255,255,0.99); box-shadow: 0px 4px 8px -6px #000;} #remind-bar ul{max-width: 1280px; margin: auto; height:80px;} #remind-bar li{float:left;} #remind-bar li div{padding:10px 15px 0;} #remind-bar li.photo{padding:0; line-height: 0;} #remind-bar li.photo img{height:80px;} #remind-bar li b{display:block; font-size: 16px;} #remind-bar li b i{font-style: normal;} #remind-bar li p{margin:0 0 5px 0;} #remind-bar li.veh-info span{font-size: 15px;} #remind-bar li.contact{float:right; text-align: right;} #remind-bar li.contact button{padding:5px 12px;} @media screen and (max-width: 1024px){ #remind-bar li b i{display:none;} } @media screen and (max-width: 768px){ #remind-bar ul{display:none;} } /* --------------------------------------- Tables ------------------------------------------*/ table{width:99%; margin:2% 0; background: #ddd; border-spacing:1px;} table th{padding:12px 25px; font-weight:normal; text-align:left;} table tr{background:#fff;} table td{padding:12px 25px;} @media screen and (max-width: 1024px){ table{font-size: 14px;} table td{padding:12px 20px;} } @media screen and (max-width: 768px){ table{width:100%; font-size: 13px;} table td{padding:12px 16px;} } @media screen and (max-width: 480px){ table{font-size: 12px;} table td{padding:10px 12px;} } /* --------------------------------------- Finance Styling (inc-finance.php) ------------------------------------------*/ #finance-detail li{display:inline-block; width:23.6%; margin:0 0.5%; vertical-align:top; background:#ddd;} #finance-detail li.plus{width:32%;} #finance-detail table{width:100%; border-spacing:1px;} #finance-detail table th{padding:3%; font-size:18px; font-weight:normal; 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-weight:normal; 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%;} } /* --------------------------------------- Save & Compare {save-list.php} ------------------------------------------*/ #compare{min-height: 500px;} #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; z-index: 2; width:30px; height:24px; padding:6px 0 0 0; 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 (Global) ------------------------------------------*/ #map{height:460px;} @media screen and (max-width: 768px){ #map{height:400px;} } @media screen and (max-width: 480px){ #map{height:340px;} } /* --------------------------------------- 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 60% 0; overflow: hidden;} #lr #location-list .photo img{width:100%;} #lr #location-list .detail{padding:6% 5% 5%;} #lr #location-list .detail .logo{float:right; height:32px;} #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 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 button{margin:1% 5%;} #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:#00f;} #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%;} @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;} }*/ /* --------------------------------------- Map Include (Single Location only) ------------------------------------------*/ #map-wrapper{position: relative;} #map-wrapper button{position: absolute; bottom:0; left:40%; z-index: 9; width:20%; padding:10px 20px;} @media screen and (max-width: 768px){ #map-wrapper button{left:10%; bottom:20%; width:80%;} } @media screen and (max-width: 600px){ #map{width:100%; height:600px;} } /* --------------------------------------- Staff Carousel ------------------------------------------*/ #staff{margin:40px 0 0; padding:40px 0; text-align: center; background: #fcfcfc;} .staff-caro{margin:auto; padding:20px 0; text-align: center;} .staff-caro li{display:inline-block; vertical-align:top; padding:5%;} .staff-caro .photo{width:160px; height:160px; margin:auto auto 20px; border-radius: 100%; background:#fff; border:3px solid #ddd; overflow: hidden; font-size: 48px;} .staff-caro .photo img{width:100%; border-radius: 100%; } .staff-caro b{display: block; font-size:18px; font-weight: normal;} .staff-caro span{display: block; font-size:14px;} .staff-caro1{max-width:300px;} .staff-caro2{max-width:600px;} .staff-caro3{max-width:900px;} .staff-caro4{max-width:1200px;} .staff-caro5{max-width:1500px;} .staff-caro6{max-width:1800px;} .staff-caro7{max-width:2100px;} /* --------------------------------------- Job Results ------------------------------------------*/ /* --------------------------------------- Job Detail ------------------------------------------*/ /* --------------------------------------- Reviews (reviews.php) ------------------------------------------*/ #reviews #hero-banner{min-height:420px; padding:2% 0 0; background:#eee url(/images/hero/bg-reviews.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; text-shadow: 1px 1px 0px #fff; 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%;} } #gallery-container{float:left; width:100%; min-height: 600px; background: #eee;} #gallery-container.open{width:80%;} .gallery-grid li{display:inline-block; width:20%; margin:0%; background:#fff;} .gallery-grid article{ padding:8%; border:1px solid #eee;} .gallery-grid .comment{font-size:18px; line-height:24px;} .gallery-grid .comment i{font-size:22px;} .gallery-grid .profile{padding:3% 0; overflow:hidden;} .gallery-grid .profile .avatar{float:left; width:35%; height:0; padding:0 0 35% 0; border-radius:100px; background:#CCC; overflow:hidden;} .gallery-grid .profile .avatar.mr{background:#009afa;} .gallery-grid .profile .avatar.mrs{background:#ffcc00;} .gallery-grid .profile .avatar.miss{background:#fe65dc;} .gallery-grid .profile .avatar img{width:100%;} .gallery-grid .profile .detail{float:left; width:61%; padding:1% 0 2.5% 4%;} .gallery-grid .profile .detail .stars{width:60%;} .gallery-grid .profile .detail b{display:block; font-weight:normal;} .gallery-grid .profile .purchase{border-top:1px solid #eee; margin:3% 0 0; padding:3% 0 0; font-size:11px;} @media screen and (max-width:1600px){ .gallery-grid li{width:25%;} .gallery-grid li.open{width:33.33%;} } @media screen and (max-width:1280px){ #gallery-container.open{width:70%;} .gallery-grid li{width:33.33%;} } @media screen and (max-width:980px){ .gallery-grid li{width:50%;} } @media screen and (max-width:768px){ #gallery-container.open{width:100%;} } @media screen and (max-width:550px){ .gallery-grid li{width:100%;} } /* --------------------------------------- Filter Options (staff.php) ------------------------------------------*/ #filter-bar{background: rgb(255,255,255); background: rgba(255,255,255,0,95); border-bottom: 1px solid #ddd; box-shadow: 0px 2px 5px -6px #000;} #filter-bar .container{margin:auto; max-width:1280px; padding:20px 35px;} #filter-bar .container .search{float:left; width:160px;} #filter-bar .container .sorted{float:right; width:90px; margin:-7px 0 0 0;} #filter-bar select{padding:8px 16px; font-size: 14px;} #filter-bar #on-off{float: right; display:inline-block; margin:-7px 0 0 10px; padding:7px 14px 6px 14px; border:1px solid #ddd; border-radius: 5px; cursor: pointer;} /* --------------------------------------- Filters Content (staff.php) ------------------------------------------*/ .filter{float:right; width:0%; height:100%; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .filter.open{width:20%; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;} .filter .container{height:100%;} .filter #filter-content{padding:7%; border-left:1px solid #eee; } .filter #filter-content ul{margin:0 0 20px 0;} .filter #filter-content li{padding:1%;} .filter #filter-content li.heading{border-bottom:1px solid #eee; margin:0 0 10px 0; padding-bottom: 10px;} .filter #filter-content li input{vertical-align: middle;} /* --------------------------------------- Global Enq Form ------------------------------------------*/ .enq-form{position: relative; margin:auto; background: #eee; border-bottom: 1px solid #eee; overflow: hidden;} .enq-form .left{display: inline-block; vertical-align: top; width:49%; padding:0 1% 0 0;} .enq-form .right{display: inline-block; vertical-align: top; width:49%; padding:0 0 0 1%;} .enq-form p{padding:0; } .enq-form .close{top:30px; right:3%;} .enq-form li.form-content{position: static;} .enq-form li.form-content div{text-align: left;} .enq-form li{position: absolute; top:0; left:0; width:100%; height: 100%; text-align: center;} .enq-form li .container{position:relative; max-width:1400px; margin:auto; padding:50px 2.5% 60px; box-sizing: border-box} .enq-form .disclaimer{margin:20px 0; font-size:10px; color:#777; line-height:16px; text-align: center;} .enq-form li.load{z-index: 4; background: #f4f4f4;} .enq-form li.load img{width:32px;} .enq-form li.load h3{font-size:18px;} .enq-form li.thanks{z-index: 3; background: #eee;} .enq-form li.thanks img{width:200px;} .enq-form li.thanks h3{font-size:24px;} .enq-form .name-title{width:30%; margin-right:1%;} .enq-form .first-name{width:69%;} .enq-form .surname{width:100%;} .enq-form .email{width:100%;} .enq-form .telephone{width:40%; margin-right:1%;} .enq-form .house-name-no{width:31%; margin-right:1%;} .enq-form .postcode{width:27%; text-transform: uppercase;} .enq-form .pref-branch{width:49.5%;} .enq-form .pref-date{width:49.5%;} .enq-form .reg{vertical-align: top; width:49.5%;} @media screen and (max-width:1280px){ .enq-form li .container{padding:30px 3%;} } @media screen and (max-width:768px){ .enq-form li .container{padding:5%;} .enq-form .close{top:2%; right:3%;} .enq-form .left{width:100%; padding:0;} .enq-form .right{width:100%; padding:0;} .enq-form .pref-branch{width:100%;} .enq-form .pref-date{width:100%;} } @media screen and (max-width:480px){ .enq-form .close{top:1%; right:3%;} .enq-form .name-title{width:100%;} .enq-form .first-name{width:100%;} .enq-form .surname{width:100%;} .enq-form .email{width:100%;} .enq-form .telephone{width:100%;} .enq-form .house-name-no{width:100%;} .enq-form .postcode{width:100%; text-transform: uppercase;} } /* --------------------------------------- Scroll to Top ------------------------------------------*/ #top-scroll{position:fixed;right:0;bottom:80px; z-index:999;display:none; padding:10px;box-sizing:border-box;color:#fff;font-size:20px;background:rgb(0,0,0);background:rgba(0,0,0,0.6);cursor:pointer;} /* --------------------------------------- Notifications ------------------------------------------*/ /* --------------------------------------- journey links for SEO ------------------------------------------*/ .journey-links{max-width:1280px; 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-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(//www.autosynergy.co.uk/assets/icons/bullet-arrow-333.png) no-repeat; background-position:2% center; background-size:16px;} @media screen and (max-width:1280px){ .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 ------------------------------------------*/ /* --------------------------------------- Cookie Notice ------------------------------------------*/ #cookie{position:fixed; left:0; bottom:0; z-index:9999; width:90%; padding:10px 5%; background:rgb(0,0,0); background:rgba(0,0,0,0.9); color:#fff; text-align: center;} #cookie div{margin:auto; max-width:1280px;} #cookie p{display: inline-block; margin:0; padding:5px 10px 5px 5px; font-size: 13px;} #cookie button{margin:0; padding:6px 20px;} #cookie a{color:#fff;} @media screen and (max-width: 768px){ #cookie{padding:10px 5%; text-align: center;} #cookie p{font-size: 10px; line-height: 16px;} #cookie button{float:none; margin:auto;} } /* --------------------------------------- Alerts ------------------------------------------*/ /* --------------------------------------- Breadcrumbs ------------------------------------------*/ .breadcrumbs{clear:both; width:100%; min-height:10px; background:#f7f7f7; color:#888;} .breadcrumbs div{max-width:1280px; margin:auto; padding: 0 2%; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; box-sizing: border-box;} .breadcrumbs a{display:inline-block; padding:15px 20px 15px 0; color:#888;} .breadcrumbs span{display:inline-block; padding:15px 20px 15px 0;} @media screen and (max-width: 768px){ .breadcrumbs{display:none;} } /* --------------------------------------- Footer ------------------------------------------*/ footer{clear:both; width:100%; margin:0; background:#f7f7f7; color: #666; border-top:1px solid #DDD;} footer #legal{border-bottom:1px solid #ddd;} footer #legal ul{max-width:1280px; margin:auto; padding: 0 2%; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; box-sizing: border-box;} footer #legal ul li{display: inline-block; vertical-align: top; padding:15px 20px 15px 0;} footer #legal ul li.web21st{float:right;} footer #foot{max-width:1280px; margin:auto; padding:30px 2%; font-size: 12px; box-sizing: border-box;} footer #foot p{line-height: 18px;} @media screen and (max-width:768px){ footer #legal ul{padding:0;} footer #legal ul li{width:90%; padding:15px 5%; border-bottom: 1px solid #fff;} footer #legal ul li.web21st{float:none;} footer #foot{padding:5%;} } /* --------------------------------------- Tooltip Override Styles ------------------------------------------*/ .tooltipster-finance{border-radius:5px; border:2px solid #000; color: #fff;} .tooltipster-finance table{width:100%; background: #000;} .tooltipster-finance table td{padding:3px; background: #000;} .tooltipster-finance .tooltipster-content {font-family: Arial, sans-serif; font-size: 12px; line-height: 14px; overflow: hidden;} .left.black0{background: -moz-linear-gradient(right, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black10{background: -moz-linear-gradient(right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black20{background: -moz-linear-gradient(right, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.20) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.20) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black30{background: -moz-linear-gradient(right, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black40{background: -moz-linear-gradient(right, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.40) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.40) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black50{background: -moz-linear-gradient(right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.50) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.50) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black60{background: -moz-linear-gradient(right, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black70{background: -moz-linear-gradient(right, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.70) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.70) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black80{background: -moz-linear-gradient(right, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.80) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.80) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black90{background: -moz-linear-gradient(right, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,0.90) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,0.90) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.black100{background: -moz-linear-gradient(right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black0{background: -moz-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black10{background: -moz-linear-gradient(left, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black20{background: -moz-linear-gradient(left, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.20) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.20) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black30{background: -moz-linear-gradient(left, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black40{background: -moz-linear-gradient(left, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.40) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.40) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black50{background: -moz-linear-gradient(left, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.50) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.50) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black60{background: -moz-linear-gradient(left, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black70{background: -moz-linear-gradient(left, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.70) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.70) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black80{background: -moz-linear-gradient(left, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.80) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.80) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black90{background: -moz-linear-gradient(left, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,0.90) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,0.90) 0%,rgba(0,0,0,0) 100%); color: #fff;} .right.black100{background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); color: #fff;} .left.white0{background: -moz-linear-gradient(right, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white10{background: -moz-linear-gradient(right, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.10) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.10) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white20{background: -moz-linear-gradient(right, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.20) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.20) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white30{background: -moz-linear-gradient(right, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.30) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.30) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white40{background: -moz-linear-gradient(right, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.40) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.40) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white50{background: -moz-linear-gradient(right, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.50) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.50) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white60{background: -moz-linear-gradient(right, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white70{background: -moz-linear-gradient(right, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.70) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.70) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white80{background: -moz-linear-gradient(right, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.80) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.80) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white90{background: -moz-linear-gradient(right, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,0.90) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,0.90) 0%,rgba(255,255,255,0) 100%); color: #222;} .left.white100{background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white0{background: -moz-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.0) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white10{background: -moz-linear-gradient(left, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.10) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.10) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white20{background: -moz-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.20) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.20) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white30{background: -moz-linear-gradient(left, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.30) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.30) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white40{background: -moz-linear-gradient(left, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.40) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.40) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white50{background: -moz-linear-gradient(left, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.50) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.50) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white60{background: -moz-linear-gradient(left, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white70{background: -moz-linear-gradient(left, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.70) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.70) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white80{background: -moz-linear-gradient(left, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.80) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.80) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white90{background: -moz-linear-gradient(left, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.90) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.90) 0%,rgba(255,255,255,0) 100%); color: #222;} .right.white100{background: -moz-linear-gradient(left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(left, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to left, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); color: #222;}