Extend CSS

.section-pull

Pulls content to the edge of the container for offset columns.

NOTE: Only applies ABOVE 768px, to columns offset by 1, 2 or 3. Notice the div structure has been modified - column width and column offset do not live on the same level.

Images (offset-2)

150+ Point Inspection

Sed ut perspiciatis unde omnis iste natus error sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="col-sm-10">
<div class="col-sm-offset-2">
<div class="section-pull">...</div>
</div>
</div>

Blockquote (offset-3)

<div class="col-sm-9">
<div class="col-sm-offset-3">
<blockquote class="section-pull">...</blockquote>
</div>
</div>

Fast Loading Videos

Use this when you have to put many youtube videos on one page. This works by generating an image thumbnail with overlay play button without actually loading the video, which speeds up the page loading significantly.

All videos are loaded in 16x9 aspect ratio. In place of VIDEO-ID put only last part of actual video. For example, if video link is "https://www.youtube.com/watch?v=MYeM-8hO3hM" use only "MYeM-8hO3hM".

<!-- HTML -->
<div class="youtube-player embed-responsive embed-responsive-16by9" data-id="VIDEO-ID"></div>
<!-- Load this script in Body Section/Bottom -->
<script src="/assets/shared/js/fast-yt-videos.js"></script>

.flex-all

Applies basic flex property

.flex-all { display: flex; }

.flex-wrap

Allows items within a flex container to wrap to multiple rows if needed

.flex-wrap { flex-flow: row wrap; }

.flex-center-all

Center align items. Vertical centering by default, horizontal if using column direction.

.flex-center-all { display: flex; align-items: center; }

.flex-center-md

Adds flex and center alignment on 992px screen sizes and higher

@media (min-width: 992px) { .flex-center-md { display: flex; align-items: center; } }

.flex-center-sm

Adds flex and center alignment on 768px screen sizes and higher

@media (min-width: 768px) { .flex-center-sm { display: flex; align-items: center; } }

.list-vert-align

Vertically aligns all <li> elements in the middle. Should by applied to the <ul> or <ol>.

.list-vert-align>li { vertical-align: middle }

.form-xs-auto

Allows for inline display of form items on mobile devices.

.form-xs-auto { margin-bottom: -5px; }
.form-xs-auto .input-group {
display: inline-table;
vertical-align: middle;
margin-bottom: 5px;
}

Pulse Button

.btn-pulse {
box-shadow: 0 0 0 0 #dd0000;
-webkit-animation: pulse 2s infinite cubic-bezier(0.3, 0, 0, 1);
-moz-animation: pulse 2s infinite cubic-bezier(0.3, 0, 0, 1);
-ms-animation: pulse 2s infinite cubic-bezier(0.3, 0, 0, 1);
animation: pulse 2s infinite cubic-bezier(0.3, 0, 0, 1);
}
@-webkit-keyframes pulse {
to {
box-shadow: 0 0 0 10px rgba(221, 0, 0, 0);
}
}
@-moz-keyframes pulse {
to {
box-shadow: 0 0 0 10px rgba(221, 0, 0, 0);
}
}
@-ms-keyframes pulse {
to {
box-shadow: 0 0 0 10px rgba(221, 0, 0, 0);
}
}
@keyframes pulse {
to {
box-shadow: 0 0 0 10px rgba(221, 0, 0, 0);
}
} 

.opacity:hover { opacity: 0.9; }

.fixedBgSec

Adding the class to a full width section, and combining it with a background image will create a faul prallax effect.

jQuery Code

jQuery('.contentSection').addClass('fixedBgSec');

CSS Code

Background color must be added to the section.

.contentSection { background-image: url("/static/dealer-16606/images/name.jpg"); background-color:#000;}

.fixedHeaderArea

Adding the class to the header section will result in a fixed site header.

jQuery code (must be added in CMS)

jQuery('.headerWrapper').addClass('fixedHeaderArea');

CSS code in extend.css

Following CSS resides in extend.css

@media(min-width:992px) {
.fixedHeaderArea {
left: 0;
position: fixed;
right: 0;
z-index: 1030;
}
}

CSS code per style (to adjust the height of header)

Height might need to be further adjusted per dealer (depending on header height).

@media(min-width:992px) {
.fixedHeaderArea {
background: #fff;
}
.fixedHeaderArea ~ #content { padding-top: 180px; }
}

CSS code to be adjusted per dealer (if needed)

Height might need to be further adjusted per dealer (note per dealer height is different from above style height).

@media(min-width:992px) {
.fixedHeaderArea ~ #content { padding-top: 187px; }
}