/* normalize.css v3.0.2 | MIT License | git.io/normalize ========================================================================== */ img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0} /* SLIDER STYLES ========================================================================== */ .embla{position:relative}.embla__viewport{overflow:hidden;width:100%}.embla__viewport.is-draggable{cursor:move;cursor:grab}.embla__viewport.is-dragging{cursor:grabbing}.embla__container{display:flex;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent}.embla__container.flex{flex-wrap:nowrap;}.embla__slide{position:relative;width:100%;flex-shrink:0}.embla__slide__img,.embla__slide__video{display:block;width:100%;height:auto}.full-height .embla__slide__inner{position:relative;overflow:hidden;height:100vh}.embla__slide__video,.full-height .embla__slide__img{width:100%;height:100%;object-fit:cover;object-position:center}.embla__button{outline:0;cursor:pointer;background-color:transparent;touch-action:manipulation;position:absolute;z-index:1;top:50%;transform:translateY(-50%);border:0;width:30px;height:30px;justify-content:center;align-items:center;fill:#1bcacd;padding:0}.embla__button:disabled{cursor:default;opacity:.3}.embla__button__svg{width:100%;height:100%}.embla__button--prev{left:50px}.embla__button--next{right:50px}.embla__dots{display:flex;list-style:none;justify-content:center}.embla__dot{cursor:pointer;position:relative;display:flex;align-items:center;}.embla__dot:last-child{margin-right:0}@media(max-width: 500px) {.embla__slide__inner {width:100%;height:100%;}.embla__slide__video {max-height: none !important;}}@media(max-width: 1024px) {.embla__button--prev{left:30px}.embla__button--next{right:30px}} .embla-thumbs .embla__slide { width: 33.3333%; min-width: 33.3333%; } /* BASIC STYLES ========================================================================== */ .parallax,section{background-size:cover;position:relative}.m-menu .parent>a:after,.parallax,section{background-repeat:no-repeat}.pika-table abbr{border-bottom:none;cursor:help}[class*=" icon-"],[class^=icon-]{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}html{font-size:14px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{line-height:1.4em}section{margin:0;background-position:center}h1,h2,h3,h4{display:block;width:100%;margin:0 0 10px;line-height:1.1em}.clearfix:after,.clearfix:before{content:" ";display:table}*+h2,*+h3,*+h4{margin-top:10px}a{text-decoration:none;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}a:hover{text-decoration:underline}.btn,.btn:hover,.m-menu a,a.btn:hover{text-decoration:none}input[type=button],input[type=submit]{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}img{max-width:100%;height:auto}button:focus{outline:0}*,:after,:before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}.wrapper{position:relative;width:100%;margin:0 auto;padding:10px 20px;line-height:1.5em;font-size:15px}.t-light{}.t-left{text-align:left}.t-right{text-align:right}.t-center{text-align:center;list-style-position:inside}.inline-list{margin:0;padding:0;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-wrap:wrap}.inline-list li{float:left;list-style:none}.anchor{position:relative;visibility:hidden;display:block}.hidden{display:none!important}iframe[name=google_conversion_frame]{height:0!important;width:0!important;line-height:0!important;font-size:0!important;margin-top:-13px;float:left}.slider-video video{display:block}.error-page form{display:none!important}.parallax{background-attachment:fixed;background-position:top center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.content ul,.content ol{padding-left:20px}.content ul ul {margin-top: 10px;}img:not([src]){visibility:hidden}img[data-src],img[data-srcset]{display:block;min-height:1px}.equal-height>*,.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex}.loaded{animation-name:fadeIn;animation-duration:.4s;animation-timing-function:cubic-bezier(0,0,.4,1);animation-fill-mode:forwards; margin: 0;}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.flex{display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-justify-content:flex-start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-left:-20px}.fv-center,.nav-menu .wrapper{align-items:center}.flex.no-gaps{margin-left:0}.fh-center{justify-content:center}.flex>*{width:100%;float:left;position:relative;padding:0 0 20px 20px}.flex.ng-vert>*,.flex>* .flex>*{padding-bottom:0}.flex.ng-vert>*{padding-top:0}.flex.no-gaps>*,.flex.site-container>*{padding:0}.flex>.m-col-6{width:50%}.flex>.m-col-4{width:33.333%}.flex>.m-col-3{width:25%}.m-two-cols>*{width:50%}.m-three-cols>*{width:33.333%}.m-full{width:100%}.flex-grow{-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1}.equal-height>*{display:flex;-webkit-flex-direction:column;flex-direction:column}.equal-height>*>*,.mobile-header .m-flex-basic>div{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex}.equal-height>*>*{display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1}.ie .flex-basic:after,.ie .flex-basic:before,.ie .flex:after,.ie .flex:before{content:" ";display:table}.equal-height img{min-height:1px}.flex-reverse{-webkit-flex-direction:row-reverse;flex-direction:row-reverse}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.equal-height>*>*{height:100%}}.equal-height>*>*>:last-child{margin-top:auto}.flex-right{-webkit-justify-content:flex-end;justify-content:flex-end;-moz-justify-content:flex-end}.top-header{position:relative;z-index:1000;text-align:center}.mobile-overlay,.nav-menu{position:fixed;width:100%}.top-header p{margin:0;line-height:1.1em;vertical-align:middle}.translated-ltr .skiptranslate~.header .top-header{top:40px}.nav-menu{top:0;left:0;z-index:1000;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.primary-nav{display:none}.logo{margin-right:20px}.logo img{height:35px;display:block}.mobile-title{font-size:15px;white-space:nowrap}.mobile-header,.mobile-menu-header{position:fixed;left:0;width:100%;z-index:6000;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.mobile-header .m-flex-basic>div{display:flex}.mobile-header a,.mobile-link{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;border:0;padding:0;background-color:transparent;align-items:center}.mobile-header a{margin-right:10px}.mobile-header a:last-child{margin-right:0}.mobile-header a svg{margin-right:5px;font-size:1.3em}.mobile-link svg{margin-top:-3px;margin-left:0;font-size:2em}.mobile-overlay{display:none;height:100%;background-color:#000;background-color:rgba(0,0,0,.6);z-index:500;-webkit-transition:all 1.4s ease;-moz-transition:all 1.4s ease;transition:all 1.4s ease}.show-menu .mobile-overlay{display:block;-webkit-animation:mobile_overlay 1s;animation:mobile_overlay 1s}@-webkit-keyframes mobile_overlay{from{background-color:rgba(0,0,0,0)}to{background-color:rgba(0,0,0,.6)}}@keyframes mobile_overlay{from{background-color:rgba(0,0,0,0)}to{background-color:rgba(0,0,0,.6)}}.m-menu{position:relative;width:100%;max-height:0;-webkit-transition:max-height 1s ease-in-out;-moz-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;overflow:auto}.fixed-menu .m-menu{position:fixed;left:0;height:100%;z-index:3000}.show-menu .m-menu{max-height:1000px}.m-menu .nav-child,.m-menu .show .nav-child .nav-child{max-height:0;overflow:hidden;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.m-menu .show .nav-child,.m-menu .show .nav-child .show .nav-child{max-height:100%}.m-menu ul{margin:0;padding:0}.m-menu li{padding:0;list-style:none}.m-menu a{display:block;position:relative;font-size:20px}.m-menu .nav-child a{padding-top:20px;padding-bottom:15px}.m-menu .parent>a:after{content:'';position:absolute;width:18px;height:10px;top:50%;right:15px;margin-top:-5px;background-image:url(https://storage.googleapis.com/bmw-storage/bmw-nz/css/images/select-input.png);background-position:right center}.videoWrapper{position:relative;padding-bottom:54%;padding-top:25px;height:0}.videoWrapper iframe,.videoWrapper video{position:absolute;top:0;left:0;width:100%;height:100%}..m-menu .parent.show>a:after{transform:rotate(180deg)}.banner .wrapper{max-width:none;padding:0}.banner img{display:block;width:100%}.error-page h1{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.error-page h2{color:red}.error-page h1 svg{margin-right:20px}.calc-l,.calc-r{padding-left:40px;padding-right:20px}.flex>.gcore-form-row{padding-top:0;padding-bottom:0}.flex>#ftr-submit{width:100%}.form-group{position:relative}.form-control,.select-container{display:block;width:100%;line-height:1.42857143;outline:0;background-image:none;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus,.select-container:focus{outline:0}.home textarea.form-control{height:100px;resize:none}textarea.form-control{height:150px;resize:none}.select-container{display:inline-block;padding:0 !important;overflow:hidden;vertical-align:top;background:url(https://storage.googleapis.com/bmw-storage/bmw-nz/css/images/select-input.png) right 20px center no-repeat #fff}.select-container .select-hide{background:0 0;width:100%;line-height:2;border:0;-webkit-appearance:none;-moz-appearance:none;text-indent:.01px;text-overflow:''}.select-container .select-hide:focus{outline:0}.gcore-form-row{display:block;width:100%}#ftr-confirm,.chrono_credits{display:none}.form-mbot{margin-bottom:10px!important}.form-text{margin-bottom:30px}.checkbox-group .container{display:block;position:relative;padding-top:5px;padding-bottom:20px;padding-left:45px;height:35px;margin-bottom:10px;cursor:pointer;font-size:13px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.checkbox-group input{position:absolute;opacity:0;cursor:pointer}.checkmark{position:absolute;top:0;left:0;height:35px;width:35px;background-color:#fff;border:2px solid #aaa;border-radius:0}.error + .checkmark{border-color: red;}.checkbox-group:hover input~.checkmark{background-color:#ccc}.checkbox-group input:checked~.checkmark{background-color:#1c69d4;border-color:#1c69d4}.checkmark:after{content:"";position:absolute;display:none}.checkbox-group input:checked~.checkmark:after{display:block}.checkbox-group .checkmark:after{left:11px;top:5px;width:10px;height:18px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.footer-links ul{margin:0;padding:0;list-style:none}.footer-links .chronoform{padding-right:10px}.social{-webkit-align-items:center;align-items:center}.edge-designed img,.edge-designed span{display:inline-block;vertical-align:middle}.edge-designed img{margin-left:10px}.back-top{position:fixed;bottom:10px;right:10px}.back-top a{display:block;font-size:24px;color:#fff!important;width:30px;height:30px;background-color:#000;background-color:rgba(0,0,0,.5);text-align:center;line-height:1.5em}.back-top a:hover{background-color:rgba(29,105,212,.8)!important;color:#fff!important}.m-flex-basic{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;width:100%}.ie .m-flex-basic:after,.ie .m-flex-basic:before{content:" ";display:table}.ie .m-flex-basic>*{float:left}.ie .m-flex-basic>:last-child{float:right}@media (min-width:500px){h1,h2,h3{margin-bottom:15px}*+h2,*+h3{margin-top:15px}.ie .flex-basic>*{float:left}.ie .edge-designed,.ie .flex-basic>:last-child{float:right}.t-two-cols>*{width:50%}.t-three-cols>*{width:33.333%}.t-four-cols>*{width:25%}.dealer-links .d-logo{background-size:auto 80%}a.video-popup{max-width:500px;height:218px;margin:20px auto;padding:170px 20px 0}}@media (min-width:768px){.l-two-cols>*{width:50%}.l-three-cols>*{width:33.333%}.l-four-cols>*{width:25%}.flex-basic{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;width:100%}}@media (max-width:1024px){.hide-mobile{display:none!important}}@media (min-width:1025px){.lSSlideOuter .lSPager.lSpg,.top-header{display:block}.nav-menu,.top-header{position:fixed}html{font-size:16px}h1,h2{margin-bottom:20px}*+h2{margin-top:20px}.wrapper{padding:30px 50px;line-height:1.3em;font-size:14px}.top-header{width:100%;top:0;left:0;text-align:right}.top-header p{display:inline-block}.mobile-header,.mobile-menu-header,.mobile-title{display:none}.logo img{height:auto}.primary-nav{display:inline-block;-webkit-flex:1;flex:1}.primary-nav .nav{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:space-between}.primary-nav ul{margin:0;padding:0;z-index:50}.primary-nav .nav-child{top:100%;left:0;padding:0;white-space:nowrap;margin-top:-1px;min-width:100%}.primary-nav li{display:inline-block;position:relative}.primary-nav a{display:block;text-decoration:none;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease}.primary-nav .nav-child{display:none;position:absolute}.primary-nav .nav-child li,.primary-nav ul li:hover .nav-child{display:block}.primary-nav ul li .nav-child .nav-child{display:none;position:absolute}.primary-nav ul li .nav-child ul li:hover .nav-child{display:block}.flex{margin-left:-30px}.flex>*{padding:0 0 30px 30px}.d-two-cols>*{width:50%}.d-three-cols>*{width:33.333%}.d-four-cols>*{width:25%}.d-five-cols>*{width:20%}.d-six-cols>*{width:16.66667%}.flex>.d-col-10{width:83.333%}.flex>.d-col-9{width:75%}.flex>.d-col-8{width:66.66667%}.flex>.d-col-7{width:58.333%}.flex>.d-col-6{width:50%}.flex>.d-col-5{width:41.66667%}.flex>.d-col-4{width:33.333%}.flex>.d-col-3{width:25%}.flex>.d-col-2{width:16.66667%}.lSSlideOuter .slider-video{position:absolute;width:100%;height:100%;overflow:hidden}.lSSlideOuter .slider-video video{position:absolute;/*width:auto;height:auto;*/min-width:100%;min-height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.btn{display:inline-block;width:auto}.btn-full{display:block;width:100%!important;margin-top:0!important;max-width:100%!important}.btn.form-submit{width:100%;margin-top:0;text-align:center}.hide-desktop{display:none!important}}@media (min-width:1200px){.logo{margin-right:40px}.xl-four-cols>*{width:25%}.xl-five-cols>*{width:20%}.flex>.xl-col-8{width:66.66667%}.flex>.xl-col-4{width:33.333%}}.juser-vid-container{max-width:none;padding-bottom:54%} @font-face{ font-family:'BMW TypeNext'; font-display: fallback; src:url("../fonts/BMWTypeNextLatinTT-Thin.eot") format("embedded-opentype"), url("../fonts/BMWTypeNextLatinTT-Thin.woff") format("woff"), url("../fonts/BMWTypeNextLatinTT-Thin.woff2") format("woff2"), url("../fonts/BMWTypeNextLatinTT-Thin.ttf") format("truetype"); font-weight: 300; } @font-face{ font-family:'BMW TypeNext'; font-display: fallback; src:url("../fonts/BMWTypeNextLatinTT-Light.eot") format("embedded-opentype"), url("../fonts/BMWTypeNextLatinTT-Light.woff") format("woff"), url("../fonts/BMWTypeNextLatinTT-Light.woff2") format("woff2"), url("../fonts/BMWTypeNextLatinTT-Light.ttf") format("truetype"); font-weight: 400; } @font-face{ font-family:'BMW TypeNext'; font-display: fallback; src:url("../fonts/BMWTypeNextLatinTT-Regular.eot") format("embedded-opentype"), url("../fonts/BMWTypeNextLatinTT-Regular.woff") format("woff"), url("../fonts/BMWTypeNextLatinTT-Regular.woff2") format("woff2"), url("../fonts/BMWTypeNextLatinTT-Regular.ttf") format("truetype"); font-weight: 500; } @font-face{ font-family:'BMW TypeNext'; font-display: fallback; src:url("../fonts/BMWTypeNextLatinTT-Bold.eot") format("embedded-opentype"), url("../fonts/BMWTypeNextLatinTT-Bold.woff") format("woff"), url("../fonts/BMWTypeNextLatinTT-Bold.woff2") format("woff2"), url("../fonts/BMWTypeNextLatinTT-Bold.ttf") format("truetype"); font-weight: 700; } @media (min-width:1025px) { a.dealer-title { font-size: 15px; } } @media (min-width:1220px) { a.dealer-title { font-size: 18px; } } /* Fancy Box ========================================================================== */ .fancybox-slide>* { padding: 0; max-width: 850px; width: 100%; } .newcar-text { padding: 20px; } /* SPECIALS ========================================================================== */ .promos .eofy-vic { display: none; } .promos .eofy-nsw { display: none; } .offers .sp-m-bot h2,.offers .embla h2 { text-transform: inherit; } /* MOBILE STYLES ========================================================================== */ /* Layout ========================================================================== */ html { font-family: 'BMW TypeNext', sans-serif; } body { background: #fff; color: #262626; padding-top: 56px; overflow-x: hidden; } .anchor { top: -40px; } h1, h2, h3, h4, .head-1, .head-2, .head-3, .head-4 { text-transform: uppercase; color: #000; font-weight: normal; line-height: 1em; margin: 0 0 20px; } h1, .head-1 { font-size: 24px; } h2, .head-2 { font-size: 18px; } h3, .head-3 { font-size: 16px; } h4, .head-4 { font-size: 16px; } * + h2, * + h3, * + h4 { margin-top: 30px; } .head-cap { text-transform: capitalize !important; } hr { border-bottom: 1px solid #4e4e4e; border-top: 0; } a { color: #000; } a:hover { color: #1c69d4; } p { margin: 0 0 20px; } .wrapper { max-width: 1300px; padding-top: 40px; padding-bottom: 40px; line-height: 1.4em; font-size: 15px; } .nav-menu .wrapper { padding: 10px 20px; } .quicklinks .wrapper { padding: 0; } .sml-wrapper { max-width: 1000px; } .t-grey { color: #666 !important; } .t-blue { color: #1c69d4 !important; } .t-white { color: #fff !important; } .t-small { font-size: 12px; line-height: 1.4em; font-style: italic; } .t-upper { text-transform: uppercase; } .m-top { margin-top: 20px !important; display: inline-block; } .m-top-not { margin-top: 0 !important; } .bg-img { position: relative; top: 0; right: 0; width: 100%; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; } .smli { text-transform: lowercase !important; } .fee-list { padding-left: 20px; list-style: lower-alpha; line-height: 1.6em; } .fee-list-lower { padding-left: 20px; list-style: lower-roman; } .t-center .form-group .select-container { text-align-last:center; } div > img { display: block; } .home .explore-range { display: none; } .search-our-stock .wrapper { max-width: 1080px; padding-bottom: 0; } .featured-cars .wrapper { padding: 0 0 160px; max-width: 1800px; } /* FULL WIDTH CONTENT +======================================================================== */ .full-content .wrapper { max-width: 100%; padding: 0; } .full-center { padding: 30px; } .center-content { display: flex; align-items: center; } /* Top Header ========================================================================== */ .top-header { display: none; background-color: #000; width: 100%; } .top-header .wrapper { padding-top: 5px; padding-bottom: 5px; justify-content: flex-end; } .top-header a, .top-header .wrapper > svg { display: inline-block; vertical-align: middle; color: #fff; } .top-header a:hover { color: #1c69d4; text-decoration: none } .top-header p { font-size: 14px; color: #fff; } .top-header .wrapper > svg { margin: 0 5px 0 10px; } .header .item-468 { display: none; } /* Dealer menu ========================================================================== */ .dealer-menu { background: #000; position:fixed; top: 52px; left: 0; width: 100%; z-index: 1030; -webkit-transition: top 0.4s ease; -moz-transition: top 0.4s ease; transition: top 0.4s ease; } .dealer-menu .wrapper { padding-top: 15px; padding-bottom: 15px; } .dealer-menu .logo { display: inline-block; width: 150px; } .dealer-name { color: #fff; text-align: right; font-weight: 700; font-size: 20px; width: auto; float: right; font-style: italic; margin-top: 15px; } .dealer-name span { color: #1c69d4; } /* Navigation ========================================================================== */ .nav-menu { z-index: 1030; background-color: #fff; color: #fff; } .nav-menu .wrapper { max-width: 2000px; font-size: 14px; } .nav-menu .m-flex-basic { align-items: center; } .fixed-menu .nav-menu, .c-nobanner .nav-menu { top: 0px; } .logo { margin: 0; } .logo a { display: block; } .dealer-title { margin-top: 24px; display: flex; justify-content: flex-end; } .dealer-title a { font-size: 18px; font-weight: 700; text-transform: uppercase; } .dealer-title a:hover { color: #000 !important; text-decoration: none; } .fixed-menu .dealer-title { display: none; } .dealer-title-fixed { display: none; color: #000; } .dealer-title-fixed p { margin-bottom: 0; } .dealer-title-fixed a { font-size: 16px; font-weight: 700; color: #000; text-transform: uppercase; text-decoration: none; } .fixed-menu .dealer-title-fixed { display: block; } .nav-border { display: none; } .dealer-dets svg { display: block; font-size: 1.6em; } .icon-search2 { font-size: 18px; } .nav-home { vertical-align: middle; padding: 25px 15px 29px 0; font-size: 17px; border-bottom: 5px solid transparent; display: none; } .nav-home:hover { color: #1c69d4; border-color: #1c69d4; } /* Mobile Header ========================================================================== */ .mobile-header { top: 64px; background-color: #262626; } .mobile-menu-header { bottom: 0; background-color: #fff; color: #262626; font-weight: bold; text-transform: uppercase; border-top: 1px solid #e6e6e6; } .mobile-menu-header .m-flex-basic { -webkit-justify-content: space-around; justify-content: space-around; } .mobile-menu-header a { color: #8e8e8e !important; font-weight: bold !important; padding: 0 !important; text-align: center; text-transform: capitalize; font-size: 12px; border-bottom: none !important; } .mobile-menu-header svg { font-size: 25px; display: block; margin: 0 auto 5px; } .mobile-header .wrapper, .mobile-menu-header .wrapper { padding-top: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 6px; align-items: center; font-size: 14px; line-height: 1.3em; } .fixed-menu .mobile-header, .c-nobanner .mobile-header { top: 0; } .mobile-header a, .mobile-link { color: #000; font-size: 13px; text-transform: uppercase; padding: 8px 5px 8px 0; } .mobile-header a svg { margin-top: -4px; color: #1c69d4; } .m-menu { padding: 0 20px; height: 100vh; background: #fff; } .m-menu a { color: #262626; border-bottom: 1px solid #e4e4e4; font-weight: bold; padding: 25px 15px 20px; } .m-menu .active > a { background-color: #1c69d4; color: #fff; } .m-menu .nav-child a { background: #ffffff; border-bottom: 1px solid #e4e4e4; font-size: 16px; padding-left: 30px; color: #8e8e8e; } .fixed-menu .m-menu, .fixed-menu .c-nobanner .m-menu { top: 56px; } .c-nobanner .m-menu { top: 0; } .show-menu .m-menu { padding: 0 20px 140px; background: #fff; } .m-menu .nav-child .nav-child a { padding-left: 30px; color: #ffffff; background: #8e8e8e; } .ph-overlay, .phone-popup { display: none; } /* Banner ========================================================================== */ .banner-layer .head-1, .banner-layer .head-2 { margin-bottom: 20px; color: #fff; text-shadow: 0px 0px 3px black; } .banner-layer .head-1 { font-weight: 400; } .banner-layer .head-2 { margin: 20px 0 20px; text-transform: capitalize; font-weight: 300; } .bl-black .head-1, .bl-black .head-2 { color: #000; text-shadow: none; } .banner-layer .btn { max-width: 290px; width: 100%; display: inline-block; } .banner-bottom { z-index: 2 } /* Banner - Dots ========================================================================== */ .embla__dots__container { margin: 0 auto; padding: 20px; } .banner .embla__dots { display: none; } .embla__dot { /*flex:1; - REMOVE COMMENT IF YOU WANT FULL WIDTH DOTS */ padding:0; outline:0; width: 16px; height:16px; margin-right: 10px; border-radius: 50%; border:1px solid #636363; background-color: transparent; } .embla__dot.is-selected { background-color: #636363; } .banner .embla__button { fill: #ffffff; } /* Featured Cars ========================================================================== */ .featured-cars .lSSlideOuter .lSPager.lSpg { display: none; } .f-price, .f-was { display: flex; justify-content: space-between; padding: 10px 20px; margin: 0; border-top: 1px solid #eaeaea; } .f-price { color: #1c69d4; font-weight: bold; } .f-was { color: #999; font-weight: normal; } .f-view-btn { padding: 0 20px 20px; } /* Quicklinks ========================================================================== */ .quicklinks { border-top: 4px solid #fff; } .quicklinks .wrapper { max-width: none; } .q-link { position: relative; margin: 0; border-bottom: 4px solid #fff; overflow: hidden; } .q-img { display: block; height: 50vh; background-size: cover; background-position: center; } .q-link a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; } .q-blk { position: absolute; bottom: 20px; left: 7%; z-index: 2; width: 90%; } .q-link p { margin: 0 0 20px; font-size: 24px; color: #fff; text-transform: uppercase; } .q-link:after { content: ""; display: block; background: rgba(0, 0, 0, 0.3); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .btn-outline-white { border: 2px solid #fff; background-color: transparent; color: #fff; } .q-link:hover .btn-outline-white { background-color: #fff; color: #000; } .q-link .q-img { transition: all 1s ease; -ms-transform: scale(1.0); transform: scale(1.0); } .q-link:hover .q-img { -ms-transform: scale(1.1); transform: scale(1.1); } /* Button ========================================================================== */ .btn { font-size: 14px; text-align: center; font-weight: 700; padding: 15px 20px 16px; min-width: 180px; display: inline-block; } .btn-full { display: block; width: 100%; } .btn-primary, a.btn-primary { background: #1c69d4; color: #fff; border: none; } .btn-primary:hover, a.btn-primary:hover, a.btn-secondary:hover, .btn-secondary:hover { background-color: #4d4d4d; color: #fff; } .btn-outline, a.btn-outline { background: #fff; color: #1c69d4; border: 1px solid #1c69d4; } .btn-outline:hover, a.btn-outline:hover, a:hover .btn-outline { background-color: #1c69d4; color: #fff; } .btn-secondary, a.btn-secondary { background-color: #666; color: #fff; } .finance-btn .btn { margin-top: 0 !important; } /* Sidebar ========================================================================== */ .sidebar-mini { position: fixed; left: -185px; top: 40%; transform: translateY(-50%); width: 230px; z-index: 2000; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; text-align: right; } .sidebar-mini:hover { left: 0; } .sidebar-mini a { display: block; background: #262626; color: #9ea6ad; padding: 10px 11px 10px 12px; align-items: center; text-decoration: none; font-size: 13px; font-weight: bold; border-right: 3px solid #262626; } .sidebar-mini a:hover { border-color: #1d69d4; color: #fff; } .sidebar-mini .icon-sidebar { margin-left: 15px; vertical-align: middle; font-size: 20px; margin-top: -5px; } .sidebar-mini .s-bg span { vertical-align: middle; } .sidebar-search { background: #1d69d4 !important; color: #fff !important; border-color: #1d69d4 !important; } /* Main Content ========================================================================== */ .welcome { position: relative; background-repeat: no-repeat; } .welcome .wrapper, .finance-us .wrapper { padding-top: 40px; padding-bottom: 40px; } .welcome h1 span, .about-us h1 span { display: block; margin-bottom: 5px; font-weight: 300; font-size: 18px; line-height: 1.1; color: #1c69d4; } .about-us .col-half { max-width: 640px; } .google-map { display: block; } .google-map iframe { max-width: 100%; pointer-events: none; } .indv-models .wrapper { padding: 0; } .indv-models .model { display: none; } .indv-models .model.show { display: block; } .model a { display: block; text-align: center; text-decoration: none; } .model p { color: #666; } .model .btn-outline { margin: 0; width: 100%; max-width: 300px; text-align: center; } .model-heading { margin: 0; text-align: center; } .range-model.popup + .indv-models .model-heading { margin-top: 20px; color: #1c69d4; text-align: center; } .range-model.popup + .indv-models .wrapper { padding-bottom: 40px; } .model-heading .icon-cross { display: block; position: absolute; top: -10px; right: 0; color: #000; font-size: 40px; cursor: pointer; z-index: 10; } .car-img img { display: inline-block; } .home-bg { background-color: #262626; } .home-bg h1, .home-bg h2 { color: #fff; } .range-model p { margin: 10px 0 0; text-align: center; color: #262626; } .explore-range h1 { margin: 0; text-align: center; color: #fff; text-shadow: 0 0 8px rgba(0,0,0,0.75); } .explore-range { border-bottom: 4px solid #1c69d4; } .service-table { background: #ffffff; width: 100%; margin-bottom: 30px; } .service-table th { background: #ffffff; color: #000000; padding: 15px 20px 11px; text-align: left; text-transform: uppercase; font-weight: 400; } .st-heading { font-weight: bold; } .service-table tbody td { padding: 15px 20px 11px; text-align: left; vertical-align: top; } .service-table tbody td p { margin-bottom: 15px !important; } .service-table tr td { border: 1px solid #e6e6e6; } .service-table tr:nth-child(even) { background: #e3e3e3; } .service-table th, .service-table td { width: 50%; } .future .wrapper { padding-top: 0; padding-bottom: 0; } /* Search Stock ========================================================================== */ .search-adv, .search-adv-stock { margin-top: 15px; margin-bottom: 15px; text-align: center; font-weight: bold; color: #1C69D4; display: flex; align-items: center; justify-content: center; cursor: pointer; } .search-adv:hover, .search-adv-stock:hover { color: #000; } .search-adv .icon-arrow { margin-left: 10px; } .search-adv.show .icon-arrow { transform: rotate(180deg); color: #000; } .search-adv-container { display: none; } .search-adv-container.show { display: block; } /* Book Now ========================================================================== */ .fancybox-close-small:after { content: 'x'; } .booknow.fancy-container { width: auto; } .booknow-container { width: 95vw; max-width: 450px; padding: 30px; } .booknow-container h2 { margin: 0; } .booknow-container h3 { margin: 10px 0; font-size: 18px; } .bn-title { padding: 20px 20px 0 20px; } .pay-btn { background: #0074d4; border-radius: 6px; color: white; border: 0; padding: 12px 16px; margin-top: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: block; box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07); width: 100%; } /* Finance ========================================================================== */ .f-border { border: 1px solid #e6e6e6; padding: 10px; position: relative; } .f-border a { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; cursor: pointer; } .f-border img { display: block; } .f-border h2 { margin-top: 10px; margin-bottom: 5px; } .f-border p:last-child { margin-bottom: 0; } .f-border:hover p:last-child { color: #1c69d4; } /* Insurance New - 12 09 2019 ========================================================================== */ .in-link p { margin-top: 15px; } /* Special Links ========================================================================== */ .sp-link { background: #e3e3e3; color: #000000; position: relative; } .sp-link img { display: block; } .sp-link p { background: #e3e3e3; padding: 15px; font-weight: bold; margin-bottom: 0 !important; } .sp-link a { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; } .sp-link:hover p { background-color: #4d4d4d; color: #fff; } .sp-link svg { font-size: 20px; vertical-align: sub; } .sp-container { border: 1px solid #Ccc; height: 100%; padding: 10px; } .sp-container h2 { margin-bottom: 0; text-transform: capitalize; } .sp-container h3 { margin: 20px 0; text-transform: none; } .sp-container ul { text-transform: uppercase; } .sp-wrapper .wrapper { max-width: 100%; padding-top: 30px; padding-bottom: 30px; } .sp-wrapper h1 { text-align: center; } .sp-container-grid { padding: 20px 0; } .sp-container-grid a { display: block; margin-bottom: 5px; } .sp-container p { margin-bottom: 10px !important; } .sp-m-bot { margin-bottom: 30px; } #sp-slider .embla__dots { bottom: -30px; } #sp-slider { margin-bottom: 60px; } .sp-m-bot:last-child { border-bottom: none; } .sp-m-bot { border-bottom: 4px solid #Ccc; } .sp-img { display: block; } .sp-btns { margin-top: 20px; } .sp-btns.flex>* { padding-bottom: 10px; } .term-lines { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 30px 0; } .terms-head { cursor: pointer; } .show-terms .terms-head svg { transform: rotate(180deg); } .terms-text { max-height: 0; overflow: hidden; -webkit-transition: top 0.4s ease; -moz-transition: top 0.4s ease; transition: top 0.4s ease; } .show-terms .terms-text { max-height: 1000px; } p.terms-text, .terms-head { margin: 0 !important; } .show-terms .terms-head { margin-bottom: 10px !important; } .l-offer { border: 2px solid #1d69d4; } .l-offer p { background: #1d69d4 !important; color: #fff !important; } .sp-wrapper .lSPager, .sp-wrapper .lSAction { display: none !important; } .vic-special { display:none; } .btn-sp { font-weight: bold; } /* Accessoris ========================================================================== */ .series .car-img img{ display: block; } .series a { border-bottom: 1px solid #ccc; padding-bottom: 20px; } .series a:hover { text-decoration: none; } .car-img { position: relative; background-image: url(https://storage.googleapis.com/bmw-storage/bmw-nz/css/images/street.png); background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom 5px; } .car-img .plus { position: absolute; width: 35px; height: 35px; bottom: 0; right: 0; background-color: #3a59d1; } .car-img:hover .plus, .series .active .plus { background-color: #111; } .plus svg { color: #fff; font-size: 35px; padding: 5px; } /* Service Page ========================================================================== */ .service-sidebar { text-align: center; color: #1c69d4; } .service-sidebar p b { text-transform: uppercase; } .service-sidebar p svg { font-size: 56px; vertical-align: middle; color: #1c69d4; } .service-list div { border-bottom: 1px dotted #666666; font-size: 18px; } .service-list div p { width: 100%; margin: 0 auto; text-align: left; padding: 5px 0px; margin-bottom: 0 !important; } .service-list svg { text-align: left; display: inline-block; margin-right: 10px; } .service .content .t-blue { font-size: 24px; } .service .content p span { color: #1c69d4; font-weight: bold; } .models .explore-range, .models .range-models, .new-vehicles .explore-range, .new-vehicles .range-models { display: block !important; } /* Contact Page ========================================================================== */ .grey-bg { background: #f5f5f5; } .grey-bg .contact-block { background: #fff; } .contact-link { padding: 20px; background: #f5f5f5; border-radius: 5px; display: block; margin: 0 10px 10px 0; border-left: 6px solid #f5f5f5; } .contact-link:hover { border-color: #1c69d4; text-decoration: none; } .contact-block { padding: 30px; background: #f5f5f5; border-radius: 5px; } .contact-block:hover { box-shadow: 0 0 6px 0px #d6d6d6; } .contact-block h3 { font-weight: bold; } /* News & Events ========================================================================== */ .np-img { width: 100%; background-position: center; background-size: cover; } .np-line { margin-bottom: 35px; } /* Insurance Table ========================================================================== */ .in-heading, .in-content p { padding: 10px; margin: 0; text-align: center; } .in-heading { background: #262626; color: #fff; } .in-content { height: 100%; border: 1px solid #fff; background: #e6e6e6; } .in-content p { background: #e6e6e6; } .in-content p span { display: block; font-size: 12px; } .in-content .pro-plus { background: #1d69d4; color: #fff; } .in-head-img { background: #262626; padding: 10px; border: 1px solid #fff; margin: 0; text-align: center; } .in-head-img img { margin: 0 auto; } .in-head-img h3 { margin-top: 20px; color: #fff; } /* Fine Dust Table ========================================================================== */ .fine-table { width: 100%; margin-bottom: 20px; } .fine-table thead { background: linear-gradient(to right, #f4f8fb 30%, #b3d5f1); } .fine-table th { border: none; padding: 5px 10px; border-bottom: 2px solid #0cb0df; font-weight: 500; text-align: left; font-weight: bold; text-transform: uppercase; word-break: break-word; } .fine-table td { padding: 3px 10px; border: none; border-bottom: 1px solid #ccd0d3; font-size: 12px; } .fine-table th:nth-child(2), .fine-table td:nth-child(2) { border-left: 1px solid #ccd0d3; border-right: 1px solid #ccd0d3; } .fine-table td:nth-child(2), .fine-table td:nth-child(3) { text-align: center; } .fine-top-border > td { border-top: 2px solid #0cb0df !important; } /* Gallery Grid - Masonary ========================================================================== */ .gallery-grid-layout { columns: 280px; column-gap: 30px; } .gallery-grid-layout > div { break-inside: avoid-column; margin-bottom: 30px; } .gallery-grid-layout img { display: block; } /* Phone Pop up ========================================================================== */ .ph-overlay { display: none; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 9999; } .phone-popup { display: none; background: #fff; width: 100%; max-width: 360px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 30px; } .ph-overlay.active, .phone-popup.active { display: block; } .phone-popup .icon-mobile, .phone-popup .icon-service { margin-right: 10px; } .phone-popup .icon-service { font-size: 24px; vertical-align: middle; } .phone-popup .btn { line-height: 1.6em; display: flex; margin-top: 10px !important; text-align: left; align-items: center; } .ph-overlay .icon-cross { color: #fff; background: #1d69d4; font-size: 40px; position: absolute; top: 0; right: 0; cursor: pointer; } .phone-popup svg { margin-right: 10px; } /* Tabs ========================================================================== */ .tabs-header { display: block; width: auto; margin: 0; padding: 15px 20px; background-color: #fff; color: #8e8e8e; font-size: 13px; font-weight: bold; cursor: pointer; border-bottom: 5px solid #fff; } .tabs-header.dropdown { display: block; } .tabs-header.active { background-color: #ffffff; color: #262626; border-color: #1c69d4; } .tabs-content { display: none; padding: 0 40px; border-top: 1px solid #e6e6e6; } .tabs-content ul { margin: 0; } .tabs-content hr { margin: 0 0 20px; width: 100%; } .tabs-content p:last-child { margin-bottom: 0; } .tabs-content.dropdown { display: block; max-height: 0; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; border-right: none; border-bottom: 1px solid #ccc; } .tabs-content.active { display: block; padding: 25px 20px 0; } .tabs-content.dropdown.active { max-height: 10000px; } /* Tabs Teams ========================================================================== */ .team-header { display: block; width: 100%; margin: 0; padding: 21px 10px 13px; background-color: #fff; color: #8e8e8e; font-size: 13px; font-weight: bold; cursor: pointer; border-bottom: 2px solid #aaa; } .team-header.dropdown { display: block; } .team-header.active { background-color: #ffffff; color: #262626; border-color: #1c69d4; } .team-content { display: none; padding: 0 40px; } .team-content ul { margin: 0; } .team-content hr { margin: 0 0 20px; width: 100%; } .team-content p:last-child { margin-bottom: 0; } .team-content.dropdown { display: block; max-height: 0; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; border-right: none; border-bottom: 1px solid #ccc; } .team-content.active { display: block; padding: 25px 0 0; border-top: 1px solid #e6e6e6; } .team-content.dropdown.active { max-height: 10000px; } .team-link { background-color: #e6e6e6; } .team-link img { display: block; margin: 15px 15px 0; text-align: center; margin: 0 auto; } .team-link .btn { margin-top: 0px; } .t-container { background-color: #e6e6e6; color: #000; } .team-link p { margin-bottom: 15px !important; } .team-link { padding: 20px; } .team-link i { color: #1d69d4; } .t-flags { position: relative; } .flag-blk { position: absolute; top: -3px; right: 0; } .flag-blk img { width: 30px; border: 1px solid #000; display: inline-block; margin: 0 0 0 5px; } .tm-img { background-color: #fff; } .t-link { text-align: center; } .t-link img { width: 100%; } .t-link p { padding: 5px; } /* Tabs FAQ ========================================================================== */ .faq-header, .form-notes { font-size: 15px; font-weight: bold; line-height: 17px; color: #262626; cursor: pointer; border: 0; outline: 0; margin: 0 0 10px; border-top: 1px solid #e6e6e6; padding: 20px 0 5px; text-transform: capitalize; position: relative; } .faq-header svg, .form-notes svg { position: absolute; width: 19px; height: 16px; top: 26px; right: 15px; margin-top: -5px; } .faq-header.active svg, .form-notes.show svg { transform: rotate(90deg); } .faq-content, .form-content { display: none; } .faq-content.active, .form-content.show { display: block; } /* Tabs Footers ========================================================================== */ .foot-header { cursor: pointer; margin: 20px 0 5px; color: #262626; font-size: 17px; font-weight: bold; position: relative; } .foot-header svg { position: absolute; width: 19px; height: 16px; top: 5px; right: 15px; margin-top: -5px; } .foot-header.active svg { transform: rotate(90deg); } .foot-header.active, .foot-header:hover { color: #1d69d4; } .foot-content { display: none; } .foot-content.active { display: block; margin: 10px 0 15px; } /* Contact page ========================================================================== */ .contact-tabs .inline-list { padding-left: 0; background-color: #dce4e6; } .contact-tabs .tabs-content { padding: 20px; } .contact-card { background-color: #f5f5f5; border: 1px solid #969696; padding: 30px; text-align: center; border-radius: 5px; } .contact-card h2 { font-size: 24px; min-height: 50px; } .contact-card .contact-logo { background-color: #fff; text-align: center; padding: 10px 20px; } .contact-card .contact-stuff { padding: 20px; } .contact-card .btn-full { margin-bottom: 10px; } .contact-card .s-header { width: auto; color: #000; font-size: 20px; cursor: pointer; position: relative; margin-bottom: 0; } .contact-card .s-header:after { content: "+"; position: absolute; color: #000; right: 2px; top: 0; z-index: 2; font-weight: bold; font-size: 28px; } .contact-card .s-content { display: none; } .contact-card .s-header.active + .s-content { display: block; } /* Warranty ========================================================================== */ .war-block { padding: 30px 20px; border: 1px solid #000; } .war-block h2 { display: inline-block; margin: 0 0 0 10px; } .war-block h2 b { color: #1c69d4; font-size: 60px; } .war-header { display: flex; } .war-block span { color: #1c69d4; font-size: 75px; display: inline-block; font-weight: bold; line-height: 1em; } /* Video Gallery Styles ========================================================================== */ .video-gallery { max-width: 960px; margin: 0 auto; } div.imgbox a:hover img { opacity: 0.6; } div.vid_icon:hover, span.vid_icon:hover { opacity: 1; background-image: url(https://storage.googleapis.com/bmw-storage/bmw-nz/css/images/vid_icon.png); } .titlebelowthumb a { display: block; margin-top: 8px; text-transform: uppercase; font-weight: bold; } /* Form styles ========================================================================== */ .chronoform { margin-bottom: 10px; } .form-control, .select-container { margin-bottom: 25px; padding: 14px 15px 12px; color: #000; background-color: #fff; border: 2px solid #aaa; border-radius: 0; font-size: 14px !important; } .select-container .select-hide { color: #000; /* height: 45px;*/ padding: 9px 15px 7px; } /* Form Select Colour */ .form-control:focus, .chrono-line .form-control:focus { border-color: #1c69d4; } .form-group label { position: absolute; width: 100%; top: -20px; left: 0; padding: 0; border: 0; color: #1c69d4; z-index: 1; font-size: 13px; line-height: 1.5em; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; cursor: text; } .form-control.empty + label { top: 0; left: 0; padding: 17px 17px 15px; background-color: transparent; color: #000; border-left: 0; border-right: 0; line-height: 1.42857143; font-size: 14px; } .chronoform .error { border-color: red !important; } .chronoform .error + label, .chronoform .error select { color: red !important; } .chronoform:not(.chrono-lines):not(.chrono-l-labels) .select-container + label { display: none; } .chronoform:not(.chrono-lines):not(.chrono-l-labels) .select-container.active + label { display: block; } .form-tc { display: block; margin: 0 0 20px; padding-bottom: 15px; border-bottom: 1px solid #cccc; font-weight: bold; } /* Forms Checkbox ========================================================================== */ .form-group .tickbox { margin: 10px 0; } .form-group .tickbox input { display: inline-block; vertical-align: middle; } .form-group .tickbox label { display: inline-block; vertical-align: middle; position: relative; width: auto; top: auto; left: auto; background-color: transparent; width: calc(100% - 30px); padding: 0 0 0 10px; line-height: 1.2em; color: #000; font-size: 14px; } [type="checkbox"]:not(:checked), [type="checkbox"]:checked { width: 0px; height: 0px; vertical-align: middle; margin: 5px 0 5px; } [type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: relative; cursor: pointer; } [type="checkbox"]:not(:checked):before, [type="checkbox"]:checked:before { content: ''; position: absolute; left: 0; top: 0; width: 25px; height: 25px; border: 1px solid #D8D8D8; background: #ebebeb; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .error [type="checkbox"]:not(:checked):before, .error [type="checkbox"]:checked:before { background-color: #f98181; } [type="checkbox"]:not(:checked):after, [type="checkbox"]:checked:after { content: '\2713'; position: absolute; top: 7px; left: 5px; font-size: 20px; line-height: 0.8; color: #000; transition: all .2s } [type="checkbox"]:not(:checked):after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked:after { opacity: 1; transform: scale(1); } [type="checkbox"]:disabled:not(:checked):before, [type="checkbox"]:disabled:checked:before { box-shadow: none; border-color: #bbb; background-color: #ddd; } [type="checkbox"]:disabled:checked:after { color: #999; } [type="checkbox"]:disabled { color: #aaa; } [type="checkbox"]:checked:focus:before, [type="checkbox"]:not(:checked):focus:before { border: none; } .form-footer-custom { display: flex; margin-top: 5px; justify-content: center; align-items: center; } .form-footer-custom span{ margin:0 10px; } .form-footer-custom a:hover{ text-decoration: none; } /* Footer Links ========================================================================== */ .footer-links { background-color: #e6e6e6; color: #8e8e8e; } .footer-links h2 { margin-bottom: 40px; color: #262626; } .footer-logo { display: block; position: absolute; width: 130px; top: -48px; right: 0; } .footer .head-3 { display: block; margin: 0 0 30px 0; font-size: 25px; color: #262626; text-transform: capitalize; } .footer .head-4 { margin: 20px 0 5px; color: #262626; font-size: 17px; font-weight: bold; text-transform: capitalize; line-height: 1.5em; } .footer-links .t-blue { display: block; font-size: 12px; font-weight: bold; } .footer a { color: #8e8e8e; text-decoration: none; } .footer a:hover { color: #1c69d4; } .footer-links .chronoform { margin-bottom: 0; } .footer-nav { background-color: #8f8f8f; text-align: center; } .footer-nav .wrapper { padding-top: 20px; padding-bottom: 20px; } .footer-nav .nav { margin: 0; padding: 0; list-style: none; } .footer-nav a { display: block; color: #fff; font-size: 12px; padding: 5px 20px; text-transform: uppercase; font-weight: bold; } /* Social ========================================================================== */ .social a { display: block; width: 41px; height: 41px; margin-right: 10px; padding: 11px; font-size: 18px; color: #262626; background: #cecece; border-radius: 10%; text-transform: uppercase; text-decoration: none; cursor: pointer; line-height: 1em; text-align: center; } .social li:last-child a { margin-right: 0; } .social a:hover { background-color: #1c69d4; color: #fff; } .top-header .social { margin-left: 20px; } .top-header .social a { width: 30px; height: 30px; padding: 7px; font-size: 16px; } /* Copyright ========================================================================== */ .copyright { background-color: #fff; color: #000; } .copyright .wrapper { padding-top: 20px; padding-bottom: 20px; font-size: 12px; line-height: 1.2em; text-transform: uppercase; } .copyright p { margin-bottom: 0; } .copyright a { color: #000; } .edge-designed a { display: inline-block; vertical-align: middle; color: #000; } /* TABLET STYLES ========================================================================== */ @media (min-width: 500px) { /* Quicklinks ========================================================================== */ .q-link { border-right: 4px solid #fff; } .quicklinks .flex > div:nth-child(odd) { border-left: 4px solid #fff; } .featured-cars .wrapper { padding: 0 20px 160px; } } @media (max-width: 500px) { } @media (max-width: 768px) { .edge-designed { margin-top: 10px; } } @media (min-width: 768px) { h1, .head-1 { font-size: 30px; } h3, .head-3 { font-size: 20px; } .content h1 span { display: block; } .team-header { border-bottom: 5px solid #fff; } .sp-img { object-fit: cover; } /* Banner ========================================================================== */ .banner-layer { position: absolute; top: 35%; left: 13%; width: 100%; max-width: 600px; z-index: 2; } .banner-layer .banner-width { max-width: 720px; } .banner-layer .head-2 { font-size: 30px; } .banner-expo { display: none; } .banner-bottom { top: auto; bottom: 5%; max-width: 80%; } .home li.lslide:after { content: ""; display: block; background: rgba(0, 0, 0, 0.3); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; } } @media (max-width: 767px) { .m-bot { margin-bottom: 20px !important; display: inline-block; } /* Banner ========================================================================== */ .banner-layer { height: 235px; padding: 20px; background: #f1f1f1; } .banner-layer .head-1 { color: #262626; font-size: 25px; } .banner-layer p .btn { max-width: 80%; text-align: center; } .banner .embla__button { top: 25%; } .featured-cars { margin-top: 20px; } /* Service Page ========================================================================== */ .service-sidebar { margin-top: 30px; } .st-list { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid; } .st-list p { margin-bottom: 5px !important; } } @media (min-width: 768px) and (max-width: 1024px) { /* FULL WIDTH CONTENT +======================================================================== */ .big-img { height: 100%; position: absolute; } .big-img img { height: 100%; object-fit: cover; } } @media (max-width: 1024px) { .dealer-title { display: none; } .dealer-title-fixed { display: block; text-align: center; } .nav-menu { border-bottom: 1px solid #e4e4e4; } .ph-btn { display: none; } /*.item-345 li.item-456 { display: none; }*/ .welcome, .finance-us { background-image: none !important; } .home-bg h1 { font-size: 20px; } .home-bg h2 { font-size: 12px; } .search-our-stock .select-container { margin-bottom: 15px; } .copyright .wrapper { text-align: center; } .dealer-dets { width: 100%; } .q-link a { border-bottom: 1px solid #ccc; } } /* DESKTOP STYLES ========================================================================== */ @media (min-width: 1025px) { /* Layout ========================================================================== */ body { padding-top: 75px; } body.homw-ppsl { padding-top: 0; } .anchor { top: -90px; } .wrapper { padding-top: 80px; padding-bottom: 80px; } h1, .head-1 { font-size: 38px; } h2, .head-2 { font-size: 22px; } h1,h2 { margin-bottom: 20px; } * + h2, * + h3, * + h4 { margin-top: 40px; } .bg-img { position: absolute; height: 100%; } .wrapper.sml-top { padding-top: 60px; padding-bottom: 110px; } /* FULL WIDTH CONTENT +======================================================================== */ .full-btm-mg { margin-bottom: 50px; } .full-block { display: flex; align-items: center; } .full-pad-left { padding: 0 20px 0 50px; } .full-pad-right { padding: 0 50px 0 20px; } /* Top Header ========================================================================== */ .top-header { display: block; position: fixed; z-index: 1030; top: 0; -webkit-transition: top 0.4s ease; -moz-transition: top 0.4s ease; transition: top 0.4s ease; overflow: hidden; } .top-header .wrapper { padding-top: 16px; padding-bottom: 6px; line-height: 1.3em; } /* Dealer menu ========================================================================== */ .dealer-name { margin-top: 7px; } .dealer-dets svg { margin-left: 15px; } .dealer-title-fixed { margin-top: 7px; margin-right: 20px; } .dealer-dets a { display: flex; justify-content: center; text-decoration: none; } /* .dealer-dets a { display: none; } */ /* Navigation ========================================================================== */ .m-menu { background: #eee; } .nav-menu { top: 0; color: #fff; -webkit-transition: top 0.4s ease; -moz-transition: top 0.4s ease; transition: top 0.4s ease; background-color: #fff; } .nav-menu a { color: #000; } .nav-menu a:hover { color: #1d69d4 !important; } .translated-ltr.translated-ltr .skiptranslate ~ .header .nav-menu { top: 88px; } .homw-ppsl .nav-menu .wrapper { padding: 0 170px 0 60px; } .nav-menu .wrapper { padding: 0 90px 0 50px; } .fixed-menu .nav-menu .wrapper { padding: 0 90px 0 50px; } .stacked .nav-menu .wrapper { padding-top: 0px; padding-bottom: 0px; } .fixed-menu .nav-menu, .homw-ppsl.fixed-menu .nav-menu { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); background: #fff; } .fixed-menu .nav-menu a, .homw-ppsl.fixed-menu .nav-menu a { color: #000; text-shadow: none; } .fixed-menu .nav-menu a:last-child svg { margin-right: 15px; } .mobile-link { display: none; } .logo, .logo-blk { position: absolute; top: 13px; right: 20px; width: 50px; margin-right: 0; } .homw-ppsl .logo-blk, .homw-ppsl .logo { position: absolute; top: 28px; right: 60px; width: 90px; margin-right: 0; } .fixed-menu.homw-ppsl .logo-blk { position: absolute; top: 13px; right: 20px; width: 50px; margin-right: 0; } .logo, .fixed-menu .logo, .homw-ppsl .logo-blk, .homw-ppsl.fixed-menu .logo { display: none; } .fixed-menu .logo-blk, .logo-blk, .homw-ppsl .logo { display: block; } .nav-border { display: block; width: 100%; height: 1px; background-color: #e5e5e5; } .primary-nav .nav { justify-content: flex-start; } .primary-nav a { display: block; padding: 35px 10px 15px; color: #000; border: none; font-size: 14px; font-weight: bold; border-bottom: 5px solid transparent; } /*HOMEPAGE NAV*/ .homw-ppsl .nav-menu { background-color: transparent; } .homw-ppsl .primary-nav a, .homw-ppsl .nav-menu a { color: #fff; text-shadow: 0 0 5px black; } .homw-ppsl .primary-nav .nav-child a { color: #fff !important; } .homw-ppsl .primary-nav .nav-child li:hover a { color: #1c69d4; } /*HOMEPAGE NAV END*/ .primary-nav > .nav > li:hover > a { color: #1c69d4; border-color: #1c69d4; } .primary-nav .nav-child a { position: relative; padding: 10px 20px 10px; text-align: left; background-color: #262626; color: #fff; font-weight: normal; border-bottom: none; } .primary-nav .nav-child li:hover a { color: #1c69d4; } .primary-nav .nav-child li:last-child a { border: 0; } .right-sidebar h2 { margin: 14px 0 27px; } .nav-home { display: inline-block; } /*.primary-nav .item-345 .nav-child > li { display: none; } .item-345 li.item-456, .item-345 li.item-459, .item-345 li.item-460, .item-345 li.item-457 { display: block !important; } */ .primary-nav .nav-child li.deeper:after { display: block; content: "❯"; position: absolute; top: 11px; right: 10px; z-index: 1; } .item-105 .nav-child { width: 250px; } /*Sub menu styling*/ .primary-nav .nav-child .nav-child { top: 0; left: 100%; height: 103.1%; display: none !important; } .primary-nav .nav-child li:hover .nav-child { display: block !important; } .primary-nav .nav-child .nav-child li a { background-color: #f2f2f2; !important; color: #000 !important; } .primary-nav .nav-child .nav-child li:hover a { background-color: #1c69d4;!important; color: #fff !important; } /* Banner ========================================================================== */ .banner .embla__button--prev, .banner .embla__button--next { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; opacity: 0; } .banner:hover .embla__button--prev, .banner:hover .embla__button--next { opacity: 1.0; } .banner .embla__button--prev { left: 70px; } .banner .embla__button--next { right: 70px; } /* Smaller Navigation on scroll ========================================================================== */ .fixed-menu .top-header, .c-nobanner .top-header { top: -52px; } .fixed-menu .dealer-menu, .c-nobanner .dealer-menu { top: -103px; } .fixed-menu .nav-menu, .c-nobanner .nav-menu { top: 0; } /* Button ========================================================================== */ .form-group .btn { max-width: none; } /* Main Content ========================================================================== */ .content { position: relative; } .welcome { background-size: cover; background-position: center; } .welcome .wrapper, .finance-us .wrapper { padding-top: 80px; padding-bottom: 80px; } .search-our-stock .wrapper { padding-top: 60px; padding-bottom: 30px; } .left-bg .wrapper { display: flex; justify-content: flex-end; } .col-half { width: 50%; width: calc(50% - 30px); } .explore-range .wrapper { padding-top: 0; padding-bottom: 0; } .models .explore-range .wrapper { padding-top: 200px; } .explore-range h1 { padding: 140px 0; } .range-model > div, .series { cursor: pointer; -webkit-transition: top 0.4s ease; -moz-transition: top 0.4s ease; transition: top 0.4s ease; } .range-model img { transform: scale(1.0); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .range-model > div:hover img { transform: scale(0.8); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .range-model > div:hover:after { content: 'Explore'; position: absolute; width: 90%; bottom: 10px; left: auto; right: auto; text-align: center; color: #1c69d4; font-weight: bold; z-index: 5; transform: translateX(-50%); } .home-bg .wrapper { padding-top: 80px; padding-bottom: 200px; } .new-bmw-x3 .wrapper { max-width: 1600px; display: flex; justify-content: flex-end; } .new-bmw-x3 .push-right { max-width: 460px; } .home-bg h1, .home-bg h2 { text-shadow: 0 0 8px rgba(0,0,0,0.75); } .indv-models { position: relative; } .indv-models > div { position: absolute; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); top: -100%; left: 0; background-color: #fff; z-index: 20; } .indv-models-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgba(255,255,255,0.1); } .indv-models-bg.show { display: block; } .range-model.popup + .indv-models > div:before { content: ''; background-color: #e6e6e6; position: absolute; top: 0; left: 0; width: 100%; height: 200px } .head-big { font-size: 80px !important; } /* Quicklinks ========================================================================== */ .q-blk { bottom: 40px; left: 80px; } .q-link p { font-size: 24px; } .btn-width { max-width: 290px; width: 100%; } /* Tabs Teams ========================================================================== */ .team-link p i { display: none; } /* Service Page ========================================================================== */ .service-list div p { max-width: 310px; } .service-sidebar { padding-left: 40px; } .inc-service { margin-top: -111px; } /* Special Links ========================================================================== */ .sp-m-bot { margin-bottom: 60px; } #sp-slider { margin-bottom: 90px; } /* Form styles ========================================================================== */ .chronoform { margin-bottom: 20px; } .form-control, .select-container, .form-group label, .chrono-l-labels .form-group label, .chrono-l-labels .form-control.empty + label { font-size: 16px; } /*.select-container .select-hide { height: 45px; }*/ .form-group label.pre-fill { width: auto; } .form-group label { top: -18px; font-size: 12px; } /* Footer Links ========================================================================== */ .footer-links { text-align: left; } .footer-links .wrapper { font-size: 14px; line-height: 1.6em; padding-top: 50px; padding-bottom: 50px; } .footer-links h1 { margin: 10px 0 40px 0; } .footer-links .flex > div { padding-bottom: 0; } .footer-nav .wrapper { padding-top: 0; padding-bottom: 0; } .footer-nav .nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .footer-nav a { padding: 15px 20px; } .footer-nav li:first-child a { padding-left: 0; } } @media(min-width: 1200px) { h2, .head-2 { font-size: 28px; } .lap-nav { margin: 3px 0 3px 5px; } .primary-nav a { padding-left: 15px; padding-right: 15px; font-size: 14px; } /* FULL WIDTH CONTENT +======================================================================== */ .full-center { padding: 0 70px; } /* Dealer menu ========================================================================== */ .dealer-name { font-size: 30px; margin-top: 15px; } .dealer-menu .logo { width: auto; } .stacked .nav-menu { top: 156px; } .fixed-menu .stacked .nav-menu, .c-nobanner .stacked .nav-menu { top: 0; } .banner-layer { top: 25%; } .banner-bottom { top: auto; bottom: 5%; } } @media(max-width: 1300px) { .banner-layer .head-2 { display: none; } } @media(min-width: 1300px) { .primary-nav a { font-size: 14px; } } @media(min-width: 1400px) { .banner-layer { max-width: 680px; } } @media(min-width: 1500px) { .welcome .wrapper, .finance-us .wrapper, .large-section .wrapper { padding-top: 150px; padding-bottom: 150px; } .home-bg .wrapper { padding-top: 100px; padding-bottom: 400px; } } /* Featured Cars CSS ========================================================================== */ .cow h2, .home .cow h2 { padding: 10px 20px; font-size: 17px; margin: 0; color: #000; text-transform: initial; font-weight: 600; line-height: 1.4em; } .cow a { display: block; position: relative; width: 100%; max-height: none; overflow: hidden; } .cow a img { display: block; aspect-ratio: 500 / 377; object-fit: cover; object-position: center; } .cow-content { margin-top: auto; padding: 0; } .cow ul { margin: 0; padding: 0 20px; } .flex .cow ul { padding: 0 0 0 0; color: #666; margin: 0; font-size: 14px; } .cow h3 span { color: #666; font-size: 14px; line-height: 1.2em; text-transform: capitalize; font-size: 12px; color: #999; font-weight: normal; display: block; } .cow .was-price { display: block; } .cow h3 { margin: 0; border-top: 1px solid #eaeaea; } .cow h3 .t-primary { color: #666; font-size: 26px; font-weight: bold; } .cow .btn { margin-top: 20px; text-align: center; padding: 15px 10px 15px; max-width: 100%; } .cow .was-price span { display: inline-block; text-decoration: line-through; } .cow .video-thumb { background-color: #666; } .cow .video-thumb img { opacity: 0.4; } .cow .video-thumb:before { content: ''; position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-50%,-50%); cursor: pointer; background-color: #fff; z-index: 1; } .cow .video-thumb:after { content: ''; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiB2ZXJzaW9uPSIxLjEiIGZpbGw9IiNlNTJkMjciPg0KICA8cGF0aCBkPSJNMzEuNjgxIDkuNmMwIDAtMC4zMTMtMi4yMDYtMS4yNzUtMy4xNzUtMS4yMTktMS4yNzUtMi41ODEtMS4yODEtMy4yMDYtMS4zNTYtNC40NzUtMC4zMjUtMTEuMTk0LTAuMzI1LTExLjE5NC0wLjMyNWgtMC4wMTJjMCAwLTYuNzE5IDAtMTEuMTk0IDAuMzI1LTAuNjI1IDAuMDc1LTEuOTg3IDAuMDgxLTMuMjA2IDEuMzU2LTAuOTYzIDAuOTY5LTEuMjY5IDMuMTc1LTEuMjY5IDMuMTc1cy0wLjMxOSAyLjU4OC0wLjMxOSA1LjE4MXYyLjQyNWMwIDIuNTg3IDAuMzE5IDUuMTgxIDAuMzE5IDUuMTgxczAuMzEzIDIuMjA2IDEuMjY5IDMuMTc1YzEuMjE5IDEuMjc1IDIuODE5IDEuMjMxIDMuNTMxIDEuMzY5IDIuNTYzIDAuMjQ0IDEwLjg4MSAwLjMxOSAxMC44ODEgMC4zMTlzNi43MjUtMC4wMTIgMTEuMi0wLjMzMWMwLjYyNS0wLjA3NSAxLjk4OC0wLjA4MSAzLjIwNi0xLjM1NiAwLjk2Mi0wLjk2OSAxLjI3NS0zLjE3NSAxLjI3NS0zLjE3NXMwLjMxOS0yLjU4NyAwLjMxOS01LjE4MXYtMi40MjVjLTAuMDA2LTIuNTg4LTAuMzI1LTUuMTgxLTAuMzI1LTUuMTgxek0xMi42OTQgMjAuMTV2LTguOTk0bDguNjQ0IDQuNTEzLTguNjQ0IDQuNDgxeiI+PC9wYXRoPg0KPC9zdmc+'); position: absolute; width: 65px; height: 60px; top: 49%; left: 50%; background-size: 600px; transform: translate(-50%,-50%); cursor: pointer; z-index: 2; } .cow .cow-img { position: relative; overflow: hidden; padding: 0; } .featured-banner .cow-img:after, .just-arrived .cow-img:after, .special-banner .cow-img:after { content: 'Just Arrived'; position: absolute; width: 220px; top: 39px; left: -50px; padding: 8px 20px; background-color: #3a247d; color: #fff; font-size: 12px; text-align: center; text-transform: uppercase; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .featured-banner .cow-img:after { content: 'Featured'; content: attr(data-banner); } .f-special .t-was { display: none !important; } /* Feat cars + Review Slider ========================================================================== */ .rc-box .star-colour { color: #2a87c0; } .just-arrived .cow-img:after, .featured .cow-img:before, .special-banner .cow-img:after, .featured-banner .cow-img:after { background-color: #2a87c0; color: #fff; } #reviews .embla__button, .featcars .embla__button { top: auto; bottom: -30px; left: 50%; width: 40px; height: 40px; padding: 10px; transform: translateX(-55px); fill: #ccc; border: 1px solid #ccc; } #reviews .embla__button:hover, .featcars .embla__button:hover { background-color: #1c69d4; border-color: #1c69d4; fill: #fff; } #reviews .embla__button--next, .featcars .embla__button--next { transform: translateX(15px); } @media(min-width: 700px) { .cow .cow-il { display: inline-block; vertical-align: top; } } @media(min-width: 1100px) { .cow h2 { font-size: 18px; } } @media(max-width: 1200px) { .lap-nav { display: none; } } @media(min-width: 1200px) { .dealer-title-fixed a { font-size: 18px; } /* Navigation ========================================================================== */ .homw-ppsl .nav-menu .wrapper { padding: 0 190px 0 50px; } .nav-menu .wrapper { padding: 0 110px 0 50px; } .fixed-menu .nav-menu .wrapper { padding: 0 90px 0 50px; } .fixed-menu .lap-nav { display: none; } } @media(min-width: 1300px) { .cow h3 .t-primary { font-size: 26px; } .footer-nav a { font-size: 14px; } } @media(min-width: 1400px) { h1, .head-1 { font-size: 48px; } .banner-bottom { max-width: 80%; } } /* Reviews CSS ========================================================================== */ .rc-box { text-align: center; } .rc-box .icon-star { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; color: #666; } .review-image { width: 100%; height: 254px; background-position: center; background-repeat: no-repeat; background-size: cover; } .rc-box h3 { margin: 10px 0; color: #666; font-size: 18px; font-weight: bold; } .rc-content { padding: 10px 15px; } .star-rating { margin: 10px 0; font-size: 30px; } .star-rating svg { margin: 0 2px; } .rc-heading a:hover { text-decoration: none; } /* Colours ========================================================================== */ .review-carousel .lSAction > a, .featured-cars .lSAction > a { background: transparent; color: #cccccc; border: 1px solid #cccccc; } .rc-box .star-colour { color: #2a87c0; } .review-carousel .lSAction > .lSPrev:before, .featured-cars .lSAction > .lSPrev:before { border-color: transparent transparent #085280 transparent; } .review-carousel .lSAction > .lSPrev:after, .featured-cars .lSAction > .lSPrev:after { border-color: transparent #085280 transparent transparent; } .review-carousel .lSAction > .lSNext:before, .featured-cars .lSAction > .lSNext:before { border-color: transparent transparent #085280 transparent; } .review-carousel .lSAction > .lSNext:after, .featured-cars .lSAction > .lSNext:after { border-color: #085280 transparent transparent transparent; } .just-arrived .cow-img:after, .featured .cow-img:before, .special-banner .cow-img:after, .featured-banner .cow-img:after { background-color: #2a87c0; color: #fff; } .featured-cars a { display: block; min-height: 1px; } /* Search Page ========================================================================== */ .finder { max-width: 1000px; padding: 40px 30px; line-height: 1.4em; font-size: 15px; position: relative; width: 100%; margin: 0 auto; } .finder fieldset { border: none; padding: 0; margin: 0; } .finder .btn { border: none; } #finder-filter-window, .finder fieldset a, .finder .icon-search, .btn-adv { display: none; } .search-results { list-style: none; padding: 55px 0 0; } .result-url { color: #ccc; } .result-title a { color: #1c69d4; } .highlight { display: inline-block !important; } #finder-search .form-group input { margin-bottom: 0 !important; } #search-form label { display: none; } #search-form input { height: 51px; } .result-text { margin: 0; } .list-striped li { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 20px; } .btn-search { display: block; font-size: 14px; text-align: center; font-weight: 700; padding: 11px 20px 11px; min-width: 100%; border: none; background: #1c69d4; color: #fff; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .btn-search:hover { background-color: #4d4d4d; color: #fff; } @media (min-width: 1025px) { .search-results { padding: 150px 0 0; } .finder { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 1200px) { .finder { padding-top: 110px; padding-bottom: 110px; } } /* Instagram ========================================================================== */ .instagram_gallery { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-left: -20px; } .instagram_gallery a { width: 50%; padding: 0 0 20px 20px; position: relative; display: inline-block; height: 100%; overflow: hidden; } .instagram_gallery img { border: 1px solid #fff; } .instagram_gallery:hover img { opacity: 1; border-color: #1c69d4; } .instagram_gallery:hover img:not(:hover) { opacity: 0.3; border-color: #fff; } @media (min-width: 768px) { .instagram_gallery a { width: 33%; } } @media (min-width: 1025px) { .instagram_gallery { margin-left: -30px; } .instagram_gallery a { width: 25%; padding: 0 0 30px 30px; } } /* Series Selector ========================================================================== */ .md-flex > div:nth-child(1) .md-link:after {content: "1";} .md-flex > div:nth-child(2) .md-link:after {content: "2";} .md-flex > div:nth-child(3) .md-link:after {content: "3";} .md-flex > div:nth-child(4) .md-link:after {content: "4";} .md-flex > div:nth-child(5) .md-link:after {content: "5";} .md-flex > div:nth-child(6) .md-link:after {content: "6";} .md-flex > div:nth-child(7) .md-link:after {content: "7";} .md-flex > div:nth-child(8) .md-link:after {content: "8";} .md-flex > div:nth-child(9) .md-link:after {content: "X";} .md-flex > div:nth-child(10) .md-link:after {content: "Z";} .md-flex > div:nth-child(11) .md-link:after {content: "i";} .md-flex > div:nth-child(12) .md-link:after {content: "M";} .md-link { background-color: #f2f2f2; padding: 40px 10px 10px; display: block; color: #4d4d4d; font-weight: bold; position: relative; overflow: hidden; } .md-link:after { display: block; content: ""; color: #e6e6e6; font-weight: bold; font-size: 70px; position: absolute; top: 25px; right: 4px; z-index: 1; } .md-link span { position: relative; z-index: 2; } .md-link:hover:after, .md-link:hover { color: #1c69d4; text-decoration: none; } .md-heading { background-color: #eee; border: 1px solid #ddd; color: #1a1a1a; display: block; width: 100%; padding: 19px 10px 17px; font-size: 14px; font-weight: bold; text-transform: none; text-align: center; cursor: pointer; } .md-mobile { max-height: 0; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .md-mobile.active { max-height: 10000px; } @media (min-width: 1024px) { .md-heading { display:none !important; } .md-mobile { max-height: 10000px; } .refine-search .md-mobile { margin-top: 20px; } } @media (min-width: 1200px) { .md-link { padding: 60px 20px 20px; } .md-link:after { font-size: 90px; top: 35px; right: 10px; } } .car-search .car-list .cl-content { overflow: visible; } @media (max-width: 500px) { .ppsl-banner h1 { font-size: 22px; margin: 0; } .ppsl-banner h2 { margin: 10px 0; font-size: 0.9em; line-height: 1.25em; } } @media (min-width: 768px) { .ppsl-banner h1 { color: #fff; } .ppsl-banner h2 { color: #fff; } .ppsl-banner-na h1 { color: #fff; } } .car-search .clm-image img.l-load { object-fit: cover; object-position: center; } /* Form Updates */ .pre-fil { position: absolute !important; top: 50% !Important; transform: translateY(-50%); padding: 17px 17px 15px !important; width: auto !important; } .form-phone .form-control { padding-left: 50px !important; } .form-phone .ph-number { padding-left: 50px !important; } .form-mando { margin-top: 10px; font-size: 12px; text-align: center; } .form-mando span { font-size: 16px; color: red; } /* Google Reviews ========================================================================== */ .home-google-ratings a { display: flex; flex-wrap: wrap; justify-content: center; color: #fff; text-decoration: none; align-items: flex-start; } .home-google-ratings .home-google-ratings-title { width: 100%; color: #fff; margin: 0 auto 10px; text-align: center; } .home-google-ratings .rating { font-size: 20px; font-weight: 600; margin-right: 10px; } /* Sell New Page - 09/2023 ========================================================================== */ .sell h2, .sell-new h2, .sell .head-1, .sell-new .head-1 { margin-bottom: 30px; } .sml-wrapper, .lrg-wrapper { padding: 40px 30px; line-height: 1.4em; font-size: 16px; margin: 0 auto; width: 100%; } .sml-wrapper { max-width: 1100px; } .lrg-wrapper { max-width: 1900px; } .wrapper.no-padding-top, .lrg-wrapper.no-padding-top, .sml-wrapper.no-padding-top { padding-top: 0; } .wrapper.no-padding-bottom, .lrg-wrapper.no-padding-bottom, .sml-wrapper.no-padding-bottom { padding-bottom: 0; } .sell-heading span { color: #1c69d4; } .sell-shadow { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .s-link { padding: 50px 0; } .s-link span { font-size: 30px; margin-bottom: 40px; display: block; position: relative; line-height: 1em; font-weight: 600; } .s-link span:after { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; margin: 0 auto; height: 2px; width: 50px; background-color: #d9d9d9; } .s-link p { margin-bottom: 0; } .step-link img { margin: 0 auto; } .step-link h3 { font-weight: 600; } .sell-review { padding: 30px; border: 1px solid #000; } .sell-whatsapp { display: flex; margin-top: 5px; margin-bottom: 20px; align-items: center; } .sell-whatsapp span { margin: 0 15px; } .sell-whatsapp img { margin-right: 5px; } .step-icon { position: relative; display: block; border: 1px solid #000; border-radius: 50%; width: 100px; height: 100px; padding: 10px; margin: 0 auto; } .step-icon svg { width: 80px; height: 80px; } .step-icon:after { display: block; position: absolute; top: 0; right: 0; height: 25px; width: 25px; background-color: #1c69d4; border-radius: 50%; color: #fff; font-size: 14px; padding: 2px; } .sell-steps .flex > div:nth-child(1) .step-icon:after {content: "1";} .sell-steps .flex > div:nth-child(2) .step-icon:after {content: "2";} .sell-steps .flex > div:nth-child(3) .step-icon:after {content: "3";} .sell-link h3 { display: flex; align-items: center; font-weight: 600; } .sell-link svg { margin-right: 10px; border: 1px solid #000; border-radius: 50px; font-size: 40px; color: #ef4035; padding: 8px; height: 50px; width: 50px; } .sell-flex { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* .sell-img { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; background: #46bad3; }*/ .sell-img-text { position: relative; height: 100%; } .sell-img { object-fit: cover; width: 100%; height: 100%; } .sell-text { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; } @media (max-width: 500px) { .btn-sell { display: block; text-align: center; margin: 0 auto; } } @media (max-width: 768px) { .sell-shadow .flex>* .s-link { padding-bottom: 0; } .sell-shadow .flex>*:last-child .s-link { padding-bottom: 50px; } .s-link span { font-size: 30px; } } @media (min-width: 1025px) { body.sell, body.sell-new { padding-top: 110px; } .sml-wrapper, .lrg-wrapper { padding: 60px 50px; } .sell h2, .sell-new h2, .sell .head-1, .sell-new .head-1 { margin-bottom: 60px; } } @media (min-width: 1200px) { .sml-wrapper, .lrg-wrapper { padding: 100px 50px; } } /* ========================================================================== * 4.2 - Accordian * ========================================================================== */ .accord-head { display: flex; justify-content: space-between; padding: 20px; cursor: pointer; margin: 0; background: #f5f5f5; color: #a3a3a3; font-weight: 600; } .accord-head svg { fill: #a3a3a3; transition: all 0.4s ease; } .accord-head:hover, .accord-container.active .accord-head{ color: #fff; background: #1c69d4; } .accord-head:hover svg, .accord-container.active svg { fill: #fff; } .accord-container.active .accord-head svg { transform: rotate(45deg); } .accord-content { padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.4s ease; margin-bottom: 20px; } .accord-container.active .accord-content { padding: 20px 20px 20px; max-height: 10000px; } /* ========================================================================== * 4.2 - Stock Locator New * ========================================================================== */ .stock-item, .stock-option, .stock-option .so-select, .keywords-wrapper, .stock-option .so-dropdown, .stock-locator a.si-features span, .stock-locator .btn, .sd-details .sd-content { border-radius: 10px; } .si-gallery, .sd-heading, .sdc-vehicle-details, .sdc-user-details { border-radius: 10px 10px 0 0; } .sd-content.sdd-tabs, .sdc-submit { border-radius: 0 0 10px 10px; } .ate-stock-locator #angle-quote { display: none; } .ate-stock-locator .si-certified { order: 1; } .ate-stock-locator .always-bmw { display: none; position: relative; cursor: pointer; font-size: 13px; margin-top: -20px; margin-bottom: 20px; } .ate-stock-locator .sl-stock-details.certified .ab-certified, .ate-stock-locator .sl-stock-details:not(.certified) .ab-used { display: block; } .ate-stock-locator .always-bmw div { display: none; background: #fff; border: 1px solid #1c69d4; } .ate-stock-locator .select-dp.always-bmw div { border: 1px solid #1c69d4; } .ate-stock-locator .always-bmw:hover div { display: block; position: absolute; top: 74px; left: 0; right: 0; z-index: 221; margin: 0; width: calc(100% - 40px); box-shadow: 0px 1px 3px 0 rgb(0 0 0 / 80%); } .ate-stock-locator .bmw-cert { background-color: #1c69d4; color: #fff; padding: 16px 20px; margin: 0; display: flex; justify-content: space-between; font-size: 14px; } @media (min-width:1200px) { .ate-stock-locator .always-bmw { margin-top: -30px; margin-bottom: 30px; } } .ate-stock-locator .si-title .year, .ate-stock-locator .sd-title .year, .ate-stock-locator .v_manufacture, .ate-stock-locator .user-account, .ate-stock-locator .sd-share-mobile > div:first-child, .ate-stock-locator .finance-disclaimer, .ate-stock-locator .sbft-price .sbf-title, .ate-stock-locator .sbft-price .sbf-suggestions, .ate-stock-locator .stock-locator a.sd-fin-disc.btn-fancy, .ate-stock-locator .sdc-vehicle-details .sdc-certified, .ate-stock-locator .v_dereg { display: none; } .ate-stock-locator [type="checkbox"]:not(:checked):before, .ate-stock-locator [type="checkbox"]:checked:before { content: none; } .featured-cars .cow { height: 100%; } .featcars .embla__button { bottom: -70px; } .ate-stock-locator .sd-price { font-size: 28px; } .ate-stock-locator .sd-price .sl-highlight { color: #000; } .ate-stock-locator .sd-enquiry { display: flex; flex-direction: column; } .ate-stock-locator .sd-external-buttons { order: 1; margin-top: 20px; margin-bottom: 0; } .ate-stock-locator a.sic-bottom img { max-height: 50px; } .sd-enquiry #mobile-required, .sd-enquiry #email-required { display: inline-flex !important; } .mini-search { z-index: 10; } .mini-search #so-year, .mini-search #so-location, .mini-search #so-more_filters { display: none; } .stock-option .so-select { height: 100%; } /* .featured-cars a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: none; z-index: 1; } .featured-cars .cow { height: 100%; } .featured-cars .cow h2, .home .featured-cars .cow h2 { padding: 15px 20px 0; white-space: normal; } .featured-cars .cow h3, .featured-cars .cow .cow-il li { padding: 15px 0 0; margin: 10px 20px 0; } .featured-cars .cow h3 span { font-size: 24px; color: #000; font-weight: 600; } .featured-cars .cow .cow-il li { } .featured-cars .cow-content { margin-top: 0; } .featured-cars .cow .btn.btn-primary { margin: auto 20px 20px; } */ /* New Slider with Icons */ .banner-layer-right { padding: 20px 20px; width: 100%; } .banner-layer-right .banner-icons img { max-width: 50px; min-height: auto; } .banner-layer-right h5 { color: #fff; margin-top: 0; font-size: 12px; line-height: 16px; font-weight: 400; margin-bottom: 10px; } .banner-terms { position: absolute; right:0; bottom: 0; padding: 0 10px 20px 0; } .banner-terms p { color: #fff; font-size: 13px; } @media (max-width: 767px) { .banner-layer-right { background: #000; } .banner-layer-right .flex { margin-left: -10px; } .banner-layer-right .flex >* { padding: 0 0 0 10px; } } @media (min-width: 768px) { .banner-layer-right { max-width: 400px; top: 50%; transform: translateY(-50%); bottom: auto; position: absolute; right: 0; padding: 10px 30px; width: 100%; } .banner-layer-right h5 { margin-bottom: 0; } } @media (min-width: 1025px) { .banner-layer-right { padding: 20px 50px; max-width: 500px; } .banner-layer-bottom h5, .banner-layer-right h5 { font-size: 12px; } .banner-layer-right .banner-icons { display: flex; gap: 15px; align-items: center; } .banner-terms { padding-right: 50px; } } @media (min-width: 1400px) { .banner-layer-right .banner-icons img { max-width: 70px; } .banner-layer-right h5 { font-size: 16px; } .banner-layer-right { max-width: 700px; } } @media (min-width: 1500px) { .banner-layer-right .banner-icons img { max-width: 90px; } }