@import url("global.css"); div[id*="header-smartblock"] #header {z-index: 2 !important;} /* ## HERO ## */ .top-image {margin: 0 !important; width: 100%; background-color: #1d4580;} .top-image .carousel .carousel-inner {max-height: 700px;} .top-image > div { padding: 0;} .top-image > div > div { } .top-image > div > div > .fusionNavigation {width: 100%; z-index: 0;position: relative; top: 0;border-top: 1px solid #d4d4d4;background: #1d4580;} .top-image > div > div > .fusionNavigation.sticky {position: fixed; top: 80px; left: 0; z-index: 9999;} .top-image > div > div > .fusionNavigation > h6 {margin: 0;padding: 0 0 0 40px;height: 46px;line-height: 40px;width: 30%;float: left;font-weight: bold;color: #FFF;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav {margin: 0;padding: 0;float: right;width: 70%;text-align: right;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav > li { transition: .25s; display: inline;width: 100px;float: none;display: inline-block;width: auto;margin: 0 40px 0 0;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav > li > a { display: block;color: #FFF;font-weight: bold;font-size: 14px;padding: 10px;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav > li > a:hover { color:#2d96cd; } @media(min-width: 616px) { .top-image > div > div > .fusionNavigation.sticky {top: 110px;} } @media(min-width: 1017px) { .top-image > div > div > .fusionNavigation.sticky {top: 160px;} } @media only screen and (max-width: 991px) { .top-image > div > div > .fusionNavigation > h6 {width: 100%; border-bottom: 1px solid #000;text-align: center;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav {width: 100%;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav > li {margin: 0;width: 25%;float: left;text-align: center;} } @media only screen and (max-width: 767px) { .top-image > div > div > .fusionNavigation > h6 {text-align: left;padding: 0 0 0 20px;/* border: none; */} .top-image > div > div > .fusionNavigation > h6:after{content:url('https://blueprint.cdn.cloud.searchoptics.net/4f280c992e7624b074dc5dffaae5b35f/2017%20model%20fusion%20page/main_nav_arrow.png');float:right;position: relative;right: 10px;top: calc(50% - 12px);height: 24px;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav > li {display: block;width: 100%;text-align: left;} .top-image > div > div > .fusionNavigation > ul.fusionMainNav > li > a {padding: 10px 20px;border-bottom: 1px solid #000;} } /* ## BUTTONS ## */ .top-bottom-icons > div > .icons-block {padding: 0;width: 25%;display: inline-block;} .top-bottom-icons > div > .icons-block > a {display: block;color: #FFF;text-decoration: none;background: #035280;padding: 20px;font-size: 12px;font-weight: bold;text-transform: uppercase;transition: .5s; font-size: 16px;} .top-bottom-icons > div > .icons-block > a:hover { background: #1d4580; } .top-bottom-icons > div > .icons-block > a:before { display: block; } .top-bottom-icons > div > .icons-block.view-offers > a:before { content: url('https://blueprint.cdn.cloud.searchoptics.net/4f280c992e7624b074dc5dffaae5b35f/2017%20model%20fusion%20page/view_offers_icon.png'); } .top-bottom-icons > div > .icons-block.get-quote > a:before { content: url('https://blueprint.cdn.cloud.searchoptics.net/4f280c992e7624b074dc5dffaae5b35f/2017%20model%20fusion%20page/get_qoute_icon.png'); } .top-bottom-icons > div > .icons-block.view-inv > a:before { content: url('https://blueprint.cdn.cloud.searchoptics.net/4f280c992e7624b074dc5dffaae5b35f/2017%20model%20fusion%20page/view_inventory_icon.png'); } .top-bottom-icons > div > .icons-block.compare > a:before { content: url('https://blueprint.cdn.cloud.searchoptics.net/4f280c992e7624b074dc5dffaae5b35f/vcompare.png'); } .top-bottom-icons > div > .icons-block.locate-dealer > a:before { content: url('https://blueprint.cdn.cloud.searchoptics.net/4f280c992e7624b074dc5dffaae5b35f/2017%20model%20fusion%20page/locate_dealer_icon.png'); } @media only screen and (max-width: 767px) { .top-bottom-icons {width: calc(100% + 10px);} .top-bottom-icons > div { } .top-bottom-icons > div > .icons-block {/* display: block; */width: 50%;} .top-bottom-icons > div > .icons-block > a {/* padding: 10px; */} } /* ## CONTENT ## */ .main-section {padding: 20px !important;/* width: calc(100% + 5px); */} .main-section > div { } .main-section > div > div {margin: 0 0 20px 0;position: relative;} .main-section > div > div > div { } .main-section > div > div > div > img {display: none;} .main-section > div > div > div > div { } .main-section > div > div > div > .main-section-text-title {font-size: 36px;/* font-weight: bold; */margin: 0 0 20px 0;} .main-section > div > div > div > .main-section-text-paragraph {font-size: 18px;line-height: 32px;} .main-section > div > div:nth-of-type(odd) { } .main-section > div > div:nth-of-type(odd) > div:nth-of-type(1) {background: no-repeat 50% 50% / cover;height: 100%;position: absolute;/* z-index: 1; *//* display: flex; *//* flex-direction: column; *//* justify-content: center; */} .main-section > div > div:nth-of-type(odd) > div:nth-of-type(2) {padding: 50px;float: right;} .main-section > div > div:nth-of-type(even) { } .main-section > div > div:nth-of-type(even) > div:nth-of-type(1) {background: no-repeat 50% 50% / cover;height: 100%;position: absolute;/* z-index: 1; *//* display: flex; *//* flex-direction: column; *//* justify-content: center; */right: 0;} .main-section > div > div:nth-of-type(even) > div:nth-of-type(2) {padding: 50px;} @media only screen and (max-width: 1366px) { .main-section { } .main-section > div { } .main-section > div > div {margin: 0 0 40px 0;} .main-section > div > div:last-child { margin: 0; } .main-section > div > div:nth-of-type(odd) > div:nth-of-type(2) {padding: 20px;} .main-section > div > div:nth-of-type(even) { } .main-section > div > div:nth-of-type(even) > div:nth-of-type(1) { } .main-section > div > div:nth-of-type(even) > div:nth-of-type(2) {padding: 20px;} } @media only screen and (max-width: 991px) { .main-section > div > div > div > .main-section-text-title {margin: 0 0 20px 0;} .main-section > div > div:nth-of-type(odd) > div:nth-of-type(1) {background: none;position: relative;margin: 0 0 20px 0;} .main-section > div > div:nth-of-type(odd) > div:nth-of-type(2) {float: none;clear: both;padding: 0;} .main-section > div > div:nth-of-type(even) > div:nth-of-type(1) {position: relative;background: none;margin: 0 0 20px 0;} .main-section > div > div:nth-of-type(even) > div:nth-of-type(2) {padding: 0;} } @media only screen and (max-width: 991px) { .main-section > div > div > div > img {display: block !important;} .main-section > div > div > div > .main-section-text-title {font-size: 24px;} .main-section > div > div > div > .main-section-text-paragraph {display: block !important;} } /* ## TRIMS ## */ #trims {padding: 40px 20px;width: 100%;width: 100%;} #trims > div > div > .carousel > .carousel-inner { padding: 0 0 60px 0;} #trims > div > div > .carousel > .carousel-inner > .item > div { background: white;padding: 40px;margin: 0 20px;width: calc(25% - 45px);box-shadow: rgba(0,0,0,0.15) 0px 0px 80px -20px;} #trims > div > div > #socalCarouselTablet > .carousel-inner > .item > div { width: calc(33% - 40px);} #trims > div > div > #socalCarouselTableSM > .carousel-inner > .item > div { width: calc(50% - 40px);} #trims > div > div > #socalCarouselMobile > .carousel-inner > .item > div { width: calc(100% - 40px);} #trims > div > div > .carousel > .carousel-inner > .item > div > img { width: 100%;margin: 0 0 20px 0;} #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption { position: relative;left: 0;right: 0;bottom: 0;padding: 0;color: #000;text-shadow: none;} #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > div { } #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > .trimModel { font-size: 20px;font-weight: bold;margin: 0;} #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > .modleMpg { } #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > .modleMpgMiles { margin: 0 0 40px 0;} #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > a { display: block;width: 100%; color: #FFF;background: #035280;font-weight: bold;transition: .25s;} #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > a:hover { background:#1d4580; } #trims > div > div > .carousel > .carousel-inner > .item > div > .carousel-caption > a > div { padding: 20px;transition: .25s;} #trims > div > div > .carousel > a.carousel-control { background: none;opacity: 1;top: auto;text-shadow: none;bottom: 0;height: 30px;width: 30px;} #trims > div > div > .carousel > a.carousel-control > span { } #trims > div > div > .carousel > a.carousel-control > span.glyphicon { margin: 0;top: 0;} #trims > div > div > .carousel > a.carousel-control > span.sr-only { } #trims > div > div > .carousel > a.left { left: 20px;} #trims > div > div > .carousel > a.left > span.glyphicon-chevron-left { left: 0;} #trims > div > div > .carousel > a.right { right: 20px;} #trims > div > div > .carousel > a.right > span.glyphicon-chevron-right { right: 0;} #trims > div > div > .carousel > .carousel-indicators {height: 10px;padding: 0 !important;bottom: 10px !important;left: 0 !important;right: 0 !important;margin: 0 auto !important;width: calc(100% - 120px);} #trims > div > div > .carousel > .carousel-indicators > li { border-style: none;width: 10px;height: 10px;margin: 0 5px;background: #2d96cd;} #trims > div > div > .carousel > .carousel-indicators > li.active { background:#2d96cd;width: 10px;height: 10px; background: #1d4580;} @media only screen and (max-width: 767px) { #trims {width: calc(100% + 10px);padding: 20px 10px;} #trims > div > div > #socalCarouselMobile > .carousel-inner > .item > div {padding: 20px;width: calc(100% - 20px);margin: 0 10px;} #trims > div > div > .carousel > .carousel-indicators {bottom: 20px !important;} #trims > div > div > .carousel > .carousel-indicators > li { } #trims > div > div > .carousel > .carousel-indicators > li.active { } } /* ## QUOTE FORM ## */ div[id*="inline-form"] .blueprint-form .disclaimer-text {font-size: 16px;} div[id*="inline-form"] .blueprint-form .fieldset > .col .col:nth-child(1) {padding-right: 10px;} div[id*="inline-form"] .blueprint-form .fieldset > .col .col:nth-child(2) {padding-left: 10px !important;} div[id*='inline-form'] #qqForm .fieldset .form-group[data-type='submit'] input.btn-secondary {border: 2px solid #1d4580 !important; color: #1d4580 !important;padding: 10px 20px; font-size: 20px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: 'Roboto', Helvetica, sans-serif;} div[id*='inline-form'] #qqForm .fieldset .form-group[data-type='submit'] input.btn-secondary:hover {background: #1d4580 !important; color: #fff !important; border-color: #fff !important} /*NS 448722: Increase the "Explore the {Model Name} font size"*/ .top-image > div > div > .fusionNavigation > h6 {font-size: 14px;}