/* LEGACY CSS - (TEST TEXT FOR CDN) */
body {
left: 0;
overflow-x: hidden;
position: relative;
transition: left .4s ease;
-webkit-font-smoothing: antialiased;
letter-spacing: .015em;
max-width: 100%;
min-height: 100%;
background-color: #fff !important;
color: #3b3b3b;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 16px;
line-height: 1.8125;
margin: 0;
}
.highlight-light comp-highlight inner-content h3,
.highlight-light comp-highlight inner-content p,
.highlight-light comp-highlight inner-content p sup {
color: #3b3b3b !important;
}
.highlight-light comp-highlight inner-content p a {
-webkit-tap-highlight-color: transparent;
color: #6f87a6;
text-decoration: none;
}
form footer .subtext {
margin: 20px auto;
}
.btnSearchFormSubmit {
display: none;
visibility: hidden;
height: 0px;
width: 0px;
}
.article-space {
padding-top: 0px;
}
body > article > div > hr {
border-top: 1px solid #eee;
width: 100%;
height: 0;
background: #eee;
}
comp-faq dl dt.loaded {
cursor: pointer
}
#misc-overlay > figure, #modal-details, #modal-dialog, body > [innovation] ~ comp-highlight > comp-background:after, body > [vocation] ~ comp-highlight > comp-background:after, comp-container[campaign-hero] > comp-images, comp-container[campaign-hero] > comp-images:after, comp-container[hero][hero=bold] comp-background:after, miles-counter > section:after, month-picker > .cover {
height: 100%;
left: 0;
position: absolute;
z-index: 9 !important;
top: 0;
width: 100%
}
body > comp-highlight[layout=Vertical] comp-container[hero] header, body > comp-highlight[layout=Vertical] inner-content, body > comp-highlight[layout^=Horizontal], comp-applications, comp-container[hero] body > comp-highlight[layout=Vertical] header, comp-faq dl, comp-faq header, comp-highlight-columns, comp-new-truck-card > h3.h2, comp-new-truck-card > p, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-resources[vocation] > .group, comp-truck-explore > h3.h2, comp-truck-explore > p {
margin-left: auto;
margin-right: auto;
max-width: 1153px
}
@media(min-width:768px) {
body > comp-highlight[layout=Vertical] comp-container[hero] header, body > comp-highlight[layout=Vertical] inner-content, body > comp-highlight[layout^=Horizontal], comp-applications, comp-container[hero] body > comp-highlight[layout=Vertical] header, comp-faq dl, comp-faq header, comp-highlight-columns, comp-new-truck-card > h3.h2, comp-new-truck-card > p, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-resources[vocation] > .group, comp-truck-explore > h3.h2, comp-truck-explore > p {
padding: 0 20px
}
}
campaign-group, campaign-group > comp-container > inner-content > [choices] > comp-card, comp-container[campaign-section] > inner-content[choices] > comp-card, comp-container[hero][slides] header .slick-slide, comp-container[hero][slides] inner-content .slick-slide, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card, comp-faq dl dt.loaded, miles-counter > section, miles-counter > section > digit-holder, take-over > section {
position: relative
}
campaign-group:after, comp-container[hero][innovation] > video, comp-container[hero][slides] header .slick-slide > video, comp-container[hero][slides] inner-content .slick-slide > video, comp-truck-hero > video, miles-counter > section > digit-holder:not(:first-child):not(:last-child):before {
position: absolute
}
@media(min-width:768px) {
comp-container[campaign-section] > inner-content[choices] > comp-card sub, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card sub {
position: absolute
}
}
take-over, take-over > button, take-over > comp-cover {
position: fixed
}
body > comp-highlight[layout=Vertical]:not([inline]), campaign-group:not([inline]), campaign-group > campaign-hero:not([inline]), campaign-group > campaign-hero > inner-content h1 > :not([inline]), campaign-group > campaign-hero[images="1"] > comp-images > comp-background:not([inline]), campaign-group > comp-container > inner-content > [choices] > comp-card:not([inline]), campaign-group > comp-container > inner-content > [choices] > comp-card > h4 em:not([inline]), campaign-group > comp-container > inner-content > [choices] > comp-card sub:not([inline]), campaign-group[dark] footer strong:not([inline]), campaign-group[split] > comp-container dealer-card:not([inline]), campaign-group div[id^=teleport] comp-background:not([inline]), comp-container:not([inline]), comp-container[campaign-hero] h1 strong:not([inline]), comp-container[campaign-section] > inner-content[choices] > comp-card:not([inline]), comp-container[hero] campaign-group > campaign-hero > header h1 > :not([inline]), comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card:not([inline]), comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card > h4 em:not([inline]), comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card sub:not([inline]), comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card:not([inline]), comp-faq:not([inline]), comp-faq dl:not([inline]):before, comp-highlight-columns > comp-highlight:not([inline]), comp-highlight comp-background:not([inline]), comp-new-truck-card:not([inline]), comp-press nav input:not([inline]), comp-truck-explore:not([inline]), comp-video:not([inline]), miles-counter:not([inline]), miles-counter:not([inline]):after, miles-counter > section > digit-holder:not([inline]):not(:first-child):not(:last-child):before {
display: block
}
@media(max-width:767px) {
comp-container[campaign-section] > inner-content[choices] > comp-card sub:not([inline]), comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card sub:not([inline]), take-over > section > img:not([inline]), take-over > section > video:not([inline]) {
display: block
}
}
comp-faq dl dt.loaded:before {
display: inline-block
}
campaign-group > campaign-hero > footer:empty, comp-container[hero][slides] header .slick-dots, comp-container[hero][slides] inner-content .slick-dots, comp-expand-blocks > header > comp-background a[type=VID]:before {
display: none !important
}
@media(max-width:767px) {
campaign-group > campaign-hero[images="2"] > comp-images > comp-background + comp-background, campaign-group > comp-container:not([position]) > inner-content > header, campaign-group [teleported], campaign-group comp-container[column] form > header, comp-container[hero] campaign-group > comp-container:not([position]) > header > header {
display: none !important
}
}
@media(min-width:768px) {
campaign-group div[id^=teleport] {
display: none !important
}
}
campaign-group > campaign-hero > footer, comp-container[campaign-hero] > inner-content, comp-container[campaign-section] .location + inner-content[choices], comp-container[campaign-section] .location h2, comp-container[campaign-section] comp-container[hero] .location + header[choices], comp-container[hero] comp-container[campaign-hero] > header, comp-container[hero] comp-container[campaign-section] .location + header[choices] {
margin-left: auto;
margin-right: auto
}
.collapsible:not(.expanded), .tab-content:not(.expanded), comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info:not(.expanded), comp-dealers > inner-content > aside > .filters-container .filters-info:not(.expanded), comp-faq dl dt.loaded:not([toggled]) + dd {
-webkit-animation: collapse .25s linear;
animation: collapse .25s linear;
margin-bottom: 0;
margin-top: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
padding-bottom: 0;
padding-top: 0;
transition: padding-top .25s ease-in,padding-bottom .25s ease-in,margin-top .25s ease-in,margin-bottom .25s ease-in
}
.collapsible.expanded, .tab-content.expanded, comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info.expanded, comp-dealers > inner-content > aside > .filters-container .filters-info.expanded, comp-faq dl dt.loaded[toggled] + dd {
-webkit-animation: collapse-expand .25s linear;
animation: collapse-expand .25s linear
}
@-webkit-keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@-webkit-keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
.page-nav-inner > button.configure, comp-truck-hero > .specs .mobile-options button.configure {
background: #713738 url(../png/360-icon.png) no-repeat 20px;
background-size: auto 50%;
color: #fff;
font-size: 12px !important;
font-weight: 700;
letter-spacing: .355em;
padding-left: 128px;
padding-right: 33px;
text-align: left;
text-transform: uppercase
}
/*comp-truck-hero > .specs .mobile-options html:not(.touch) button.configure:hover, html:not(.touch) .page-nav-inner > button.configure:hover, html:not(.touch) comp-truck-hero > .specs .mobile-options button.configure:hover {
background-color: #934849
}*/
campaign-group > comp-container > inner-content > [choices] > comp-card, comp-container[campaign-hero] > inner-content, comp-container[campaign-section] .location, comp-container[campaign-section] > header, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card, comp-container[hero] comp-container[campaign-hero] > header, comp-container[simple-cta], comp-expand-blocks > header > comp-background a[type=VID], miles-counter:after {
text-align: center
}
@media(min-width:768px) {
campaign-group > comp-container:not([position]) > inner-content > header, comp-container[campaign-section] > inner-content[choices] > comp-card, comp-container[hero] campaign-group > comp-container:not([position]) > header > header, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card {
text-align: center
}
}
campaign-group > campaign-hero > inner-content, campaign-group comp-container[column] form footer, comp-container[campaign-section] .location + inner-content[choices] comp-card, comp-container[campaign-section] comp-container[hero] .location + header[choices] comp-card, comp-container[hero] campaign-group > campaign-hero > header, comp-container[hero] comp-container[campaign-section] .location + header[choices] comp-card, take-over > section > section {
text-align: left
}
comp-applications > h3.h2, comp-highlight-columns > h3.h2, comp-new-truck-card > h3.h2, comp-new-truck-card > p, comp-press comp-applications > comp-container.h2.none:not(.loading):after, comp-press comp-highlight-columns > comp-container.h2.none:not(.loading):after, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-resources[vocation] h2, comp-truck-explore > h3.h2, comp-truck-explore > p {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25;
margin-bottom: 45px !important;
margin-top: 0;
padding-bottom: 18px !important;
position: relative
}
comp-applications > h3.h2:after, comp-highlight-columns > h3.h2:after, comp-new-truck-card > h3.h2:after, comp-new-truck-card > p:after, comp-press comp-applications > comp-container.h2.none:not(.loading):after, comp-press comp-highlight-columns > comp-container.h2.none:not(.loading):after, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-resources[vocation] h2:after, comp-truck-explore > h3.h2:after, comp-truck-explore > p:after {
border-top: 1px solid rgba(151,151,151,.15);
bottom: 0;
content: "";
left: 20px;
position: absolute;
right: 20px
}
article > div ul, campaign-group comp-container[column] comp-container[hero] header > ul, campaign-group comp-container[column] inner-content > ul, comp-container[hero] campaign-group comp-container[column] header > ul {
list-style: none;
margin: 0;
padding: 0
}
article > div ul:not(:last-child), campaign-group comp-container[column] comp-container[hero] header > ul:not(:last-child), campaign-group comp-container[column] inner-content > ul:not(:last-child), comp-container[hero] campaign-group comp-container[column] header > ul:not(:last-child) {
margin-bottom: 2em
}
article > div ul:not([dealer-list]) li, campaign-group comp-container[column] comp-container[hero] header > ul:not([dealer-list]) li, campaign-group comp-container[column] inner-content > ul:not([dealer-list]) li, comp-container[hero] campaign-group comp-container[column] header > ul:not([dealer-list]) li {
padding-left: 1.5em;
text-indent: -.7em
}
article > div ul:not([dealer-list]) li:not(:last-of-type), campaign-group comp-container[column] comp-container[hero] header > ul:not([dealer-list]) li:not(:last-of-type), campaign-group comp-container[column] inner-content > ul:not([dealer-list]) li:not(:last-of-type), comp-container[hero] campaign-group comp-container[column] header > ul:not([dealer-list]) li:not(:last-of-type) {
margin-bottom: .2em
}
article > div ul:not([dealer-list]) li:before, campaign-group comp-container[column] comp-container[hero] header > ul:not([dealer-list]) li:before, campaign-group comp-container[column] inner-content > ul:not([dealer-list]) li:before, comp-container[hero] campaign-group comp-container[column] header > ul:not([dealer-list]) li:before {
color: #6f87a6;
content: "\2022";
display: inline-block;
margin-right: .5em
}
article > div ul[dealer-list], campaign-group comp-container[column] comp-container[hero] header > ul[dealer-list], campaign-group comp-container[column] inner-content > ul[dealer-list], comp-container[hero] campaign-group comp-container[column] header > ul[dealer-list] {
margin-top: 2em
}
.slick-next, .slick-prev, campaign-group > campaign-hero[images="2"] > comp-images, campaign-group[split] > comp-container[position] comp-container[hero] header > header, campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2, campaign-group[split] > comp-container[position] inner-content > header, campaign-group[split] > comp-container[position] inner-content > header > h2, comp-container[campaign-hero] > comp-images, comp-container[hero] campaign-group[split] > comp-container[position] header > header, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2, comp-expand-blocks > header > comp-background, comp-expand-blocks > header > comp-background a[type=VID], miles-counter > section, miles-counter > section > digit-holder > span {
display: flex
}
@media(min-width:768px) {
campaign-group > campaign-hero[images="1"], campaign-group > campaign-hero[images="2"] > inner-content, campaign-group > comp-container > inner-content > [choices], campaign-group comp-container[column], comp-container[campaign-section] > inner-content[choices], comp-container[hero] campaign-group > campaign-hero[images="2"] > header, comp-container[hero] campaign-group > comp-container > header > [choices], comp-container[hero] comp-container[campaign-section] > header[choices], take-over {
display: flex
}
take-over > section {
display: flex;
flex-direction: row-reverse
}
}
campaign-group[split] > comp-container[position], miles-counter > section > digit-holder {
display: flex;
flex-direction: column
}
@media(max-width:767px) {
take-over {
display: flex;
flex-direction: column
}
}
@media(min-width:768px) {
comp-container[hero] comp-two-col[electric] > comp-container:first-child > header, comp-two-col[electric] > comp-container:first-child, comp-two-col[electric] > comp-container:first-child > inner-content {
display: flex;
flex-direction: column
}
}
@media(max-width:767px) {
campaign-group comp-container[column] {
display: flex;
flex-direction: column-reverse
}
}
campaign-group[split] > comp-container[position] comp-container[hero] header > header, campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2, campaign-group[split] > comp-container[position] inner-content > header, campaign-group[split] > comp-container[position] inner-content > header > h2, comp-container[hero] campaign-group[split] > comp-container[position] header > header, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2, take-over {
justify-content: center
}
campaign-group > campaign-hero[images="1"], campaign-group > campaign-hero[images="2"] > inner-content, campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2, campaign-group[split] > comp-container[position] inner-content > header > h2, comp-container[hero] campaign-group > campaign-hero[images="2"] > header, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2, take-over {
align-items: center
}
.slick-next, .slick-prev, comp-expand-blocks > header > comp-background, comp-expand-blocks > header > comp-background a[type=VID], miles-counter > section > digit-holder > span {
align-items: center;
justify-content: center
}
comp-container[campaign-section] .location + inner-content[choices], comp-container[campaign-section] comp-container[hero] .location + header[choices], comp-container[hero] comp-container[campaign-section] .location + header[choices] {
justify-content: space-between
}
comp-container[hero] comp-two-col[electric] > comp-container:first-child > header, comp-container[hero] comp-two-col[electric] > comp-container:first-child > header > miles-counter, comp-two-col[electric] > comp-container:first-child > inner-content, comp-two-col[electric] > comp-container:first-child > inner-content > miles-counter {
flex-grow: 1
}
body > [innovation] ~ comp-highlight .swiper-container, body > [vocation] ~ comp-highlight .swiper-container {
list-style: none;
overflow: hidden;
padding: 0;
position: relative;
z-index: 1
}
body > [innovation] ~ comp-highlight .swiper-container-no-flexbox .swiper-slide, body > [vocation] ~ comp-highlight .swiper-container-no-flexbox .swiper-slide {
float: left
}
body > [innovation] ~ comp-highlight .swiper-container-vertical > .swiper-wrapper, body > [vocation] ~ comp-highlight .swiper-container-vertical > .swiper-wrapper {
flex-direction: column
}
body > [innovation] ~ comp-highlight .swiper-wrapper, body > [vocation] ~ comp-highlight .swiper-wrapper {
box-sizing: content-box;
display: flex;
height: 100%;
position: relative;
transition-property: transform;
width: 100%;
z-index: 1
}
body > [innovation] ~ comp-highlight .swiper-container-android .swiper-slide, body > [innovation] ~ comp-highlight .swiper-wrapper, body > [vocation] ~ comp-highlight .swiper-container-android .swiper-slide, body > [vocation] ~ comp-highlight .swiper-wrapper {
transform: translateZ(0)
}
body > [innovation] ~ comp-highlight .swiper-container-multirow > .swiper-wrapper, body > [vocation] ~ comp-highlight .swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap
}
body > [innovation] ~ comp-highlight .swiper-container-free-mode > .swiper-wrapper, body > [vocation] ~ comp-highlight .swiper-container-free-mode > .swiper-wrapper {
margin: 0 auto;
transition-timing-function: ease-out
}
body > [innovation] ~ comp-highlight .swiper-slide, body > [vocation] ~ comp-highlight .swiper-slide {
flex-shrink: 0;
height: 100%;
position: relative;
transition-property: transform;
width: 100%
}
body > [innovation] ~ comp-highlight .swiper-invisible-blank-slide, body > [vocation] ~ comp-highlight .swiper-invisible-blank-slide {
visibility: hidden
}
body > [innovation] ~ comp-highlight .swiper-container-autoheight, body > [innovation] ~ comp-highlight .swiper-container-autoheight .swiper-slide, body > [vocation] ~ comp-highlight .swiper-container-autoheight, body > [vocation] ~ comp-highlight .swiper-container-autoheight .swiper-slide {
height: auto
}
body > [innovation] ~ comp-highlight .swiper-container-autoheight .swiper-wrapper, body > [vocation] ~ comp-highlight .swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform,height
}
/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif
}
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, 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
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace,monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0 0 15px;
}
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;
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
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
*, :after, :before {
background: transparent !important;
box-shadow: none !important;
color: #000 !important;
text-shadow: none !important
}
a, a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")"
}
abbr[title]:after {
content: " (" attr(title) ")"
}
a[href^="#"]:after, a[href^="javascript:"]:after {
content: ""
}
blockquote, pre {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
img, tr {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
comp-press comp-container.none:not(.loading):after, h2, h3, p {
orphans: 3;
widows: 3
}
comp-press comp-container.none:not(.loading):after, h2, h3 {
page-break-after: avoid
}
.navbar {
display: none
}
.btn > .caret, .dropup > .btn > .caret {
border-top-color: #000 !important
}
.label {
border: 1px solid #000
}
.table {
border-collapse: collapse !important
}
.table td, .table th {
background-color: #fff !important
}
.table-bordered td, .table-bordered th {
border: 1px solid #ddd !important
}
}
*, :after, :before {
box-sizing: border-box
}
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 10px
}
body {
background-color: #fff;
color: #3b3b3b;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 16px;
line-height: 1.8125
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
a:focus, a:hover {
color: #713738;
text-decoration: underline
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
figure {
margin: 0
}
img {
vertical-align: middle
}
.img-responsive {
display: block;
height: auto;
max-width: 100%
}
.img-rounded {
border-radius: 6px
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.8125;
max-width: 100%;
padding: 4px;
transition: all .2s ease-in-out
}
.img-circle {
border-radius: 50%
}
hr {
border: 0;
border-top: 1px solid #eee;
margin-bottom: 29px;
margin-top: 29px
}
.sr-only {
clip: rect(0,0,0,0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.sr-only-focusable:active, .sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}
[role=button] {
cursor: pointer
}
.h1, .h2, .h3, .h4, .h5, .h6, [engine] comp-specs > div li > strong, [specs] comp-specs[type=cabConfigurations] strong, article table.specs tbody td:not([colspan]):first-of-type, article table.specs thead th, comp-new-truck-card > h3.h2, comp-new-truck-card div > h3, comp-press comp-container.none:not(.loading):after, comp-truck-explore > h3.h2, comp-truck-explore a > h3, comp-truck-hero > .specs > div li > strong, comp-truck-hero comp-specs > div li > strong, h1, h2, h3, h4, h5, h6 {
color: #3b3b3b;
font-family: industry,sans-serif;
font-weight: 500;
line-height: 1.1
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, [engine] comp-specs > div li > strong .small, [engine] comp-specs > div li > strong small, [specs] comp-specs[type=cabConfigurations] strong .small, [specs] comp-specs[type=cabConfigurations] strong small, article table.specs tbody td:not([colspan]):first-of-type .small, article table.specs tbody td:not([colspan]):first-of-type small, article table.specs thead th .small, article table.specs thead th small, comp-new-truck-card > h3.h2 small, comp-new-truck-card div > h3 small, comp-press comp-container.none:not(.loading):after .small, comp-press comp-container.none:not(.loading):after small, comp-truck-explore > h3.h2 small, comp-truck-explore a > h3 small, comp-truck-hero > .specs > div li > strong .small, comp-truck-hero > .specs > div li > strong small, comp-truck-hero comp-specs > div li > strong .small, comp-truck-hero comp-specs > div li > strong small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
color: #777;
font-weight: 400;
line-height: 1
}
.h1, .h2, .h3, comp-new-truck-card > h3.h2, comp-new-truck-card div > h3, comp-press comp-container.none:not(.loading):after, comp-truck-explore > h3.h2, comp-truck-explore a > h3, h1, h2, h3 {
margin-bottom: 14.5px;
margin-top: 29px
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, comp-new-truck-card > h3.h2 small, comp-new-truck-card div > h3 small, comp-press comp-container.none:not(.loading):after .small, comp-press comp-container.none:not(.loading):after small, comp-truck-explore > h3.h2 small, comp-truck-explore a > h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
font-size: 65%
}
.h4, .h5, .h6, [engine] comp-specs > div li > strong, [specs] comp-specs[type=cabConfigurations] strong, article table.specs tbody td:not([colspan]):first-of-type, article table.specs thead th, comp-truck-hero > .specs > div li > strong, comp-truck-hero comp-specs > div li > strong, h4, h5, h6 {
margin-bottom: 14.5px;
margin-top: 14.5px
}
.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, [engine] comp-specs > div li > strong .small, [engine] comp-specs > div li > strong small, [specs] comp-specs[type=cabConfigurations] strong .small, [specs] comp-specs[type=cabConfigurations] strong small, article table.specs tbody td:not([colspan]):first-of-type .small, article table.specs tbody td:not([colspan]):first-of-type small, article table.specs thead th .small, article table.specs thead th small, comp-truck-hero > .specs > div li > strong .small, comp-truck-hero > .specs > div li > strong small, comp-truck-hero comp-specs > div li > strong .small, comp-truck-hero comp-specs > div li > strong small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
font-size: 75%
}
.h1, h1 {
font-size: 48px
}
.h2, comp-new-truck-card > h3.h2, comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-new-truck-card div > h3, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-truck-explore > h3.h2, comp-truck-explore a > h3, comp-truck-explore comp-press a > comp-container.none:not(.loading):after, h2 {
font-size: 33px
}
.h3, comp-press comp-container.none:not(.loading):after, h3 {
font-size: 24px
}
.h4, h4 {
font-size: 18px
}
.h5, [engine] comp-specs > div li > strong, [specs] comp-specs[type=cabConfigurations] strong, article table.specs tbody td:not([colspan]):first-of-type, article table.specs thead th, comp-truck-hero > .specs > div li > strong, comp-truck-hero comp-specs > div li > strong, h5 {
font-size: 16px
}
.h6, h6 {
font-size: 12px
}
p {
margin: 0 0 14.5px
}
.lead {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
margin-bottom: 29px
}
@media(min-width:768px) {
.lead {
font-size: 24px
}
}
.small, small {
font-size: 87%
}
.mark, mark {
background-color: #fcf8e3;
padding: .2em
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.text-nowrap {
white-space: nowrap
}
.text-lowercase {
text-transform: lowercase
}
.initialism, .text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
.text-muted {
color: #777
}
.text-primary {
color: #337ab7
}
a.text-primary:focus, a.text-primary:hover {
color: #286090
}
.text-success {
color: #3c763d
}
a.text-success:focus, a.text-success:hover {
color: #2b542c
}
.text-info {
color: #31708f
}
a.text-info:focus, a.text-info:hover {
color: #245269
}
.text-warning {
color: #8a6d3b
}
a.text-warning:focus, a.text-warning:hover {
color: #66512c
}
.text-danger {
color: #a94442
}
a.text-danger:focus, a.text-danger:hover {
color: #843534
}
.bg-primary {
background-color: #337ab7;
color: #fff
}
a.bg-primary:focus, a.bg-primary:hover {
background-color: #286090
}
.bg-success {
background-color: #dff0d8
}
a.bg-success:focus, a.bg-success:hover {
background-color: #c1e2b3
}
.bg-info {
background-color: #d9edf7
}
a.bg-info:focus, a.bg-info:hover {
background-color: #afd9ee
}
.bg-warning {
background-color: #fcf8e3
}
a.bg-warning:focus, a.bg-warning:hover {
background-color: #f7ecb5
}
.bg-danger {
background-color: #f2dede
}
a.bg-danger:focus, a.bg-danger:hover {
background-color: #e4b9b9
}
.page-header {
border-bottom: 1px solid #eee;
margin: 58px 0 29px;
padding-bottom: 13.5px
}
ol, ul {
margin-bottom: 14.5px;
margin-top: 0
}
ol ol, ol ul, ul ol, ul ul {
margin-bottom: 0
}
.list-inline, .list-unstyled {
list-style: none;
padding-left: 0
}
.list-inline {
margin-left: -5px
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
dl {
margin-bottom: 29px;
margin-top: 0
}
dd, dt {
line-height: 1.8125
}
dt {
font-weight: 700
}
dd {
margin-left: 0
}
.dl-horizontal dd:after, .dl-horizontal dd:before {
content: " ";
display: table
}
.dl-horizontal dd:after {
clear: both
}
@media(min-width:768px) {
.dl-horizontal dt {
clear: left;
float: left;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 160px
}
.dl-horizontal dd {
margin-left: 180px
}
}
abbr[data-original-title], abbr[title] {
border-bottom: 1px dotted #777;
cursor: help
}
.initialism {
font-size: 90%
}
blockquote {
border-left: 5px solid #eee;
font-size: 20px;
margin: 0 0 29px;
padding: 14.5px 29px
}
blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
margin-bottom: 0
}
blockquote .small, blockquote footer, blockquote small {
color: #777;
display: block;
font-size: 80%;
line-height: 1.8125
}
blockquote .small:before, blockquote footer:before, blockquote small:before {
content: "— "
}
.blockquote-reverse, blockquote.pull-right {
border-left: 0;
border-right: 5px solid #eee;
padding-left: 0;
padding-right: 15px;
text-align: right
}
.blockquote-reverse .small:before, .blockquote-reverse footer:before, .blockquote-reverse small:before, blockquote.pull-right .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before {
content: ""
}
.blockquote-reverse .small:after, .blockquote-reverse footer:after, .blockquote-reverse small:after, blockquote.pull-right .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after {
content: " —"
}
address {
font-style: normal;
margin-bottom: 29px
}
.btn, address {
line-height: 1.8125
}
.btn {
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.focus, .btn:focus, .btn:hover {
color: #fff;
text-decoration: none
}
.btn.active, .btn:active {
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
outline: 0
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
box-shadow: none;
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: .65
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none
}
.btn-default {
background-color: #6f87a6;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open > .btn-default.dropdown-toggle {
background-color: #566e8c;
border-color: transparent;
color: #fff
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .btn-default.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover {
background-color: #495c76;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default:active, .open > .btn-default.dropdown-toggle {
background-image: none
}
.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
background-color: #6f87a6;
border-color: transparent
}
.btn-default .badge {
background-color: #fff;
color: #6f87a6
}
.btn-primary {
background-color: #484848;
border-color: #888;
color: #fff
}
.btn-primary.focus, .btn-primary:focus {
background-color: #2f2f2f;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open > .btn-primary.dropdown-toggle {
background-color: #2f2f2f;
border-color: dimgray;
color: #fff
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
background-color: #1d1d1d;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .open > .btn-primary.dropdown-toggle {
background-image: none
}
.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
background-color: #484848;
border-color: #888
}
.btn-primary .badge {
background-color: #fff;
color: #484848
}
.btn-success {
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff
}
.btn-success.focus, .btn-success:focus {
background-color: #449d44;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .btn-success:hover, .open > .btn-success.dropdown-toggle {
background-color: #449d44;
border-color: #398439;
color: #fff
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .btn-success.dropdown-toggle.focus, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle:hover {
background-color: #398439;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .open > .btn-success.dropdown-toggle {
background-image: none
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
background-color: #5cb85c;
border-color: #4cae4c
}
.btn-success .badge {
background-color: #fff;
color: #5cb85c
}
.btn-info {
background-color: #5bc0de;
border-color: #46b8da;
color: #fff
}
.btn-info.focus, .btn-info:focus {
background-color: #31b0d5;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .btn-info:hover, .open > .btn-info.dropdown-toggle {
background-color: #31b0d5;
border-color: #269abc;
color: #fff
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover {
background-color: #269abc;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .open > .btn-info.dropdown-toggle {
background-image: none
}
.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
background-color: #5bc0de;
border-color: #46b8da
}
.btn-info .badge {
background-color: #fff;
color: #5bc0de
}
.btn-warning {
background-color: #f0ad4e;
border-color: #eea236;
color: #fff
}
.btn-warning.focus, .btn-warning:focus {
background-color: #ec971f;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .btn-warning:hover, .open > .btn-warning.dropdown-toggle {
background-color: #ec971f;
border-color: #d58512;
color: #fff
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .btn-warning.dropdown-toggle.focus, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle:hover {
background-color: #d58512;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .open > .btn-warning.dropdown-toggle {
background-image: none
}
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color: #f0ad4e;
border-color: #eea236
}
.btn-warning .badge {
background-color: #fff;
color: #f0ad4e
}
.btn-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: #fff
}
.btn-danger.focus, .btn-danger:focus {
background-color: #c9302c;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .btn-danger:hover, .open > .btn-danger.dropdown-toggle {
background-color: #c9302c;
border-color: #ac2925;
color: #fff
}
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .btn-danger.dropdown-toggle.focus, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle:hover {
background-color: #ac2925;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .open > .btn-danger.dropdown-toggle {
background-image: none
}
.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
background-color: #d9534f;
border-color: #d43f3a
}
.btn-danger .badge {
background-color: #fff;
color: #d9534f
}
.btn-link {
border-radius: 0;
color: #6f87a6;
font-weight: 400
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
background-color: transparent;
box-shadow: none
}
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent
}
.btn-link:focus, .btn-link:hover {
background-color: transparent;
color: #713738;
text-decoration: underline
}
.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
color: #777;
text-decoration: none
}
.btn-lg {
border-radius: 6px;
font-size: 20px;
line-height: 1.3333333;
padding: 10px 16px
}
.btn-sm {
padding: 5px 10px
}
.btn-sm, .btn-xs {
border-radius: 3px;
font-size: 14px;
line-height: 1.5
}
.btn-xs {
padding: 1px 5px
}
.btn-block {
display: block;
width: 100%
}
.btn-block + .btn-block {
margin-top: 5px
}
input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
width: 100%
}
.fade {
opacity: 0;
transition: opacity .15s linear
}
.fade.in {
opacity: 1
}
.collapse {
display: none
}
.collapse.in {
display: block
}
tr.collapse.in {
display: table-row
}
tbody.collapse.in {
display: table-row-group
}
.collapsing {
height: 0;
overflow: hidden;
position: relative;
transition-duration: .35s;
transition-property: height,visibility;
transition-timing-function: ease
}
.materialize-red {
background-color: #484848 !important
}
.materialize-red-text {
color: #484848 !important
}
.materialize-red.lighten-5 {
background-color: #fdeaeb !important
}
.materialize-red-text.text-lighten-5 {
color: #fdeaeb !important
}
.materialize-red.lighten-4 {
background-color: #f8c1c3 !important
}
.materialize-red-text.text-lighten-4 {
color: #f8c1c3 !important
}
.materialize-red.lighten-3 {
background-color: #f3989b !important
}
.materialize-red-text.text-lighten-3 {
color: #f3989b !important
}
.materialize-red.lighten-2 {
background-color: #713738 !important
}
.materialize-red-text.text-lighten-2 {
color: #713738 !important
}
.materialize-red.lighten-1 {
background-color: #6f87a6 !important
}
.materialize-red-text.text-lighten-1 {
color: #6f87a6 !important
}
.materialize-red.darken-1 {
background-color: #d0181e !important
}
.materialize-red-text.text-darken-1 {
color: #d0181e !important
}
.materialize-red.darken-2 {
background-color: #b9151b !important
}
.materialize-red-text.text-darken-2 {
color: #b9151b !important
}
.materialize-red.darken-3 {
background-color: #a21318 !important
}
.materialize-red-text.text-darken-3 {
color: #a21318 !important
}
.materialize-red.darken-4 {
background-color: #8b1014 !important
}
.materialize-red-text.text-darken-4 {
color: #8b1014 !important
}
.red {
background-color: #f44336 !important
}
.red-text {
color: #f44336 !important
}
.red.lighten-5 {
background-color: #ffebee !important
}
.red-text.text-lighten-5 {
color: #ffebee !important
}
.red.lighten-4 {
background-color: #ffcdd2 !important
}
.red-text.text-lighten-4 {
color: #ffcdd2 !important
}
.red.lighten-3 {
background-color: #ef9a9a !important
}
.red-text.text-lighten-3 {
color: #ef9a9a !important
}
.red.lighten-2 {
background-color: #e57373 !important
}
.red-text.text-lighten-2 {
color: #e57373 !important
}
.red.lighten-1 {
background-color: #ef5350 !important
}
.red-text.text-lighten-1 {
color: #ef5350 !important
}
.red.darken-1 {
background-color: #e53935 !important
}
.red-text.text-darken-1 {
color: #e53935 !important
}
.red.darken-2 {
background-color: #d32f2f !important
}
.red-text.text-darken-2 {
color: #d32f2f !important
}
.red.darken-3 {
background-color: #c62828 !important
}
.red-text.text-darken-3 {
color: #c62828 !important
}
.red.darken-4 {
background-color: #b71c1c !important
}
.red-text.text-darken-4 {
color: #b71c1c !important
}
.red.accent-1 {
background-color: #ff8a80 !important
}
.red-text.text-accent-1 {
color: #ff8a80 !important
}
.red.accent-2 {
background-color: #ff5252 !important
}
.red-text.text-accent-2 {
color: #ff5252 !important
}
.red.accent-3 {
background-color: #ff1744 !important
}
.red-text.text-accent-3 {
color: #ff1744 !important
}
.red.accent-4 {
background-color: #d50000 !important
}
.red-text.text-accent-4 {
color: #d50000 !important
}
.pink {
background-color: #e91e63 !important
}
.pink-text {
color: #e91e63 !important
}
.pink.lighten-5 {
background-color: #fce4ec !important
}
.pink-text.text-lighten-5 {
color: #fce4ec !important
}
.pink.lighten-4 {
background-color: #f8bbd0 !important
}
.pink-text.text-lighten-4 {
color: #f8bbd0 !important
}
.pink.lighten-3 {
background-color: #f48fb1 !important
}
.pink-text.text-lighten-3 {
color: #f48fb1 !important
}
.pink.lighten-2 {
background-color: #f06292 !important
}
.pink-text.text-lighten-2 {
color: #f06292 !important
}
.pink.lighten-1 {
background-color: #ec407a !important
}
.pink-text.text-lighten-1 {
color: #ec407a !important
}
.pink.darken-1 {
background-color: #d81b60 !important
}
.pink-text.text-darken-1 {
color: #d81b60 !important
}
.pink.darken-2 {
background-color: #c2185b !important
}
.pink-text.text-darken-2 {
color: #c2185b !important
}
.pink.darken-3 {
background-color: #ad1457 !important
}
.pink-text.text-darken-3 {
color: #ad1457 !important
}
.pink.darken-4 {
background-color: #880e4f !important
}
.pink-text.text-darken-4 {
color: #880e4f !important
}
.pink.accent-1 {
background-color: #ff80ab !important
}
.pink-text.text-accent-1 {
color: #ff80ab !important
}
.pink.accent-2 {
background-color: #ff4081 !important
}
.pink-text.text-accent-2 {
color: #ff4081 !important
}
.pink.accent-3 {
background-color: #f50057 !important
}
.pink-text.text-accent-3 {
color: #f50057 !important
}
.pink.accent-4 {
background-color: #c51162 !important
}
.pink-text.text-accent-4 {
color: #c51162 !important
}
.purple {
background-color: #9c27b0 !important
}
.purple-text {
color: #9c27b0 !important
}
.purple.lighten-5 {
background-color: #f3e5f5 !important
}
.purple-text.text-lighten-5 {
color: #f3e5f5 !important
}
.purple.lighten-4 {
background-color: #e1bee7 !important
}
.purple-text.text-lighten-4 {
color: #e1bee7 !important
}
.purple.lighten-3 {
background-color: #ce93d8 !important
}
.purple-text.text-lighten-3 {
color: #ce93d8 !important
}
.purple.lighten-2 {
background-color: #ba68c8 !important
}
.purple-text.text-lighten-2 {
color: #ba68c8 !important
}
.purple.lighten-1 {
background-color: #ab47bc !important
}
.purple-text.text-lighten-1 {
color: #ab47bc !important
}
.purple.darken-1 {
background-color: #8e24aa !important
}
.purple-text.text-darken-1 {
color: #8e24aa !important
}
.purple.darken-2 {
background-color: #7b1fa2 !important
}
.purple-text.text-darken-2 {
color: #7b1fa2 !important
}
.purple.darken-3 {
background-color: #6a1b9a !important
}
.purple-text.text-darken-3 {
color: #6a1b9a !important
}
.purple.darken-4 {
background-color: #4a148c !important
}
.purple-text.text-darken-4 {
color: #4a148c !important
}
.purple.accent-1 {
background-color: #ea80fc !important
}
.purple-text.text-accent-1 {
color: #ea80fc !important
}
.purple.accent-2 {
background-color: #e040fb !important
}
.purple-text.text-accent-2 {
color: #e040fb !important
}
.purple.accent-3 {
background-color: #d500f9 !important
}
.purple-text.text-accent-3 {
color: #d500f9 !important
}
.purple.accent-4 {
background-color: #a0f !important
}
.purple-text.text-accent-4 {
color: #a0f !important
}
.deep-purple {
background-color: #673ab7 !important
}
.deep-purple-text {
color: #673ab7 !important
}
.deep-purple.lighten-5 {
background-color: #ede7f6 !important
}
.deep-purple-text.text-lighten-5 {
color: #ede7f6 !important
}
.deep-purple.lighten-4 {
background-color: #d1c4e9 !important
}
.deep-purple-text.text-lighten-4 {
color: #d1c4e9 !important
}
.deep-purple.lighten-3 {
background-color: #b39ddb !important
}
.deep-purple-text.text-lighten-3 {
color: #b39ddb !important
}
.deep-purple.lighten-2 {
background-color: #9575cd !important
}
.deep-purple-text.text-lighten-2 {
color: #9575cd !important
}
.deep-purple.lighten-1 {
background-color: #7e57c2 !important
}
.deep-purple-text.text-lighten-1 {
color: #7e57c2 !important
}
.deep-purple.darken-1 {
background-color: #5e35b1 !important
}
.deep-purple-text.text-darken-1 {
color: #5e35b1 !important
}
.deep-purple.darken-2 {
background-color: #512da8 !important
}
.deep-purple-text.text-darken-2 {
color: #512da8 !important
}
.deep-purple.darken-3 {
background-color: #4527a0 !important
}
.deep-purple-text.text-darken-3 {
color: #4527a0 !important
}
.deep-purple.darken-4 {
background-color: #311b92 !important
}
.deep-purple-text.text-darken-4 {
color: #311b92 !important
}
.deep-purple.accent-1 {
background-color: #b388ff !important
}
.deep-purple-text.text-accent-1 {
color: #b388ff !important
}
.deep-purple.accent-2 {
background-color: #7c4dff !important
}
.deep-purple-text.text-accent-2 {
color: #7c4dff !important
}
.deep-purple.accent-3 {
background-color: #651fff !important
}
.deep-purple-text.text-accent-3 {
color: #651fff !important
}
.deep-purple.accent-4 {
background-color: #6200ea !important
}
.deep-purple-text.text-accent-4 {
color: #6200ea !important
}
.indigo {
background-color: #3f51b5 !important
}
.indigo-text {
color: #3f51b5 !important
}
.indigo.lighten-5 {
background-color: #e8eaf6 !important
}
.indigo-text.text-lighten-5 {
color: #e8eaf6 !important
}
.indigo.lighten-4 {
background-color: #c5cae9 !important
}
.indigo-text.text-lighten-4 {
color: #c5cae9 !important
}
.indigo.lighten-3 {
background-color: #9fa8da !important
}
.indigo-text.text-lighten-3 {
color: #9fa8da !important
}
.indigo.lighten-2 {
background-color: #7986cb !important
}
.indigo-text.text-lighten-2 {
color: #7986cb !important
}
.indigo.lighten-1 {
background-color: #5c6bc0 !important
}
.indigo-text.text-lighten-1 {
color: #5c6bc0 !important
}
.indigo.darken-1 {
background-color: #3949ab !important
}
.indigo-text.text-darken-1 {
color: #3949ab !important
}
.indigo.darken-2 {
background-color: #303f9f !important
}
.indigo-text.text-darken-2 {
color: #303f9f !important
}
.indigo.darken-3 {
background-color: #283593 !important
}
.indigo-text.text-darken-3 {
color: #283593 !important
}
.indigo.darken-4 {
background-color: #1a237e !important
}
.indigo-text.text-darken-4 {
color: #1a237e !important
}
.indigo.accent-1 {
background-color: #8c9eff !important
}
.indigo-text.text-accent-1 {
color: #8c9eff !important
}
.indigo.accent-2 {
background-color: #536dfe !important
}
.indigo-text.text-accent-2 {
color: #536dfe !important
}
.indigo.accent-3 {
background-color: #3d5afe !important
}
.indigo-text.text-accent-3 {
color: #3d5afe !important
}
.indigo.accent-4 {
background-color: #304ffe !important
}
.indigo-text.text-accent-4 {
color: #304ffe !important
}
.blue {
background-color: #2196f3 !important
}
.blue-text {
color: #2196f3 !important
}
.blue.lighten-5 {
background-color: #e3f2fd !important
}
.blue-text.text-lighten-5 {
color: #e3f2fd !important
}
.blue.lighten-4 {
background-color: #bbdefb !important
}
.blue-text.text-lighten-4 {
color: #bbdefb !important
}
.blue.lighten-3 {
background-color: #90caf9 !important
}
.blue-text.text-lighten-3 {
color: #90caf9 !important
}
.blue.lighten-2 {
background-color: #64b5f6 !important
}
.blue-text.text-lighten-2 {
color: #64b5f6 !important
}
.blue.lighten-1 {
background-color: #42a5f5 !important
}
.blue-text.text-lighten-1 {
color: #42a5f5 !important
}
.blue.darken-1 {
background-color: #1e88e5 !important
}
.blue-text.text-darken-1 {
color: #1e88e5 !important
}
.blue.darken-2 {
background-color: #1976d2 !important
}
.blue-text.text-darken-2 {
color: #1976d2 !important
}
.blue.darken-3 {
background-color: #1565c0 !important
}
.blue-text.text-darken-3 {
color: #1565c0 !important
}
.blue.darken-4 {
background-color: #0d47a1 !important
}
.blue-text.text-darken-4 {
color: #0d47a1 !important
}
.blue.accent-1 {
background-color: #82b1ff !important
}
.blue-text.text-accent-1 {
color: #82b1ff !important
}
.blue.accent-2 {
background-color: #448aff !important
}
.blue-text.text-accent-2 {
color: #448aff !important
}
.blue.accent-3 {
background-color: #2979ff !important
}
.blue-text.text-accent-3 {
color: #2979ff !important
}
.blue.accent-4 {
background-color: #2962ff !important
}
.blue-text.text-accent-4 {
color: #2962ff !important
}
.light-blue {
background-color: #03a9f4 !important
}
.light-blue-text {
color: #03a9f4 !important
}
.light-blue.lighten-5 {
background-color: #e1f5fe !important
}
.light-blue-text.text-lighten-5 {
color: #e1f5fe !important
}
.light-blue.lighten-4 {
background-color: #b3e5fc !important
}
.light-blue-text.text-lighten-4 {
color: #b3e5fc !important
}
.light-blue.lighten-3 {
background-color: #81d4fa !important
}
.light-blue-text.text-lighten-3 {
color: #81d4fa !important
}
.light-blue.lighten-2 {
background-color: #4fc3f7 !important
}
.light-blue-text.text-lighten-2 {
color: #4fc3f7 !important
}
.light-blue.lighten-1 {
background-color: #29b6f6 !important
}
.light-blue-text.text-lighten-1 {
color: #29b6f6 !important
}
.light-blue.darken-1 {
background-color: #039be5 !important
}
.light-blue-text.text-darken-1 {
color: #039be5 !important
}
.light-blue.darken-2 {
background-color: #0288d1 !important
}
.light-blue-text.text-darken-2 {
color: #0288d1 !important
}
.light-blue.darken-3 {
background-color: #0277bd !important
}
.light-blue-text.text-darken-3 {
color: #0277bd !important
}
.light-blue.darken-4 {
background-color: #01579b !important
}
.light-blue-text.text-darken-4 {
color: #01579b !important
}
.light-blue.accent-1 {
background-color: #80d8ff !important
}
.light-blue-text.text-accent-1 {
color: #80d8ff !important
}
.light-blue.accent-2 {
background-color: #40c4ff !important
}
.light-blue-text.text-accent-2 {
color: #40c4ff !important
}
.light-blue.accent-3 {
background-color: #00b0ff !important
}
.light-blue-text.text-accent-3 {
color: #00b0ff !important
}
.light-blue.accent-4 {
background-color: #0091ea !important
}
.light-blue-text.text-accent-4 {
color: #0091ea !important
}
.cyan {
background-color: #00bcd4 !important
}
.cyan-text {
color: #00bcd4 !important
}
.cyan.lighten-5 {
background-color: #e0f7fa !important
}
.cyan-text.text-lighten-5 {
color: #e0f7fa !important
}
.cyan.lighten-4 {
background-color: #b2ebf2 !important
}
.cyan-text.text-lighten-4 {
color: #b2ebf2 !important
}
.cyan.lighten-3 {
background-color: #80deea !important
}
.cyan-text.text-lighten-3 {
color: #80deea !important
}
.cyan.lighten-2 {
background-color: #4dd0e1 !important
}
.cyan-text.text-lighten-2 {
color: #4dd0e1 !important
}
.cyan.lighten-1 {
background-color: #26c6da !important
}
.cyan-text.text-lighten-1 {
color: #26c6da !important
}
.cyan.darken-1 {
background-color: #00acc1 !important
}
.cyan-text.text-darken-1 {
color: #00acc1 !important
}
.cyan.darken-2 {
background-color: #0097a7 !important
}
.cyan-text.text-darken-2 {
color: #0097a7 !important
}
.cyan.darken-3 {
background-color: #00838f !important
}
.cyan-text.text-darken-3 {
color: #00838f !important
}
.cyan.darken-4 {
background-color: #006064 !important
}
.cyan-text.text-darken-4 {
color: #006064 !important
}
.cyan.accent-1 {
background-color: #84ffff !important
}
.cyan-text.text-accent-1 {
color: #84ffff !important
}
.cyan.accent-2 {
background-color: #18ffff !important
}
.cyan-text.text-accent-2 {
color: #18ffff !important
}
.cyan.accent-3 {
background-color: #00e5ff !important
}
.cyan-text.text-accent-3 {
color: #00e5ff !important
}
.cyan.accent-4 {
background-color: #00b8d4 !important
}
.cyan-text.text-accent-4 {
color: #00b8d4 !important
}
.teal {
background-color: #009688 !important
}
.teal-text {
color: #009688 !important
}
.teal.lighten-5 {
background-color: #e0f2f1 !important
}
.teal-text.text-lighten-5 {
color: #e0f2f1 !important
}
.teal.lighten-4 {
background-color: #b2dfdb !important
}
.teal-text.text-lighten-4 {
color: #b2dfdb !important
}
.teal.lighten-3 {
background-color: #80cbc4 !important
}
.teal-text.text-lighten-3 {
color: #80cbc4 !important
}
.teal.lighten-2 {
background-color: #4db6ac !important
}
.teal-text.text-lighten-2 {
color: #4db6ac !important
}
.teal.lighten-1 {
background-color: #26a69a !important
}
.teal-text.text-lighten-1 {
color: #26a69a !important
}
.teal.darken-1 {
background-color: #00897b !important
}
.teal-text.text-darken-1 {
color: #00897b !important
}
.teal.darken-2 {
background-color: #00796b !important
}
.teal-text.text-darken-2 {
color: #00796b !important
}
.teal.darken-3 {
background-color: #00695c !important
}
.teal-text.text-darken-3 {
color: #00695c !important
}
.teal.darken-4 {
background-color: #004d40 !important
}
.teal-text.text-darken-4 {
color: #004d40 !important
}
.teal.accent-1 {
background-color: #a7ffeb !important
}
.teal-text.text-accent-1 {
color: #a7ffeb !important
}
.teal.accent-2 {
background-color: #64ffda !important
}
.teal-text.text-accent-2 {
color: #64ffda !important
}
.teal.accent-3 {
background-color: #1de9b6 !important
}
.teal-text.text-accent-3 {
color: #1de9b6 !important
}
.teal.accent-4 {
background-color: #00bfa5 !important
}
.teal-text.text-accent-4 {
color: #00bfa5 !important
}
.green {
background-color: #4caf50 !important
}
.green-text {
color: #4caf50 !important
}
.green.lighten-5 {
background-color: #e8f5e9 !important
}
.green-text.text-lighten-5 {
color: #e8f5e9 !important
}
.green.lighten-4 {
background-color: #c8e6c9 !important
}
.green-text.text-lighten-4 {
color: #c8e6c9 !important
}
.green.lighten-3 {
background-color: #a5d6a7 !important
}
.green-text.text-lighten-3 {
color: #a5d6a7 !important
}
.green.lighten-2 {
background-color: #81c784 !important
}
.green-text.text-lighten-2 {
color: #81c784 !important
}
.green.lighten-1 {
background-color: #66bb6a !important
}
.green-text.text-lighten-1 {
color: #66bb6a !important
}
.green.darken-1 {
background-color: #43a047 !important
}
.green-text.text-darken-1 {
color: #43a047 !important
}
.green.darken-2 {
background-color: #388e3c !important
}
.green-text.text-darken-2 {
color: #388e3c !important
}
.green.darken-3 {
background-color: #2e7d32 !important
}
.green-text.text-darken-3 {
color: #2e7d32 !important
}
.green.darken-4 {
background-color: #1b5e20 !important
}
.green-text.text-darken-4 {
color: #1b5e20 !important
}
.green.accent-1 {
background-color: #b9f6ca !important
}
.green-text.text-accent-1 {
color: #b9f6ca !important
}
.green.accent-2 {
background-color: #69f0ae !important
}
.green-text.text-accent-2 {
color: #69f0ae !important
}
.green.accent-3 {
background-color: #00e676 !important
}
.green-text.text-accent-3 {
color: #00e676 !important
}
.green.accent-4 {
background-color: #00c853 !important
}
.green-text.text-accent-4 {
color: #00c853 !important
}
.light-green {
background-color: #8bc34a !important
}
.light-green-text {
color: #8bc34a !important
}
.light-green.lighten-5 {
background-color: #f1f8e9 !important
}
.light-green-text.text-lighten-5 {
color: #f1f8e9 !important
}
.light-green.lighten-4 {
background-color: #dcedc8 !important
}
.light-green-text.text-lighten-4 {
color: #dcedc8 !important
}
.light-green.lighten-3 {
background-color: #c5e1a5 !important
}
.light-green-text.text-lighten-3 {
color: #c5e1a5 !important
}
.light-green.lighten-2 {
background-color: #aed581 !important
}
.light-green-text.text-lighten-2 {
color: #aed581 !important
}
.light-green.lighten-1 {
background-color: #9ccc65 !important
}
.light-green-text.text-lighten-1 {
color: #9ccc65 !important
}
.light-green.darken-1 {
background-color: #7cb342 !important
}
.light-green-text.text-darken-1 {
color: #7cb342 !important
}
.light-green.darken-2 {
background-color: #689f38 !important
}
.light-green-text.text-darken-2 {
color: #689f38 !important
}
.light-green.darken-3 {
background-color: #558b2f !important
}
.light-green-text.text-darken-3 {
color: #558b2f !important
}
.light-green.darken-4 {
background-color: #33691e !important
}
.light-green-text.text-darken-4 {
color: #33691e !important
}
.light-green.accent-1 {
background-color: #ccff90 !important
}
.light-green-text.text-accent-1 {
color: #ccff90 !important
}
.light-green.accent-2 {
background-color: #b2ff59 !important
}
.light-green-text.text-accent-2 {
color: #b2ff59 !important
}
.light-green.accent-3 {
background-color: #76ff03 !important
}
.light-green-text.text-accent-3 {
color: #76ff03 !important
}
.light-green.accent-4 {
background-color: #64dd17 !important
}
.light-green-text.text-accent-4 {
color: #64dd17 !important
}
.lime {
background-color: #cddc39 !important
}
.lime-text {
color: #cddc39 !important
}
.lime.lighten-5 {
background-color: #f9fbe7 !important
}
.lime-text.text-lighten-5 {
color: #f9fbe7 !important
}
.lime.lighten-4 {
background-color: #f0f4c3 !important
}
.lime-text.text-lighten-4 {
color: #f0f4c3 !important
}
.lime.lighten-3 {
background-color: #e6ee9c !important
}
.lime-text.text-lighten-3 {
color: #e6ee9c !important
}
.lime.lighten-2 {
background-color: #dce775 !important
}
.lime-text.text-lighten-2 {
color: #dce775 !important
}
.lime.lighten-1 {
background-color: #d4e157 !important
}
.lime-text.text-lighten-1 {
color: #d4e157 !important
}
.lime.darken-1 {
background-color: #c0ca33 !important
}
.lime-text.text-darken-1 {
color: #c0ca33 !important
}
.lime.darken-2 {
background-color: #afb42b !important
}
.lime-text.text-darken-2 {
color: #afb42b !important
}
.lime.darken-3 {
background-color: #9e9d24 !important
}
.lime-text.text-darken-3 {
color: #9e9d24 !important
}
.lime.darken-4 {
background-color: #827717 !important
}
.lime-text.text-darken-4 {
color: #827717 !important
}
.lime.accent-1 {
background-color: #f4ff81 !important
}
.lime-text.text-accent-1 {
color: #f4ff81 !important
}
.lime.accent-2 {
background-color: #eeff41 !important
}
.lime-text.text-accent-2 {
color: #eeff41 !important
}
.lime.accent-3 {
background-color: #c6ff00 !important
}
.lime-text.text-accent-3 {
color: #c6ff00 !important
}
.lime.accent-4 {
background-color: #aeea00 !important
}
.lime-text.text-accent-4 {
color: #aeea00 !important
}
.yellow {
background-color: #ffeb3b !important
}
.yellow-text {
color: #ffeb3b !important
}
.yellow.lighten-5 {
background-color: #fffde7 !important
}
.yellow-text.text-lighten-5 {
color: #fffde7 !important
}
.yellow.lighten-4 {
background-color: #fff9c4 !important
}
.yellow-text.text-lighten-4 {
color: #fff9c4 !important
}
.yellow.lighten-3 {
background-color: #fff59d !important
}
.yellow-text.text-lighten-3 {
color: #fff59d !important
}
.yellow.lighten-2 {
background-color: #fff176 !important
}
.yellow-text.text-lighten-2 {
color: #fff176 !important
}
.yellow.lighten-1 {
background-color: #ffee58 !important
}
.yellow-text.text-lighten-1 {
color: #ffee58 !important
}
.yellow.darken-1 {
background-color: #fdd835 !important
}
.yellow-text.text-darken-1 {
color: #fdd835 !important
}
.yellow.darken-2 {
background-color: #fbc02d !important
}
.yellow-text.text-darken-2 {
color: #fbc02d !important
}
.yellow.darken-3 {
background-color: #f9a825 !important
}
.yellow-text.text-darken-3 {
color: #f9a825 !important
}
.yellow.darken-4 {
background-color: #f57f17 !important
}
.yellow-text.text-darken-4 {
color: #f57f17 !important
}
.yellow.accent-1 {
background-color: #ffff8d !important
}
.yellow-text.text-accent-1 {
color: #ffff8d !important
}
.yellow.accent-2 {
background-color: #ff0 !important
}
.yellow-text.text-accent-2 {
color: #ff0 !important
}
.yellow.accent-3 {
background-color: #ffea00 !important
}
.yellow-text.text-accent-3 {
color: #ffea00 !important
}
.yellow.accent-4 {
background-color: #ffd600 !important
}
.yellow-text.text-accent-4 {
color: #ffd600 !important
}
.amber {
background-color: #ffc107 !important
}
.amber-text {
color: #ffc107 !important
}
.amber.lighten-5 {
background-color: #fff8e1 !important
}
.amber-text.text-lighten-5 {
color: #fff8e1 !important
}
.amber.lighten-4 {
background-color: #ffecb3 !important
}
.amber-text.text-lighten-4 {
color: #ffecb3 !important
}
.amber.lighten-3 {
background-color: #ffe082 !important
}
.amber-text.text-lighten-3 {
color: #ffe082 !important
}
.amber.lighten-2 {
background-color: #ffd54f !important
}
.amber-text.text-lighten-2 {
color: #ffd54f !important
}
.amber.lighten-1 {
background-color: #ffca28 !important
}
.amber-text.text-lighten-1 {
color: #ffca28 !important
}
.amber.darken-1 {
background-color: #ffb300 !important
}
.amber-text.text-darken-1 {
color: #ffb300 !important
}
.amber.darken-2 {
background-color: #ffa000 !important
}
.amber-text.text-darken-2 {
color: #ffa000 !important
}
.amber.darken-3 {
background-color: #ff8f00 !important
}
.amber-text.text-darken-3 {
color: #ff8f00 !important
}
.amber.darken-4 {
background-color: #ff6f00 !important
}
.amber-text.text-darken-4 {
color: #ff6f00 !important
}
.amber.accent-1 {
background-color: #ffe57f !important
}
.amber-text.text-accent-1 {
color: #ffe57f !important
}
.amber.accent-2 {
background-color: #ffd740 !important
}
.amber-text.text-accent-2 {
color: #ffd740 !important
}
.amber.accent-3 {
background-color: #ffc400 !important
}
.amber-text.text-accent-3 {
color: #ffc400 !important
}
.amber.accent-4 {
background-color: #ffab00 !important
}
.amber-text.text-accent-4 {
color: #ffab00 !important
}
.orange {
background-color: #ff9800 !important
}
.orange-text {
color: #ff9800 !important
}
.orange.lighten-5 {
background-color: #fff3e0 !important
}
.orange-text.text-lighten-5 {
color: #fff3e0 !important
}
.orange.lighten-4 {
background-color: #ffe0b2 !important
}
.orange-text.text-lighten-4 {
color: #ffe0b2 !important
}
.orange.lighten-3 {
background-color: #ffcc80 !important
}
.orange-text.text-lighten-3 {
color: #ffcc80 !important
}
.orange.lighten-2 {
background-color: #ffb74d !important
}
.orange-text.text-lighten-2 {
color: #ffb74d !important
}
.orange.lighten-1 {
background-color: #ffa726 !important
}
.orange-text.text-lighten-1 {
color: #ffa726 !important
}
.orange.darken-1 {
background-color: #fb8c00 !important
}
.orange-text.text-darken-1 {
color: #fb8c00 !important
}
.orange.darken-2 {
background-color: #f57c00 !important
}
.orange-text.text-darken-2 {
color: #f57c00 !important
}
.orange.darken-3 {
background-color: #ef6c00 !important
}
.orange-text.text-darken-3 {
color: #ef6c00 !important
}
.orange.darken-4 {
background-color: #e65100 !important
}
.orange-text.text-darken-4 {
color: #e65100 !important
}
.orange.accent-1 {
background-color: #ffd180 !important
}
.orange-text.text-accent-1 {
color: #ffd180 !important
}
.orange.accent-2 {
background-color: #ffab40 !important
}
.orange-text.text-accent-2 {
color: #ffab40 !important
}
.orange.accent-3 {
background-color: #ff9100 !important
}
.orange-text.text-accent-3 {
color: #ff9100 !important
}
.orange.accent-4 {
background-color: #ff6d00 !important
}
.orange-text.text-accent-4 {
color: #ff6d00 !important
}
.deep-orange {
background-color: #ff5722 !important
}
.deep-orange-text {
color: #ff5722 !important
}
.deep-orange.lighten-5 {
background-color: #fbe9e7 !important
}
.deep-orange-text.text-lighten-5 {
color: #fbe9e7 !important
}
.deep-orange.lighten-4 {
background-color: #ffccbc !important
}
.deep-orange-text.text-lighten-4 {
color: #ffccbc !important
}
.deep-orange.lighten-3 {
background-color: #ffab91 !important
}
.deep-orange-text.text-lighten-3 {
color: #ffab91 !important
}
.deep-orange.lighten-2 {
background-color: #ff8a65 !important
}
.deep-orange-text.text-lighten-2 {
color: #ff8a65 !important
}
.deep-orange.lighten-1 {
background-color: #ff7043 !important
}
.deep-orange-text.text-lighten-1 {
color: #ff7043 !important
}
.deep-orange.darken-1 {
background-color: #f4511e !important
}
.deep-orange-text.text-darken-1 {
color: #f4511e !important
}
.deep-orange.darken-2 {
background-color: #e64a19 !important
}
.deep-orange-text.text-darken-2 {
color: #e64a19 !important
}
.deep-orange.darken-3 {
background-color: #d84315 !important
}
.deep-orange-text.text-darken-3 {
color: #d84315 !important
}
.deep-orange.darken-4 {
background-color: #bf360c !important
}
.deep-orange-text.text-darken-4 {
color: #bf360c !important
}
.deep-orange.accent-1 {
background-color: #ff9e80 !important
}
.deep-orange-text.text-accent-1 {
color: #ff9e80 !important
}
.deep-orange.accent-2 {
background-color: #ff6e40 !important
}
.deep-orange-text.text-accent-2 {
color: #ff6e40 !important
}
.deep-orange.accent-3 {
background-color: #ff3d00 !important
}
.deep-orange-text.text-accent-3 {
color: #ff3d00 !important
}
.deep-orange.accent-4 {
background-color: #dd2c00 !important
}
.deep-orange-text.text-accent-4 {
color: #dd2c00 !important
}
.brown {
background-color: #795548 !important
}
.brown-text {
color: #795548 !important
}
.brown.lighten-5 {
background-color: #efebe9 !important
}
.brown-text.text-lighten-5 {
color: #efebe9 !important
}
.brown.lighten-4 {
background-color: #d7ccc8 !important
}
.brown-text.text-lighten-4 {
color: #d7ccc8 !important
}
.brown.lighten-3 {
background-color: #bcaaa4 !important
}
.brown-text.text-lighten-3 {
color: #bcaaa4 !important
}
.brown.lighten-2 {
background-color: #a1887f !important
}
.brown-text.text-lighten-2 {
color: #a1887f !important
}
.brown.lighten-1 {
background-color: #8d6e63 !important
}
.brown-text.text-lighten-1 {
color: #8d6e63 !important
}
.brown.darken-1 {
background-color: #6d4c41 !important
}
.brown-text.text-darken-1 {
color: #6d4c41 !important
}
.brown.darken-2 {
background-color: #5d4037 !important
}
.brown-text.text-darken-2 {
color: #5d4037 !important
}
.brown.darken-3 {
background-color: #4e342e !important
}
.brown-text.text-darken-3 {
color: #4e342e !important
}
.brown.darken-4 {
background-color: #3e2723 !important
}
.brown-text.text-darken-4 {
color: #3e2723 !important
}
.blue-grey {
background-color: #607d8b !important
}
.blue-grey-text {
color: #607d8b !important
}
.blue-grey.lighten-5 {
background-color: #eceff1 !important
}
.blue-grey-text.text-lighten-5 {
color: #eceff1 !important
}
.blue-grey.lighten-4 {
background-color: #cfd8dc !important
}
.blue-grey-text.text-lighten-4 {
color: #cfd8dc !important
}
.blue-grey.lighten-3 {
background-color: #b0bec5 !important
}
.blue-grey-text.text-lighten-3 {
color: #b0bec5 !important
}
.blue-grey.lighten-2 {
background-color: #90a4ae !important
}
.blue-grey-text.text-lighten-2 {
color: #90a4ae !important
}
.blue-grey.lighten-1 {
background-color: #78909c !important
}
.blue-grey-text.text-lighten-1 {
color: #78909c !important
}
.blue-grey.darken-1 {
background-color: #546e7a !important
}
.blue-grey-text.text-darken-1 {
color: #546e7a !important
}
.blue-grey.darken-2 {
background-color: #455a64 !important
}
.blue-grey-text.text-darken-2 {
color: #455a64 !important
}
.blue-grey.darken-3 {
background-color: #37474f !important
}
.blue-grey-text.text-darken-3 {
color: #37474f !important
}
.blue-grey.darken-4 {
background-color: #263238 !important
}
.blue-grey-text.text-darken-4 {
color: #263238 !important
}
.grey {
background-color: #9e9e9e !important
}
.grey-text {
color: #9e9e9e !important
}
.grey.lighten-5 {
background-color: #fafafa !important
}
.grey-text.text-lighten-5 {
color: #fafafa !important
}
.grey.lighten-4 {
background-color: #f5f5f5 !important
}
.grey-text.text-lighten-4 {
color: #f5f5f5 !important
}
.grey.lighten-3 {
background-color: #eee !important
}
.grey-text.text-lighten-3 {
color: #eee !important
}
.grey.lighten-2 {
background-color: #e0e0e0 !important
}
.grey-text.text-lighten-2 {
color: #e0e0e0 !important
}
.grey.lighten-1 {
background-color: #bdbdbd !important
}
.grey-text.text-lighten-1 {
color: #bdbdbd !important
}
.grey.darken-1 {
background-color: #757575 !important
}
.grey-text.text-darken-1 {
color: #757575 !important
}
.grey.darken-2 {
background-color: #616161 !important
}
.grey-text.text-darken-2 {
color: #616161 !important
}
.grey.darken-3 {
background-color: #424242 !important
}
.grey-text.text-darken-3 {
color: #424242 !important
}
.grey.darken-4 {
background-color: #212121 !important
}
.grey-text.text-darken-4 {
color: #212121 !important
}
.shades.black {
background-color: #000 !important
}
.shades-text.text-black {
color: #000 !important
}
.shades.white {
background-color: #fff !important
}
.shades-text.text-white {
color: #fff !important
}
.shades.transparent {
background-color: transparent !important
}
.shades-text.text-transparent {
color: transparent !important
}
.black {
background-color: #000 !important
}
.black-text {
color: #000 !important
}
.white {
background-color: #fff !important
}
.white-text {
color: #fff !important
}
.transparent {
background-color: transparent !important
}
.transparent-text {
color: transparent !important
}
html {
box-sizing: border-box
}
*, :after, :before {
box-sizing: inherit
}
ul {
list-style-type: none
}
ul.browser-default {
list-style-type: disc
}
a {
-webkit-tap-highlight-color: transparent;
color: #6f87a6;
text-decoration: none
}
.valign-wrapper {
align-items: center;
display: flex
}
.valign-wrapper .valign {
display: block
}
ul {
padding: 0
}
ul li {
list-style-type: none
}
.clearfix {
clear: both
}
.z-depth-0 {
box-shadow: none !important
}
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)
}
.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
}
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)
}
.modal, .z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21)
}
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0,0,0,.2),0 40px 77px 0 rgba(0,0,0,.22)
}
.hoverable {
box-shadow: 0;
transition: box-shadow .25s
}
.hoverable:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
transition: box-shadow .25s
}
.divider {
background-color: #e0e0e0;
height: 1px;
overflow: hidden
}
blockquote {
border-left: 5px solid #713738;
margin: 20px 0;
padding-left: 1.5rem
}
i {
line-height: inherit
}
i.left {
float: left;
margin-right: 15px
}
i.right {
float: right;
margin-left: 15px
}
i.tiny {
font-size: 1rem
}
i.small {
font-size: 2rem
}
i.medium {
font-size: 4rem
}
i.large {
font-size: 6rem
}
img.responsive-img, video.responsive-video {
height: auto;
max-width: 100%
}
.pagination li {
border-radius: 2px;
display: inline-block;
font-size: 1.2rem;
line-height: 30px;
padding: 0 10px;
text-align: center
}
.pagination li a {
color: #444
}
.pagination li.active a {
color: #fff
}
.pagination li.active {
background-color: #713738
}
.pagination li.disabled a {
color: #999;
cursor: default
}
.pagination li i {
font-size: 2.2rem;
vertical-align: middle
}
.pagination li.pages ul li {
display: inline-block;
float: none
}
@media only screen and (max-width:992px) {
.pagination {
width: 100%
}
.pagination li.next, .pagination li.prev {
width: 10%
}
.pagination li.pages {
overflow: hidden;
white-space: nowrap;
width: 80%
}
}
.breadcrumb {
color: rgba(255,255,255,.7);
font-size: 18px
}
.breadcrumb [class*=mdi-], .breadcrumb [class^=mdi-], .breadcrumb i, .breadcrumb i.material-icons {
display: inline-block;
float: left;
font-size: 24px
}
.breadcrumb:before {
-webkit-font-smoothing: antialiased;
color: rgba(255,255,255,.7);
content: "";
display: inline-block;
font-family: Material Icons;
font-size: 25px;
font-style: normal;
font-weight: 400;
margin: 0 10px 0 8px;
vertical-align: top
}
.breadcrumb:first-child:before {
display: none
}
.breadcrumb:last-child {
color: #fff
}
.parallax-container {
height: 500px;
overflow: hidden;
position: relative
}
.parallax {
left: 0;
right: 0;
top: 0;
z-index: -1
}
.parallax, .parallax img {
bottom: 0;
position: absolute
}
.parallax img {
display: none;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translateZ(0);
transform: translateX(-50%)
}
.pin-bottom, .pin-top {
position: relative
}
.pinned {
position: fixed !important
}
.fade-in, ul.staggered-list li {
opacity: 0
}
.fade-in {
transform-origin: 0 50%
}
@media only screen and (max-width:600px) {
.hide-on-small-and-down, .hide-on-small-only {
display: none !important
}
}
@media only screen and (max-width:992px) {
.hide-on-med-and-down {
display: none !important
}
}
@media only screen and (min-width:601px) {
.hide-on-med-and-up {
display: none !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.hide-on-med-only {
display: none !important
}
}
@media only screen and (min-width:993px) {
.hide-on-large-only {
display: none !important
}
.show-on-large {
display: block !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.show-on-medium {
display: block !important
}
}
@media only screen and (max-width:600px) {
.show-on-small {
display: block !important
}
}
@media only screen and (min-width:601px) {
.show-on-medium-and-up {
display: block !important
}
}
@media only screen and (max-width:992px) {
.show-on-medium-and-down {
display: block !important
}
}
@media only screen and (max-width:600px) {
.center-on-small-only {
text-align: center
}
}
footer.page-footer {
background-color: #713738;
margin-top: 20px;
padding-top: 20px
}
footer.page-footer .footer-copyright {
background-color: rgba(51,51,51,.08);
color: rgba(255,255,255,.8);
height: 50px;
line-height: 50px;
overflow: hidden
}
table:not([class^=month-picker]) {
border: none;
display: table;
width: 100%
}
table:not([class^=month-picker]).bordered > tbody > tr, table:not([class^=month-picker]).bordered > thead > tr {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]).striped > tbody > tr:nth-child(odd) {
background-color: #f2f2f2
}
table:not([class^=month-picker]).striped > tbody > tr > td {
border-radius: 0
}
table:not([class^=month-picker]).highlight > tbody > tr {
transition: background-color .25s ease
}
table:not([class^=month-picker]).highlight > tbody > tr:hover {
background-color: #f2f2f2
}
table:not([class^=month-picker]).centered tbody tr td, table:not([class^=month-picker]).centered thead tr th {
text-align: center
}
thead {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]) td, table:not([class^=month-picker]) th {
border: none;
border-radius: 2px;
display: table-cell;
padding: 15px 5px;
text-align: left;
vertical-align: middle
}
@media only screen and (max-width:992px) {
table.responsive-table {
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
width: 100%
}
table.responsive-table td:empty:before {
content: "Â "
}
table.responsive-table td, table.responsive-table th {
margin: 0;
vertical-align: top
}
table.responsive-table th {
text-align: left
}
table.responsive-table thead {
display: block;
float: left
}
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0
}
table.responsive-table thead tr th:before {
content: "Â "
}
table.responsive-table tbody {
display: block;
overflow-x: auto;
position: relative;
white-space: nowrap;
width: auto
}
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top
}
table.responsive-table th {
display: block;
text-align: right
}
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left
}
table.responsive-table tr {
padding: 0 10px
}
table.responsive-table thead {
border: 0;
border-right: 1px solid #ddd
}
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0
}
table.responsive-table.bordered td {
border-bottom: 0;
border-left: 0;
border-right: 0
}
table.responsive-table.bordered tr {
border: 0
}
table.responsive-table.bordered tbody tr {
border-right: 1px solid #ddd
}
}
.collection {
border: 1px solid #e0e0e0;
border-radius: 2px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative
}
.collection .collection-item {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
line-height: 1.5rem;
margin: 0;
padding: 10px 20px
}
.collection .collection-item.avatar {
min-height: 84px;
padding-left: 72px;
position: relative
}
.collection .collection-item.avatar .circle {
display: inline-block;
height: 42px;
left: 15px;
overflow: hidden;
position: absolute;
vertical-align: middle;
width: 42px
}
.collection .collection-item.avatar i.circle {
background-color: #999;
color: #fff;
font-size: 18px;
line-height: 42px;
text-align: center
}
.collection .collection-item.avatar .title {
font-size: 16px
}
.collection .collection-item.avatar p {
margin: 0
}
.collection .collection-item.avatar .secondary-content {
position: absolute;
right: 16px;
top: 16px
}
.collection .collection-item:last-child {
border-bottom: none
}
.collection .collection-item.active {
background-color: #6f87a6;
color: #fff
}
.collection .collection-item.active .secondary-content {
color: #fff
}
.collection a.collection-item {
color: #6f87a6;
display: block;
transition: .25s
}
.collection a.collection-item:not(.active):hover {
background-color: #ddd
}
.collection.with-header .collection-header {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 10px 20px
}
.collection.with-header .collection-item {
padding-left: 30px
}
.collection.with-header .collection-item.avatar {
padding-left: 72px
}
.secondary-content {
color: #6f87a6;
float: right
}
.collapsible .collection {
border: none;
margin: 0
}
span.badge {
box-sizing: border-box;
color: #757575;
font-size: 1rem;
line-height: inherit;
min-width: 3rem;
padding: 0 6px;
position: absolute;
right: 15px;
text-align: center
}
span.badge.new {
background-color: #6f87a6;
border-radius: 2px;
color: #fff;
font-size: .8rem;
font-weight: 300
}
span.badge.new:after {
content: " new"
}
nav ul a span.badge {
line-height: 0;
margin-left: 4px;
position: static
}
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative
}
.video-container embed, .video-container iframe, .video-container object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.progress {
background-color: #fff;
border-radius: 2px;
display: block;
height: 4px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative;
width: 100%
}
.progress .determinate {
background-color: #fff;
bottom: 0;
left: 0;
position: absolute;
top: 0;
transition: width .3s linear
}
.progress .indeterminate {
background-color: #fff
}
.progress .indeterminate:before {
-webkit-animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
}
.progress .indeterminate:after, .progress .indeterminate:before {
background-color: inherit;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
will-change: left,right
}
.progress .indeterminate:after {
-webkit-animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
.hide {
display: none !important
}
.left-align {
text-align: left
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center
}
.left {
float: left !important
}
.right {
float: right !important
}
.no-select, input[type=range], input[type=range] + .thumb {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.circle {
border-radius: 50%
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.no-padding {
padding: 0 !important
}
em {
font-style: italic
}
strong {
font-weight: 500
}
small {
font-size: 75%
}
.light, footer.page-footer .footer-copyright {
font-weight: 300
}
.thin, nav[with-subtitle] > a span.label {
font-weight: 200
}
.flow-text {
font-weight: 300
}
@media only screen and (min-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
@media only screen and (min-width:390px) {
.flow-text {
font-size: 1.224rem
}
}
@media only screen and (min-width:420px) {
.flow-text {
font-size: 1.248rem
}
}
@media only screen and (min-width:450px) {
.flow-text {
font-size: 1.272rem
}
}
@media only screen and (min-width:480px) {
.flow-text {
font-size: 1.296rem
}
}
@media only screen and (min-width:510px) {
.flow-text {
font-size: 1.32rem
}
}
@media only screen and (min-width:540px) {
.flow-text {
font-size: 1.344rem
}
}
@media only screen and (min-width:570px) {
.flow-text {
font-size: 1.368rem
}
}
@media only screen and (min-width:600px) {
.flow-text {
font-size: 1.392rem
}
}
@media only screen and (min-width:630px) {
.flow-text {
font-size: 1.416rem
}
}
@media only screen and (min-width:660px) {
.flow-text {
font-size: 1.44rem
}
}
@media only screen and (min-width:690px) {
.flow-text {
font-size: 1.464rem
}
}
@media only screen and (min-width:720px) {
.flow-text {
font-size: 1.488rem
}
}
@media only screen and (min-width:750px) {
.flow-text {
font-size: 1.512rem
}
}
@media only screen and (min-width:780px) {
.flow-text {
font-size: 1.536rem
}
}
@media only screen and (min-width:810px) {
.flow-text {
font-size: 1.56rem
}
}
@media only screen and (min-width:840px) {
.flow-text {
font-size: 1.584rem
}
}
@media only screen and (min-width:870px) {
.flow-text {
font-size: 1.608rem
}
}
@media only screen and (min-width:900px) {
.flow-text {
font-size: 1.632rem
}
}
@media only screen and (min-width:930px) {
.flow-text {
font-size: 1.656rem
}
}
@media only screen and (min-width:960px) {
.flow-text {
font-size: 1.68rem
}
}
@media only screen and (max-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
.modal {
background-color: #fafafa;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
overflow-y: auto;
padding: 0;
position: fixed;
right: 0;
width: 55%;
will-change: top,opacity
}
@media only screen and (max-width:992px) {
.modal {
width: 80%
}
}
.modal comp-press comp-container.none:not(.loading):after, .modal h1, .modal h2, .modal h3, .modal h4, comp-press .modal comp-container.none:not(.loading):after {
margin-top: 0
}
.modal .modal-content {
padding: 24px
}
.modal .modal-close {
cursor: pointer
}
.modal .modal-footer {
background-color: #fafafa;
border-radius: 0 0 2px 2px;
height: 56px;
padding: 4px 6px;
width: 100%
}
.modal .modal-footer .btn, .modal .modal-footer .btn-flat {
float: right;
margin: 6px 0
}
.lean-overlay {
background: #000;
bottom: 0;
display: none;
height: 125%;
left: 0;
position: fixed;
right: 0;
top: -100px;
width: 100%;
will-change: opacity;
z-index: 999
}
.modal.modal-fixed-footer {
height: 70%;
padding: 0
}
.modal.modal-fixed-footer .modal-content {
height: calc(100% - 56px);
max-height: 100%;
overflow-y: auto;
position: absolute;
width: 100%
}
.modal.modal-fixed-footer .modal-footer {
border-top: 1px solid rgba(0,0,0,.1);
bottom: 0;
position: absolute
}
.modal.bottom-sheet {
border-radius: 0;
bottom: -100%;
margin: 0;
max-height: 45%;
top: auto;
width: 100%;
will-change: bottom,opacity
}
select:focus {
outline: 1px solid #fff
}
button:focus {
background-color: #7c92ae;
outline: none
}
label {
color: #979797;
font-size: 9px
}
::-webkit-input-placeholder {
color: #979797
}
:-moz-placeholder, ::-moz-placeholder {
color: #979797
}
:-ms-input-placeholder {
color: #979797
}
input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
border-radius: 0;
box-shadow: none;
box-sizing: content-box;
font-size: 22px;
height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
transition: all .3s;
width: 100%
}
input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=date]:disabled, input[type=date][readonly=readonly], input[type=datetime-local]:disabled, input[type=datetime-local][readonly=readonly], input[type=datetime]:disabled, input[type=datetime][readonly=readonly], input[type=email]:disabled, input[type=email][readonly=readonly], input[type=number]:disabled, input[type=number][readonly=readonly], input[type=password]:disabled, input[type=password][readonly=readonly], input[type=search]:disabled, input[type=search][readonly=readonly], input[type=tel]:disabled, input[type=tel][readonly=readonly], input[type=text]:disabled, input[type=text][readonly=readonly], input[type=time]:disabled, input[type=time][readonly=readonly], input[type=url]:disabled, input[type=url][readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] {
border-bottom: 1px dotted rgba(0,0,0,.26);
color: rgba(0,0,0,.26)
}
input:not([type]):disabled + label, input:not([type])[readonly=readonly] + label, input[type=date]:disabled + label, input[type=date][readonly=readonly] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly=readonly] + label, input[type=datetime]:disabled + label, input[type=datetime][readonly=readonly] + label, input[type=email]:disabled + label, input[type=email][readonly=readonly] + label, input[type=number]:disabled + label, input[type=number][readonly=readonly] + label, input[type=password]:disabled + label, input[type=password][readonly=readonly] + label, input[type=search]:disabled + label, input[type=search][readonly=readonly] + label, input[type=tel]:disabled + label, input[type=tel][readonly=readonly] + label, input[type=text]:disabled + label, input[type=text][readonly=readonly] + label, input[type=time]:disabled + label, input[type=time][readonly=readonly] + label, input[type=url]:disabled + label, input[type=url][readonly=readonly] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly=readonly] + label {
color: rgba(0,0,0,.26)
}
input:not([type]):focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]):focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=datetime]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
color: #6f87a6
}
input:not([type]).valid, input:not([type]):focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=datetime].valid, input[type=datetime]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=text].valid, input[type=text]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]).valid + label:after, input:not([type]):focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=datetime].valid + label:after, input[type=datetime]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after {
color: #6f87a6;
content: attr(data-success);
opacity: 1
}
input:not([type]).invalid, select.invalid, [dealer-selector].invalid, div#selDealer.invalid, input:not([type]):focus.invalid, select.validate.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=datetime].invalid, input[type=datetime]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=text].invalid, input[type=text]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
border-bottom: 1px solid #f44336;
box-shadow: 0 1px 0 0 #f44336
}
input:not([type]).invalid + label:after, input:not([type]):focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=datetime].invalid + label:after, input[type=datetime]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after {
color: #f44336;
content: attr(data-error);
opacity: 1
}
input:not([type]).validate + label, input[type=date].validate + label, input[type=datetime-local].validate + label, input[type=datetime].validate + label, input[type=email].validate + label, input[type=number].validate + label, input[type=password].validate + label, input[type=search].validate + label, input[type=tel].validate + label, input[type=text].validate + label, input[type=time].validate + label, input[type=url].validate + label, textarea.materialize-textarea.validate + label {
pointer-events: none;
width: 100%
}
input:not([type]) + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=datetime] + label:after, input[type=email] + label:after, input[type=number] + label:after, input[type=password] + label:after, input[type=search] + label:after, input[type=tel] + label:after, input[type=text] + label:after, input[type=time] + label:after, input[type=url] + label:after, textarea.materialize-textarea + label:after {
content: "";
display: block;
opacity: 0;
position: absolute;
top: 65px;
transition: opacity .2s ease-out,color .2s ease-out
}
.input-field {
margin-top: 1rem;
position: relative
}
.input-field label {
color: #979797;
cursor: text;
font-size: 1rem;
left: .75rem;
position: absolute;
top: .8rem;
transition: .2s ease-out
}
.input-field label.active {
font-size: 9px;
transform: translateY(-140%)
}
.input-field .prefix {
font-size: 2rem;
position: absolute;
transition: color .2s;
width: 44px
}
.input-field .prefix.active {
color: #6f87a6
}
.input-field .prefix ~ input, .input-field .prefix ~ textarea {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.input-field .prefix ~ textarea {
padding-top: .8rem
}
.input-field .prefix ~ label {
margin-left: 3rem
}
@media only screen and (max-width:992px) {
.input-field .prefix ~ input {
width: 86%;
width: calc(100% - 3rem)
}
}
@media only screen and (max-width:600px) {
.input-field .prefix ~ input {
width: 80%;
width: calc(100% - 3rem)
}
}
.input-field input[type=search] {
display: block;
line-height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem)
}
.input-field input[type=search]:focus {
background-color: #fff;
border: 0;
box-shadow: none;
color: #444
}
.input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .material-icons, .input-field input[type=search]:focus ~ .mdi-navigation-close {
color: #444
}
.input-field input[type=search] + label {
left: 1rem
}
.input-field input[type=search] ~ .material-icons, .input-field input[type=search] ~ .mdi-navigation-close {
color: transparent;
cursor: pointer;
font-size: 2rem;
position: absolute;
right: 1rem;
top: 0;
transition: color .3s
}
textarea {
background-color: transparent;
height: 44px;
width: 100%
}
textarea.materialize-textarea {
min-height: 44px;
overflow-y: hidden;
padding: 1.6rem 0;
resize: none
}
.hiddendiv {
word-wrap: break-word;
display: none;
padding-top: 1.2rem;
white-space: pre-wrap
}
[type=radio]:checked, [type=radio]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=radio]:checked + label, [type=radio]:not(:checked) + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
transition: .28s ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
[type=radio] + label:after, [type=radio] + label:before {
content: "";
height: 16px;
left: 0;
margin: 4px;
position: absolute;
top: 0;
transition: .28s ease;
width: 16px;
z-index: 0
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after, [type=radio]:checked + label:before, [type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border-radius: 50%
}
[type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border: 2px solid #5a5a5a
}
[type=radio]:not(:checked) + label:after {
transform: scale(0);
z-index: -1
}
[type=radio]:checked + label:before {
border: 2px solid transparent
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after {
border: 2px solid #6f87a6
}
[type=radio].with-gap:checked + label:after, [type=radio]:checked + label:after {
background-color: #6f87a6;
z-index: 0
}
[type=radio]:checked + label:after {
transform: scale(1.02)
}
[type=radio].with-gap:checked + label:after {
transform: scale(.5)
}
[type=radio].tabbed:focus + label:before {
box-shadow: 0 0 0 10px rgba(0,0,0,.1)
}
[type=radio].with-gap:disabled:checked + label:before {
border: 2px solid rgba(0,0,0,.26)
}
[type=radio].with-gap:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border: none
}
[type=radio]:disabled:checked + label:before, [type=radio]:disabled:not(:checked) + label:before {
background-color: transparent;
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled + label {
color: rgba(0,0,0,.26)
}
[type=radio]:disabled:not(:checked) + label:before {
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border-color: #bdbdbd
}
form p {
margin-bottom: 10px;
text-align: left
}
form p:last-child {
margin-bottom: 0
}
[type=checkbox]:checked, [type=checkbox]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=checkbox] + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
[type=checkbox] + label:before, [type=checkbox]:not(.filled-in) + label:after {
border: 2px solid #5a5a5a;
border-radius: 1px;
content: "";
height: 18px;
left: 0;
margin-top: 2px;
position: absolute;
top: 0;
transition: .2s;
width: 18px;
z-index: 0
}
[type=checkbox]:not(.filled-in) + label:after {
border: 0;
transform: scale(0)
}
[type=checkbox]:not(:checked):disabled + label:before {
background-color: rgba(0,0,0,.26);
border: none
}
[type=checkbox].tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
transform: scale(1)
}
[type=checkbox]:checked + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-color: transparent #6f87a6 #6f87a6 transparent;
border-style: solid;
border-width: 2px;
height: 22px;
left: -5px;
top: -4px;
transform: rotate(40deg);
transform-origin: 100% 100%;
width: 12px
}
[type=checkbox]:checked:disabled + label:before {
border-bottom: 2px solid rgba(0,0,0,.26);
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox]:indeterminate + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: none;
border-right: 2px solid #6f87a6;
height: 22px;
left: -12px;
top: -11px;
transform: rotate(90deg);
transform-origin: 100% 100%;
width: 10px
}
[type=checkbox]:indeterminate:disabled + label:before {
background-color: transparent;
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox].filled-in + label:after {
border-radius: 2px
}
[type=checkbox].filled-in + label:after, [type=checkbox].filled-in + label:before {
content: "";
left: 0;
position: absolute;
transition: border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;
z-index: 1
}
[type=checkbox].filled-in:not(:checked) + label:before {
border: 3px solid transparent;
height: 0;
left: 6px;
top: 10px;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 0
}
[type=checkbox].filled-in:not(:checked) + label:after {
background-color: transparent;
border: 2px solid #5a5a5a;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in:checked + label:before {
border-color: transparent #fff #fff transparent;
border-style: solid;
border-width: 2px;
height: 13px;
left: 1px;
top: 0;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 8px
}
[type=checkbox].filled-in:checked + label:after {
background-color: #6f87a6;
border: 2px solid #6f87a6;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in.tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border-color: #5a5a5a;
border-radius: 2px
}
[type=checkbox].filled-in.tabbed:checked:focus + label:after {
background-color: #6f87a6;
border-color: #6f87a6;
border-radius: 2px
}
[type=checkbox].filled-in:disabled:not(:checked) + label:before {
background-color: transparent;
border: 2px solid transparent
}
[type=checkbox].filled-in:disabled:not(:checked) + label:after {
background-color: #bdbdbd;
border-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:before {
background-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:after {
background-color: #bdbdbd;
border-color: #bdbdbd
}
.switch, .switch * {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
.switch label {
cursor: pointer
}
.switch label input[type=checkbox] {
height: 0;
opacity: 0;
width: 0
}
.switch label input[type=checkbox]:checked + .lever {
background-color: #cacaca
}
.switch label input[type=checkbox]:checked + .lever:after {
background-color: #6f87a6;
left: 24px
}
.switch label .lever {
background-color: #818181;
border-radius: 15px;
content: "";
display: inline-block;
height: 15px;
margin: 0 16px;
position: relative;
transition: background .3s ease;
vertical-align: middle;
width: 40px
}
.switch label .lever:after {
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
content: "";
display: inline-block;
height: 21px;
left: -5px;
position: absolute;
top: -3px;
transition: left .3s ease,background .3s ease,box-shadow .1s ease;
width: 21px
}
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(111,135,166,.1)
}
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(0,0,0,.08)
}
.switch input[type=checkbox][disabled] + .lever {
cursor: default
}
.switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: #bdbdbd
}
select {
display: none
}
select.browser-default {
display: block
}
select {
background-color: rgba(255,255,255,.9);
border: 1px solid #f2f2f2;
border-radius: 2px;
height: 44px;
padding: 5px;
width: 100%
}
.select-label {
position: absolute
}
.select-wrapper {
position: relative
}
.select-wrapper input.select-dropdown {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
cursor: pointer;
display: block;
font-size: 22px;
height: 44px;
line-height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
position: relative;
width: 100%
}
.select-wrapper span.caret {
color: #000;
color: initial;
font-size: 10px;
position: absolute;
right: 0;
top: 16px
}
.select-wrapper span.caret.disabled {
color: rgba(0,0,0,.26)
}
.select-wrapper + label {
font-size: 9px;
position: absolute;
top: -14px
}
select:disabled {
color: rgba(0,0,0,.3)
}
.select-wrapper input.select-dropdown:disabled {
border-bottom: 1px solid rgba(0,0,0,.3);
color: rgba(0,0,0,.3);
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.select-wrapper i {
color: rgba(0,0,0,.3)
}
.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {
background-color: transparent;
color: rgba(0,0,0,.3)
}
.prefix ~ .select-wrapper {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.prefix ~ label {
margin-left: 3rem
}
.select-dropdown li img {
float: right;
height: 40px;
margin: 5px 15px;
width: 40px
}
.select-dropdown li.optgroup {
border-top: 1px solid #eee
}
.select-dropdown li.optgroup.selected > span {
color: rgba(0,0,0,.7)
}
.select-dropdown li.optgroup > span {
color: rgba(0,0,0,.4)
}
.select-dropdown li.optgroup ~ li.optgroup-option {
padding-left: 1rem
}
.file-field {
position: relative
}
.file-field .file-path-wrapper {
overflow: hidden;
padding-left: 10px
}
.file-field input.file-path {
width: 100%
}
.file-field .btn {
float: left;
height: 44px;
line-height: 44px
}
.file-field span {
cursor: pointer
}
.file-field input[type=file] {
bottom: 0;
cursor: pointer;
filter: alpha(opacity=0);
font-size: 20px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
.range-field {
position: relative
}
input[type=range], input[type=range] + .thumb {
cursor: pointer
}
input[type=range] {
background-color: transparent;
border: none;
margin: 15px 0;
outline: none;
padding: 0;
position: relative;
width: 100%
}
input[type=range]:focus {
outline: none
}
input[type=range] + .thumb {
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 0;
margin-left: -6px;
position: absolute;
top: 10px;
transform: rotate(-45deg);
transform-origin: 50% 50%;
width: 0
}
input[type=range] + .thumb .value {
color: #6f87a6;
display: block;
font-size: 0;
text-align: center;
transform: rotate(45deg);
width: 30px
}
input[type=range] + .thumb.active {
border-radius: 50% 50% 50% 0
}
input[type=range] + .thumb.active .value {
color: #fff;
font-size: 10px;
margin-left: -1px;
margin-top: 8px
}
input[type=range] {
-webkit-appearance: none
}
input[type=range]::-webkit-slider-runnable-track {
background: #c2c0c2;
border: none;
height: 3px
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin: -5px 0 0;
transform-origin: 50% 50%;
-webkit-transition: .3s;
transition: .3s;
width: 14px
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc
}
input[type=range] {
border: 1px solid #fff
}
input[type=range]::-moz-range-track {
background: #ddd;
border: none;
height: 3px
}
input[type=range]::-moz-range-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin-top: -5px;
width: 14px
}
input[type=range]:-moz-focusring {
outline: 1px solid #fff;
outline-offset: -1px
}
input[type=range]:focus::-moz-range-track {
background: #ccc
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
height: 3px
}
input[type=range]::-ms-fill-lower {
background: #777
}
input[type=range]::-ms-fill-upper {
background: #ddd
}
input[type=range]::-ms-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
width: 14px
}
input[type=range]:focus::-ms-fill-lower {
background: #888
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc
}
#configurator [actions] [cancel]:after, #configurator [actions] [edit]:before, #configurator [actions] [next]:after, #configurator [actions] [prev]:before, #configurator [actions] [select]:after, #configurator [actions] [share]:after, #dialog-overlay [back]:before, #dialog-overlay [help]:after, #modal-details [close]:before, #modal-dialog [option-container] figure:not(.included) [icon]:before, #modal-lightbox .modal-content .email:before, #options-tray [option=aerodynamics] figure:not(.included) [icon]:before, #options-tray [option=battery-powered-hvac-system] figure:not(.included) [icon]:before, #options-tray [option=bumper] figure:not(.included) [icon]:before, #options-tray [option=cardTest] figure:not(.included) [icon]:before, #options-tray [option=chassis-fairings] figure:not(.included) [icon]:before, #options-tray [option=detroit-connect] figure:not(.included) [icon]:before, #options-tray [option=doors] figure:not(.included) [icon]:before, #options-tray [option=doors-fresnel] figure:not(.included) [icon]:before, #options-tray [option=elite-trim] figure:not(.included) [icon]:before, #options-tray [option=engine] figure:not(.included) [icon]:before, #options-tray [option=enlace-freightliner] figure:not(.included) [icon]:before, #options-tray [option=fresnel-window] figure:not(.included) [icon]:before, #options-tray [option=hubs] figure:not(.included) [icon]:before, #options-tray [option=logo] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper-lounge] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper] figure:not(.included) [icon]:before, #options-tray [option=mirrors] figure:not(.included) [icon]:before, #options-tray [option=paquete-de-tren-motriz] figure:not(.included) [icon]:before, #options-tray [option=passenger-lower-cabinet] figure:not(.included) [icon]:before, #options-tray [option=passenger-seat] figure:not(.included) [icon]:before, #options-tray [option=powertrain-package] figure:not(.included) [icon]:before, #options-tray [option=refrigerator] figure:not(.included) [icon]:before, #options-tray [option=roof-fairing] figure:not(.included) [icon]:before, #options-tray [option=safety-systems] figure:not(.included) [icon]:before, #options-tray [option=safety] figure:not(.included) [icon]:before, #options-tray [option=seguridad] figure:not(.included) [icon]:before, #options-tray [option=sun-visor] figure:not(.included) [icon]:before, #options-tray [option=trim-package] figure:not(.included) [icon]:before, #options-tray [option=upper-sleeper] figure:not(.included) [icon]:before, #options-tray [option=vocation] figure:not(.included) [icon]:before, #options-tray [option=wheel-chrome] figure:not(.included) [icon]:before, #options-tray [option=wheels] figure:not(.included) [icon]:before, #quote-summary > :not(label) > button:before, #request-quote .location > .content .departments > span.parts:before, #request-quote .location > .content .departments > span.sales:before, #request-quote .location > .content .departments > span.service:before, .icon-category:before, .icon-checkmark:before, .icon-collapse:before, .icon-configurator-back:before, .icon-configurator-cancel:before, .icon-configurator-checkmark-thin:before, .icon-configurator-checkmark:before, .icon-configurator-close:before, .icon-configurator-next:before, .icon-configurator-rotate:before, .icon-connectivity:before, .icon-dotted-arrow-right:before, .icon-down-arrow:before, .icon-driver-experience:before, .icon-edit:before, .icon-envelope:before, .icon-expand:before, .icon-facebook-filled:before, .icon-facebook:before, .icon-fuel-efficiency:before, .icon-geo:before, .icon-header-search:before, .icon-information:before, .icon-instagram:before, .icon-left-arrow:before, .icon-location:before, .icon-map-pin:before, .icon-minus-icon:before, .icon-pdf-icon:before, .icon-phone:before, .icon-play2:before, .icon-play3:before, .icon-play-icon:before, .icon-plus-icon:before, .icon-plus:before, .icon-productivity:before, .icon-quality:before, .icon-revealleft:before, .icon-revealright:before, .icon-right-arrow-with-background:before, .icon-right-arrow:before, .icon-route:before, .icon-safety:before, .icon-shock:before, .icon-tag:before, .icon-target:before, .icon-time:before, .icon-tools:before, .icon-twitter:before, icon-icon-linkedin:before, .icon-upfit:before, .icon-uptime:before, .icon-user:before, .icon-youtube:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before, .slick-next:before, .slick-prev:before, .swiper-button-next:before, .swiper-button-prev:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, [dir=rtl] .slick-next:before, [dir=rtl] .slick-prev:before, [resources-page] form:before, article > heading address:before, article > heading data:before, article > heading time:before, article > nav > a.next span.dir:after, article > nav > a.prev span.dir:before, body > .find-dealer button.filters-toggle:after, body > .find-dealer button.highlight-off:after, body > .find-dealer button.option:not(.geo):after, body > .site-menu a[index]:before, body > .trucks-menu a[index]:before, comp-card-list > div > * address:before, comp-card-list > div > * data:before, comp-card-list > div > * time:before, comp-card-list > div [type=VID] comp-image:before, comp-container[hero] comp-dealers > header .location > .content .departments > span.parts:before, comp-container[hero] comp-dealers > header .location > .content .departments > span.sales:before, comp-container[hero] comp-dealers > header .location > .content .departments > span.service:before, comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-info-toggle:after, comp-dealers > inner-content .location > .content .departments > span.parts:before, comp-dealers > inner-content .location > .content .departments > span.sales:before, comp-dealers > inner-content .location > .content .departments > span.service:before, comp-dealers > inner-content > aside > .filters-container button.filters-info-toggle:after, comp-expand-blocks:not([collapsed]) button.btn-default:before, comp-expand-blocks > header > comp-background a[type=VID]:after, comp-expand-blocks > header button.btn-default:before, comp-highlight comp-background[hasbutton] > [role=button]:not([label]):before, comp-highlight comp-background[hasbutton] > [role=button][label=""]:before, comp-new-truck-card div[type=VID] > comp-image:before, comp-swipe-card[pillar="Driver Experience"] > h2:before, comp-swipe-card[pillar="Fuel Efficiency"] > h2:before, comp-swipe-card[pillar=Connectivity] > h2:before, comp-swipe-card[pillar=Productivity] > h2:before, comp-swipe-card[pillar=Quality] > h2:before, comp-swipe-card[pillar=Safety] > h2:before, comp-swipe-card[pillar=Upfit] > h2:before, comp-swipe-card[pillar=Uptime] > h2:before, comp-swipe-card comp-card[image] .play:after, comp-swipe-card comp-card[video] .play:after, comp-truck-explore a[type=VID] > comp-image:before, form:not(.gsc-search-box) .dealer > section > [specific] [use-location]:after, #options-tray [option=package-trim] figure:not(.included) [icon]:before, #options-tray [option=safety-interior ] figure:not(.included) [icon]:before {
speak: none;
font-feature-settings: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: icomoon !important;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none
}
@font-face {
font-family: icomoon;
font-style: normal;
font-weight: 400;
src: url(https://freightliner.azureedge.net/images/icon-font/icomoon.eot?) format("eot"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.ttf) format("truetype"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.woff) format("woff"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.svg#icomoon) format("svg")
}
.icon-category:before, article > heading data:before, comp-card-list > div > * data:before {
content: "a"
}
.icon-checkmark:before {
content: "b"
}
.icon-down-arrow:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
content: "d"
}
.icon-information:before, body > .find-dealer button.filters-toggle:after, body > .find-dealer button.highlight-off:after, comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-info-toggle:after, comp-dealers > inner-content > aside > .filters-container button.filters-info-toggle:after {
content: "i"
}
.icon-instagram:before {
content: "j"
}
#dialog-overlay [back]:before, .icon-left-arrow:before, .swiper-button-prev:before, article > nav > a.prev span.dir:before {
content: "k"
}
.icon-map-pin:before {
content: "l"
}
.icon-minus-icon:before {
content: "m"
}
.icon-pdf-icon:before {
content: "n"
}
.icon-play-icon:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, comp-card-list > div [type=VID] comp-image:before, comp-swipe-card comp-card[image] .play:after, comp-swipe-card comp-card[video] .play:after {
content: "p"
}
.icon-plus-icon:before {
content: "q"
}
.icon-productivity:before, comp-swipe-card[pillar=Productivity] > h2:before {
content: "r"
}
.icon-quality:before, comp-swipe-card[pillar=Quality] > h2:before {
content: "s"
}
.icon-right-arrow:before, .swiper-button-next:before, article > nav > a.next span.dir:after, body > .find-dealer button.option:not(.geo):after, body > .site-menu a[index]:before, body > .trucks-menu a[index]:before {
content: "t"
}
.icon-right-arrow-with-background:before {
content: "u"
}
.icon-route:before {
content: "v"
}
.icon-target:before {
content: "x"
}
.icon-time:before, article > heading time:before, comp-card-list > div > * time:before {
content: "y"
}
.icon-uptime:before, comp-swipe-card[pillar=Uptime] > h2:before {
content: "B"
}
.icon-user:before, article > heading address:before, comp-card-list > div > * address:before {
content: "C"
}
.icon-youtube:before {
content: "D"
}
.icon-safety:before, comp-swipe-card[pillar=Safety] > h2:before {
content: "E"
}
.icon-upfit:before, comp-swipe-card[pillar=Upfit] > h2:before {
content: "A"
}
.icon-fuel-efficiency:before, comp-swipe-card[pillar="Fuel Efficiency"] > h2:before {
content: "g"
}
.icon-facebook:before {
content: "e"
}
.icon-header-search:before, [resources-page] form:before {
content: "f"
}
.icon-driver-experience:before, comp-swipe-card[pillar="Driver Experience"] > h2:before {
content: "h"
}
.icon-twitter:before {
content: "z"
}
.icon-icon-linkedin:before {
content: "\e900";
font-family: "icomoon" !important;
font-style: normal;
}
.icon-phone:before {
content: "F"
}
.icon-connectivity:before, comp-swipe-card[pillar=Connectivity] > h2:before {
content: "c"
}
.icon-plus:before {
content: "o"
}
.icon-revealleft:before, .slick-prev:before, [dir=rtl] .slick-next:before {
content: "w"
}
.icon-revealright:before, .slick-next:before, [dir=rtl] .slick-prev:before {
content: "G"
}
.icon-play2:before {
content: "H"
}
.icon-configurator-back:before {
content: "I"
}
#configurator [actions] [cancel]:after, .icon-configurator-cancel:before {
content: "J"
}
#configurator [actions] [select]:after, #modal-dialog [option-container] figure:not(.included) [icon]:before, #options-tray [option=aerodynamics] figure:not(.included) [icon]:before, #options-tray [option=battery-powered-hvac-system] figure:not(.included) [icon]:before, #options-tray [option=bumper] figure:not(.included) [icon]:before, #options-tray [option=cardTest] figure:not(.included) [icon]:before, #options-tray [option=chassis-fairings] figure:not(.included) [icon]:before, #options-tray [option=detroit-connect] figure:not(.included) [icon]:before, #options-tray [option=doors] figure:not(.included) [icon]:before, #options-tray [option=doors-fresnel] figure:not(.included) [icon]:before, #options-tray [option=elite-trim] figure:not(.included) [icon]:before, #options-tray [option=engine] figure:not(.included) [icon]:before, #options-tray [option=enlace-freightliner] figure:not(.included) [icon]:before, #options-tray [option=fresnel-window] figure:not(.included) [icon]:before, #options-tray [option=hubs] figure:not(.included) [icon]:before, #options-tray [option=logo] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper-lounge] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper] figure:not(.included) [icon]:before, #options-tray [option=mirrors] figure:not(.included) [icon]:before, #options-tray [option=paquete-de-tren-motriz] figure:not(.included) [icon]:before, #options-tray [option=passenger-lower-cabinet] figure:not(.included) [icon]:before, #options-tray [option=passenger-seat] figure:not(.included) [icon]:before, #options-tray [option=powertrain-package] figure:not(.included) [icon]:before, #options-tray [option=refrigerator] figure:not(.included) [icon]:before, #options-tray [option=roof-fairing] figure:not(.included) [icon]:before, #options-tray [option=safety-systems] figure:not(.included) [icon]:before, #options-tray [option=safety] figure:not(.included) [icon]:before, #options-tray [option=seguridad] figure:not(.included) [icon]:before, #options-tray [option=sun-visor] figure:not(.included) [icon]:before, #options-tray [option=trim-package] figure:not(.included) [icon]:before, #options-tray [option=upper-sleeper] figure:not(.included) [icon]:before, #options-tray [option=vocation] figure:not(.included) [icon]:before, #options-tray [option=wheel-chrome] figure:not(.included) [icon]:before, #options-tray [option=wheels] figure:not(.included) [icon]:before, .icon-configurator-checkmark:before, #options-tray [option=package-trim] figure:not(.included) [icon]:before, #options-tray [option=safety-interior] figure:not(.included) [icon]:before {
content: "K"
}
#configurator [actions] [edit]:before, #configurator [actions] [next]:after, #configurator [actions] [prev]:before, .icon-configurator-next:before {
content: "L"
}
#dialog-overlay [help]:after, .icon-configurator-rotate:before {
content: "M"
}
#modal-details [close]:before, .icon-configurator-close:before {
content: "N"
}
.icon-configurator-checkmark-thin:before {
content: "O"
}
#quote-summary > :not(label) > button:before, .icon-edit:before {
content: "P"
}
.icon-location:before {
content: "Q"
}
.icon-geo:before, form:not(.gsc-search-box) .dealer > section > [specific] [use-location]:after {
content: "R"
}
#configurator [actions] [share]:after, .icon-facebook-filled:before {
content: "S"
}
.icon-collapse:before, comp-expand-blocks:not([collapsed]) button.btn-default:before {
content: "T"
}
.icon-expand:before, comp-expand-blocks > header button.btn-default:before {
content: "U"
}
.icon-dotted-arrow-right:before {
content: "V"
}
#request-quote .location > .content .departments > span.sales:before, .icon-tag:before, comp-container[hero] comp-dealers > header .location > .content .departments > span.sales:before, comp-dealers > inner-content .location > .content .departments > span.sales:before {
content: "W"
}
#request-quote .location > .content .departments > span.parts:before, .icon-shock:before, comp-container[hero] comp-dealers > header .location > .content .departments > span.parts:before, comp-dealers > inner-content .location > .content .departments > span.parts:before {
content: "X"
}
#request-quote .location > .content .departments > span.service:before, .icon-tools:before, comp-container[hero] comp-dealers > header .location > .content .departments > span.service:before, comp-dealers > inner-content .location > .content .departments > span.service:before {
content: "Y"
}
#modal-lightbox .modal-content .email:before, .icon-envelope:before {
content: "Z"
}
.icon-play3:before, comp-expand-blocks > header > comp-background a[type=VID]:after, comp-highlight comp-background[hasbutton] > [role=button]:not([label]):before, comp-highlight comp-background[hasbutton] > [role=button][label=""]:before, comp-new-truck-card div[type=VID] > comp-image:before, comp-truck-explore a[type=VID] > comp-image:before {
content: "0"
}
body, html {
min-height: 100%
}
html {
scroll-behavior: smooth
}
.gsc-control-cse {
box-sizing: content-box
}
.gsc-control-cse *, .gsc-control-cse :after, .gsc-control-cse :before {
box-sizing: inherit;
line-height: normal
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .015em;
max-width: 100%
}
body > img {
width: 100%
}
body > footer {
border-top: 1px solid #d7d7d7;
padding: 5.8565153734vw 0
}
body > footer comp-container[hero] header:first-child, body > footer inner-content:first-child, comp-container[hero] body > footer header:first-child {
margin: 0 auto;
max-width: 1188px;
width: 90%
}
@media(min-width:768px) {
body > footer comp-container[hero] header:first-child, body > footer inner-content:first-child, comp-container[hero] body > footer header:first-child {
display: flex
}
body > footer comp-container[hero] header:first-child > *, body > footer inner-content:first-child > *, comp-container[hero] body > footer header:first-child > * {
flex: 1;
padding: 0 3.6603221083vw
}
body > footer comp-container[hero] header:first-child > :not(:first-child), body > footer inner-content:first-child > :not(:first-child), comp-container[hero] body > footer header:first-child > :not(:first-child) {
border-left: 1px solid #f7f7f7
}
}
@media(min-width:768px)and (min-width:1320px) {
body > footer comp-container[hero] header:first-child > *, body > footer inner-content:first-child > *, comp-container[hero] body > footer header:first-child > * {
padding: 0 50px
}
}
@media(max-width:767px) {
body > footer comp-container[hero] header:first-child > *, body > footer inner-content:first-child > *, comp-container[hero] body > footer header:first-child > * {
border-bottom: 1px solid #d7d7d7;
display: block;
padding: 5.2% 40px
}
}
body > footer comp-container[hero] header:first-child > .branding, body > footer inner-content:first-child > .branding, comp-container[hero] body > footer header:first-child > .branding {
text-align: center
}
body > footer comp-container[hero] header:first-child > .branding > a, body > footer inner-content:first-child > .branding > a, comp-container[hero] body > footer header:first-child > .branding > a {
display: block;
margin-bottom: 20px
}
@media(min-width:768px) {
body > footer comp-container[hero] header:first-child > .branding, body > footer inner-content:first-child > .branding, comp-container[hero] body > footer header:first-child > .branding {
padding-left: 0;
text-align: left
}
body > footer comp-container[hero] header:first-child > .branding > a, body > footer inner-content:first-child > .branding > a, comp-container[hero] body > footer header:first-child > .branding > a {
margin-bottom: 30px;
max-width: 148px
}
}
body > footer comp-container[hero] header:first-child > .branding p, body > footer inner-content:first-child > .branding p, comp-container[hero] body > footer header:first-child > .branding p {
color: #585858;
font-family: industry,sans-serif;
font-size: 12px;
letter-spacing: .15em;
margin: 1em 0
}
body > footer comp-container[hero] header:first-child > .branding .social a, body > footer inner-content:first-child > .branding .social a, comp-container[hero] body > footer header:first-child > .branding .social a {
background: #808181;
background-size: 100% 0;
border-radius: 100%;
color: #fff;
display: inline-block;
height: 28px;
line-height: 28px;
margin: 3px;
text-align: center;
text-shadow: none;
transition: all .25s ease-in-out;
width: 28px
}
comp-container[hero] html:not(.touch) body > footer header:first-child > .branding .social a:hover, html:not(.touch) body > footer comp-container[hero] header:first-child > .branding .social a:hover, html:not(.touch) body > footer inner-content:first-child > .branding .social a:hover {
background: #713738;
color: #fff !important;
text-decoration: none
}
@media(max-width:767px) {
body > footer comp-container[hero] header:first-child > .branding .social a, body > footer inner-content:first-child > .branding .social a, comp-container[hero] body > footer header:first-child > .branding .social a {
height: 40px;
line-height: 40px;
width: 40px
}
}
body > footer comp-container[hero] header:first-child > :not(.branding) a, body > footer inner-content:first-child > :not(.branding) a, comp-container[hero] body > footer header:first-child > :not(.branding) a {
color: #484848;
display: block;
font-family: industry,sans-serif;
font-size: 12px
}
body > footer comp-container[hero] header:last-child, body > footer inner-content:last-child, comp-container[hero] body > footer header:last-child {
margin: 0 auto;
max-width: 1188px;
padding: 5% 0;
width: 90%
}
@media(min-width:768px) {
body > footer comp-container[hero] header:last-child, body > footer inner-content:last-child, comp-container[hero] body > footer header:last-child {
display: flex
}
}
body > footer comp-container[hero] header:last-child > div, body > footer inner-content:last-child > div, comp-container[hero] body > footer header:last-child > div {
flex-grow: 1
}
body > footer comp-container[hero] header:last-child > div.branding, body > footer inner-content:last-child > div.branding, comp-container[hero] body > footer header:last-child > div.branding {
flex-grow: 0
}
@media(min-width:768px) {
body > footer comp-container[hero] header:last-child > div.branding, body > footer inner-content:last-child > div.branding, comp-container[hero] body > footer header:last-child > div.branding {
width: 40%
}
body > footer comp-container[hero] header:last-child > div.branding > div, body > footer inner-content:last-child > div.branding > div, comp-container[hero] body > footer header:last-child > div.branding > div {
display: flex
}
}
body > footer comp-container[hero] header:last-child > div.branding > div a, body > footer inner-content:last-child > div.branding > div a, comp-container[hero] body > footer header:last-child > div.branding > div a {
flex: 1;
max-width: 144px
}
body > footer comp-container[hero] header:last-child > div.branding > div span, body > footer inner-content:last-child > div.branding > div span, comp-container[hero] body > footer header:last-child > div.branding > div span {
display: block;
flex: 1;
font-size: 12px
}
@media(min-width:768px) {
body > footer comp-container[hero] header:last-child > div.branding > div span, body > footer inner-content:last-child > div.branding > div span, comp-container[hero] body > footer header:last-child > div.branding > div span {
border-left: 1px solid #f7f7f7;
margin: 0 10px;
padding: 5px 10px
}
}
@media(max-width:767px) {
body > footer comp-container[hero] header:last-child > div.branding > div span, body > footer inner-content:last-child > div.branding > div span, comp-container[hero] body > footer header:last-child > div.branding > div span {
margin-bottom: 20px;
margin-top: 20px
}
}
body > footer comp-container[hero] header:last-child > div p, body > footer inner-content:last-child > div p, comp-container[hero] body > footer header:last-child > div p {
color: #3b3b3b;
font-size: 12px;
font-weight: 100;
margin: 0
}
iframe, img {
max-width: 100%
}
strong {
font-weight: 600
}
a, label {
cursor: pointer
}
a:focus, a:hover {
text-decoration: none
}
html:not(.touch) a:not(.btn):not([role=button]):not(.btn-default):not(.btn-primary):hover {
color: #713738
}
[clickable] {
cursor: pointer
}
.heading-1, .heading-2, h1, h2, sudo-h1, sudo-h2 {
font-weight: 100;
letter-spacing: .015em
}
.heading-5, .heading-6, [engine] comp-specs > div li > strong, [specs] comp-specs[type=cabConfigurations] strong, article table.specs tbody td:not([colspan]):first-of-type, article table.specs thead th, comp-truck-hero > .specs > div li > strong, comp-truck-hero comp-specs > div li > strong, h5, h6, sudo-h5, sudo-h6 {
color: #6f87a6;
letter-spacing: .15em
}
[class*=btn] {
font-family: industry,sans-serif;
transition: all .5s ease
}
[class*=btn]:focus, [class*=btn]:hover {
text-decoration: none
}
:not(td) > .btn, :not(td) > a[role=button], :not(td) > button, :not(td) > input[type=button], :not(td) > input[type=submit] {
background-color: #6f87a6;
border: 0;
color: #fff;
font-family: industry,sans-serif;
font-size: 18px;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
padding: 11px 30px;
transition: all .5s ease;
white-space: normal
}
:not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
:not(td) > .btn.toggle.on, :not(td) > a[role=button].toggle.on, :not(td) > button.toggle.on, :not(td) > input[type=button].toggle.on, :not(td) > input[type=submit].toggle.on {
background: #6f87a6
}
html:not(.touch) :not(td) > .btn.toggle.on:hover, html:not(.touch) :not(td) > a[role=button].toggle.on:hover, html:not(.touch) :not(td) > button.toggle.on:hover, html:not(.touch) :not(td) > input[type=button].toggle.on:hover, html:not(.touch) :not(td) > input[type=submit].toggle.on:hover {
background: #7f94b0
}
:not(td) > .btn.toggle:not(.on), :not(td) > a[role=button].toggle:not(.on), :not(td) > button.toggle:not(.on), :not(td) > input[type=button].toggle:not(.on), :not(td) > input[type=submit].toggle:not(.on) {
background: #484848
}
html:not(.touch) :not(td) > .btn.toggle:not(.on):hover, html:not(.touch) :not(td) > a[role=button].toggle:not(.on):hover, html:not(.touch) :not(td) > button.toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=button].toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=submit].toggle:not(.on):hover {
background: #555
}
:not(td) > .btn:focus, :not(td) > a[role=button]:focus, :not(td) > button:focus, :not(td) > input[type=button]:focus, :not(td) > input[type=submit]:focus, html:not(.touch) :not(td) > .btn:hover, html:not(.touch) :not(td) > a[role=button]:hover, html:not(.touch) :not(td) > button:hover, html:not(.touch) :not(td) > input[type=button]:hover, html:not(.touch) :not(td) > input[type=submit]:hover {
background-color: #713738
}
:not(td) > .btn[disabled], :not(td) > a[role=button][disabled], :not(td) > button[disabled], :not(td) > input[type=button][disabled], :not(td) > input[type=submit][disabled] {
cursor: not-allowed;
opacity: .5
}
.note {
display: block;
font-size: .8em
}
input.select, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #efefef url(../png/select-drop-arrow.png) no-repeat 100% !important;
border: none;
border-radius: 0;
box-shadow: 0 1px 0 #aaa;
display: inline-block;
padding: 5px 10px
}
input.select::-ms-expand, select::-ms-expand {
display: none
}
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important
}
input[type=email], input[type=number], input[type=tel], input[type=text], textarea {
background: #efefef;
border: solid #aaa;
border-width: 0 0 1px;
box-sizing: border-box;
display: block;
font-size: 18px;
padding: 5px 10px
}
input[type=email]:not(textarea), input[type=number]:not(textarea), input[type=tel]:not(textarea), input[type=text]:not(textarea), textarea:not(textarea) {
height: 43px
}
textarea {
height: auto
}
body form:not(.gsc-search-box) .input-field label {
font-size: 18px;
left: 10px;
top: 5px
}
.disclaimer {
font-size: .8em;
padding: 10px 0;
text-align: left
}
.disclaimer + .disclaimer {
padding-top: 0
}
.modal {
overflow-y: hidden !important;
will-change: auto
}
.material-tooltip {
font-size: 15px
}
.form-error {
color: red
}
.nav-fixed body {
padding-top: 80px
}
body > nav:not([breadcrumbs]) {
background: #fff;
display: flex;
left: 0;
position: relative;
top: 0;
transition: all .4s;
width: 100%;
z-index: 12
}
.nav-fixed body > nav:not([breadcrumbs]) {
background: #fff;
border-bottom: 1px solid #e5e7e9;
position: fixed
}
body > nav:not([breadcrumbs]) > * {
flex: 1 30%
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * {
display: flex;
margin: 0
}
body > nav:not([breadcrumbs]) > * > * {
flex: 1
}
}
body > nav:not([breadcrumbs]) > * > a {
color: #000;
display: inline-block;
font-family: industry,sans-serif;
font-size: 14px;
font-weight: 600;
height: 80px;
letter-spacing: .75px;
line-height: 80px;
overflow: hidden;
padding: 0 2.7818448023vw;
text-transform: uppercase;
transition: all .25s;
vertical-align: top
}
.nav-fixed body > nav:not([breadcrumbs]) > * > a {
height: 35px;
line-height: 35px;
padding: 0 1.217057101vw
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * > a {
font-size: 10px;
padding: 0 4px
}
}
body > nav:not([breadcrumbs]) .left {
padding-left: 1.4641288433vw
}
body > nav:not([breadcrumbs]) .right {
padding-right: 1.4641288433vw;
text-align: right
}
@media(min-width:900px) {
body > nav:not([breadcrumbs]) .right {
position: relative
}
}
@media(max-width:767px) {
body > nav:not([breadcrumbs]) .right {
padding-right: 0
}
body > nav:not([breadcrumbs]) .right > a:last-of-type {
flex: .5;
font-size: 14px;
width: 30%
}
}
body > nav:not([breadcrumbs]) .right > div {
background: #6f87a6;
display: flex;
height: 80px;
position: absolute;
right: 0;
top: 0;
transition: all .25s;
width: 0
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div {
height: 35px
}
body > nav:not([breadcrumbs]) .right > div button.close {
background: #6f87a6;
border-right: 1px solid rgba(255,255,255,.25);
flex-grow: 0;
transition: background-color .5s;
width: 80px
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div button.close {
width: 80px
}
html:not(.touch) body > nav:not([breadcrumbs]) .right > div button.close:hover {
background-color: #43556c
}
body > nav:not([breadcrumbs]) .right > div button.close i {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px
}
body > nav:not([breadcrumbs]) .right > div > form {
flex-grow: 1;
padding: 0 10px;
position: relative
}
body > nav:not([breadcrumbs]) .right > div > form input {
background: transparent !important;
border: 0;
border-bottom: 0 !important;
box-shadow: none !important;
color: #fff;
display: block;
font-size: 24px;
height: 100%;
height: 80px !important;
line-height: 80px;
margin: 0 !important;
padding: 0 !important
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div > form input {
line-height: 35px
}
body > nav:not([breadcrumbs]) .right > div > form input::-moz-placeholder {
color: #b7c3d3;
opacity: 1
}
body > nav:not([breadcrumbs]) .right > div > form input:-ms-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form input::-webkit-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form ul {
background: #6f87a6;
color: #fff;
list-style: none unset;
position: absolute;
right: 0;
top: 100%;
width: 100%
}
body > nav:not([breadcrumbs]) .right > div > form ul li {
display: block;
padding: 5px 10px;
text-align: left;
text-transform: uppercase
}
body > nav:not([breadcrumbs]) .right > div form {
height: 100%;
margin: 0
}
body > nav:not([breadcrumbs]) .right > div td {
display: block;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
body > nav:not([breadcrumbs]) .right > div table {
margin: 0;
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div {
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div {
height: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div * {
height: inherit
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) .right .search {
flex-basis: 30%;
flex-grow: 0;
max-width: 56px;
padding-right: calc(1.46413vw + 4px)
}
}
.nav-fixed body > nav:not([breadcrumbs]) .right .search, body > nav:not([breadcrumbs]) .right .scrolltop {
display: none
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop {
background-color: #6f87a6;
color: #fff !important;
display: inline-block;
text-align: center;
transition: all .5s ease
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
display: block;
margin-top: 8px;
transform: rotate(180deg)
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:focus, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:hover {
text-decoration: none !important
}
body > nav:not([breadcrumbs]) .right .scrolltop:focus, html:not(.touch) body > nav:not([breadcrumbs]) .right .scrolltop:hover {
background-color: #713738;
color: #fff !important
}
body > nav:not([breadcrumbs]) .center {
min-width: 130px;
text-align: center
}
body > nav:not([breadcrumbs]) .center a {
padding: 0
}
body > nav:not([breadcrumbs]) .center img {
width: 180px
}
.nav-fixed body > nav:not([breadcrumbs]) .center img {
width: 78px
}
nav[breadcrumbs] {
background: rgba(0,0,0,.77);
left: 0;
line-height: 36px;
padding: 0 4.2459736457vw;
top: 0;
width: 100%;
z-index: 1
}
nav[breadcrumbs] > * {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
margin-right: .5em;
transition: opacity .25s
}
nav[breadcrumbs] > :not(:last-child):after {
content: "/";
display: inline-block;
margin-left: .5em
}
nav[breadcrumbs] > a {
opacity: .5
}
html:not(.touch) nav[breadcrumbs] > a:hover {
color: #fff !important;
opacity: 1
}
nav[pagination] {
text-align: center
}
nav[pagination] a {
cursor: pointer;
display: inline-block;
padding: 10px 20px
}
html:not(.touch) nav[pagination] a.active:hover, nav[pagination] a.active {
background: #6f87a6;
color: #fff !important;
cursor: default
}
html:not(.touch) nav[pagination] a:hover {
background: #ebebeb;
text-decoration: none
}
nav[with-subtitle] > a {
align-items: center;
background-color: #6f87a6
}
html:not(.touch) nav[with-subtitle] > a:hover {
background: #713738
}
nav[with-subtitle] > a > span {
color: #fff !important;
z-index: 2
}
nav[with-subtitle] > a span.dir {
flex: 0 0 auto
}
nav[with-subtitle] > a span.dir:after, nav[with-subtitle] > a span.dir:before {
color: #000 !important
}
nav[with-subtitle] > a span.label {
flex: 2 0 auto;
font-size: 37px;
text-align: center
}
@media(min-width:768px)and (max-width:1200px) {
nav[with-subtitle] > a span.label {
font-size: 25px
}
}
@media(max-width:767px) {
nav[with-subtitle] > a span.label {
font-size: 20px
}
}
html:not(.touch) nav[with-subtitle] > a:hover:before {
transform: scaleY(1.1)
}
html:not(.touch) nav[with-subtitle] > a:hover span.dir:after, html:not(.touch) nav[with-subtitle] > a:hover span.dir:before {
color: #000 !important
}
comp-tabs {
display: block
}
comp-tabs[constrained] {
margin: 0 auto;
max-width: 560px;
padding: 0 0 4px
}
comp-tabs[constrained=wide] {
max-width: 901px
}
@media(min-width:768px) {
comp-tabs {
display: flex
}
}
comp-tabs > * {
flex: 1;
margin: 2px 0
}
@media(max-width:767px) {
comp-tabs > * {
box-sizing: border-box;
display: block;
width: 100%
}
}
@media(min-width:768px) {
comp-tabs > * {
margin: 0 2px
}
comp-tabs > :first-child {
margin-left: 0
}
comp-tabs > :last-child {
margin-right: 0
}
}
form:not(.gsc-search-box)[constrained] {
margin: 0 auto;
max-width: 560px;
padding: 3.6603221083vw 20px
}
form:not(.gsc-search-box)[constrained] .heading-2, form:not(.gsc-search-box)[constrained] h2, form:not(.gsc-search-box)[constrained] sudo-h2 {
font-size: 48px;
font-weight: 100;
text-align: center
}
comp-press form:not(.gsc-search-box)[constrained] comp-container.none:not(.loading):after, form:not(.gsc-search-box)[constrained] .heading-3, form:not(.gsc-search-box)[constrained] comp-press comp-container.none:not(.loading):after, form:not(.gsc-search-box)[constrained] h3, form:not(.gsc-search-box)[constrained] sudo-h3 {
font-size: 38px;
font-weight: 100;
margin-top: 7.3206442167vw;
text-align: center
}
form:not(.gsc-search-box)[constrained] > p {
font-size: 24px;
text-align: center
}
form:not(.gsc-search-box)[constrained=wide] {
max-width: 901px
}
form:not(.gsc-search-box)[type*=Calc] {
background: #f2f2f2;
padding: 0
}
form:not(.gsc-search-box)[type*=Calc] > header {
padding: 20px 30px
}
@media(min-width:768px) {
form:not(.gsc-search-box)[type*=Calc] > header {
padding: 20px 88px
}
}
form:not(.gsc-search-box)[type*=Calc] > header h4, form:not(.gsc-search-box)[type*=Calc] > header p {
font-size: 18px;
margin: 0;
padding: 0
}
form:not(.gsc-search-box)[type*=Calc] > footer {
font-size: 22px
}
form:not(.gsc-search-box)[type*=Calc] > footer:not([split]) {
padding: 20px 30px
}
@media(min-width:768px) {
form:not(.gsc-search-box)[type*=Calc] > footer:not([split]) {
padding: 20px 88px
}
}
form:not(.gsc-search-box)[type*=Calc] > footer[split] {
padding-bottom: 3.57vw
}
form:not(.gsc-search-box)[type*=Calc] > footer .result {
font-weight: 700
}
form:not(.gsc-search-box)[type*=Calc] > footer h4 {
font-weight: 400;
text-align: center;
text-transform: uppercase
}
form:not(.gsc-search-box)[type*=Calc] > footer > h4 {
margin: 3.57vw 0
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col {
background-image: linear-gradient(90deg,#fff,#fff);
border-bottom: 1px solid #fff
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .results-row + .results-row {
margin-top: 30px
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col:last-child {
border-bottom: 0;
text-align: center
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col:last-child .results-row {
display: inline-block
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col:last-child .results-row i {
top: 50%;
transform: translateY(-50%)
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col:last-child .results-row .calculation {
background: #484848;
color: #fff;
display: inline-block;
font-size: 34px;
line-height: 1;
padding: 10px 15px
}
comp-container[hero] form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col header > .label, form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col comp-container[hero] header > .label, form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col inner-content > .label {
font-size: 18px;
margin-bottom: 20px;
text-align: center
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .label {
display: block
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .results-row {
padding-left: 50px;
position: relative
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .results-row i {
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 36px;
font-style: normal;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 40px
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .results-row .calculation {
color: #6f87a6;
font-family: industry,sans-serif;
font-weight: 100
}
form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .results-row .calculation, form:not(.gsc-search-box)[type*=Calc] > footer > comp-two-col .results-row .label {
font-size: 18px;
line-height: 1.5
}
form:not(.gsc-search-box)[type*=Calc] > .row {
padding: 20px 30px
}
@media(min-width:768px) {
form:not(.gsc-search-box)[type*=Calc] > .row {
display: flex;
padding: 0 68px
}
form:not(.gsc-search-box)[type*=Calc] > .row > * {
flex: 1;
padding: 20px
}
}
form:not(.gsc-search-box)[type*=Calc] > .row, form:not(.gsc-search-box)[type*=Calc] > header {
border-bottom: 1px solid #fff
}
form:not(.gsc-search-box)[type*=Calc] .input-field:before {
padding: 0 6px;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
form:not(.gsc-search-box)[type*=Calc] .percent:before {
content: "%";
left: 100%
}
form:not(.gsc-search-box)[type*=Calc] .currency:before {
content: "$";
right: 100%
}
form:not(.gsc-search-box) .input-field + div:not(:first-child), form:not(.gsc-search-box) .input-field:not(:first-child) {
margin-top: 3rem
}
form:not(.gsc-search-box) > div:not(.input-field) .label {
display: block;
font-size: .8em;
margin-bottom: 10px;
margin-top: -20px
}
form:not(.gsc-search-box) .input-field {
color: #6f87a6
}
form:not(.gsc-search-box) .input-field input.valid, form:not(.gsc-search-box) .input-field input:focus.valid, form:not(.gsc-search-box) .input-field input:focus:not([readonly]) {
box-shadow: none
}
form:not(.gsc-search-box) .input-field label {
font-size: 22px;
left: 0;
top: .8rem
}
form:not(.gsc-search-box) .input-field label.active {
font-size: 12px;
transform: translateY(-140%)
}
form:not(.gsc-search-box) .input-field [type=checkbox] + label {
margin: 0 !important
}
@media(min-width:620px) {
form:not(.gsc-search-box) .range-field-container {
display: flex
}
}
form:not(.gsc-search-box) .range-field-container > * {
display: block;
flex-grow: 1
}
@media(max-width:619px) {
form:not(.gsc-search-box) .range-field-container > * {
text-align: center
}
}
form:not(.gsc-search-box) .range-field-container label {
flex-grow: 0;
flex-shrink: 0
}
@media(min-width:620px) {
form:not(.gsc-search-box) .range-field-container label {
width: 33%
}
}
form:not(.gsc-search-box) .range-field-container .result {
flex-grow: 0;
flex-shrink: 0
}
@media(min-width:620px) {
form:not(.gsc-search-box) .range-field-container .result {
width: 17%
}
}
form:not(.gsc-search-box) .range-field-container .result span {
color: #6f87a6
}
@media(min-width:620px) {
form:not(.gsc-search-box) .range-field-container .range-field {
margin-left: 50px;
margin-right: 50px
}
}
form:not(.gsc-search-box) .range-field-container input {
width: 100%
}
form:not(.gsc-search-box) .range-field-container .result, form:not(.gsc-search-box) .range-field-container label {
color: #484848;
font-family: industry,sans-serif;
font-size: 18px;
font-weight: 100
}
form:not(.gsc-search-box) .range-field-container .thumb {
transition: opacity .2s
}
form:not(.gsc-search-box) .range-field-container :not(:hover) .thumb {
opacity: 0
}
form:not(.gsc-search-box) .errors {
padding: 0 14px
}
form:not(.gsc-search-box) .errors p {
color: red;
margin: 0
}
/*
form:not(.gsc-search-box) .errors p:before {
content: "·";
display: inline-block;
font-size: 30px;
line-height: 14px;
margin-right: 6px;
vertical-align: middle
}
*/
form:not(.gsc-search-box) .errors + footer {
margin-top: 20px
}
form:not(.gsc-search-box) [type=checkbox] + label {
font-size: 16px;
height: auto;
line-height: 20px;
margin: 15px 0;
min-height: 40px;
padding-left: 45px
}
form:not(.gsc-search-box) [type=checkbox].filled-in:checked + label:before {
left: 6px;
top: 5px
}
form:not(.gsc-search-box) [type=checkbox].filled-in + label:after {
border-radius: 100%;
height: 30px !important;
width: 30px !important
}
form:not(.gsc-search-box) [location-check] section {
max-height: 600px;
overflow: hidden;
transition: max-height .25s
}
form:not(.gsc-search-box) [location-check] .errors p {
margin-bottom: 20px
}
form:not(.gsc-search-box) [location-check] [type=checkbox]:not(:checked) ~ section {
max-height: 0
}
form:not(.gsc-search-box) [location-check] [international], form:not(.gsc-search-box) [location-check] [national], form:not(.gsc-search-box) [location-check][region=international] [specific] {
display: none
}
form:not(.gsc-search-box) [location-check][region=international] [international], form:not(.gsc-search-box) [location-check][region=national] [national] {
display: block
}
form:not(.gsc-search-box) [type=checkbox] + label, form:not(.gsc-search-box) input, form:not(.gsc-search-box) select, form:not(.gsc-search-box) textarea {
}
form:not(.gsc-search-box) select {
box-sizing: border-box;
display: block;
width: 100%
}
form:not(.gsc-search-box) [type=tel] {
display: flex
}
form:not(.gsc-search-box) [type=tel] > input:last-child {
margin-left: 10px;
max-width: 80px
}
form:not(.gsc-search-box) .dealer {
border: solid #aaa;
border-width: 0 0 1px;
margin-bottom: 20px
}
form:not(.gsc-search-box) .dealer[dealer-selector] > header:not(.expanded) + section {
max-height: 0;
padding-bottom: 0;
padding-top: 0
}
form:not(.gsc-search-box) .dealer[dealer-selector] > section {
box-sizing: border-box;
max-height: 500px;
overflow: hidden;
transition: all .25s
}
form:not(.gsc-search-box) .dealer > header {
background: #efefef;
box-sizing: border-box;
display: block;
font-size: 18px;
overflow: hidden;
padding: 5px 40px 5px 10px;
position: relative;
text-overflow: ellipsis;
white-space: nowrap
}
form:not(.gsc-search-box) .dealer > header:not(textarea) {
height: 43px
}
form:not(.gsc-search-box) .dealer > header:after, form:not(.gsc-search-box) .dealer > header:before {
background: #000;
content: "";
height: 2px;
margin-top: -1px;
position: absolute;
right: 14px;
top: 50%;
transition: transform .2s;
width: 11px
}
form:not(.gsc-search-box) .dealer > header:not(.expanded):after {
transform: rotate(-90deg)
}
form:not(.gsc-search-box) .dealer > section {
border-color: #efefef;
border-style: solid;
border-width: 0 1px;
padding: 20px
}
form:not(.gsc-search-box) .dealer > section > [region] {
align-items: center;
display: flex;
margin-bottom: 20px
}
form:not(.gsc-search-box) .dealer > section > [region] label {
color: #6f87a6;
flex-basis: 110px;
font-size: 18px;
max-width: 110px
}
form:not(.gsc-search-box) .dealer > section > [region] select {
background-color: transparent !important;
margin-bottom: 0 !important
}
form:not(.gsc-search-box) .dealer > section > [specific] {
margin-bottom: 20px;
position: relative
}
form:not(.gsc-search-box) .dealer > section > [specific] [use-location] {
background: transparent;
color: #6f87a6;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
padding: 5px 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 35px
}
form:not(.gsc-search-box) .dealer > section > [specific] [use-location]:after {
margin-left: 18px;
vertical-align: middle
}
form:not(.gsc-search-box) .dealer > section > [specific] input {
box-sizing: border-box;
margin-bottom: 0 !important;
padding-right: 35px
}
form:not(.gsc-search-box) .dealer > section ul {
max-height: 360px;
overflow: auto
}
form:not(.gsc-search-box) .dealer > section li {
border-top: 1px solid rgba(151,151,151,.2);
cursor: pointer;
padding: 20px 0
}
form:not(.gsc-search-box) .dealer > section li * {
cursor: pointer
}
form:not(.gsc-search-box) .dealer > section li:first-child {
margin-top: 20px
}
form:not(.gsc-search-box) .dealer > section li.selected [name] {
font-weight: 700
}
form:not(.gsc-search-box) .dealer > section li label {
display: block;
font-size: 18px
}
form:not(.gsc-search-box) .dealer > section li [name] {
color: #6f87a6
}
form:not(.gsc-search-box) .dealer > section li [address] {
color: #979797
}
form:not(.gsc-search-box) footer {
padding-bottom: 20px;
text-align: center
}
form:not(.gsc-search-box) footer input[type=submit] {
max-width: 100%;
min-width: 210px
}
form:not(.gsc-search-box) footer p {
margin: 20px auto
}
form:not(.gsc-search-box).loading:not(#request-quote) > * {
display: none !important
}
form:not(.gsc-search-box).loading:not(#request-quote):before {
content: "Loading...";
display: block;
margin-bottom: 10px;
text-align: center
}
form:not(.gsc-search-box) .thankyou-message {
border: 2px solid #d7d7d7;
border-radius: 10px;
margin-bottom: 20px;
max-width: 674px;
padding: 2.196193265vw;
text-align: center
}
form:not(.gsc-search-box) .thankyou-message p {
text-align: center
}
form:not(.gsc-search-box) .thankyou-message h2 {
margin: 0
}
.swiper-wp8-horizontal {
touch-action: pan-y
}
.swiper-wp8-vertical {
touch-action: pan-x
}
.swiper-button-next, .swiper-button-prev {
background-color: rgba(34,37,51,.35);
color: #fff;
cursor: pointer;
font-size: 16px;
height: 4.39238653vw;
line-height: 4.39238653vw;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
transition: background-color .25s;
width: 4.0263543192vw;
z-index: 10
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
cursor: auto;
display: none;
opacity: .35;
pointer-events: none
}
@media(max-width:767px) {
.swiper-button-next, .swiper-button-prev {
display: none
}
}
html:not(.touch) .swiper-button-next:hover, html:not(.touch) .swiper-button-prev:hover {
background-color: #713738
}
.swiper-button-prev {
left: 0;
right: auto
}
.swiper-button-next {
left: auto;
right: 0
}
.swiper-pagination {
position: absolute;
text-align: center;
transform: translateZ(0);
transition: .3s;
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 22px;
left: 0;
width: 100%
}
@media(max-width:767px) {
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 56px
}
}
.swiper-pagination-bullet {
background: transparent;
border: 2px solid #888;
border-radius: 100%;
display: inline-block;
height: 14px;
width: 14px
}
.swiper-pagination-bullet:first-child:last-child {
display: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
background: #888;
box-shadow: 0 0 50px rgba(0,0,0,.5)
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px
}
body {
left: 0;
overflow-x: hidden;
position: relative;
transition: left .4s ease
}
body.push-left, body.push-right {
-webkit-overflow-scrolling: none;
overflow: hidden
}
body.push-left {
left: 250px
}
@media(min-width:300px) {
body.push-left {
left: 275px
}
}
@media(min-width:325px) {
body.push-left {
left: 300px
}
}
@media(min-width:350px) {
body.push-left {
left: 325px
}
}
@media(min-width:375px) {
body.push-left {
left: 350px
}
}
@media(min-width:400px) {
body.push-left {
left: 375px
}
}
@media(min-width:425px) {
body.push-left {
left: 400px
}
}
@media(min-width:450px) {
body.push-left {
left: 425px
}
}
@media(min-width:475px) {
body.push-left {
left: 450px
}
}
@media(min-width:500px) {
body.push-left {
left: 475px
}
}
@media(min-width:525px) {
body.push-left {
left: 500px
}
}
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 250px
}
@media(min-width:300px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 275px
}
}
@media(min-width:325px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 300px
}
}
@media(min-width:350px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 325px
}
}
@media(min-width:375px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 350px
}
}
@media(min-width:400px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 375px
}
}
@media(min-width:425px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 400px
}
}
@media(min-width:450px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 425px
}
}
@media(min-width:475px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 450px
}
}
@media(min-width:500px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 475px
}
}
@media(min-width:525px) {
.nav-fixed body.push-left .fixed .page-nav-inner, .nav-fixed body.push-left > nav {
left: 500px
}
}
body.push-right {
left: -250px
}
@media(min-width:300px) {
body.push-right {
left: -275px
}
}
@media(min-width:325px) {
body.push-right {
left: -300px
}
}
@media(min-width:350px) {
body.push-right {
left: -325px
}
}
@media(min-width:375px) {
body.push-right {
left: -350px
}
}
@media(min-width:400px) {
body.push-right {
left: -375px
}
}
@media(min-width:425px) {
body.push-right {
left: -400px
}
}
@media(min-width:450px) {
body.push-right {
left: -425px
}
}
@media(min-width:475px) {
body.push-right {
left: -450px
}
}
@media(min-width:500px) {
body.push-right {
left: -475px
}
}
@media(min-width:525px) {
body.push-right {
left: -500px
}
}
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -250px
}
@media(min-width:300px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -275px
}
}
@media(min-width:325px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -300px
}
}
@media(min-width:350px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -325px
}
}
@media(min-width:375px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -350px
}
}
@media(min-width:400px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -375px
}
}
@media(min-width:425px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -400px
}
}
@media(min-width:450px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -425px
}
}
@media(min-width:475px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -450px
}
}
@media(min-width:500px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -475px
}
}
@media(min-width:525px) {
.nav-fixed body.push-right .fixed .page-nav-inner, .nav-fixed body.push-right > nav {
left: -500px
}
}
.nav-fixed body.push-right.off-canvas-full-screen .fixed .page-nav-inner, .nav-fixed body.push-right.off-canvas-full-screen > nav, body.push-right.off-canvas-full-screen {
left: -100%
}
div.off-canvas {
-webkit-overflow-scrolling: touch;
background: #fff;
box-shadow: 0 0 7px rgba(0,0,0,.18);
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
transition: all .4s ease;
width: 250px;
z-index: 1000
}
div.off-canvas.right {
right: -250px
}
@media(min-width:300px) {
div.off-canvas.right {
right: -275px;
width: 275px
}
}
@media(min-width:325px) {
div.off-canvas.right {
right: -300px;
width: 300px
}
}
@media(min-width:350px) {
div.off-canvas.right {
right: -325px;
width: 325px
}
}
@media(min-width:375px) {
div.off-canvas.right {
right: -350px;
width: 350px
}
}
@media(min-width:400px) {
div.off-canvas.right {
right: -375px;
width: 375px
}
}
@media(min-width:425px) {
div.off-canvas.right {
right: -400px;
width: 400px
}
}
@media(min-width:450px) {
div.off-canvas.right {
right: -425px;
width: 425px
}
}
@media(min-width:475px) {
div.off-canvas.right {
right: -450px;
width: 450px
}
}
@media(min-width:500px) {
div.off-canvas.right {
right: -475px;
width: 475px
}
}
@media(min-width:525px) {
div.off-canvas.right {
right: -500px;
width: 500px
}
}
div.off-canvas.right.full-screen {
right: -100%;
width: 100%
}
div.off-canvas.right.slide-open {
right: 0
}
div.off-canvas.left {
left: -250px
}
@media(min-width:300px) {
div.off-canvas.left {
left: -275px;
width: 275px
}
}
@media(min-width:325px) {
div.off-canvas.left {
left: -300px;
width: 300px
}
}
@media(min-width:350px) {
div.off-canvas.left {
left: -325px;
width: 325px
}
}
@media(min-width:375px) {
div.off-canvas.left {
left: -350px;
width: 350px
}
}
@media(min-width:400px) {
div.off-canvas.left {
left: -375px;
width: 375px
}
}
@media(min-width:425px) {
div.off-canvas.left {
left: -400px;
width: 400px
}
}
@media(min-width:450px) {
div.off-canvas.left {
left: -425px;
width: 425px
}
}
@media(min-width:475px) {
div.off-canvas.left {
left: -450px;
width: 450px
}
}
@media(min-width:500px) {
div.off-canvas.left {
left: -475px;
width: 475px
}
}
@media(min-width:525px) {
div.off-canvas.left {
left: -500px;
width: 500px
}
}
div.off-canvas.left.slide-open {
left: 0
}
div.off-canvas > * {
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
transition: all .4s ease;
width: 100%
}
div.off-canvas.reverse > .in, div.off-canvas > .out {
transform: translateX(-100%)
}
div.off-canvas.reverse > .out, div.off-canvas > .in {
transform: translateX(100%)
}
div.off-canvas header {
display: flex
}
div.off-canvas header > * {
background-color: #6f87a6;
border: 0;
color: #fff;
flex: 1;
height: 68px;
line-height: 68px;
margin: 0;
padding: 0
}
div.off-canvas header > button {
background: #6f87a6 url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
border-right: 1px solid rgba(255,255,255,.25);
flex: 0 0 68px;
width: 68px
}
div.off-canvas header > button:hover {
background-size: 20px
}
div.off-canvas header > h1 {
overflow: hidden;
padding-left: 25px;
text-overflow: ellipsis;
white-space: nowrap
}
div.off-canvas header > .back {
cursor: pointer
}
div.off-canvas header > .back:before {
background: url(../png/chevron-thin-left.png) no-repeat 50%;
background-size: contain;
content: "";
display: inline-block;
height: 22px;
margin-right: 38.4px;
width: 11px
}
div.off-canvas header > .back, div.off-canvas header > button {
transition: background-color .5s
}
html:not(.touch) div.off-canvas header > .back:hover, html:not(.touch) div.off-canvas header > button:hover {
background-color: #43556c
}
comp-container[hero] div.off-canvas header, div.off-canvas comp-container[hero] header, div.off-canvas inner-content {
margin: 0 auto;
max-width: 1014px;
padding: 10%;
width: 90%
}
comp-container[hero] div.off-canvas header .images .image, div.off-canvas comp-container[hero] header .images .image, div.off-canvas inner-content .images .image {
display: inline-block;
margin: 0 20px 20px 0;
vertical-align: top;
width: 240px
}
[engine] comp-specs > div comp-container[hero] div.off-canvas header .images .image li > strong, [engine] comp-specs > div div.off-canvas comp-container[hero] header .images .image li > strong, [engine] comp-specs > div div.off-canvas inner-content .images .image li > strong, [specs] comp-specs[type=cabConfigurations] comp-container[hero] div.off-canvas header .images .image strong, [specs] comp-specs[type=cabConfigurations] div.off-canvas comp-container[hero] header .images .image strong, [specs] comp-specs[type=cabConfigurations] div.off-canvas inner-content .images .image strong, article table.specs tbody comp-container[hero] div.off-canvas header .images .image td:not([colspan]):first-of-type, article table.specs tbody div.off-canvas comp-container[hero] header .images .image td:not([colspan]):first-of-type, article table.specs tbody div.off-canvas inner-content .images .image td:not([colspan]):first-of-type, article table.specs thead comp-container[hero] div.off-canvas header .images .image th, article table.specs thead div.off-canvas comp-container[hero] header .images .image th, article table.specs thead div.off-canvas inner-content .images .image th, comp-container[hero] div.off-canvas header .images .image [engine] comp-specs > div li > strong, comp-container[hero] div.off-canvas header .images .image [specs] comp-specs[type=cabConfigurations] strong, comp-container[hero] div.off-canvas header .images .image article table.specs tbody td:not([colspan]):first-of-type, comp-container[hero] div.off-canvas header .images .image article table.specs thead th, comp-container[hero] div.off-canvas header .images .image comp-truck-hero > .specs > div li > strong, comp-container[hero] div.off-canvas header .images .image comp-truck-hero comp-specs > div li > strong, comp-container[hero] div.off-canvas header .images .image h5, comp-truck-hero > .specs > div comp-container[hero] div.off-canvas header .images .image li > strong, comp-truck-hero > .specs > div div.off-canvas comp-container[hero] header .images .image li > strong, comp-truck-hero > .specs > div div.off-canvas inner-content .images .image li > strong, comp-truck-hero comp-specs > div comp-container[hero] div.off-canvas header .images .image li > strong, comp-truck-hero comp-specs > div div.off-canvas comp-container[hero] header .images .image li > strong, comp-truck-hero comp-specs > div div.off-canvas inner-content .images .image li > strong, div.off-canvas comp-container[hero] header .images .image [engine] comp-specs > div li > strong, div.off-canvas comp-container[hero] header .images .image [specs] comp-specs[type=cabConfigurations] strong, div.off-canvas comp-container[hero] header .images .image article table.specs tbody td:not([colspan]):first-of-type, div.off-canvas comp-container[hero] header .images .image article table.specs thead th, div.off-canvas comp-container[hero] header .images .image comp-truck-hero > .specs > div li > strong, div.off-canvas comp-container[hero] header .images .image comp-truck-hero comp-specs > div li > strong, div.off-canvas comp-container[hero] header .images .image h5, div.off-canvas inner-content .images .image [engine] comp-specs > div li > strong, div.off-canvas inner-content .images .image [specs] comp-specs[type=cabConfigurations] strong, div.off-canvas inner-content .images .image article table.specs tbody td:not([colspan]):first-of-type, div.off-canvas inner-content .images .image article table.specs thead th, div.off-canvas inner-content .images .image comp-truck-hero > .specs > div li > strong, div.off-canvas inner-content .images .image comp-truck-hero comp-specs > div li > strong, div.off-canvas inner-content .images .image h5 {
display: block;
line-height: 1;
margin: 0;
padding: 5px 0;
text-transform: none
}
comp-container[hero] div.off-canvas header .images .image a, div.off-canvas comp-container[hero] header .images .image a, div.off-canvas inner-content .images .image a {
display: block
}
div.off-canvas-cover {
background: transparent;
bottom: 0;
height: 100% !important;
left: 0 !important;
position: absolute;
right: 0;
top: 0 !important;
transition: all .4s ease;
width: 100% !important;
z-index: 13
}
div.off-canvas-cover.show {
background: rgba(0,0,0,.8)
}
body > .find-dealer .loading:not(form), body > .find-dealer .location-fields.loading-location:before, body > .find-dealer .route-fields.loading-location:before {
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: .25s;
animation-duration: .25s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: loading;
animation-name: loading;
text-align: center
}
body > .site-menu h1, body > .trucks-menu h1 {
font-size: 27.84px
}
body > .site-menu h2, body > .trucks-menu h2 {
font-size: 19.2px;
font-weight: 400
}
body > .site-menu a, body > .trucks-menu a {
background: linear-gradient(#e1e1e1,#e1e1e1) center 1.09em no-repeat;
background-position: bottom;
background-size: 90% 1px;
color: #484848;
cursor: pointer;
display: block;
font-family: industry,sans-serif;
font-size: 26px;
font-weight: 100;
margin-bottom: -1px;
padding: 20px 5%;
position: relative;
text-decoration: none;
transition: all .25s ease-in-out
}
html:not(.touch) body > .site-menu a:hover, html:not(.touch) body > .trucks-menu a:hover {
background-size: 100% 100%;
color: #713738;
text-decoration: none
}
body > .site-menu a[index]:before, body > .trucks-menu a[index]:before {
opacity: .5;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%)
}
body > .site-menu a span, body > .trucks-menu a span {
display: block
}
body > .site-menu a span.image, body > .trucks-menu a span.image {
background: no-repeat 50%;
background-size: contain;
padding-bottom: 28.8%
}
body > .site-menu .secondary, body > .trucks-menu .secondary {
margin-top: 20px
}
body > .site-menu .secondary a, body > .trucks-menu .secondary a {
background-size: 90% 0;
font-size: 18px;
padding: 10px 5%
}
body > .find-dealer h1 {
font-size: 27.84px
}
body > .find-dealer h2 {
font-size: 19.2px;
font-weight: 400
}
body > .find-dealer div.map {
height: 200px
}
@media(min-height:768px) {
body > .find-dealer div.map {
height: 300px
}
}
body > .find-dealer button {
line-height: normal
}
body > .find-dealer button.option {
background: transparent;
background: linear-gradient(#e1e1e1,#e1e1e1) center 1.09em no-repeat;
background-position: bottom;
background-size: 90% 1px;
border: 0;
color: #444;
display: block;
font-size: 23px;
margin: -1px auto;
padding: 12px 22px;
position: relative;
text-align: left;
text-decoration: none;
transition: all .25s ease-in-out;
width: 100%
}
@media(max-width:380px) {
body > .find-dealer button.option {
font-size: 17px
}
}
html:not(.touch) body > .find-dealer button.option:hover {
background-size: 100% 100%;
color: #444
}
body > .find-dealer button.option:before {
color: #6f87a6;
display: inline-block;
font-size: 38px;
height: 50px;
line-height: 50px;
margin-right: 34px;
vertical-align: middle;
width: 30px
}
body > .find-dealer button.option:not(.geo):after {
opacity: .5;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%)
}
body > .find-dealer a.button, body > .find-dealer button {
text-decoration: none
}
body > .find-dealer a.button.primary, body > .find-dealer button.primary {
word-wrap: normal;
background: #fff linear-gradient(#e1e1e1,#e1e1e1) bottom no-repeat;
background-size: 90% 0;
border: 1px solid #85bac8;
color: #6f87a6;
display: block;
font-size: 24px;
line-height: inherit;
margin: 10px auto;
padding: 0 10px;
text-align: center;
transition: all .25s ease-in-out;
width: 65.6%
}
html:not(.touch) body > .find-dealer a.button.primary:hover, html:not(.touch) body > .find-dealer button.primary:hover {
background-size: 100% 100%;
color: #444
}
body > .find-dealer button.filters-toggle, body > .find-dealer button.highlight-off {
background: #484848;
border: 0;
color: #fff;
cursor: pointer;
display: block;
padding: 8px 8%;
position: relative;
text-align: left;
width: 100%
}
body > .find-dealer button.filters-toggle:after, body > .find-dealer button.highlight-off:after {
border: 1px solid #fff;
border-radius: 100%;
color: #fff;
font-size: 12px;
height: 24px;
line-height: 24px;
position: absolute;
right: 8%;
text-align: center;
top: 50%;
transform: translateY(-50%);
transition: all .25s ease-in-out;
width: 24px
}
body > .find-dealer button.filters-toggle.active:after, body > .find-dealer button.highlight-off.active:after {
background-color: #6f87a6
}
body > .find-dealer .location-fields, body > .find-dealer .route-fields {
position: relative
}
body > .find-dealer .location-fields.loading-location input, body > .find-dealer .route-fields.loading-location input {
visibility: hidden
}
body > .find-dealer .location-fields.loading-location:before, body > .find-dealer .route-fields.loading-location:before {
content: "Loading...";
left: 0;
position: absolute;
top: 0;
width: 100%
}
body > .find-dealer .location-fields .fallback-label, body > .find-dealer .route-fields .fallback-label {
box-sizing: border-box;
color: #713738;
cursor: pointer;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 16px;
text-align: center;
transition: all .25s
}
body > .find-dealer .location-fields.fallback .fallback-label, body > .find-dealer .route-fields.fallback .fallback-label {
max-height: 200px;
opacity: 1
}
body > .find-dealer .filters-info {
background: #393939;
color: #fff;
padding: 25px
}
@media(min-width:530px) {
body > .find-dealer .filters-info > div {
display: flex
}
}
body > .find-dealer .filters-info > div:not(:last-child) {
margin-bottom: 15px
}
body > .find-dealer .filters-info > div > * {
line-height: 1.5
}
body > .find-dealer .filters-info > div > h4 {
color: #fff;
flex-grow: 0;
flex-shrink: 0;
margin: 0 20px 0 0;
width: 26%
}
body > .find-dealer .filters-info > div > div {
color: rgba(255,255,255,.5);
flex-grow: 1;
max-width: 70%
}
body > .find-dealer .filters-info > div > div a {
box-shadow: 0 1px 0 rgba(255,255,255,.25);
color: #fff;
transition: all .25s
}
html:not(.touch) body > .find-dealer .filters-info > div > div a:hover {
box-shadow: 0 1px 0 rgba(255,255,255,.5);
color: #fff !important
}
body > .find-dealer .filters {
background: #e1e1e1;
font-size: 0
}
body > .find-dealer .filters > .filter {
background: linear-gradient(#8fa1b9,#8fa1b9) bottom no-repeat;
background-size: 90% 0;
border: 1px solid #fff;
box-sizing: content-box;
color: #6f87a6;
cursor: pointer;
display: inline-block;
font-size: 0;
margin: 0 -1px -1px 0;
overflow: hidden;
padding: 0 0 15%;
position: relative;
transition: all .25s ease-in-out;
width: calc(25% - 1px)
}
body > .find-dealer .filters > .filter > span {
box-sizing: border-box;
font-size: 14.52px;
left: 0;
line-height: 1.5;
padding: 10px;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%
}
@media(max-width:430px) {
body > .find-dealer .filters > .filter > span {
font-size: 9px
}
}
html:not(.touch) body > .find-dealer .filters > .filter:hover {
background-size: 100% 100%;
color: #fff
}
body > .find-dealer .filters > .filter.selected {
background-color: #6f87a6;
background-size: 90% 0;
color: #fff
}
body > .find-dealer .filters > .filter.selected:before {
background-color: transparent
}
body > .find-dealer .input-alert {
background: #713738;
box-sizing: border-box;
color: #fff;
margin: 10px auto;
padding: 10px;
text-align: center;
width: 94%
}
body > .find-dealer > div > .list {
padding-top: 2px
}
[engine] body > comp-specs.find-dealer > div > li.list > strong, [specs] comp-specs[type=cabConfigurations] body > .find-dealer > div > .list > strong, article table.specs tbody body > .find-dealer > div > .list > td:not([colspan]):first-of-type, article table.specs thead body > .find-dealer > div > .list > th, body > .find-dealer > div > .list > h5, comp-truck-hero body > comp-specs.find-dealer > div > li.list > strong {
border-bottom: 1px solid #d7d7d7;
font-size: 14px;
letter-spacing: 2px;
margin: 0;
padding: 16px 26px
}
body > .find-dealer > div > .list.error {
color: #713738;
text-align: center
}
[engine] body > comp-specs.find-dealer > div > li.list.error > strong, [specs] comp-specs[type=cabConfigurations] body > .find-dealer > div > .list.error > strong, article table.specs tbody body > .find-dealer > div > .list.error > td:not([colspan]):first-of-type, article table.specs thead body > .find-dealer > div > .list.error > th, body > .find-dealer > div > .list.error > h5, comp-truck-hero body > comp-specs.find-dealer > div > li.list.error > strong {
margin-bottom: 10px
}
body > .find-dealer h2.group {
color: #484848;
font-size: 24px;
margin: 0 0 22px;
padding-bottom: 16px;
text-align: center;
text-transform: uppercase
}
body > .find-dealer h2.group:not(:first-child) {
margin-top: 60px
}
body > .find-dealer h2.group:before {
background: url(../png/map-pin.png) no-repeat 0;
background-size: contain;
content: "";
display: inline-block;
height: 18px;
width: 18px
}
body > .find-dealer h2.group.freightliner_dealers:before {
background-image: url(../png/map-pin-red.png)
}
body > .find-dealer .no-results {
text-align: center
}
body > .find-dealer .location {
border-bottom: 1px solid #e1e1e1;
display: flex;
margin: 0 auto 7%;
padding-bottom: 7%;
width: 90%
}
body > .find-dealer .location > .content {
flex: 1
}
body > .find-dealer .location > .actions {
flex: 0 0 68px;
text-align: center;
width: 68px
}
body > .find-dealer .location > .actions > * {
background: none;
border: 0;
color: #484848;
display: block;
font-size: 10px;
font-weight: 400 !important;
letter-spacing: normal;
margin: 0 0 10px;
padding: 0;
text-align: center;
text-decoration: none;
width: 100%
}
body > .find-dealer .location > .actions > * > span {
background: #e1e1e1 linear-gradient(#8fa1b9,#8fa1b9) bottom no-repeat;
background-size: 100% 0;
border-radius: 45px;
display: block;
height: 45px;
margin: 0 auto;
position: relative;
transition: all .25s ease-in-out;
width: 45px
}
body > .find-dealer .location > .actions > * > span:before {
color: #fff;
display: block;
font-size: 26px;
height: 36px;
left: 50%;
line-height: 36px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 36px
}
html:not(.touch) body > .find-dealer .location > .actions > :hover > span {
background-size: 100% 100%
}
body > .find-dealer .location > .actions > .open > span {
background: #63b978 linear-gradient(#8fa1b9,#8fa1b9) bottom no-repeat;
background-size: 100% 0
}
body > .find-dealer .location h2 {
color: #484848;
cursor: pointer;
margin-top: 0
}
body > .find-dealer .location comp-press comp-container.none:not(.loading):after, body > .find-dealer .location h3, body > .find-dealer .location h4, comp-press body > .find-dealer .location comp-container.none:not(.loading):after {
margin-left: 34px
}
body > .find-dealer .location a, body > .find-dealer .section a.phone {
text-decoration: none
}
body > .find-dealer .location a comp-press comp-container.none:not(.loading):after, body > .find-dealer .location a h3, body > .find-dealer .section a.phone comp-press comp-container.none:not(.loading):after, body > .find-dealer .section a.phone h3, comp-press body > .find-dealer .location a comp-container.none:not(.loading):after, comp-press body > .find-dealer .section a.phone comp-container.none:not(.loading):after {
color: #6f87a6;
font-size: 17.28px;
position: relative;
transform: translateZ(0)
}
body > .find-dealer .location a h3:before, body > .find-dealer .section a.phone h3:before {
font-size: 22px;
height: 20px;
left: -34px;
position: absolute;
top: -2px;
width: 20px
}
body > .find-dealer .section {
margin: 0 auto;
padding: 8% 0;
width: 90%
}
body > .find-dealer .section + .section {
background: linear-gradient(#c7cdd4,#c7cdd4) top no-repeat;
background-size: 60% 1px
}
body > .find-dealer .section.loading {
background-size: 0
}
body > .find-dealer .section.center {
text-align: center
}
body > .find-dealer .section strong {
color: #000
}
body > .find-dealer .section h2 {
margin-bottom: 6px
}
body > .find-dealer .section h2:first-of-type {
margin-top: 0
}
body > .find-dealer .section a.phone comp-press comp-container.none:not(.loading):after, body > .find-dealer .section a.phone h3, comp-press body > .find-dealer .section a.phone comp-container.none:not(.loading):after {
display: inline-block;
margin: 0
}
body > .find-dealer .section .expandible {
cursor: pointer
}
body > .find-dealer .section .expandible > div {
display: inline-block;
vertical-align: top
}
html:not(.touch) body > .find-dealer .section .expandible:hover {
color: #000
}
body > .find-dealer .section .expandible .default:after {
border-color: #3b3b3b transparent;
border-style: solid;
border-width: 4px 4px 0;
content: "";
display: inline-block;
height: 0;
margin: 11px 0 0 3px;
right: 0;
top: 0;
vertical-align: top;
width: 0
}
body > .find-dealer .section .expandible.detail .default, body > .find-dealer .section .expandible:not(.detail) .extended {
display: none
}
@-webkit-keyframes loading {
0% {
transform: scale(1)
}
to {
transform: scale(1.2)
}
}
.page-nav-holder:not(.empty) {
height: 73px
}
@media(max-width:767px) {
.page-nav-holder {
display: none
}
}
.page-nav-inner {
background: #fff;
box-shadow: 0 1px 0 transparent;
left: 0;
padding: 15px 0;
position: relative;
top: 0;
transition: all .4s;
width: 100%;
z-index: 11
}
.empty > .page-nav-inner {
padding-bottom: 0;
padding-top: 0
}
.fixed .page-nav-inner {
background: rgba(255,255,255,.9);
box-shadow: 0 1px 0 rgba(0,0,0,.25);
padding: 0;
position: fixed;
top: 90px
}
.page-nav-inner > button.configure, .page-nav-inner > img {
font-size: 17px;
position: absolute;
right: 2.9282576867vw;
top: 50%;
transform: translateY(-50%);
width: 20.7906295754vw
}
@media(max-width:970px) {
.page-nav-inner > button.configure, .page-nav-inner > img {
font-size: 10px
}
}
.fixed .page-nav-inner > button.configure, .fixed .page-nav-inner > img {
bottom: 0;
font-size: 10px;
height: 100%;
right: 0;
top: 0;
transform: translateY(0);
width: 14.6412884334vw
}
@media(max-width:1000px) {
.fixed .page-nav-inner > button.configure, .fixed .page-nav-inner > img {
width: 146px
}
}
.fixed .page-nav-inner > button.configure.configure, .fixed .page-nav-inner > img.configure {
background-position: 50%;
color: transparent;
overflow: hidden
}
.page-nav-inner > button.configure {
padding-bottom: 9px;
padding-top: 9px
}
@media(max-width:1490px) {
.page-nav-inner > button.configure {
letter-spacing: .2em
}
}
@media(max-width:1370px) {
.page-nav-inner > button.configure {
background-position: 8px;
background-size: 46px auto;
padding-left: 62px
}
}
@media(max-width:1060px) {
.page-nav-inner > button.configure {
font-size: 7px !important;
letter-spacing: .1em
}
}
.page-nav-inner > img {
height: auto;
max-width: 170px
}
.fixed .page-nav-inner > img {
height: 80%;
right: 2.6811859444vw;
top: 10%;
width: auto
}
#pillar-nav {
line-height: 1;
padding: 0 26.6471449488vw 0 8.4919472914vw;
width: 100%
}
.fixed #pillar-nav {
padding-left: 2.6811859444vw;
padding-right: 2.6811859444vw
}
@media(max-width:767px) {
#pillar-nav {
display: none
}
}
#pillar-nav button {
background: transparent;
color: #3b3b3b;
display: inline-block;
font-size: 14px;
letter-spacing: .15em;
margin: 0 15px;
padding: 16px 0;
vertical-align: middle
}
@media(max-width:1174px) {
#pillar-nav button {
font-size: 10px
}
}
@media(max-width:930px) {
#pillar-nav button {
margin: 0 8px
}
}
@media(max-width:790px) {
#pillar-nav button {
margin: 0 6px
}
}
.fixed #pillar-nav button {
font-size: 10px;
padding: 10px 0;
text-transform: uppercase
}
@media(max-width:870px) {
.fixed #pillar-nav button {
margin: 0 15px
}
}
#pillar-nav button:first-child {
margin-left: 0
}
#pillar-nav button.active {
box-shadow: inset 0 -3px 0 #6f87a6;
color: #6f87a6
}
html:not(.touch) #pillar-nav button:hover {
color: #6f87a6
}
comp-applications:not([inline]), comp-card-list:not([inline]), comp-card:not([inline]), comp-container:not([inline]), comp-container[hero] header:not([inline]), comp-footer-actions:not([inline]), comp-image:not([inline]), comp-press:not([inline]), comp-resources:not([inline]), comp-revealer:not([inline]), comp-social:not([inline]), comp-swipe-card:not([inline]), comp-truck-hero:not([inline]), inner-content:not([inline]) {
display: block
}
comp-background {
background: #707070 no-repeat top;
background-size: cover;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
@media(max-width:767px) {
comp-background > span {
display: block
}
}
comp-background iframe {
border: none;
left: 50%;
max-width: none;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 0
}
comp-background > .overlay {
background: transparent;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
comp-background video {
min-height: 100%;
min-width: 100%
}
@media(max-width:767px) {
comp-background video {
display: none
}
}
campaign-group > campaign-hero, comp-container {
padding: 7.14vw 10vw;
position: relative
}
campaign-group > campaign-hero[constrained], comp-container[constrained] {
box-sizing: content-box;
margin: 0 auto;
max-width: 560px;
padding-left: 20px;
padding-right: 20px
}
campaign-group > campaign-hero[constrained] + [constrained], comp-container[constrained] + [constrained] {
padding-top: 0
}
campaign-group > campaign-hero[constrained=wide], comp-container[constrained=wide] {
max-width: 901px
}
campaign-group > campaign-hero[constrained=wider], comp-container[constrained=wider] {
max-width: 1251px
}
campaign-group > campaign-hero comp-background, campaign-group > campaign-hero inner-content, comp-container[hero] header, comp-container comp-background, comp-container inner-content {
transition: all 1s ease
}
comp-container {
overflow: hidden;
z-index: 0
}
comp-container[padd=small], comp-container[padd=Small] {
padding-bottom: 3.57vw;
padding-top: 3.57vw
}
comp-container[padd=large], comp-container[padd=Large] {
padding-bottom: 14.28vw;
padding-top: 14.28vw
}
comp-container[padd=none], comp-container[padd=None] {
padding-bottom: 0;
padding-top: 0
}
comp-container[padd-side=small], comp-container[padd-side=Small] {
padding-left: 2.5vw;
padding-right: 2.5vw
}
comp-container[padd-side=large], comp-container[padd-side=Large] {
padding-left: 20vw;
padding-right: 20vw
}
comp-container[padd-side=none], comp-container[padd-side=None] {
padding-left: 0;
padding-right: 0
}
comp-container[padd=full], comp-container[padd=Full] {
min-height: 100vh
}
comp-container[withaside] {
margin-left: auto;
margin-right: auto;
max-width: 1063px;
padding-left: 0;
padding-right: 0;
width: 90%
}
@media(min-width:768px) {
comp-container[withaside] {
display: flex
}
comp-container[withaside] > * {
flex: 1
}
comp-container[hero] comp-container[withaside] header, comp-container[withaside] comp-container[hero] header, comp-container[withaside] inner-content {
margin-right: 62px
}
comp-container[withaside] aside {
flex: .3;
width: 312px
}
}
comp-container[withaside] aside {
background: #f7f7f7;
padding: 45px
}
[engine] comp-specs > div comp-container[withaside] aside li > strong, [specs] comp-specs[type=cabConfigurations] comp-container[withaside] aside strong, article table.specs tbody comp-container[withaside] aside td:not([colspan]):first-of-type, article table.specs thead comp-container[withaside] aside th, comp-container[withaside] aside .heading-1, comp-container[withaside] aside .heading-2, comp-container[withaside] aside .heading-3, comp-container[withaside] aside .heading-4, comp-container[withaside] aside .heading-5, comp-container[withaside] aside .heading-6, comp-container[withaside] aside [engine] comp-specs > div li > strong, comp-container[withaside] aside [specs] comp-specs[type=cabConfigurations] strong, comp-container[withaside] aside article table.specs tbody td:not([colspan]):first-of-type, comp-container[withaside] aside article table.specs thead th, comp-container[withaside] aside comp-press comp-container.none:not(.loading):after, comp-container[withaside] aside comp-truck-hero > .specs > div li > strong, comp-container[withaside] aside comp-truck-hero comp-specs > div li > strong, comp-container[withaside] aside h1, comp-container[withaside] aside h2, comp-container[withaside] aside h3, comp-container[withaside] aside h4, comp-container[withaside] aside h5, comp-container[withaside] aside h6, comp-container[withaside] aside sudo-h1, comp-container[withaside] aside sudo-h2, comp-container[withaside] aside sudo-h3, comp-container[withaside] aside sudo-h4, comp-container[withaside] aside sudo-h5, comp-container[withaside] aside sudo-h6, comp-press comp-container[withaside] aside comp-container.none:not(.loading):after, comp-truck-hero > .specs > div comp-container[withaside] aside li > strong, comp-truck-hero comp-specs > div comp-container[withaside] aside li > strong {
margin-bottom: 5px
}
[engine] comp-specs > div comp-container[withaside] aside li > strong:not(:first-child), [specs] comp-specs[type=cabConfigurations] comp-container[withaside] aside strong:not(:first-child), article table.specs tbody comp-container[withaside] aside td:not(:first-child):not([colspan]):first-of-type, article table.specs thead comp-container[withaside] aside th:not(:first-child), comp-container[withaside] aside .heading-1:not(:first-child), comp-container[withaside] aside .heading-2:not(:first-child), comp-container[withaside] aside .heading-3:not(:first-child), comp-container[withaside] aside .heading-4:not(:first-child), comp-container[withaside] aside .heading-5:not(:first-child), comp-container[withaside] aside .heading-6:not(:first-child), comp-container[withaside] aside [engine] comp-specs > div li > strong:not(:first-child), comp-container[withaside] aside [specs] comp-specs[type=cabConfigurations] strong:not(:first-child), comp-container[withaside] aside article table.specs tbody td:not(:first-child):not([colspan]):first-of-type, comp-container[withaside] aside article table.specs thead th:not(:first-child), comp-container[withaside] aside comp-press comp-container.none:not(:first-child):not(.loading):after, comp-container[withaside] aside comp-truck-hero > .specs > div li > strong:not(:first-child), comp-container[withaside] aside comp-truck-hero comp-specs > div li > strong:not(:first-child), comp-container[withaside] aside h1:not(:first-child), comp-container[withaside] aside h2:not(:first-child), comp-container[withaside] aside h3:not(:first-child), comp-container[withaside] aside h4:not(:first-child), comp-container[withaside] aside h5:not(:first-child), comp-container[withaside] aside h6:not(:first-child), comp-container[withaside] aside sudo-h1:not(:first-child), comp-container[withaside] aside sudo-h2:not(:first-child), comp-container[withaside] aside sudo-h3:not(:first-child), comp-container[withaside] aside sudo-h4:not(:first-child), comp-container[withaside] aside sudo-h5:not(:first-child), comp-container[withaside] aside sudo-h6:not(:first-child), comp-press comp-container[withaside] aside comp-container.none:not(:first-child):not(.loading):after, comp-truck-hero > .specs > div comp-container[withaside] aside li > strong:not(:first-child), comp-truck-hero comp-specs > div comp-container[withaside] aside li > strong:not(:first-child) {
margin-top: 20px
}
comp-container[hero] {
text-align: center
}
comp-container[hero]:not([slides]) {
padding-bottom: 31.3323572474vw;
padding-top: 10.6881405564vw
}
@media(min-width:930px) {
comp-container[hero] header, comp-container[hero] inner-content {
width: 49.4875549048vw
}
}
comp-container[hero][slides] {
padding: 0 !important
}
@media(min-width:930px) {
comp-container[hero][slides] header, comp-container[hero][slides] inner-content {
width: 100%
}
}
comp-container[hero][slides] header .slick-slide, comp-container[hero][slides] inner-content .slick-slide {
padding-bottom: 14.6412884334vw;
padding-top: 7.3206442167vw
}
@media(max-width:767px) {
comp-container[hero][slides] header .slick-slide, comp-container[hero][slides] inner-content .slick-slide {
padding-top: 50px
}
}
comp-container[hero][slides] header .slick-slide > video, comp-container[hero][slides] inner-content .slick-slide > video {
height: auto;
left: 50%;
min-height: 100%;
min-width: 100%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto
}
comp-container[hero][slides] header .slick-slide > header > p, comp-container[hero][slides] inner-content .slick-slide > header > p {
padding-left: 20px;
padding-right: 20px
}
comp-container[hero][slides]:not([slides=loaded]) header, comp-container[hero][slides]:not([slides=loaded]) inner-content {
padding-bottom: 14.6412884334vw;
padding-top: 7.3206442167vw
}
comp-container[hero] comp-background {
background-position: bottom
}
comp-container[hero] h1, comp-container[hero] h2 {
font-size: 30px;
font-weight: 400;
text-transform: uppercase
}
@media(min-width:930px) {
comp-container[hero] h1, comp-container[hero] h2 {
font-size: 2.9282576867vw
}
}
comp-container[hero] p {
font-family: industry,sans-serif;
font-size: 20px;
line-height: 1.5
}
comp-container[hero] header > a, comp-container[hero] inner-content > a {
margin: 5px
}
comp-container[hero][vocation] {
padding-bottom: 20vw;
padding-top: 20vw;
}
comp-container[hero][innovation] {
padding-bottom: 10.2489019034vw;
padding-top: 3.6603221083vw
}
comp-container[hero][innovation] h4 {
font-size: 16px;
font-weight: 300;
letter-spacing: .3em;
margin-bottom: 10px;
text-transform: uppercase
}
comp-container[hero][innovation] .heading-2, comp-container[hero][innovation] h2 {
font-size: 40px;
font-weight: 600;
text-transform: none
}
comp-container[hero][innovation] > video {
left: 50%;
min-height: 100%;
min-width: 100%;
top: 50%;
transform: translate(-50%,-50%)
}
@media(max-width:767px) {
comp-container[hero][innovation] > video {
display: none
}
comp-container[hero][innovation] {
padding: 34px 20px
}
comp-container[hero][innovation] h4 {
font-size: 14px
}
comp-container[hero][innovation] .heading-2, comp-container[hero][innovation] h2 {
font-size: 38px
}
comp-container[hero][innovation] comp-background:not(:first-of-type) {
display: none
}
}
@media(min-width:768px) {
comp-container[hero][innovation] comp-background:not(:last-of-type) {
display: none
}
}
comp-container[hero][innovation][electric] {
background: #484848
}
comp-container[hero][innovation][electric] a, comp-container[hero][innovation][electric] h4 {
color: #75c1e3
}
comp-container[hero][hero=bold] {
text-shadow: 0 0 1em rgba(0,0,0,.5)
}
comp-container[hero][hero=bold]:not([slides]), comp-container[hero][hero=bold][slides]:not([slides=loaded]) header, comp-container[hero][hero=bold][slides]:not([slides=loaded]) inner-content {
padding-bottom: 225px;
padding-top: 75px
}
@media(min-width:1366px) {
comp-container[hero][hero=bold]:not([slides]), comp-container[hero][hero=bold][slides]:not([slides=loaded]) header, comp-container[hero][hero=bold][slides]:not([slides=loaded]) inner-content {
padding-bottom: 16.4714494876vw;
padding-top: 5.4904831625vw
}
}
comp-container[hero][hero=bold] h1, comp-container[hero][hero=bold] h2 {
font-size: 43px;
margin-left: auto;
margin-right: auto;
max-width: 515px
}
@media(min-width:1366px) {
comp-container[hero][hero=bold] h1, comp-container[hero][hero=bold] h2 {
font-size: 3.1478770132vw;
max-width: 37.701317716vw
}
}
comp-container[hero][hero=bold] h1 strong, comp-container[hero][hero=bold] h2 strong {
font-size: 76px
}
@media(min-width:1366px) {
comp-container[hero][hero=bold] h1 strong, comp-container[hero][hero=bold] h2 strong {
font-size: 5.5636896047vw
}
}
comp-container[hero][hero=bold] p {
font-weight: 700;
margin: 90px auto 20px;
max-width: 524px
}
@media(min-width:1366px) {
comp-container[hero][hero=bold] p {
font-size: 1.4641288433vw;
margin-bottom: 1.4641288433vw;
margin-top: 6.588579795vw;
max-width: 38.3601756955vw
}
}
comp-container[hero][hero=bold] comp-background:after {
background-color: rgba(0,0,0,.25);
content: ""
}
comp-container[detroit-hero] {
padding-bottom: 16vw;
padding-left: 5.0512445095vw;
padding-top: 8vw
}
@media(max-width:767px) {
comp-container[detroit-hero] {
padding-bottom: 8vw
}
comp-container[detroit-hero] comp-background {
display: none
}
}
@media(min-width:768px) {
comp-container[detroit-hero] comp-background {
background-position: 100%;
background-size: 73.2064421669vw auto
}
comp-container[detroit-hero] comp-container[hero] header, comp-container[detroit-hero] inner-content, comp-container[hero] comp-container[detroit-hero] header {
max-width: 29.2825768668vw
}
}
@media(max-width:767px) {
comp-container[detroit-hero] comp-container[hero] header[text-light], comp-container[detroit-hero] comp-container[hero] header[text-light] h1, comp-container[detroit-hero] comp-container[hero] header[text-light] h2, comp-container[detroit-hero] comp-container[hero] header[text-light] h6, comp-container[detroit-hero] inner-content[text-light], comp-container[detroit-hero] inner-content[text-light] h1, comp-container[detroit-hero] inner-content[text-light] h2, comp-container[detroit-hero] inner-content[text-light] h6, comp-container[hero] comp-container[detroit-hero] header[text-light], comp-container[hero] comp-container[detroit-hero] header[text-light] h1, comp-container[hero] comp-container[detroit-hero] header[text-light] h2, comp-container[hero] comp-container[detroit-hero] header[text-light] h6 {
color: #3b3b3b
}
}
comp-container[detroit-hero] h1, comp-container[detroit-hero] h2 {
font-size: 40px;
font-weight: 100
}
@media(min-width:768px) {
comp-container[detroit-hero] h1, comp-container[detroit-hero] h2 {
font-size: 2.9282576867vw
}
}
@media(min-width:1366px) {
comp-container[detroit-hero] p {
font-size: 1.1713030747vw
}
}
@media(min-width:768px) {
comp-container[detroit-hero] p {
max-width: 22.9868228404vw
}
}
comp-container[detroit-hero] p:last-child {
margin-bottom: 0
}
comp-container[engine-hero] {
text-align: right
}
@media(max-width:767px) {
comp-container[engine-hero] {
padding-bottom: 65vw
}
comp-container[engine-hero] comp-background {
background-position: bottom;
background-size: contain
}
}
@media(min-width:768px) {
comp-container[engine-hero] comp-background {
background-position: 0 100%;
background-size: 65.8857979502vw auto
}
}
comp-container[engine-hero] comp-container[hero] header, comp-container[engine-hero] inner-content, comp-container[hero] comp-container[engine-hero] header {
display: inline-block;
text-align: left
}
@media(min-width:768px) {
comp-container[engine-hero] comp-container[hero] header, comp-container[engine-hero] inner-content, comp-container[hero] comp-container[engine-hero] header {
max-width: 29.2825768668vw
}
}
comp-container[engine-hero] h1, comp-container[engine-hero] h2 {
font-size: 40px;
font-weight: 100
}
@media(min-width:768px) {
comp-container[engine-hero] h1, comp-container[engine-hero] h2 {
font-size: 2.9282576867vw
}
}
@media(min-width:1366px) {
comp-container[engine-hero] p {
font-size: 1.1713030747vw
}
}
@media(min-width:768px) {
comp-container[engine-hero] p {
max-width: 22.9868228404vw
}
}
comp-container[disclaimer] {
font-size: 12px
}
comp-container[parent-page] {
padding: 7.5% 3.3vw
}
comp-container[hero] comp-container[parent-page] header, comp-container[parent-page] comp-container[hero] header, comp-container[parent-page] inner-content {
color: #3b3b3b;
margin: 0 auto;
max-width: 1260px
}
comp-container[hero] comp-container[parent-page] header > *, comp-container[parent-page] comp-container[hero] header > *, comp-container[parent-page] inner-content > * {
max-width: 500px
}
comp-container[hero] comp-container[parent-page] header > :first-child, comp-container[parent-page] comp-container[hero] header > :first-child, comp-container[parent-page] inner-content > :first-child {
margin-top: 0
}
comp-container[hero] comp-container[parent-page] header > :last-child, comp-container[parent-page] comp-container[hero] header > :last-child, comp-container[parent-page] inner-content > :last-child {
margin-bottom: 0
}
comp-container[hero] comp-container[parent-page] header[alignment=Center] > *, comp-container[parent-page] comp-container[hero] header[alignment=Center] > *, comp-container[parent-page] inner-content[alignment=Center] > * {
margin-left: auto;
margin-right: auto
}
comp-container[hero] comp-container[parent-page] header[alignment=Right] > *, comp-container[parent-page] comp-container[hero] header[alignment=Right] > *, comp-container[parent-page] inner-content[alignment=Right] > * {
margin-left: auto;
margin-right: 0
}
comp-container[hero] comp-container[parent-page] header h6, comp-container[parent-page] comp-container[hero] header h6, comp-container[parent-page] inner-content h6 {
font-size: 20px;
font-weight: 100;
letter-spacing: 4px;
line-height: 34px;
text-transform: uppercase
}
@media(min-width:768px) {
comp-container[hero] comp-container[parent-page] header[text-light], comp-container[parent-page] comp-container[hero] header[text-light], comp-container[parent-page] inner-content[text-light] {
color: #e6e6e6
}
comp-container[hero] comp-container[parent-page] header[text-light] h1, comp-container[hero] comp-container[parent-page] header[text-light] h6, comp-container[parent-page] comp-container[hero] header[text-light] h1, comp-container[parent-page] comp-container[hero] header[text-light] h6, comp-container[parent-page] inner-content[text-light] h1, comp-container[parent-page] inner-content[text-light] h6 {
color: #fff
}
}
@media(max-width:767px) {
comp-container[hero] comp-container[parent-page] header[text-light] h1, comp-container[parent-page] comp-container[hero] header[text-light] h1, comp-container[parent-page] inner-content[text-light] h1 {
color: #3b3b3b
}
}
comp-container[parent-page] comp-cover {
background: linear-gradient(90deg,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,0));
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 75%
}
comp-container[parent-page] comp-cover[text-light] {
background: linear-gradient(90deg,rgba(0,0,0,.8) 0,transparent)
}
comp-container[parent-page] comp-background {
background-position: 100% 0
}
@media(max-width:767px) {
comp-container[parent-page] comp-background, comp-container[parent-page] comp-cover {
display: none
}
}
comp-container[specs] {
padding-left: 20px;
padding-right: 20px
}
comp-container[hero] comp-container[specs] header, comp-container[specs] comp-container[hero] header, comp-container[specs] inner-content {
margin: 0 auto;
max-width: 900px
}
comp-container[hero] comp-container[specs] header > img, comp-container[specs] comp-container[hero] header > img, comp-container[specs] inner-content > img {
margin-bottom: 50px
}
comp-container[rotate] {
background: #f6f6f6;
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
@media(min-width:768px) {
comp-container[rotate] {
height: 45.6vw
}
}
@media(max-width:767px) {
comp-container[rotate] {
padding-bottom: 60vw;
text-align: center
}
}
comp-container[rotate]:after {
background: url(../png/360-exterior.png) no-repeat top;
color: #bababa;
font-size: 11px;
text-align: center
}
html:not(.touch) comp-container[rotate]:after {
content: "CLICK & DRAG"
}
html.touch comp-container[rotate]:after {
content: "TOUCH & DRAG"
}
@media(min-width:768px) {
comp-container[rotate]:after {
background-size: contain;
padding-top: 60px;
position: absolute;
right: 7vw;
top: 7vw;
width: 85px
}
}
@media(max-width:767px) {
comp-container[rotate]:after {
background-size: 60px auto;
display: block;
margin-top: -15px;
padding-top: 36px
}
}
comp-container[hero] comp-container[rotate] header, comp-container[rotate] comp-container[hero] header, comp-container[rotate] inner-content {
max-width: 380px
}
@media(max-width:1000px) {
comp-container[hero] comp-container[rotate] header, comp-container[rotate] comp-container[hero] header, comp-container[rotate] inner-content {
max-width: 285px
}
comp-container[hero] comp-container[rotate] header h1, comp-container[rotate] comp-container[hero] header h1, comp-container[rotate] inner-content h1 {
font-size: 33px
}
}
comp-container[rotate] comp-background {
left: auto;
right: 0;
transition: none
}
@media(min-width:768px) {
comp-container[rotate] comp-background {
width: 74vw
}
}
@media(max-width:767px) {
comp-container[rotate] comp-background {
bottom: 0;
height: 60vw;
top: auto
}
}
comp-container[rotate] comp-background:not(.active) {
opacity: 0
}
comp-container[quote-page] {
padding: 0
}
comp-container[quote-page] + comp-container article div ul li {
line-height: 1.4;
padding-left: 1.3em
}
@media(max-width:767px) {
comp-container[quote-page] + comp-container {
padding-left: 0;
padding-right: 0
}
}
comp-container[quote-page] h1 {
color: #fff;
text-transform: uppercase
}
comp-container[hero] comp-container[quote-page] comp-two-col header, comp-container[quote-page] comp-two-col comp-container[hero] header, comp-container[quote-page] comp-two-col inner-content {
padding: 6.5vw 3.3vw 6.5vw 9.3vw
}
@media(max-width:767px) {
comp-container[hero] comp-container[quote-page] comp-two-col header, comp-container[quote-page] comp-two-col comp-container[hero] header, comp-container[quote-page] comp-two-col inner-content {
background: #fff;
color: #3b3b3b
}
comp-container[hero] comp-container[quote-page] comp-two-col header h1, comp-container[quote-page] comp-two-col comp-container[hero] header h1, comp-container[quote-page] comp-two-col inner-content h1 {
color: #3b3b3b !important
}
}
@media(min-width:768px) {
comp-container[hero] comp-container[quote-page] comp-two-col header:first-of-type, comp-container[quote-page] comp-two-col comp-container[hero] header:first-of-type, comp-container[quote-page] comp-two-col inner-content:first-of-type {
padding-bottom: 12.5vw;
padding-top: 11vw
}
}
@media(max-width:480px) {
comp-container[hero] comp-container[quote-page] comp-two-col header:last-of-type, comp-container[quote-page] comp-two-col comp-container[hero] header:last-of-type, comp-container[quote-page] comp-two-col inner-content:last-of-type {
min-height: 220px
}
}
@media(min-width:481px)and (max-width:767px) {
comp-container[hero] comp-container[quote-page] comp-two-col header:last-of-type, comp-container[quote-page] comp-two-col comp-container[hero] header:last-of-type, comp-container[quote-page] comp-two-col inner-content:last-of-type {
min-height: 420px
}
}
comp-container dealer-card a.icon-link {
display: block;
padding-left: 25px;
position: relative
}
comp-container dealer-card a.icon-link .icon-map-pin:before, comp-container dealer-card a.icon-link .icon-phone:before {
color: #713738;
left: 0;
position: absolute;
top: 10px;
transform: none
}
comp-container dealer-card a.icon-link:hover {
background: unset !important
}
@media(min-width:768px) {
campaign-group > campaign-hero[images="2"] > comp-images > comp-background:first-child, campaign-group > campaign-hero[images="2"] > inner-content > :first-child, comp-container[hero] campaign-group > campaign-hero[images="2"] > header > :first-child {
margin-right: 4px
}
campaign-group > campaign-hero[images="2"] > comp-images > comp-background:last-child, campaign-group > campaign-hero[images="2"] > inner-content > :last-child, comp-container[hero] campaign-group > campaign-hero[images="2"] > header > :last-child {
margin-left: 4px
}
}
campaign-group div[id^=teleport] comp-background {
background-position: 50%;
height: auto;
margin-bottom: 14px;
position: static
}
campaign-group:after {
bottom: 0;
content: "";
left: 0;
right: 0;
top: 0;
z-index: 0
}
campaign-group > * {
z-index: 1
}
campaign-group[dark]:after {
background: #03516b;
bottom: -30vw
}
campaign-group[dark] footer {
color: #fff
}
campaign-group[dark] + [light]:after {
top: -7vw
}
campaign-group[dark][images="1"] > comp-container {
padding-bottom: 60px
}
campaign-group[dark][images="1"] + [light]:after {
top: 20vw
}
campaign-group[dark][images="1"] + [light] > comp-container {
background: #fafafa
}
@media(min-width:768px) {
campaign-group[dark][images="1"] + [light] > comp-container {
padding: 45px
}
}
@media(max-width:767px) {
campaign-group[dark][images="1"] + [light] > comp-container {
padding-top: 0
}
}
campaign-group[dark][images="1"] + [light] > comp-container[constrained=wider] {
max-width: 1161px
}
campaign-group[light]:after {
background: #fafafa
}
campaign-group[split] {
display: flex
}
@media(orientation:portrait) {
campaign-group[split] {
flex-direction: column
}
}
campaign-group[split] > comp-container {
flex: 1;
order: 1;
padding: 0
}
@media(min-width:768px) {
campaign-group[split] > comp-container[position=Left] {
order: 0
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container[position] {
margin-left: 20px;
margin-right: 20px;
margin-top: 30px
}
}
campaign-group[split] > comp-container[position] comp-container[hero] header, campaign-group[split] > comp-container[position] inner-content, comp-container[hero] campaign-group[split] > comp-container[position] header {
background: #03516b;
color: #fff
}
campaign-group[split] > comp-container[position] comp-container[hero] header h2, campaign-group[split] > comp-container[position] comp-container[hero] header h4, campaign-group[split] > comp-container[position] inner-content h2, campaign-group[split] > comp-container[position] inner-content h4, comp-container[hero] campaign-group[split] > comp-container[position] header h2, comp-container[hero] campaign-group[split] > comp-container[position] header h4 {
color: #fff
}
campaign-group[split] > comp-container[position] comp-container[hero] header h4, campaign-group[split] > comp-container[position] inner-content h4, comp-container[hero] campaign-group[split] > comp-container[position] header h4 {
line-height: 1.3
}
@media(min-width:768px) {
campaign-group[split] > comp-container[position] comp-container[hero] header > header, campaign-group[split] > comp-container[position] inner-content > header, comp-container[hero] campaign-group[split] > comp-container[position] header > header {
margin-bottom: -40px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container[position] comp-container[hero] header > header, campaign-group[split] > comp-container[position] inner-content > header, comp-container[hero] campaign-group[split] > comp-container[position] header > header {
margin-bottom: -20px;
margin-left: -40px;
margin-right: -40px
}
}
campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2, campaign-group[split] > comp-container[position] inner-content > header > h2, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2 {
font-size: 14px;
font-weight: 500
}
campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2:after, campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2:before, campaign-group[split] > comp-container[position] inner-content > header > h2:after, campaign-group[split] > comp-container[position] inner-content > header > h2:before, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2:after, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2:before {
background: #9cacc1;
content: "";
flex: 0;
height: 1px;
margin: 20px
}
@media(min-width:768px) {
campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2:after, campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2:before, campaign-group[split] > comp-container[position] inner-content > header > h2:after, campaign-group[split] > comp-container[position] inner-content > header > h2:before, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2:after, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2:before {
flex-basis: 50px;
width: 50px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2:after, campaign-group[split] > comp-container[position] comp-container[hero] header > header > h2:before, campaign-group[split] > comp-container[position] inner-content > header > h2:after, campaign-group[split] > comp-container[position] inner-content > header > h2:before, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2:after, comp-container[hero] campaign-group[split] > comp-container[position] header > header > h2:before {
flex-basis: 30px;
width: 30px
}
}
campaign-group[split] > comp-container[position] h4 > sub {
margin-top: 0
}
@media(min-width:768px) {
campaign-group[split] > comp-container:not([position]) h2 {
font-size: 60px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container:not([position]) h2 {
font-size: 36px;
margin-bottom: 10px
}
}
@media(min-width:768px) {
campaign-group[split] > comp-container:not([position]) h2 + p {
font-size: 24px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container:not([position]) h2 + p {
font-size: 18px
}
}
campaign-group[split] > comp-container:not([position]) h2 + p + h4 {
border-top: 1px solid #e1e1e1
}
@media(min-width:768px) {
campaign-group[split] > comp-container:not([position]) h2 + p + h4 {
padding-top: 50px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container:not([position]) h2 + p + h4 {
padding-top: 40px
}
}
campaign-group[split] > comp-container:not([position]) h4 {
font-size: 24px
}
@media(min-width:768px) {
campaign-group[split] > comp-container:not([position]) h4 {
margin-top: 50px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container:not([position]) h4 {
margin-top: 40px
}
}
campaign-group[split] > comp-container > inner-content a[role=button], comp-container[hero] campaign-group[split] > comp-container > header a[role=button] {
background-color: #03516b;
border-radius: 0;
font-size: 14px;
margin-left: 0;
margin-top: -10px;
min-width: 0
}
@media(min-width:768px) {
campaign-group[split] > comp-container > inner-content, comp-container[hero] campaign-group[split] > comp-container > header {
padding: 50px 70px
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container > inner-content, comp-container[hero] campaign-group[split] > comp-container > header {
padding: 30px
}
}
campaign-group[split] > comp-container dealer-card {
background: #fafafa
}
@media(min-width:768px) {
campaign-group[split] > comp-container dealer-card {
padding: 40px
}
campaign-group[split] > comp-container dealer-card [distance] {
display: flex;
font-weight: 700;
justify-content: space-between
}
campaign-group[split] > comp-container dealer-card [distance]:after {
content: attr(distance);
font-weight: 400;
margin-left: 20px;
white-space: nowrap
}
}
@media(max-width:767px) {
campaign-group[split] > comp-container dealer-card {
padding: 30px
}
}
campaign-group[split] > comp-container dealer-card > p:last-child {
margin-bottom: 0
}
@media(max-width:767px) {
campaign-group[split] > comp-container dealer-card a {
text-decoration: underline
}
}
campaign-group[split] > comp-container dealer-card + a[role=button] {
margin-top: 40px
}
campaign-group[split] > comp-container > comp-background {
background-position: 50%;
background-size: cover;
display: block;
height: auto;
position: static
}
campaign-group[split] > comp-container > comp-background > span {
display: block
}
campaign-group > campaign-hero {
font-family: industry,sans-serif;
font-weight: 300
}
@media(min-width:768px) {
campaign-group > campaign-hero {
padding-bottom: 60px;
padding-top: 60px
}
}
@media(max-width:767px) {
campaign-group > campaign-hero {
padding-bottom: 30px;
padding-top: 30px
}
}
campaign-group > campaign-hero a[role=button] {
background-color: #fff;
color: #000
}
campaign-group > campaign-hero > inner-content, comp-container[hero] campaign-group > campaign-hero > header {
width: auto
}
@media(min-width:768px) {
campaign-group > campaign-hero > inner-content h1, comp-container[hero] campaign-group > campaign-hero > header h1 {
font-size: 80px;
line-height: 78px
}
}
@media(max-width:767px) {
campaign-group > campaign-hero > inner-content h1, comp-container[hero] campaign-group > campaign-hero > header h1 {
font-size: 48px;
line-height: 48px
}
}
campaign-group > campaign-hero > inner-content comp-press comp-container.none:not(.loading):after, campaign-group > campaign-hero > inner-content h3, comp-container[hero] campaign-group > campaign-hero > header comp-press comp-container.none:not(.loading):after, comp-container[hero] campaign-group > campaign-hero > header h3, comp-press campaign-group > campaign-hero > inner-content comp-container.none:not(.loading):after, comp-press comp-container[hero] campaign-group > campaign-hero > header comp-container.none:not(.loading):after {
font-weight: 300
}
@media(min-width:768px) {
campaign-group > campaign-hero > inner-content comp-press comp-container.none:not(.loading):after, campaign-group > campaign-hero > inner-content h3, comp-container[hero] campaign-group > campaign-hero > header comp-press comp-container.none:not(.loading):after, comp-container[hero] campaign-group > campaign-hero > header h3, comp-press campaign-group > campaign-hero > inner-content comp-container.none:not(.loading):after, comp-press comp-container[hero] campaign-group > campaign-hero > header comp-container.none:not(.loading):after {
font-size: 30px
}
}
@media(max-width:767px) {
campaign-group > campaign-hero > inner-content comp-press comp-container.none:not(.loading):after, campaign-group > campaign-hero > inner-content h3, comp-container[hero] campaign-group > campaign-hero > header comp-press comp-container.none:not(.loading):after, comp-container[hero] campaign-group > campaign-hero > header h3, comp-press campaign-group > campaign-hero > inner-content comp-container.none:not(.loading):after, comp-press comp-container[hero] campaign-group > campaign-hero > header comp-container.none:not(.loading):after {
font-size: 24px
}
}
campaign-group > campaign-hero > inner-content p, comp-container[hero] campaign-group > campaign-hero > header p {
font-size: 24px;
line-height: 29px
}
campaign-group > campaign-hero > footer {
line-height: 1;
margin-bottom: 0;
max-width: 782px
}
@media(min-width:768px) {
campaign-group > campaign-hero > footer {
font-size: 30px;
margin-top: 50px;
text-align: center
}
}
@media(max-width:767px) {
campaign-group > campaign-hero > footer {
font-size: 24px;
margin-top: 30px
}
}
campaign-group > campaign-hero > footer p:last-child {
margin-bottom: 0
}
campaign-group > campaign-hero[images="1"] > * {
flex: 1
}
campaign-group > campaign-hero[images="1"] > comp-images > comp-background {
background-position: 50%;
position: static
}
campaign-group > campaign-hero[images="1"] > comp-images > comp-background > span {
display: block
}
campaign-group > campaign-hero[images="1"] p {
max-width: 470px
}
@media(max-width:767px) {
campaign-group > campaign-hero[images="1"] p {
font-size: 24px;
line-height: normal
}
}
campaign-group > campaign-hero[images="1"] + comp-container > inner-content, comp-container[hero] campaign-group > campaign-hero[images="1"] + comp-container > header {
background: #03516b
}
campaign-group > campaign-hero[images="1"] + comp-container > inner-content > [choices], comp-container[hero] campaign-group > campaign-hero[images="1"] + comp-container > header > [choices] {
color: #9cacc1
}
@media(max-width:767px) {
campaign-group > campaign-hero[images="1"] + comp-container > inner-content > [choices], comp-container[hero] campaign-group > campaign-hero[images="1"] + comp-container > header > [choices] {
margin-top: 20px
}
}
campaign-group > campaign-hero[images="1"] + comp-container > inner-content > [choices] > comp-card > h4, comp-container[hero] campaign-group > campaign-hero[images="1"] + comp-container > header > [choices] > comp-card > h4 {
color: #fff
}
@media(min-width:768px) {
campaign-group > campaign-hero[images="1"] + comp-container > inner-content > [choices] > comp-card:after, comp-container[hero] campaign-group > campaign-hero[images="1"] + comp-container > header > [choices] > comp-card:after {
background: #03516b;
color: #fff
}
}
campaign-group > campaign-hero[images="2"] > inner-content > *, comp-container[hero] campaign-group > campaign-hero[images="2"] > header > * {
flex: 1
}
campaign-group > campaign-hero[images="2"] > comp-images > comp-background {
background-position: 50%;
position: static
}
campaign-group > campaign-hero[images="2"] > comp-images > comp-background > span {
display: block
}
campaign-group > campaign-hero[images="2"] + comp-container {
padding-bottom: 0;
padding-top: 0
}
campaign-group > campaign-hero[images="2"] + comp-container > inner-content, comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header {
background: #ededed
}
@media(min-width:768px) {
campaign-group > campaign-hero[images="2"] + comp-container > inner-content, comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header {
padding: 25px
}
}
@media(max-width:767px) {
campaign-group > campaign-hero[images="2"] + comp-container > inner-content, comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header {
padding: 50px 20px
}
}
campaign-group > campaign-hero[images="2"] + comp-container > inner-content > [choices], comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header > [choices] {
color: #6f87a6
}
campaign-group > campaign-hero[images="2"] + comp-container > inner-content > [choices] > comp-card > h4, comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header > [choices] > comp-card > h4 {
color: #03516b
}
campaign-group > campaign-hero[images="2"] + comp-container > inner-content > [choices] > comp-card > h4 sub, comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header > [choices] > comp-card > h4 sub {
color: #03516b;
font-weight: 300;
margin-top: 16px
}
@media(min-width:768px) {
campaign-group > campaign-hero[images="2"] + comp-container > inner-content > [choices] > comp-card:after, comp-container[hero] campaign-group > campaign-hero[images="2"] + comp-container > header > [choices] > comp-card:after {
background: #ededed
}
}
campaign-group > comp-container:not([position]) > inner-content > header h2, comp-container[hero] campaign-group > comp-container:not([position]) > header > header h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 5px
}
@media(min-width:768px) {
campaign-group > comp-container > inner-content > [choices] > *, comp-container[hero] campaign-group > comp-container > header > [choices] > * {
padding: 40px 20px
}
}
campaign-group > comp-container > inner-content > [choices] > comp-card, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card {
flex: 1
}
campaign-group > comp-container > inner-content > [choices] > comp-card > h4, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card > h4 {
font-size: 30px;
font-weight: 500;
margin: 0
}
campaign-group > comp-container > inner-content > [choices] > comp-card > h4 em, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card > h4 em {
font-style: normal
}
campaign-group > comp-container > inner-content > [choices] > comp-card > h4 p, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card > h4 p {
margin-bottom: 0
}
@media(max-width:767px) {
campaign-group > comp-container > inner-content > [choices] > comp-card > h4, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card > h4 {
font-size: 24px
}
campaign-group > comp-container > inner-content > [choices] > comp-card:not(:first-child), comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card:not(:first-child) {
margin-top: 40px;
padding-top: 40px
}
campaign-group > comp-container > inner-content > [choices] > comp-card:not(:first-child):after, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card:not(:first-child):after {
content: "or";
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%,-50%)
}
}
@media(min-width:768px) {
campaign-group > comp-container > inner-content > [choices] > comp-card:not(:first-child), comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card:not(:first-child) {
border-left: 1px solid
}
campaign-group > comp-container > inner-content > [choices] > comp-card:not(:first-child):after, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card:not(:first-child):after {
content: "or";
left: 0;
position: absolute;
top: 50%;
transform: translate(-50%,-50%)
}
}
campaign-group > comp-container > inner-content > [choices] > comp-card sub, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card sub {
font-size: 20px;
line-height: 28px;
margin-top: 10px;
width: 100%
}
@media(max-width:767px) {
campaign-group > comp-container > inner-content > [choices] > comp-card sub, comp-container[hero] campaign-group > comp-container > header > [choices] > comp-card sub {
font-size: 18px
}
}
campaign-group comp-container[column] {
justify-content: space-between
}
@media(min-width:768px) {
campaign-group comp-container[column] {
padding-top: 80px
}
}
@media(max-width:767px) {
campaign-group comp-container[column] {
padding-top: 40px
}
}
campaign-group comp-container[column] > * {
flex: 1
}
campaign-group comp-container[column] h2 {
font-size: 60px;
font-weight: 500
}
@media(max-width:767px) {
campaign-group comp-container[column] h2 {
font-size: 36px
}
}
campaign-group comp-container[column] h4 {
color: #03516b;
font-size: 24px;
margin-bottom: 5px;
text-transform: uppercase
}
@media(max-width:767px) {
campaign-group comp-container[column] h4 {
font-size: 20px
}
}
campaign-group comp-container[column] comp-press comp-container.none:not(.loading):after, campaign-group comp-container[column] h3, comp-press campaign-group comp-container[column] comp-container.none:not(.loading):after {
font-size: 24px;
margin-bottom: 14px
}
campaign-group comp-container[column] p:not(:last-child) {
margin-bottom: 40px
}
campaign-group comp-container[column] comp-container[hero] header > ul li, campaign-group comp-container[column] inner-content > ul li, comp-container[hero] campaign-group comp-container[column] header > ul li {
margin-bottom: 5px
}
campaign-group comp-container[column] p a {
color: #03516b;
text-decoration: underline !important
}
@media(min-width:768px) {
campaign-group comp-container[column] [alignment=left] {
order: 0
}
}
@media(min-width:768px)and (min-width:960px) {
campaign-group comp-container[column] [alignment=left] {
margin-right: 75px
}
campaign-group comp-container[column] [alignment=left] + * {
margin-left: 75px
}
}
@media(min-width:768px)and (max-width:959px) {
campaign-group comp-container[column] [alignment=left] {
margin-right: 10px
}
campaign-group comp-container[column] [alignment=left] + * {
margin-left: 10px
}
}
@media(min-width:768px) {
campaign-group comp-container[column] [alignment=right] {
order: 2
}
}
@media(min-width:768px)and (min-width:960px) {
campaign-group comp-container[column] [alignment=right] {
margin-left: 75px
}
campaign-group comp-container[column] [alignment=right] + * {
margin-right: 75px
}
}
@media(min-width:768px)and (max-width:959px) {
campaign-group comp-container[column] [alignment=right] {
margin-left: 10px
}
campaign-group comp-container[column] [alignment=right] + * {
margin-right: 10px
}
}
campaign-group comp-container[column] form {
background: #fff;
border: 1px solid #e1e1e1
}
campaign-group comp-container[column] form > header h2 {
font-size: 30px;
font-weight: 300
}
@media(min-width:768px) {
campaign-group comp-container[column] form {
border-radius: 8px;
padding: 50px
}
}
@media(max-width:767px) {
campaign-group comp-container[column] form {
margin-bottom: 40px;
margin-left: -20px;
margin-right: -20px;
padding: 50px 20px
}
}
campaign-group comp-container[column] form footer input[type=submit] {
background-color: #03516b;
margin-left: 0;
min-width: 0
}
comp-container[campaign-hero]:not([campaign-hero=simple]) {
padding-bottom: 13.17715959vw
}
comp-container[campaign-hero]:not([campaign-hero=simple]) > inner-content, comp-container[hero] comp-container[campaign-hero]:not([campaign-hero=simple]) > header {
border-top: 3px solid;
padding-top: 5px
}
comp-container[campaign-hero][campaign-hero=simple] > inner-content > div, comp-container[hero] comp-container[campaign-hero][campaign-hero=simple] > header > div {
padding-top: 13.17715959vw
}
comp-container[campaign-hero] > inner-content, comp-container[hero] comp-container[campaign-hero] > header {
max-width: 670px
}
comp-container[campaign-hero] > comp-images {
z-index: 0
}
comp-container[campaign-hero] > comp-images > comp-background {
background-position: 50%;
position: static
}
comp-container[campaign-hero] > comp-images:after {
background-color: rgba(0,0,0,.25);
content: ""
}
comp-container[campaign-hero] > :not(comp-images) {
z-index: 1
}
comp-container[campaign-hero] h1 {
font-size: 30px;
font-weight: 700
}
comp-container[campaign-hero] h1 sup {
font-size: .6em
}
comp-container[campaign-hero] h1 strong {
font-size: 60px
}
comp-container[campaign-section] {
padding: 0
}
comp-container[campaign-section] + :not([campaign-section]) {
margin-top: -3.57vw
}
comp-container[campaign-section] > * {
padding-left: 10vw;
padding-right: 10vw
}
comp-container[campaign-section] > header {
background-color: #6f87a6;
color: #fff;
padding-bottom: 20px;
padding-top: 20px
}
comp-container[campaign-section] > header > h2 {
color: #fff;
font-size: 26px;
font-weight: 700;
margin: 0
}
comp-container[campaign-section] > header > h2 p {
margin: 0
}
@media(max-width:767px) {
comp-container[campaign-section] > inner-content, comp-container[hero] comp-container[campaign-section] > header {
padding-bottom: 7.14vw;
padding-top: 7.14vw
}
}
@media(min-width:768px) {
comp-container[campaign-section] > inner-content, comp-container[hero] comp-container[campaign-section] > header {
padding-bottom: 3.57vw;
padding-top: 3.57vw
}
comp-container[campaign-section] > inner-content[choices] > *, comp-container[hero] comp-container[campaign-section] > header[choices] > * {
padding: 20px 20px 0
}
}
comp-container[campaign-section] > inner-content[choices] > header, comp-container[hero] comp-container[campaign-section] > header[choices] > header {
color: #6f87a6;
flex-basis: 20%;
min-width: 20%
}
@media(min-width:768px) {
comp-container[campaign-section] > inner-content[choices] > header, comp-container[hero] comp-container[campaign-section] > header[choices] > header {
padding-left: 0
}
}
comp-container[campaign-section] > inner-content[choices] > comp-card, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card {
color: #6f87a6
}
@media(max-width:767px) {
comp-container[campaign-section] > inner-content[choices] > comp-card, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card {
border-top: 2px solid;
margin-top: 40px;
padding-top: 40px
}
}
@media(min-width:768px) {
comp-container[campaign-section] > inner-content[choices] > comp-card:not(:last-child), comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card:not(:last-child) {
border-right: 2px solid
}
}
comp-container[campaign-section] > inner-content[choices] > comp-card sub, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card sub {
left: 0;
line-height: 1;
top: 0
}
@media(min-width:768px) {
comp-container[campaign-section] > inner-content[choices] > comp-card sub, comp-container[hero] comp-container[campaign-section] > header[choices] > comp-card sub {
margin-bottom: 10px;
width: 100%
}
comp-container[campaign-section] > inner-content > form > section, comp-container[campaign-section] > inner-content[columns], comp-container[hero] comp-container[campaign-section] > header > form > section, comp-container[hero] comp-container[campaign-section] > header[columns] {
grid-column-gap: 40px;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 40px;
column-gap: 40px
}
comp-container[campaign-section] > inner-content > form > section > *, comp-container[campaign-section] > inner-content[columns] > *, comp-container[hero] comp-container[campaign-section] > header > form > section > *, comp-container[hero] comp-container[campaign-section] > header[columns] > * {
-moz-column-break-inside: avoid;
break-inside: avoid-column
}
}
comp-container[campaign-section] > inner-content > form .errors, comp-container[hero] comp-container[campaign-section] > header > form .errors {
padding: 20px 0
}
comp-container[campaign-section] > inner-content h4, comp-container[hero] comp-container[campaign-section] > header h4 {
color: #6f87a6;
font-weight: 700
}
@media(min-width:768px) {
comp-container[campaign-section] > inner-content a[role=button], comp-container[hero] comp-container[campaign-section] > header a[role=button] {
transform: scale(.75)
}
}
comp-container[campaign-section] .location {
padding-top: 3.57vw
}
comp-container[campaign-section] .location h2 {
max-width: 560px
}
comp-container[campaign-section] .location a > h4 {
color: #6f87a6
}
comp-container[campaign-section] .location a:first-of-type > h4 {
font-size: 26px
}
comp-container[campaign-section] .location + inner-content[choices], comp-container[campaign-section] comp-container[hero] .location + header[choices], comp-container[hero] comp-container[campaign-section] .location + header[choices] {
max-width: 920px
}
comp-container[campaign-section] .location + inner-content[choices] comp-card, comp-container[campaign-section] comp-container[hero] .location + header[choices] comp-card, comp-container[hero] comp-container[campaign-section] .location + header[choices] comp-card {
border: 0;
padding-top: 0
}
@media(max-width:767px) {
comp-container[campaign-section] .location + inner-content[choices] comp-card:first-child, comp-container[campaign-section] comp-container[hero] .location + header[choices] comp-card:first-child, comp-container[hero] comp-container[campaign-section] .location + header[choices] comp-card:first-child {
margin-top: 0
}
}
comp-container[campaign-section] .location + inner-content[choices] comp-card h4, comp-container[campaign-section] comp-container[hero] .location + header[choices] comp-card h4, comp-container[hero] comp-container[campaign-section] .location + header[choices] comp-card h4 {
font-weight: 400;
margin: 0;
white-space: nowrap
}
comp-container[campaign-section] .location + inner-content[choices] comp-card h4 strong, comp-container[campaign-section] comp-container[hero] .location + header[choices] comp-card h4 strong, comp-container[hero] comp-container[campaign-section] .location + header[choices] comp-card h4 strong {
color: #000
}
comp-container[campaign-section] .location + inner-content[choices] comp-card h4 + h4, comp-container[campaign-section] comp-container[hero] .location + header[choices] comp-card h4 + h4, comp-container[hero] comp-container[campaign-section] .location + header[choices] comp-card h4 + h4 {
margin-top: 10px
}
comp-image img {
height: auto;
width: 100%
}
.swiper-wrapper a comp-image img {
height: 450px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: auto
}
comp-container[hero] header, inner-content {
position: relative;
z-index: 1
}
@media(min-width:666px) {
comp-container[hero] header, inner-content {
min-width: 260px
}
}
comp-container[hero] header .heading-1, comp-container[hero] header .heading-2, comp-container[hero] header .heading-3, comp-container[hero] header .heading-4, comp-container[hero] header comp-press comp-container.none:not(.loading):after, comp-container[hero] header h1, comp-container[hero] header h2, comp-container[hero] header h3, comp-container[hero] header h4, comp-container[hero] header sudo-h1, comp-container[hero] header sudo-h2, comp-container[hero] header sudo-h3, comp-container[hero] header sudo-h4, comp-press comp-container[hero] header comp-container.none:not(.loading):after, comp-press inner-content comp-container.none:not(.loading):after, inner-content .heading-1, inner-content .heading-2, inner-content .heading-3, inner-content .heading-4, inner-content comp-press comp-container.none:not(.loading):after, inner-content h1, inner-content h2, inner-content h3, inner-content h4, inner-content sudo-h1, inner-content sudo-h2, inner-content sudo-h3, inner-content sudo-h4 {
margin-bottom: 28px;
margin-top: 0
}
comp-container[hero] header .heading-1 + h6, comp-container[hero] header .heading-2 + h6, comp-container[hero] header .heading-3 + h6, comp-container[hero] header .heading-4 + h6, comp-container[hero] header comp-press comp-container.none:not(.loading):after + h6, comp-container[hero] header h1 + h6, comp-container[hero] header h2 + h6, comp-container[hero] header h3 + h6, comp-container[hero] header h4 + h6, comp-container[hero] header sudo-h1 + h6, comp-container[hero] header sudo-h2 + h6, comp-container[hero] header sudo-h3 + h6, comp-container[hero] header sudo-h4 + h6, comp-press comp-container[hero] header comp-container.none:not(.loading):after + h6, comp-press inner-content comp-container.none:not(.loading):after + h6, inner-content .heading-1 + h6, inner-content .heading-2 + h6, inner-content .heading-3 + h6, inner-content .heading-4 + h6, inner-content comp-press comp-container.none:not(.loading):after + h6, inner-content h1 + h6, inner-content h2 + h6, inner-content h3 + h6, inner-content h4 + h6, inner-content sudo-h1 + h6, inner-content sudo-h2 + h6, inner-content sudo-h3 + h6, inner-content sudo-h4 + h6 {
margin-bottom: 28px;
margin-top: -12px
}
comp-container[hero] header ul.bullet-list li, inner-content ul.bullet-list li {
padding-left: 2.5em;
position: relative
}
comp-container[hero] header ul.bullet-list li:not(:last-of-type), inner-content ul.bullet-list li:not(:last-of-type) {
margin-bottom: 1em
}
comp-container[hero] header ul.bullet-list li:before, inner-content ul.bullet-list li:before {
color: #6f87a6;
content: "• ";
left: 1em;
margin-right: .2em;
position: absolute
}
comp-container[hero] header p:last-of-type, inner-content p:last-of-type {
margin-bottom: 42px
}
comp-container[hero] header[alignment=Left], inner-content[alignment=Left] {
text-align: left
}
comp-container[hero] header[alignment=Center], inner-content[alignment=Center] {
text-align: center
}
@media(min-width:768px) {
comp-container[hero] header[alignment=Right], inner-content[alignment=Right] {
text-align: right
}
}
comp-container[hero] header[text-light], comp-container[hero] header[text-light] .heading-1, comp-container[hero] header[text-light] .heading-2, comp-container[hero] header[text-light] .heading-3, comp-container[hero] header[text-light] .heading-4, comp-container[hero] header[text-light] comp-press comp-container.none:not(.loading):after, comp-container[hero] header[text-light] h1, comp-container[hero] header[text-light] h2, comp-container[hero] header[text-light] h3, comp-container[hero] header[text-light] h4, comp-container[hero] header[text-light] sudo-h1, comp-container[hero] header[text-light] sudo-h2, comp-container[hero] header[text-light] sudo-h3, comp-container[hero] header[text-light] sudo-h4, comp-container[hero] header[text-white], comp-container[hero] header[text-white] .heading-1, comp-container[hero] header[text-white] .heading-2, comp-container[hero] header[text-white] .heading-3, comp-container[hero] header[text-white] .heading-4, comp-container[hero] header[text-white] comp-press comp-container.none:not(.loading):after, comp-container[hero] header[text-white] h1, comp-container[hero] header[text-white] h2, comp-container[hero] header[text-white] h3, comp-container[hero] header[text-white] h4, comp-container[hero] header[text-white] sudo-h1, comp-container[hero] header[text-white] sudo-h2, comp-container[hero] header[text-white] sudo-h3, comp-container[hero] header[text-white] sudo-h4, comp-press comp-container[hero] header[text-light] comp-container.none:not(.loading):after, comp-press comp-container[hero] header[text-white] comp-container.none:not(.loading):after, comp-press inner-content[text-light] comp-container.none:not(.loading):after, comp-press inner-content[text-white] comp-container.none:not(.loading):after, inner-content[text-light], inner-content[text-light] .heading-1, inner-content[text-light] .heading-2, inner-content[text-light] .heading-3, inner-content[text-light] .heading-4, inner-content[text-light] comp-press comp-container.none:not(.loading):after, inner-content[text-light] h1, inner-content[text-light] h2, inner-content[text-light] h3, inner-content[text-light] h4, inner-content[text-light] sudo-h1, inner-content[text-light] sudo-h2, inner-content[text-light] sudo-h3, inner-content[text-light] sudo-h4, inner-content[text-white], inner-content[text-white] .heading-1, inner-content[text-white] .heading-2, inner-content[text-white] .heading-3, inner-content[text-white] .heading-4, inner-content[text-white] comp-press comp-container.none:not(.loading):after, inner-content[text-white] h1, inner-content[text-white] h2, inner-content[text-white] h3, inner-content[text-white] h4, inner-content[text-white] sudo-h1, inner-content[text-white] sudo-h2, inner-content[text-white] sudo-h3, inner-content[text-white] sudo-h4 {
color: #fff
}
comp-container:not([parent-page]) comp-container[hero] header p a:not(.btn), comp-container:not([parent-page]) inner-content p a:not(.btn), comp-container[hero] comp-container:not([parent-page]) header p a:not(.btn) {
background: linear-gradient(#a7a9ac,#a7a9ac) center 1.09em no-repeat;
background-position: bottom;
background-size: 0 1px;
text-decoration: none;
text-shadow: 0 0 #fff,.08em 0 0 #fff,0 0,-.08em 0 0 #fff;
transition: all .25s ease-in-out
}
comp-container:not([parent-page]) comp-container[hero] header p a:not(.btn):hover, comp-container:not([parent-page]) inner-content p a:not(.btn):hover, comp-container[hero] comp-container:not([parent-page]) header p a:not(.btn):hover {
background-size: 100% 1px
}
comp-container[hero] header[slides] .slick-slide, inner-content[slides] .slick-slide {
background-color: rgba(255,255,255,.05);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
min-width: 100vw;
outline: none;
overflow: hidden;
transition: opacity .25s;
width: 100vw
}
comp-container[hero] header[slides] .slick-slide:not(.slick-current), inner-content[slides] .slick-slide:not(.slick-current) {
opacity: .75
}
comp-applications + comp-two-col, comp-card-list + comp-two-col, comp-models + comp-two-col, comp-two-col + comp-two-col {
border-top: 1px solid #f5f5f5
}
@media(min-width:768px) {
comp-two-col {
background: linear-gradient(90deg,#f5f5f5,#f5f5f5) no-repeat top;
background-size: 1px 100%;
display: flex
}
}
@media(max-width:767px) {
comp-two-col comp-container comp-background:only-child {
box-sizing: content-box;
display: block;
padding-bottom: 50%;
position: static
}
}
comp-two-col > * {
flex: 1 100%
}
@media(min-width:768px) {
comp-two-col > * {
max-width: 50%
}
}
@media(max-width:767px) {
comp-two-col > * {
border-top: 1px solid #f5f5f5
}
}
comp-two-col[half] {
background: none
}
comp-two-col[half] h2 {
text-align: left
}
comp-two-col[half] article > div img {
margin-bottom: 55px
}
comp-two-col[half] article > div img:first-of-type {
margin-top: 50px
}
comp-two-col[half] [alignment=Center] > * {
text-align: center
}
@media(min-width:1340px) {
comp-two-col[half] > :first-child, comp-two-col[half] > :last-child {
flex: 1;
max-width: 50%
}
}
@media(min-width:768px) {
comp-two-col[half] > form {
padding-top: 0 !important
}
}
@media(max-width:767px) {
comp-container[hero] comp-two-col[half] header[graphic-container], comp-two-col[half] comp-container[hero] header[graphic-container], comp-two-col[half] inner-content[graphic-container] {
padding: 0 0 75%
}
comp-two-col[half] > * {
border-top: 0
}
comp-two-col[half] > form {
padding: 0 7.2% !important
}
}
comp-two-col[padded] > * {
padding: 10.980966325vw 8.4919472914vw
}
comp-two-col[padded] .btn {
max-width: 300px;
width: auto
}
comp-two-col[single] {
background: none;
justify-content: center
}
comp-two-col[third] {
background: none
}
comp-two-col[third] h2 {
text-align: left
}
@media(min-width:1340px) {
comp-two-col[third] > :first-child {
flex: 2;
max-width: 66%
}
comp-two-col[third] > :last-child {
flex: 1;
max-width: 33%
}
}
@media(min-width:768px) {
comp-two-col[third] > form {
padding-top: 0 !important
}
}
@media(max-width:767px) {
comp-two-col[third] > form {
padding: 0 !important
}
}
comp-two-col h2 {
font-size: 38px;
font-weight: 100;
text-align: center
}
comp-two-col form {
padding: 0 48px
}
comp-two-col .btn {
display: block;
margin: 25px auto 0;
width: 200px
}
comp-two-col[engine] {
margin: 0 auto;
max-width: 1366px;
text-align: center
}
@media(min-width:961px) {
comp-two-col[engine] {
padding: 80px
}
comp-two-col[engine] > :first-child {
margin-right: 40px
}
comp-two-col[engine] > :last-child {
margin-left: 40px
}
}
@media(min-width:768px)and (max-width:960px) {
comp-two-col[engine] {
padding: 80px 20px
}
comp-two-col[engine] > :first-child {
margin-right: 20px
}
comp-two-col[engine] > :last-child {
margin-left: 20px
}
}
comp-press comp-two-col[engine] comp-container.none:not(.loading):after, comp-two-col[engine] comp-press comp-container.none:not(.loading):after, comp-two-col[engine] h3 {
color: #5e5c58;
text-transform: uppercase
}
comp-press comp-two-col[engine] comp-container.none:not(.loading):after strong, comp-two-col[engine] comp-press comp-container.none:not(.loading):after strong, comp-two-col[engine] h3 strong {
color: #94918b
}
@media(max-width:767px) {
comp-container[hero] comp-two-col[engine] comp-press header > comp-container.none:not(.loading):after, comp-container[hero] comp-two-col[engine] header > h3, comp-press comp-container[hero] comp-two-col[engine] header > comp-container.none:not(.loading):after, comp-press comp-two-col[engine] comp-container[hero] header > comp-container.none:not(.loading):after, comp-press comp-two-col[engine] inner-content > comp-container.none:not(.loading):after, comp-two-col[engine] comp-container[hero] comp-press header > comp-container.none:not(.loading):after, comp-two-col[engine] comp-container[hero] header > h3, comp-two-col[engine] comp-press inner-content > comp-container.none:not(.loading):after, comp-two-col[engine] inner-content > h3 {
margin-top: 20px
}
comp-two-col[engine] > :last-child {
margin-bottom: 40px
}
}
@media(min-width:768px) {
comp-two-col[engine] {
background-size: 0 100%
}
}
@media(max-width:767px) {
comp-two-col[engine] > * {
border-top: 0
}
}
comp-two-col[blog] {
background: none !important;
margin: 3.3vw
}
@media(min-width:1366px) {
comp-two-col[blog] {
margin: 45px auto;
max-width: 1260px
}
}
@media(min-width:768px) {
comp-two-col[blog] select {
max-width: 250px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%)
}
}
comp-two-col[blog] > * {
border-top: 0 !important;
position: relative
}
@media(max-width:767px) {
comp-two-col[blog] > * {
margin: 3.3vw
}
}
comp-two-col[blog] + * {
margin-top: 0
}
comp-two-col[build] {
background-image: url(../png/pattern-grid.png),linear-gradient(180deg,#ececec,#e5e5e5);
background-repeat: repeat,repeat;
background-size: auto auto,cover;
justify-content: center;
text-align: center
}
@media(max-width:767px) {
comp-two-col[build] {
display: block
}
}
comp-two-col[build] > comp-container {
border: none;
padding: 7.14vw 4vw
}
comp-two-col[build] h2 {
font-size: 36px
}
comp-two-col[build] p {
margin-left: auto;
margin-right: auto;
max-width: 435px;
text-align: center
}
@media(min-width:768px) {
comp-two-col[build] p {
min-height: 90px
}
}
comp-two-col[build] img, comp-two-col[build] video {
display: block;
margin: auto;
max-width: 100%
}
comp-two-col[build] .btn {
background-position: calc(100% - 24px);
background-repeat: no-repeat;
display: inline-block;
font-size: 16px;
max-width: 100%;
padding-bottom: 14px;
padding-right: 70px;
padding-top: 14px;
width: auto
}
comp-two-col[build] .btn[build] {
background-image: url(../png/icon-build.png);
background-size: 20px 20px
}
comp-two-col[build] .btn[explore] {
background-image: url(../png/icon-360.png);
background-size: 30px 30px
}
comp-two-col[electric] {
background: #000;
color: #fff;
justify-content: center;
text-align: center
}
@media(max-width:767px) {
comp-two-col[electric] {
display: block
}
}
comp-two-col[electric] > comp-container {
border: none;
padding: 7.14vw 4vw
}
comp-two-col[electric] h2 {
color: #75c1e3;
font-size: 36px
}
comp-two-col[electric] p {
margin-left: auto;
margin-right: auto;
max-width: 435px;
text-align: center
}
@media(min-width:768px) {
comp-two-col[electric] p {
min-height: 90px
}
}
comp-two-col[electric] img, comp-two-col[electric] video {
display: block;
margin: auto;
max-width: 100%
}
comp-two-col[electric] .btn {
background-position: calc(100% - 24px);
background-repeat: no-repeat;
display: inline-block;
font-size: 16px;
max-width: 100%;
padding-bottom: 14px;
padding-right: 70px;
padding-top: 14px;
width: auto
}
comp-swipe-card {
overflow: hidden;
position: relative
}
comp-swipe-card.active comp-card:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) comp-background, comp-swipe-card:not(.active) comp-card:not(.swiper-slide-active) comp-background {
background-image: none !important
}
comp-swipe-card > h2 {
color: #888;
font-size: 18px;
font-weight: 100;
left: 8.4919472914vw;
letter-spacing: .15em;
line-height: 2.5;
margin: 0;
max-width: 100%;
position: absolute;
text-transform: uppercase;
top: 5.270863836vw;
transform: translateY(30px);
white-space: nowrap;
z-index: 1
}
@media(min-width:1366px) {
comp-swipe-card > h2 {
font-size: 1.317715959vw
}
}
comp-swipe-card > h2:before {
display: inline-block;
font-size: 2em;
margin-right: .6em;
vertical-align: middle
}
comp-swipe-card > div {
font-size: 0;
white-space: nowrap
}
comp-swipe-card comp-card {
display: inline-block !important;
font-size: 16px;
height: 100vh;
position: relative;
vertical-align: top;
white-space: normal;
width: 100vw
}
comp-press comp-swipe-card comp-card comp-container.none:not(.loading):after, comp-swipe-card comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card comp-card h3 {
font-size: 65.83px;
margin-bottom: 28px
}
@media(min-width:1366px) {
comp-press comp-swipe-card comp-card comp-container.none:not(.loading):after, comp-swipe-card comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card comp-card h3 {
font-size: 4.8191800878vw;
margin-bottom: 2.0497803807vw
}
}
@media(max-width:900px) {
comp-press comp-swipe-card comp-card comp-container.none:not(.loading):after, comp-swipe-card comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card comp-card h3 {
font-size: 7.3144444444vw;
margin-bottom: 3.1111111111vw
}
}
@media(max-height:700px)and (orientation:landscape) {
comp-press comp-swipe-card comp-card comp-container.none:not(.loading):after, comp-swipe-card comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card comp-card h3 {
font-size: 7vh;
margin-bottom: 4vh
}
}
comp-swipe-card comp-card[split] {
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15)
}
comp-swipe-card comp-card p, comp-swipe-card comp-card p:last-of-type {
font-size: 18px;
letter-spacing: 1.5px;
line-height: 1.5;
margin-bottom: 42px
}
@media(min-width:1366px) {
comp-swipe-card comp-card p, comp-swipe-card comp-card p:last-of-type {
font-size: 1.317715959vw;
margin-bottom: 3.074670571vw
}
}
@media(max-height:700px),(max-width:700px) {
comp-swipe-card comp-card p, comp-swipe-card comp-card p:last-of-type {
font-size: 16px;
margin-bottom: 12px
}
}
@media(max-height:700px)and (orientation:landscape) {
comp-swipe-card comp-card p, comp-swipe-card comp-card p:last-of-type {
line-height: 1.2;
margin-bottom: 6vh
}
}
comp-container[hero] comp-swipe-card comp-card > header, comp-swipe-card comp-card > inner-content, comp-swipe-card comp-container[hero] comp-card > header {
margin-top: 30px;
padding: 10.980966325vw 8.4919472914vw
}
@media(max-width:750px)and (orientation:portrait) {
comp-container[hero] comp-swipe-card comp-card > header, comp-swipe-card comp-card > inner-content, comp-swipe-card comp-container[hero] comp-card > header {
padding-top: 20vw
}
}
comp-container[hero] comp-swipe-card comp-card > header > div, comp-swipe-card comp-card > inner-content > div, comp-swipe-card comp-container[hero] comp-card > header > div {
width: 50%
}
@media(max-width:500px) {
comp-swipe-card comp-card p, comp-swipe-card comp-card p:last-of-type {
font-size: 13px
}
comp-swipe-card comp-card .btn {
font-size: 14px
}
comp-swipe-card comp-card[split] > inner-card p {
color: #000
}
}
@media(max-height:500px) {
comp-swipe-card comp-card p, comp-swipe-card comp-card p:last-of-type {
font-size: 13px
}
comp-swipe-card comp-card .btn {
font-size: 14px
}
comp-swipe-card comp-card[split] > inner-card p {
color: #000
}
}
comp-swipe-card comp-card[feature] > comp-background {
background-position: 100% 100%;
background-size: 100% auto
}
comp-swipe-card comp-card[feature] > comp-background:before {
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
width: 100%
}
comp-swipe-card comp-card[feature][text-light] > comp-background:before {
background: linear-gradient(90deg,rgba(0,0,0,.5) 0,transparent 75%)
}
@media(orientation:portrait) {
comp-swipe-card comp-card[feature] > comp-background {
background-size: auto 100%
}
comp-swipe-card comp-card[feature][text-light] > comp-background:before {
background: linear-gradient(180deg,rgba(0,0,0,.25) 0,transparent)
}
comp-container[hero] comp-swipe-card comp-card[feature] > header > div, comp-swipe-card comp-card[feature] > inner-content > div, comp-swipe-card comp-container[hero] comp-card[feature] > header > div {
width: 100%
}
}
comp-swipe-card comp-card[split] > inner-card {
display: flex;
height: 100%;
width: 100%
}
@media(orientation:portrait) {
comp-swipe-card comp-card[split] > inner-card {
flex-direction: column
}
}
comp-swipe-card comp-card[split] > inner-card > comp-container {
flex: 1;
order: 1;
padding: 10.980966325vw 8.4919472914vw
}
comp-container[hero] comp-swipe-card comp-card[split] > inner-card > comp-container > header, comp-swipe-card comp-card[split] > inner-card > comp-container > inner-content, comp-swipe-card comp-container[hero] comp-card[split] > inner-card > comp-container > header {
margin-top: 30px
}
@media(max-width:750px)and (orientation:portrait) {
comp-swipe-card comp-card[split] > inner-card > comp-container {
padding-top: 20vw
}
comp-swipe-card comp-card[split] > inner-card > comp-container:last-of-type {
margin-top: 0
}
comp-swipe-card comp-card[split] > inner-card > comp-container:last-of-type > comp-background {
height: 100%
}
}
@media(orientation:landscape) {
comp-swipe-card comp-card[split] > inner-card > comp-container[position=Right] {
order: 2
}
comp-swipe-card comp-card[split] > inner-card > comp-container[position=Left] {
order: 0
}
}
comp-swipe-card comp-card[image] > comp-background, comp-swipe-card comp-card[split] > inner-card > comp-container > comp-background, comp-swipe-card comp-card[video] > comp-background {
background-position: 50%;
background-size: cover
}
comp-swipe-card comp-card[image] > div[class*=jw-], comp-swipe-card comp-card[video] > div[class*=jw-] {
border: none;
height: 100% !important;
left: 0;
position: absolute;
top: 0;
width: 100% !important
}
comp-swipe-card comp-card[image] .play, comp-swipe-card comp-card[video] .play {
left: 8.4919472914vw;
margin-bottom: 0;
margin-top: 0;
position: absolute;
top: 10.980966325vw;
transform: translateY(30px)
}
@media(max-width:750px)and (orientation:portrait) {
comp-swipe-card comp-card[image] .play, comp-swipe-card comp-card[video] .play {
top: 20vw
}
}
comp-swipe-card comp-card[image] .play:after, comp-swipe-card comp-card[video] .play:after {
display: inline-block;
font-size: 1.5em;
margin-left: 10px;
vertical-align: middle
}
comp-swipe-card comp-card[image][button=Center] .play, comp-swipe-card comp-card[video][button=Center] .play {
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
comp-press comp-swipe-card:not([pillar=""]) comp-card comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card h3 {
font-size: 48px
}
@media(min-width:1366px) {
comp-press comp-swipe-card:not([pillar=""]) comp-card comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card h3 {
font-size: 3.5vw
}
}
@media(max-width:900px) {
comp-press comp-swipe-card:not([pillar=""]) comp-card comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card h3 {
font-size: 5.3vw
}
}
@media(max-height:600px)and (orientation:landscape) {
comp-press comp-swipe-card:not([pillar=""]) comp-card comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card comp-press comp-container.none:not(.loading):after, comp-swipe-card:not([pillar=""]) comp-card h3 {
font-size: 8vh
}
}
comp-swipe-card + comp-card-list {
margin-top: 90px
}
comp-card-list {
margin: 3.3vw
}
comp-container[nomargin] + comp-card-list {
margin-top: 0
}
@media(min-width:1366px) {
comp-card-list {
margin: 45px auto;
max-width: 1260px
}
[engine-hero] ~ comp-card-list {
max-width: 1206px
}
}
comp-card-list > .h2, comp-card-list > h2 {
font-size: 45px;
font-weight: 100
}
[engine-hero] ~ comp-card-list > .h2, [engine-hero] ~ comp-card-list > h2 {
border-bottom: 1px solid rgba(151,151,151,.15);
padding-bottom: 20px
}
comp-card-list > div {
margin: 0 -3vw 0 -1.5vw
}
comp-card-list > div > * {
box-sizing: border-box;
display: inline-block;
margin: 2vw 1.5vw;
max-height: 900px;
max-width: 900px;
overflow: hidden;
padding-bottom: 1.5vw;
transition: max-height 1s,max-width 1s,padding 1s,margin 1s;
vertical-align: top
}
comp-card-list > div > * * {
transition: color .25s
}
comp-card-list > div > .hidden {
margin: 0;
max-height: 0;
max-width: 0;
padding: 0
}
comp-card-list > div > * address {
margin-bottom: 0
}
comp-card-list > div > * address, comp-card-list > div > * data, comp-card-list > div > * time {
color: #6f87a6;
display: inline-block;
font-family: industry,sans-serif;
font-size: 12px;
letter-spacing: .3em;
margin-right: 50px;
text-transform: uppercase
}
comp-card-list > div > * address:before, comp-card-list > div > * data:before, comp-card-list > div > * time:before {
color: #bdbdbd;
display: inline-block;
margin-right: 5px
}
comp-card-list > div > * p {
color: #3b3b3b
}
comp-card-list > div [type=VID] comp-image {
background: #000;
position: relative
}
comp-card-list > div [type=VID] comp-image:before {
color: #fff;
font-size: 56px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1
}
comp-card-list > div [type=VID] h4 {
color: #6f87a6;
font-size: 14px;
margin-bottom: 0;
margin-top: 35px
}
comp-card-list > div [type=VID] comp-press h4 + comp-container.none:not(.loading):after, comp-card-list > div [type=VID] h4 + h3, comp-press comp-card-list > div [type=VID] h4 + comp-container.none:not(.loading):after {
margin-top: 10px
}
comp-card-list > div [type=VID] img {
transition: opacity .25s
}
html:not(.touch) comp-card-list > div [type=VID]:hover img {
opacity: .75
}
@media(max-width:767px) {
comp-card-list > div {
margin: 0
}
comp-card-list > div > * {
display: block;
margin: 30px 0 60px;
padding-bottom: 20px
}
}
comp-card-list > div comp-press comp-container.none:not(.loading):after, comp-card-list > div h3, comp-press comp-card-list > div comp-container.none:not(.loading):after {
font-size: 30px;
font-weight: 100
}
comp-card-list > div a:hover {
text-decoration: none
}
html:not(.touch) comp-card-list > div a:hover {
color: #6f87a6 !important
}
html:not(.touch) comp-card-list > div a:hover * {
color: inherit !important
}
@media(min-width:768px) {
comp-card-list > div {
display: flex;
flex-wrap: wrap
}
}
@media(min-width:768px)and (min-width:768px) {
comp-card-list > div {
margin: 0 -20px
}
}
@media(min-width:768px) {
comp-card-list > div > * {
margin: 27px 20px
}
comp-card-list[columns="2"] > div > * {
width: calc(50% - 44px)
}
comp-card-list[columns="3"] > div > * {
width: calc(33.3% - 43px)
}
}
comp-social {
font-size: 0
}
comp-social:after {
clear: both;
content: "";
display: table
}
comp-social > comp-container {
background: #6f87a6;
box-sizing: content;
display: inline-block;
font-size: 5vw;
padding: 0 0 100%;
position: relative;
transform-style: preserve-3d;
transition: all .8s;
vertical-align: top;
width: 100%;
z-index: 0
}
@media only screen and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:2) {
comp-social > comp-container {
transition: none
}
}
@media only screen and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:3) {
comp-social > comp-container {
transition: none
}
}
@media(min-width:450px)and (max-width:767px) {
comp-social > comp-container {
font-size: 2.5vw;
padding: 0 0 50%;
width: 50%
}
comp-social > comp-container:nth-child(3n) {
float: right
}
comp-social > comp-container:nth-child(3n+1) {
clear: both
}
comp-social > comp-container:nth-child(5n) {
float: left
}
comp-social > comp-container:nth-child(7n) {
clear: both;
float: right
}
comp-social > comp-container:nth-child(7n+1) {
float: left
}
}
@media(min-width:768px) {
comp-social > comp-container {
font-size: 1.25vw;
padding: 0 0 25%;
width: 25%
}
comp-social > comp-container:nth-child(n+5), comp-social > comp-container:nth-child(n+6), comp-social > comp-container:nth-child(n+7), comp-social > comp-container:nth-child(n+8) {
float: right
}
comp-social > comp-container:nth-child(n+9) {
clear: both
}
}
@media(max-width:449px) {
comp-social > comp-container {
padding-bottom: 60%
}
}
comp-social > comp-container > a {
-webkit-backface-visibility: visible;
backface-visibility: visible;
bottom: 0;
font-size: 1em;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: opacity .3s linear;
width: 100%
}
@media only screen and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:2) {
comp-social > comp-container > a {
transform: none !important
}
}
@media only screen and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:3) {
comp-social > comp-container > a {
transform: none !important
}
}
comp-social > comp-container > a:first-child {
transform: rotateY(0deg) translateZ(2px);
z-index: 2
}
comp-social > comp-container > a:last-child {
opacity: 0;
transform: rotateY(180deg) translateZ(1px);
z-index: 1
}
comp-container[hero] comp-social > comp-container > a header, comp-social > comp-container > a comp-container[hero] header, comp-social > comp-container > a inner-content {
color: #fff;
left: 0;
min-width: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%
}
comp-container[hero] comp-social > comp-container > a header p, comp-social > comp-container > a comp-container[hero] header p, comp-social > comp-container > a inner-content p {
margin: 0;
padding: 0 10%
}
comp-social > comp-container > a:before {
background: no-repeat 50%;
background-size: contain;
bottom: 8px;
content: "";
height: 22px;
position: absolute;
right: 8px;
width: 22px;
z-index: 3
}
comp-social > comp-container > a[source*=facebook]:before {
background-image: url(../png/facebook.png)
}
comp-social > comp-container > a[source*=twitter]:before {
background-image: url(../png/twitter.png)
}
comp-social > comp-container > a[source*=instagram]:before {
background-image: url(../png/instagram.png)
}
comp-social > comp-container.flipped {
transform: rotateY(180deg)
}
comp-social > comp-container.flipped > a:first-child {
opacity: 0;
pointer-events: none
}
comp-social > comp-container.flipped > a:last-child {
opacity: 1
}
@media only screen and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:2) {
comp-social > comp-container.flipped {
transform: none
}
}
@media only screen and (max-device-width:1024px)and (-webkit-min-device-pixel-ratio:3) {
comp-social > comp-container.flipped {
transform: none
}
}
comp-footer-actions {
height: 34.1874084919vw;
position: relative;
z-index: 9
}
comp-footer-actions > img {
height: 34.1874084919vw;
width: 100%
}
[engine-hero] ~ comp-footer-actions > img {
height: auto
}
comp-footer-actions > comp-background {
background-position: 50%;
background-size: cover;
opacity: .2
}
comp-footer-actions > div {
left: 0;
margin-bottom: -100px;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
transform-origin: bottom left;
transition: transform .15s,opacity .25s,margin .25s,padding .25s;
width: 100%;
z-index: 2
}
comp-footer-actions > div > * {
margin-left: 2px;
margin-right: 2px;
padding: 15px 45px
}
@media(max-width:767px) {
comp-footer-actions > div {
display: flex;
padding: 10px 30px;
transform: translateY(-50%)
}
comp-footer-actions > div > * {
flex: 1;
margin: 5px;
padding: 10px 0
}
}
comp-footer-actions > div.fixed {
bottom: 0;
position: fixed;
top: auto;
transform-origin: left center
}
@media(min-width:768px) {
comp-footer-actions > div.fixed {
padding-left: 8.4919472914vw;
text-align: left;
width: auto
}
}
@media(max-width:767px) {
comp-footer-actions > div.fixed {
padding: 0;
transform: none
}
comp-footer-actions > div.fixed > * {
border-radius: 0;
margin: 0
}
}
comp-footer-actions > div.visible {
margin-bottom: 0;
opacity: 1
}
[electric] ~ comp-footer-actions .btn-default {
background-color: #75c1e3
}
[electric] ~ comp-footer-actions comp-background {
opacity: 1
}
comp-applications {
margin-bottom: 7.3206442167vw;
margin-top: 7.3206442167vw
}
@media(max-width:767px) {
comp-applications {
padding: 0 20px
}
}
comp-applications > h3.h2:after, comp-press comp-applications > comp-container.h2.none:not(.loading):after {
left: 0;
right: 0
}
@media(min-width:768px) {
comp-applications[count="1"] > inner-content > *, comp-applications[count="2"] > inner-content > *, comp-container[hero] comp-applications[count="1"] > header > *, comp-container[hero] comp-applications[count="2"] > header > * {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px)
}
comp-applications:not([count="2"]):not([count="1"]) > inner-content > *, comp-container[hero] comp-applications:not([count="2"]):not([count="1"]) > header > * {
flex-basis: calc(33.33% - 20px);
max-width: calc(33.33% - 20px)
}
}
comp-applications > inner-content, comp-container[hero] comp-applications > header {
margin: -10px
}
@media(min-width:768px) {
comp-applications > inner-content, comp-container[hero] comp-applications > header {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start
}
}
comp-applications > inner-content > a, comp-container[hero] comp-applications > header > a {
display: block;
margin: 10px 10px 30px;
position: relative;
transition: all .25s;
vertical-align: top
}
comp-applications > inner-content > a img, comp-container[hero] comp-applications > header > a img {
height: auto;
width: 100%
}
comp-applications > inner-content > a span, comp-container[hero] comp-applications > header > a span {
color: #6f87a6;
display: block;
font-family: industry,sans-serif;
font-size: 16px;
letter-spacing: .35em;
margin-top: 10px;
text-transform: uppercase;
transition: all .25s
}
@media(min-width:768px) {
comp-applications > inner-content > a span, comp-container[hero] comp-applications > header > a span {
margin-top: 30px
}
}
comp-applications > inner-content > a:focus, comp-applications > inner-content > a:hover, comp-container[hero] comp-applications > header > a:focus, comp-container[hero] comp-applications > header > a:hover {
text-decoration: none
}
comp-container[hero] html:not(.touch) comp-applications > header > a:hover, html:not(.touch) comp-applications > inner-content > a:hover, html:not(.touch) comp-container[hero] comp-applications > header > a:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
transform: scale(1.05);
z-index: 2
}
comp-container[hero] html:not(.touch) comp-applications > header > a:hover span, html:not(.touch) comp-applications > inner-content > a:hover span, html:not(.touch) comp-container[hero] comp-applications > header > a:hover span {
transform: translate(15px,-15px)
}
comp-truck-hero {
background: linear-gradient(90deg,rgba(0,0,0,.8) 0,transparent);
box-sizing: content-box;
overflow: hidden;
position: relative
}
comp-truck-hero * {
box-sizing: border-box
}
comp-truck-hero > img {
height: auto;
transition: all .25s;
width: 100%
}
@media(max-width:767px) {
comp-truck-hero > img {
min-height: 25vh;
position: absolute
}
}
comp-truck-hero > video {
left: 50%;
min-height: 100%;
min-width: 100%;
top: 50%;
transform: translate(-50%,-50%)
}
@media(max-width:767px) {
comp-truck-hero > video {
display: block;
height: 50vh;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
position: relative !important;
top: 0;
transform: unset;
vertical-align: baseline;
width: 100%;
z-index: 2
}
}
comp-truck-hero .cab-tabs, comp-truck-hero .extra {
display: none
}
comp-truck-hero > :not(img):not(.cabs):not(.cab-tabs):not(.specs) {
position: absolute
}
@media(min-width:768px) {
comp-truck-hero {
min-height: 32.9428989751vw
}
comp-truck-hero[list] {
cursor: pointer;
padding-bottom: 30px
}
comp-truck-hero > .cab-tabs, comp-truck-hero > .specs {
position: absolute
}
}
@media(max-width:767px) {
comp-truck-hero .extra {
display: none
}
}
comp-truck-hero > .cab-tabs {
background: #000;
bottom: 0;
height: 100px;
left: 0;
padding: 10px 8.4919472914vw;
text-align: left;
width: 100%
}
comp-truck-hero > .cab-tabs button {
padding: 19px 30px
}
@media(min-width:768px) {
comp-truck-hero > .cab-tabs button:not(:first-of-type) {
margin: 2px
}
}
@media(max-width:767px) {
comp-truck-hero > .cab-tabs {
display: flex;
display: none;
height: 50px;
padding: 0
}
comp-truck-hero > .cab-tabs button {
flex: 1;
padding: 10px 0
}
}
@media(min-width:768px) {
comp-truck-hero > .cab-tabs:after {
bottom: 6px;
color: #fff;
content: "CAB TYPE";
font-family: industry,sans-serif;
font-size: 9px;
height: 10px;
left: 8.4919472914vw;
letter-spacing: .35em;
line-height: 10px;
position: absolute
}
}
comp-truck-hero > .cabs > img {
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all .25s;
width: 100%
}
comp-truck-hero:not(.loaded) > .cabs > img, comp-truck-hero:not(.loaded) > img, comp-truck-hero > .cabs > img:not(.active) {
opacity: 0
}
comp-truck-hero > h1 {
display: none
}
@media(min-width:768px) {
comp-truck-hero > h1 {
bottom: 0;
color: #fff;
display: block;
left: 8.4919472914vw;
z-index: 1
}
}
comp-truck-hero > .specs {
background: #fff;
text-align: center;
width: 100%;
z-index: 1
}
comp-truck-hero > .specs:before {
clear: both;
content: "";
display: table
}
[engine] comp-specs > div comp-truck-hero > .specs li > strong, [specs] comp-specs[type=cabConfigurations] comp-truck-hero > .specs strong, article table.specs tbody comp-truck-hero > .specs td:not([colspan]):first-of-type, article table.specs thead comp-truck-hero > .specs th, comp-truck-hero > .specs > div li > strong, comp-truck-hero > .specs [engine] comp-specs > div li > strong, comp-truck-hero > .specs [specs] comp-specs[type=cabConfigurations] strong, comp-truck-hero > .specs article table.specs tbody td:not([colspan]):first-of-type, comp-truck-hero > .specs article table.specs thead th, comp-truck-hero > .specs comp-specs > div li > strong, comp-truck-hero > .specs h5 {
letter-spacing: normal
}
comp-truck-hero > .specs .mobile-options {
text-align: center
}
@media(min-width:768px) {
comp-truck-hero > .specs .mobile-options {
display: none
}
}
comp-truck-hero > .specs a.resource-item {
display: block;
margin: 20px auto 10px;
max-width: none;
min-height: 60px;
padding: 0;
position: relative
}
@media(max-width:940px) {
comp-truck-hero > .specs a.resource-item {
min-height: 40px
}
}
@media(max-width:767px) {
comp-truck-hero > .specs a.resource-item {
max-width: 250px
}
}
comp-truck-hero > .specs a.resource-item .thumb {
background-position: top;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 5.8565153734vw
}
@media(max-width:767px) {
comp-truck-hero > .specs a.resource-item .thumb {
width: 80px
}
}
comp-truck-hero > .specs a.resource-item .label {
color: #3b3b3b;
display: block;
font-size: 1.1713030747vw;
line-height: 1.25;
margin-left: 6.588579795vw
}
@media(max-width:940px) {
comp-truck-hero > .specs a.resource-item .label {
font-size: 10px
}
}
@media(max-width:767px) {
comp-truck-hero > .specs a.resource-item .label {
font-size: 16px;
margin-left: 90px
}
}
@media(min-width:768px) {
comp-truck-hero > .specs {
right: 2.9282576867vw;
top: 0;
width: 20.7906295754vw
}
}
comp-truck-hero > .specs > div {
margin: 20px;
text-align: left
}
@media(min-width:768px) {
comp-truck-hero > .specs > div {
margin: 1.4641288433vw
}
}
comp-press comp-truck-hero > .specs > div comp-container.none:not(.loading):after, comp-truck-hero > .specs > div comp-press comp-container.none:not(.loading):after, comp-truck-hero > .specs > div h3 {
border-bottom: 1px solid #d7d7d7;
margin-bottom: 10px;
margin-top: 0;
padding-bottom: 10px;
text-align: center;
text-transform: uppercase
}
@media(min-width:768px) {
comp-press comp-truck-hero > .specs > div comp-container.none:not(.loading):after, comp-truck-hero > .specs > div comp-press comp-container.none:not(.loading):after, comp-truck-hero > .specs > div h3 {
font-size: 1.756954612vw;
margin-bottom: .7320644217vw;
padding-bottom: .7320644217vw
}
}
[engine] comp-specs > div comp-truck-hero > .specs > div li > strong, [specs] comp-specs[type=cabConfigurations] comp-truck-hero > .specs > div strong, article table.specs tbody comp-truck-hero > .specs > div td:not([colspan]):first-of-type, article table.specs thead comp-truck-hero > .specs > div th, comp-truck-hero > .specs > div [engine] comp-specs > div li > strong, comp-truck-hero > .specs > div [specs] comp-specs[type=cabConfigurations] strong, comp-truck-hero > .specs > div article table.specs tbody td:not([colspan]):first-of-type, comp-truck-hero > .specs > div article table.specs thead th, comp-truck-hero > .specs > div comp-specs > div li > strong, comp-truck-hero > .specs > div h5, comp-truck-hero > .specs > div li > strong {
margin: 0
}
@media(min-width:768px) {
[engine] comp-specs > div comp-truck-hero > .specs > div li > strong, [specs] comp-specs[type=cabConfigurations] comp-truck-hero > .specs > div strong, article table.specs tbody comp-truck-hero > .specs > div td:not([colspan]):first-of-type, article table.specs thead comp-truck-hero > .specs > div th, comp-truck-hero > .specs > div [engine] comp-specs > div li > strong, comp-truck-hero > .specs > div [specs] comp-specs[type=cabConfigurations] strong, comp-truck-hero > .specs > div article table.specs tbody td:not([colspan]):first-of-type, comp-truck-hero > .specs > div article table.specs thead th, comp-truck-hero > .specs > div comp-specs > div li > strong, comp-truck-hero > .specs > div h5, comp-truck-hero > .specs > div li > strong {
font-size: 1.0248901903vw
}
}
comp-truck-hero > .specs > div li > strong {
letter-spacing: normal
}
comp-truck-hero > .specs > div > div {
display: flex
}
@media(min-width:768px) {
comp-truck-hero > .specs > div > div {
font-size: 1.0248901903vw;
margin-top: .2928257687vw
}
}
comp-truck-hero > .specs > div > div > * {
flex: 1;
line-height: 1.5
}
comp-truck-hero > .specs > div > div > :not(:last-child) {
margin-right: 10px
}
comp-truck-hero > .specs > div > div > :not(:first-child) {
margin-left: 10px
}
comp-truck-hero > .specs > div > div ul {
list-style: none;
margin: 0;
padding: 0
}
comp-truck-hero > .specs > div > div > ul {
display: flex
}
comp-truck-hero > .specs > div > div > ul > * {
flex: 1;
line-height: 1.25
}
[specs] comp-specs[type=cabConfigurations] comp-truck-hero > .specs > div > div > strong, article table.specs tbody comp-truck-hero > .specs > div > div > td:not([colspan]):first-of-type, article table.specs thead comp-truck-hero > .specs > div > div > th, comp-truck-hero > .specs > div > div > h5 {
text-align: right
}
comp-truck-hero > .specs > .btn {
border-radius: 0;
margin: auto;
width: 100%
}
@media(min-width:768px) {
comp-truck-hero > .specs > .btn {
font-size: 1.317715959vw;
margin-bottom: -1px;
padding: .8052708638vw 2.196193265vw
}
}
comp-truck-hero[electric] h1 strong {
color: #75c1e3;
font-weight: inherit
}
comp-truck-hero[electric] .btn {
background-color: #75c1e3
}
@media(max-width:767px) {
comp-truck-hero {
min-height: 25vh;
overflow: unset
}
}
comp-all-trucks-hero {
display: flex;
margin: 3.3vw
}
@media(min-width:1366px) {
comp-all-trucks-hero {
margin: 45px auto;
max-width: 1260px
}
}
comp-all-trucks-hero > comp-container {
flex: 1;
padding: 0
}
comp-all-trucks-hero > aside {
background: #000 no-repeat center 15%;
background-size: 85% auto;
flex-direction: column;
flex-grow: 0;
margin: 2.196193265vw 0 0 3.3vw;
min-height: 18.3016105417vw;
width: 30%
}
@media(max-width:767px) {
comp-all-trucks-hero > aside {
display: none
}
}
comp-all-trucks-hero > aside > * {
flex: 1;
margin: 0;
padding: 16px;
text-align: center
}
comp-all-trucks-hero > aside > :first-child, comp-all-trucks-hero > aside > :last-child {
box-sizing: content-box;
flex-grow: 0;
min-height: 50px
}
comp-all-trucks-hero > aside h2 {
color: #fff;
font-size: 15.25px;
letter-spacing: .355em;
text-transform: uppercase
}
comp-all-trucks-hero > aside .action {
padding-top: 20%
}
comp-resources:not([vocation]) > .group {
border-bottom: 1px solid #f9fbfe;
padding: 4.39238653vw 20px
}
comp-resources:not([vocation]) > .group:nth-of-type(odd) {
background: #f9fbfe
}
comp-resources:not([vocation]) > .group > .group-inner {
margin: 0 auto;
max-width: 915px
}
@media(max-width:767px) {
comp-resources[vocation] {
padding: 0 20px
}
}
comp-resources[vocation] h2:after {
left: 0;
right: 0
}
comp-resources h2 {
font-size: 30px;
font-weight: 100;
margin: 0 0 1em
}
comp-resources a {
color: #484848;
display: inline-block;
line-height: normal;
margin-bottom: 44px;
margin-right: 4%;
min-height: 60px;
padding: 0 10px 20px 0;
position: relative;
transition: all .25s;
vertical-align: top;
width: 28%
}
@media(max-width:768px) {
comp-resources a {
width: 95% !important;
}
}
@media(max-width:450px) {
comp-resources a {
margin-right: 0 !important;
width: calc(100% - 20px) !important;
}
}
comp-resources a .thumb {
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 5.8565153734vw
}
comp-resources a .label {
display: block;
margin-left: 6.588579795vw
}
@media(max-width:767px) {
comp-resources a .thumb {
width: 80px
}
comp-resources a .label {
font-size: 16px;
margin-left: 90px;
}
}
comp-resources a:after {
clear: both;
content: "";
display: table
}
comp-resources a:focus, comp-resources a:hover {
text-decoration: none
}
html:not(.touch) comp-resources a:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
transform: scale(1.1);
z-index: 2
}
[resources-page] form {
margin: 60px auto 30px;
position: relative
}
[resources-page] form:before {
font-size: 22px;
left: 0;
position: absolute;
top: 11px
}
[resources-page] form input {
box-sizing: border-box;
padding-left: 30px
}
[resources-page] nav[breadcrumbs] {
background: transparent;
margin: 30px auto;
padding: 0
}
[resources-page] nav[breadcrumbs] a {
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 18px;
opacity: 1
}
html:not(.touch) [resources-page] nav[breadcrumbs] a:hover {
color: #713738 !important
}
[resources-page] nav[breadcrumbs] span {
display: none
}
[resources-page] comp-resources > .group {
background: transparent;
border-top: 1px solid #d7d7d7;
padding: 48px 0
}
[resources-page] comp-resources > .group > .group-inner {
max-width: none
}
[resources-page] .children {
margin: 20px -10px
}
[resources-page] .children a {
margin: 10px
}
#modal-lightbox {
background: transparent
}
#modal-lightbox .modal-content {
padding: 0;
position: relative
}
#modal-lightbox .modal-content .close {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
height: 68px;
position: absolute;
right: 0;
top: 0;
width: 68px
}
#modal-lightbox .modal-content [actions] {
background: #777;
height: 36px;
left: 0;
padding-right: 16px;
position: absolute;
top: 0;
z-index: 1
}
#modal-lightbox .modal-content [actions] > a {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
font-size: 9px;
height: 36px;
line-height: 36px;
text-transform: uppercase
}
#modal-lightbox .modal-content .download {
background: transparent url(../png/download-icon.png) no-repeat 10px;
background-size: 20px;
padding-left: 46px
}
#modal-lightbox .modal-content .email {
margin-left: 20px
}
#modal-lightbox .modal-content .email:before {
display: inline-block;
font-size: 20px;
margin: 0 10px;
vertical-align: middle
}
#modal-lightbox .modal-content img {
width: 100%
}
#modal-lightbox .modal-content .vid-holder {
padding-bottom: 56.25%;
position: relative
}
#modal-lightbox .modal-content .vid-holder > div {
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#modal-lightbox .modal-content .vid-holder .jwplayer {
height: 100% !important;
width: 100% !important
}
#modal-lightbox iframe[name=mailto-target] {
height: 1px;
left: -1px;
opacity: 0;
position: absolute;
top: -1px;
width: 1px
}
comp-specs {
display: flex;
width: 100%
}
comp-press comp-specs > comp-container.none:not(.loading):after, comp-specs > h3 {
flex-grow: 0;
margin-right: 20px;
width: 200px
}
comp-specs > div {
flex-grow: 1
}
[engine] comp-specs > div > ul, comp-truck-hero comp-specs > div > ul {
display: flex
}
[engine] comp-specs > div > ul > *, comp-truck-hero comp-specs > div > ul > * {
flex: 1;
line-height: 2
}
@media(min-width:768px) {
[engine] comp-specs {
border-top: 1px solid #d7d7d7
}
[engine] comp-specs:last-child {
border-bottom: 1px solid #d7d7d7
}
}
@media(max-width:767px) {
[engine] comp-specs:first-of-type {
border-top: 1px solid #d7d7d7;
margin-top: 20px
}
[engine] comp-specs:last-of-type {
border-bottom: 1px solid #d7d7d7;
margin-bottom: 20px
}
}
[engine] comp-press comp-specs > comp-container.none:not(.loading):after, [engine] comp-specs > h3, comp-press [engine] comp-specs > comp-container.none:not(.loading):after {
color: #6f87a6;
margin-bottom: 0;
margin-right: 0;
text-align: right;
width: auto
}
@media(max-width:1090px) {
[engine] comp-press comp-specs > comp-container.none:not(.loading):after, [engine] comp-specs > h3, comp-press [engine] comp-specs > comp-container.none:not(.loading):after {
font-size: 18px
}
}
[engine] comp-press comp-specs > comp-container.none:not(.loading):after, [engine] comp-specs > div, [engine] comp-specs > h3, comp-press [engine] comp-specs > comp-container.none:not(.loading):after {
flex-grow: 0;
line-height: 1.5em;
padding: 20px 10px;
width: 50%
}
@media(max-width:767px) {
[engine] comp-press comp-specs > comp-container.none:not(.loading):after, [engine] comp-specs > div, [engine] comp-specs > h3, comp-press [engine] comp-specs > comp-container.none:not(.loading):after {
padding: 10px
}
}
[engine] comp-specs > div {
text-align: left
}
[specs] comp-specs {
border-bottom: 1px solid #d7d7d7;
margin-bottom: 20px;
padding-bottom: 20px
}
@media(max-width:767px) {
[specs] comp-specs {
display: block
}
}
[specs] comp-press comp-specs > comp-container.none:not(.loading):after, [specs] comp-specs > h3, comp-press [specs] comp-specs > comp-container.none:not(.loading):after {
color: #6f87a6;
flex-shrink: 0;
margin-bottom: 0;
text-align: right;
width: 170px
}
@media(max-width:767px) {
[specs] comp-press comp-specs > comp-container.none:not(.loading):after, [specs] comp-specs > h3, comp-press [specs] comp-specs > comp-container.none:not(.loading):after {
margin: 30px 0 5px;
text-align: left;
width: auto
}
}
[specs] comp-specs ul:last-child {
margin-bottom: 0
}
[specs] comp-specs img {
height: auto !important;
margin: 10px 0;
width: 100%
}
[specs] comp-specs > div {
letter-spacing: .015em;
line-height: 1.2;
max-width: 506px
}
[specs] comp-specs > div li {
margin-bottom: .5em
}
[specs] comp-specs[type=""] > div ul, [specs] comp-specs[type=lightweightOptions] > div ul {
list-style-position: outside;
list-style-type: disc
}
[specs] comp-specs[type=""] > div ul li, [specs] comp-specs[type=lightweightOptions] > div ul li {
list-style-position: outside;
list-style-type: disc;
margin-left: 15px
}
@media(min-width:450px) {
[specs] comp-specs[type=""] > div > ul, [specs] comp-specs[type=lightweightOptions] > div > ul {
grid-column-gap: 2em;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 2em;
column-gap: 2em
}
}
[specs] comp-specs[type=cabConfigurations] strong {
letter-spacing: normal
}
@media(min-width:768px) {
[specs] comp-specs[type=cabConfigurations] > div > ul {
display: flex
}
[specs] comp-specs[type=cabConfigurations] > div > ul > * {
flex: 1;
margin-right: 60px
}
[specs] comp-specs[type=cabConfigurations] > div > ul > :last-child {
margin-right: 0
}
}
[specs] comp-specs[type=cabConfigurations] > div > ul ul {
list-style-position: outside;
list-style-type: disc
}
[specs] comp-specs[type=cabConfigurations] > div > ul ul li {
list-style-position: outside;
list-style-type: disc;
margin-left: 15px
}
[specs] comp-specs[type=cabConfigurations] > div > ul ul {
margin-top: 10px
}
comp-container[specs] nav {
background: #f9f9f9;
margin-bottom: 30px;
padding: 10px
}
@media(min-width:900px) {
comp-container[specs] nav {
display: flex
}
}
comp-container[specs] nav > a {
display: block;
font-family: industry,sans-serif;
vertical-align: middle
}
comp-container[specs] nav > a:not(:last-child) {
margin-right: 40px
}
comp-container[specs] comp-press nav > comp-container.none:not(.loading):after, comp-container[specs] nav > a, comp-container[specs] nav > h3, comp-press comp-container[specs] nav > comp-container.none:not(.loading):after {
line-height: 1.5
}
article table.specs {
margin: 1em 0
}
article table.specs thead th {
color: #3b3b3b;
padding-bottom: 2em;
text-align: center;
text-transform: uppercase
}
article table.specs tbody tr {
border-bottom: 1px solid #d7d7d7
}
article table.specs tbody td:not([colspan]) {
line-height: 1.2;
padding-left: 10px;
padding-right: 10px;
vertical-align: top
}
article table.specs tbody td:not([colspan]):first-of-type {
font-weight: 700;
letter-spacing: normal;
text-align: right
}
comp-filters {
display: block
}
@media(min-width:768px) {
comp-filters {
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1;
display: flex;
margin: 3.3vw 3.3vw 1.51vw;
padding-bottom: 20px;
padding-top: 20px
}
}
@media(min-width:768px)and (min-width:1366px) {
comp-filters {
margin: 45px auto;
max-width: 1260px
}
}
comp-filters > div.categories {
display: flex;
flex-grow: 1
}
@media(min-width:768px) {
comp-filters > div.categories {
border-right: 1px solid #d7d7d7;
margin-right: 30px;
padding-right: 20px
}
}
comp-filters > div.categories > * {
flex: 1;
padding-left: 5px;
padding-right: 5px
}
@media(min-width:768px) {
comp-filters > div.categories > * {
margin-right: 10px
}
}
@media(max-width:767px) {
comp-filters > div.categories > :not(:last-child) {
margin-right: 1px
}
}
@media(max-width:992px) {
comp-filters > div.categories > * {
font-size: 13px
}
}
@media(max-width:420px) {
comp-filters > div.categories > * {
font-size: 10px
}
}
comp-filters > div.applications {
flex-grow: 0
}
@media(min-width:993px) {
comp-filters > div.applications {
width: 20%
}
}
@media(max-width:992px)and (min-width:768px) {
comp-filters > div.applications {
width: 40%
}
}
@media(max-width:767px) {
comp-filters > div.applications {
margin: 3.2942898975vw
}
}
comp-filters option.hidden {
display: none
}
.filter-results {
color: #6f87a6;
padding: 0 3.3vw;
text-align: center
}
.filter-results + comp-card-list {
margin-top: 1.51vw
}
#cludo-search-results {
margin: 0 auto;
max-width: 940px;
padding: 50px 20px
}
@media(max-width:767px) {
#cludo-search-results .cludo-c-3 {
display: none
}
#cludo-search-results .cludo-c-9 {
flex: 0 0 100% !important;
max-width: 100% !important
}
}
#cludo-search-results .search-result-count {
color: #6f87a6;
padding: 0 0 18px
}
#cludo-search-results .search-results {
border-top: 1px solid #e9e9e9;
padding-top: 30px
}
#cludo-search-results .search-results h2 a {
color: #3b3b3b
}
#cludo-search-results .search-results .search-results-item:not(:first-of-type) {
border-top: 1px solid #e9e9e9;
margin-top: 30px;
padding-top: 30px
}
#cludo-search-results .search-results .search-results-item * {
word-wrap: break-word
}
#cludo-search-results .search-results > nav {
font-size: 28px;
position: relative
}
#cludo-search-results .search-results > nav > a {
display: none
}
#cludo-search-results .search-results > nav ul {
display: flex;
justify-content: center;
text-align: center
}
#cludo-search-results .search-results > nav li {
color: #3b3b3b;
display: block;
font-family: industry,sans-serif;
padding: 7px 5px !important;
text-align: center !important;
width: auto !important
}
@media(min-width:768px) {
#cludo-search-results .search-results > nav li {
padding: 10px
}
}
@media(max-width:374px) {
#cludo-search-results .search-results > nav li:not([class]) {
display: none
}
}
#cludo-search-results .search-results > nav li.active {
color: #3b3b3b
}
#cludo-search-results .search-results > nav li.active:hover {
text-decoration: none
}
#cludo-search-results .search-results > nav li.next, #cludo-search-results .search-results > nav li.previous {
margin: auto;
width: auto
}
@media(min-width:768px) {
#cludo-search-results .search-results > nav li.next, #cludo-search-results .search-results > nav li.previous {
position: absolute
}
}
#cludo-search-results .search-results > nav li.next a, #cludo-search-results .search-results > nav li.previous a {
color: #3b3b3b
}
#cludo-search-results .search-results > nav li.next a:after, #cludo-search-results .search-results > nav li.next a:before, #cludo-search-results .search-results > nav li.previous a:after, #cludo-search-results .search-results > nav li.previous a:before {
color: #6f87a6;
display: inline-block;
font-size: 12px;
vertical-align: middle
}
#cludo-search-results .search-results > nav li.previous {
justify-self: flex-start;
left: 0;
margin-left: 0
}
#cludo-search-results .search-results > nav li.previous a:after {
content: "PREVIOUS";
margin-left: 16px
}
#cludo-search-results .search-results > nav li.next {
justify-self: flex-end;
margin-right: 0;
right: 0
}
#cludo-search-results .search-results > nav li.next a:before {
content: "NEXT";
margin-right: 16px
}
article .constrained, article > blockquote, article > div, article > heading, article > img, article > video {
display: block;
margin: 0 auto;
max-width: 680px;
padding: 38px 0
}
@media(max-width:767px) {
article .constrained, article > blockquote, article > div, article > heading, article > img, article > video {
padding: 7.2%
}
}
@media(max-width:680px) {
article .constrained, article > blockquote, article > div, article > heading, article > img, article > video {
max-width: 100%
}
}
article .constrained:after, article > blockquote:after, article > div:after, article > heading:after, article > img:after, article > video:after {
clear: both;
content: "";
display: table
}
article > heading h1 {
font-size: 44px;
font-weight: 100
}
article > heading address, article > heading data, article > heading time {
color: #6f87a6;
display: inline-block;
font-family: industry,sans-serif;
font-size: 12px;
letter-spacing: .3em;
margin-bottom: 0;
margin-right: 50px;
text-transform: uppercase
}
article > heading address:before, article > heading data:before, article > heading time:before {
color: #bdbdbd;
display: inline-block;
margin-right: 5px
}
article > heading + div {
padding-top: 0
}
article > img, article > video {
padding: 0
}
article > blockquote {
border: none;
border-bottom: 1px solid #d7d7d7;
font-size: 26px;
line-height: 1.25;
margin-bottom: 10px;
margin-top: 40px
}
[engine] comp-specs > div article > div li > strong:first-child, [specs] comp-specs[type=cabConfigurations] article > div strong:first-child, article > div .heading-1:first-child, article > div .heading-2:first-child, article > div .heading-3:first-child, article > div .heading-4:first-child, article > div .heading-5:first-child, article > div .heading-6:first-child, article > div [engine] comp-specs > div li > strong:first-child, article > div [specs] comp-specs[type=cabConfigurations] strong:first-child, article > div comp-press comp-container.none:first-child:not(.loading):after, article > div comp-truck-hero > .specs > div li > strong:first-child, article > div comp-truck-hero comp-specs > div li > strong:first-child, article > div h1:first-child, article > div h2:first-child, article > div h3:first-child, article > div h4:first-child, article > div h5:first-child, article > div h6:first-child, article > div sudo-h1:first-child, article > div sudo-h2:first-child, article > div sudo-h3:first-child, article > div sudo-h4:first-child, article > div sudo-h5:first-child, article > div sudo-h6:first-child, article > div table.specs tbody td:first-child:not([colspan]):first-of-type, article > div table.specs thead th:first-child, comp-press article > div comp-container.none:first-child:not(.loading):after, comp-truck-hero > .specs > div article > div li > strong:first-child, comp-truck-hero comp-specs > div article > div li > strong:first-child {
margin-top: 0
}
article > div p {
font-size: 18px
}
article > div p:not(:last-child) {
margin-bottom: 2em
}
article > div p.vid-holder {
height: 0;
padding-bottom: 56.5%;
position: relative
}
article > div p.vid-holder iframe {
background: transparent;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
article > div li {
font-size: 18px
}
@media(min-width:768px) {
article > div ul[col] {
grid-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px
}
article > div ul[col="2"] {
-moz-column-count: 2;
column-count: 2
}
article > div ul[col="3"] {
-moz-column-count: 3;
column-count: 3
}
}
article > div img {
height: auto !important
}
article > div img:not([style*="float:"]) {
margin-bottom: 1em
}
article > div img[style*="float: left"] {
margin-right: 1em
}
article > div img[style*="float: right"] {
margin-left: 1em
}
@media(max-width:599px) {
article > div img[style*="float:"] {
display: block;
float: none !important;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0
}
}
article > div > .location {
border-top: 1px solid #e1e1e1;
margin-top: 7%;
padding-top: 7%
}
article > div > .location h2 {
color: #484848;
cursor: pointer;
margin-top: 0
}
article > div > .location h2 a {
color: #484848;
text-decoration: none
}
article > div > .location comp-press comp-container.none:not(.loading):after, article > div > .location h3, article > div > .location h4, comp-press article > div > .location comp-container.none:not(.loading):after {
margin-left: 34px
}
article > div > .location > a {
text-decoration: none
}
article > div > .location > a comp-press comp-container.none:not(.loading):after, article > div > .location > a h3, comp-press article > div > .location > a comp-container.none:not(.loading):after {
color: #6f87a6;
font-size: 17.28px;
position: relative;
transform: translateZ(0)
}
article > div > .location > a h3:before {
font-size: 22px;
height: 20px;
left: -34px;
position: absolute;
top: -2px;
width: 20px
}
article > nav {
display: flex;
margin-bottom: 80px
}
article > nav > a {
background: #f0eeee;
display: flex;
flex: 1;
margin: 0 2px;
padding: 40px 0;
transition: background-color .25s
}
@media(max-width:767px) {
article > nav > a {
flex-direction: column;
padding: 14px 0
}
article > nav > a.next {
flex-direction: column-reverse;
text-align: right
}
article > nav > a .dir {
margin-bottom: 10px
}
}
article > nav > a:first-child {
margin-left: 0
}
article > nav > a:last-child {
margin-right: 0
}
article > nav > a:focus, article > nav > a:hover {
text-decoration: none
}
html:not(.touch) article > nav > a:focus, html:not(.touch) article > nav > a:hover {
background: #6f87a6
}
html:not(.touch) article > nav > a:focus *, html:not(.touch) article > nav > a:focus :after, html:not(.touch) article > nav > a:focus :before, html:not(.touch) article > nav > a:hover *, html:not(.touch) article > nav > a:hover :after, html:not(.touch) article > nav > a:hover :before {
color: #fff !important
}
article > nav > a span {
color: #3b3b3b;
display: block;
flex: 1;
font-family: industry,sans-serif;
padding: 0 6.4421669107vw
}
@media(max-width:1000px) {
article > nav > a span {
padding: 0 3.2942898975vw
}
}
@media(max-width:767px) {
article > nav > a span {
padding: 0 14px
}
}
article > nav > a span.dir {
color: #6f87a6;
font-size: 12px;
letter-spacing: .015em
}
article > nav > a span.dir:after, article > nav > a span.dir:before {
color: #3b3b3b;
display: inline-block;
font-size: 16px;
height: 16px;
line-height: 16px;
vertical-align: middle
}
article > nav > a.prev span.dir:before {
margin-right: 10px
}
article > nav > a.next span.dir {
text-align: right
}
article > nav > a.next span.dir:after {
margin-left: 10px
}
article .actions a.btn {
margin-bottom: 10px
}
@media(max-width:400px) {
article .actions a.btn {
width: 100%
}
}
month-picker {
position: relative;
z-index: 2
}
month-picker > .cover {
background: rgba(68,68,68,0);
position: fixed;
z-index: 1
}
month-picker > input {
cursor: pointer
}
month-picker > section {
background-color: #fff;
box-shadow: 0 0 10px rgba(68,68,68,.13);
display: flex;
flex-wrap: wrap;
left: 0;
max-width: 222px;
padding: 6px;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 2
}
month-picker > section > select {
flex-basis: 50%;
margin: 2px
}
month-picker > section > select + button {
flex-basis: calc(50% - 8px);
margin: 2px;
min-width: 0 !important
}
month-picker > section > label {
align-items: stretch;
cursor: pointer;
display: flex;
flex-basis: 33%;
font-size: .9em;
justify-content: stretch;
max-width: 33%
}
month-picker > section input[type=radio] {
height: 0;
opacity: 0;
width: 0
}
month-picker > section input[type=radio] + span {
background: #484848;
color: #fff;
display: block;
font-size: 11px;
font-weight: 700;
height: 28px;
line-height: 28px;
margin: 1px;
outline: 0 none;
overflow: hidden;
text-overflow: ellipsis;
width: 100%
}
month-picker > section input[type=radio]:checked + span {
background: #ebebeb
}
month-picker:not(.active) > .cover, month-picker:not(.active) > section {
display: none
}
comp-press {
margin: 0 auto;
max-width: 673px;
width: 90%
}
comp-press .btn {
margin-bottom: 10px;
text-align: left
}
comp-press nav {
align-items: stretch;
display: flex;
flex-direction: column;
width: 100%
}
comp-press comp-container {
padding-left: 0;
padding-right: 0
}
comp-press comp-container.loading:after {
-webkit-animation: pressLoadingAnim 1.3s linear infinite;
animation: pressLoadingAnim 1.3s linear infinite;
border-radius: 50%;
content: "";
display: block;
font-size: 20px;
height: 1em;
margin: 100px auto;
position: relative;
text-indent: -9999em;
transform: translateZ(0);
width: 1em
}
comp-press comp-container .btn.load-more {
display: block;
margin: 30px auto 0;
opacity: 1
}
comp-press comp-container.loading .btn.load-more, comp-press comp-container.no-more .btn.load-more {
display: none !important
}
comp-press comp-container.none:not(.loading):after {
content: attr(no-results)
}
comp-press [data-node-name] {
box-sizing: content-box;
cursor: pointer;
display: block;
min-height: 4em;
padding: 20px 0;
position: relative;
z-index: 1
}
comp-press [data-node-name]:not(:last-of-type) {
border-bottom: 1px solid #d7d7d7
}
comp-press [data-node-name] .date {
background-color: #6f87a6;
border-radius: 2px;
color: #fff;
left: 0;
padding: 16px 0;
position: absolute;
text-align: center;
top: 20px;
transition: background-color 1s;
width: 60px;
z-index: 1
}
comp-press [data-node-name] .date .day, comp-press [data-node-name] .date .month {
display: block;
font-size: 18px;
font-weight: 100;
line-height: 1;
text-transform: uppercase
}
comp-press [data-node-name] .title {
color: #3b3b3b;
display: block;
font-size: 18px;
font-weight: 700;
line-height: normal;
margin-left: 100px;
padding-left: 18px;
position: relative;
transition: color .25s;
z-index: 1
}
comp-press [data-node-name]:hover .title {
color: #6f87a6
}
comp-press [data-node-name]:after {
background: #d7d7d7;
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 1s;
width: 0
}
comp-press [data-node-name].loading .date {
background-color: #3b3b3b
}
comp-press [data-node-name].loading:after {
width: 100%
}
@media(max-width:767px) {
comp-press input[type=text].btn.cal, comp-press select.btn {
font-size: 16px
}
}
@-webkit-keyframes pressLoadingAnim {
0%,to {
box-shadow: 0 -3em 0 .2em #6f87a6,2em -2em 0 0 #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 0 #6f87a6
}
12.5% {
box-shadow: 0 -3em 0 0 #6f87a6,2em -2em 0 .2em #6f87a6,3em 0 0 0 #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
25% {
box-shadow: 0 -3em 0 -.5em #6f87a6,2em -2em 0 0 #6f87a6,3em 0 0 .2em #6f87a6,2em 2em 0 0 #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
37.5% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 0 #6f87a6,2em 2em 0 .2em #6f87a6,0 3em 0 0 #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
50% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 0 #6f87a6,0 3em 0 .2em #6f87a6,-2em 2em 0 0 #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
62.5% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 0 #6f87a6,-2em 2em 0 .2em #6f87a6,-3em 0 0 0 #6f87a6,-2em -2em 0 -1em #6f87a6
}
75% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 0 #6f87a6,-3em 0 0 .2em #6f87a6,-2em -2em 0 0 #6f87a6
}
87.5% {
box-shadow: 0 -3em 0 0 #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 0 #6f87a6,-3em 0 0 0 #6f87a6,-2em -2em 0 .2em #6f87a6
}
}
@keyframes pressLoadingAnim {
0%,to {
box-shadow: 0 -3em 0 .2em #6f87a6,2em -2em 0 0 #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 0 #6f87a6
}
12.5% {
box-shadow: 0 -3em 0 0 #6f87a6,2em -2em 0 .2em #6f87a6,3em 0 0 0 #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
25% {
box-shadow: 0 -3em 0 -.5em #6f87a6,2em -2em 0 0 #6f87a6,3em 0 0 .2em #6f87a6,2em 2em 0 0 #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
37.5% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 0 #6f87a6,2em 2em 0 .2em #6f87a6,0 3em 0 0 #6f87a6,-2em 2em 0 -1em #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
50% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 0 #6f87a6,0 3em 0 .2em #6f87a6,-2em 2em 0 0 #6f87a6,-3em 0 0 -1em #6f87a6,-2em -2em 0 -1em #6f87a6
}
62.5% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 0 #6f87a6,-2em 2em 0 .2em #6f87a6,-3em 0 0 0 #6f87a6,-2em -2em 0 -1em #6f87a6
}
75% {
box-shadow: 0 -3em 0 -1em #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 0 #6f87a6,-3em 0 0 .2em #6f87a6,-2em -2em 0 0 #6f87a6
}
87.5% {
box-shadow: 0 -3em 0 0 #6f87a6,2em -2em 0 -1em #6f87a6,3em 0 0 -1em #6f87a6,2em 2em 0 -1em #6f87a6,0 3em 0 -1em #6f87a6,-2em 2em 0 0 #6f87a6,-3em 0 0 0 #6f87a6,-2em -2em 0 .2em #6f87a6
}
}
#request-quote .location > .content > *, comp-container[hero] comp-dealers > header .location > .content > *, comp-dealers > inner-content .location > .content > * {
display: block;
padding-left: 50px;
position: relative
}
#request-quote .location > .content > * :before, comp-container[hero] comp-dealers > header .location > .content > * :before, comp-dealers > inner-content .location > .content > * :before {
left: 0;
position: absolute;
top: -12px
}
#request-quote .location > .content > h2, comp-container[hero] comp-dealers > header .location > .content > h2, comp-dealers > inner-content .location > .content > h2 {
color: #484848;
font-size: 24px;
font-weight: 500
}
#request-quote .location > .content > h2.elite:after, comp-container[hero] comp-dealers > header .location > .content > h2.elite:after, comp-dealers > inner-content .location > .content > h2.elite:after {
background-image: url(../png/elite-support.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 30px;
margin-left: 20px;
vertical-align: middle;
width: 43px
}
@media(min-width:960px) {
#request-quote .location > .content > h2 :before, comp-container[hero] comp-dealers > header .location > .content > h2 :before, comp-dealers > inner-content .location > .content > h2 :before, comp-dealers > inner-content .location > .content .tw-flex-none :before {
color: #713738;
font-size: 50px;
left: -12px
}
#request-quote .location > .content > h2 label, comp-container[hero] comp-dealers > header .location > .content > h2 label, comp-dealers > inner-content .location > .content > h2 label, comp-dealers > inner-content .location > .content .tw-flex-none label {
color: #713738;
font-size: 10px;
left: -2px;
position: absolute;
text-align: center;
top: -3px;
width: 30px
}
comp-dealers > inner-content .location > .content .tw-flex-none label {
color: #713738;
font-size: 10px;
left: -2px;
position: absolute;
text-align: center;
top: -8px;
width: 30px
}
}
@media(max-width:959px) {
#request-quote .location > .content > h2, comp-container[hero] comp-dealers > header .location > .content > h2, comp-dealers > inner-content .location > .content > h2 {
padding-left: 0
}
#request-quote .location > .content > h2 :before, comp-container[hero] comp-dealers > header .location > .content > h2 :before, comp-dealers > inner-content .location > .content > h2 :before, comp-dealers > inner-content .location > .content .tw-flex-none :before {
display: none
}
#request-quote .location > .content > h2 label:after, comp-container[hero] comp-dealers > header .location > .content > h2 label:after, comp-dealers > inner-content .location > .content > h2 label:after, comp-dealers > inner-content .location > .content .tw-flex-none label:after {
content: ". "
}
#request-quote .location > .content > h2 label, #request-quote .location > .content > h2 > span, comp-container[hero] comp-dealers > header .location > .content > h2 label, comp-container[hero] comp-dealers > header .location > .content > h2 > span, comp-dealers > inner-content .location > .content > h2 label, comp-dealers > inner-content .location > .content > h2 > span,, comp-dealers > inner-content .location > .content .tw-flex-none > span {
color: inherit;
font-size: inherit;
font-weight: inherit
}
}
#request-quote .location > .content > h2 .partner:before, #request-quote .location > .content > h2 .partner label, comp-container[hero] comp-dealers > header .location > .content > h2 .partner:before, comp-container[hero] comp-dealers > header .location > .content > h2 .partner label, comp-dealers > inner-content .location > .content > h2 .partner:before, comp-dealers > inner-content .location > .content > h2 .partner label {
color: #6f87a6
}
#request-quote .location > .content > a, comp-container[hero] comp-dealers > header .location > .content > a, comp-dealers > inner-content .location > .content > a {
font-family: industry,sans-serif;
font-size: 18px;
font-weight: 500
}
#request-quote .location > .content > a :before, comp-container[hero] comp-dealers > header .location > .content > a :before, comp-dealers > inner-content .location > .content > a :before {
color: #713738;
top: 0;
transform: none
}
#request-quote .location > .content > a.phone, comp-container[hero] comp-dealers > header .location > .content > a.phone, comp-dealers > inner-content .location > .content > a.phone {
margin-bottom: 15px
}
#request-quote .location > .content > h4, comp-container[hero] comp-dealers > header .location > .content > h4, comp-dealers > inner-content .location > .content > h4 {
line-height: inherit
}
#request-quote .location > .content .departments, comp-container[hero] comp-dealers > header .location > .content .departments, comp-dealers > inner-content .location > .content .departments {
margin: 40px 0 10px
}
#request-quote .location > .content .departments > span, comp-container[hero] comp-dealers > header .location > .content .departments > span, comp-dealers > inner-content .location > .content .departments > span {
display: inline-block;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 10px;
font-weight: 300;
margin: 10px 0;
text-transform: uppercase;
width: 140px
}
#request-quote .location > .content .departments > span:before, comp-container[hero] comp-dealers > header .location > .content .departments > span:before, comp-dealers > inner-content .location > .content .departments > span:before {
border: 1px solid #d7d7d7;
border-radius: 50%;
display: inline-block;
font-size: 25px;
height: 50px;
line-height: 50px !important;
margin-right: 10px;
position: static;
text-align: center;
vertical-align: middle;
width: 50px
}
#request-quote .location > .actions, comp-container[hero] comp-dealers > header .location > .actions, comp-dealers > inner-content .location > .actions {
padding-right: 74px;
position: relative
}
@media(min-width:960px) {
#request-quote .location > .actions, comp-container[hero] comp-dealers > header .location > .actions, comp-dealers > inner-content .location > .actions {
padding-left: 50px
}
}
#request-quote .location > .actions > a, comp-container[hero] comp-dealers > header .location > .actions > a, comp-dealers > inner-content .location > .actions > a {
display: inline-block;
font-size: 17px;
margin-right: 8px;
margin-top: 10px;
min-width: 186px;
text-align: center
}
#request-quote .location > .actions > .open, comp-container[hero] comp-dealers > header .location > .actions > .open, comp-dealers > inner-content .location > .actions > .open {
display: block;
font-family: industry,sans-serif;
font-size: 14px;
font-weight: 500;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 74px
}
#request-quote .location > .actions > .open > span, comp-container[hero] comp-dealers > header .location > .actions > .open > span, comp-dealers > inner-content .location > .actions > .open > span {
background: #63b978 linear-gradient(#8fa1b9,#8fa1b9) bottom no-repeat;
background-size: 100% 0;
border-radius: 45px;
display: block;
height: 40px;
margin: 0 auto;
position: relative;
width: 40px
}
#request-quote .location > .actions > .open > span:before, comp-container[hero] comp-dealers > header .location > .actions > .open > span:before, comp-dealers > inner-content .location > .actions > .open > span:before {
color: #fff;
display: block;
font-size: 16px;
height: 36px;
left: 50%;
line-height: 36px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 36px
}
comp-dealers {
display: block
}
@media(max-width:767px) {
comp-dealers comp-tabs {
display: none
}
}
comp-dealers .marker-label {
text-align: center;
width: 30px
}
comp-container[hero] comp-dealers > header, comp-dealers > inner-content {
z-index: 2
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header, comp-dealers > inner-content {
display: flex
}
comp-container[hero] comp-dealers > header > *, comp-dealers > inner-content > * {
flex: 1
}
}
comp-container[hero] comp-dealers > header > aside, comp-dealers > inner-content > aside {
position: relative
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header > aside, comp-dealers > inner-content > aside {
flex-basis: 50%;
order: 2
}
}
comp-container[hero] comp-dealers > header > aside > header, comp-dealers > inner-content > aside > header {
background: #ebebeb;
margin-bottom: 1px;
padding: 28px 48px
}
@media(max-width:959px) {
comp-container[hero] comp-dealers > header > aside > header, comp-dealers > inner-content > aside > header {
padding: 10px
}
comp-container[hero] comp-dealers > header > aside > header #by-location, comp-dealers > inner-content > aside > header #by-location {
display: flex
}
comp-container[hero] comp-dealers > header > aside > header #by-location button, comp-dealers > inner-content > aside > header #by-location button {
margin-left: 10px;
padding: 0 10px
}
comp-container[hero] comp-dealers > header > aside > header #by-location input, comp-dealers > inner-content > aside > header #by-location input {
margin: 0
}
}
comp-container[hero] comp-dealers > header > aside > header > comp-tabs, comp-dealers > inner-content > aside > header > comp-tabs {
margin-bottom: 17px
}
comp-container[hero] comp-dealers > header > aside > header input[type=text], comp-dealers > inner-content > aside > header input[type=text] {
background: #fff
}
comp-container[hero] comp-dealers > header > aside > header header > a, comp-container[hero] comp-dealers > header > aside > header inner-content > a, comp-container[hero] comp-dealers > inner-content > aside > header header > a, comp-dealers > inner-content > aside > header comp-container[hero] header > a, comp-dealers > inner-content > aside > header inner-content > a {
display: inline-block;
float: right
}
comp-container[hero] comp-dealers > header > aside > header header > a:last-child, comp-container[hero] comp-dealers > header > aside > header inner-content > a:last-child, comp-container[hero] comp-dealers > inner-content > aside > header header > a:last-child, comp-dealers > inner-content > aside > header comp-container[hero] header > a:last-child, comp-dealers > inner-content > aside > header inner-content > a:last-child {
margin-right: 10px
}
@media(max-width:959px) {
comp-container[hero] comp-dealers > header > aside > header header > a, comp-container[hero] comp-dealers > header > aside > header inner-content > a, comp-container[hero] comp-dealers > inner-content > aside > header header > a, comp-dealers > inner-content > aside > header comp-container[hero] header > a, comp-dealers > inner-content > aside > header inner-content > a {
display: none
}
comp-container[hero] comp-dealers > header > aside > header header > [fields], comp-container[hero] comp-dealers > header > aside > header inner-content > [fields], comp-container[hero] comp-dealers > inner-content > aside > header header > [fields], comp-dealers > inner-content > aside > header comp-container[hero] header > [fields], comp-dealers > inner-content > aside > header inner-content > [fields] {
flex-grow: 1
}
}
comp-container[hero] comp-dealers > header > aside > .filters-container header, comp-dealers > inner-content > aside > .filters-container header {
background: #ebebeb;
display: flex
}
comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-info-toggle, comp-dealers > inner-content > aside > .filters-container button.filters-info-toggle {
background: transparent linear-gradient(#e1e1e1,#e1e1e1) 0 no-repeat;
background-size: 1px 25px;
cursor: pointer;
flex-basis: 24%;
max-width: 150px;
position: relative
}
comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-info-toggle:after, comp-dealers > inner-content > aside > .filters-container button.filters-info-toggle:after {
border: 1px solid #888;
border-radius: 100%;
color: #888;
font-size: 12px;
height: 24px;
left: 50%;
line-height: 24px;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%,-50%);
transition: all .25s ease-in-out;
width: 24px
}
comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-info-toggle.active:after, comp-dealers > inner-content > aside > .filters-container button.filters-info-toggle.active:after {
background-color: #6f87a6;
color: #fff
}
comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-toggle, comp-dealers > inner-content > aside > .filters-container button.filters-toggle {
background: #ebebeb;
border: 0;
color: #888;
display: block;
padding: 8px 8%;
position: relative;
text-align: left;
width: 100%
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-toggle, comp-dealers > inner-content > aside > .filters-container button.filters-toggle {
cursor: default
}
}
@media(max-width:959px) {
comp-container[hero] comp-dealers > header > aside > .filters-container button.filters-toggle.active, comp-dealers > inner-content > aside > .filters-container button.filters-toggle.active {
color: #6f87a6
}
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info, comp-dealers > inner-content > aside > .filters-container .filters-info {
background: #c0c7ce;
color: #5a6574;
padding: 25px
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info, comp-dealers > inner-content > aside > .filters-container .filters-info {
max-height: 50vh;
overflow: auto
}
}
@media(min-width:530px) {
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div, comp-dealers > inner-content > aside > .filters-container .filters-info > div {
display: flex
}
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div:not(:last-child), comp-dealers > inner-content > aside > .filters-container .filters-info > div:not(:last-child) {
margin-bottom: 15px
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div > *, comp-dealers > inner-content > aside > .filters-container .filters-info > div > * {
line-height: 1.5
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div > h4, comp-dealers > inner-content > aside > .filters-container .filters-info > div > h4 {
color: #000;
flex-grow: 0;
flex-shrink: 0;
margin: 0 20px 0 0;
width: 26%
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div > div, comp-dealers > inner-content > aside > .filters-container .filters-info > div > div {
color: #5a6574;
flex-grow: 1;
max-width: 70%
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div > div a, comp-dealers > inner-content > aside > .filters-container .filters-info > div > div a {
box-shadow: 0 1px 0 rgba(0,0,0,.25);
color: #000;
transition: all .25s
}
comp-container[hero] html:not(.touch) comp-dealers > header > aside > .filters-container .filters-info > div > div a:hover, html:not(.touch) comp-container[hero] comp-dealers > header > aside > .filters-container .filters-info > div > div a:hover, html:not(.touch) comp-dealers > inner-content > aside > .filters-container .filters-info > div > div a:hover {
box-shadow: 0 1px 0 rgba(0,0,0,.5)
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters, comp-dealers > inner-content > aside > .filters-container .filters {
background: #fff;
font-size: 0
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header > aside > .filters-container .filters, comp-dealers > inner-content > aside > .filters-container .filters {
display: block !important;
margin-bottom: 1px;
margin-right: -1px
}
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter, comp-dealers > inner-content > aside > .filters-container .filters > .filter {
background: linear-gradient(#8fa1b9,#8fa1b9) bottom no-repeat;
background-size: 90% 0;
border: 1px solid #e1e1e1;
box-sizing: content-box;
color: #6f87a6;
cursor: pointer;
display: inline-block;
font-size: 0;
height: 42px;
margin: 0 -1px -1px 0;
overflow: hidden;
position: relative;
transition: all .25s ease-in-out;
width: calc(33.3% - 1px)
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter > span, comp-dealers > inner-content > aside > .filters-container .filters > .filter > span {
box-sizing: border-box;
font-size: 14.52px;
left: 0;
line-height: 1;
padding: 10px;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%
}
@media(max-width:430px) {
comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter > span, comp-dealers > inner-content > aside > .filters-container .filters > .filter > span {
font-size: 9px
}
}
comp-container[hero] html:not(.touch) comp-dealers > header > aside > .filters-container .filters > .filter:not(.disabled):hover, html:not(.touch) comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter:not(.disabled):hover, html:not(.touch) comp-dealers > inner-content > aside > .filters-container .filters > .filter:not(.disabled):hover {
background-size: 100% 100%;
color: #fff
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter:not(.disabled).selected, comp-dealers > inner-content > aside > .filters-container .filters > .filter:not(.disabled).selected {
background-color: #6f87a6;
background-size: 90% 0;
color: #fff
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter:not(.disabled).selected:before, comp-dealers > inner-content > aside > .filters-container .filters > .filter:not(.disabled).selected:before {
background-color: transparent
}
comp-container[hero] comp-dealers > header > aside > .filters-container .filters > .filter.disabled, comp-dealers > inner-content > aside > .filters-container .filters > .filter.disabled {
color: #c0c7ce;
cursor: not-allowed
}
comp-container[hero] comp-dealers > header > section, comp-dealers > inner-content > section {
flex-basis: 50%;
padding: 0 20px
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header > section, comp-dealers > inner-content > section {
max-width: 50%;
min-height: calc(100vh + 358px);
padding: 0 67px
}
}
comp-container[hero] comp-dealers > header > section .location, comp-dealers > inner-content > section .location {
border-top: 1px solid #d7d7d7;
padding: 38px 0
}
comp-container[hero] comp-dealers > header [list], comp-dealers > inner-content [list] {
padding-top: 30px
}
[engine] comp-specs > div comp-container[hero] comp-dealers > header li[list] > strong, [engine] comp-specs > div comp-dealers > inner-content li[list] > strong, [specs] comp-specs[type=cabConfigurations] comp-container[hero] comp-dealers > header [list] > strong, [specs] comp-specs[type=cabConfigurations] comp-dealers > inner-content [list] > strong, article table.specs tbody comp-container[hero] comp-dealers > header [list] > td:not([colspan]):first-of-type, article table.specs tbody comp-dealers > inner-content [list] > td:not([colspan]):first-of-type, article table.specs thead comp-container[hero] comp-dealers > header [list] > th, article table.specs thead comp-dealers > inner-content [list] > th, comp-container[hero] comp-dealers > header [engine] comp-specs > div li[list] > strong, comp-container[hero] comp-dealers > header [list] > h5, comp-container[hero] comp-dealers > header [specs] comp-specs[type=cabConfigurations] [list] > strong, comp-container[hero] comp-dealers > header article table.specs tbody [list] > td:not([colspan]):first-of-type, comp-container[hero] comp-dealers > header article table.specs thead [list] > th, comp-container[hero] comp-dealers > header comp-truck-hero > .specs > div li[list] > strong, comp-container[hero] comp-dealers > header comp-truck-hero comp-specs > div li[list] > strong, comp-dealers > inner-content [engine] comp-specs > div li[list] > strong, comp-dealers > inner-content [list] > h5, comp-dealers > inner-content [specs] comp-specs[type=cabConfigurations] [list] > strong, comp-dealers > inner-content article table.specs tbody [list] > td:not([colspan]):first-of-type, comp-dealers > inner-content article table.specs thead [list] > th, comp-dealers > inner-content comp-truck-hero > .specs > div li[list] > strong, comp-dealers > inner-content comp-truck-hero comp-specs > div li[list] > strong, comp-truck-hero > .specs > div comp-container[hero] comp-dealers > header li[list] > strong, comp-truck-hero > .specs > div comp-dealers > inner-content li[list] > strong, comp-truck-hero comp-specs > div comp-container[hero] comp-dealers > header li[list] > strong, comp-truck-hero comp-specs > div comp-dealers > inner-content li[list] > strong {
border-bottom: 1px solid #d7d7d7;
font-weight: 700;
margin: 0;
padding: 0 0 30px;
text-align: center
}
comp-container[hero] comp-dealers > header [list] > h2, comp-dealers > inner-content [list] > h2 {
color: #484848;
font-size: 24px;
margin: 30px 0 10px;
text-align: center;
text-transform: uppercase
}
@media(min-width:960px) {
comp-container[hero] comp-dealers > header .map-spacer, comp-container[hero] comp-dealers > header [map], comp-dealers > inner-content .map-spacer, comp-dealers > inner-content [map] {
height: calc(100vh - 36px)
}
comp-container[hero] comp-dealers > header .map-spacer.map-fixed:not(.map-fixed-bottom) .map-container, comp-dealers > inner-content .map-spacer.map-fixed:not(.map-fixed-bottom) .map-container {
position: fixed;
right: 0;
top: 36px;
width: 50%;
z-index: 1
}
comp-container[hero] comp-dealers > header .map-spacer.map-fixed-bottom, comp-dealers > inner-content .map-spacer.map-fixed-bottom {
bottom: 0;
position: absolute;
right: 0;
width: 100%
}
}
@media(max-width:959px) {
comp-container[hero] comp-dealers > header .map-spacer, comp-dealers > inner-content .map-spacer {
bottom: 100%;
left: 0;
position: fixed;
width: 100%
}
comp-container[hero] comp-dealers > header [map], comp-dealers > inner-content [map] {
height: 400px;
opacity: 0
}
}
comp-dealer {
display: block
}
comp-dealer > [map] {
height: 312px;
width: 100%
}
comp-dealer heading {
text-align: center
}
comp-dealer [actions] {
padding-bottom: 28px
}
@media(min-width:550px) {
comp-dealer [actions] {
display: flex
}
}
comp-dealer [actions] > * {
display: block;
flex: 1;
margin-bottom: 10px;
text-align: center
}
@media(min-width:550px) {
comp-dealer [actions] > :last-child {
margin-left: 42px
}
}
comp-dealer [phone] {
display: flex
}
comp-dealer [phone] > * {
flex: 1
}
comp-dealer [phone] strong {
display: block
}
comp-dealer [services] > div {
grid-column-gap: 50px;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 50px;
column-gap: 50px
}
comp-dealer [details] {
padding-bottom: 0;
padding-top: 0
}
comp-dealer item-department {
display: block
}
comp-dealer item-department:not(:last-child) {
margin-bottom: 40px
}
comp-dealer item-department section {
display: flex
}
comp-dealer item-department section > * {
flex: 1
}
comp-dealer item-department section > header {
flex-basis: 30%;
max-width: 30%
}
@media(max-width:767px) {
comp-dealer item-department section > header {
flex-basis: 50%;
max-width: 50%
}
}
comp-dealer item-department > section > header {
flex-basis: 15%;
max-width: 15%
}
@media(max-width:767px) {
comp-dealer item-department > section > header {
flex-basis: 25%;
max-width: 25%
}
}
comp-dealer h4 {
border-bottom: 1px solid #d7d7d7;
font-size: 20px;
padding-bottom: 10px
}
take-over {
bottom: 0;
left: 0;
max-height: 100vh;
max-width: 100vw;
overflow-x: hidden;
overflow-y: auto;
right: 0;
top: 0;
transition: opacity 2.5s linear;
z-index: 12
}
@media(max-width:767px) {
take-over {
padding-top: 86px
}
}
take-over.fade-out {
opacity: 0
}
take-over > comp-cover {
background-color: rgba(0,0,0,.75);
bottom: 0;
left: 0;
right: 0;
top: 0
}
take-over > button {
background: rgba(0,0,0,.25);
border: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
top: 10px;
z-index: 1
}
@media(min-width:768px) {
take-over > button {
right: 10px
}
}
@media(max-width:767px) {
take-over > button {
left: 10px
}
}
take-over > section {
background: #03516b;
color: #fff;
margin: 10px;
max-width: 1200px;
padding: 30px
}
take-over > section > * {
flex: 1
}
take-over > section > section {
flex: .75
}
@media(min-width:768px) {
take-over > section > section {
padding: 30px
}
}
take-over > section > section > header {
pointer-events: none
}
take-over > section > section h2 {
font-weight: 400;
margin-left: auto;
margin-right: auto;
max-width: 750px
}
@media(min-width:768px) {
take-over > section > section h2 {
font-size: 36px;
margin-top: 0
}
}
@media(max-width:767px) {
take-over > section > section h2 {
font-size: 20px
}
}
take-over > section > section h6 {
font-size: 18px;
font-weight: 400;
margin-bottom: 20px;
margin-top: 20px;
max-width: 750px
}
@media(max-width:767px) {
take-over > section > section h6 {
font-size: 16px
}
}
take-over > section > section h2, take-over > section > section h6 {
color: #fff
}
@media(min-width:768px) {
take-over > section > section > a {
margin-top: 15px
}
}
take-over > section > section > a[role=button] {
background-color: #fff;
color: #000
}
take-over > section > section > p {
font-size: 12px;
margin-top: 30px
}
take-over > section > img, take-over > section > video {
height: auto;
width: 100%
}
comp-revealer {
padding: 2.9282576867vw 0
}
comp-revealer > h2, comp-revealer > p {
margin: 0 auto;
max-width: 760px;
text-align: center
}
comp-revealer > h2 {
font-size: 48px;
padding-bottom: 2.9282576867vw;
text-align: center
}
comp-revealer h4 {
margin-top: -1.4641288433vw;
text-align: center
}
comp-revealer > figure {
position: relative
}
comp-revealer > figure img {
max-width: none;
width: 100vw
}
comp-revealer > figure > div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 1px 0 0 #6f87a6;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform: translateZ(0);
width: 0
}
comp-revealer > figure > span {
background-image: url(https://freightliner.azureedge.net/images/drag-arrows.svg),linear-gradient(90deg,#566e8c 0,#8fa1b9);
background-position: 50%,0 0;
background-repeat: no-repeat,repeat;
background-size: 75% auto,100% 100%;
border-radius: 50%;
cursor: move;
height: 58px;
left: 50%;
margin-left: -29px;
margin-top: -29px;
opacity: 0;
position: absolute;
top: 50%;
transform: translateZ(0) scale(0);
width: 58px;
z-index: 1
}
comp-revealer > figure > span.draggable {
background-image: url(https://freightliner.azureedge.net/images/drag-arrows.svg),linear-gradient(90deg,#43556c 0,#6f87a6)
}
comp-revealer > figure > comp-background {
background-color: transparent;
transform: opacity .25s
}
comp-revealer > figure > comp-background:not(.active) {
opacity: 0
}
comp-revealer > figure.is-visible > div {
-webkit-animation: revealer-bounce-in .7s;
animation: revealer-bounce-in .7s;
width: 50%
}
comp-revealer > figure.is-visible > span {
opacity: 1;
transform: translateZ(0) scale(1);
transition: transform .3s .7s,opacity 0s .7s
}
comp-revealer > nav {
border-bottom: 1px solid #ebebeb;
overflow-x: auto;
padding: 10px;
text-align: center;
white-space: nowrap
}
comp-revealer > nav button {
margin: 0 10px
}
comp-revealer > nav button:not(.active) {
background-color: #e2e6ea;
color: #3b3b3b
}
comp-revealer > p {
padding-top: 45px
}
comp-revealer > p:not(.active) {
display: none
}
@-webkit-keyframes revealer-bounce-in {
0% {
width: 0
}
60% {
width: 55%
}
to {
width: 50%
}
}
@keyframes revealer-bounce-in {
0% {
width: 0
}
60% {
width: 55%
}
to {
width: 50%
}
}
miles-counter {
background: linear-gradient(135deg,#040b0f,#0e2431);
padding: 80px 40px 50px
}
miles-counter > section {
background-color: #010406;
border: 1px solid rgba(255,255,255,.2);
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,.25),0 0 0 20px #1b252a;
color: #fff
}
miles-counter > section > digit-holder {
flex: 1;
font-size: 46px;
height: 72px;
line-height: 72px;
overflow: hidden
}
miles-counter > section > digit-holder:not(:first-child):not(:last-child):before {
background: linear-gradient(180deg,rgba(109,179,211,0) 0,#6db3d3 50%,rgba(109,179,211,0));
box-shadow: 0 0 10px rgba(109,179,211,.5);
content: "";
height: 90%;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px
}
miles-counter > section > digit-holder:last-child {
background-color: #0b1a21;
border-radius: 0 10px 10px 0
}
miles-counter > section > digit-holder:last-child > span {
font-size: 36px;
transition: transform 2s linear
}
miles-counter > section > digit-holder > span {
height: 72px;
min-height: 72px;
transition: transform .2s linear
}
miles-counter > section > digit-holder > span:before {
content: attr(number)
}
miles-counter > section > digit-holder > span[number="10"]:before {
content: "0"
}
miles-counter > section > digit-holder[current="0"] > span {
transform: translateY(0);
transition: none !important
}
miles-counter > section > digit-holder[current="1"] > span {
transform: translateY(-72px)
}
miles-counter > section > digit-holder[current="2"] > span {
transform: translateY(-144px)
}
miles-counter > section > digit-holder[current="3"] > span {
transform: translateY(-216px)
}
miles-counter > section > digit-holder[current="4"] > span {
transform: translateY(-288px)
}
miles-counter > section > digit-holder[current="5"] > span {
transform: translateY(-360px)
}
miles-counter > section > digit-holder[current="6"] > span {
transform: translateY(-432px)
}
miles-counter > section > digit-holder[current="7"] > span {
transform: translateY(-504px)
}
miles-counter > section > digit-holder[current="8"] > span {
transform: translateY(-576px)
}
miles-counter > section > digit-holder[current="9"] > span {
transform: translateY(-648px)
}
miles-counter > section > digit-holder[current="10"] > span {
transform: translateY(-720px)
}
miles-counter > section:after {
background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,0) 51%,hsla(0,0%,100%,0));
content: ""
}
miles-counter:after {
color: #6f87a6;
content: "Miles in real-world operation *";
font-size: 16px;
font-weight:600;
margin-top: 60px;
text-transform: uppercase
}
body.configurator-open > :not(#configurator-outer):not(.pac-container) {
display: none
}
#configurator {
background: #f6f6f6;
bottom: 0;
height: auto;
overflow: hidden;
position: fixed;
right: -105%;
top: 0;
transform: translateZ(0);
transition: right .5s ease;
width: 100vw;
z-index: 1000
}
#configurator.open {
overflow-x: hidden;
overflow-y: hidden;
right: 0
}
#configurator.loading {
position: fixed
}
#configurator.loading:before {
-webkit-animation: loading 1s linear infinite alternate;
animation: loading 1s linear infinite alternate;
border-radius: 50%;
bottom: 0;
content: "";
height: 20px;
left: 0;
left: -80px;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
z-index: 999
}
#configurator.closed {
left: 100%
}
#configurator .hidden {
display: none !important
}
#configurator #configurator-viewers {
position: relative
}
@media screen and (max-width:992px) {
#configurator #configurator-viewers {
background: #f6f6f6;
height: 0;
max-width: none;
top: 0;
width: 100%
}
}
#configurator #configurator-viewers #truck {
height: 100%;
left: 0;
max-width: calc(100% - 400px);
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 75%;
z-index: 1
}
@media screen and (max-width:992px) {
#configurator #configurator-viewers #truck {
height: 0;
max-width: 100%;
padding-bottom: 66.666%;
position: relative;
width: 100%
}
}
#configurator #configurator-viewers #exterior-builder, #configurator #configurator-viewers #interior-builder {
cursor: move;
display: none;
visibility: hidden;
z-index: -1
}
#configurator #configurator-viewers #interior-builder {
height: 100%;
position: relative
}
#configurator #configurator-viewers #interior-builder.loading:after {
-webkit-animation: loading 1s linear infinite alternate;
animation: loading 1s linear infinite alternate;
border-radius: 50%;
bottom: 0;
content: "";
height: 20px;
left: 0;
left: -80px;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
z-index: 1
}
#configurator #configurator-viewers #interior-builder .interior-view-unavailable {
background: url(../jpg/new%20cascadia-fab-interior-fuel%20efficiency-tire%20pressure%20monitoring.jpg) no-repeat 50%/contain;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10
}
#configurator #configurator-viewers #interior-builder .interior-view-unavailable.active {
display: block
}
#configurator #configurator-viewers #interior-builder .btn-fullscreen {
border: 3px dashed #fff;
height: 30px;
position: absolute;
right: 20px;
top: 20px;
width: 30px;
z-index: 11
}
#configurator #configurator-viewers .viewers {
height: 100%
}
#configurator #configurator-viewers .viewers[data-viewer=exterior] #exterior-builder, #configurator #configurator-viewers .viewers[data-viewer=interior] #interior-builder, #configurator #configurator-viewers .viewers[data-viewer=misc] #exterior-builder {
display: block;
opacity: 1;
visibility: visible;
z-index: 2
}
#configurator #configurator-viewers .viewers[data-mode=explore] #exterior-builder, #configurator #configurator-viewers .viewers[data-mode=explore] #interior-builder {
max-width: 100%;
width: 100%
}
#configurator #configurator-viewers .viewers[data-mode=explore][data-viewer=interior] #interior-builder {
z-index: 5
}
#configurator #configurator-viewers .viewers[data-mode=explore][data-viewer=exterior] #exterior-builder {
z-index: 3
}
#configurator #configurator-viewers .viewers[data-mode=build] #exterior-builder .layers, #configurator #configurator-viewers .viewers[data-mode=build] #interior-builder {
margin: 0;
max-width: 75%;
width: calc(100% - 400px)
}
@media screen and (max-width:992px) {
#configurator #configurator-viewers .viewers[data-viewer=exterior] #interior-builder, #configurator #configurator-viewers .viewers[data-viewer=interior] #exterior-builder {
padding-bottom: 0
}
#configurator #configurator-viewers #exterior-builder, #configurator #configurator-viewers #exterior-builder .layers, #configurator #configurator-viewers #interior-builder {
max-width: 100% !important;
width: 100% !important
}
}
#configurator #hotspot-overlay {
z-index: 10
}
#configurator #hotspot-overlay .vdom {
height: 100%;
left: 100%;
opacity: .3;
position: absolute;
top: 0;
transition: left 1s,opacity 1s;
width: 100%;
z-index: 5
}
#configurator #hotspot-overlay .vdom.active {
left: 0;
opacity: 1
}
#configurator #hotspot-overlay .wrap {
height: 100%;
left: 0;
overflow: auto;
padding-bottom: 100px;
padding-top: 25px;
position: absolute;
top: 0
}
#configurator #hotspot-overlay .pillar-icon {
margin-left: 10px
}
#configurator #hotspot-overlay .pillar-icon:before {
margin-right: 10px
}
#configurator #hotspot-overlay comp-press comp-container.none:not(.loading):after, #configurator #hotspot-overlay h3, comp-press #configurator #hotspot-overlay comp-container.none:not(.loading):after {
border-bottom: 1px solid #ebebeb;
color: #6f87a6;
margin-bottom: 25px;
padding-bottom: 25px;
padding-left: 10px
}
#configurator #hotspot-overlay .content {
padding: 0 10px
}
#configurator #hotspot-overlay .hotspot-content {
background: #fff;
height: 100%;
left: 0;
max-width: calc(100% - 400px);
position: absolute;
text-align: center;
width: 75%
}
#configurator #hotspot-overlay .hotspot-content:before {
bottom: 0;
content: "LOADING...";
font-size: 32px;
height: 50px;
left: 0;
line-height: 50px;
margin: auto;
position: absolute;
right: 0;
top: 0
}
#configurator #hotspot-overlay .hotspot-content .img {
height: 100%;
left: 0;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
#configurator #hotspot-overlay .hotspot-slider {
border-left: 1px solid #ebebeb;
height: 100%;
min-width: 400px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 25%
}
#configurator #hotspot-overlay .hotspot-slide {
background: #f6f6f6;
height: 100%;
left: 100%;
position: absolute;
top: 0;
transition: left .5s ease;
width: 100%
}
#configurator #hotspot-overlay .hotspot-slide.active {
left: 0
}
#configurator #hotspot-overlay .hotspot-slide.prev {
left: -100%
}
#configurator #hotspot-overlay .hotspot-slide.next {
left: 100%
}
#configurator #hotspot-overlay .hotspot-slide .btn {
bottom: 0;
cursor: pointer;
font-size: 13px;
height: 80px;
line-height: 80px;
padding-bottom: 0;
padding-top: 0;
position: absolute;
width: 50%
}
#configurator #hotspot-overlay .hotspot-slide .btn:before {
content: "";
left: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
#configurator #hotspot-overlay .hotspot-slide .btn.prev {
left: 0
}
#configurator #hotspot-overlay .hotspot-slide .btn.prev:before {
content: "<"
}
#configurator #hotspot-overlay .hotspot-slide .btn.next {
right: 0
}
#configurator #hotspot-overlay .hotspot-slide .btn.next:before {
content: ">";
left: auto;
right: 10px
}
#configurator #hotspot-overlay .close {
background: #fff;
color: #6f87a6;
cursor: pointer;
font-size: 40px;
height: 60px;
line-height: 60px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 20
}
#configurator #hotspot-overlay .close:before {
bottom: 0;
content: "✕";
font-size: 32px;
left: 0;
margin: auto;
opacity: .4;
position: absolute;
right: 0;
top: 0
}
@media screen and (max-width:992px) {
#configurator #hotspot-overlay .vdom {
position: fixed;
top: 0;
z-index: -1
}
#configurator #hotspot-overlay .vdom.active {
height: 100%;
width: 100%;
z-index: 10
}
#configurator #hotspot-overlay .fab-wrap {
height: 100%;
overflow: auto;
position: static
}
#configurator #hotspot-overlay .hotspot-content {
height: auto;
max-width: none;
position: static;
width: 100%
}
#configurator #hotspot-overlay .hotspot-content .img {
height: 0;
max-height: none;
max-width: none;
padding-bottom: 66.666%;
position: static
}
#configurator #hotspot-overlay .hotspot-slider {
min-width: 0;
position: relative;
width: 100%
}
}
#configurator #configurator-infobox {
border-left: 1px solid #ebebeb;
height: calc(100% - 120px);
position: absolute;
right: 0;
top: 120px
}
@media screen and (max-width:992px) {
#configurator #configurator-infobox {
height: auto;
max-width: none;
position: relative;
top: auto;
width: 100%
}
}
#configurator #configurator-infobox .vdom {
background: #fff;
height: 100%;
min-width: 400px;
overflow-x: hidden;
overflow-y: auto;
padding: 20px;
position: absolute;
right: 0;
width: 25%;
z-index: 4
}
@media screen and (max-width:992px) {
#configurator #configurator-infobox .vdom {
max-width: none;
min-width: 0;
overflow: visible;
position: relative;
width: 100%
}
}
#configurator #configurator-infobox .vdom.explore {
transform: translateX(100%)
}
#configurator #configurator-infobox .vdom.build {
transform: translateX(0)
}
@media screen and (max-width:992px) {
#configurator #configurator-infobox .vdom {
max-width: none;
min-width: 0;
overflow: visible;
position: relative;
transform: none !important;
width: 100%
}
}
#configurator #configurator-infobox .btn {
font-size: 14px;
padding-left: 5px;
padding-right: 5px
}
#configurator .hotspot-label {
background: rgba(170,170,170,.5);
border: 1px solid #aaa;
border-radius: 50%;
color: #fff;
cursor: pointer;
height: 45px;
position: absolute;
transition: background-color .4s,transform .4s;
width: 45px;
z-index: 3
}
#configurator .hotspot-label .wat {
color: #fff;
left: 110%;
position: absolute;
text-shadow: 1px 1px 0 #000;
white-space: nowrap
}
#configurator .hotspot-label:before {
background: #aaa;
border-radius: 50%;
content: " ";
transition: background-color .4s
}
#configurator .hotspot-label:after, #configurator .hotspot-label:before {
bottom: 0;
height: 37px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 37px
}
#configurator .hotspot-label:after {
color: #eceff3;
content: "╳";
line-height: 37px;
text-align: center;
transform: rotate(45deg)
}
#configurator .hotspot-label.active, #configurator .hotspot-label:active, #configurator .hotspot-label:focus, #configurator .hotspot-label:hover {
background: rgba(111,135,166,.5);
border: 1px solid #6f87a6;
transform: rotate(-90deg)
}
#configurator .hotspot-label.active:before, #configurator .hotspot-label:active:before, #configurator .hotspot-label:focus:before, #configurator .hotspot-label:hover:before {
background: #6f87a6
}
@media screen and (max-width:992px) {
#configurator .hotspot-label {
height: 25px;
width: 25px
}
#configurator .hotspot-label:before {
height: 17px;
width: 17px
}
#configurator .hotspot-label:after {
font-size: .8em;
height: 17px;
line-height: 17px;
width: 17px
}
}
#configurator .option-group h2 {
color: #3b3b3b;
font-family: Industry;
font-size: 18px;
font-weight: 500;
position: relative
}
#configurator .option-group h2.icon-info {
cursor: pointer
}
#configurator .option-group h2.icon-info:after {
border: 1px solid #666;
border-radius: 50%;
content: "i";
cursor: pointer;
display: inline-block;
font-size: .75em;
height: 18px;
line-height: 18px;
margin-left: 8px;
position: relative;
right: 0;
text-align: center;
top: 0;
top: -1px;
vertical-align: middle;
width: 18px
}
#configurator .option-group .category-info {
display: none
}
#configurator .option-group:first-child h2 {
margin-top: 0
}
#configurator .progress-bar-mask {
background: rgba(255,255,255,.7);
display: none;
height: 4px;
left: 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 998
}
#configurator .progress-bar-mask.remainder {
top: 0
}
#configurator .progress-bar-mask .progress-bar-line {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#configurator .progress-bar-mask .progress-bar-line svg {
left: 0;
position: absolute;
top: 0
}
#configurator .progress-bar-wrap {
bottom: 0;
height: 200px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 50%;
width: 200px;
z-index: 999
}
#configurator .layers {
cursor: move;
height: 100%;
left: 0;
margin: 0 auto;
max-width: 1365px;
position: absolute;
right: 0;
width: 100%
}
#configurator .layers.disabled {
display: none
}
#configurator .layers .vdom {
background: #e9e9e9;
left: 50%;
margin: 0 auto;
position: absolute;
top: 50%;
transform: translate(-50%,-50%)
}
#configurator .layers .image-layer, #configurator .layers .paint-layer {
height: 100%;
position: absolute;
width: 100%
}
#configurator .layers .image-layer img, #configurator .layers .paint-layer img {
max-height: 100%;
max-width: 100%
}
#configurator .layers .layer-angle {
left: 0;
opacity: 0;
position: absolute;
top: 0
}
#configurator .layers .layer-angle::-moz-selection {
background: none
}
#configurator .layers .layer-angle::selection {
background: none
}
#configurator .layers .layer-angle[data-image-src=""], #configurator .layers .layer-angle[src=""] {
display: none
}
body.configurator-open {
overflow: hidden
}
#configurator-mini {
background: #f6f6f6;
height: 100%;
overflow: hidden;
position: fixed;
right: -105%;
top: 0;
transform: translateZ(0);
transition: right .5s ease;
width: 100vw;
z-index: 1000
}
#configurator-mini.open {
overflow-x: hidden;
overflow-y: auto;
right: 0
}
#configurator-mini.loading {
position: fixed
}
#configurator-mini.loading:before {
-webkit-animation: loading 1s linear infinite alternate;
animation: loading 1s linear infinite alternate;
border-radius: 50%;
bottom: 0;
content: "";
height: 20px;
left: 0;
left: -80px;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
z-index: 999
}
@keyframes loading {
0% {
background-color: #6f87a6;
box-shadow: 40px 0 0 0 rgba(111,135,166,.2),80px 0 0 0 rgba(111,135,166,.2)
}
25% {
background-color: rgba(111,135,166,.4);
box-shadow: 40px 0 0 0 #6f87a6,80px 0 0 0 rgba(111,135,166,.2)
}
75% {
background-color: rgba(111,135,166,.4);
box-shadow: 40px 0 0 0 rgba(111,135,166,.2),80px 0 0 0 #6f87a6
}
}
#configurator-mini.closed {
left: 100%
}
@media screen and (max-width:992px) {
#configurator-mini {
background: #fff
}
}
#configurator-mini .main-vdom {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#configurator-mini .hidden {
display: none !important
}
#configurator-mini #social {
bottom: 80px;
left: 30px;
position: absolute;
z-index: 10
}
#configurator-mini #social a {
background: #6f87a6;
background-size: 100% 0;
border: 3px solid #6f87a6;
border-radius: 100%;
box-sizing: content-box;
color: #fff;
display: inline-block;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
height: 24px;
line-height: 24px;
margin: 3px;
position: absolute;
text-align: center;
text-shadow: none;
transition: all .25s ease-in-out;
width: 24px
}
#configurator-mini #social a:nth-child(2) {
left: 0;
top: -55px
}
#configurator-mini #social a:nth-child(3) {
left: 34px;
top: -39px
}
#configurator-mini #social a:nth-child(4) {
left: 54px;
top: -7px
}
#configurator-mini #social a:nth-child(5) {
left: 50px;
top: 31px
}
#configurator-mini #social a:hover {
background: #6f87a6;
border: 3px solid #dbe1e9;
color: #fff !important;
text-decoration: none
}
@media screen and (max-width:992px) {
#configurator-mini #social {
margin-left: 20px;
position: static
}
#configurator-mini #social a {
position: static
}
#configurator-mini #social a:first-child {
display: none
}
}
#configurator-mini #btn-send-to-dealer {
background: #6f87a6;
border-color: #6f87a6;
border-radius: 6px;
bottom: 30px;
color: #fff;
font-size: 14px;
left: calc(100% - 600px);
position: absolute;
text-transform: uppercase;
white-space: nowrap;
z-index: 10
}
#configurator-mini #btn-send-to-dealer:active, #configurator-mini #btn-send-to-dealer:focus, #configurator-mini #btn-send-to-dealer:hover {
background-color: #713738;
background-image: linear-gradient(180deg,#865859 0,#623435);
background-repeat: repeat-x;
border-color: #713738;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF865859",endColorstr="#FF623435",GradientType=0)
}
@media screen and (max-width:992px) {
#configurator-mini #btn-send-to-dealer {
background: none;
border: 0;
color: #6f87a6;
float: right;
font-size: 16px;
position: static
}
#configurator-mini #btn-send-to-dealer:active, #configurator-mini #btn-send-to-dealer:focus, #configurator-mini #btn-send-to-dealer:hover {
background: none;
border: 0;
box-shadow: none;
text-decoration: underline
}
}
#configurator-mini #configurator-selector .vdom {
background: #fff;
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.3);
height: calc(100% - 60px);
left: 0;
position: absolute;
top: 60px;
width: 100%;
z-index: 10
}
#configurator-mini #configurator-selector .vdom.active {
display: block
}
#configurator-mini #configurator-selector .vdom #cab-selector {
height: 100%;
margin: 0 auto;
max-width: 1365px;
position: relative
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom #cab-selector {
height: 200px
}
}
#configurator-mini #configurator-selector .vdom .cab {
cursor: pointer;
height: calc(50% - 20px);
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translateZ(0);
transition: transform .5s ease,top .5s ease
}
#configurator-mini #configurator-selector .vdom .cab img {
max-height: calc(100% - 65px)
}
#configurator-mini #configurator-selector .vdom .cab h2 {
bottom: 0;
margin-bottom: 0;
position: absolute;
text-align: center;
width: 100%
}
#configurator-mini #configurator-selector .vdom .cab.active, #configurator-mini #configurator-selector .vdom .cab.inactive {
top: 20px
}
#configurator-mini #configurator-selector .vdom .cab.inactive {
opacity: .5
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom .cab.inactive {
opacity: 1
}
}
#configurator-mini #configurator-selector .vdom .cab.cab-day {
transform: translate(-100%,-50%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-day.active {
transform: translate(-50%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-day.inactive {
transform: translate(-170%)
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom .cab.cab-day {
transform: translate(-80%,50%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-day.active, #configurator-mini #configurator-selector .vdom .cab.cab-day.inactive {
transform: translate(-80%)
}
}
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper {
transform: translate(10%,-50%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper.active {
transform: translate(-50%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper.inactive {
transform: translate(60%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper img {
margin-top: 4%
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper {
transform: translate(-10%,50%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper.active, #configurator-mini #configurator-selector .vdom .cab.cab-sleeper.inactive {
transform: translate(-10%)
}
#configurator-mini #configurator-selector .vdom .cab.cab-sleeper img {
margin-top: 0
}
}
#configurator-mini #configurator-selector .vdom .cab.active, #configurator-mini #configurator-selector .vdom .cab:focus, #configurator-mini #configurator-selector .vdom .cab:hover {
opacity: 1
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom .cab {
height: auto;
opacity: 1;
padding: 20px 10px;
width: 50%
}
#configurator-mini #configurator-selector .vdom .cab h2 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase
}
}
#configurator-mini #configurator-selector .vdom #truck-selector {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
width: 60%
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom #truck-selector {
height: auto;
position: static;
width: 80%
}
}
#configurator-mini #configurator-selector .vdom .truck-cab {
cursor: pointer;
display: inline-block;
padding: 15px;
position: relative;
text-align: center;
width: 20%
}
#configurator-mini #configurator-selector .vdom .truck-cab comp-press comp-container.none:not(.loading):after, #configurator-mini #configurator-selector .vdom .truck-cab h3, comp-press #configurator-mini #configurator-selector .vdom .truck-cab comp-container.none:not(.loading):after {
font-size: 12px;
margin-bottom: 0;
margin-top: 10px
}
#configurator-mini #configurator-selector .vdom .truck-cab:hover {
background: #fff;
box-shadow: 0 0 10px 1px rgba(0,0,0,.2)
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-selector .vdom .truck-cab {
width: 50%
}
}
#configurator-mini #configurator-header-primary, #configurator-mini #configurator-header-secondary {
box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
position: relative;
z-index: 6
}
#configurator-mini #configurator-header-primary nav .truck-label, #configurator-mini #configurator-header-primary nav a, #configurator-mini #configurator-header-secondary nav .truck-label, #configurator-mini #configurator-header-secondary nav a {
color: #3b3b3b;
display: inline-block;
font-family: Industry;
font-size: 14px;
font-weight: 500;
height: 60px;
line-height: 60px;
margin: 0 10px;
padding: 0 10px;
vertical-align: top
}
#configurator-mini #configurator-header-primary nav .truck-label.active, #configurator-mini #configurator-header-primary nav .truck-label:active, #configurator-mini #configurator-header-primary nav .truck-label:focus, #configurator-mini #configurator-header-primary nav .truck-label:hover, #configurator-mini #configurator-header-primary nav a.active, #configurator-mini #configurator-header-primary nav a:active, #configurator-mini #configurator-header-primary nav a:focus, #configurator-mini #configurator-header-primary nav a:hover, #configurator-mini #configurator-header-secondary nav .truck-label.active, #configurator-mini #configurator-header-secondary nav .truck-label:active, #configurator-mini #configurator-header-secondary nav .truck-label:focus, #configurator-mini #configurator-header-secondary nav .truck-label:hover, #configurator-mini #configurator-header-secondary nav a.active, #configurator-mini #configurator-header-secondary nav a:active, #configurator-mini #configurator-header-secondary nav a:focus, #configurator-mini #configurator-header-secondary nav a:hover {
border-bottom: 4px solid #6f87a6;
color: #6f87a6
}
#configurator-mini #configurator-header-primary nav .truck-label.disabled, #configurator-mini #configurator-header-primary nav a.disabled, #configurator-mini #configurator-header-secondary nav .truck-label.disabled, #configurator-mini #configurator-header-secondary nav a.disabled {
border-bottom: 0;
cursor: not-allowed;
opacity: .15
}
#configurator-mini #configurator-header-primary nav .truck-label, #configurator-mini #configurator-header-secondary nav .truck-label {
color: #747474;
font-size: 12px
}
#configurator-mini #configurator-header-primary nav .truck-label.active, #configurator-mini #configurator-header-primary nav .truck-label:active, #configurator-mini #configurator-header-primary nav .truck-label:focus, #configurator-mini #configurator-header-primary nav .truck-label:hover, #configurator-mini #configurator-header-secondary nav .truck-label.active, #configurator-mini #configurator-header-secondary nav .truck-label:active, #configurator-mini #configurator-header-secondary nav .truck-label:focus, #configurator-mini #configurator-header-secondary nav .truck-label:hover {
border-bottom: 0;
color: #3b3b3b
}
#configurator-mini #configurator-header-primary nav .logo, #configurator-mini #configurator-header-secondary nav .logo {
border: 0;
display: inline-block;
line-height: 56px;
margin: 0;
padding: 0 36px
}
#configurator-mini #configurator-header-primary nav .logo img, #configurator-mini #configurator-header-secondary nav .logo img {
height: 16px
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-header-primary nav .logo, #configurator-mini #configurator-header-secondary nav .logo {
padding: 0 15px
}
#configurator-mini #configurator-header-primary nav .logo img, #configurator-mini #configurator-header-secondary nav .logo img {
height: 12px
}
}
#configurator-mini #configurator-header-primary nav .main-nav-wrap, #configurator-mini #configurator-header-secondary nav .main-nav-wrap {
display: inline-block;
vertical-align: top
}
#configurator-mini #configurator-header-primary nav .main-nav-wrap .main-nav, #configurator-mini #configurator-header-primary nav .main-nav-wrap .truck-label, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .main-nav, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .truck-label {
font-size: 16px;
font-weight: 700;
text-transform: uppercase
}
#configurator-mini #configurator-header-primary nav .main-nav-wrap .truck-label, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .truck-label {
margin-left: 0;
padding-left: 0
}
#configurator-mini #configurator-header-primary nav .main-nav-wrap .btn-back, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .btn-back {
display: none
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-header-primary nav .main-nav-wrap .btn-back, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .btn-back {
display: inline-block;
width: 40px
}
#configurator-mini #configurator-header-primary nav .main-nav-wrap .main-nav, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .main-nav {
display: none;
margin: 0 10px
}
#configurator-mini #configurator-header-primary nav .main-nav-wrap .truck-label, #configurator-mini #configurator-header-secondary nav .main-nav-wrap .truck-label {
display: none
}
}
#configurator-mini #configurator-header-primary nav .primary, #configurator-mini #configurator-header-secondary nav .primary {
background: #fff;
height: 60px
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-header-primary nav .primary, #configurator-mini #configurator-header-secondary nav .primary {
box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
height: auto;
position: relative
}
#configurator-mini #configurator-header-primary nav .primary a, #configurator-mini #configurator-header-secondary nav .primary a {
font-weight: 700;
text-transform: uppercase
}
}
#configurator-mini #configurator-header-primary nav .btn-back, #configurator-mini #configurator-header-secondary nav .btn-back {
background: url(../png/back-arrow.png) 50% no-repeat;
border: 0;
border-radius: 0;
border-right: 1px solid #fefefe;
height: 60px;
margin-right: 20px;
width: 100px
}
#configurator-mini #configurator-header-primary nav .secondary, #configurator-mini #configurator-header-secondary nav .secondary {
background: #f6f6f6;
box-shadow: inset 0 8px 12px -8px rgba(0,0,0,.5);
height: 60px
}
#configurator-mini #configurator-header-primary nav .secondary .btn-group, #configurator-mini #configurator-header-secondary nav .secondary .btn-group {
display: inline-block !important;
padding-right: 20px;
vertical-align: top;
width: auto
}
#configurator-mini #configurator-header-primary nav .secondary .interior-not-available, #configurator-mini #configurator-header-secondary nav .secondary .interior-not-available {
display: inline-block;
height: 60px;
line-height: 60px;
margin-left: 10px;
vertical-align: top
}
#configurator-mini #configurator-header-primary nav .secondary .btn, #configurator-mini #configurator-header-secondary nav .secondary .btn {
border-radius: 20px;
display: inline-block;
height: 40px;
line-height: 40px;
margin-top: 10px;
padding: 0 30px;
position: relative;
text-transform: capitalize
}
#configurator-mini #configurator-header-primary nav .secondary .btn.active, #configurator-mini #configurator-header-secondary nav .secondary .btn.active {
z-index: 2
}
#configurator-mini #configurator-header-primary nav .secondary .btn.btn-default, #configurator-mini #configurator-header-secondary nav .secondary .btn.btn-default {
background: #d7d7d7;
border: 0;
box-shadow: inset 0 0 10px 1px rgba(0,0,0,.2);
color: #000;
padding-right: 50px
}
#configurator-mini #configurator-header-primary nav .secondary .btn + .btn, #configurator-mini #configurator-header-secondary nav .secondary .btn + .btn {
margin-left: -40px;
position: relative
}
#configurator-mini #configurator-header-primary nav .secondary .btn + .btn.btn-default, #configurator-mini #configurator-header-secondary nav .secondary .btn + .btn.btn-default {
padding-left: 50px;
padding-right: 30px
}
#configurator-mini #configurator-header-primary nav .secondary .truck-label, #configurator-mini #configurator-header-secondary nav .secondary .truck-label {
display: none;
font-size: 16px;
font-weight: 700;
text-align: center
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-header-primary nav .secondary, #configurator-mini #configurator-header-secondary nav .secondary {
background: #fff;
box-shadow: none;
height: auto
}
#configurator-mini #configurator-header-primary nav .secondary .truck-label, #configurator-mini #configurator-header-secondary nav .secondary .truck-label {
display: block
}
#configurator-mini #configurator-header-primary nav .secondary .btn-back, #configurator-mini #configurator-header-secondary nav .secondary .btn-back {
display: none
}
#configurator-mini #configurator-header-primary nav .secondary .btn-group, #configurator-mini #configurator-header-secondary nav .secondary .btn-group {
box-shadow: 0 15px 15px -15px rgba(0,0,0,.3);
padding-bottom: 10px;
position: relative;
text-align: center;
width: 100%;
z-index: 1
}
#configurator-mini #configurator-header-primary nav .secondary a, #configurator-mini #configurator-header-secondary nav .secondary a {
background: #f6f6f6;
border-bottom: 1px solid #ebebeb;
display: block;
font-size: 24px;
margin: 0;
padding-left: 20px;
position: relative
}
#configurator-mini #configurator-header-primary nav .secondary a:after, #configurator-mini #configurator-header-secondary nav .secondary a:after {
content: ">";
padding-right: 20px;
position: absolute;
right: 20px
}
#configurator-mini #configurator-header-primary nav .secondary a.active, #configurator-mini #configurator-header-secondary nav .secondary a.active {
background-image: linear-gradient(180deg,#8497b0 0,#60728b);
background-repeat: repeat-x;
border: 0;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF8497B0",endColorstr="#FF60728B",GradientType=0)
}
}
#configurator-mini #configurator-header-primary .close, #configurator-mini #configurator-header-secondary .close {
background: none;
border: 0;
border-left: 2px solid #f4f4f4;
color: #000;
font-family: Industry;
font-size: 16px;
font-weight: 500;
height: 60px;
line-height: 60px;
padding: 0;
position: absolute;
right: 0;
text-transform: uppercase;
top: 0;
width: 95px;
z-index: 5
}
#configurator-mini #configurator-header-primary .close.active, #configurator-mini #configurator-header-primary .close:active, #configurator-mini #configurator-header-primary .close:focus, #configurator-mini #configurator-header-primary .close:hover, #configurator-mini #configurator-header-secondary .close.active, #configurator-mini #configurator-header-secondary .close:active, #configurator-mini #configurator-header-secondary .close:focus, #configurator-mini #configurator-header-secondary .close:hover {
color: #6f87a6
}
#configurator-mini #configurator-header-secondary {
position: absolute;
top: 60px;
width: 100%
}
#configurator-mini #configurator-header-secondary .pillar-nav:before {
font-size: 22px;
margin-right: 10px;
position: relative;
top: 4px
}
@media screen and (min-width:993px)and (max-width:1200px) {
#configurator-mini #configurator-header-secondary .pillar-nav span {
display: none
}
}
@media screen and (min-width:1200px)and (max-width:1300px) {
#configurator-mini #configurator-header-secondary .pillar-nav {
font-size: 12px;
margin: 0;
padding: 0 5px
}
}
#configurator-mini #configurator-header-secondary .build-options {
float: right
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-header-secondary .build-options {
float: none
}
#configurator-mini #configurator-header-primary, #configurator-mini #configurator-header-secondary {
box-shadow: none;
position: relative;
top: 0
}
}
#configurator-mini #buttons {
background: #fff;
padding: 20px
}
#configurator-mini #buttons comp-press comp-container.none:not(.loading):after, #configurator-mini #buttons h3, comp-press #configurator-mini #buttons comp-container.none:not(.loading):after {
font-size: 24px;
margin: 5px 0
}
#configurator-mini #buttons .btn {
cursor: pointer;
display: block;
padding: 0;
text-align: left
}
#configurator-mini #buttons .btn:hover {
color: #333;
text-decoration: underline
}
#configurator-mini #buttons .btn.off {
text-decoration: line-through
}
#configurator-mini #buttons .toggle {
display: block;
text-align: right
}
#configurator-mini #buttons .center {
background: none;
border: 0;
float: left;
padding: 5px 10px
}
#configurator-mini #buttons .center:hover {
color: blue
}
#configurator-mini #configurator-viewers {
background: #f6f6f6;
height: calc(100% - 120px);
position: relative;
top: 60px
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-viewers {
background: #fff;
height: 0;
max-width: none;
padding-bottom: 66.666%;
top: 0;
width: 100%
}
}
#configurator-mini #configurator-viewers #truck {
height: 100%;
left: 0;
max-width: calc(100% - 400px);
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 75%;
z-index: 1
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-viewers #truck {
height: 0;
max-width: 100%;
padding-bottom: 66.666%;
position: relative;
width: 100%
}
}
#configurator-mini #configurator-viewers #exterior-builder, #configurator-mini #configurator-viewers #interior-builder {
cursor: move;
visibility: hidden;
z-index: -1
}
#configurator-mini #configurator-viewers #interior-builder {
height: 100%;
position: absolute
}
#configurator-mini #configurator-viewers #interior-builder:before {
background: url(../png/360-interior.png) 100% 0 no-repeat;
background-size: contain;
content: "";
height: 0;
left: 30px;
max-width: 158px;
opacity: .5;
padding-bottom: 16%;
position: absolute;
top: 30px;
width: 5%;
z-index: 1
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-viewers #interior-builder:before {
left: 10px;
opacity: .7;
top: 10px;
width: 10%
}
}
#configurator-mini #configurator-viewers #interior-builder.loading:after {
-webkit-animation: loading 1s linear infinite alternate;
animation: loading 1s linear infinite alternate;
border-radius: 50%;
bottom: 0;
content: "";
height: 20px;
left: 0;
left: -80px;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
z-index: 1
}
#configurator-mini #configurator-viewers #interior-builder .interior-view-unavailable {
background: url(../jpg/new%20cascadia-fab-interior-fuel%20efficiency-tire%20pressure%20monitoring.jpg) no-repeat 50%/contain;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10
}
#configurator-mini #configurator-viewers #interior-builder .interior-view-unavailable.active {
display: block
}
#configurator-mini #configurator-viewers #interior-builder .btn-fullscreen {
border: 3px dashed #fff;
height: 30px;
position: absolute;
right: 20px;
top: 20px;
width: 30px;
z-index: 11
}
#configurator-mini #configurator-viewers .viewers {
height: 100%
}
#configurator-mini #configurator-viewers .viewers[data-viewer=exterior] #exterior-builder, #configurator-mini #configurator-viewers .viewers[data-viewer=interior] #interior-builder, #configurator-mini #configurator-viewers .viewers[data-viewer=misc] #exterior-builder {
display: block;
opacity: 1;
visibility: visible;
z-index: 2
}
#configurator-mini #configurator-viewers .viewers[data-mode=explore] #exterior-builder, #configurator-mini #configurator-viewers .viewers[data-mode=explore] #interior-builder {
max-width: 100%;
width: 100%
}
#configurator-mini #configurator-viewers .viewers[data-mode=explore][data-viewer=interior] #interior-builder {
z-index: 5
}
#configurator-mini #configurator-viewers .viewers[data-mode=explore][data-viewer=exterior] #exterior-builder {
z-index: 3
}
#configurator-mini #configurator-viewers .viewers[data-mode=build] #exterior-builder .layers, #configurator-mini #configurator-viewers .viewers[data-mode=build] #interior-builder {
margin: 0;
max-width: 75%;
width: calc(100% - 400px)
}
#configurator-mini #configurator-viewers .viewers[data-mode=build] #hotspot-overlay .vdom {
left: 100%;
opacity: .3
}
#configurator-mini #configurator-viewers .viewers[data-mode=build] .hotspot-label, #configurator-mini #configurator-viewers .viewers[data-mode=build] .view-hotspots {
display: none !important
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-viewers .viewers[data-viewer=exterior] #interior-builder, #configurator-mini #configurator-viewers .viewers[data-viewer=interior] #exterior-builder {
padding-bottom: 0
}
#configurator-mini #configurator-viewers #exterior-builder, #configurator-mini #configurator-viewers #exterior-builder .layers, #configurator-mini #configurator-viewers #interior-builder {
max-width: 100% !important;
width: 100% !important
}
}
#configurator-mini #hotspot-overlay {
z-index: 10
}
#configurator-mini #hotspot-overlay .vdom {
background: #f6f6f6;
height: 100%;
left: 100%;
opacity: .3;
position: absolute;
top: 0;
transition: left 1s,opacity 1s;
width: 100%;
z-index: 5
}
#configurator-mini #hotspot-overlay .vdom.active {
left: 0;
opacity: 1
}
#configurator-mini #hotspot-overlay .wrap {
height: calc(100% - 80px);
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 10px;
padding-top: 25px;
position: absolute;
top: 0;
width: 100%
}
#configurator-mini #hotspot-overlay .wrap.full-height {
height: 100%
}
#configurator-mini #hotspot-overlay .pillar-icon {
margin-left: 10px
}
#configurator-mini #hotspot-overlay .pillar-icon:before {
margin-right: 10px
}
#configurator-mini #hotspot-overlay comp-press comp-container.none:not(.loading):after, #configurator-mini #hotspot-overlay h3, comp-press #configurator-mini #hotspot-overlay comp-container.none:not(.loading):after {
border-bottom: 1px solid #ebebeb;
color: #6f87a6;
margin-bottom: 25px;
padding-bottom: 25px;
padding-left: 10px
}
#configurator-mini #hotspot-overlay .content {
padding: 0 10px
}
#configurator-mini #hotspot-overlay .content ul {
padding: 0 0 0 20px
}
#configurator-mini #hotspot-overlay .content ul li {
list-style: disc outside
}
#configurator-mini #hotspot-overlay .hotspot-content {
background: #fff;
height: 100%;
left: 0;
max-width: calc(100% - 400px);
position: absolute;
text-align: center;
width: 75%
}
#configurator-mini #hotspot-overlay .hotspot-content.disabled {
display: none
}
#configurator-mini #hotspot-overlay .hotspot-content:before {
-webkit-animation: loading 1s linear infinite alternate;
animation: loading 1s linear infinite alternate;
border-radius: 50%;
bottom: 0;
content: "";
height: 20px;
left: 0;
left: -80px;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
z-index: 1
}
#configurator-mini #hotspot-overlay .hotspot-content .img {
height: 100%;
left: 0;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
#configurator-mini #hotspot-overlay .hotspot-slider {
border-left: 1px solid #ebebeb;
height: 100%;
min-width: 400px;
overflow-x: hidden;
overflow-y: visible;
position: absolute;
right: 0;
top: 0;
width: 25%
}
#configurator-mini #hotspot-overlay .hotspot-slide {
background: #f6f6f6;
height: 100%;
left: 100%;
position: absolute;
top: 0;
transition: left .5s ease;
width: 100%
}
#configurator-mini #hotspot-overlay .hotspot-slide.active {
left: 0
}
#configurator-mini #hotspot-overlay .hotspot-slide.prev {
left: -100%
}
#configurator-mini #hotspot-overlay .hotspot-slide.next {
left: 100%
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn {
bottom: 0;
cursor: pointer;
font-size: 13px;
height: 80px;
line-height: 20px;
padding-bottom: 0;
padding-top: 0;
position: absolute;
width: 50%
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn:before {
content: "";
left: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn.prev {
left: 0
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn.prev:before {
content: "<"
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn.next {
right: 0
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn.next:before {
content: ">";
left: auto;
right: 10px
}
#configurator-mini #hotspot-overlay .hotspot-slide .btn-jwlauncher {
background-image: linear-gradient(180deg,#8598b1 0,#5e738d);
background-repeat: repeat-x;
border-color: #5e738d;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF8598B1",endColorstr="#FF5E738D",GradientType=0);
height: 40px;
position: static !important;
width: auto
}
#configurator-mini #hotspot-overlay .close {
background: #fff;
color: #6f87a6;
cursor: pointer;
font-size: 40px;
height: 60px;
line-height: 60px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 20
}
#configurator-mini #hotspot-overlay .close:before {
bottom: 0;
content: "✕";
font-size: 32px;
left: 0;
margin: auto;
opacity: .4;
position: absolute;
right: 0;
top: 0
}
@media screen and (max-width:992px) {
#configurator-mini #hotspot-overlay .vdom {
position: fixed;
top: 0;
z-index: -1
}
#configurator-mini #hotspot-overlay .vdom.active {
height: 200%;
width: 100%;
z-index: 10
}
#configurator-mini #hotspot-overlay .fab-wrap {
height: 100%;
overflow: auto;
overflow-x: hidden;
position: static
}
#configurator-mini #hotspot-overlay .hotspot-content {
background: #f6f6f6;
height: auto;
max-width: none;
overflow: hidden;
position: relative;
width: 100%
}
#configurator-mini #hotspot-overlay .hotspot-content .img {
height: 0;
max-height: none;
max-width: none;
padding-bottom: 75%;
position: relative
}
#configurator-mini #hotspot-overlay .hotspot-slider {
height: auto;
min-width: 0;
overflow: visible;
position: relative;
width: 100%;
z-index: 1
}
#configurator-mini #hotspot-overlay .hotspot-slider .hotspot-slide {
height: 400px;
transform: translateZ(0)
}
#configurator-mini #hotspot-overlay .hotspot-slider .hotspot-slide .btn {
position: fixed
}
}
#configurator-mini #configurator-infobox {
border-left: 1px solid #ebebeb;
height: calc(100% - 120px);
position: absolute;
right: 0;
top: 120px
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-infobox {
height: auto;
max-width: none;
position: relative;
top: auto;
width: 100%
}
}
#configurator-mini #configurator-infobox .vdom {
background: #fff;
height: 100%;
min-width: 400px;
overflow-x: hidden;
overflow-y: auto;
padding: 20px;
position: absolute;
right: 0;
width: 25%;
z-index: 4
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-infobox .vdom {
max-width: none;
min-width: 0;
overflow: visible;
position: relative;
width: 100%
}
}
#configurator-mini #configurator-infobox .vdom.explore {
transform: translateX(100%)
}
#configurator-mini #configurator-infobox .vdom.build {
transform: translateX(0)
}
@media screen and (max-width:992px) {
#configurator-mini #configurator-infobox .vdom {
max-width: none;
min-width: 0;
overflow: visible;
position: relative;
transform: none !important;
width: 100%
}
}
#configurator-mini #configurator-infobox .vdom > div + div comp-press comp-container.none:not(.loading):after, #configurator-mini #configurator-infobox .vdom > div + div h3, comp-press #configurator-mini #configurator-infobox .vdom > div + div comp-container.none:not(.loading):after {
margin-top: 35px
}
#configurator-mini #configurator-infobox comp-press comp-container.none:first-child:not(.loading):after, #configurator-mini #configurator-infobox h3:first-child, comp-press #configurator-mini #configurator-infobox comp-container.none:first-child:not(.loading):after {
margin-top: 0
}
#configurator-mini #configurator-infobox .btn {
font-size: 14px;
padding-left: 5px;
padding-right: 5px
}
#configurator-mini .hotspot-label {
background: rgba(170,170,170,.5);
border: 1px solid #aaa;
border-radius: 50%;
color: #fff;
cursor: pointer;
height: 45px;
position: absolute;
transition: background-color .4s,transform .4s;
width: 45px;
z-index: 3
}
#configurator-mini .hotspot-label:before {
background: #aaa;
border-radius: 50%;
content: " ";
transition: background-color .4s
}
#configurator-mini .hotspot-label:after, #configurator-mini .hotspot-label:before {
bottom: 0;
height: 37px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 37px
}
#configurator-mini .hotspot-label:after {
background: url(../png/hotspot-icon.png) 50%;
background-size: contain;
color: #eceff3;
content: "";
font-size: 26px;
line-height: 37px;
opacity: .5;
text-align: center;
transform: rotate(0deg)
}
#configurator-mini .hotspot-label.active, #configurator-mini .hotspot-label:active, #configurator-mini .hotspot-label:focus, #configurator-mini .hotspot-label:hover {
background: rgba(111,135,166,.5);
border: 1px solid #6f87a6;
transform: rotate(-90deg)
}
#configurator-mini .hotspot-label.active:before, #configurator-mini .hotspot-label:active:before, #configurator-mini .hotspot-label:focus:before, #configurator-mini .hotspot-label:hover:before {
background: #6f87a6
}
@media screen and (max-width:992px) {
#configurator-mini .hotspot-label {
height: 30px;
width: 30px
}
#configurator-mini .hotspot-label:before {
height: 22px;
width: 22px
}
#configurator-mini .hotspot-label:after {
font-size: .8em;
height: 22px;
line-height: 22px;
width: 22px
}
}
#configurator-mini .option-group h2 {
color: #3b3b3b;
font-family: Industry;
font-size: 18px;
font-weight: 500;
position: relative
}
#configurator-mini .option-group h2.icon-info {
cursor: pointer
}
#configurator-mini .option-group h2.icon-info:after {
border: 1px solid #666;
border-radius: 50%;
content: "i";
cursor: pointer;
display: inline-block;
font-size: .75em;
height: 18px;
line-height: 18px;
margin-left: 8px;
position: relative;
right: 0;
text-align: center;
top: 0;
top: -1px;
vertical-align: middle;
width: 18px
}
#configurator-mini .option-group .category-note {
font-size: 11px;
margin-top: -10px
}
#configurator-mini .option-group .category-info {
display: none;
padding-bottom: 15px
}
#configurator-mini .option-group .category-info comp-press comp-container.none:not(.loading):after, #configurator-mini .option-group .category-info h3, comp-press #configurator-mini .option-group .category-info comp-container.none:not(.loading):after {
font-size: 16px;
margin-bottom: 0;
margin-top: 15px
}
#configurator-mini .option-group .category-info comp-press comp-container.none:first-child:not(.loading):after, #configurator-mini .option-group .category-info h3:first-child, comp-press #configurator-mini .option-group .category-info comp-container.none:first-child:not(.loading):after {
margin-top: 0
}
#configurator-mini .option-group .category-info p, #configurator-mini .option-group .category-info ul {
font-size: 14px;
line-height: 17px;
margin-bottom: 5px
}
#configurator-mini .option-group .category-info ul {
list-style: disc outside
}
#configurator-mini .option-group .category-info ul li {
list-style: disc outside;
margin-left: 16px
}
#configurator-mini .option-group .category-info ul li li {
list-style: square outside
}
#configurator-mini .option-group:first-child h2 {
margin-top: 0
}
#configurator-mini .progress-bar-mask {
background: rgba(255,255,255,.7);
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999
}
#configurator-mini .progress-bar-wrap {
bottom: 0;
height: 200px;
left: 0;
margin: auto;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 200px
}
#configurator-mini .progress-bar-wrap .progress-bar-circle:before {
background-image: linear-gradient(180deg,#6f94b5 0,#496e8f);
background-repeat: repeat-x;
border-radius: 50%;
bottom: 0;
content: "";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF6F94B5",endColorstr="#FF496E8F",GradientType=0);
height: 48%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 48%
}
#configurator-mini .progress-bar-wrap .progress-bar-circle .progressbar-text {
font-weight: 700;
line-height: 1.3;
text-align: center
}
#configurator-mini .progress-bar-wrap.remainder {
display: none;
height: 4px;
margin: 0;
width: 100%
}
#configurator-mini .progress-bar-wrap.remainder .progress-bar-line {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#configurator-mini .progress-bar-wrap.remainder .progress-bar-line svg {
left: 0;
position: absolute;
top: 0
}
#configurator-mini .layers {
cursor: move;
height: 100%;
left: 0;
margin: 0 auto;
max-width: 1365px;
position: absolute;
right: 0;
width: 100%
}
#configurator-mini .layers.disabled {
display: none
}
#configurator-mini .layers:before {
background: url(../png/360-exterior.png) 100% 0 no-repeat;
background-size: contain;
content: "";
height: 0;
left: 30px;
max-width: 158px;
opacity: .5;
padding-bottom: 7%;
position: absolute;
top: 30px;
width: 5%;
z-index: 1
}
@media screen and (max-width:992px) {
#configurator-mini .layers:before {
opacity: .7;
width: 10%
}
}
#configurator-mini .layers .view-hotspots {
border-radius: 10px;
font-size: 14px;
padding: 5px 20px;
position: absolute;
right: 30px;
top: 30px;
z-index: 1
}
@media screen and (max-width:992px) {
#configurator-mini .layers .view-hotspots {
bottom: 5px;
right: 5px;
top: auto
}
}
#configurator-mini .layers .vdom {
margin: 0 auto;
position: relative
}
#configurator-mini .layers .image-layer, #configurator-mini .layers .paint-layer {
height: 100%;
position: absolute;
width: 100%
}
#configurator-mini .layers .image-layer img, #configurator-mini .layers .paint-layer img {
max-height: 100%;
max-width: 100%
}
#configurator-mini .layers .layer-angle {
left: 0;
opacity: 0;
position: absolute;
top: 0
}
#configurator-mini .layers .layer-angle::-moz-selection {
background: none
}
#configurator-mini .layers .layer-angle::selection {
background: none
}
@media screen and (max-width:992px) {
#configurator-mini .layers {
background: #fff
}
}
#configurator-mini .btn-group {
display: table;
table-layout: fixed;
width: 100%
}
#configurator-mini .btn {
background-image: linear-gradient(180deg,#fff 0,#ececec);
background-repeat: repeat-x;
border: 1px solid #eef0f3;
border-radius: 0;
color: #6f87a6;
display: table-cell;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF",endColorstr="#FFECECEC",GradientType=0);
transition: all .3s ease
}
#configurator-mini .btn.active, #configurator-mini .btn:active, #configurator-mini .btn:focus, #configurator-mini .btn:hover {
background-image: linear-gradient(180deg,#8598b1 0,#5e738d);
background-repeat: repeat-x;
border-color: #5e738d;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF8598B1",endColorstr="#FF5E738D",GradientType=0)
}
#configurator-mini .btn-seat {
display: inline-block;
width: 50%
}
#configurator-mini .btn-seat.disabled {
display: none
}
#configurator-mini .btn-color {
border: 0;
display: inline-block;
height: 0;
margin-bottom: 1px;
margin-right: 1px;
overflow: hidden;
padding: 0 0 14.28%;
position: relative;
text-indent: 120%;
white-space: nowrap;
width: calc(20% - 1px)
}
#configurator-mini .btn-color:before {
background-image: linear-gradient(0deg,hsla(0,0%,100%,.15),rgba(0,0,0,.25)),linear-gradient(to left top,hsla(0,0%,100%,0),hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0));
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0
}
@media screen and (max-width:992px) {
#configurator-mini .btn-color {
width: calc(10% - 1px)
}
}
#configurator-mini .btn-color_maroon {
background: #331417
}
#configurator-mini .btn-color_maroon.active, #configurator-mini .btn-color_maroon:active, #configurator-mini .btn-color_maroon:focus, #configurator-mini .btn-color_maroon:hover {
background: #331417;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_maroon.active:before, #configurator-mini .btn-color_maroon:active:before, #configurator-mini .btn-color_maroon:focus:before, #configurator-mini .btn-color_maroon:hover:before {
background: none
}
#configurator-mini .btn-color_red {
background: #ed1c2c
}
#configurator-mini .btn-color_red.active, #configurator-mini .btn-color_red:active, #configurator-mini .btn-color_red:focus, #configurator-mini .btn-color_red:hover {
background: #ed1c2c;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_red.active:before, #configurator-mini .btn-color_red:active:before, #configurator-mini .btn-color_red:focus:before, #configurator-mini .btn-color_red:hover:before {
background: none
}
#configurator-mini .btn-color_viper {
background: #b02026
}
#configurator-mini .btn-color_viper.active, #configurator-mini .btn-color_viper:active, #configurator-mini .btn-color_viper:focus, #configurator-mini .btn-color_viper:hover {
background: #b02026;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_viper.active:before, #configurator-mini .btn-color_viper:active:before, #configurator-mini .btn-color_viper:focus:before, #configurator-mini .btn-color_viper:hover:before {
background: none
}
#configurator-mini .btn-color_orange {
background: #f15421
}
#configurator-mini .btn-color_orange.active, #configurator-mini .btn-color_orange:active, #configurator-mini .btn-color_orange:focus, #configurator-mini .btn-color_orange:hover {
background: #f15421;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_orange.active:before, #configurator-mini .btn-color_orange:active:before, #configurator-mini .btn-color_orange:focus:before, #configurator-mini .btn-color_orange:hover:before {
background: none
}
#configurator-mini .btn-color_boral {
background: #ecc11a
}
#configurator-mini .btn-color_boral.active, #configurator-mini .btn-color_boral:active, #configurator-mini .btn-color_boral:focus, #configurator-mini .btn-color_boral:hover {
background: #ecc11a;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_boral.active:before, #configurator-mini .btn-color_boral:active:before, #configurator-mini .btn-color_boral:focus:before, #configurator-mini .btn-color_boral:hover:before {
background: none
}
#configurator-mini .btn-color_yellow {
background: #dbe245
}
#configurator-mini .btn-color_yellow.active, #configurator-mini .btn-color_yellow:active, #configurator-mini .btn-color_yellow:focus, #configurator-mini .btn-color_yellow:hover {
background: #dbe245;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_yellow.active:before, #configurator-mini .btn-color_yellow:active:before, #configurator-mini .btn-color_yellow:focus:before, #configurator-mini .btn-color_yellow:hover:before {
background: none
}
#configurator-mini .btn-color_moss {
background: #4d8c40
}
#configurator-mini .btn-color_moss.active, #configurator-mini .btn-color_moss:active, #configurator-mini .btn-color_moss:focus, #configurator-mini .btn-color_moss:hover {
background: #4d8c40;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_moss.active:before, #configurator-mini .btn-color_moss:active:before, #configurator-mini .btn-color_moss:focus:before, #configurator-mini .btn-color_moss:hover:before {
background: none
}
#configurator-mini .btn-color_richblue {
background: #0e4d66
}
#configurator-mini .btn-color_richblue.active, #configurator-mini .btn-color_richblue:active, #configurator-mini .btn-color_richblue:focus, #configurator-mini .btn-color_richblue:hover {
background: #0e4d66;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_richblue.active:before, #configurator-mini .btn-color_richblue:active:before, #configurator-mini .btn-color_richblue:focus:before, #configurator-mini .btn-color_richblue:hover:before {
background: none
}
#configurator-mini .btn-color_ryder {
background: #0bc0dd
}
#configurator-mini .btn-color_ryder.active, #configurator-mini .btn-color_ryder:active, #configurator-mini .btn-color_ryder:focus, #configurator-mini .btn-color_ryder:hover {
background: #0bc0dd;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_ryder.active:before, #configurator-mini .btn-color_ryder:active:before, #configurator-mini .btn-color_ryder:focus:before, #configurator-mini .btn-color_ryder:hover:before {
background: none
}
#configurator-mini .btn-color_blue {
background: #1279a7
}
#configurator-mini .btn-color_blue.active, #configurator-mini .btn-color_blue:active, #configurator-mini .btn-color_blue:focus, #configurator-mini .btn-color_blue:hover {
background: #1279a7;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_blue.active:before, #configurator-mini .btn-color_blue:active:before, #configurator-mini .btn-color_blue:focus:before, #configurator-mini .btn-color_blue:hover:before {
background: none
}
#configurator-mini .btn-color_viperblue {
background: #184377
}
#configurator-mini .btn-color_viperblue.active, #configurator-mini .btn-color_viperblue:active, #configurator-mini .btn-color_viperblue:focus, #configurator-mini .btn-color_viperblue:hover {
background: #184377;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_viperblue.active:before, #configurator-mini .btn-color_viperblue:active:before, #configurator-mini .btn-color_viperblue:focus:before, #configurator-mini .btn-color_viperblue:hover:before {
background: none
}
#configurator-mini .btn-color_cypress {
background: #5e8097
}
#configurator-mini .btn-color_cypress.active, #configurator-mini .btn-color_cypress:active, #configurator-mini .btn-color_cypress:focus, #configurator-mini .btn-color_cypress:hover {
background: #5e8097;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_cypress.active:before, #configurator-mini .btn-color_cypress:active:before, #configurator-mini .btn-color_cypress:focus:before, #configurator-mini .btn-color_cypress:hover:before {
background: none
}
#configurator-mini .btn-color_concord {
background: #07425d
}
#configurator-mini .btn-color_concord.active, #configurator-mini .btn-color_concord:active, #configurator-mini .btn-color_concord:focus, #configurator-mini .btn-color_concord:hover {
background: #07425d;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_concord.active:before, #configurator-mini .btn-color_concord:active:before, #configurator-mini .btn-color_concord:focus:before, #configurator-mini .btn-color_concord:hover:before {
background: none
}
#configurator-mini .btn-color_azul {
background: #15345d
}
#configurator-mini .btn-color_azul.active, #configurator-mini .btn-color_azul:active, #configurator-mini .btn-color_azul:focus, #configurator-mini .btn-color_azul:hover {
background: #15345d;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_azul.active:before, #configurator-mini .btn-color_azul:active:before, #configurator-mini .btn-color_azul:focus:before, #configurator-mini .btn-color_azul:hover:before {
background: none
}
#configurator-mini .btn-color_purple {
background: #8765ac
}
#configurator-mini .btn-color_purple.active, #configurator-mini .btn-color_purple:active, #configurator-mini .btn-color_purple:focus, #configurator-mini .btn-color_purple:hover {
background: #8765ac;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_purple.active:before, #configurator-mini .btn-color_purple:active:before, #configurator-mini .btn-color_purple:focus:before, #configurator-mini .btn-color_purple:hover:before {
background: none
}
#configurator-mini .btn-color_black {
background: #101010
}
#configurator-mini .btn-color_black.active, #configurator-mini .btn-color_black:active, #configurator-mini .btn-color_black:focus, #configurator-mini .btn-color_black:hover {
background: #101010;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_black.active:before, #configurator-mini .btn-color_black:active:before, #configurator-mini .btn-color_black:focus:before, #configurator-mini .btn-color_black:hover:before {
background: none
}
#configurator-mini .btn-color_midnight {
background: #060909
}
#configurator-mini .btn-color_midnight.active, #configurator-mini .btn-color_midnight:active, #configurator-mini .btn-color_midnight:focus, #configurator-mini .btn-color_midnight:hover {
background: #060909;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_midnight.active:before, #configurator-mini .btn-color_midnight:active:before, #configurator-mini .btn-color_midnight:focus:before, #configurator-mini .btn-color_midnight:hover:before {
background: none
}
#configurator-mini .btn-color_white {
background: #fbfcf1
}
#configurator-mini .btn-color_white.active, #configurator-mini .btn-color_white:active, #configurator-mini .btn-color_white:focus, #configurator-mini .btn-color_white:hover {
background: #fbfcf1;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_white.active:before, #configurator-mini .btn-color_white:active:before, #configurator-mini .btn-color_white:focus:before, #configurator-mini .btn-color_white:hover:before {
background: none
}
#configurator-mini .btn-color_fawn {
background: #b9aea0
}
#configurator-mini .btn-color_fawn.active, #configurator-mini .btn-color_fawn:active, #configurator-mini .btn-color_fawn:focus, #configurator-mini .btn-color_fawn:hover {
background: #b9aea0;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_fawn.active:before, #configurator-mini .btn-color_fawn:active:before, #configurator-mini .btn-color_fawn:focus:before, #configurator-mini .btn-color_fawn:hover:before {
background: none
}
#configurator-mini .btn-color_slate {
background: #616464
}
#configurator-mini .btn-color_slate.active, #configurator-mini .btn-color_slate:active, #configurator-mini .btn-color_slate:focus, #configurator-mini .btn-color_slate:hover {
background: #616464;
box-shadow: inset 0 0 20px -1px rgba(0,0,0,.4)
}
#configurator-mini .btn-color_slate.active:before, #configurator-mini .btn-color_slate:active:before, #configurator-mini .btn-color_slate:focus:before, #configurator-mini .btn-color_slate:hover:before {
background: none
}
#configurator-mini #send-to-dealer {
display: none
}
#configurator-mini #send-to-dealer.active {
background: #f6f6f6;
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.3);
display: block;
height: calc(100% - 60px);
left: 0;
padding-top: 60px;
position: absolute;
top: 60px;
width: 100%;
z-index: 999
}
#configurator-mini #send-to-dealer .btn-back {
background: #fff url(../png/back-arrow.png) 50% no-repeat;
border: 0;
border-radius: 0;
border-right: 1px solid #fefefe;
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.3);
height: 60px;
left: 0;
position: absolute;
top: 0;
width: 100px
}
#configurator-mini #send-to-dealer h2 {
margin-left: 8px
}
#configurator-mini #send-to-dealer #truck-details {
height: calc(100% - 120px);
left: 0;
overflow: auto;
padding: 0 20px 20px;
position: absolute;
top: 60px;
width: 50%
}
#configurator-mini #send-to-dealer #truck-details #truck {
height: 0;
padding-bottom: 66.666%;
position: relative;
width: 100%
}
#configurator-mini #send-to-dealer #truck-details #truck .viewers[data-mode=build] #exterior-builder {
opacity: 1;
z-index: 3
}
#configurator-mini #send-to-dealer #truck-details #truck .viewers[data-mode=build] #exterior-builder .layers {
max-width: 100%;
width: 100%
}
#configurator-mini #send-to-dealer #truck-details #truck .viewers[data-mode=build] #interior-builder {
display: none
}
#configurator-mini #send-to-dealer #truck-details #truck #configurator-viewers {
height: 100%;
position: absolute;
top: 0;
width: 100%
}
#configurator-mini #send-to-dealer #truck-details #truck #configurator-viewers #hotspot-overlay {
display: none
}
#configurator-mini #send-to-dealer #truck-details #truck #configurator-viewers .hotspot-label, #configurator-mini #send-to-dealer #truck-details #truck .view-hotspots {
display: none !important
}
#configurator-mini #send-to-dealer #truck-details comp-press comp-container.none:not(.loading):after, #configurator-mini #send-to-dealer #truck-details h3, comp-press #configurator-mini #send-to-dealer #truck-details comp-container.none:not(.loading):after {
color: #484848;
font-size: 20px
}
#configurator-mini #send-to-dealer #truck-details p {
font-size: 14px
}
#configurator-mini #send-to-dealer #truck-details .detail-wrap {
grid-column-gap: 20px;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 20px;
column-gap: 20px
}
@media screen and (max-width:480px) {
#configurator-mini #send-to-dealer #truck-details .detail-wrap {
grid-column-gap: 0;
-moz-column-count: 1;
column-count: 1;
-moz-column-gap: 0;
column-gap: 0
}
}
#configurator-mini #send-to-dealer #truck-details .detail-wrap .detail-category {
display: inline-block
}
#configurator-mini #send-to-dealer #truck-details .detail-wrap .detail-category comp-press comp-container.none:not(.loading):after, #configurator-mini #send-to-dealer #truck-details .detail-wrap .detail-category h3, comp-press #configurator-mini #send-to-dealer #truck-details .detail-wrap .detail-category comp-container.none:not(.loading):after {
font-size: 16px;
margin-bottom: 5px;
margin-top: 10px
}
#configurator-mini #send-to-dealer #truck-details .detail-wrap .detail-category li {
font-size: 14px
}
#configurator-mini #send-to-dealer #send-to-dealer-form {
border-left: 1px solid #dadada;
height: calc(100% - 120px);
padding: 20px;
position: absolute;
right: 0;
top: 60px;
width: 50%
}
@media screen and (max-width:480px) {
#configurator-mini #send-to-dealer #send-to-dealer-form {
padding: 0 20px 20px 10px
}
}
#configurator-mini #send-to-dealer input {
background: none;
display: inline-block;
height: 32px;
margin: 10px !important;
padding: 0
}
#configurator-mini #send-to-dealer input.error {
border-color: #ce201f
}
#configurator-mini #send-to-dealer .half {
width: calc(50% - 24px)
}
#configurator-mini #send-to-dealer .full {
width: calc(100% - 24px)
}
#configurator-mini #send-to-dealer .state {
width: calc(20% - 24px)
}
#configurator-mini #send-to-dealer .zip {
width: calc(30% - 24px)
}
#configurator-mini #send-to-dealer .submit {
background: #6f87a6;
border-color: #6f87a6;
border-radius: 6px;
color: #fff;
font-size: 14px;
margin-left: 10px;
margin-top: 20px;
text-transform: uppercase;
white-space: nowrap;
z-index: 10
}
#configurator-mini #send-to-dealer .submit:active, #configurator-mini #send-to-dealer .submit:focus, #configurator-mini #send-to-dealer .submit:hover {
background-color: #713738;
background-image: linear-gradient(180deg,#865859 0,#623435);
background-repeat: repeat-x;
border-color: #713738;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF865859",endColorstr="#FF623435",GradientType=0)
}
@media screen and (max-width:992px) {
#configurator-mini #send-to-dealer #send-to-dealer-form, #configurator-mini #send-to-dealer #truck-details {
background: #fff;
border: 0;
height: auto;
left: 0;
position: relative;
right: 0;
top: 0;
width: 100%
}
}
#configurator-mini #drawer {
background: #fff;
border-top: 1px solid #ccc;
bottom: 0;
display: none;
height: auto;
position: fixed;
text-align: center;
transform: translateY(100%);
transition: transform .5s ease;
width: 100%;
z-index: 999
}
#configurator-mini #drawer.hidden {
display: none
}
#configurator-mini #drawer.open {
transform: translateY(0)
}
#configurator-mini #drawer #handle {
background: #fff;
border: 1px solid;
border-color: #ccc #ccc #fff;
border-radius: 10px 10px 0 0;
color: #6f87a6;
cursor: pointer;
display: block;
font-family: industry,sans-serif;
font-size: 12px;
font-weight: 500;
left: 50%;
padding: 5px 0 0;
position: absolute;
text-transform: uppercase;
top: 0;
transform: translate(-50%,-100%);
width: 200px
}
#configurator-mini #drawer #handle .handle-up-arrow {
display: block;
font-size: 22px;
height: 10px;
line-height: 10px;
position: absolute;
top: 9px;
transform: rotate(-90deg);
width: 14px
}
#configurator-mini #drawer #handle .handle-up-arrow.left {
left: 9px
}
#configurator-mini #drawer #handle .handle-up-arrow.right {
right: 7px
}
#configurator-mini #drawer .cab-option {
display: inline-block;
text-align: center;
width: 140px
}
#configurator-mini #drawer .cab-option.disabled {
opacity: .5
}
#configurator-mini #drawer .cab-option img {
max-width: 100%
}
#configurator-mini #drawer .cab-option span {
color: #6f87a6 !important;
display: block;
white-space: nowrap
}
@media screen and (max-width:992px) {
#configurator-mini #drawer {
position: static;
transform: none
}
#configurator-mini #drawer #handle {
background: #fff;
border: 0;
border-radius: 0;
font-family: industry,sans-serif;
font-size: 20px;
padding: 10px 0 10px 20px;
position: static;
text-align: left;
text-transform: none;
transform: none;
width: 100%
}
#configurator-mini #drawer #handle:after {
content: ">";
padding-right: 20px;
position: absolute;
right: 20px
}
#configurator-mini #drawer .cab-options {
display: none;
padding-top: 20px
}
}
#configurator [actions] button:after, #configurator [actions] button:before, #dialog-overlay [help]:after, #dialog-overlay [help]:before {
display: inline-block;
font-size: 20px;
vertical-align: middle
}
#configurator [actions] button:after, #dialog-overlay [help]:after {
margin-left: 37px
}
#configurator [actions] button:before, #dialog-overlay [help]:before {
margin-right: 37px
}
@media(max-width:950px) {
#configurator [actions] button:after, #dialog-overlay [help]:after {
margin-left: 8px
}
#configurator [actions] button:before, #dialog-overlay [help]:before {
margin-right: 8px
}
}
@media(max-width:490px) {
#configurator [actions] button:after, #configurator [actions] button:before, #dialog-overlay [help]:after, #dialog-overlay [help]:before {
font-size: 10px
}
}
@-webkit-keyframes point-ripple {
0% {
opacity: 0;
transform: translate3d(-50%,-50%,0) scale(.5)
}
50% {
opacity: 1;
transform: translate3d(-50%,-50%,0) scale(.5)
}
to {
opacity: 0;
transform: translate3d(-50%,-50%,0) scale(1)
}
}
@keyframes point-ripple {
0% {
opacity: 0;
transform: translate3d(-50%,-50%,0) scale(.5)
}
50% {
opacity: 1;
transform: translate3d(-50%,-50%,0) scale(.5)
}
to {
opacity: 0;
transform: translate3d(-50%,-50%,0) scale(1)
}
}
html[configurator-theme] body {
background: none transparent
}
html[configurator-theme=dark] [cab-choose-hero] {
color: #fff
}
[cab-choose-hero] section:not(:first-child) {
border-top: 1px solid #ebebeb;
padding-top: 50px
}
html[configurator-theme=dark] [cab-choose-hero] section:not(:first-child) {
border-top-color: rgba(255,255,255,.5)
}
[cab-choose-hero] section > h2 {
font-size: 32px;
margin-bottom: 0;
text-transform: capitalize
}
html[configurator-theme=dark] [cab-choose-hero] section > h2 {
color: #fff
}
[cab-choose-hero] section comp-image {
border: 1px solid #d7d7d7;
border-radius: 2px;
overflow: hidden
}
[cab-choose-hero] section a {
padding-bottom: 0
}
[cab-choose-hero] section comp-press comp-container.none:not(.loading):after, [cab-choose-hero] section h3, comp-press [cab-choose-hero] section comp-container.none:not(.loading):after {
border-bottom: 1px solid #ebebeb;
color: #3a3a3a;
font-size: 16px;
margin: 0;
padding: 24px 0
}
comp-press html[configurator-theme=dark] [cab-choose-hero] section comp-container.none:not(.loading):after, html[configurator-theme=dark] [cab-choose-hero] section comp-press comp-container.none:not(.loading):after, html[configurator-theme=dark] [cab-choose-hero] section h3 {
border-bottom-color: rgba(255,255,255,.5);
color: #fff
}
[cab-choose-hero] section comp-card-list {
margin: 23px 0 0
}
#configurator-outer + .disclaimer {
margin: 0 auto 50px;
max-width: 55%;
padding: 10px;
text-align: center
}
#configurator {
-webkit-overflow-scrolling: touch;
overflow-y: auto !important
}
@media(min-width:768px) {
#configurator {
display: flex
}
#configurator > * {
flex: 1
}
#configurator .hidden-desktop {
display: none
}
}
#configurator [actions] {
display: flex;
justify-content: center
}
#configurator [actions].slide-enter-active, #configurator [actions].slide-leave-active {
transition: all .25s
}
#configurator [actions].slide-enter, #configurator [actions].slide-leave-to {
opacity: 0;
transform: translateY(100px)
}
#configurator [actions] button {
border-radius: 4px;
box-shadow: 0 3px 5px 0 rgba(0,0,0,.1);
font-family: industry,sans-serif;
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
white-space: nowrap
}
@media(min-width:768px) {
#configurator [actions] button:not([quote]) {
background: #fff;
color: #4a6379
}
html:not(.touch) #configurator [actions] button:not([quote]):hover {
background: #f2f2f2
}
}
#configurator [actions] button[quote] {
background: #713738;
color: #fff
}
html:not(.touch) #configurator [actions] button[quote]:hover {
background: #602f30
}
@media(max-width:767px) {
#configurator [actions] button {
padding: 11px 20px
}
#configurator [actions] button + [quote] {
display: none
}
}
@media(max-width:490px) {
#configurator [actions] button {
font-size: 10px;
margin-left: 4px;
margin-right: 4px;
padding-left: 16px;
padding-right: 16px
}
}
#configurator [actions] [edit]:before, #configurator [actions] [prev]:before {
transform: rotate(-180deg)
}
#configurator .layers .image-layer [src*=bumper_metal] {
z-index: 1
}
#configurator-inner {
display: flex;
height: 100%;
overflow: hidden;
transition: height .25s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
@media(max-width:767px) {
#configurator-inner {
flex-direction: column;
position: relative
}
}
#configurator-main {
box-shadow: 0 0 50px rgba(0,0,0,.05);
height: 100%
}
#configurator-main.summary-active #configurator-inner {
height: 39vw
}
@media(max-width:767px) {
#configurator-main.summary-active {
height: auto
}
#configurator-main.summary-active #configurator-inner, #configurator-main.summary-active #configurator-viewers {
flex-shrink: 0;
height: 125vw
}
}
#configurator div#configurator-viewers {
flex: 1;
position: relative;
top: 0
}
@media(min-width:768px) {
#configurator div#configurator-viewers {
background: #e8e9e8;
height: 100%;
overflow: hidden
}
}
@media(max-width:767px) {
#configurator div#configurator-viewers {
background: linear-gradient(180deg,#f3f3f3 0,#fff);
flex-grow: 1;
flex-shrink: 1;
padding-bottom: 0
}
#configurator div#configurator-viewers > .viewers {
overflow: visible
}
#configurator div#configurator-viewers > .viewers:not([data-viewer=interior]) #exterior-builder {
height: 100%
}
}
#configurator div#configurator-viewers .layers .vdom {
left: 50% !important;
position: absolute;
top: 50% !important;
transform: translate(-50%,-50%)
}
#options-tray {
background: #fff;
display: flex;
flex: 1;
flex-direction: row
}
@media(min-width:768px) {
#options-tray {
max-width: 300px
}
#options-tray.slide-enter-active, #options-tray.slide-leave-active {
max-width: 300px;
overflow: hidden;
transition: all .25s
}
#options-tray.slide-enter, #options-tray.slide-leave-to {
max-width: 0;
overflow: hidden;
padding: 0
}
}
@media(max-width:767px) {
#options-tray {
flex-basis: 206px;
flex-grow: 0;
flex-shrink: 0;
height: 206px;
order: 1;
padding-bottom: 86px;
position: relative;
transition: flex-basis .25s,height .25s;
z-index: 4
}
#options-tray.slide-leave-active, #options-tray.slide-leave-to {
display: none
}
}
#options-tray > * {
-webkit-overflow-scrolling: touch;
flex: 1;
max-height: 100%;
min-width: 100%;
text-align: center
}
@media(min-width:768px) {
#options-tray > * {
height: auto;
max-width: 300px;
overflow-x: hidden;
overflow-y: auto
}
}
@media(max-width:767px) {
#options-tray > * {
height: 100%;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden
}
}
#options-tray > .slide-enter-active, #options-tray > .slide-leave-active {
min-width: 0;
overflow: hidden;
transition: max-width .25s
}
#options-tray > .slide-enter, #options-tray > .slide-leave-to {
max-width: 0;
min-width: 0;
overflow: hidden
}
#options-tray > .primary {
display: flex;
justify-content: space-between
}
@media(min-width:768px) {
#options-tray > .primary {
flex-direction: column;
padding: 30px 0
}
}
#options-tray > .primary > * {
flex: 1;
flex-grow: 0;
flex-shrink: 0
}
@media(max-width:767px) {
#options-tray > .primary > * {
min-width: 120px
}
}
#options-tray > .primary:not(.interacted) > :first-child:not(.previous) [icon] {
position: relative
}
#options-tray > .primary:not(.interacted) > :first-child:not(.previous) [icon]:before {
-webkit-animation: point-ripple 2s linear infinite;
animation: point-ripple 2s linear infinite;
border: 1px solid rgba(0,0,0,.5);
border-radius: 50%;
box-shadow: inset 0 0 10px #000;
content: "";
height: 0;
height: 70px;
left: 50%;
margin: 0;
opacity: .02;
position: absolute;
top: 50%;
transform: translate3d(-50%,-50%,0) scale(.5);
width: 0;
width: 70px
}
#options-tray > .primary:not(.interacted) > :first-child:not(.previous) label:first-of-type {
color: #6f87a6
}
#options-tray > .secondary {
padding: 32px
}
@media(min-width:768px) {
#options-tray > .secondary > label {
color: #713738;
cursor: default;
display: block;
font-size: 12px;
padding: 10px 25px;
text-align: left;
white-space: pre-line
}
}
@media(max-width:767px) {
#options-tray > .secondary {
padding: 10px;
white-space: nowrap
}
#options-tray > .secondary > label {
display: none
}
#options-tray > .secondary > * {
display: inline-block;
vertical-align: top;
white-space: normal
}
#options-tray > .secondary > .group {
white-space: nowrap
}
#options-tray > .secondary > h4 {
display: none
}
}
#options-tray > .secondary[option=interior-trim-package] .group > label:first-child {
display: none
}
@media(min-width:768px) {
#options-tray .group {
border: 1px solid rgba(0,0,0,.06);
border-radius: 6px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 40px;
padding: 26px 20px 40px
}
#options-tray .group label {
width: 100%
}
#options-tray .group > figure {
flex: 1;
flex-basis: 50%;
flex-grow: 0;
max-width: 50%
}
#options-tray .group > figure a {
white-space: nowrap
}
}
@media(max-width:767px) {
#options-tray .group:not(:last-child) {
border-right: 1px solid #ebebeb;
padding: 0 14px
}
}
#options-tray .group > figure {
padding-bottom: 5px;
padding-top: 5px
}
#options-tray .group > figure > label {
font-size: 18px
}
@media(max-width:767px) {
#options-tray[option=elite-trim], #options-tray[option=materiales], #options-tray[option=materials] {
flex-basis: 219px;
height: 219px
}
#options-tray[option=color] {
flex-basis: 176px;
height: 176px
}
#options-tray[option=aerodynamics], #options-tray[option=battery-powered-hvac-system], #options-tray[option=bumper], #options-tray[option=cardTest], #options-tray[option=chassis-fairings], #options-tray[option=detroit-connect], #options-tray[option=doors], #options-tray[option=elite-trim], #options-tray[option=engine], #options-tray[option=enlace-freightliner], #options-tray[option=fresnel-window], #options-tray[option=hubs], #options-tray[option=logo], #options-tray[option=lower-sleeper-lounge], #options-tray[option=lower-sleeper], #options-tray[option=mirrors], #options-tray[option=paquete-de-tren-motriz], #options-tray[option=passenger-lower-cabinet], #options-tray[option=passenger-seat], #options-tray[option=powertrain-package], #options-tray[option=refrigerator], #options-tray[option=roof-fairing], #options-tray[option=safety-systems], #options-tray[option=safety], #options-tray[option=seguridad], #options-tray[option=sun-visor], #options-tray[option=trim-package], #options-tray[option=upper-sleeper], #options-tray[option=vocation], #options-tray[option=wheel-chrome], #options-tray[option=wheels] {
flex-basis: 291px;
height: 291px
}
}
#options-tray .group label {
color: #000;
display: block;
font-family: industry,sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase
}
#options-tray .group label + label {
opacity: .5
}
#modal-dialog [option-container] figure, #options-tray figure {
border-radius: 6px;
cursor: pointer;
padding: 18px;
text-align: center;
transform: scale(1)
}
@media(max-width:767px) {
#modal-dialog [option-container] figure, #options-tray figure {
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
position: relative
}
#modal-dialog [option-container] figure:after, #options-tray figure:after {
background: linear-gradient(180deg,hsla(0,0%,100%,0),#fff);
bottom: 0;
content: "";
height: 20px;
left: 0;
position: absolute;
right: 0
}
}
@media(min-width:768px) {
#modal-dialog [option-container] figure:not(:last-child), #options-tray figure:not(:last-child) {
margin-bottom: 15px
}
}
#modal-dialog [option-container] figure.squish-list-leave-active, #options-tray figure.squish-list-leave-active {
display: none !important
}
#modal-dialog [option-container] figure.squish-list-enter-active, #modal-dialog [option-container] figure.squish-list-leave-active, #options-tray figure.squish-list-enter-active, #options-tray figure.squish-list-leave-active {
transition: all 1s
}
#modal-dialog [option-container] figure.squish-list-enter, #modal-dialog [option-container] figure.squish-list-leave-to, #options-tray figure.squish-list-enter, #options-tray figure.squish-list-leave-to {
transform: scale(0)
}
#modal-dialog [option-container] figure [icon], #options-tray figure [icon] {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 38px;
margin: 0 auto 16px;
width: 52px
}
@media(max-width:767px) {
#modal-dialog [option-container] figure [icon], #options-tray figure [icon] {
height: 28px;
width: 44px
}
}
#modal-dialog [option-container] figure label, #options-tray figure label {
display: block;
font-family: industry,sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-transform: uppercase
}
#modal-dialog [option-container] figure label + label, #options-tray figure label + label {
font-weight: 400;
padding-top: 5px
}
@media(max-width:767px) {
#modal-dialog [option-container] figure label, #options-tray figure label {
font-size: 11px
}
}
#modal-dialog [option-container] figure.option:not(.interacted) label + label, #options-tray figure.option:not(.interacted) label + label {
display: none
}
#modal-dialog [option-container] figure.option.interacted [icon], #options-tray figure.option.interacted [icon] {
background-color: transparent;
background-image: url(../png/check-blue.png) !important;
background-size: 30px auto
}
@media(max-width:767px) {
#modal-dialog [option-container] figure.next [icon], #modal-dialog [option-container] figure.previous [icon], #options-tray figure.next [icon], #options-tray figure.previous [icon] {
transform: rotate(-90deg)
}
}
#modal-dialog [option-container] figure.option label:first-child, #options-tray figure.option label:first-child {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #000;
font-weight: 500
}
#modal-dialog [option-container] figure.next label:first-child, #modal-dialog [option-container] figure.previous label:first-child, #options-tray figure.next label:first-child, #options-tray figure.previous label:first-child {
color: #6f87a6
}
@media(min-width:768px)and (max-height:1042px) {
#modal-dialog [option-container] figure.next, #modal-dialog [option-container] figure.option, #modal-dialog [option-container] figure.previous, #options-tray figure.next, #options-tray figure.option, #options-tray figure.previous {
padding-bottom: 10px;
padding-top: 10px
}
#modal-dialog [option-container] figure.next [icon], #modal-dialog [option-container] figure.option [icon], #modal-dialog [option-container] figure.previous [icon], #options-tray figure.next [icon], #options-tray figure.option [icon], #options-tray figure.previous [icon] {
margin-bottom: 8px
}
}
@media(min-width:768px)and (max-height:830px) {
#modal-dialog [option-container] figure.next, #modal-dialog [option-container] figure.option, #modal-dialog [option-container] figure.previous, #options-tray figure.next, #options-tray figure.option, #options-tray figure.previous {
align-items: center;
display: flex
}
#modal-dialog [option-container] figure.next > *, #modal-dialog [option-container] figure.option > *, #modal-dialog [option-container] figure.previous > *, #options-tray figure.next > *, #options-tray figure.option > *, #options-tray figure.previous > * {
flex: 1
}
#modal-dialog [option-container] figure.next [icon], #modal-dialog [option-container] figure.option [icon], #modal-dialog [option-container] figure.previous [icon], #options-tray figure.next [icon], #options-tray figure.option [icon], #options-tray figure.previous [icon] {
flex-basis: 40px;
flex-grow: 0;
margin-bottom: 0;
width: 40px
}
#modal-dialog [option-container] figure.next label, #modal-dialog [option-container] figure.option label, #modal-dialog [option-container] figure.previous label, #options-tray figure.next label, #options-tray figure.option label, #options-tray figure.previous label {
padding-left: 20px;
text-align: left
}
}
#options-tray .group > figure, #options-tray figure.color {
display: inline-block;
margin: 0;
max-height: 71px;
min-height: 0;
padding: 11px;
vertical-align: top
}
#options-tray .group > figure label, #options-tray figure.color label {
display: none
}
#options-tray .group > figure [icon], #options-tray figure.color [icon] {
border: 6px solid #fff;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.19);
height: 49px;
position: relative;
transition: box-shadow .25s,border .25s;
width: 49px
}
@media(max-width:767px) {
#options-tray .group > figure [icon] + div, #options-tray figure.color [icon] + div {
display: none
}
}
#options-tray .group > figure.selected [icon], #options-tray figure.selected.color [icon] {
border-color: #ebebeb;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.19),0 0 0 1px #6f87a6
}
#options-tray html:not(.touch) .group > figure:not(.selected):hover [icon], #options-tray html:not(.touch) figure.color:not(.selected):hover [icon], html:not(.touch) #options-tray .group > figure:not(.selected):hover [icon], html:not(.touch) #options-tray figure.color:not(.selected):hover [icon] {
border-color: #ddd;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.19),0 10px 30px rgba(111,135,166,.2)
}
#modal-dialog [option-container] figure, #options-tray [option=aerodynamics] figure, #options-tray [option=battery-powered-hvac-system] figure, #options-tray [option=bumper] figure, #options-tray [option=cardTest] figure, #options-tray [option=chassis-fairings] figure, #options-tray [option=detroit-connect] figure, #options-tray [option=doors] figure, #options-tray [option=doors-fresnel] figure, #options-tray [option=elite-trim] figure, #options-tray [option=engine] figure, #options-tray [option=enlace-freightliner] figure, #options-tray [option=fresnel-window] figure, #options-tray [option=hubs] figure, #options-tray [option=logo] figure, #options-tray [option=lower-sleeper-lounge] figure, #options-tray [option=lower-sleeper] figure, #options-tray [option=mirrors] figure, #options-tray [option=paquete-de-tren-motriz] figure, #options-tray [option=passenger-lower-cabinet] figure, #options-tray [option=passenger-seat] figure, #options-tray [option=powertrain-package] figure, #options-tray [option=refrigerator] figure, #options-tray [option=roof-fairing] figure, #options-tray [option=safety-systems] figure, #options-tray [option=safety] figure, #options-tray [option=seguridad] figure, #options-tray [option=sun-visor] figure, #options-tray [option=trim-package] figure, #options-tray [option=upper-sleeper] figure, #options-tray [option=vocation] figure, #options-tray [option=wheel-chrome] figure, #options-tray [option=wheels] figure, #options-tray [option=package-trim] figure, #options-tray [option=safety-interior] figure {
border: 1px solid rgba(0,0,0,.06);
overflow: hidden;
padding: 0;
transition: all .15s
}
@media(max-width:767px) {
#modal-dialog [option-container] figure, #options-tray [option=aerodynamics] figure, #options-tray [option=battery-powered-hvac-system] figure, #options-tray [option=bumper] figure, #options-tray [option=cardTest] figure, #options-tray [option=chassis-fairings] figure, #options-tray [option=detroit-connect] figure, #options-tray [option=doors] figure, #options-tray [option=doors-fresnel] figure, #options-tray [option=elite-trim] figure, #options-tray [option=engine] figure, #options-tray [option=enlace-freightliner] figure, #options-tray [option=fresnel-window] figure, #options-tray [option=hubs] figure, #options-tray [option=logo] figure, #options-tray [option=lower-sleeper-lounge] figure, #options-tray [option=lower-sleeper] figure, #options-tray [option=mirrors] figure, #options-tray [option=paquete-de-tren-motriz] figure, #options-tray [option=passenger-lower-cabinet] figure, #options-tray [option=passenger-seat] figure, #options-tray [option=powertrain-package] figure, #options-tray [option=refrigerator] figure, #options-tray [option=roof-fairing] figure, #options-tray [option=safety-systems] figure, #options-tray [option=safety] figure, #options-tray [option=seguridad] figure, #options-tray [option=sun-visor] figure, #options-tray [option=trim-package] figure, #options-tray [option=upper-sleeper] figure, #options-tray [option=vocation] figure, #options-tray [option=wheel-chrome] figure, #options-tray [option=wheels] figure, #options-tray [option=package-trim] figure, #options-tray [option=safety-interior] figure {
height: 100%;
margin: 0 6px;
width: 148px
}
}
#modal-dialog [option-container] figure.selected, #options-tray [option=aerodynamics] figure.selected, #options-tray [option=battery-powered-hvac-system] figure.selected, #options-tray [option=bumper] figure.selected, #options-tray [option=cardTest] figure.selected, #options-tray [option=chassis-fairings] figure.selected, #options-tray [option=detroit-connect] figure.selected, #options-tray [option=doors] figure.selected, #options-tray [option=doors-fresnel] figure.selected, #options-tray [option=elite-trim] figure.selected, #options-tray [option=engine] figure.selected, #options-tray [option=enlace-freightliner] figure.selected, #options-tray [option=fresnel-window] figure.selected, #options-tray [option=hubs] figure.selected, #options-tray [option=logo] figure.selected, #options-tray [option=lower-sleeper-lounge] figure.selected, #options-tray [option=lower-sleeper] figure.selected, #options-tray [option=mirrors] figure.selected, #options-tray [option=paquete-de-tren-motriz] figure.selected, #options-tray [option=passenger-lower-cabinet] figure.selected, #options-tray [option=passenger-seat] figure.selected, #options-tray [option=powertrain-package] figure.selected, #options-tray [option=refrigerator] figure.selected, #options-tray [option=roof-fairing] figure.selected, #options-tray [option=safety-systems] figure.selected, #options-tray [option=safety] figure.selected, #options-tray [option=seguridad] figure.selected, #options-tray [option=sun-visor] figure.selected, #options-tray [option=trim-package] figure.selected, #options-tray [option=upper-sleeper] figure.selected, #options-tray [option=vocation] figure.selected, #options-tray [option=wheel-chrome] figure.selected, #options-tray [option=wheels] figure.selected, #options-tray [option=package-trim] figure.selected, #options-tray [option=safety-interior] figure.selected {
border: 1px solid rgba(111,135,166,.8)
}
#modal-dialog [option-container] figure:not(.included), #options-tray [option=aerodynamics] figure:not(.included), #options-tray [option=battery-powered-hvac-system] figure:not(.included), #options-tray [option=bumper] figure:not(.included), #options-tray [option=cardTest] figure:not(.included), #options-tray [option=chassis-fairings] figure:not(.included), #options-tray [option=detroit-connect] figure:not(.included), #options-tray [option=doors] figure:not(.included), #options-tray [option=doors-fresnel] figure:not(.included), #options-tray [option=elite-trim] figure:not(.included), #options-tray [option=engine] figure:not(.included), #options-tray [option=enlace-freightliner] figure:not(.included), #options-tray [option=fresnel-window] figure:not(.included), #options-tray [option=hubs] figure:not(.included), #options-tray [option=logo] figure:not(.included), #options-tray [option=lower-sleeper-lounge] figure:not(.included), #options-tray [option=lower-sleeper] figure:not(.included), #options-tray [option=mirrors] figure:not(.included), #options-tray [option=paquete-de-tren-motriz] figure:not(.included), #options-tray [option=passenger-lower-cabinet] figure:not(.included), #options-tray [option=passenger-seat] figure:not(.included), #options-tray [option=powertrain-package] figure:not(.included), #options-tray [option=refrigerator] figure:not(.included), #options-tray [option=roof-fairing] figure:not(.included), #options-tray [option=safety-systems] figure:not(.included), #options-tray [option=safety] figure:not(.included), #options-tray [option=seguridad] figure:not(.included), #options-tray [option=sun-visor] figure:not(.included), #options-tray [option=trim-package] figure:not(.included), #options-tray [option=upper-sleeper] figure:not(.included), #options-tray [option=vocation] figure:not(.included), #options-tray [option=wheel-chrome] figure:not(.included), #options-tray [option=wheels] figure:not(.included), #options-tray [option=package-trim] figure:not(.included), #options-tray [option=safety-interior] figure:not(.included) {
cursor: pointer
}
#modal-dialog [option-container] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=aerodynamics] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=battery-powered-hvac-system] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=bumper] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=cardTest] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=chassis-fairings] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=detroit-connect] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=doors] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=doors-fresnel] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=elite-trim] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=engine] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=enlace-freightliner] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=fresnel-window] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=hubs] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=logo] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=lower-sleeper-lounge] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=lower-sleeper] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=mirrors] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=paquete-de-tren-motriz] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=passenger-lower-cabinet] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=passenger-seat] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=powertrain-package] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=refrigerator] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=roof-fairing] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=safety-systems] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=safety] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=seguridad] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=sun-visor] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=trim-package] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=upper-sleeper] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=vocation] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=wheel-chrome] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=wheels] html:not(.touch) figure:not(.included):not(.selected):hover, html:not(.touch) #modal-dialog [option-container] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=aerodynamics] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=battery-powered-hvac-system] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=bumper] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=cardTest] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=chassis-fairings] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=detroit-connect] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=doors] figure:not(.included):not(.selected):hover, #options-tray [option=doors-fresnel] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=elite-trim] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=engine] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=enlace-freightliner] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=fresnel-window] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=hubs] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=logo] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=lower-sleeper-lounge] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=lower-sleeper] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=mirrors] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=paquete-de-tren-motriz] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=passenger-lower-cabinet] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=passenger-seat] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=powertrain-package] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=refrigerator] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=roof-fairing] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=safety-systems] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=safety] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=seguridad] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=sun-visor] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=trim-package] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=upper-sleeper] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=vocation] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=wheel-chrome] figure:not(.included):not(.selected):hover, html:not(.touch) #options-tray [option=wheels] figure:not(.included):not(.selected):hover, #options-tray [option=package-trim] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=safety-interior] html:not(.touch) figure:not(.included):not(.selected):hover, #options-tray [option=package-trim] figure:not(.included):not(.selected):hover, #options-tray [option=safety-interior] figure:not(.included):not(.selected):hover {
box-shadow: 0 10px 30px rgba(111,135,166,.2)
}
#modal-dialog [option-container] figure:not(.included) [icon]:before, #options-tray [option=aerodynamics] figure:not(.included) [icon]:before, #options-tray [option=battery-powered-hvac-system] figure:not(.included) [icon]:before, #options-tray [option=bumper] figure:not(.included) [icon]:before, #options-tray [option=cardTest] figure:not(.included) [icon]:before, #options-tray [option=chassis-fairings] figure:not(.included) [icon]:before, #options-tray [option=detroit-connect] figure:not(.included) [icon]:before, #options-tray [option=doors] figure:not(.included) [icon]:before, #options-tray [option=doors-fresnel] figure:not(.included) [icon]:before, #options-tray [option=elite-trim] figure:not(.included) [icon]:before, #options-tray [option=engine] figure:not(.included) [icon]:before, #options-tray [option=enlace-freightliner] figure:not(.included) [icon]:before, #options-tray [option=fresnel-window] figure:not(.included) [icon]:before, #options-tray [option=hubs] figure:not(.included) [icon]:before, #options-tray [option=logo] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper-lounge] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper] figure:not(.included) [icon]:before, #options-tray [option=mirrors] figure:not(.included) [icon]:before, #options-tray [option=paquete-de-tren-motriz] figure:not(.included) [icon]:before, #options-tray [option=passenger-lower-cabinet] figure:not(.included) [icon]:before, #options-tray [option=passenger-seat] figure:not(.included) [icon]:before, #options-tray [option=powertrain-package] figure:not(.included) [icon]:before, #options-tray [option=refrigerator] figure:not(.included) [icon]:before, #options-tray [option=roof-fairing] figure:not(.included) [icon]:before, #options-tray [option=safety-systems] figure:not(.included) [icon]:before, #options-tray [option=safety] figure:not(.included) [icon]:before, #options-tray [option=seguridad] figure:not(.included) [icon]:before, #options-tray [option=sun-visor] figure:not(.included) [icon]:before, #options-tray [option=trim-package] figure:not(.included) [icon]:before, #options-tray [option=upper-sleeper] figure:not(.included) [icon]:before, #options-tray [option=vocation] figure:not(.included) [icon]:before, #options-tray [option=wheel-chrome] figure:not(.included) [icon]:before, #options-tray [option=wheels] figure:not(.included) [icon]:before, #options-tray [option=package-trim] figure:not(.included) [icon]:before, #options-tray [option=safety-interior] figure:not(.included) [icon]:before {
background-color: #fff;
border-radius: 50%;
bottom: 0;
box-shadow: inset 0 0 0 1px #bababa;
color: #bababa;
font-size: 15px;
height: 34px;
left: 50%;
line-height: 34px;
position: absolute;
transform: translate(-50%,50%);
transition: all .25s;
width: 34px
}
@media(max-width:767px) {
#modal-dialog [option-container] figure:not(.included) [icon]:before, #options-tray [option=aerodynamics] figure:not(.included) [icon]:before, #options-tray [option=battery-powered-hvac-system] figure:not(.included) [icon]:before, #options-tray [option=bumper] figure:not(.included) [icon]:before, #options-tray [option=cardTest] figure:not(.included) [icon]:before, #options-tray [option=chassis-fairings] figure:not(.included) [icon]:before, #options-tray [option=detroit-connect] figure:not(.included) [icon]:before, #options-tray [option=doors] figure:not(.included) [icon]:before, #options-tray [option=doors-fresnel] figure:not(.included) [icon]:before, #options-tray [option=elite-trim] figure:not(.included) [icon]:before, #options-tray [option=engine] figure:not(.included) [icon]:before, #options-tray [option=enlace-freightliner] figure:not(.included) [icon]:before, #options-tray [option=fresnel-window] figure:not(.included) [icon]:before, #options-tray [option=hubs] figure:not(.included) [icon]:before, #options-tray [option=logo] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper-lounge] figure:not(.included) [icon]:before, #options-tray [option=lower-sleeper] figure:not(.included) [icon]:before, #options-tray [option=mirrors] figure:not(.included) [icon]:before, #options-tray [option=paquete-de-tren-motriz] figure:not(.included) [icon]:before, #options-tray [option=passenger-lower-cabinet] figure:not(.included) [icon]:before, #options-tray [option=passenger-seat] figure:not(.included) [icon]:before, #options-tray [option=powertrain-package] figure:not(.included) [icon]:before, #options-tray [option=refrigerator] figure:not(.included) [icon]:before, #options-tray [option=roof-fairing] figure:not(.included) [icon]:before, #options-tray [option=safety-systems] figure:not(.included) [icon]:before, #options-tray [option=safety] figure:not(.included) [icon]:before, #options-tray [option=seguridad] figure:not(.included) [icon]:before, #options-tray [option=sun-visor] figure:not(.included) [icon]:before, #options-tray [option=trim-package] figure:not(.included) [icon]:before, #options-tray [option=upper-sleeper] figure:not(.included) [icon]:before, #options-tray [option=vocation] figure:not(.included) [icon]:before, #options-tray [option=wheel-chrome] figure:not(.included) [icon]:before, #options-tray [option=wheels] figure:not(.included) [icon]:before, #options-tray [option=package-trim] figure:not(.included) [icon]:before, #options-tray [option=safety-interior] figure:not(.included) [icon]:before {
font-size: 9px;
height: 17px;
line-height: 17px;
width: 17px
}
#modal-dialog [option-container] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=aerodynamics] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=battery-powered-hvac-system] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=bumper] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=cardTest] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=chassis-fairings] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=detroit-connect] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=doors] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=doors-fresnel] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=elite-trim] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=engine] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=enlace-freightliner] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=fresnel-window] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=hubs] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=logo] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=lower-sleeper-lounge] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=lower-sleeper] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=mirrors] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=paquete-de-tren-motriz] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=passenger-lower-cabinet] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=passenger-seat] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=powertrain-package] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=refrigerator] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=roof-fairing] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=safety-systems] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=safety] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=seguridad] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=sun-visor] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=trim-package] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=upper-sleeper] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=vocation] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=wheel-chrome] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=wheels] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=package-trim] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=safety-interior] figure:not(.included) [icon] + div > label:first-child > span {
display: none
}
}
@media(min-width:768px) {
#modal-dialog [option-container] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=aerodynamics] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=battery-powered-hvac-system] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=bumper] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=cardTest] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=chassis-fairings] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=detroit-connect] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=doors] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=doors-fresnel] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=elite-trim] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=engine] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=enlace-freightliner] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=fresnel-window] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=hubs] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=logo] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=lower-sleeper-lounge] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=lower-sleeper] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=mirrors] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=paquete-de-tren-motriz] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=passenger-lower-cabinet] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=passenger-seat] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=powertrain-package] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=refrigerator] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=roof-fairing] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=safety-systems] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=safety] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=seguridad] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=sun-visor] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=trim-package] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=upper-sleeper] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=vocation] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=wheel-chrome] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=wheels] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=package-trim] figure:not(.included) [icon] + div > label:first-child > span, #options-tray [option=safety-interior] figure:not(.included) [icon] + div > label:first-child > span {
background-color: #713738;
border-radius: 3px;
color: #fff;
display: block;
font-family: industry,sans-serif;
font-size: 10px;
font-weight: 500;
margin: 10px auto 0;
max-width: 155px;
padding: 5px 10px;
text-transform: uppercase
}
}
#modal-dialog [option-container] figure:not(.included).selected [icon]:before, #options-tray [option=aerodynamics] figure:not(.included).selected [icon]:before, #options-tray [option=battery-powered-hvac-system] figure:not(.included).selected [icon]:before, #options-tray [option=bumper] figure:not(.included).selected [icon]:before, #options-tray [option=cardTest] figure:not(.included).selected [icon]:before, #options-tray [option=chassis-fairings] figure:not(.included).selected [icon]:before, #options-tray [option=detroit-connect] figure:not(.included).selected [icon]:before, #options-tray [option=doors] figure:not(.included).selected [icon]:before, #options-tray [option=doors-fresnel] figure:not(.included).selected [icon]:before, #options-tray [option=elite-trim] figure:not(.included).selected [icon]:before, #options-tray [option=engine] figure:not(.included).selected [icon]:before, #options-tray [option=enlace-freightliner] figure:not(.included).selected [icon]:before, #options-tray [option=fresnel-window] figure:not(.included).selected [icon]:before, #options-tray [option=hubs] figure:not(.included).selected [icon]:before, #options-tray [option=logo] figure:not(.included).selected [icon]:before, #options-tray [option=lower-sleeper-lounge] figure:not(.included).selected [icon]:before, #options-tray [option=lower-sleeper] figure:not(.included).selected [icon]:before, #options-tray [option=mirrors] figure:not(.included).selected [icon]:before, #options-tray [option=paquete-de-tren-motriz] figure:not(.included).selected [icon]:before, #options-tray [option=passenger-lower-cabinet] figure:not(.included).selected [icon]:before, #options-tray [option=passenger-seat] figure:not(.included).selected [icon]:before, #options-tray [option=powertrain-package] figure:not(.included).selected [icon]:before, #options-tray [option=refrigerator] figure:not(.included).selected [icon]:before, #options-tray [option=roof-fairing] figure:not(.included).selected [icon]:before, #options-tray [option=safety-systems] figure:not(.included).selected [icon]:before, #options-tray [option=safety] figure:not(.included).selected [icon]:before, #options-tray [option=seguridad] figure:not(.included).selected [icon]:before, #options-tray [option=sun-visor] figure:not(.included).selected [icon]:before, #options-tray [option=trim-package] figure:not(.included).selected [icon]:before, #options-tray [option=upper-sleeper] figure:not(.included).selected [icon]:before, #options-tray [option=vocation] figure:not(.included).selected [icon]:before, #options-tray [option=wheel-chrome] figure:not(.included).selected [icon]:before, #options-tray [option=wheels] figure:not(.included).selected [icon]:before, #options-tray [option=package-trim] figure:not(.included).selected [icon]:before, #options-tray [option=safety-interior] figure:not(.included).selected [icon]:before {
background-color: #6f87a6;
box-shadow: none;
color: #fff
}
#modal-dialog [option-container] figure.included *, #options-tray [option=aerodynamics] figure.included *, #options-tray [option=battery-powered-hvac-system] figure.included *, #options-tray [option=bumper] figure.included *, #options-tray [option=cardTest] figure.included *, #options-tray [option=chassis-fairings] figure.included *, #options-tray [option=detroit-connect] figure.included *, #options-tray [option=doors] figure.included *, #options-tray [option=doors-fresnel] figure.included *, #options-tray [option=elite-trim] figure.included *, #options-tray [option=engine] figure.included *, #options-tray [option=enlace-freightliner] figure.included *, #options-tray [option=fresnel-window] figure.included *, #options-tray [option=hubs] figure.included *, #options-tray [option=logo] figure.included *, #options-tray [option=lower-sleeper-lounge] figure.included *, #options-tray [option=lower-sleeper] figure.included *, #options-tray [option=mirrors] figure.included *, #options-tray [option=paquete-de-tren-motriz] figure.included *, #options-tray [option=passenger-lower-cabinet] figure.included *, #options-tray [option=passenger-seat] figure.included *, #options-tray [option=powertrain-package] figure.included *, #options-tray [option=refrigerator] figure.included *, #options-tray [option=roof-fairing] figure.included *, #options-tray [option=safety-systems] figure.included *, #options-tray [option=safety] figure.included *, #options-tray [option=seguridad] figure.included *, #options-tray [option=sun-visor] figure.included *, #options-tray [option=trim-package] figure.included *, #options-tray [option=upper-sleeper] figure.included *, #options-tray [option=vocation] figure.included *, #options-tray [option=wheel-chrome] figure.included *, #options-tray [option=wheels] figure.included *, #options-tray [option=package-trim] figure.included *, #options-tray [option=elite-trim] figure.included *, #options-tray [option=safety-interior] figure.included *, #options-tray [option=elite-trim] figure.included * {
cursor: default
}
#modal-dialog [option-container] figure.included div > label:first-child > span, #options-tray [option=aerodynamics] figure.included div > label:first-child > span, #options-tray [option=battery-powered-hvac-system] figure.included div > label:first-child > span, #options-tray [option=bumper] figure.included div > label:first-child > span, #options-tray [option=cardTest] figure.included div > label:first-child > span, #options-tray [option=chassis-fairings] figure.included div > label:first-child > span, #options-tray [option=detroit-connect] figure.included div > label:first-child > span, #options-tray [option=doors] figure.included div > label:first-child > span, #options-tray [option=doors-fresnel] figure.included div > label:first-child > span, #options-tray [option=elite-trim] figure.included div > label:first-child > span, #options-tray [option=engine] figure.included div > label:first-child > span, #options-tray [option=enlace-freightliner] figure.included div > label:first-child > span, #options-tray [option=fresnel-window] figure.included div > label:first-child > span, #options-tray [option=hubs] figure.included div > label:first-child > span, #options-tray [option=logo] figure.included div > label:first-child > span, #options-tray [option=lower-sleeper-lounge] figure.included div > label:first-child > span, #options-tray [option=lower-sleeper] figure.included div > label:first-child > span, #options-tray [option=mirrors] figure.included div > label:first-child > span, #options-tray [option=paquete-de-tren-motriz] figure.included div > label:first-child > span, #options-tray [option=passenger-lower-cabinet] figure.included div > label:first-child > span, #options-tray [option=passenger-seat] figure.included div > label:first-child > span, #options-tray [option=powertrain-package] figure.included div > label:first-child > span, #options-tray [option=refrigerator] figure.included div > label:first-child > span, #options-tray [option=roof-fairing] figure.included div > label:first-child > span, #options-tray [option=safety-systems] figure.included div > label:first-child > span, #options-tray [option=safety] figure.included div > label:first-child > span, #options-tray [option=seguridad] figure.included div > label:first-child > span, #options-tray [option=sun-visor] figure.included div > label:first-child > span, #options-tray [option=trim-package] figure.included div > label:first-child > span, #options-tray [option=upper-sleeper] figure.included div > label:first-child > span, #options-tray [option=vocation] figure.included div > label:first-child > span, #options-tray [option=wheel-chrome] figure.included div > label:first-child > span, #options-tray [option=wheels] figure.included div > label:first-child > span, #options-tray [option=package-trim] figure.included div > label:first-child > span, #options-tray [option=safety-interior] figure.included div > label:first-child > span {
display: none
}
#modal-dialog [option-container] figure [icon], #options-tray [option=aerodynamics] figure [icon], #options-tray [option=battery-powered-hvac-system] figure [icon], #options-tray [option=bumper] figure [icon], #options-tray [option=cardTest] figure [icon], #options-tray [option=chassis-fairings] figure [icon], #options-tray [option=detroit-connect] figure [icon], #options-tray [option=doors] figure [icon], #options-tray [option=doors-fresnel] figure [icon], #options-tray [option=elite-trim] figure [icon], #options-tray [option=engine] figure [icon], #options-tray [option=enlace-freightliner] figure [icon], #options-tray [option=fresnel-window] figure [icon], #options-tray [option=hubs] figure [icon], #options-tray [option=logo] figure [icon], #options-tray [option=lower-sleeper-lounge] figure [icon], #options-tray [option=lower-sleeper] figure [icon], #options-tray [option=mirrors] figure [icon], #options-tray [option=paquete-de-tren-motriz] figure [icon], #options-tray [option=passenger-lower-cabinet] figure [icon], #options-tray [option=passenger-seat] figure [icon], #options-tray [option=powertrain-package] figure [icon], #options-tray [option=refrigerator] figure [icon], #options-tray [option=roof-fairing] figure [icon], #options-tray [option=safety-systems] figure [icon], #options-tray [option=safety] figure [icon], #options-tray [option=seguridad] figure [icon], #options-tray [option=sun-visor] figure [icon], #options-tray [option=trim-package] figure [icon], #options-tray [option=upper-sleeper] figure [icon], #options-tray [option=vocation] figure [icon], #options-tray [option=wheel-chrome] figure [icon], #options-tray [option=wheels] figure [icon], #options-tray [option=package-trim] figure [icon], #options-tray [option=safety-interior] figure [icon] {
background-color: #f8f8f8;
background-size: cover;
border-bottom: 1px solid rgba(0,0,0,.06);
box-sizing: content-box;
height: 0;
margin-bottom: 0;
padding-bottom: 43%;
position: relative;
width: 100%
}
#modal-dialog [option-container] figure > div, #options-tray [option=aerodynamics] figure > div, #options-tray [option=battery-powered-hvac-system] figure > div, #options-tray [option=bumper] figure > div, #options-tray [option=cardTest] figure > div, #options-tray [option=chassis-fairings] figure > div, #options-tray [option=detroit-connect] figure > div, #options-tray [option=doors] figure > div, #options-tray [option=doors-fresnel] figure > div, #options-tray [option=elite-trim] figure > div, #options-tray [option=engine] figure > div, #options-tray [option=enlace-freightliner] figure > div, #options-tray [option=fresnel-window] figure > div, #options-tray [option=hubs] figure > div, #options-tray [option=logo] figure > div, #options-tray [option=lower-sleeper-lounge] figure > div, #options-tray [option=lower-sleeper] figure > div, #options-tray [option=mirrors] figure > div, #options-tray [option=paquete-de-tren-motriz] figure > div, #options-tray [option=passenger-lower-cabinet] figure > div, #options-tray [option=passenger-seat] figure > div, #options-tray [option=powertrain-package] figure > div, #options-tray [option=refrigerator] figure > div, #options-tray [option=roof-fairing] figure > div, #options-tray [option=safety-systems] figure > div, #options-tray [option=safety] figure > div, #options-tray [option=seguridad] figure > div, #options-tray [option=sun-visor] figure > div, #options-tray [option=trim-package] figure > div, #options-tray [option=upper-sleeper] figure > div, #options-tray [option=vocation] figure > div, #options-tray [option=wheel-chrome] figure > div, #options-tray [option=wheels] figure > div, #options-tray [option=package-trim] figure > div, #options-tray [option=safety-interior] figure > div {
padding: 26px 20px
}
#modal-dialog [option-container] figure > div label, #options-tray [option=aerodynamics] figure > div label, #options-tray [option=battery-powered-hvac-system] figure > div label, #options-tray [option=bumper] figure > div label, #options-tray [option=cardTest] figure > div label, #options-tray [option=chassis-fairings] figure > div label, #options-tray [option=detroit-connect] figure > div label, #options-tray [option=doors] figure > div label, #options-tray [option=doors-fresnel] figure > div label, #options-tray [option=elite-trim] figure > div label, #options-tray [option=engine] figure > div label, #options-tray [option=enlace-freightliner] figure > div label, #options-tray [option=fresnel-window] figure > div label, #options-tray [option=hubs] figure > div label, #options-tray [option=logo] figure > div label, #options-tray [option=lower-sleeper-lounge] figure > div label, #options-tray [option=lower-sleeper] figure > div label, #options-tray [option=mirrors] figure > div label, #options-tray [option=paquete-de-tren-motriz] figure > div label, #options-tray [option=passenger-lower-cabinet] figure > div label, #options-tray [option=passenger-seat] figure > div label, #options-tray [option=powertrain-package] figure > div label, #options-tray [option=refrigerator] figure > div label, #options-tray [option=roof-fairing] figure > div label, #options-tray [option=safety-systems] figure > div label, #options-tray [option=safety] figure > div label, #options-tray [option=seguridad] figure > div label, #options-tray [option=sun-visor] figure > div label, #options-tray [option=trim-package] figure > div label, #options-tray [option=upper-sleeper] figure > div label, #options-tray [option=vocation] figure > div label, #options-tray [option=wheel-chrome] figure > div label, #options-tray [option=wheels] figure > div label, #options-tray [option=package-trim] figure > div label, #options-tray [option=safety-interior] figure > div label {
color: #000;
font-family: industry,sans-serif;
font-size: 18px;
font-weight: 500;
padding: 4px 0
}
#modal-dialog [option-container] figure > div label.tag, #options-tray [option=aerodynamics] figure > div label.tag, #options-tray [option=battery-powered-hvac-system] figure > div label.tag, #options-tray [option=bumper] figure > div label.tag, #options-tray [option=cardTest] figure > div label.tag, #options-tray [option=chassis-fairings] figure > div label.tag, #options-tray [option=detroit-connect] figure > div label.tag, #options-tray [option=doors] figure > div label.tag, #options-tray [option=doors-fresnel] figure > div label.tag, #options-tray [option=elite-trim] figure > div label.tag, #options-tray [option=engine] figure > div label.tag, #options-tray [option=enlace-freightliner] figure > div label.tag, #options-tray [option=fresnel-window] figure > div label.tag, #options-tray [option=hubs] figure > div label.tag, #options-tray [option=logo] figure > div label.tag, #options-tray [option=lower-sleeper-lounge] figure > div label.tag, #options-tray [option=lower-sleeper] figure > div label.tag, #options-tray [option=mirrors] figure > div label.tag, #options-tray [option=paquete-de-tren-motriz] figure > div label.tag, #options-tray [option=passenger-lower-cabinet] figure > div label.tag, #options-tray [option=passenger-seat] figure > div label.tag, #options-tray [option=powertrain-package] figure > div label.tag, #options-tray [option=refrigerator] figure > div label.tag, #options-tray [option=roof-fairing] figure > div label.tag, #options-tray [option=safety-systems] figure > div label.tag, #options-tray [option=safety] figure > div label.tag, #options-tray [option=seguridad] figure > div label.tag, #options-tray [option=sun-visor] figure > div label.tag, #options-tray [option=trim-package] figure > div label.tag, #options-tray [option=upper-sleeper] figure > div label.tag, #options-tray [option=vocation] figure > div label.tag, #options-tray [option=wheel-chrome] figure > div label.tag, #options-tray [option=wheels] figure > div label.tag, #options-tray [option=package-trim] figure > div label.tag, #options-tray [option=safety-interior ] figure > div label.tag {
font-size: 12px;
opacity: .5
}
#modal-dialog [option-container] figure > div a, #options-tray [option=aerodynamics] figure > div a, #options-tray [option=battery-powered-hvac-system] figure > div a, #options-tray [option=bumper] figure > div a, #options-tray [option=cardTest] figure > div a, #options-tray [option=chassis-fairings] figure > div a, #options-tray [option=detroit-connect] figure > div a, #options-tray [option=doors] figure > div a, #options-tray [option=doors-fresnel] figure > div a, #options-tray [option=elite-trim] figure > div a, #options-tray [option=engine] figure > div a, #options-tray [option=enlace-freightliner] figure > div a, #options-tray [option=fresnel-window] figure > div a, #options-tray [option=hubs] figure > div a, #options-tray [option=logo] figure > div a, #options-tray [option=lower-sleeper-lounge] figure > div a, #options-tray [option=lower-sleeper] figure > div a, #options-tray [option=mirrors] figure > div a, #options-tray [option=paquete-de-tren-motriz] figure > div a, #options-tray [option=passenger-lower-cabinet] figure > div a, #options-tray [option=passenger-seat] figure > div a, #options-tray [option=powertrain-package] figure > div a, #options-tray [option=refrigerator] figure > div a, #options-tray [option=roof-fairing] figure > div a, #options-tray [option=safety-systems] figure > div a, #options-tray [option=safety] figure > div a, #options-tray [option=seguridad] figure > div a, #options-tray [option=sun-visor] figure > div a, #options-tray [option=trim-package] figure > div a, #options-tray [option=upper-sleeper] figure > div a, #options-tray [option=vocation] figure > div a, #options-tray [option=wheel-chrome] figure > div a, #options-tray [option=wheels] figure > div a, #options-tray [option=package-trim] figure > div a, #options-tray [option=safety-interior ] figure > div a {
font-family: industry,sans-serif;
font-size: 12px;
text-transform: uppercase
}
@media(max-width:767px) {
#modal-dialog [option-container] figure > div a, #modal-dialog [option-container] figure > div label, #options-tray [option=aerodynamics] figure > div a, #options-tray [option=aerodynamics] figure > div label, #options-tray [option=battery-powered-hvac-system] figure > div a, #options-tray [option=battery-powered-hvac-system] figure > div label, #options-tray [option=bumper] figure > div a, #options-tray [option=bumper] figure > div label, #options-tray [option=cardTest] figure > div a, #options-tray [option=cardTest] figure > div label, #options-tray [option=chassis-fairings] figure > div a, #options-tray [option=chassis-fairings] figure > div label, #options-tray [option=detroit-connect] figure > div a, #options-tray [option=detroit-connect] figure > div label, #options-tray [option=doors] figure > div a, #options-tray [option=doors-fresnel] figure > div a, #options-tray [option=doors] figure > div label, #options-tray [option=doors-fresnel] figure > div label, #options-tray [option=elite-trim] figure > div a, #options-tray [option=elite-trim] figure > div label, #options-tray [option=engine] figure > div a, #options-tray [option=engine] figure > div label, #options-tray [option=enlace-freightliner] figure > div a, #options-tray [option=enlace-freightliner] figure > div label, #options-tray [option=fresnel-window] figure > div a, #options-tray [option=fresnel-window] figure > div label, #options-tray [option=hubs] figure > div a, #options-tray [option=hubs] figure > div label, #options-tray [option=logo] figure > div a, #options-tray [option=logo] figure > div label, #options-tray [option=lower-sleeper-lounge] figure > div a, #options-tray [option=lower-sleeper-lounge] figure > div label, #options-tray [option=lower-sleeper] figure > div a, #options-tray [option=lower-sleeper] figure > div label, #options-tray [option=mirrors] figure > div a, #options-tray [option=mirrors] figure > div label, #options-tray [option=paquete-de-tren-motriz] figure > div a, #options-tray [option=paquete-de-tren-motriz] figure > div label, #options-tray [option=passenger-lower-cabinet] figure > div a, #options-tray [option=passenger-lower-cabinet] figure > div label, #options-tray [option=passenger-seat] figure > div a, #options-tray [option=passenger-seat] figure > div label, #options-tray [option=powertrain-package] figure > div a, #options-tray [option=powertrain-package] figure > div label, #options-tray [option=refrigerator] figure > div a, #options-tray [option=refrigerator] figure > div label, #options-tray [option=roof-fairing] figure > div a, #options-tray [option=roof-fairing] figure > div label, #options-tray [option=safety-systems] figure > div a, #options-tray [option=safety-systems] figure > div label, #options-tray [option=safety] figure > div a, #options-tray [option=safety] figure > div label, #options-tray [option=seguridad] figure > div a, #options-tray [option=seguridad] figure > div label, #options-tray [option=sun-visor] figure > div a, #options-tray [option=sun-visor] figure > div label, #options-tray [option=trim-package] figure > div a, #options-tray [option=trim-package] figure > div label, #options-tray [option=upper-sleeper] figure > div a, #options-tray [option=upper-sleeper] figure > div label, #options-tray [option=vocation] figure > div a, #options-tray [option=vocation] figure > div label, #options-tray [option=wheel-chrome] figure > div a, #options-tray [option=wheel-chrome] figure > div label, #options-tray [option=wheels] figure > div a, #options-tray [option=wheels] figure > div label, #options-tray [option=package-trim] figure > div a, #options-tray [option=package-trim] figure > div label, #options-tray [option=safety-interior] figure > div a, #options-tray [option=safety-interior] figure > div label {
font-size: 11px
}
}
[matrix-key*=_none], [matrix-key*=_off] {
background-size: auto !important
}
#modal-dialog {
background: url(../jpg/modal-dialog-bg.jpg) no-repeat 50%;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 45px 0;
text-align: center;
z-index: 11 !important
}
#modal-dialog.fade-enter-active, #modal-dialog.fade-leave-active {
transition: opacity .25s
}
#modal-dialog.fade-enter, #modal-dialog.fade-leave-to {
opacity: 0
}
#modal-dialog h6 {
color: #000;
font-size: 24px;
font-weight: 500
}
#modal-dialog h1, #modal-dialog h6 {
font-family: industry,sans-serif;
text-transform: uppercase
}
#modal-dialog h1 {
color: #6f87a6;
font-weight: 300
}
@media(max-width:767px) {
#modal-dialog {
padding: 22px 0
}
#modal-dialog h6 {
margin: 0
}
#modal-dialog h1 {
font-size: 18px;
margin-top: 7px
}
}
#modal-dialog [option-container] {
-webkit-overflow-scrolling: touch;
display: flex;
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden
}
#modal-dialog [option-container]:after, #modal-dialog [option-container]:before {
content: "";
display: block;
flex-grow: 0;
flex-shrink: 0
}
@media(min-width:768px) {
#modal-dialog [option-container]:after, #modal-dialog [option-container]:before {
width: 36px
}
}
@media(max-width:767px) {
#modal-dialog [option-container]:after, #modal-dialog [option-container]:before {
width: 18px
}
}
#modal-dialog [option-container] figure {
background: #fff;
height: auto
}
#modal-dialog [option-container] figure [icon] {
padding-bottom: 63.777%
}
@media(min-width:768px) {
#modal-dialog [option-container] figure {
flex-basis: 376px;
margin: 18px;
max-width: 376px;
min-width: 300px
}
}
@media(max-width:767px) {
#modal-dialog [option-container] figure {
flex-basis: 215px;
flex-shrink: 0;
margin: 18px 9px;
width: 215px
}
}
#modal-dialog [option-container] figure:first-child {
margin-left: auto
}
#modal-dialog [option-container] figure:last-child {
margin-right: auto
}
#modal-dialog [actions] {
margin-top: 20px
}
#modal-details {
background: #fff;
overflow: auto;
z-index: 12 !important;
}
#modal-details.fade-enter-active, #modal-details.fade-leave-active {
transition: opacity .25s
}
#modal-details.fade-enter, #modal-details.fade-leave-to {
opacity: 0
}
#modal-details ul li {
padding-left: 2.5em;
position: relative
}
#modal-details ul li:not(:last-of-type) {
margin-bottom: 1em
}
#modal-details ul li:before {
color: #6f87a6;
content: "• ";
left: 1em;
margin-right: .2em;
position: absolute
}
#modal-details [close] {
background: #6f87a6;
border-radius: 50%;
color: #fff;
height: 34px;
line-height: 38px;
padding: 0;
position: absolute;
right: 40px;
text-align: center;
top: 40px;
width: 34px;
z-index: 13
}
#modal-details [close]:before {
font-size: 15px;
line-height: 35px
}
@media(max-width:767px) {
#modal-details [close] {
right: 24px;
top: 15px
}
}
#modal-details > div {
display: flex;
padding: 7vw
}
@media(max-width:767px) {
#modal-details > div {
flex-direction: column;
padding-top: 60px
}
}
#modal-details > div > div:first-of-type {
flex: 1
}
@media(min-width:768px) {
#modal-details > div > div:first-of-type {
border-right: 1px solid rgba(0,0,0,.1);
padding-right: 3.5vw
}
}
@media(max-width:767px) {
#modal-details > div > div:first-of-type {
order: 2
}
}
#modal-details > div > div:first-of-type h1 {
margin-top: 0
}
@media(min-width:768px) {
#modal-details > div > div:last-of-type {
flex: 2;
padding-left: 3.5vw
}
}
@media(max-width:767px) {
#modal-details > div > div:last-of-type {
flex-grow: 1;
flex-shrink: 0;
padding-bottom: 10px
}
}
#dialog-overlay {
display: block
}
#dialog-overlay * {
min-width: 1vw;
z-index: 10
}
#dialog-overlay [back], #dialog-overlay [brand], #dialog-overlay [dealer-brand], #dialog-overlay [warn] {
background: transparent;
color: #6f87a6;
font-size: 12px;
position: absolute;
text-shadow: 2px 2px 30px rgba(0,0,0,.5);
text-transform: uppercase
}
#dialog-overlay [back].slide-enter-active, #dialog-overlay [back].slide-leave-active, #dialog-overlay [brand].slide-enter-active, #dialog-overlay [brand].slide-leave-active, #dialog-overlay [dealer-brand].slide-enter-active, #dialog-overlay [dealer-brand].slide-leave-active, #dialog-overlay [warn].slide-enter-active, #dialog-overlay [warn].slide-leave-active {
transition: all .25s
}
#dialog-overlay [back].slide-enter, #dialog-overlay [back].slide-leave-to, #dialog-overlay [brand].slide-enter, #dialog-overlay [brand].slide-leave-to, #dialog-overlay [dealer-brand].slide-enter, #dialog-overlay [dealer-brand].slide-leave-to, #dialog-overlay [warn].slide-enter, #dialog-overlay [warn].slide-leave-to {
opacity: 0;
transform: translateY(-100px)
}
@media(max-width:767px) {
#dialog-overlay [back], #dialog-overlay [brand], #dialog-overlay [dealer-brand], #dialog-overlay [warn] {
padding-left: 8px;
padding-right: 8px;
text-align: left
}
}
@media(min-width:768px) {
#dialog-overlay:not([data-viewer=interior]) [brand] {
background-image: url(../png/cascadia-badge.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
height: 30px;
left: 30px;
top: 15px;
width: calc(100% - 80px)
}
#dialog-overlay:not([data-viewer=interior]) [brand][region="2"] {
background-image: url(../png/cascadia-badge-mx.png)
}
#dialog-overlay:not([data-viewer=interior]) [brand][region="7"] {
background-image: url(../png/m2-106-badge.png);
height: 45px
}
#dialog-overlay:not([data-viewer=interior]) [brand][region="8"] {
background-image: url(../png/m2-106-plus-badge.png);
height: 58px
}
}
@media(max-width:767px) {
#dialog-overlay:not([data-viewer=interior]) [brand] {
display: none
}
}
@media(min-width:768px) {
.summary-active #dialog-overlay[data-viewer=misc] [brand][region="7"] {
height: 30px
}
.summary-active #dialog-overlay[data-viewer=misc] [brand][region="8"] {
height: 30px
}
}
#dialog-overlay [dealer-brand] {
background: #3b3b3b;
font-size: 12px;
left: 0;
padding: 12px 12px 12px 60px;
right: 0;
top: 0
}
@media(max-width:860px) {
#dialog-overlay [dealer-brand] {
padding-left: 30px
}
}
@media(max-width:767px) {
#dialog-overlay [dealer-brand] {
display: flex;
padding-bottom: 7px;
padding-top: 7px
}
}
#dialog-overlay [dealer-brand] a {
color: #fff;
display: inline-block;
flex: 1;
font-family: industry,sans-serif;
font-weight: 500;
max-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap
}
#dialog-overlay [dealer-brand] a + a {
border-left: 1px solid rgba(255,255,255,.5);
flex: .6;
margin-left: 30px;
opacity: .5;
padding-left: 30px
}
@media(max-width:860px) {
#dialog-overlay [dealer-brand] a + a {
margin-left: 10px;
padding-left: 10px
}
}
@media(max-width:767px) {
#dialog-overlay [dealer-brand] a + a {
text-align: center
}
}
#dialog-overlay [dealer-brand] ~ [brand] {
display: none
}
@media(max-width:860px) {
#dialog-overlay [dealer-brand] ~ [back] {
left: 0
}
}
@media(max-width:767px) {
#dialog-overlay [dealer-brand] ~ [back] {
left: 16px;
top: 37px
}
}
#dialog-overlay [back] {
left: 30px;
top: 70px
}
.summary-active #dialog-overlay [back] {
-webkit-overflow-scrolling: touch;
max-width: calc(100% - 16px);
overflow: auto;
padding-left: 0;
text-align: left;
top: 45px;
white-space: nowrap
}
#dialog-overlay [back]:before {
margin-right: 12px;
vertical-align: middle
}
#dialog-overlay [back]:after {
border-left: 1px solid #484848;
color: #484848;
content: attr(data-cab);
display: inline-block;
line-height: 12px;
margin-left: 10px;
opacity: .5;
padding-left: 10px;
vertical-align: middle
}
@media(max-width:767px) {
#dialog-overlay [back] {
-webkit-overflow-scrolling: touch;
left: 16px;
max-width: calc(100% - 16px);
overflow: auto;
right: 0;
top: 8px;
white-space: nowrap
}
}
#dialog-overlay [warn] {
left: 85px;
top: 110px
}
@media(max-width:767px) {
#dialog-overlay [warn] {
left: 41px;
top: 78px
}
}
#dialog-overlay [help] {
background: transparent;
border: 1px solid rgba(0,0,0,.06);
border-radius: 4px;
bottom: 50px;
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 12px;
height: 50px;
left: 50%;
letter-spacing: .36em;
line-height: 50px;
margin: 0;
padding-bottom: 0;
padding-top: 0;
pointer-events: none;
position: absolute;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
width: 90%
}
#dialog-overlay [help].slide-enter-active, #dialog-overlay [help].slide-leave-active {
transition: all .25s
}
#dialog-overlay [help].slide-enter, #dialog-overlay [help].slide-leave-to {
opacity: 0;
transform: translateX(-50%) translateY(100px)
}
@media(max-width:767px) {
#dialog-overlay [help] {
display: none
}
}
#dialog-overlay [actions] {
bottom: 50px;
left: 50px;
position: absolute;
right: 50px;
text-align: center
}
.summary-active #dialog-overlay [actions] {
bottom: 20px
}
@media(min-width:451px)and (max-width:900px) {
#dialog-overlay [actions] button {
padding-left: 14px;
padding-right: 14px;
white-space: normal
}
}
@media(max-width:767px) {
#dialog-overlay [actions] {
bottom: 20px;
left: 10px;
right: 10px
}
}
@media(min-width:768px) {
#dialog-overlay[data-viewer=interior] [warn] {
top: 114px
}
}
#dialog-overlay[data-viewer=interior] [back] {
color: #fff
}
@media(min-width:768px) {
#dialog-overlay[data-viewer=interior] [back] {
top: 30px
}
}
#dialog-overlay[data-viewer=interior] [back]:after {
border-left-color: #fff;
color: #fff;
opacity: .75
}
@media(min-width:768px) {
#dialog-overlay[data-viewer=interior] [dealer-brand] ~ [back] {
top: 70px
}
}
#misc-overlay > figure {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain
}
#misc-overlay .fade-enter-active, #misc-overlay .fade-leave-active {
transition: opacity .5s
}
#misc-overlay .fade-leave-active {
transition-delay: .25s
}
#misc-overlay .fade-enter, #misc-overlay .fade-leave-to {
opacity: 0
}
#quote-summary {
background: #fff
}
@media(min-width:768px) {
#quote-summary.slide-enter-active, #quote-summary.slide-leave-active {
overflow: hidden;
transition: all .25s
}
#quote-summary.slide-enter, #quote-summary.slide-leave-to {
max-height: 0;
overflow: hidden;
padding: 0
}
}
#quote-summary > :not(label) {
align-content: flex-start;
display: flex;
overflow: visible;
padding: 36px
}
#quote-summary > :not(label):not(:first-child) {
border-top: 3px solid #f5f5f5
}
@media(max-width:450px) {
#quote-summary > :not(label) {
flex-wrap: wrap;
justify-content: space-between;
position: relative
}
}
#quote-summary > :not(label) > ul {
grid-column-gap: 30px;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 30px;
column-gap: 30px;
flex-grow: 1
}
#quote-summary > :not(label) > ul li {
-moz-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
line-height: 1.3;
margin-bottom: 15px
}
#quote-summary > :not(label) > ul li > :first-child {
color: #000;
font-family: industry,sans-serif;
font-size: 14px
}
#quote-summary > :not(label) > ul li > :last-child {
color: rgba(0,0,0,.5);
font-size: 16px
}
#quote-summary > :not(label) > h6 {
flex-basis: 135px;
flex-shrink: 0;
margin: 0 10px 0 0;
width: 135px
}
@media(max-width:1040px)and (min-width:451px) {
#quote-summary > :not(label) > h6 {
flex-basis: 80px;
width: 80px
}
}
@media(max-width:450px) {
#quote-summary > :not(label) > h6 {
flex: 0 0 100%;
font-size: 14px;
margin-bottom: 25px;
width: 100%
}
}
#quote-summary > :not(label) > button {
background: transparent;
color: #6f87a6;
flex-basis: 38px;
height: 38px;
max-width: 38px;
padding: 0;
text-align: right
}
@media(max-width:450px) {
#quote-summary > :not(label) > button {
position: absolute;
right: 30px;
top: 28px
}
}
#quote-summary > label {
color: #713738;
cursor: default;
display: block;
font-size: 12px;
margin: auto;
max-width: 400px;
padding: 0 36px 36px;
text-align: center
}
#request-quote {
padding: 50px 0
}
#request-quote > [dealer-brand] {
margin-bottom: 38px;
text-align: center
}
#request-quote > [dealer-brand] img {
width: 216px
}
@media(min-width:768px) {
#request-quote.slide-enter-active, #request-quote.slide-leave-active {
max-width: 50vw;
overflow: hidden;
transition: all .25s
}
#request-quote.slide-enter, #request-quote.slide-leave-to {
max-width: 0;
overflow: hidden;
padding: 0
}
}
@media(max-width:450px) {
#request-quote {
padding: 36px 12px
}
}
#request-quote > div {
transition: opacity .25s
}
#request-quote[class=loading]:before {
display: none
}
#request-quote[class=loading] * {
cursor: default;
pointer-events: none
}
#request-quote[class=loading] > div {
opacity: .5 !important
}
#request-quote[class=loading] > footer button {
background: #aaa
}
#request-quote > * {
margin: 0 auto;
max-width: 540px;
width: 90%
}
@media(min-width:451px)and (max-width:900px) {
#request-quote > * {
width: calc(45vw - 20px)
}
}
#request-quote h1, #request-quote h1 + p {
margin-bottom: 34px;
text-align: center
}
#request-quote .errors > :last-child {
margin-bottom: 30px
}
#request-quote .dealer {
margin-bottom: 20px
}
#request-quote .dealer > section.slide-enter-active, #request-quote .dealer > section.slide-leave-active {
max-height: 600px;
overflow: hidden;
transition: all .25s
}
#request-quote .dealer > section.slide-enter, #request-quote .dealer > section.slide-leave-to {
max-height: 0;
overflow: hidden;
padding: 0
}
#request-quote footer button {
border-radius: 4px;
font-size: 12px
}
mobile-flip {
display: none
}
@media(max-width:767px)and (orientation:landscape) {
mobile-flip {
align-items: center;
background: #f2f2f2;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10
}
mobile-flip:before, mobile-flip > label {
flex: 1;
flex-shrink: 0;
width: 205px
}
mobile-flip:before {
background-image: url(../png/phone-switch.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: 70px auto;
content: "";
margin-bottom: 20px
}
mobile-flip > label {
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 22px;
text-align: center;
text-transform: uppercase
}
}
sales-page-container {
display: block;
position: relative;
width: 100%
}
sales-page-container .salesPageTruckRotator {
background-color: transparent;
height: auto
}
sales-page-container .salesPageTruckRotator comp-background {
background-color: transparent
}
comp-container[hero] sales-page-container .salesPageTruckRotator header, sales-page-container .salesPageTruckRotator comp-container[hero] header, sales-page-container .salesPageTruckRotator inner-content {
margin: auto;
max-width: 90%
}
@media(min-width:768px) {
comp-container[hero] sales-page-container .salesPageTruckRotator header, sales-page-container .salesPageTruckRotator comp-container[hero] header, sales-page-container .salesPageTruckRotator inner-content {
margin: 0;
max-width: 50%
}
sales-page-container .salesPageTruckRotator comp-background {
height: 31vw;
top: 50%;
transform: translateY(-50%);
width: 50vw
}
}
@media(min-width:1000px) {
comp-container[hero] sales-page-container .salesPageTruckRotator header, sales-page-container .salesPageTruckRotator comp-container[hero] header, sales-page-container .salesPageTruckRotator inner-content {
margin: 0;
max-width: 40%
}
sales-page-container .salesPageTruckRotator comp-background {
height: 35vw;
top: 50%;
transform: translateY(-50%);
width: 59vw
}
}
sales-page-container .sp-section {
margin: 0;
padding: 2em
}
sales-page-container .sp-section__inner {
margin: 1em auto;
max-width: 600px;
position: relative;
width: 90%
}
sales-page-container .text-light, sales-page-container .txt-light {
color: #fff
}
sales-page-container .text-dark, sales-page-container .txt-dark {
color: #3b3b3b
}
sales-page-container .btn-dark {
background-color: #484848
}
sales-page-container .btn-light {
background-color: #d3d3d3;
color: #6f87a6
}
sales-page-container .btn-plus {
background-image: url(../png/hotspot-icon.png);
background-position: 50%;
background-size: contain;
border-radius: 0;
height: 40px;
margin-right: 10px;
padding: 0;
width: 40px
}
sales-page-container .bg-dark {
background-color: #191d26
}
sales-page-container .bg-darkgray {
background-color: #333
}
sales-page-container .bg-grid {
background-image: url(../grid.html);
background-repeat: repeat
}
sales-page-container .width-narrow {
max-width: 600px
}
sales-page-container .responsive-padding {
padding: 1em
}
@media(min-width:500px) {
sales-page-container .responsive-padding {
padding: 2em
}
}
@media(min-width:800px) {
sales-page-container .responsive-padding {
padding: 5em
}
}
sales-page-container .flex-row-center {
align-content: center;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
sales-page-container .flexbox {
align-items: stretch;
display: flex;
flex-direction: column;
justify-content: center
}
@media(min-width:600px) {
sales-page-container .flexbox {
flex-direction: row
}
sales-page-container .flexbox > div.flexbox__half {
flex: 1 1 50%;
position: relative;
width: 50%
}
sales-page-container .flexbox > div.flexbox__third {
flex: 1 1 33%;
padding: 40px;
position: relative;
text-align: center
}
sales-page-container .flexbox > div.flexbox__quarters {
flex: 1 1 25%;
padding: 40px;
position: relative;
text-align: center
}
}
sales-page-container .imgBtn-container {
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
position: relative
}
@media(min-width:600px) {
sales-page-container .imgBtn-container {
align-items: stretch;
flex-direction: row
}
}
sales-page-container .imgBtn {
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 40px;
position: relative;
text-align: center;
z-index: 1
}
@media(min-width:600px) {
sales-page-container .imgBtn {
width: 33.3%
}
}
sales-page-container .imgBtn:focus .imgBtn__bg, sales-page-container .imgBtn:hover .imgBtn__bg {
opacity: .8
}
sales-page-container .imgBtn a {
color: #fff
}
sales-page-container .imgBtn p {
margin: 0;
padding: 0
}
sales-page-container .imgBtn__bg {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity .3s;
width: 100%;
z-index: 1
}
sales-page-container .imgBtn__inner {
position: relative;
z-index: 2
}
sales-page-container .imgBtn__headline {
color: #fff;
font-size: 24px;
margin: 15px auto;
max-width: 300px;
position: relative;
width: 90%
}
sales-page-container .imgBtn__cta {
color: #fff;
text-decoration: underline
}
sales-page-container .imgBtn-container[inverted-highlights] {
background-color: #000
}
sales-page-container .imgBtn-container[inverted-highlights]:focus .imgBtn__bg, sales-page-container .imgBtn-container[inverted-highlights]:hover .imgBtn__bg {
opacity: .5
}
sales-page-container .imgBtn-container[inverted-highlights] .imgBtn:focus .imgBtn__bg, sales-page-container .imgBtn-container[inverted-highlights] .imgBtn:hover .imgBtn__bg {
opacity: 1
}
sales-page-container .imgBtn-container[inverted-highlights] .imgBtn:focus .imgBtn__cta, sales-page-container .imgBtn-container[inverted-highlights] .imgBtn:hover .imgBtn__cta {
color: #fff;
text-decoration: none
}
sales-page-container .imgBtn-container[inverted-highlights] .imgBtn__bg {
opacity: .8
}
sales-page-container .sp-popup-button-group {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: auto;
max-width: 900px;
padding: 1.5em;
width: 100%
}
sales-page-container .sp-popup-button-group .btn {
background-color: #d3d3d3;
border-radius: 0 !important;
flex: 1 1 auto;
margin: 1px
}
@media(min-width:767px) {
sales-page-container .sp-popup-button-group {
align-content: center;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center
}
}
sales-page-container a.biglink {
-webkit-hyphens: auto;
hyphens: auto;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word
}
@media(min-width:768px) {
sales-page-container a.biglink {
font-size: 1.5em
}
}
sales-page-container .sp-popup {
display: none
}
sales-page-container ~ #modal-lightbox .modal-content .close {
background-color: #000
}
sales-page-container ~ #modal-lightbox .sp-popup {
background: #fff;
position: relative
}
sales-page-container ~ #modal-lightbox h2 {
font-size: 1.6em;
padding-bottom: .5em;
padding-right: 75px
}
sales-page-container ~ #modal-lightbox p {
font-size: 1.3rem;
line-height: 1.3em
}
sales-page-container ~ #modal-lightbox .sp-popup-inner {
background: #fff;
padding: 5em 2em 2em
}
sales-page-container ~ #modal-lightbox .sp-popup-inner > span[class^=icon-], sales-page-container ~ #modal-lightbox .sp-popup-inner span[class*=" icon-"] {
display: block;
height: 2em;
left: 2em;
position: absolute;
top: 1.5em;
width: 2em
}
sales-page-container ~ #modal-lightbox .sp-popup-inner > span[class^=icon-]:before, sales-page-container ~ #modal-lightbox .sp-popup-inner span[class*=" icon-"]:before {
color: #8a8b8c;
font-size: 2em;
height: 100%;
width: 100%
}
@media(min-width:600px) {
sales-page-container ~ #modal-lightbox h2 {
font-size: 2em;
padding-bottom: 0;
padding-left: 1.5em;
padding-right: 75px
}
sales-page-container ~ #modal-lightbox p {
font-size: 2rem;
line-height: 1.3em;
padding-right: 2em;
padding-top: 1em
}
sales-page-container ~ #modal-lightbox .sp-popup-inner {
padding: 2em 3em 3em
}
sales-page-container ~ #modal-lightbox .sp-popup-inner > span[class^=icon-], sales-page-container ~ #modal-lightbox .sp-popup-inner span[class*=" icon-"] {
left: 2em;
position: absolute;
top: auto
}
sales-page-container ~ #modal-lightbox .sp-popup-inner > span[class^=icon-]:before, sales-page-container ~ #modal-lightbox .sp-popup-inner span[class*=" icon-"]:before {
font-size: 2.5em
}
}
@media(min-width:800px) {
sales-page-container ~ #modal-lightbox h2 {
padding-left: 0
}
sales-page-container ~ #modal-lightbox .sp-popup-inner {
padding: 4em 3em 4em 8em
}
sales-page-container ~ #modal-lightbox .sp-popup-inner > span[class^=icon-], sales-page-container ~ #modal-lightbox .sp-popup-inner span[class*=" icon-"] {
left: 2.5em
}
}
sales-page-container #interior {
min-height: 700px;
position: relative
}
@media screen and (max-width:767px) {
sales-page-container #interior {
min-height: 400px
}
}
sales-page-container #configurator-mini {
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
sales-page-container #configurator-mini #configurator-viewers {
height: 100%;
top: 0
}
#configurator.salespages {
height: 80vh;
position: relative;
right: 0;
width: 100%
}
@media(min-width:993px) {
#configurator.salespages {
height: 85vh
}
}
@media(max-width:992px) {
#configurator.salespages #hotspot-overlay .fab-wrap, #configurator.salespages #hotspot-overlay .vdom, #configurator.salespages #interior-builder {
bottom: 0;
height: 80vh !important;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
}
#configurator.salespages #configurator-viewers {
height: 100%;
padding-bottom: 0;
top: 0
}
#configurator.salespages #configurator-viewers #interior-builder:before {
display: none
}
#configurator.salespages canvas {
height: 100% !important
}
comp-vin-lookup {
display: block;
margin: 0 auto 50px;
max-width: 960px;
padding: 30px 20px
}
comp-vin-lookup.show-results #vin-search-error-msg, comp-vin-lookup.show-results .help, comp-vin-lookup.show-results .info, comp-vin-lookup.show-results .subtext, comp-vin-lookup.show-results h1 {
display: none
}
comp-vin-lookup.show-results form {
margin-bottom: 30px;
overflow: hidden
}
comp-vin-lookup.show-results .input-field {
float: left;
width: calc(100% - 150px)
}
comp-vin-lookup.show-results .input-field i, comp-vin-lookup.show-results .input-field input {
height: 49px
}
comp-vin-lookup.show-results footer {
float: right;
margin: 10px 0;
width: 150px
}
comp-vin-lookup.show-results footer button {
width: 150px
}
comp-vin-lookup.show-results footer > aside {
display: none
}
comp-vin-lookup.show-results.error #vin-search-error-msg, comp-vin-lookup.show-results.error .help {
display: block;
margin-bottom: 0
}
comp-vin-lookup.show-results.error form {
padding-bottom: 30px;
position: relative
}
comp-vin-lookup.show-results.error #vin-search-error-msg {
position: absolute;
top: 60px;
width: 100%
}
comp-vin-lookup svg {
left: 50%;
position: relative;
transform: translateX(-50%)
}
comp-vin-lookup .btn-search {
background-position: 107px;
background-repeat: no-repeat
}
comp-vin-lookup .btn-search.loading {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwOS4yNSA1NS41aC0zNmwxMi0xMmEyOS41NCAyOS41NCAwIDAgMC00OS41MyAxMkgxOC43NUE0Ni4wNCA0Ni4wNCAwIDAgMSA5Ni45IDMxLjg0bDEyLjM1LTEyLjM0djM2em0tOTAuNSAxN2gzNmwtMTIgMTJhMjkuNTQgMjkuNTQgMCAwIDAgNDkuNTMtMTJoMTYuOTdBNDYuMDQgNDYuMDQgMCAwIDEgMzEuMSA5Ni4xNkwxOC43NCAxMDguNXYtMzZ6Ii8+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgNjQgNjQiIHRvPSIzNjAgNjQgNjQiIGR1cj0iNzIwbXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9nPjwvc3ZnPg==");
padding-right: 50px
}
comp-vin-lookup .btn-help {
border-radius: 50%;
font-size: 12px;
height: 20px;
line-height: 22px;
padding: 0;
position: relative;
text-align: center;
top: -1px;
width: 20px
}
comp-vin-lookup h1 {
letter-spacing: 0;
text-align: center
}
comp-vin-lookup .help, comp-vin-lookup .info {
color: rgba(59,59,59,.5);
font-size: 16px;
text-align: center
}
comp-vin-lookup .help {
margin-bottom: 50px
}
comp-vin-lookup .icon-header-search.prefix {
background: #efefef;
border-bottom: 1px solid #a9a9a9;
height: 43px;
width: 30px
}
comp-vin-lookup .icon-header-search.prefix:before {
color: #000;
left: 10px;
position: relative;
top: 6px
}
comp-vin-lookup #vin-search-error-msg {
color: #f44336;
margin-top: 10px;
text-align: center
}
comp-vin-lookup .input-field, comp-vin-lookup footer {
transition: all .5s
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer {
padding: 0 220px;
position: relative
}
@media(min-width:401px) {
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside {
left: 0;
position: absolute;
top: 0;
width: 210px
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section {
flex: 1
}
}
@media(max-width:767px)and (min-width:401px) {
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer {
padding-right: 0;
text-align: right
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside {
text-align: left
}
}
@media(max-width:400px) {
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer {
padding: 0
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside {
justify-content: center;
margin: 0 auto 30px
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section {
flex: 0
}
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside {
display: flex
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside h6, comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside span {
color: #000;
font-size: 16px
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > h6 {
flex: 0;
margin: 0
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section {
line-height: 1;
margin-left: 10px;
text-align: left
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section label {
display: block
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section label:not(:last-child) {
margin-bottom: 10px
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section input {
display: none
}
comp-vin-lookup:not(.show-results) form:not(.gsc-search-box) footer > aside > section input:not(:checked) + span {
color: #a9a9a9
}
comp-vin-lookup footer {
margin: 50px 0;
text-align: center
}
comp-vin-lookup footer .subtext {
color: rgba(59,59,59,.5);
font-size: 14px;
letter-spacing: 1.33px;
line-height: 25px;
max-width: 460px !important
}
comp-vin-lookup h2 {
color: #3b3b3b;
font-size: 20px;
letter-spacing: .21px;
margin: 0;
padding: 12px 0
}
comp-press comp-vin-lookup comp-container.none:not(.loading):after, comp-vin-lookup comp-press comp-container.none:not(.loading):after, comp-vin-lookup h3 {
color: #6f87a6;
font-size: 14px;
letter-spacing: .22px;
margin: 5px 0 20px
}
comp-vin-lookup .content-section {
border-bottom: 1px solid #ebebeb
}
comp-vin-lookup .content-section:first-child {
border-top: 1px solid #ebebeb
}
comp-vin-lookup .content-section:not(.expanded) > header + .content-list {
margin: 0;
max-height: 0;
padding-bottom: 0;
padding-top: 0
}
comp-vin-lookup .content-section:not(.expanded) > header:after {
transform: rotate(-90deg)
}
comp-vin-lookup .content-section > .content-list {
box-sizing: border-box;
overflow: hidden;
transition: all .25s
}
comp-vin-lookup .content-section > header {
color: #6f87a6;
cursor: pointer;
display: block;
font-size: 20px;
height: 60px;
letter-spacing: .21px;
overflow: hidden;
padding: 12px 40px 12px 0;
position: relative;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap
}
comp-vin-lookup .content-section > header:after, comp-vin-lookup .content-section > header:before {
background: #6f87a6;
content: "";
height: 2px;
margin-top: -1px;
position: absolute;
right: 14px;
top: 50%;
transition: transform .2s;
width: 14px
}
comp-vin-lookup .content-section > header .subtotal {
color: #cacaca
}
comp-vin-lookup .content-section > header:hover .subtotal {
color: #6f87a6
}
comp-vin-lookup .content-section .asset {
display: inline-block;
line-height: 1.4;
margin: 5px 0;
padding-left: 40px
}
@media screen and (max-width:480px) {
comp-vin-lookup .content-section .asset {
margin-bottom: 20px
}
}
comp-vin-lookup .content-section .asset.vid-link {
background: url(../png/video-icon.png) no-repeat left 3px
}
comp-vin-lookup .content-section .asset.pdf-link {
background: url(../png/pdf-icon.png) no-repeat left 3px
}
comp-vin-lookup .feedback p {
color: rgba(59,59,59,.5);
display: none;
font-size: 14px;
letter-spacing: 1.33px;
margin: 0 32px 0 0
}
comp-vin-lookup .feedback .btn-feedback {
background-color: #713738;
border-radius: 0;
display: block;
max-height: 3em;
z-index: 3
}
comp-vin-lookup.loading:before {
content: "Loading...";
font-size: 20px;
text-align: center
}
#vin-lookup-video-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
width: 100%
}
#vin-lookup-video-wrapper video {
height: 100%;
position: absolute;
width: 100%
}
#vin-lookup-video-wrapper .vin-lookup-video-dimensions {
height: 100%;
position: absolute !important;
width: 100%
}
.modal {
max-height: none !important
}
comp-driver-training-feedback {
display: block;
margin: 0 auto 50px;
max-width: 960px;
padding: 30px 20px
}
comp-driver-training-feedback h1 {
letter-spacing: 0;
margin-bottom: 50px;
text-align: center
}
comp-driver-training-feedback .bg {
background: #f3f4f3
}
comp-driver-training-feedback li {
color: #000;
font-size: 16px;
margin-bottom: 60px
}
comp-driver-training-feedback .options {
display: flex;
flex-wrap: wrap;
padding: 30px 0 0
}
comp-driver-training-feedback .options label {
color: #8c9091;
font-size: 18px !important;
margin-right: 20px;
padding-left: 50px;
position: relative
}
comp-driver-training-feedback .options > div {
margin-bottom: 0 !important;
margin-top: 0;
max-height: 0;
opacity: 0;
transition: visibility 0s linear .4s,max-height .4s,margin .4s,opacity .4s;
visibility: hidden;
width: 100%
}
comp-driver-training-feedback .options.vertical {
margin: 35px 0 0;
padding-bottom: 30px;
padding-top: 50px
}
comp-driver-training-feedback .options.vertical label {
flex-grow: 1;
margin: 0;
padding-bottom: 45px;
padding-left: 0;
text-align: center
}
comp-driver-training-feedback .options.vertical label:after, comp-driver-training-feedback .options.vertical label:before {
bottom: 0;
left: 0;
margin: auto;
right: 0;
top: auto
}
comp-driver-training-feedback .options.vertical label .info {
font-size: 14px;
left: 0;
position: absolute;
text-align: center;
top: 0;
transform: translateY(-110%);
width: 100%
}
comp-driver-training-feedback li .options textarea {
height: 0;
margin-bottom: 0 !important;
margin-top: 0;
opacity: 0;
transition: visibility 0s linear .4s,height .4s,margin .4s,opacity .4s;
visibility: hidden
}
comp-driver-training-feedback .options input[value=no]:not(:checked) ~ textarea, comp-driver-training-feedback .options input[value=yes]:not(:checked) ~ div {
margin-top: 0 !important
}
comp-driver-training-feedback .options input[value=no]:not(:checked) ~ textarea {
height: 0 !important
}
comp-driver-training-feedback .options input[value=no]:checked ~ textarea, comp-driver-training-feedback .options input[value=yes]:checked ~ div {
margin-top: 25px;
opacity: 1;
transition-delay: 0s;
visibility: visible
}
comp-driver-training-feedback .options input[value=no]:checked ~ textarea {
height: 100px
}
comp-driver-training-feedback .options input[value=yes]:checked ~ div {
max-height: 350px
}
comp-driver-training-feedback .options + textarea {
margin-top: 25px
}
comp-driver-training-feedback #feedback-submit {
margin-left: 40px;
width: 200px
}
comp-driver-training-feedback .link-list {
margin: 0 auto;
max-width: 400px
}
comp-driver-training-feedback .link-list li {
color: #6f87a6;
list-style: disc inside
}
@media screen and (max-width:768px) {
comp-driver-training-feedback li {
margin-bottom: 40px
}
comp-driver-training-feedback li:first-child .options, comp-driver-training-feedback li:first-child label {
display: block !important
}
comp-driver-training-feedback .options.vertical {
padding-top: 75px
}
}
comp-video {
overflow: hidden;
padding: 0 !important;
position: relative
}
comp-video:before {
box-sizing: content-box;
content: "";
display: block;
padding-bottom: 56.25%
}
comp-video > * {
bottom: 0;
height: 100% !important;
left: 0;
position: absolute !important;
right: 0;
top: 0;
width: 100% !important
}
.modal .jw-dock {
display: none
}
comp-expand-blocks {
display: block
}
comp-expand-blocks:not([single=video]):not([empty=empty]) > header {
cursor: pointer
}
comp-expand-blocks > header {
padding: 8.78477306vw 6.588579795vw;
position: relative
}
comp-container[hero] comp-expand-blocks > header header, comp-expand-blocks > header comp-container[hero] header, comp-expand-blocks > header inner-content {
max-width: 385px
}
@media(min-width:1050px) {
comp-container[hero] comp-expand-blocks > header header, comp-expand-blocks > header comp-container[hero] header, comp-expand-blocks > header inner-content {
max-width: 36.6666666667vw
}
}
comp-expand-blocks > header h2 {
margin-bottom: 12px
}
@media(min-width:768px) {
comp-expand-blocks > header h2 {
font-size: 50px
}
}
@media(min-width:1050px) {
comp-expand-blocks > header h2 {
font-size: 4.7619047619vw;
margin-bottom: 1.1428571429vw
}
}
comp-expand-blocks > header h4 {
color: #6f87a6;
font-size: 14px;
margin-bottom: 14px;
text-transform: uppercase
}
@media(min-width:1050px) {
comp-expand-blocks > header h4 {
font-size: 1.3333333333vw;
margin-bottom: 1.3333333333vw
}
comp-expand-blocks > header p {
font-size: 1.5238095238vw;
margin-bottom: 1.380952381vw
}
comp-expand-blocks > header p:last-of-type {
margin-bottom: 4vw
}
}
comp-expand-blocks > header button.btn-default {
background: transparent !important;
color: #6f87a6 !important;
font-size: 14px;
line-height: 20px;
max-width: 250px;
min-width: 34px;
padding: 10px 10px 10px 54px;
position: relative;
text-align: left
}
comp-expand-blocks > header button.btn-default:before {
background-color: #6f87a6;
color: #fff;
font-size: 27px;
height: 34px;
left: 0;
line-height: 34px;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
width: 34px
}
@media(min-width:1050px) {
comp-expand-blocks > header button.btn-default {
font-size: 1.3333333333vw;
line-height: 1.9047619048vw;
max-width: 23.8095238095vw;
min-width: 3.2380952381vw;
padding: .9523809524vw .9523809524vw .9523809524vw 5.1428571429vw
}
comp-expand-blocks > header button.btn-default:before {
font-size: 2.5714285714vw;
height: 3.2380952381vw;
line-height: 3.2380952381vw !important;
width: 3.2380952381vw
}
}
@media(max-width:767px) {
comp-expand-blocks > header > comp-background:not(:first-of-type) {
display: none
}
}
@media(min-width:768px) {
comp-expand-blocks > header > comp-background:not(:last-of-type) {
display: none
}
}
@media(max-width:767px) {
comp-expand-blocks > header > comp-background {
min-height: 34vw
}
}
comp-expand-blocks > header > comp-background a[type=VID] {
border-radius: 4.39238653vw;
font-size: 1.4641288433vw;
height: 8.6383601757vw;
padding: 0;
width: 8.6383601757vw
}
comp-expand-blocks > article {
background: #f9f9f9;
overflow: hidden;
padding: 5.270863836vw 20px;
transition: padding .25s linear
}
comp-expand-blocks > article > * {
color: #3b3b3b;
display: block;
margin: 0 auto;
max-width: 1024px
}
comp-expand-blocks > article > * comp-press comp-container.none:not(.loading):after, comp-expand-blocks > article > * h2, comp-expand-blocks > article > * h3, comp-expand-blocks > article > * h4, comp-press comp-expand-blocks > article > * comp-container.none:not(.loading):after {
color: #3b3b3b
}
comp-expand-blocks > article > :not(:first-child) {
margin-top: 4.39238653vw
}
@media(max-width:767px) {
comp-expand-blocks > article > :not(:first-child) {
margin-top: 40px
}
}
comp-expand-blocks > article > [image] + * {
margin-top: 2.196193265vw
}
@media(min-width:768px) {
comp-expand-blocks > article > [columns] {
display: flex;
justify-content: center
}
}
comp-expand-blocks > article > [columns] > * {
flex: 1;
min-width: 0
}
@media(min-width:768px) {
comp-expand-blocks > article > [columns] > :not(:first-child) {
margin-left: 10px
}
comp-expand-blocks > article > [columns] > :not(:last-child) {
margin-right: 10px
}
}
@media(max-width:767px) {
comp-expand-blocks > article > [columns] > :not(:first-child) {
margin-top: 20px
}
comp-expand-blocks > article > [columns] > :not(:last-child) {
margin-bottom: 20px
}
}
comp-expand-blocks > article > [columns] > * img + * {
margin-top: 26px
}
comp-expand-blocks > article > [columns] > * comp-press comp-container.none:not(.loading):after, comp-expand-blocks > article > [columns] > * h3, comp-press comp-expand-blocks > article > [columns] > * comp-container.none:not(.loading):after {
font-size: 36px;
margin-bottom: 20px
}
comp-expand-blocks > article > [columns] > * > :last-child {
margin-bottom: 0
}
comp-expand-blocks > article > [columns] > * > :first-child {
margin-top: 0
}
comp-expand-blocks > article > [columns] > * > :not(img) {
padding-left: 32px;
padding-right: 32px
}
comp-expand-blocks > article > [columns=one] > * {
text-align: center
}
@media(min-width:768px) {
comp-expand-blocks > article > [columns=one] > * {
flex-basis: 684px;
flex-grow: 0;
flex-shrink: 1;
width: 684px
}
}
@media(max-width:767px) {
comp-expand-blocks > article > [columns=one] > * {
max-width: 684px
}
}
comp-expand-blocks > article > [columns=one] [buttons] > * {
margin-left: auto;
margin-right: auto
}
comp-expand-blocks > article > [columns=three] > * > :not(img) {
padding-left: 0;
padding-right: 0
}
comp-expand-blocks > article > * [buttons] > * {
display: block;
max-width: 305px
}
comp-expand-blocks > article > * [buttons] > :not(:first-child) {
margin-top: 10px
}
@media(min-width:768px) {
comp-expand-blocks[half][media=Right] > header > comp-background {
order: 2
}
}
comp-expand-blocks[half] > header {
display: flex;
padding: 0
}
@media(max-width:767px) {
comp-expand-blocks[half] > header {
flex-direction: column
}
}
comp-expand-blocks[half] > header > * {
flex: 1
}
@media(min-width:768px) {
comp-expand-blocks[half] > header > * {
max-width: 50%;
width: 50%
}
}
@media(max-width:767px) {
comp-expand-blocks[half] > header > * {
max-width: none
}
}
comp-expand-blocks[half] > header > comp-background {
height: auto;
position: static
}
@media(max-width:767px) {
comp-expand-blocks[half] > header > comp-background {
background-position: bottom
}
}
comp-container[hero] comp-expand-blocks[half] > header header, comp-expand-blocks[half] > header comp-container[hero] header, comp-expand-blocks[half] > header inner-content {
max-width: none;
padding: 8.78477306vw 6.588579795vw
}
@media(max-width:767px) {
comp-expand-blocks:not([half]) > header {
display: flex;
flex-direction: column;
padding: 0
}
comp-expand-blocks:not([half]) > header > * {
flex: 1;
max-width: none
}
comp-container[hero] comp-expand-blocks:not([half]) > header header, comp-expand-blocks:not([half]) > header comp-container[hero] header, comp-expand-blocks:not([half]) > header inner-content {
padding: 8.78477306vw 6.588579795vw
}
/* comp-expand-blocks:not([half]) > header [text-light] h4 {
color: #fff;
}*/
}
comp-container[hero] comp-expand-blocks:not([half])[media=Left] > header header, comp-expand-blocks:not([half])[media=Left] > header comp-container[hero] header, comp-expand-blocks:not([half])[media=Left] > header inner-content {
margin-left: auto;
margin-right: 0
}
comp-expand-blocks[collapsed] > article {
-webkit-animation: collapse .25s linear;
animation: collapse .25s linear;
max-height: 0;
opacity: 0;
padding-bottom: 0;
padding-top: 0
}
comp-expand-blocks:not([collapsed]) button.btn-default:before {
line-height: 34px
}
comp-expand-blocks:not([collapsed]).button-fixed button.btn-default {
height: 34px;
left: 50%;
overflow: hidden;
padding: 0;
position: fixed;
top: 50px;
transform: translateX(-50%);
width: 34px
}
comp-expand-blocks:not([collapsed]).button-fixed button.btn-default:before {
display: block;
position: static;
transform: none
}
@media(min-width:1050px) {
comp-expand-blocks:not([collapsed]).button-fixed button.btn-default {
font-size: 2.5714285714vw;
height: 3.2380952381vw;
line-height: 3.2380952381vw;
width: 3.2380952381vw
}
comp-expand-blocks:not([collapsed]).button-fixed button.btn-default:before {
line-height: 3.2380952381vw
}
}
comp-expand-blocks:not([collapsed]) > article {
-webkit-animation: collapse-expand .25s linear;
animation: collapse-expand .25s linear;
transform: translateZ(0)
}
[electric] ~ comp-expand-blocks .btn {
background-color: #75c1e3
}
[electric] ~ comp-expand-blocks[text-light] {
background: #000;
color: #fff
}
[electric] ~ comp-expand-blocks[text-light] a:not([role=button]) {
color: #75c1e3
}
[electric] ~ comp-expand-blocks[text-light] :not(h2) {
color: #fff
}
[electric] ~ comp-expand-blocks[text-light] header comp-container[hero] header h2, [electric] ~ comp-expand-blocks[text-light] header inner-content h2, comp-container[hero] [electric] ~ comp-expand-blocks[text-light] header header h2 {
color: #75c1e3
}
[electric] ~ comp-expand-blocks[text-light] header comp-container[hero] header :not(h2), [electric] ~ comp-expand-blocks[text-light] header inner-content :not(h2), comp-container[hero] [electric] ~ comp-expand-blocks[text-light] header header :not(h2) {
color: #fff
}
[electric] ~ comp-expand-blocks > header button.btn-default {
color: #75c1e3 !important
}
[electric] ~ comp-expand-blocks > header button.btn-default:before {
background-color: #75c1e3
}
[electric] ~ comp-expand-blocks > article {
background: #000
}
@keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0
}
99% {
max-height: 100vh;
opacity: 1;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
width: 100%
}
}
@keyframes collapse {
0% {
max-height: none;
opacity: 1
}
1% {
max-height: 100vh;
opacity: 1;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
width: 100%
}
}
@media(min-width:768px) {
comp-highlight + comp-truck-explore {
margin-top: 58px
}
}
comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-truck-explore > h3.h2, comp-truck-explore a > h3, comp-truck-explore comp-press a > comp-container.none:not(.loading):after {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25
}
@media(max-width:767px) {
comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-truck-explore > h3.h2, comp-truck-explore > p {
padding-left: 20px;
padding-right: 20px
}
}
[engine] ~ comp-truck-explore > h3.h2, [engine] ~ comp-truck-explore > p, comp-press [engine] ~ comp-truck-explore > comp-container.h2.none:not(.loading):after {
max-width: 1246px
}
[engine] ~ comp-truck-explore > h3.h2, comp-press [engine] ~ comp-truck-explore > comp-container.h2.none:not(.loading):after {
margin-bottom: 23px;
padding-bottom: 0 !important
}
[engine] ~ comp-truck-explore > h3.h2:after, comp-press [engine] ~ comp-truck-explore > comp-container.h2.none:not(.loading):after {
display: none
}
@media(max-width:767px) {
comp-truck-explore a {
color: #3b3b3b;
font-size: 14px
}
}
comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-truck-explore a > h3, comp-truck-explore comp-press a > comp-container.none:not(.loading):after {
font-size: 28px
}
comp-truck-explore a > h3:before {
color: #6f87a6;
content: attr(categories);
display: block;
font-size: 14px;
font-weight: 600;
letter-spacing: 4px;
line-height: 20px;
text-transform: uppercase
}
@media(max-width:767px) {
comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-truck-explore a > h3, comp-truck-explore comp-press a > comp-container.none:not(.loading):after {
font-size: 24px;
margin-top: 20px
}
comp-truck-explore a > h3:before {
font-weight: 500;
margin-bottom: 5px
}
}
comp-truck-explore a p {
color: #484848
}
comp-truck-explore a[type=VID] {
color: #3b3b3b
}
comp-truck-explore a[type=VID] > comp-image {
position: relative
}
comp-truck-explore a[type=VID] > comp-image:before {
background-color: #6f87a6;
border-radius: 60px;
color: #fff;
font-size: 20px;
height: 69px;
left: 50%;
line-height: 69px;
opacity: .9;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%,-50%);
transition: background-color .25s;
width: 69px;
z-index: 1
}
html:not(.touch) comp-truck-explore a[type=VID] > comp-image:hover:before {
/*background-color: #713738*/
}
comp-truck-explore .swiper-container {
list-style: none;
overflow: hidden;
padding: 0 calc(50vw - 583px) 65px;
position: relative;
z-index: 1
}
[engine] ~ comp-truck-explore .swiper-container {
padding-left: calc(50vw - 629.5px);
padding-right: calc(50vw - 629.5px)
}
@media(min-width:1050px) {
[engine] ~ comp-truck-explore .swiper-container[count="0"] .swiper-button-next, [engine] ~ comp-truck-explore .swiper-container[count="0"] .swiper-button-prev, [engine] ~ comp-truck-explore .swiper-container[count="0"] .swiper-pagination-bullets, [engine] ~ comp-truck-explore .swiper-container[count="1"] .swiper-button-next, [engine] ~ comp-truck-explore .swiper-container[count="1"] .swiper-button-prev, [engine] ~ comp-truck-explore .swiper-container[count="1"] .swiper-pagination-bullets, [engine] ~ comp-truck-explore .swiper-container[count="2"] .swiper-button-next, [engine] ~ comp-truck-explore .swiper-container[count="2"] .swiper-button-prev, [engine] ~ comp-truck-explore .swiper-container[count="2"] .swiper-pagination-bullets, [engine] ~ comp-truck-explore .swiper-container[count="3"] .swiper-button-next, [engine] ~ comp-truck-explore .swiper-container[count="3"] .swiper-button-prev, [engine] ~ comp-truck-explore .swiper-container[count="3"] .swiper-pagination-bullets {
display: none
}
}
@media(min-width:768px) {
comp-truck-explore .swiper-container {
margin-bottom: 100px
}
comp-truck-explore .swiper-container[count="0"] .swiper-button-next, comp-truck-explore .swiper-container[count="0"] .swiper-button-prev, comp-truck-explore .swiper-container[count="0"] .swiper-pagination-bullets, comp-truck-explore .swiper-container[count="1"] .swiper-button-next, comp-truck-explore .swiper-container[count="1"] .swiper-button-prev, comp-truck-explore .swiper-container[count="1"] .swiper-pagination-bullets, comp-truck-explore .swiper-container[count="2"] .swiper-button-next, comp-truck-explore .swiper-container[count="2"] .swiper-button-prev, comp-truck-explore .swiper-container[count="2"] .swiper-pagination-bullets {
display: none
}
}
@media(max-width:767px) {
comp-truck-explore .swiper-container {
margin-bottom: 50px
}
comp-truck-explore .swiper-container[count="0"] .swiper-button-next, comp-truck-explore .swiper-container[count="0"] .swiper-button-prev, comp-truck-explore .swiper-container[count="0"] .swiper-pagination-bullets, comp-truck-explore .swiper-container[count="1"] .swiper-button-next, comp-truck-explore .swiper-container[count="1"] .swiper-button-prev, comp-truck-explore .swiper-container[count="1"] .swiper-pagination-bullets {
display: none
}
}
comp-truck-explore .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0
}
comp-truck-explore .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
border-color: #d8d8d8;
margin: 0 14px
}
@media(max-width:767px) {
comp-truck-explore .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 8px
}
}
comp-truck-explore .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #d8d8d8;
box-shadow: none
}
comp-truck-explore .swiper-container-no-flexbox .swiper-slide {
float: left
}
comp-truck-explore .swiper-wrapper {
box-sizing: border-box;
display: inline-flex;
height: 100%;
position: relative;
transition-property: transform;
width: auto;
z-index: 1
}
comp-truck-explore .swiper-container-android .swiper-slide, comp-truck-explore .swiper-wrapper {
transform: translateZ(0)
}
comp-truck-explore .swiper-slide {
flex-shrink: 0;
height: 100%;
position: relative;
transition-property: transform;
width: 327px
}
comp-truck-explore .swiper-slide:last-child {
margin-right: 0 !important
}
@media(max-width:767px) {
comp-truck-explore .swiper-slide {
width: 233px
}
}
comp-truck-explore .swiper-invisible-blank-slide {
visibility: hidden
}
comp-truck-explore .swiper-container-autoheight, comp-truck-explore .swiper-container-autoheight .swiper-slide {
height: auto
}
comp-truck-explore .swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform,height
}
comp-truck-explore .swiper-button-next, comp-truck-explore .swiper-button-prev {
height: 53px;
line-height: 53px;
width: 53px
}
comp-truck-explore .swiper-button-next:not(:hover), comp-truck-explore .swiper-button-prev:not(:hover) {
background: #6f87a6
}
comp-highlight-columns {
padding-bottom: 83px;
padding-top: 83px
}
@media(min-width:768px) {
comp-highlight-columns {
display: flex;
flex-wrap: wrap
}
comp-highlight-columns > * {
flex: 1;
margin: 10px;
max-width: calc(33% - 20px);
min-width: calc(33% - 20px)
}
comp-container[hero] comp-highlight-columns > * header, comp-highlight-columns > * comp-container[hero] header, comp-highlight-columns > * inner-content {
min-width: 0
}
comp-highlight-columns > h3, comp-press comp-highlight-columns > comp-container.none:not(.loading):after {
flex-basis: 100%;
max-width: 100%;
width: 100%
}
comp-highlight-columns[count="2"] > * {
max-width: 100%
}
}
@media(max-width:767px) {
comp-highlight-columns {
display: block;
padding: 0 20px
}
comp-container[hero] comp-highlight-columns header, comp-highlight-columns comp-container[hero] header, comp-highlight-columns inner-content {
padding-bottom: 60px !important;
padding-top: 25px !important
}
}
comp-truck-explore + comp-highlight-columns {
padding-bottom: 0;
padding-top: 0
}
@media(max-width:767px) {
comp-highlight-columns {
padding-bottom: 0
}
}
comp-highlight-columns > h3.h2:after, comp-press comp-highlight-columns > comp-container.h2.none:not(.loading):after {
left: 0;
right: 0
}
@media(min-width:768px) {
[hero] + comp-highlight-columns {
margin-top: -14.6412884334vw;
padding-top: 6.0761346999vw
}
}
comp-highlight-columns comp-highlight h4 {
color: #6f87a6;
font-size: 14px;
margin-bottom: 0;
text-transform: uppercase
}
comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-new-truck-card div > h3, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-press comp-container.h2.none:not(.loading):after, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-truck-explore a > h3, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight h3.h2, comp-new-truck-card comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-press div > comp-container.none:not(.loading):after, comp-new-truck-card comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight div > h3, comp-new-truck-card comp-press comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight div > comp-container.none:not(.loading):after, comp-press comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-container.h2.none:not(.loading):after, comp-press comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight comp-new-truck-card div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight div > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight a > comp-container.none:not(.loading):after, comp-truck-explore comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight a > h3, comp-truck-explore comp-press comp-highlight-columns:not([count="2"]):not([count="1"]) comp-highlight a > comp-container.none:not(.loading):after {
font-size: 28px
}
[electric] ~ comp-highlight-columns {
background-color: #000;
box-shadow: 1000px 0 0 #000,-1000px 0 0 #000;
color: #fff
}
[electric] ~ comp-highlight-columns * {
color: #fff
}
[electric] ~ comp-highlight-columns strong {
color: #75c1e3;
font-weight: 300
}
[electric] ~ comp-highlight-columns .btn {
background-color: #75c1e3
}
.full-width {
max-width: 100%;
padding-bottom: 30px;
padding-top: 30px
}
comp-highlight {
position: relative
}
comp-highlight comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-highlight comp-new-truck-card div > h3, comp-highlight comp-press comp-container.h2.none:not(.loading):after, comp-highlight comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-highlight comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-highlight comp-truck-explore a > h3, comp-highlight comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-highlight h3.h2, comp-new-truck-card comp-highlight comp-press div > comp-container.none:not(.loading):after, comp-new-truck-card comp-highlight div > h3, comp-new-truck-card comp-press comp-highlight div > comp-container.none:not(.loading):after, comp-press comp-highlight comp-container.h2.none:not(.loading):after, comp-press comp-highlight comp-new-truck-card div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-highlight div > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-highlight a > comp-container.none:not(.loading):after, comp-truck-explore comp-highlight a > h3, comp-truck-explore comp-press comp-highlight a > comp-container.none:not(.loading):after {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25;
margin-top: 0
}
@media(max-width:767px) {
comp-highlight comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-highlight comp-new-truck-card div > h3, comp-highlight comp-press comp-container.h2.none:not(.loading):after, comp-highlight comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-highlight comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-highlight comp-truck-explore a > h3, comp-highlight comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-highlight h3.h2, comp-new-truck-card comp-highlight comp-press div > comp-container.none:not(.loading):after, comp-new-truck-card comp-highlight div > h3, comp-new-truck-card comp-press comp-highlight div > comp-container.none:not(.loading):after, comp-press comp-highlight comp-container.h2.none:not(.loading):after, comp-press comp-highlight comp-new-truck-card div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-highlight div > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-highlight a > comp-container.none:not(.loading):after, comp-truck-explore comp-highlight a > h3, comp-truck-explore comp-press comp-highlight a > comp-container.none:not(.loading):after {
font-size: 24px
}
}
comp-highlight comp-background {
background-color: transparent;
background-position: 50%;
height: auto;
overflow: hidden;
position: relative
}
comp-highlight comp-background[cover] {
background-size: cover
}
comp-highlight comp-background[contain] {
background-size: contain
}
@media(min-width:768px) {
comp-highlight comp-background {
min-height: 0 !important
}
}
comp-highlight comp-background > video {
height: auto;
left: 50%;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: auto
}
comp-highlight comp-background[hasbutton] {
position: relative
}
comp-highlight comp-background[hasbutton] > [role=button] {
border-radius: 60px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1
}
comp-highlight comp-background[hasbutton] > [role=button]:before {
font-size: 2em
}
comp-highlight comp-background[hasbutton] > [role=button]:not([label]), comp-highlight comp-background[hasbutton] > [role=button][label=""] {
height: 118px;
opacity: .9;
padding: 0;
text-align: center;
width: 118px
}
comp-highlight comp-background[hasbutton] > [role=button]:not([label]):before, comp-highlight comp-background[hasbutton] > [role=button][label=""]:before {
font-size: 20px;
line-height: 118px;
margin-right: 0;
vertical-align: middle
}
comp-highlight-columns > comp-highlight comp-background:before {
box-sizing: content-box;
content: "";
display: block;
padding-bottom: 65%
}
comp-container[hero] comp-highlight-columns > comp-highlight header, comp-highlight-columns > comp-highlight comp-container[hero] header, comp-highlight-columns > comp-highlight inner-content {
padding: 40px 0
}
@media(max-width:767px) {
body > comp-highlight[layout=Vertical], body > comp-highlight[layout^=Horizontal] {
display: block
}
body > comp-highlight[layout=Vertical] comp-container[hero] header, body > comp-highlight[layout=Vertical] inner-content, body > comp-highlight[layout^=Horizontal] comp-container[hero] header, body > comp-highlight[layout^=Horizontal] inner-content, comp-container[hero] body > comp-highlight[layout=Vertical] header, comp-container[hero] body > comp-highlight[layout^=Horizontal] header {
padding: 30px 25px 60px
}
body > comp-highlight[layout=Vertical] comp-container[hero] header p:last-of-type, body > comp-highlight[layout=Vertical] inner-content p:last-of-type, body > comp-highlight[layout^=Horizontal] comp-container[hero] header p:last-of-type, body > comp-highlight[layout^=Horizontal] inner-content p:last-of-type, comp-container[hero] body > comp-highlight[layout=Vertical] header p:last-of-type, comp-container[hero] body > comp-highlight[layout^=Horizontal] header p:last-of-type {
margin-bottom: 32px !important
}
}
body > comp-highlight[layout=Vertical] comp-background {
background-size: cover;
padding-bottom: 44%
}
@media(min-width:768px) {
body > comp-highlight[layout=Vertical] comp-container[hero] header > div, body > comp-highlight[layout=Vertical] inner-content > div, comp-container[hero] body > comp-highlight[layout=Vertical] header > div {
display: flex;
justify-content: space-between;
padding: 83px 39px
}
body > comp-highlight[layout=Vertical] comp-container[hero] header > div > *, body > comp-highlight[layout=Vertical] inner-content > div > *, comp-container[hero] body > comp-highlight[layout=Vertical] header > div > * {
flex: 1
}
body > comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child), body > comp-highlight[layout=Vertical] inner-content > div > :not(:first-child), comp-container[hero] body > comp-highlight[layout=Vertical] header > div > :not(:first-child) {
margin-left: 62px
}
body > comp-highlight[layout=Vertical] comp-container[hero] header > div > :first-child, body > comp-highlight[layout=Vertical] inner-content > div > :first-child, comp-container[hero] body > comp-highlight[layout=Vertical] header > div > :first-child {
max-width: 304px
}
body > comp-highlight[layout^=Horizontal] {
align-items: center;
display: flex;
justify-content: space-between;
padding-bottom: 58px
}
body > comp-highlight[layout^=Horizontal] > * {
flex: 1
}
body > comp-highlight[layout^=Horizontal] > inner-content, comp-container[hero] body > comp-highlight[layout^=Horizontal] > header {
max-width: 304px
}
}
body > comp-highlight[layout^=Horizontal] > comp-background:before {
box-sizing: content-box;
content: "";
display: block;
padding-bottom: 76%
}
@media(min-width:768px) {
body > comp-highlight[layout=Horizontal] > inner-content, comp-container[hero] body > comp-highlight[layout=Horizontal] > header {
margin-left: 62px
}
body > comp-highlight[layout="Horizontal Reverse"] {
flex-direction: row-reverse
}
body > comp-highlight[layout="Horizontal Reverse"] > inner-content, comp-container[hero] body > comp-highlight[layout="Horizontal Reverse"] > header {
margin-right: 62px
}
body > comp-highlight + [layout^=Horizontal] {
padding-top: 58px
}
body > comp-highlight + [layout^=Horizontal]:before {
border-top: 1px solid rgba(151,151,151,.15);
content: "";
left: 20px;
position: absolute;
right: 20px;
top: 0
}
}
@media(max-width:767px) {
body > [innovation] + comp-highlight comp-background, comp-highlight body > [vocation] comp-background {
display: none !important
}
}
body > [innovation] ~ comp-highlight, body > [vocation] ~ comp-highlight {
align-items: stretch;
box-shadow: -1px 0 0 rgba(0,0,0,.1),1px 0 0 rgba(0,0,0,.1);
margin-left: auto !important;
margin-right: auto !important;
max-width: 2000px;
padding: 0
}
body > [innovation] ~ comp-highlight:before, body > [vocation] ~ comp-highlight:before {
display: none
}
@media(max-width:767px) {
body > [innovation] ~ comp-highlight > .swiper-container, body > [vocation] ~ comp-highlight > .swiper-container {
height: 398px
}
body > [innovation] ~ comp-highlight .swiper-container-horizontal > .swiper-pagination-bullets, body > [vocation] ~ comp-highlight .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0
}
}
@media(min-width:768px) {
body > [innovation] ~ comp-highlight > .swiper-container, body > [vocation] ~ comp-highlight > .swiper-container {
min-height: 0 !important
}
body > [innovation] ~ comp-highlight:not(.inview) > comp-background [spec], body > [vocation] ~ comp-highlight:not(.inview) > comp-background [spec] {
opacity: 0;
transform: translateY(100%)
}
}
body > [innovation] ~ comp-highlight > comp-background, body > [vocation] ~ comp-highlight > comp-background {
align-items: flex-end;
display: flex;
justify-content: center;
padding-bottom: 40px;
padding-top: 30%;
position: relative
}
body > [innovation] ~ comp-highlight > comp-background:before, body > [vocation] ~ comp-highlight > comp-background:before {
padding-bottom: 0
}
body > [innovation] ~ comp-highlight > comp-background:after, body > [vocation] ~ comp-highlight > comp-background:after {
background-image: linear-gradient(0deg,rgba(0,0,0,.322),transparent);
content: "";
z-index: 0
}
@media(max-width:767px) {
body > [innovation] ~ comp-highlight > comp-background, body > [vocation] ~ comp-highlight > comp-background {
min-height: 398px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px
}
}
body > [innovation] ~ comp-highlight > comp-background [spec], body > [vocation] ~ comp-highlight > comp-background [spec] {
max-width: 170px;
position: relative;
text-shadow: 0 1px 6px rgba(0,0,0,.25);
transition: transform .25s,opacity .25s;
z-index: 1
}
body > [innovation] ~ comp-highlight > comp-background [spec]:nth-child(2), body > [vocation] ~ comp-highlight > comp-background [spec]:nth-child(2) {
transition-delay: .3s
}
body > [innovation] ~ comp-highlight > comp-background [spec]:nth-child(3), body > [vocation] ~ comp-highlight > comp-background [spec]:nth-child(3) {
transition-delay: .6s
}
body > [innovation] ~ comp-highlight > comp-background [spec]:nth-child(4), body > [vocation] ~ comp-highlight > comp-background [spec]:nth-child(4) {
transition-delay: .9s
}
body > [innovation] ~ comp-highlight > comp-background [spec]:nth-child(5), body > [vocation] ~ comp-highlight > comp-background [spec]:nth-child(5) {
transition-delay: 1.2s
}
body > [innovation] ~ comp-highlight > comp-background [spec] *, body > [vocation] ~ comp-highlight > comp-background [spec] * {
color: #fff;
margin: 0 !important
}
body > [innovation] ~ comp-highlight > comp-background [spec] h4, body > [vocation] ~ comp-highlight > comp-background [spec] h4 {
font-weight: 600;
letter-spacing: .2em;
margin-bottom: 10px !important;
text-transform: uppercase
}
body > [innovation] ~ comp-highlight > comp-background [spec] p, body > [vocation] ~ comp-highlight > comp-background [spec] p {
line-height: 1
}
@media(min-width:768px) {
body > [innovation] ~ comp-highlight > comp-background [spec], body > [vocation] ~ comp-highlight > comp-background [spec] {
margin: 0 30px
}
body > [innovation] ~ comp-highlight > comp-background [spec] h4, body > [vocation] ~ comp-highlight > comp-background [spec] h4 {
font-size: 12px
}
body > [innovation] ~ comp-highlight > comp-background [spec] p, body > [vocation] ~ comp-highlight > comp-background [spec] p {
font-size: 16px
}
}
@media(max-width:767px) {
body > [innovation] ~ comp-highlight > comp-background [spec], body > [vocation] ~ comp-highlight > comp-background [spec] {
margin: 0 10px
}
body > [innovation] ~ comp-highlight > comp-background [spec] h4, body > [vocation] ~ comp-highlight > comp-background [spec] h4 {
font-size: 11px
}
body > [innovation] ~ comp-highlight > comp-background [spec] p, body > [vocation] ~ comp-highlight > comp-background [spec] p {
font-size: 12px
}
}
@media(min-width:768px) {
body > [innovation] ~ comp-highlight comp-container[hero] header, body > [innovation] ~ comp-highlight inner-content, body > [vocation] ~ comp-highlight comp-container[hero] header, body > [vocation] ~ comp-highlight inner-content, comp-container[hero] body > [innovation] ~ comp-highlight header, comp-container[hero] body > [vocation] ~ comp-highlight header {
padding: 9.2972181552vw 5.1244509517vw
}
body > [innovation] ~ comp-highlight comp-container[hero] header .h2, body > [innovation] ~ comp-highlight comp-container[hero] header comp-new-truck-card > h3.h2, body > [innovation] ~ comp-highlight comp-container[hero] header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight comp-container[hero] header comp-new-truck-card div > h3, body > [innovation] ~ comp-highlight comp-container[hero] header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight comp-container[hero] header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight comp-container[hero] header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight comp-container[hero] header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight comp-container[hero] header comp-truck-explore a > h3, body > [innovation] ~ comp-highlight comp-container[hero] header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight comp-container[hero] header h2, body > [innovation] ~ comp-highlight inner-content .h2, body > [innovation] ~ comp-highlight inner-content comp-new-truck-card > h3.h2, body > [innovation] ~ comp-highlight inner-content comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight inner-content comp-new-truck-card div > h3, body > [innovation] ~ comp-highlight inner-content comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight inner-content comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight inner-content comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight inner-content comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight inner-content comp-truck-explore a > h3, body > [innovation] ~ comp-highlight inner-content comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight inner-content h2, body > [vocation] ~ comp-highlight comp-container[hero] header .h2, body > [vocation] ~ comp-highlight comp-container[hero] header comp-new-truck-card > h3.h2, body > [vocation] ~ comp-highlight comp-container[hero] header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight comp-container[hero] header comp-new-truck-card div > h3, body > [vocation] ~ comp-highlight comp-container[hero] header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight comp-container[hero] header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight comp-container[hero] header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight comp-container[hero] header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight comp-container[hero] header comp-truck-explore a > h3, body > [vocation] ~ comp-highlight comp-container[hero] header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight comp-container[hero] header h2, body > [vocation] ~ comp-highlight inner-content .h2, body > [vocation] ~ comp-highlight inner-content comp-new-truck-card > h3.h2, body > [vocation] ~ comp-highlight inner-content comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight inner-content comp-new-truck-card div > h3, body > [vocation] ~ comp-highlight inner-content comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight inner-content comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight inner-content comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight inner-content comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight inner-content comp-truck-explore a > h3, body > [vocation] ~ comp-highlight inner-content comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight inner-content h2, comp-container[hero] body > [innovation] ~ comp-highlight header .h2, comp-container[hero] body > [innovation] ~ comp-highlight header comp-new-truck-card > h3.h2, comp-container[hero] body > [innovation] ~ comp-highlight header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight header comp-new-truck-card div > h3, comp-container[hero] body > [innovation] ~ comp-highlight header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight header comp-truck-explore a > h3, comp-container[hero] body > [innovation] ~ comp-highlight header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight header h2, comp-container[hero] body > [vocation] ~ comp-highlight header .h2, comp-container[hero] body > [vocation] ~ comp-highlight header comp-new-truck-card > h3.h2, comp-container[hero] body > [vocation] ~ comp-highlight header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight header comp-new-truck-card div > h3, comp-container[hero] body > [vocation] ~ comp-highlight header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight header comp-truck-explore a > h3, comp-container[hero] body > [vocation] ~ comp-highlight header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight header h2, comp-new-truck-card body > [innovation] ~ comp-highlight comp-container[hero] header div > h3, comp-new-truck-card body > [innovation] ~ comp-highlight inner-content div > h3, comp-new-truck-card body > [vocation] ~ comp-highlight comp-container[hero] header div > h3, comp-new-truck-card body > [vocation] ~ comp-highlight inner-content div > h3, comp-new-truck-card comp-container[hero] body > [innovation] ~ comp-highlight header div > h3, comp-new-truck-card comp-container[hero] body > [vocation] ~ comp-highlight header div > h3, comp-new-truck-card comp-press body > [innovation] ~ comp-highlight comp-container[hero] header div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press body > [innovation] ~ comp-highlight inner-content div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press body > [vocation] ~ comp-highlight comp-container[hero] header div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press body > [vocation] ~ comp-highlight inner-content div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press comp-container[hero] body > [innovation] ~ comp-highlight header div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press comp-container[hero] body > [vocation] ~ comp-highlight header div > comp-container.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight comp-container[hero] header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight comp-container[hero] header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight inner-content comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight inner-content comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight comp-container[hero] header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight comp-container[hero] header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight inner-content comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight inner-content comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [innovation] ~ comp-highlight header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [innovation] ~ comp-highlight header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [vocation] ~ comp-highlight header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [vocation] ~ comp-highlight header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-new-truck-card body > [innovation] ~ comp-highlight comp-container[hero] header div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card body > [innovation] ~ comp-highlight inner-content div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card body > [vocation] ~ comp-highlight comp-container[hero] header div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card body > [vocation] ~ comp-highlight inner-content div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-container[hero] body > [innovation] ~ comp-highlight header div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-container[hero] body > [vocation] ~ comp-highlight header div > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [innovation] ~ comp-highlight comp-container[hero] header a > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [innovation] ~ comp-highlight inner-content a > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [vocation] ~ comp-highlight comp-container[hero] header a > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [vocation] ~ comp-highlight inner-content a > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-container[hero] body > [innovation] ~ comp-highlight header a > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-container[hero] body > [vocation] ~ comp-highlight header a > comp-container.none:not(.loading):after, comp-truck-explore body > [innovation] ~ comp-highlight comp-container[hero] header a > h3, comp-truck-explore body > [innovation] ~ comp-highlight inner-content a > h3, comp-truck-explore body > [vocation] ~ comp-highlight comp-container[hero] header a > h3, comp-truck-explore body > [vocation] ~ comp-highlight inner-content a > h3, comp-truck-explore comp-container[hero] body > [innovation] ~ comp-highlight header a > h3, comp-truck-explore comp-container[hero] body > [vocation] ~ comp-highlight header a > h3, comp-truck-explore comp-press body > [innovation] ~ comp-highlight comp-container[hero] header a > comp-container.none:not(.loading):after, comp-truck-explore comp-press body > [innovation] ~ comp-highlight inner-content a > comp-container.none:not(.loading):after, comp-truck-explore comp-press body > [vocation] ~ comp-highlight comp-container[hero] header a > comp-container.none:not(.loading):after, comp-truck-explore comp-press body > [vocation] ~ comp-highlight inner-content a > comp-container.none:not(.loading):after, comp-truck-explore comp-press comp-container[hero] body > [innovation] ~ comp-highlight header a > comp-container.none:not(.loading):after, comp-truck-explore comp-press comp-container[hero] body > [vocation] ~ comp-highlight header a > comp-container.none:not(.loading):after {
font-size: 30px
}
}
@media(max-width:767px) {
body > [innovation] ~ comp-highlight comp-container[hero] header, body > [innovation] ~ comp-highlight inner-content, body > [vocation] ~ comp-highlight comp-container[hero] header, body > [vocation] ~ comp-highlight inner-content, comp-container[hero] body > [innovation] ~ comp-highlight header, comp-container[hero] body > [vocation] ~ comp-highlight header {
padding: 40px 28px
}
}
[engine] comp-specs > div body > [innovation] ~ comp-highlight comp-container[hero] header li > strong, [engine] comp-specs > div body > [innovation] ~ comp-highlight inner-content li > strong, [engine] comp-specs > div body > [vocation] ~ comp-highlight comp-container[hero] header li > strong, [engine] comp-specs > div body > [vocation] ~ comp-highlight inner-content li > strong, [engine] comp-specs > div comp-container[hero] body > [innovation] ~ comp-highlight header li > strong, [engine] comp-specs > div comp-container[hero] body > [vocation] ~ comp-highlight header li > strong, [specs] comp-specs[type=cabConfigurations] body > [innovation] ~ comp-highlight comp-container[hero] header strong, [specs] comp-specs[type=cabConfigurations] body > [innovation] ~ comp-highlight inner-content strong, [specs] comp-specs[type=cabConfigurations] body > [vocation] ~ comp-highlight comp-container[hero] header strong, [specs] comp-specs[type=cabConfigurations] body > [vocation] ~ comp-highlight inner-content strong, [specs] comp-specs[type=cabConfigurations] comp-container[hero] body > [innovation] ~ comp-highlight header strong, [specs] comp-specs[type=cabConfigurations] comp-container[hero] body > [vocation] ~ comp-highlight header strong, article table.specs tbody body > [innovation] ~ comp-highlight comp-container[hero] header td:not([colspan]):first-of-type, article table.specs tbody body > [innovation] ~ comp-highlight inner-content td:not([colspan]):first-of-type, article table.specs tbody body > [vocation] ~ comp-highlight comp-container[hero] header td:not([colspan]):first-of-type, article table.specs tbody body > [vocation] ~ comp-highlight inner-content td:not([colspan]):first-of-type, article table.specs tbody comp-container[hero] body > [innovation] ~ comp-highlight header td:not([colspan]):first-of-type, article table.specs tbody comp-container[hero] body > [vocation] ~ comp-highlight header td:not([colspan]):first-of-type, article table.specs thead body > [innovation] ~ comp-highlight comp-container[hero] header th, article table.specs thead body > [innovation] ~ comp-highlight inner-content th, article table.specs thead body > [vocation] ~ comp-highlight comp-container[hero] header th, article table.specs thead body > [vocation] ~ comp-highlight inner-content th, article table.specs thead comp-container[hero] body > [innovation] ~ comp-highlight header th, article table.specs thead comp-container[hero] body > [vocation] ~ comp-highlight header th, body > [innovation] ~ comp-highlight comp-container[hero] header [engine] comp-specs > div li > strong, body > [innovation] ~ comp-highlight comp-container[hero] header [specs] comp-specs[type=cabConfigurations] strong, body > [innovation] ~ comp-highlight comp-container[hero] header article table.specs tbody td:not([colspan]):first-of-type, body > [innovation] ~ comp-highlight comp-container[hero] header article table.specs thead th, body > [innovation] ~ comp-highlight comp-container[hero] header comp-truck-hero > .specs > div li > strong, body > [innovation] ~ comp-highlight comp-container[hero] header comp-truck-hero comp-specs > div li > strong, body > [innovation] ~ comp-highlight comp-container[hero] header h5, body > [innovation] ~ comp-highlight inner-content [engine] comp-specs > div li > strong, body > [innovation] ~ comp-highlight inner-content [specs] comp-specs[type=cabConfigurations] strong, body > [innovation] ~ comp-highlight inner-content article table.specs tbody td:not([colspan]):first-of-type, body > [innovation] ~ comp-highlight inner-content article table.specs thead th, body > [innovation] ~ comp-highlight inner-content comp-truck-hero > .specs > div li > strong, body > [innovation] ~ comp-highlight inner-content comp-truck-hero comp-specs > div li > strong, body > [innovation] ~ comp-highlight inner-content h5, body > [vocation] ~ comp-highlight comp-container[hero] header [engine] comp-specs > div li > strong, body > [vocation] ~ comp-highlight comp-container[hero] header [specs] comp-specs[type=cabConfigurations] strong, body > [vocation] ~ comp-highlight comp-container[hero] header article table.specs tbody td:not([colspan]):first-of-type, body > [vocation] ~ comp-highlight comp-container[hero] header article table.specs thead th, body > [vocation] ~ comp-highlight comp-container[hero] header comp-truck-hero > .specs > div li > strong, body > [vocation] ~ comp-highlight comp-container[hero] header comp-truck-hero comp-specs > div li > strong, body > [vocation] ~ comp-highlight comp-container[hero] header h5, body > [vocation] ~ comp-highlight inner-content [engine] comp-specs > div li > strong, body > [vocation] ~ comp-highlight inner-content [specs] comp-specs[type=cabConfigurations] strong, body > [vocation] ~ comp-highlight inner-content article table.specs tbody td:not([colspan]):first-of-type, body > [vocation] ~ comp-highlight inner-content article table.specs thead th, body > [vocation] ~ comp-highlight inner-content comp-truck-hero > .specs > div li > strong, body > [vocation] ~ comp-highlight inner-content comp-truck-hero comp-specs > div li > strong, body > [vocation] ~ comp-highlight inner-content h5, comp-container[hero] body > [innovation] ~ comp-highlight header [engine] comp-specs > div li > strong, comp-container[hero] body > [innovation] ~ comp-highlight header [specs] comp-specs[type=cabConfigurations] strong, comp-container[hero] body > [innovation] ~ comp-highlight header article table.specs tbody td:not([colspan]):first-of-type, comp-container[hero] body > [innovation] ~ comp-highlight header article table.specs thead th, comp-container[hero] body > [innovation] ~ comp-highlight header comp-truck-hero > .specs > div li > strong, comp-container[hero] body > [innovation] ~ comp-highlight header comp-truck-hero comp-specs > div li > strong, comp-container[hero] body > [innovation] ~ comp-highlight header h5, comp-container[hero] body > [vocation] ~ comp-highlight header [engine] comp-specs > div li > strong, comp-container[hero] body > [vocation] ~ comp-highlight header [specs] comp-specs[type=cabConfigurations] strong, comp-container[hero] body > [vocation] ~ comp-highlight header article table.specs tbody td:not([colspan]):first-of-type, comp-container[hero] body > [vocation] ~ comp-highlight header article table.specs thead th, comp-container[hero] body > [vocation] ~ comp-highlight header comp-truck-hero > .specs > div li > strong, comp-container[hero] body > [vocation] ~ comp-highlight header comp-truck-hero comp-specs > div li > strong, comp-container[hero] body > [vocation] ~ comp-highlight header h5, comp-truck-hero > .specs > div body > [innovation] ~ comp-highlight comp-container[hero] header li > strong, comp-truck-hero > .specs > div body > [innovation] ~ comp-highlight inner-content li > strong, comp-truck-hero > .specs > div body > [vocation] ~ comp-highlight comp-container[hero] header li > strong, comp-truck-hero > .specs > div body > [vocation] ~ comp-highlight inner-content li > strong, comp-truck-hero > .specs > div comp-container[hero] body > [innovation] ~ comp-highlight header li > strong, comp-truck-hero > .specs > div comp-container[hero] body > [vocation] ~ comp-highlight header li > strong, comp-truck-hero comp-specs > div body > [innovation] ~ comp-highlight comp-container[hero] header li > strong, comp-truck-hero comp-specs > div body > [innovation] ~ comp-highlight inner-content li > strong, comp-truck-hero comp-specs > div body > [vocation] ~ comp-highlight comp-container[hero] header li > strong, comp-truck-hero comp-specs > div body > [vocation] ~ comp-highlight inner-content li > strong, comp-truck-hero comp-specs > div comp-container[hero] body > [innovation] ~ comp-highlight header li > strong, comp-truck-hero comp-specs > div comp-container[hero] body > [vocation] ~ comp-highlight header li > strong {
margin-bottom: 45px;
text-transform: uppercase
}
body > [innovation] ~ comp-highlight comp-container[hero] header h4, body > [innovation] ~ comp-highlight inner-content h4, body > [vocation] ~ comp-highlight comp-container[hero] header h4, body > [vocation] ~ comp-highlight inner-content h4, comp-container[hero] body > [innovation] ~ comp-highlight header h4, comp-container[hero] body > [vocation] ~ comp-highlight header h4 {
color: #6f87a6;
font-size: 24px;
font-weight: 600;
margin-bottom: 10px
}
body > [innovation] ~ comp-highlight comp-container[hero] header p > em, body > [innovation] ~ comp-highlight inner-content p > em, body > [vocation] ~ comp-highlight comp-container[hero] header p > em, body > [vocation] ~ comp-highlight inner-content p > em, comp-container[hero] body > [innovation] ~ comp-highlight header p > em, comp-container[hero] body > [vocation] ~ comp-highlight header p > em {
font-family: industry,sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600
}
body > [innovation] ~ comp-highlight[layout^=Horizontal] comp-container[hero] header, body > [innovation] ~ comp-highlight[layout^=Horizontal] inner-content, body > [vocation] ~ comp-highlight[layout^=Horizontal] comp-container[hero] header, body > [vocation] ~ comp-highlight[layout^=Horizontal] inner-content, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal] header, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal] header {
flex: .3;
margin: 0;
max-width: none
}
body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header {
flex: 1
}
@media(min-width:768px) {
body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header {
max-width: 50%;
padding: 9.2972181552vw
}
body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header .h2, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card > h3.h2, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card div > h3, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-truck-explore a > h3, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header h2, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content .h2, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card > h3.h2, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card div > h3, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-truck-explore a > h3, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content h2, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header .h2, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card > h3.h2, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card div > h3, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-truck-explore a > h3, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header h2, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content .h2, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card > h3.h2, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card div > h3, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-press comp-truck-explore a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-truck-explore a > h3, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-truck-explore comp-press a > comp-container.none:not(.loading):after, body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content h2, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header .h2, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card > h3.h2, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card div > h3, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-truck-explore a > h3, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header h2, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header .h2, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card > h3.h2, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card div > h3, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-new-truck-card div > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-press comp-truck-explore a > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-truck-explore a > h3, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-truck-explore comp-press a > comp-container.none:not(.loading):after, comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header h2, comp-new-truck-card body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header div > h3, comp-new-truck-card body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content div > h3, comp-new-truck-card body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header div > h3, comp-new-truck-card body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content div > h3, comp-new-truck-card comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header div > h3, comp-new-truck-card comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header div > h3, comp-new-truck-card comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header div > comp-container.none:not(.loading):after, comp-new-truck-card comp-press comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header div > comp-container.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header comp-truck-explore > comp-container.h2.none:not(.loading):after, comp-press comp-new-truck-card body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header div > comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header div > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header a > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content a > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header a > comp-container.none:not(.loading):after, comp-press comp-truck-explore body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content a > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header a > comp-container.none:not(.loading):after, comp-press comp-truck-explore comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header a > comp-container.none:not(.loading):after, comp-truck-explore body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header a > h3, comp-truck-explore body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content a > h3, comp-truck-explore body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header a > h3, comp-truck-explore body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content a > h3, comp-truck-explore comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header a > h3, comp-truck-explore comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header a > h3, comp-truck-explore comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header a > comp-container.none:not(.loading):after, comp-truck-explore comp-press body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content a > comp-container.none:not(.loading):after, comp-truck-explore comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] comp-container[hero] header a > comp-container.none:not(.loading):after, comp-truck-explore comp-press body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] inner-content a > comp-container.none:not(.loading):after, comp-truck-explore comp-press comp-container[hero] body > [innovation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header a > comp-container.none:not(.loading):after, comp-truck-explore comp-press comp-container[hero] body > [vocation] ~ comp-highlight[layout^=Horizontal][ratio=Half] header a > comp-container.none:not(.loading):after {
font-size: 50px
}
body > [innovation] ~ comp-highlight[layout=Vertical] > comp-background, body > [vocation] ~ comp-highlight[layout=Vertical] > comp-background {
justify-content: flex-start;
padding-left: 5.1244509517vw;
padding-right: 5.1244509517vw
}
body > [innovation] ~ comp-highlight[layout=Vertical] > comp-background > :first-child, body > [vocation] ~ comp-highlight[layout=Vertical] > comp-background > :first-child {
margin-left: 0
}
body > [innovation] ~ comp-highlight[layout=Vertical] > .swiper-container, body > [vocation] ~ comp-highlight[layout=Vertical] > .swiper-container {
height: 40vw
}
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header {
max-width: none
}
@media(min-width:768px) {
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header {
padding-bottom: 68px;
padding-top: 68px
}
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div {
padding: 0
}
@media(min-width:768px) {
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :first-child, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div > :first-child, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :first-child, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div > :first-child, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div > :first-child, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div > :first-child {
max-width: 226px
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child), body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child), body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child), body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child), comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child), comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) {
display: flex;
justify-content: space-between
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > *, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > *, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > *, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > *, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > *, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > * {
flex: 1
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > :not(:first-child), body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > :not(:first-child), body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > :not(:first-child), body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > :not(:first-child), comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > :not(:first-child), comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > :not(:first-child) {
flex-grow: 0;
margin-left: 62px
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > :not(:first-child) .btn, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > :not(:first-child) .btn, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > :not(:first-child) .btn, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > :not(:first-child) .btn, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > :not(:first-child) .btn, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > :not(:first-child) .btn {
white-space: nowrap
}
body > [innovation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > :first-child, body > [innovation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > :first-child, body > [vocation] ~ comp-highlight[layout=Vertical] comp-container[hero] header > div > :not(:first-child) > :first-child, body > [vocation] ~ comp-highlight[layout=Vertical] inner-content > div > :not(:first-child) > :first-child, comp-container[hero] body > [innovation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > :first-child, comp-container[hero] body > [vocation] ~ comp-highlight[layout=Vertical] header > div > :not(:first-child) > :first-child {
flex: 2;
flex-grow: 1
}
}
comp-highlight > .clickable .swiper-wrapper > * {
cursor: pointer
}
[electric] ~ comp-highlight {
background-color: #000;
color: #fff
}
[electric] ~ comp-highlight * {
color: #fff
}
[electric] ~ comp-highlight strong {
color: #75c1e3;
font-weight: 300
}
[electric] ~ comp-highlight .btn {
background-color: #75c1e3
}
@media(max-width:767px) {
[electric] ~ comp-highlight > inner-content, comp-container[hero] [electric] ~ comp-highlight > header {
background-color: #000
}
[electric] ~ comp-highlight > inner-content h4, comp-container[hero] [electric] ~ comp-highlight > header h4 {
color: #75c1e3 !important;
font-weight: 300 !important
}
}
comp-models {
display: block;
margin: 0 auto;
max-width: 1366px;
overflow: hidden;
padding: 80px;
text-align: left
}
@media(max-width:767px) {
comp-models {
padding: 40px
}
}
comp-container[hero] comp-models > header > h2, comp-models > inner-content > h2 {
font-size: 42px
}
comp-models comp-card-list {
margin: 0 !important
}
@media(max-width:767px) {
comp-models comp-card-list > div > * {
margin-bottom: 0
}
comp-models comp-card-list > div > :last-child {
padding-bottom: 0
}
}
.slick-slider {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.slick-list, .slick-slider {
display: block;
position: relative
}
.slick-list {
margin: 0;
overflow: hidden;
padding: 0
}
.slick-list:focus {
outline: none
}
.slick-list.dragging {
cursor: pointer;
cursor: hand
}
.slick-slider .slick-list, .slick-slider .slick-track {
transform: translateZ(0)
}
.slick-track {
display: flex;
left: 0;
position: relative;
top: 0
}
.slick-track:after, .slick-track:before {
content: "";
display: table
}
.slick-track:after {
clear: both
}
.slick-loading .slick-track {
visibility: hidden
}
.slick-slide {
display: none
}
[dir=rtl] .slick-slide {
float: right
}
.slick-slide img {
display: block
}
.slick-slide.slick-loading img {
display: none
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-initialized .slick-slide {
display: block
}
.slick-loading .slick-slide {
visibility: hidden
}
.slick-vertical .slick-slide {
border: .1rem solid transparent;
display: block;
height: auto
}
.slick-arrow.slick-hidden {
display: none
}
.slick-loading .slick-list {
background: #fff url(../gif/ajax-loader.gif) 50% no-repeat
}
@font-face {
font-family: slick;
font-style: normal;
font-weight: 400;
src: url(https://freightliner.azureedge.net/images/slick-font/slick.eot);
src: url(https://freightliner.azureedge.net/images/slick-font/slick.eot?#iefix) format("embedded-opentype"),url(https://freightliner.azureedge.net/images/slick-font/slick.woff) format("woff"),url(https://freightliner.azureedge.net/images/slick-font/slick.ttf) format("truetype"),url(https://freightliner.azureedge.net/images/slick-font/slick.svg#slick) format("svg")
}
.slick-next, .slick-prev {
background: transparent;
border: none;
color: transparent;
cursor: pointer;
font-size: 0;
line-height: 0;
outline: none;
padding: 0;
position: absolute;
z-index: 1
}
@media(max-width:767px) {
.slick-next, .slick-prev {
height: 2.5rem;
top: 1rem;
width: 2.5rem
}
}
@media(min-width:768px) {
.slick-next, .slick-prev {
height: 6.2rem;
top: 50%;
transform: translateY(-50%);
width: 6.2rem
}
}
.slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover {
background: transparent !important;
color: transparent;
outline: none
}
.slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
opacity: 1
}
.slick-next.slick-disabled:before, .slick-prev.slick-disabled:before {
opacity: .25
}
.slick-next:before, .slick-prev:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
line-height: 1.15 !important;
opacity: .75;
transition: opacity
}
@media(max-width:767px) {
.slick-next:before, .slick-prev:before {
font-size: 3rem
}
}
@media(min-width:768px) {
.slick-next:before, .slick-prev:before {
font-size: 5rem
}
}
.slick-prev {
justify-content: flex-end
}
@media(max-width:767px) {
.slick-prev {
left: 1rem
}
}
@media(min-width:768px) {
.slick-prev {
left: 2rem
}
}
[dir=rtl] .slick-prev {
left: auto;
right: 2rem
}
.slick-next {
justify-content: flex-start
}
@media(max-width:767px) {
.slick-next {
right: 1rem
}
}
@media(min-width:768px) {
.slick-next {
right: 2rem
}
}
[dir=rtl] .slick-next {
left: 2rem;
right: auto
}
.slick-dots {
bottom: 0;
display: block;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
width: 100%
}
.slick-dots li {
display: inline-block;
margin: 1rem 5rem;
position: relative
}
.slick-dots li, .slick-dots li button {
cursor: pointer;
height: 1rem;
width: 1rem
}
.slick-dots li button {
background: transparent;
border: .2rem solid #fff;
border-radius: 50%;
box-sizing: border-box;
color: transparent;
display: block;
font-size: 0;
line-height: 0;
outline: none;
padding: 0
}
.slick-dots li.slick-active button {
background: #fff
}
comp-faq {
padding-bottom: 83px;
padding-top: 83px
}
@media(max-width:767px) {
comp-faq {
padding-left: 20px;
padding-right: 20px
}
}
comp-highlight-columns + comp-faq {
padding-top: 0
}
comp-highlight-columns + comp-faq comp-press header > comp-container.h2.none:not(.loading):after, comp-highlight-columns + comp-faq header > h3.h2, comp-press comp-highlight-columns + comp-faq header > comp-container.h2.none:not(.loading):after {
margin-top: 0
}
@media(min-width:768px) {
comp-faq dl > *, comp-faq header > * {
margin: 10px
}
}
comp-faq dl {
margin-top: 60px
}
comp-faq dl:before {
content: attr(name);
font-family: industry,sans-serif;
font-size: 28px
}
@media(min-width:768px) {
comp-faq dl:before {
margin: 0 10px
}
}
comp-faq dl dt.loaded:before {
margin-right: 5px;
vertical-align: middle
}
comp-faq dl dt.loaded:not([toggled]):before {
content: "+"
}
comp-faq dl dt.loaded[toggled]:before {
content: "-"
}
[electric] ~ comp-faq {
background-color: #000;
box-shadow: 1000px 0 0 #000,-1000px 0 0 #000;
color: #fff
}
[electric] ~ comp-faq * {
color: #fff
}
[electric] ~ comp-faq dt, [electric] ~ comp-faq strong {
color: #75c1e3;
font-weight: 300
}
[electric] ~ comp-faq .btn {
background-color: #75c1e3
}
/*@media(min-width:1100px) {
.tw-main .truckv2-stats {
display: grid;
grid-template-columns: .3fr .5fr .7fr .6fr .6fr
}
}*/
@media(min-width:1100px) {
.truckv2-stats {
display: flex;
align-items: flex-start;
}
}
.tw-main .truckv2-stats .highlight-tile h2 {
align-items: center;
display: flex;
font-weight: 400;
margin-top: 0
}
@media(max-width:1099px) {
.tw-main .truckv2-stats .highlight-tile h2 {
display: inline-block
}
}
.tw-main .truckv2-stats .highlight-tile h2 footer.page-footer span.footer-copyright, .tw-main .truckv2-stats .highlight-tile h2 span.light, footer.page-footer .tw-main .truckv2-stats .highlight-tile h2 span.footer-copyright {
color: #a9a9a9;
font-size: 16px;
font-weight: 100
}
.tw-main .truckv2-stats .highlight-tile .truck-detail-stats {
display: inline-block;
margin-top: -10px
}
.tw-main .truckv2-stats .highlight-tile .truck-detail-stats span {
color: #a9a9a9;
display: inline-block;
vertical-align: top
}
.anchor-menu {
background-color: #fff;
display: inline-block;
height: 100%;
position: sticky;
top: 90px;
width: 100%;
z-index: 30;
border-bottom:1px solid #cccccc;
}
#anchorSelect .anchor-link .btn {
margin-top:0 !important;
}
@media(max-width:900px) {
.anchor-menu {
display: none
}
}
.anchor-menu .anchor-link {
display: flex;
align-items:center;
justify-content:center;
margin-left: 1rem;
margin-right: 3rem
}
.anchor-link .tw-super-heading {
margin-bottom:30px !important;
margin-top:30px !important;
}
@media(max-width:1300px) {
.anchor-menu .anchor-link {
margin-right: 1rem
}
}
@media(max-width:1100px) {
.anchor-menu .anchor-link {
margin-right: 0
}
}
@media(max-width:1200px) {
.anchor-menu .tw-super-heading {
font-size: 9px
}
}
.anchor-menu a[role=button] {
float: right;
margin-right: 1.5rem;
}
@media(max-width:1200px) {
.anchor-menu a[role=button] {
font-size: 12px
}
}
.anchor-menu .anchor-link.active {
border: solid #6f87a6;
border-width: 0 0 2px
}
@media(min-width:820px) {
.media-text-wrapper {
display: grid;
grid-template-columns: 60% 40%
}
.media-text-wrapper.reverse {
grid-template-columns: 40% 60%
}
.media-text-wrapper .media-side {
margin: 2rem
}
.media-text-wrapper .media-side img, .media-text-wrapper .media-side video {
width: 100%
}
.media-text-wrapper .text-side {
position: relative
}
.media-text-wrapper .text-side .vert-text {
position: absolute;
top: 40%;
transform: translateY(-50%)
}
.media-text-wrapper .text-side .vert-text .copy ul li {
list-style-type: square;
margin-left: 18px
}
}
@media(max-width:819px) {
.media-text-wrapper .text-side .vert-text a {
margin-bottom: 40px
}
}
@media(max-width:829px) {
.media-text-wrapper .media-side {
margin: 1rem
}
.media-text-wrapper .media-side img, .media-text-wrapper .media-side video {
width: 100%
}
}
@media(min-width:820px) {
.media-text-wrappper .reverse {
grid-template-columns: .6fr 1fr !important
}
}
.hero-full {
width: 100%
}
.truckv2-space .tw-two div a {
margin-bottom: 10px
}
.truck-heading {
margin-left: auto;
margin-right: auto;
max-width: 1160px;
text-align: center
}
.content-bullets {
list-style-type: disc;
margin-left: 30px
}
.truck-accordion {
margin-bottom: 10px !important
}
.truck-accordion-rev {
margin-bottom: 10px !important
}
@media(min-width:1000px) {
.truck-accordion {
display: grid;
grid-template-columns: 1fr .6fr;
margin-left: auto;
margin-right: auto;
max-width: 140rem;
max-width: 1160px;
min-height: 70rem
}
}
@media(min-width:1000px) {
.truck-accordion-rev {
display: grid;
grid-template-columns: .6fr 1fr;
margin-left: auto;
margin-right: auto;
max-width: 140rem;
max-width: 1160px;
min-height: 70rem
}
}
.truck-accordion .accordion-image img {
height: 100%
}
.truck-accordion-rev .accordion-image img {
height: 100%
}
@media(max-width:999px) {
.truck-accordion .accordion-image img {
height: unset;
max-height: 100%;
}
.truck-accordion .accordion-image.no-media {
display: none
}
}
@media(max-width:999px) {
.truck-accordion-rev .accordion-image img {
height: unset;
max-height: 100%;
}
.truck-accordion-rev .accordion-image.no-media {
display: none
}
}
.truck-accordion .accordion-section {
border: solid #e1e1e1;
border-width: 2px 0 0;
margin-left: 30px
}
.truck-accordion-rev .accordion-section {
border: solid #e1e1e1;
border-width: 2px 0 0;
margin-right: 30px
}
.truck-accordion .accordion-section .accordion {
background: #fff;
color: #6f87a6;
cursor: pointer;
margin-left: 2px;
margin-right: 2px;
outline: none;
padding: 18px;
text-align: left;
transition: .4s;
width: 100%
}
.truck-accordion-rev .accordion-section .accordion {
background: #fff;
color: #6f87a6;
cursor: pointer;
margin-left: 2px;
margin-right: 2px;
outline: none;
padding: 18px;
text-align: left;
transition: .4s;
width: 100%
}
.truck-accordion .accordion-section .accordion .accordion-carrot {
background-image: url('data:image/svg+xml;charset=utf-8,');
display: inline-block;
float: right;
height: 30px;
width: 30px
}
.truck-accordion-rev .accordion-section .accordion .accordion-carrot {
background-image: url('data:image/svg+xml;charset=utf-8,');
display: inline-block;
float: right;
height: 30px;
width: 30px
}
.truck-accordion .accordion-section .panel {
background-color: #fff;
border: solid #e1e1e1;
border-width: 0 0 2px;
display: block;
max-height: 0;
overflow: hidden;
padding: 0 18px;
transition: max-height .2s ease-out
}
.truck-accordion-rev .accordion-section .panel {
background-color: #fff;
border: solid #e1e1e1;
border-width: 0 0 2px;
display: block;
max-height: 0;
overflow: hidden;
padding: 0 18px;
transition: max-height .2s ease-out
}
.truck-accordion .accordion-section .panel img {
margin-bottom: 10px;
margin-top: 10px;
width: 100%
}
.truck-accordion-rev .accordion-section .panel img {
margin-bottom: 10px;
margin-top: 10px;
width: 100%
}
.truck-accordion .accordion-section .panel video {
margin-bottom: 10px;
margin-top: 10px;
width: 100%
}
.truck-accordion-rev .accordion-section .panel video {
margin-bottom: 10px;
margin-top: 10px;
width: 100%
}
@media(min-width:1000px) {
.truck-accordion .accordion-section .panel img {
display: none
}
}
@media(min-width:1000px) {
.truck-accordion .accordion-section .panel video {
display: none
}
}
@media(min-width:1000px) {
.truck-accordion-rev .accordion-section .panel img {
display: none
}
}
@media(min-width:1000px) {
.truck-accordion-rev .accordion-section .panel video {
display: none
}
}
.truck-accordion .accordion-section .accordion :hover :focus {
background: #6f87a6;
color: #fff
}
.truck-accordion-rev .accordion-section .accordion :hover :focus {
background: #6f87a6;
color: #fff
}
.truck-accordion .accordion-section a {
margin-top: 30px
}
.truck-accordion-rev .accordion-section a {
margin-top: 30px
}
@media(max-width:999px) {
.truck-accordion .accordion-section a {
margin-bottom: 40px
}
}
@media(max-width:999px) {
.truck-accordion-rev .accordion-section a {
margin-bottom: 40px
}
}
@media(min-width:768px) {
comp-highlight + comp-new-truck-card {
margin-top: 58px
}
}
comp-container[hero] comp-new-truck-card header comp-press comp-container.none:not(.loading):after, comp-container[hero] comp-new-truck-card header h3, comp-new-truck-card comp-container[hero] header comp-press comp-container.none:not(.loading):after, comp-new-truck-card comp-container[hero] header h3, comp-new-truck-card inner-content comp-press comp-container.none:not(.loading):after, comp-new-truck-card inner-content h3, comp-press comp-container[hero] comp-new-truck-card header comp-container.none:not(.loading):after, comp-press comp-new-truck-card comp-container[hero] header comp-container.none:not(.loading):after, comp-press comp-new-truck-card inner-content comp-container.none:not(.loading):after {
margin-bottom: 10px
}
comp-container[hero] comp-new-truck-card header p:last-of-type, comp-new-truck-card comp-container[hero] header p:last-of-type, comp-new-truck-card inner-content p:last-of-type {
margin-bottom: 0
}
comp-new-truck-card > h3.h2, comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-new-truck-card div > h3, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after, comp-press comp-new-truck-card div > comp-container.none:not(.loading):after {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25
}
@media(max-width:767px) {
comp-new-truck-card > h3.h2, comp-new-truck-card > p, comp-press comp-new-truck-card > comp-container.h2.none:not(.loading):after {
padding-left: 20px;
padding-right: 20px
}
}
[engine] ~ comp-new-truck-card > h3.h2, [engine] ~ comp-new-truck-card > p, comp-press [engine] ~ comp-new-truck-card > comp-container.h2.none:not(.loading):after {
max-width: 1246px
}
[engine] ~ comp-new-truck-card > h3.h2, comp-press [engine] ~ comp-new-truck-card > comp-container.h2.none:not(.loading):after {
margin-bottom: 23px;
padding-bottom: 0 !important
}
[engine] ~ comp-new-truck-card > h3.h2:after, comp-press [engine] ~ comp-new-truck-card > comp-container.h2.none:not(.loading):after {
display: none
}
@media(max-width:767px) {
comp-new-truck-card div {
color: #3b3b3b;
font-size: 14px
}
}
comp-new-truck-card div > h3:before {
color: #6f87a6;
content: attr(categories);
display: block;
font-size: 14px;
font-weight: 600;
letter-spacing: 4px;
line-height: 20px;
text-transform: uppercase
}
@media(max-width:767px) {
comp-new-truck-card comp-press div > comp-container.none:not(.loading):after, comp-new-truck-card div > h3, comp-press comp-new-truck-card div > comp-container.none:not(.loading):after {
font-size: 24px;
margin-top: 20px
}
comp-new-truck-card div > h3:before {
font-weight: 500;
margin-bottom: 5px
}
}
comp-new-truck-card div p {
color: #000
}
comp-new-truck-card div[type=VID] {
color: #3b3b3b
}
comp-new-truck-card div[type=VID] > comp-image {
position: relative
}
comp-new-truck-card div[type=VID] > comp-image:before {
background-color: #6f87a6;
border-radius: 60px;
color: #fff;
font-size: 20px;
height: 69px;
left: 50%;
line-height: 69px;
opacity: .9;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%,-50%);
transition: background-color .25s;
width: 69px;
z-index: 1
}
html:not(.touch) comp-new-truck-card div[type=VID] > comp-image:hover:before {
/*background-color: #713738*/
}
comp-new-truck-card .swiper-container {
list-style: none;
overflow: hidden;
padding: 0 calc(50vw - 583px) 65px;
position: relative;
z-index: 1
}
comp-new-truck-card .swiper-container div.swiper-slide comp-image img {
height: 230px
}
[engine] ~ comp-new-truck-card .swiper-container {
padding-left: calc(50vw - 629.5px);
padding-right: calc(50vw - 629.5px)
}
@media(min-width:1050px) {
[engine] ~ comp-new-truck-card .swiper-container[count="0"] .swiper-button-next, [engine] ~ comp-new-truck-card .swiper-container[count="0"] .swiper-button-prev, [engine] ~ comp-new-truck-card .swiper-container[count="0"] .swiper-pagination-bullets, [engine] ~ comp-new-truck-card .swiper-container[count="1"] .swiper-button-next, [engine] ~ comp-new-truck-card .swiper-container[count="1"] .swiper-button-prev, [engine] ~ comp-new-truck-card .swiper-container[count="1"] .swiper-pagination-bullets, [engine] ~ comp-new-truck-card .swiper-container[count="2"] .swiper-button-next, [engine] ~ comp-new-truck-card .swiper-container[count="2"] .swiper-button-prev, [engine] ~ comp-new-truck-card .swiper-container[count="2"] .swiper-pagination-bullets, [engine] ~ comp-new-truck-card .swiper-container[count="3"] .swiper-button-next, [engine] ~ comp-new-truck-card .swiper-container[count="3"] .swiper-button-prev, [engine] ~ comp-new-truck-card .swiper-container[count="3"] .swiper-pagination-bullets {
display: none
}
}
@media(min-width:768px) {
comp-new-truck-card .swiper-container[count="0"] .swiper-button-next, comp-new-truck-card .swiper-container[count="0"] .swiper-button-prev, comp-new-truck-card .swiper-container[count="0"] .swiper-pagination-bullets, comp-new-truck-card .swiper-container[count="1"] .swiper-button-next, comp-new-truck-card .swiper-container[count="1"] .swiper-button-prev, comp-new-truck-card .swiper-container[count="1"] .swiper-pagination-bullets, comp-new-truck-card .swiper-container[count="2"] .swiper-button-next, comp-new-truck-card .swiper-container[count="2"] .swiper-button-prev, comp-new-truck-card .swiper-container[count="2"] .swiper-pagination-bullets {
display: none
}
}
@media(max-width:767px) {
comp-new-truck-card .swiper-container {
margin-bottom: 50px
}
comp-new-truck-card .swiper-container[count="0"] .swiper-button-next, comp-new-truck-card .swiper-container[count="0"] .swiper-button-prev, comp-new-truck-card .swiper-container[count="0"] .swiper-pagination-bullets, comp-new-truck-card .swiper-container[count="1"] .swiper-button-next, comp-new-truck-card .swiper-container[count="1"] .swiper-button-prev, comp-new-truck-card .swiper-container[count="1"] .swiper-pagination-bullets {
display: none
}
}
comp-new-truck-card .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0
}
comp-new-truck-card .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
border-color: #d8d8d8;
margin: 0 14px
}
@media(max-width:767px) {
comp-new-truck-card .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 8px
}
}
comp-new-truck-card .swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #d8d8d8;
box-shadow: none
}
comp-new-truck-card .swiper-container-no-flexbox .swiper-slide {
float: left
}
comp-new-truck-card .swiper-wrapper {
box-sizing: border-box;
display: inline-flex;
height: 100%;
position: relative;
transition-property: transform;
width: auto;
z-index: 1
}
comp-new-truck-card .swiper-container-android .swiper-slide, comp-new-truck-card .swiper-wrapper {
transform: translateZ(0)
}
comp-new-truck-card .swiper-slide {
flex-shrink: 0;
height: 100%;
margin-right: 20px;
position: relative;
transition-property: transform;
width: 345px
}
comp-new-truck-card .swiper-slide:last-child {
margin-right: 0 !important
}
@media(max-width:767px) {
comp-new-truck-card .swiper-slide {
width: 233px
}
}
comp-new-truck-card .swiper-invisible-blank-slide {
visibility: hidden
}
comp-new-truck-card .swiper-container-autoheight, comp-new-truck-card .swiper-container-autoheight .swiper-slide {
height: auto
}
comp-new-truck-card .swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform,height
}
comp-new-truck-card .swiper-button-next, comp-new-truck-card .swiper-button-prev {
height: 53px;
line-height: 53px;
width: 53px
}
comp-new-truck-card .swiper-button-next:not(:hover), comp-new-truck-card .swiper-button-prev:not(:hover) {
background: #6f87a6
}
div#new-truck-media-tiles a[type=VID] > comp-image:before {
speak: none;
font-feature-settings: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #6f87a6;
border-radius: 60px;
color: #fff;
content: "0";
font-family: icomoon !important;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 400;
height: 69px;
left: 50%;
line-height: 69px;
opacity: .9;
position: absolute;
text-align: center;
text-transform: none;
top: 50%;
transform: translate(-50%,-50%);
transition: background-color .25s;
width: 69px;
z-index: 1
}
@media(min-width:1300px) {
div#new-truck-media-tiles div.media-tile:nth-child(2) {
grid-column-end: 13;
grid-column-start: 5
}
div#new-truck-media-tiles div.media-tile:nth-child(3) {
grid-column-end: 5;
grid-column-start: 1
}
div#new-truck-media-tiles div.media-tile:nth-child(4) {
grid-column-end: 11;
grid-column-start: 5
}
div#new-truck-media-tiles div.media-tile:nth-child(5) {
grid-column-end: 13;
grid-column-start: 11
}
}
ms-cards ms-thumb video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
ms-cards ms-thumb, ms-hero, ms-pillars ms-pillar, ms-reveal {
overflow: hidden
}
comp-resources[vocation] > .group {
margin-left: auto;
margin-right: auto;
max-width: 1153px
}
@media(min-width:768px) {
comp-resources[vocation] > .group {
padding: 0 20px
}
}
ms-cards ms-thumb, ms-cards ms-thumb > :not(item-background), ms-hero, ms-hero > :not(item-background), ms-pillars ms-pillar, ms-pillars ms-pillar > :not(item-background), ms-reveal, ms-reveal > :not(item-background) {
position: relative
}
ms-cards ms-thumb > :not(item-background), ms-hero > :not(item-background), ms-pillars ms-pillar > :not(item-background), ms-reveal > :not(item-background) {
z-index: 1
}
body > [testimonial] ~ article ms-columns:not([inline]), body > [testimonial] ~ article ms-details:not([inline]), ms-callout:not([inline]), ms-cards ms-thumb:not([inline]), ms-hero:not([inline]), ms-pillars:not([inline]), ms-pillars ms-pillar:not([inline]), ms-pillars ms-pillar inner-content:not([inline]), ms-pull:not([inline]) {
display: block
}
@-webkit-keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@-webkit-keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
@keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
comp-resources[vocation] h2 {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25;
margin-bottom: 45px !important;
margin-top: 0;
padding-bottom: 18px !important;
position: relative
}
comp-resources[vocation] h2:after {
border-top: 1px solid rgba(151,151,151,.15);
bottom: 0;
content: "";
left: 20px;
position: absolute;
right: 20px
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif
}
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, 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
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace,monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0 0 15px;
}
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;
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
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
*, :after, :before {
box-sizing: border-box
}
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 10px
}
body {
background-color: #fff;
color: #3b3b3b;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 16px;
line-height: 1.8125
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
a:focus, a:hover {
color: #713738;
text-decoration: underline
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
figure {
margin: 0
}
img {
vertical-align: middle
}
.img-responsive {
display: block;
height: auto;
max-width: 100%
}
.img-rounded {
border-radius: 6px
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.8125;
max-width: 100%;
padding: 4px;
transition: all .2s ease-in-out
}
.img-circle {
border-radius: 50%
}
hr {
border-top: 1px solid #eee;
margin-bottom: 29px;
margin-top: 29px
}
.sr-only {
clip: rect(0,0,0,0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.sr-only-focusable:active, .sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}
[role=button] {
cursor: pointer
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: #3b3b3b;
font-family: industry,sans-serif;
font-weight: 500;
line-height: 1.1
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
color: #777;
font-weight: 400;
line-height: 1
}
.h1, .h2, .h3, h1, h2, h3 {
margin-bottom: 14.5px;
margin-top: 29px
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
font-size: 65%
}
.h4, .h5, .h6, h4, h5, h6 {
margin-bottom: 14.5px;
margin-top: 14.5px
}
.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
font-size: 75%
}
.h1, h1 {
font-size: 48px
}
.h2, h2 {
font-size: 33px
}
.h3, h3 {
font-size: 24px
}
.h4, h4 {
font-size: 18px
}
.h5, h5 {
font-size: 16px
}
.h6, h6 {
font-size: 12px
}
p {
margin: 0 0 14.5px
}
.lead {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
margin-bottom: 29px
}
@media(min-width:768px) {
.lead {
font-size: 24px
}
}
.small, small {
font-size: 87%
}
.mark, mark {
background-color: #fcf8e3;
padding: .2em
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.text-nowrap {
white-space: nowrap
}
.text-lowercase {
text-transform: lowercase
}
.initialism, .text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
.text-muted {
color: #777
}
.text-primary {
color: #337ab7
}
a.text-primary:focus, a.text-primary:hover {
color: #286090
}
.text-success {
color: #3c763d
}
a.text-success:focus, a.text-success:hover {
color: #2b542c
}
.text-info {
color: #31708f
}
a.text-info:focus, a.text-info:hover {
color: #245269
}
.text-warning {
color: #8a6d3b
}
a.text-warning:focus, a.text-warning:hover {
color: #66512c
}
.text-danger {
color: #a94442
}
a.text-danger:focus, a.text-danger:hover {
color: #843534
}
.bg-primary {
background-color: #337ab7;
color: #fff
}
a.bg-primary:focus, a.bg-primary:hover {
background-color: #286090
}
.bg-success {
background-color: #dff0d8
}
a.bg-success:focus, a.bg-success:hover {
background-color: #c1e2b3
}
.bg-info {
background-color: #d9edf7
}
a.bg-info:focus, a.bg-info:hover {
background-color: #afd9ee
}
.bg-warning {
background-color: #fcf8e3
}
a.bg-warning:focus, a.bg-warning:hover {
background-color: #f7ecb5
}
.bg-danger {
background-color: #f2dede
}
a.bg-danger:focus, a.bg-danger:hover {
background-color: #e4b9b9
}
.page-header {
border-bottom: 1px solid #eee;
margin: 58px 0 29px;
padding-bottom: 13.5px
}
ol, ul {
margin-bottom: 14.5px;
margin-top: 0
}
ol ol, ol ul, ul ol, ul ul {
margin-bottom: 0
}
.list-inline, .list-unstyled {
list-style: none;
padding-left: 0
}
.list-inline {
margin-left: -5px
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
dl {
margin-bottom: 29px;
margin-top: 0
}
dd, dt {
line-height: 1.8125
}
dt {
font-weight: 700
}
dd {
margin-left: 0
}
.dl-horizontal dd:after, .dl-horizontal dd:before {
content: " ";
display: table
}
.dl-horizontal dd:after {
clear: both
}
@media(min-width:768px) {
.dl-horizontal dt {
clear: left;
float: left;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 160px
}
.dl-horizontal dd {
margin-left: 180px
}
}
abbr[data-original-title], abbr[title] {
border-bottom: 1px dotted #777;
cursor: help
}
.initialism {
font-size: 90%
}
blockquote {
border-left: 5px solid #eee;
font-size: 20px;
margin: 0 0 29px;
padding: 14.5px 29px
}
blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
margin-bottom: 0
}
blockquote .small, blockquote footer, blockquote small {
color: #777;
display: block;
font-size: 80%;
line-height: 1.8125
}
blockquote .small:before, blockquote footer:before, blockquote small:before {
content: "— "
}
.blockquote-reverse, blockquote.pull-right {
border-left: 0;
border-right: 5px solid #eee;
padding-left: 0;
padding-right: 15px;
text-align: right
}
.blockquote-reverse .small:before, .blockquote-reverse footer:before, .blockquote-reverse small:before, blockquote.pull-right .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before {
content: ""
}
.blockquote-reverse .small:after, .blockquote-reverse footer:after, .blockquote-reverse small:after, blockquote.pull-right .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after {
content: " —"
}
address {
font-style: normal;
margin-bottom: 29px
}
.btn, address {
line-height: 1.8125
}
.btn {
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.focus, .btn:focus, .btn:hover {
color: #fff;
text-decoration: none
}
.btn.active, .btn:active {
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
outline: 0
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
box-shadow: none;
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: .65
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none
}
.btn-default {
background-color: #6f87a6;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open > .btn-default.dropdown-toggle {
background-color: #566e8c;
border-color: transparent;
color: #fff
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .btn-default.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover {
background-color: #495c76;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default:active, .open > .btn-default.dropdown-toggle {
background-image: none
}
.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
background-color: #6f87a6;
border-color: transparent
}
.btn-default .badge {
background-color: #fff;
color: #6f87a6
}
.btn-primary {
background-color: #484848;
border-color: #888;
color: #fff
}
.btn-primary.focus, .btn-primary:focus {
background-color: #2f2f2f;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open > .btn-primary.dropdown-toggle {
background-color: #2f2f2f;
border-color: dimgray;
color: #fff
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
background-color: #1d1d1d;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .open > .btn-primary.dropdown-toggle {
background-image: none
}
.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
background-color: #484848;
border-color: #888
}
.btn-primary .badge {
background-color: #fff;
color: #484848
}
.btn-success {
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff
}
.btn-success.focus, .btn-success:focus {
background-color: #449d44;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .btn-success:hover, .open > .btn-success.dropdown-toggle {
background-color: #449d44;
border-color: #398439;
color: #fff
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .btn-success.dropdown-toggle.focus, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle:hover {
background-color: #398439;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .open > .btn-success.dropdown-toggle {
background-image: none
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
background-color: #5cb85c;
border-color: #4cae4c
}
.btn-success .badge {
background-color: #fff;
color: #5cb85c
}
.btn-info {
background-color: #5bc0de;
border-color: #46b8da;
color: #fff
}
.btn-info.focus, .btn-info:focus {
background-color: #31b0d5;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .btn-info:hover, .open > .btn-info.dropdown-toggle {
background-color: #31b0d5;
border-color: #269abc;
color: #fff
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover {
background-color: #269abc;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .open > .btn-info.dropdown-toggle {
background-image: none
}
.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
background-color: #5bc0de;
border-color: #46b8da
}
.btn-info .badge {
background-color: #fff;
color: #5bc0de
}
.btn-warning {
background-color: #f0ad4e;
border-color: #eea236;
color: #fff
}
.btn-warning.focus, .btn-warning:focus {
background-color: #ec971f;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .btn-warning:hover, .open > .btn-warning.dropdown-toggle {
background-color: #ec971f;
border-color: #d58512;
color: #fff
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .btn-warning.dropdown-toggle.focus, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle:hover {
background-color: #d58512;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .open > .btn-warning.dropdown-toggle {
background-image: none
}
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color: #f0ad4e;
border-color: #eea236
}
.btn-warning .badge {
background-color: #fff;
color: #f0ad4e
}
.btn-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: #fff
}
.btn-danger.focus, .btn-danger:focus {
background-color: #c9302c;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .btn-danger:hover, .open > .btn-danger.dropdown-toggle {
background-color: #c9302c;
border-color: #ac2925;
color: #fff
}
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .btn-danger.dropdown-toggle.focus, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle:hover {
background-color: #ac2925;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .open > .btn-danger.dropdown-toggle {
background-image: none
}
.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
background-color: #d9534f;
border-color: #d43f3a
}
.btn-danger .badge {
background-color: #fff;
color: #d9534f
}
.btn-link {
border-radius: 0;
color: #6f87a6;
font-weight: 400
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
background-color: transparent;
box-shadow: none
}
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent
}
.btn-link:focus, .btn-link:hover {
background-color: transparent;
color: #713738;
text-decoration: underline
}
.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
color: #777;
text-decoration: none
}
.btn-lg {
border-radius: 6px;
font-size: 20px;
line-height: 1.3333333;
padding: 10px 16px
}
.btn-sm {
padding: 5px 10px
}
.btn-sm, .btn-xs {
border-radius: 3px;
font-size: 14px;
line-height: 1.5
}
.btn-xs {
padding: 1px 5px
}
.btn-block {
display: block;
width: 100%
}
.btn-block + .btn-block {
margin-top: 5px
}
input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
width: 100%
}
.fade {
opacity: 0;
transition: opacity .15s linear
}
.fade.in {
opacity: 1
}
.collapse {
display: none
}
.collapse.in {
display: block
}
tr.collapse.in {
display: table-row
}
tbody.collapse.in {
display: table-row-group
}
.collapsing {
height: 0;
overflow: hidden;
position: relative;
transition-duration: .35s;
transition-property: height,visibility;
transition-timing-function: ease
}
.materialize-red {
background-color: #484848 !important
}
.materialize-red-text {
color: #484848 !important
}
.materialize-red.lighten-5 {
background-color: #fdeaeb !important
}
.materialize-red-text.text-lighten-5 {
color: #fdeaeb !important
}
.materialize-red.lighten-4 {
background-color: #f8c1c3 !important
}
.materialize-red-text.text-lighten-4 {
color: #f8c1c3 !important
}
.materialize-red.lighten-3 {
background-color: #f3989b !important
}
.materialize-red-text.text-lighten-3 {
color: #f3989b !important
}
.materialize-red.lighten-2 {
background-color: #713738 !important
}
.materialize-red-text.text-lighten-2 {
color: #713738 !important
}
.materialize-red.lighten-1 {
background-color: #6f87a6 !important
}
.materialize-red-text.text-lighten-1 {
color: #6f87a6 !important
}
.materialize-red.darken-1 {
background-color: #d0181e !important
}
.materialize-red-text.text-darken-1 {
color: #d0181e !important
}
.materialize-red.darken-2 {
background-color: #b9151b !important
}
.materialize-red-text.text-darken-2 {
color: #b9151b !important
}
.materialize-red.darken-3 {
background-color: #a21318 !important
}
.materialize-red-text.text-darken-3 {
color: #a21318 !important
}
.materialize-red.darken-4 {
background-color: #8b1014 !important
}
.materialize-red-text.text-darken-4 {
color: #8b1014 !important
}
.red {
background-color: #f44336 !important
}
.red-text {
color: #f44336 !important
}
.red.lighten-5 {
background-color: #ffebee !important
}
.red-text.text-lighten-5 {
color: #ffebee !important
}
.red.lighten-4 {
background-color: #ffcdd2 !important
}
.red-text.text-lighten-4 {
color: #ffcdd2 !important
}
.red.lighten-3 {
background-color: #ef9a9a !important
}
.red-text.text-lighten-3 {
color: #ef9a9a !important
}
.red.lighten-2 {
background-color: #e57373 !important
}
.red-text.text-lighten-2 {
color: #e57373 !important
}
.red.lighten-1 {
background-color: #ef5350 !important
}
.red-text.text-lighten-1 {
color: #ef5350 !important
}
.red.darken-1 {
background-color: #e53935 !important
}
.red-text.text-darken-1 {
color: #e53935 !important
}
.red.darken-2 {
background-color: #d32f2f !important
}
.red-text.text-darken-2 {
color: #d32f2f !important
}
.red.darken-3 {
background-color: #c62828 !important
}
.red-text.text-darken-3 {
color: #c62828 !important
}
.red.darken-4 {
background-color: #b71c1c !important
}
.red-text.text-darken-4 {
color: #b71c1c !important
}
.red.accent-1 {
background-color: #ff8a80 !important
}
.red-text.text-accent-1 {
color: #ff8a80 !important
}
.red.accent-2 {
background-color: #ff5252 !important
}
.red-text.text-accent-2 {
color: #ff5252 !important
}
.red.accent-3 {
background-color: #ff1744 !important
}
.red-text.text-accent-3 {
color: #ff1744 !important
}
.red.accent-4 {
background-color: #d50000 !important
}
.red-text.text-accent-4 {
color: #d50000 !important
}
.pink {
background-color: #e91e63 !important
}
.pink-text {
color: #e91e63 !important
}
.pink.lighten-5 {
background-color: #fce4ec !important
}
.pink-text.text-lighten-5 {
color: #fce4ec !important
}
.pink.lighten-4 {
background-color: #f8bbd0 !important
}
.pink-text.text-lighten-4 {
color: #f8bbd0 !important
}
.pink.lighten-3 {
background-color: #f48fb1 !important
}
.pink-text.text-lighten-3 {
color: #f48fb1 !important
}
.pink.lighten-2 {
background-color: #f06292 !important
}
.pink-text.text-lighten-2 {
color: #f06292 !important
}
.pink.lighten-1 {
background-color: #ec407a !important
}
.pink-text.text-lighten-1 {
color: #ec407a !important
}
.pink.darken-1 {
background-color: #d81b60 !important
}
.pink-text.text-darken-1 {
color: #d81b60 !important
}
.pink.darken-2 {
background-color: #c2185b !important
}
.pink-text.text-darken-2 {
color: #c2185b !important
}
.pink.darken-3 {
background-color: #ad1457 !important
}
.pink-text.text-darken-3 {
color: #ad1457 !important
}
.pink.darken-4 {
background-color: #880e4f !important
}
.pink-text.text-darken-4 {
color: #880e4f !important
}
.pink.accent-1 {
background-color: #ff80ab !important
}
.pink-text.text-accent-1 {
color: #ff80ab !important
}
.pink.accent-2 {
background-color: #ff4081 !important
}
.pink-text.text-accent-2 {
color: #ff4081 !important
}
.pink.accent-3 {
background-color: #f50057 !important
}
.pink-text.text-accent-3 {
color: #f50057 !important
}
.pink.accent-4 {
background-color: #c51162 !important
}
.pink-text.text-accent-4 {
color: #c51162 !important
}
.purple {
background-color: #9c27b0 !important
}
.purple-text {
color: #9c27b0 !important
}
.purple.lighten-5 {
background-color: #f3e5f5 !important
}
.purple-text.text-lighten-5 {
color: #f3e5f5 !important
}
.purple.lighten-4 {
background-color: #e1bee7 !important
}
.purple-text.text-lighten-4 {
color: #e1bee7 !important
}
.purple.lighten-3 {
background-color: #ce93d8 !important
}
.purple-text.text-lighten-3 {
color: #ce93d8 !important
}
.purple.lighten-2 {
background-color: #ba68c8 !important
}
.purple-text.text-lighten-2 {
color: #ba68c8 !important
}
.purple.lighten-1 {
background-color: #ab47bc !important
}
.purple-text.text-lighten-1 {
color: #ab47bc !important
}
.purple.darken-1 {
background-color: #8e24aa !important
}
.purple-text.text-darken-1 {
color: #8e24aa !important
}
.purple.darken-2 {
background-color: #7b1fa2 !important
}
.purple-text.text-darken-2 {
color: #7b1fa2 !important
}
.purple.darken-3 {
background-color: #6a1b9a !important
}
.purple-text.text-darken-3 {
color: #6a1b9a !important
}
.purple.darken-4 {
background-color: #4a148c !important
}
.purple-text.text-darken-4 {
color: #4a148c !important
}
.purple.accent-1 {
background-color: #ea80fc !important
}
.purple-text.text-accent-1 {
color: #ea80fc !important
}
.purple.accent-2 {
background-color: #e040fb !important
}
.purple-text.text-accent-2 {
color: #e040fb !important
}
.purple.accent-3 {
background-color: #d500f9 !important
}
.purple-text.text-accent-3 {
color: #d500f9 !important
}
.purple.accent-4 {
background-color: #a0f !important
}
.purple-text.text-accent-4 {
color: #a0f !important
}
.deep-purple {
background-color: #673ab7 !important
}
.deep-purple-text {
color: #673ab7 !important
}
.deep-purple.lighten-5 {
background-color: #ede7f6 !important
}
.deep-purple-text.text-lighten-5 {
color: #ede7f6 !important
}
.deep-purple.lighten-4 {
background-color: #d1c4e9 !important
}
.deep-purple-text.text-lighten-4 {
color: #d1c4e9 !important
}
.deep-purple.lighten-3 {
background-color: #b39ddb !important
}
.deep-purple-text.text-lighten-3 {
color: #b39ddb !important
}
.deep-purple.lighten-2 {
background-color: #9575cd !important
}
.deep-purple-text.text-lighten-2 {
color: #9575cd !important
}
.deep-purple.lighten-1 {
background-color: #7e57c2 !important
}
.deep-purple-text.text-lighten-1 {
color: #7e57c2 !important
}
.deep-purple.darken-1 {
background-color: #5e35b1 !important
}
.deep-purple-text.text-darken-1 {
color: #5e35b1 !important
}
.deep-purple.darken-2 {
background-color: #512da8 !important
}
.deep-purple-text.text-darken-2 {
color: #512da8 !important
}
.deep-purple.darken-3 {
background-color: #4527a0 !important
}
.deep-purple-text.text-darken-3 {
color: #4527a0 !important
}
.deep-purple.darken-4 {
background-color: #311b92 !important
}
.deep-purple-text.text-darken-4 {
color: #311b92 !important
}
.deep-purple.accent-1 {
background-color: #b388ff !important
}
.deep-purple-text.text-accent-1 {
color: #b388ff !important
}
.deep-purple.accent-2 {
background-color: #7c4dff !important
}
.deep-purple-text.text-accent-2 {
color: #7c4dff !important
}
.deep-purple.accent-3 {
background-color: #651fff !important
}
.deep-purple-text.text-accent-3 {
color: #651fff !important
}
.deep-purple.accent-4 {
background-color: #6200ea !important
}
.deep-purple-text.text-accent-4 {
color: #6200ea !important
}
.indigo {
background-color: #3f51b5 !important
}
.indigo-text {
color: #3f51b5 !important
}
.indigo.lighten-5 {
background-color: #e8eaf6 !important
}
.indigo-text.text-lighten-5 {
color: #e8eaf6 !important
}
.indigo.lighten-4 {
background-color: #c5cae9 !important
}
.indigo-text.text-lighten-4 {
color: #c5cae9 !important
}
.indigo.lighten-3 {
background-color: #9fa8da !important
}
.indigo-text.text-lighten-3 {
color: #9fa8da !important
}
.indigo.lighten-2 {
background-color: #7986cb !important
}
.indigo-text.text-lighten-2 {
color: #7986cb !important
}
.indigo.lighten-1 {
background-color: #5c6bc0 !important
}
.indigo-text.text-lighten-1 {
color: #5c6bc0 !important
}
.indigo.darken-1 {
background-color: #3949ab !important
}
.indigo-text.text-darken-1 {
color: #3949ab !important
}
.indigo.darken-2 {
background-color: #303f9f !important
}
.indigo-text.text-darken-2 {
color: #303f9f !important
}
.indigo.darken-3 {
background-color: #283593 !important
}
.indigo-text.text-darken-3 {
color: #283593 !important
}
.indigo.darken-4 {
background-color: #1a237e !important
}
.indigo-text.text-darken-4 {
color: #1a237e !important
}
.indigo.accent-1 {
background-color: #8c9eff !important
}
.indigo-text.text-accent-1 {
color: #8c9eff !important
}
.indigo.accent-2 {
background-color: #536dfe !important
}
.indigo-text.text-accent-2 {
color: #536dfe !important
}
.indigo.accent-3 {
background-color: #3d5afe !important
}
.indigo-text.text-accent-3 {
color: #3d5afe !important
}
.indigo.accent-4 {
background-color: #304ffe !important
}
.indigo-text.text-accent-4 {
color: #304ffe !important
}
.blue {
background-color: #2196f3 !important
}
.blue-text {
color: #2196f3 !important
}
.blue.lighten-5 {
background-color: #e3f2fd !important
}
.blue-text.text-lighten-5 {
color: #e3f2fd !important
}
.blue.lighten-4 {
background-color: #bbdefb !important
}
.blue-text.text-lighten-4 {
color: #bbdefb !important
}
.blue.lighten-3 {
background-color: #90caf9 !important
}
.blue-text.text-lighten-3 {
color: #90caf9 !important
}
.blue.lighten-2 {
background-color: #64b5f6 !important
}
.blue-text.text-lighten-2 {
color: #64b5f6 !important
}
.blue.lighten-1 {
background-color: #42a5f5 !important
}
.blue-text.text-lighten-1 {
color: #42a5f5 !important
}
.blue.darken-1 {
background-color: #1e88e5 !important
}
.blue-text.text-darken-1 {
color: #1e88e5 !important
}
.blue.darken-2 {
background-color: #1976d2 !important
}
.blue-text.text-darken-2 {
color: #1976d2 !important
}
.blue.darken-3 {
background-color: #1565c0 !important
}
.blue-text.text-darken-3 {
color: #1565c0 !important
}
.blue.darken-4 {
background-color: #0d47a1 !important
}
.blue-text.text-darken-4 {
color: #0d47a1 !important
}
.blue.accent-1 {
background-color: #82b1ff !important
}
.blue-text.text-accent-1 {
color: #82b1ff !important
}
.blue.accent-2 {
background-color: #448aff !important
}
.blue-text.text-accent-2 {
color: #448aff !important
}
.blue.accent-3 {
background-color: #2979ff !important
}
.blue-text.text-accent-3 {
color: #2979ff !important
}
.blue.accent-4 {
background-color: #2962ff !important
}
.blue-text.text-accent-4 {
color: #2962ff !important
}
.light-blue {
background-color: #03a9f4 !important
}
.light-blue-text {
color: #03a9f4 !important
}
.light-blue.lighten-5 {
background-color: #e1f5fe !important
}
.light-blue-text.text-lighten-5 {
color: #e1f5fe !important
}
.light-blue.lighten-4 {
background-color: #b3e5fc !important
}
.light-blue-text.text-lighten-4 {
color: #b3e5fc !important
}
.light-blue.lighten-3 {
background-color: #81d4fa !important
}
.light-blue-text.text-lighten-3 {
color: #81d4fa !important
}
.light-blue.lighten-2 {
background-color: #4fc3f7 !important
}
.light-blue-text.text-lighten-2 {
color: #4fc3f7 !important
}
.light-blue.lighten-1 {
background-color: #29b6f6 !important
}
.light-blue-text.text-lighten-1 {
color: #29b6f6 !important
}
.light-blue.darken-1 {
background-color: #039be5 !important
}
.light-blue-text.text-darken-1 {
color: #039be5 !important
}
.light-blue.darken-2 {
background-color: #0288d1 !important
}
.light-blue-text.text-darken-2 {
color: #0288d1 !important
}
.light-blue.darken-3 {
background-color: #0277bd !important
}
.light-blue-text.text-darken-3 {
color: #0277bd !important
}
.light-blue.darken-4 {
background-color: #01579b !important
}
.light-blue-text.text-darken-4 {
color: #01579b !important
}
.light-blue.accent-1 {
background-color: #80d8ff !important
}
.light-blue-text.text-accent-1 {
color: #80d8ff !important
}
.light-blue.accent-2 {
background-color: #40c4ff !important
}
.light-blue-text.text-accent-2 {
color: #40c4ff !important
}
.light-blue.accent-3 {
background-color: #00b0ff !important
}
.light-blue-text.text-accent-3 {
color: #00b0ff !important
}
.light-blue.accent-4 {
background-color: #0091ea !important
}
.light-blue-text.text-accent-4 {
color: #0091ea !important
}
.cyan {
background-color: #00bcd4 !important
}
.cyan-text {
color: #00bcd4 !important
}
.cyan.lighten-5 {
background-color: #e0f7fa !important
}
.cyan-text.text-lighten-5 {
color: #e0f7fa !important
}
.cyan.lighten-4 {
background-color: #b2ebf2 !important
}
.cyan-text.text-lighten-4 {
color: #b2ebf2 !important
}
.cyan.lighten-3 {
background-color: #80deea !important
}
.cyan-text.text-lighten-3 {
color: #80deea !important
}
.cyan.lighten-2 {
background-color: #4dd0e1 !important
}
.cyan-text.text-lighten-2 {
color: #4dd0e1 !important
}
.cyan.lighten-1 {
background-color: #26c6da !important
}
.cyan-text.text-lighten-1 {
color: #26c6da !important
}
.cyan.darken-1 {
background-color: #00acc1 !important
}
.cyan-text.text-darken-1 {
color: #00acc1 !important
}
.cyan.darken-2 {
background-color: #0097a7 !important
}
.cyan-text.text-darken-2 {
color: #0097a7 !important
}
.cyan.darken-3 {
background-color: #00838f !important
}
.cyan-text.text-darken-3 {
color: #00838f !important
}
.cyan.darken-4 {
background-color: #006064 !important
}
.cyan-text.text-darken-4 {
color: #006064 !important
}
.cyan.accent-1 {
background-color: #84ffff !important
}
.cyan-text.text-accent-1 {
color: #84ffff !important
}
.cyan.accent-2 {
background-color: #18ffff !important
}
.cyan-text.text-accent-2 {
color: #18ffff !important
}
.cyan.accent-3 {
background-color: #00e5ff !important
}
.cyan-text.text-accent-3 {
color: #00e5ff !important
}
.cyan.accent-4 {
background-color: #00b8d4 !important
}
.cyan-text.text-accent-4 {
color: #00b8d4 !important
}
.teal {
background-color: #009688 !important
}
.teal-text {
color: #009688 !important
}
.teal.lighten-5 {
background-color: #e0f2f1 !important
}
.teal-text.text-lighten-5 {
color: #e0f2f1 !important
}
.teal.lighten-4 {
background-color: #b2dfdb !important
}
.teal-text.text-lighten-4 {
color: #b2dfdb !important
}
.teal.lighten-3 {
background-color: #80cbc4 !important
}
.teal-text.text-lighten-3 {
color: #80cbc4 !important
}
.teal.lighten-2 {
background-color: #4db6ac !important
}
.teal-text.text-lighten-2 {
color: #4db6ac !important
}
.teal.lighten-1 {
background-color: #26a69a !important
}
.teal-text.text-lighten-1 {
color: #26a69a !important
}
.teal.darken-1 {
background-color: #00897b !important
}
.teal-text.text-darken-1 {
color: #00897b !important
}
.teal.darken-2 {
background-color: #00796b !important
}
.teal-text.text-darken-2 {
color: #00796b !important
}
.teal.darken-3 {
background-color: #00695c !important
}
.teal-text.text-darken-3 {
color: #00695c !important
}
.teal.darken-4 {
background-color: #004d40 !important
}
.teal-text.text-darken-4 {
color: #004d40 !important
}
.teal.accent-1 {
background-color: #a7ffeb !important
}
.teal-text.text-accent-1 {
color: #a7ffeb !important
}
.teal.accent-2 {
background-color: #64ffda !important
}
.teal-text.text-accent-2 {
color: #64ffda !important
}
.teal.accent-3 {
background-color: #1de9b6 !important
}
.teal-text.text-accent-3 {
color: #1de9b6 !important
}
.teal.accent-4 {
background-color: #00bfa5 !important
}
.teal-text.text-accent-4 {
color: #00bfa5 !important
}
.green {
background-color: #4caf50 !important
}
.green-text {
color: #4caf50 !important
}
.green.lighten-5 {
background-color: #e8f5e9 !important
}
.green-text.text-lighten-5 {
color: #e8f5e9 !important
}
.green.lighten-4 {
background-color: #c8e6c9 !important
}
.green-text.text-lighten-4 {
color: #c8e6c9 !important
}
.green.lighten-3 {
background-color: #a5d6a7 !important
}
.green-text.text-lighten-3 {
color: #a5d6a7 !important
}
.green.lighten-2 {
background-color: #81c784 !important
}
.green-text.text-lighten-2 {
color: #81c784 !important
}
.green.lighten-1 {
background-color: #66bb6a !important
}
.green-text.text-lighten-1 {
color: #66bb6a !important
}
.green.darken-1 {
background-color: #43a047 !important
}
.green-text.text-darken-1 {
color: #43a047 !important
}
.green.darken-2 {
background-color: #388e3c !important
}
.green-text.text-darken-2 {
color: #388e3c !important
}
.green.darken-3 {
background-color: #2e7d32 !important
}
.green-text.text-darken-3 {
color: #2e7d32 !important
}
.green.darken-4 {
background-color: #1b5e20 !important
}
.green-text.text-darken-4 {
color: #1b5e20 !important
}
.green.accent-1 {
background-color: #b9f6ca !important
}
.green-text.text-accent-1 {
color: #b9f6ca !important
}
.green.accent-2 {
background-color: #69f0ae !important
}
.green-text.text-accent-2 {
color: #69f0ae !important
}
.green.accent-3 {
background-color: #00e676 !important
}
.green-text.text-accent-3 {
color: #00e676 !important
}
.green.accent-4 {
background-color: #00c853 !important
}
.green-text.text-accent-4 {
color: #00c853 !important
}
.light-green {
background-color: #8bc34a !important
}
.light-green-text {
color: #8bc34a !important
}
.light-green.lighten-5 {
background-color: #f1f8e9 !important
}
.light-green-text.text-lighten-5 {
color: #f1f8e9 !important
}
.light-green.lighten-4 {
background-color: #dcedc8 !important
}
.light-green-text.text-lighten-4 {
color: #dcedc8 !important
}
.light-green.lighten-3 {
background-color: #c5e1a5 !important
}
.light-green-text.text-lighten-3 {
color: #c5e1a5 !important
}
.light-green.lighten-2 {
background-color: #aed581 !important
}
.light-green-text.text-lighten-2 {
color: #aed581 !important
}
.light-green.lighten-1 {
background-color: #9ccc65 !important
}
.light-green-text.text-lighten-1 {
color: #9ccc65 !important
}
.light-green.darken-1 {
background-color: #7cb342 !important
}
.light-green-text.text-darken-1 {
color: #7cb342 !important
}
.light-green.darken-2 {
background-color: #689f38 !important
}
.light-green-text.text-darken-2 {
color: #689f38 !important
}
.light-green.darken-3 {
background-color: #558b2f !important
}
.light-green-text.text-darken-3 {
color: #558b2f !important
}
.light-green.darken-4 {
background-color: #33691e !important
}
.light-green-text.text-darken-4 {
color: #33691e !important
}
.light-green.accent-1 {
background-color: #ccff90 !important
}
.light-green-text.text-accent-1 {
color: #ccff90 !important
}
.light-green.accent-2 {
background-color: #b2ff59 !important
}
.light-green-text.text-accent-2 {
color: #b2ff59 !important
}
.light-green.accent-3 {
background-color: #76ff03 !important
}
.light-green-text.text-accent-3 {
color: #76ff03 !important
}
.light-green.accent-4 {
background-color: #64dd17 !important
}
.light-green-text.text-accent-4 {
color: #64dd17 !important
}
.lime {
background-color: #cddc39 !important
}
.lime-text {
color: #cddc39 !important
}
.lime.lighten-5 {
background-color: #f9fbe7 !important
}
.lime-text.text-lighten-5 {
color: #f9fbe7 !important
}
.lime.lighten-4 {
background-color: #f0f4c3 !important
}
.lime-text.text-lighten-4 {
color: #f0f4c3 !important
}
.lime.lighten-3 {
background-color: #e6ee9c !important
}
.lime-text.text-lighten-3 {
color: #e6ee9c !important
}
.lime.lighten-2 {
background-color: #dce775 !important
}
.lime-text.text-lighten-2 {
color: #dce775 !important
}
.lime.lighten-1 {
background-color: #d4e157 !important
}
.lime-text.text-lighten-1 {
color: #d4e157 !important
}
.lime.darken-1 {
background-color: #c0ca33 !important
}
.lime-text.text-darken-1 {
color: #c0ca33 !important
}
.lime.darken-2 {
background-color: #afb42b !important
}
.lime-text.text-darken-2 {
color: #afb42b !important
}
.lime.darken-3 {
background-color: #9e9d24 !important
}
.lime-text.text-darken-3 {
color: #9e9d24 !important
}
.lime.darken-4 {
background-color: #827717 !important
}
.lime-text.text-darken-4 {
color: #827717 !important
}
.lime.accent-1 {
background-color: #f4ff81 !important
}
.lime-text.text-accent-1 {
color: #f4ff81 !important
}
.lime.accent-2 {
background-color: #eeff41 !important
}
.lime-text.text-accent-2 {
color: #eeff41 !important
}
.lime.accent-3 {
background-color: #c6ff00 !important
}
.lime-text.text-accent-3 {
color: #c6ff00 !important
}
.lime.accent-4 {
background-color: #aeea00 !important
}
.lime-text.text-accent-4 {
color: #aeea00 !important
}
.yellow {
background-color: #ffeb3b !important
}
.yellow-text {
color: #ffeb3b !important
}
.yellow.lighten-5 {
background-color: #fffde7 !important
}
.yellow-text.text-lighten-5 {
color: #fffde7 !important
}
.yellow.lighten-4 {
background-color: #fff9c4 !important
}
.yellow-text.text-lighten-4 {
color: #fff9c4 !important
}
.yellow.lighten-3 {
background-color: #fff59d !important
}
.yellow-text.text-lighten-3 {
color: #fff59d !important
}
.yellow.lighten-2 {
background-color: #fff176 !important
}
.yellow-text.text-lighten-2 {
color: #fff176 !important
}
.yellow.lighten-1 {
background-color: #ffee58 !important
}
.yellow-text.text-lighten-1 {
color: #ffee58 !important
}
.yellow.darken-1 {
background-color: #fdd835 !important
}
.yellow-text.text-darken-1 {
color: #fdd835 !important
}
.yellow.darken-2 {
background-color: #fbc02d !important
}
.yellow-text.text-darken-2 {
color: #fbc02d !important
}
.yellow.darken-3 {
background-color: #f9a825 !important
}
.yellow-text.text-darken-3 {
color: #f9a825 !important
}
.yellow.darken-4 {
background-color: #f57f17 !important
}
.yellow-text.text-darken-4 {
color: #f57f17 !important
}
.yellow.accent-1 {
background-color: #ffff8d !important
}
.yellow-text.text-accent-1 {
color: #ffff8d !important
}
.yellow.accent-2 {
background-color: #ff0 !important
}
.yellow-text.text-accent-2 {
color: #ff0 !important
}
.yellow.accent-3 {
background-color: #ffea00 !important
}
.yellow-text.text-accent-3 {
color: #ffea00 !important
}
.yellow.accent-4 {
background-color: #ffd600 !important
}
.yellow-text.text-accent-4 {
color: #ffd600 !important
}
.amber {
background-color: #ffc107 !important
}
.amber-text {
color: #ffc107 !important
}
.amber.lighten-5 {
background-color: #fff8e1 !important
}
.amber-text.text-lighten-5 {
color: #fff8e1 !important
}
.amber.lighten-4 {
background-color: #ffecb3 !important
}
.amber-text.text-lighten-4 {
color: #ffecb3 !important
}
.amber.lighten-3 {
background-color: #ffe082 !important
}
.amber-text.text-lighten-3 {
color: #ffe082 !important
}
.amber.lighten-2 {
background-color: #ffd54f !important
}
.amber-text.text-lighten-2 {
color: #ffd54f !important
}
.amber.lighten-1 {
background-color: #ffca28 !important
}
.amber-text.text-lighten-1 {
color: #ffca28 !important
}
.amber.darken-1 {
background-color: #ffb300 !important
}
.amber-text.text-darken-1 {
color: #ffb300 !important
}
.amber.darken-2 {
background-color: #ffa000 !important
}
.amber-text.text-darken-2 {
color: #ffa000 !important
}
.amber.darken-3 {
background-color: #ff8f00 !important
}
.amber-text.text-darken-3 {
color: #ff8f00 !important
}
.amber.darken-4 {
background-color: #ff6f00 !important
}
.amber-text.text-darken-4 {
color: #ff6f00 !important
}
.amber.accent-1 {
background-color: #ffe57f !important
}
.amber-text.text-accent-1 {
color: #ffe57f !important
}
.amber.accent-2 {
background-color: #ffd740 !important
}
.amber-text.text-accent-2 {
color: #ffd740 !important
}
.amber.accent-3 {
background-color: #ffc400 !important
}
.amber-text.text-accent-3 {
color: #ffc400 !important
}
.amber.accent-4 {
background-color: #ffab00 !important
}
.amber-text.text-accent-4 {
color: #ffab00 !important
}
.orange {
background-color: #ff9800 !important
}
.orange-text {
color: #ff9800 !important
}
.orange.lighten-5 {
background-color: #fff3e0 !important
}
.orange-text.text-lighten-5 {
color: #fff3e0 !important
}
.orange.lighten-4 {
background-color: #ffe0b2 !important
}
.orange-text.text-lighten-4 {
color: #ffe0b2 !important
}
.orange.lighten-3 {
background-color: #ffcc80 !important
}
.orange-text.text-lighten-3 {
color: #ffcc80 !important
}
.orange.lighten-2 {
background-color: #ffb74d !important
}
.orange-text.text-lighten-2 {
color: #ffb74d !important
}
.orange.lighten-1 {
background-color: #ffa726 !important
}
.orange-text.text-lighten-1 {
color: #ffa726 !important
}
.orange.darken-1 {
background-color: #fb8c00 !important
}
.orange-text.text-darken-1 {
color: #fb8c00 !important
}
.orange.darken-2 {
background-color: #f57c00 !important
}
.orange-text.text-darken-2 {
color: #f57c00 !important
}
.orange.darken-3 {
background-color: #ef6c00 !important
}
.orange-text.text-darken-3 {
color: #ef6c00 !important
}
.orange.darken-4 {
background-color: #e65100 !important
}
.orange-text.text-darken-4 {
color: #e65100 !important
}
.orange.accent-1 {
background-color: #ffd180 !important
}
.orange-text.text-accent-1 {
color: #ffd180 !important
}
.orange.accent-2 {
background-color: #ffab40 !important
}
.orange-text.text-accent-2 {
color: #ffab40 !important
}
.orange.accent-3 {
background-color: #ff9100 !important
}
.orange-text.text-accent-3 {
color: #ff9100 !important
}
.orange.accent-4 {
background-color: #ff6d00 !important
}
.orange-text.text-accent-4 {
color: #ff6d00 !important
}
.deep-orange {
background-color: #ff5722 !important
}
.deep-orange-text {
color: #ff5722 !important
}
.deep-orange.lighten-5 {
background-color: #fbe9e7 !important
}
.deep-orange-text.text-lighten-5 {
color: #fbe9e7 !important
}
.deep-orange.lighten-4 {
background-color: #ffccbc !important
}
.deep-orange-text.text-lighten-4 {
color: #ffccbc !important
}
.deep-orange.lighten-3 {
background-color: #ffab91 !important
}
.deep-orange-text.text-lighten-3 {
color: #ffab91 !important
}
.deep-orange.lighten-2 {
background-color: #ff8a65 !important
}
.deep-orange-text.text-lighten-2 {
color: #ff8a65 !important
}
.deep-orange.lighten-1 {
background-color: #ff7043 !important
}
.deep-orange-text.text-lighten-1 {
color: #ff7043 !important
}
.deep-orange.darken-1 {
background-color: #f4511e !important
}
.deep-orange-text.text-darken-1 {
color: #f4511e !important
}
.deep-orange.darken-2 {
background-color: #e64a19 !important
}
.deep-orange-text.text-darken-2 {
color: #e64a19 !important
}
.deep-orange.darken-3 {
background-color: #d84315 !important
}
.deep-orange-text.text-darken-3 {
color: #d84315 !important
}
.deep-orange.darken-4 {
background-color: #bf360c !important
}
.deep-orange-text.text-darken-4 {
color: #bf360c !important
}
.deep-orange.accent-1 {
background-color: #ff9e80 !important
}
.deep-orange-text.text-accent-1 {
color: #ff9e80 !important
}
.deep-orange.accent-2 {
background-color: #ff6e40 !important
}
.deep-orange-text.text-accent-2 {
color: #ff6e40 !important
}
.deep-orange.accent-3 {
background-color: #ff3d00 !important
}
.deep-orange-text.text-accent-3 {
color: #ff3d00 !important
}
.deep-orange.accent-4 {
background-color: #dd2c00 !important
}
.deep-orange-text.text-accent-4 {
color: #dd2c00 !important
}
.brown {
background-color: #795548 !important
}
.brown-text {
color: #795548 !important
}
.brown.lighten-5 {
background-color: #efebe9 !important
}
.brown-text.text-lighten-5 {
color: #efebe9 !important
}
.brown.lighten-4 {
background-color: #d7ccc8 !important
}
.brown-text.text-lighten-4 {
color: #d7ccc8 !important
}
.brown.lighten-3 {
background-color: #bcaaa4 !important
}
.brown-text.text-lighten-3 {
color: #bcaaa4 !important
}
.brown.lighten-2 {
background-color: #a1887f !important
}
.brown-text.text-lighten-2 {
color: #a1887f !important
}
.brown.lighten-1 {
background-color: #8d6e63 !important
}
.brown-text.text-lighten-1 {
color: #8d6e63 !important
}
.brown.darken-1 {
background-color: #6d4c41 !important
}
.brown-text.text-darken-1 {
color: #6d4c41 !important
}
.brown.darken-2 {
background-color: #5d4037 !important
}
.brown-text.text-darken-2 {
color: #5d4037 !important
}
.brown.darken-3 {
background-color: #4e342e !important
}
.brown-text.text-darken-3 {
color: #4e342e !important
}
.brown.darken-4 {
background-color: #3e2723 !important
}
.brown-text.text-darken-4 {
color: #3e2723 !important
}
.blue-grey {
background-color: #607d8b !important
}
.blue-grey-text {
color: #607d8b !important
}
.blue-grey.lighten-5 {
background-color: #eceff1 !important
}
.blue-grey-text.text-lighten-5 {
color: #eceff1 !important
}
.blue-grey.lighten-4 {
background-color: #cfd8dc !important
}
.blue-grey-text.text-lighten-4 {
color: #cfd8dc !important
}
.blue-grey.lighten-3 {
background-color: #b0bec5 !important
}
.blue-grey-text.text-lighten-3 {
color: #b0bec5 !important
}
.blue-grey.lighten-2 {
background-color: #90a4ae !important
}
.blue-grey-text.text-lighten-2 {
color: #90a4ae !important
}
.blue-grey.lighten-1 {
background-color: #78909c !important
}
.blue-grey-text.text-lighten-1 {
color: #78909c !important
}
.blue-grey.darken-1 {
background-color: #546e7a !important
}
.blue-grey-text.text-darken-1 {
color: #546e7a !important
}
.blue-grey.darken-2 {
background-color: #455a64 !important
}
.blue-grey-text.text-darken-2 {
color: #455a64 !important
}
.blue-grey.darken-3 {
background-color: #37474f !important
}
.blue-grey-text.text-darken-3 {
color: #37474f !important
}
.blue-grey.darken-4 {
background-color: #263238 !important
}
.blue-grey-text.text-darken-4 {
color: #263238 !important
}
.grey {
background-color: #9e9e9e !important
}
.grey-text {
color: #9e9e9e !important
}
.grey.lighten-5 {
background-color: #fafafa !important
}
.grey-text.text-lighten-5 {
color: #fafafa !important
}
.grey.lighten-4 {
background-color: #f5f5f5 !important
}
.grey-text.text-lighten-4 {
color: #f5f5f5 !important
}
.grey.lighten-3 {
background-color: #eee !important
}
.grey-text.text-lighten-3 {
color: #eee !important
}
.grey.lighten-2 {
background-color: #e0e0e0 !important
}
.grey-text.text-lighten-2 {
color: #e0e0e0 !important
}
.grey.lighten-1 {
background-color: #bdbdbd !important
}
.grey-text.text-lighten-1 {
color: #bdbdbd !important
}
.grey.darken-1 {
background-color: #757575 !important
}
.grey-text.text-darken-1 {
color: #757575 !important
}
.grey.darken-2 {
background-color: #616161 !important
}
.grey-text.text-darken-2 {
color: #616161 !important
}
.grey.darken-3 {
background-color: #424242 !important
}
.grey-text.text-darken-3 {
color: #424242 !important
}
.grey.darken-4 {
background-color: #212121 !important
}
.grey-text.text-darken-4 {
color: #212121 !important
}
.shades.black {
background-color: #000 !important
}
.shades-text.text-black {
color: #000 !important
}
.shades.white {
background-color: #fff !important
}
.shades-text.text-white {
color: #fff !important
}
.shades.transparent {
background-color: transparent !important
}
.shades-text.text-transparent {
color: transparent !important
}
.black {
background-color: #000 !important
}
.black-text {
color: #000 !important
}
.white {
background-color: #fff !important
}
.white-text {
color: #fff !important
}
.transparent {
background-color: transparent !important
}
.transparent-text {
color: transparent !important
}
html {
box-sizing: border-box
}
*, :after, :before {
box-sizing: inherit
}
ul {
list-style-type: none
}
ul.browser-default {
list-style-type: disc
}
a {
-webkit-tap-highlight-color: transparent;
color: #6f87a6;
text-decoration: none
}
.valign-wrapper {
align-items: center;
display: flex
}
.valign-wrapper .valign {
display: block
}
ul {
padding: 0
}
ul li {
list-style-type: none
}
.clearfix {
clear: both
}
.z-depth-0 {
box-shadow: none !important
}
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)
}
.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
}
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)
}
.modal, .z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21)
}
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0,0,0,.2),0 40px 77px 0 rgba(0,0,0,.22)
}
.hoverable {
box-shadow: 0;
transition: box-shadow .25s
}
.hoverable:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
transition: box-shadow .25s
}
.divider {
background-color: #e0e0e0;
height: 1px;
overflow: hidden
}
blockquote {
border-left: 5px solid #713738;
margin: 20px 0;
padding-left: 1.5rem
}
i {
line-height: inherit
}
i.left {
float: left;
margin-right: 15px
}
i.right {
float: right;
margin-left: 15px
}
i.tiny {
font-size: 1rem
}
i.small {
font-size: 2rem
}
i.medium {
font-size: 4rem
}
i.large {
font-size: 6rem
}
img.responsive-img, video.responsive-video {
height: auto;
max-width: 100%
}
.pagination li {
border-radius: 2px;
display: inline-block;
font-size: 1.2rem;
line-height: 30px;
padding: 0 10px;
text-align: center
}
.pagination li a {
color: #444
}
.pagination li.active a {
color: #fff
}
.pagination li.active {
background-color: #713738
}
.pagination li.disabled a {
color: #999;
cursor: default
}
.pagination li i {
font-size: 2.2rem;
vertical-align: middle
}
.pagination li.pages ul li {
display: inline-block;
float: none
}
@media only screen and (max-width:992px) {
.pagination {
width: 100%
}
.pagination li.next, .pagination li.prev {
width: 10%
}
.pagination li.pages {
overflow: hidden;
white-space: nowrap;
width: 80%
}
}
.breadcrumb {
color: rgba(255,255,255,.7);
font-size: 18px
}
.breadcrumb [class*=mdi-], .breadcrumb [class^=mdi-], .breadcrumb i, .breadcrumb i.material-icons {
display: inline-block;
float: left;
font-size: 24px
}
.breadcrumb:before {
-webkit-font-smoothing: antialiased;
color: rgba(255,255,255,.7);
content: "";
display: inline-block;
font-family: Material Icons;
font-size: 25px;
font-style: normal;
font-weight: 400;
margin: 0 10px 0 8px;
vertical-align: top
}
.breadcrumb:first-child:before {
display: none
}
.breadcrumb:last-child {
color: #fff
}
.parallax-container {
height: 500px;
overflow: hidden;
position: relative
}
.parallax {
left: 0;
right: 0;
top: 0;
z-index: -1
}
.parallax, .parallax img {
bottom: 0;
position: absolute
}
.parallax img {
display: none;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translateZ(0);
transform: translateX(-50%)
}
.pin-bottom, .pin-top {
position: relative
}
.pinned {
position: fixed !important
}
.fade-in, ul.staggered-list li {
opacity: 0
}
.fade-in {
transform-origin: 0 50%
}
@media only screen and (max-width:600px) {
.hide-on-small-and-down, .hide-on-small-only {
display: none !important
}
}
@media only screen and (max-width:992px) {
.hide-on-med-and-down {
display: none !important
}
}
@media only screen and (min-width:601px) {
.hide-on-med-and-up {
display: none !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.hide-on-med-only {
display: none !important
}
}
@media only screen and (min-width:993px) {
.hide-on-large-only {
display: none !important
}
.show-on-large {
display: block !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.show-on-medium {
display: block !important
}
}
@media only screen and (max-width:600px) {
.show-on-small {
display: block !important
}
}
@media only screen and (min-width:601px) {
.show-on-medium-and-up {
display: block !important
}
}
@media only screen and (max-width:992px) {
.show-on-medium-and-down {
display: block !important
}
}
@media only screen and (max-width:600px) {
.center-on-small-only {
text-align: center
}
}
footer.page-footer {
background-color: #713738;
margin-top: 20px;
padding-top: 20px
}
footer.page-footer .footer-copyright {
background-color: rgba(51,51,51,.08);
color: rgba(255,255,255,.8);
height: 50px;
line-height: 50px;
overflow: hidden
}
table:not([class^=month-picker]) {
border: none;
display: table;
width: 100%
}
table:not([class^=month-picker]).bordered > tbody > tr, table:not([class^=month-picker]).bordered > thead > tr {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]).striped > tbody > tr:nth-child(odd) {
background-color: #f2f2f2
}
table:not([class^=month-picker]).striped > tbody > tr > td {
border-radius: 0
}
table:not([class^=month-picker]).highlight > tbody > tr {
transition: background-color .25s ease
}
table:not([class^=month-picker]).highlight > tbody > tr:hover {
background-color: #f2f2f2
}
table:not([class^=month-picker]).centered tbody tr td, table:not([class^=month-picker]).centered thead tr th {
text-align: center
}
thead {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]) td, table:not([class^=month-picker]) th {
border: none;
border-radius: 2px;
display: table-cell;
padding: 15px 5px;
text-align: left;
vertical-align: middle
}
@media only screen and (max-width:992px) {
table.responsive-table {
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
width: 100%
}
table.responsive-table td:empty:before {
content: "Â "
}
table.responsive-table td, table.responsive-table th {
margin: 0;
vertical-align: top
}
table.responsive-table th {
text-align: left
}
table.responsive-table thead {
display: block;
float: left
}
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0
}
table.responsive-table thead tr th:before {
content: "Â "
}
table.responsive-table tbody {
display: block;
overflow-x: auto;
position: relative;
white-space: nowrap;
width: auto
}
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top
}
table.responsive-table th {
display: block;
text-align: right
}
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left
}
table.responsive-table tr {
padding: 0 10px
}
table.responsive-table thead {
border: 0;
border-right: 1px solid #ddd
}
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0
}
table.responsive-table.bordered td {
border-bottom: 0;
border-left: 0;
border-right: 0
}
table.responsive-table.bordered tr {
border: 0
}
table.responsive-table.bordered tbody tr {
border-right: 1px solid #ddd
}
}
.collection {
border: 1px solid #e0e0e0;
border-radius: 2px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative
}
.collection .collection-item {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
line-height: 1.5rem;
margin: 0;
padding: 10px 20px
}
.collection .collection-item.avatar {
min-height: 84px;
padding-left: 72px;
position: relative
}
.collection .collection-item.avatar .circle {
display: inline-block;
height: 42px;
left: 15px;
overflow: hidden;
position: absolute;
vertical-align: middle;
width: 42px
}
.collection .collection-item.avatar i.circle {
background-color: #999;
color: #fff;
font-size: 18px;
line-height: 42px;
text-align: center
}
.collection .collection-item.avatar .title {
font-size: 16px
}
.collection .collection-item.avatar p {
margin: 0
}
.collection .collection-item.avatar .secondary-content {
position: absolute;
right: 16px;
top: 16px
}
.collection .collection-item:last-child {
border-bottom: none
}
.collection .collection-item.active {
background-color: #6f87a6;
color: #fff
}
.collection .collection-item.active .secondary-content {
color: #fff
}
.collection a.collection-item {
color: #6f87a6;
display: block;
transition: .25s
}
.collection a.collection-item:not(.active):hover {
background-color: #ddd
}
.collection.with-header .collection-header {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 10px 20px
}
.collection.with-header .collection-item {
padding-left: 30px
}
.collection.with-header .collection-item.avatar {
padding-left: 72px
}
.secondary-content {
color: #6f87a6;
float: right
}
.collapsible .collection {
border: none;
margin: 0
}
span.badge {
box-sizing: border-box;
color: #757575;
font-size: 1rem;
line-height: inherit;
min-width: 3rem;
padding: 0 6px;
position: absolute;
right: 15px;
text-align: center
}
span.badge.new {
background-color: #6f87a6;
border-radius: 2px;
color: #fff;
font-size: .8rem;
font-weight: 300
}
span.badge.new:after {
content: " new"
}
nav ul a span.badge {
line-height: 0;
margin-left: 4px;
position: static
}
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative
}
.video-container embed, .video-container iframe, .video-container object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.progress {
background-color: #fff;
border-radius: 2px;
display: block;
height: 4px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative;
width: 100%
}
.progress .determinate {
background-color: #fff;
bottom: 0;
left: 0;
position: absolute;
top: 0;
transition: width .3s linear
}
.progress .indeterminate {
background-color: #fff
}
.progress .indeterminate:before {
-webkit-animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
}
.progress .indeterminate:after, .progress .indeterminate:before {
background-color: inherit;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
will-change: left,right
}
.progress .indeterminate:after {
-webkit-animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
.hide {
display: none !important
}
.left-align {
text-align: left
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center
}
.left {
float: left !important
}
.right {
float: right !important
}
.no-select, input[type=range], input[type=range] + .thumb {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.circle {
border-radius: 50%
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.no-padding {
padding: 0 !important
}
em {
font-style: italic
}
strong {
font-weight: 500
}
small {
font-size: 75%
}
.light, footer.page-footer .footer-copyright {
font-weight: 300
}
.thin, nav[with-subtitle] > a span.label {
font-weight: 200
}
.flow-text {
font-weight: 300
}
@media only screen and (min-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
@media only screen and (min-width:390px) {
.flow-text {
font-size: 1.224rem
}
}
@media only screen and (min-width:420px) {
.flow-text {
font-size: 1.248rem
}
}
@media only screen and (min-width:450px) {
.flow-text {
font-size: 1.272rem
}
}
@media only screen and (min-width:480px) {
.flow-text {
font-size: 1.296rem
}
}
@media only screen and (min-width:510px) {
.flow-text {
font-size: 1.32rem
}
}
@media only screen and (min-width:540px) {
.flow-text {
font-size: 1.344rem
}
}
@media only screen and (min-width:570px) {
.flow-text {
font-size: 1.368rem
}
}
@media only screen and (min-width:600px) {
.flow-text {
font-size: 1.392rem
}
}
@media only screen and (min-width:630px) {
.flow-text {
font-size: 1.416rem
}
}
@media only screen and (min-width:660px) {
.flow-text {
font-size: 1.44rem
}
}
@media only screen and (min-width:690px) {
.flow-text {
font-size: 1.464rem
}
}
@media only screen and (min-width:720px) {
.flow-text {
font-size: 1.488rem
}
}
@media only screen and (min-width:750px) {
.flow-text {
font-size: 1.512rem
}
}
@media only screen and (min-width:780px) {
.flow-text {
font-size: 1.536rem
}
}
@media only screen and (min-width:810px) {
.flow-text {
font-size: 1.56rem
}
}
@media only screen and (min-width:840px) {
.flow-text {
font-size: 1.584rem
}
}
@media only screen and (min-width:870px) {
.flow-text {
font-size: 1.608rem
}
}
@media only screen and (min-width:900px) {
.flow-text {
font-size: 1.632rem
}
}
@media only screen and (min-width:930px) {
.flow-text {
font-size: 1.656rem
}
}
@media only screen and (min-width:960px) {
.flow-text {
font-size: 1.68rem
}
}
@media only screen and (max-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
.modal {
background-color: #fafafa;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
overflow-y: auto;
padding: 0;
position: fixed;
right: 0;
width: 55%;
will-change: top,opacity
}
@media only screen and (max-width:992px) {
.modal {
width: 80%
}
}
.modal h1, .modal h2, .modal h3, .modal h4 {
margin-top: 0
}
.modal .modal-content {
padding: 24px
}
.modal .modal-close {
cursor: pointer
}
.modal .modal-footer {
background-color: #fafafa;
border-radius: 0 0 2px 2px;
height: 56px;
padding: 4px 6px;
width: 100%
}
.modal .modal-footer .btn, .modal .modal-footer .btn-flat {
float: right;
margin: 6px 0
}
.lean-overlay {
background: #000;
bottom: 0;
display: none;
height: 125%;
left: 0;
position: fixed;
right: 0;
top: -100px;
width: 100%;
will-change: opacity;
z-index: 999
}
.modal.modal-fixed-footer {
height: 70%;
padding: 0
}
.modal.modal-fixed-footer .modal-content {
height: calc(100% - 56px);
max-height: 100%;
overflow-y: auto;
position: absolute;
width: 100%
}
.modal.modal-fixed-footer .modal-footer {
border-top: 1px solid rgba(0,0,0,.1);
bottom: 0;
position: absolute
}
.modal.bottom-sheet {
border-radius: 0;
bottom: -100%;
margin: 0;
max-height: 45%;
top: auto;
width: 100%;
will-change: bottom,opacity
}
select:focus {
outline: 1px solid #fff
}
button:focus {
background-color: #7c92ae;
outline: none
}
label {
color: #979797;
font-size: 9px
}
::-webkit-input-placeholder {
color: #979797
}
:-moz-placeholder, ::-moz-placeholder {
color: #979797
}
:-ms-input-placeholder {
color: #979797
}
input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
border-radius: 0;
box-shadow: none;
box-sizing: content-box;
font-size: 22px;
height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
transition: all .3s;
width: 100%
}
input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=date]:disabled, input[type=date][readonly=readonly], input[type=datetime-local]:disabled, input[type=datetime-local][readonly=readonly], input[type=datetime]:disabled, input[type=datetime][readonly=readonly], input[type=email]:disabled, input[type=email][readonly=readonly], input[type=number]:disabled, input[type=number][readonly=readonly], input[type=password]:disabled, input[type=password][readonly=readonly], input[type=search]:disabled, input[type=search][readonly=readonly], input[type=tel]:disabled, input[type=tel][readonly=readonly], input[type=text]:disabled, input[type=text][readonly=readonly], input[type=time]:disabled, input[type=time][readonly=readonly], input[type=url]:disabled, input[type=url][readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] {
border-bottom: 1px dotted rgba(0,0,0,.26);
color: rgba(0,0,0,.26)
}
input:not([type]):disabled + label, input:not([type])[readonly=readonly] + label, input[type=date]:disabled + label, input[type=date][readonly=readonly] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly=readonly] + label, input[type=datetime]:disabled + label, input[type=datetime][readonly=readonly] + label, input[type=email]:disabled + label, input[type=email][readonly=readonly] + label, input[type=number]:disabled + label, input[type=number][readonly=readonly] + label, input[type=password]:disabled + label, input[type=password][readonly=readonly] + label, input[type=search]:disabled + label, input[type=search][readonly=readonly] + label, input[type=tel]:disabled + label, input[type=tel][readonly=readonly] + label, input[type=text]:disabled + label, input[type=text][readonly=readonly] + label, input[type=time]:disabled + label, input[type=time][readonly=readonly] + label, input[type=url]:disabled + label, input[type=url][readonly=readonly] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly=readonly] + label {
color: rgba(0,0,0,.26)
}
input:not([type]):focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]):focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=datetime]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
color: #6f87a6
}
input:not([type]).valid, input:not([type]):focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=datetime].valid, input[type=datetime]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=text].valid, input[type=text]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]).valid + label:after, input:not([type]):focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=datetime].valid + label:after, input[type=datetime]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after {
color: #6f87a6;
content: attr(data-success);
opacity: 1
}
input:not([type]).invalid, input:not([type]):focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=datetime].invalid, input[type=datetime]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=text].invalid, input[type=text]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
border-bottom: 1px solid #f44336;
box-shadow: 0 1px 0 0 #f44336
}
input:not([type]).invalid + label:after, input:not([type]):focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=datetime].invalid + label:after, input[type=datetime]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after {
color: #f44336;
content: attr(data-error);
opacity: 1
}
input:not([type]).validate + label, input[type=date].validate + label, input[type=datetime-local].validate + label, input[type=datetime].validate + label, input[type=email].validate + label, input[type=number].validate + label, input[type=password].validate + label, input[type=search].validate + label, input[type=tel].validate + label, input[type=text].validate + label, input[type=time].validate + label, input[type=url].validate + label, textarea.materialize-textarea.validate + label {
pointer-events: none;
width: 100%
}
input:not([type]) + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=datetime] + label:after, input[type=email] + label:after, input[type=number] + label:after, input[type=password] + label:after, input[type=search] + label:after, input[type=tel] + label:after, input[type=text] + label:after, input[type=time] + label:after, input[type=url] + label:after, textarea.materialize-textarea + label:after {
content: "";
display: block;
opacity: 0;
position: absolute;
top: 65px;
transition: opacity .2s ease-out,color .2s ease-out
}
.input-field {
margin-top: 1rem;
position: relative
}
.input-field label {
color: #979797;
cursor: text;
font-size: 1rem;
left: .75rem;
position: absolute;
top: .8rem;
transition: .2s ease-out
}
.input-field label.active {
font-size: 9px;
transform: translateY(-140%)
}
.input-field .prefix {
font-size: 2rem;
position: absolute;
transition: color .2s;
width: 44px
}
.input-field .prefix.active {
color: #6f87a6
}
.input-field .prefix ~ input, .input-field .prefix ~ textarea {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.input-field .prefix ~ textarea {
padding-top: .8rem
}
.input-field .prefix ~ label {
margin-left: 3rem
}
@media only screen and (max-width:992px) {
.input-field .prefix ~ input {
width: 86%;
width: calc(100% - 3rem)
}
}
@media only screen and (max-width:600px) {
.input-field .prefix ~ input {
width: 80%;
width: calc(100% - 3rem)
}
}
.input-field input[type=search] {
display: block;
line-height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem)
}
.input-field input[type=search]:focus {
background-color: #fff;
border: 0;
box-shadow: none;
color: #444
}
.input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .material-icons, .input-field input[type=search]:focus ~ .mdi-navigation-close {
color: #444
}
.input-field input[type=search] + label {
left: 1rem
}
.input-field input[type=search] ~ .material-icons, .input-field input[type=search] ~ .mdi-navigation-close {
color: transparent;
cursor: pointer;
font-size: 2rem;
position: absolute;
right: 1rem;
top: 0;
transition: color .3s
}
textarea {
background-color: transparent;
height: 44px;
width: 100%
}
textarea.materialize-textarea {
min-height: 44px;
overflow-y: hidden;
padding: 1.6rem 0;
resize: none
}
.hiddendiv {
word-wrap: break-word;
display: none;
padding-top: 1.2rem;
white-space: pre-wrap
}
[type=radio]:checked, [type=radio]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=radio]:checked + label, [type=radio]:not(:checked) + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
transition: .28s ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
[type=radio] + label:after, [type=radio] + label:before {
content: "";
height: 16px;
left: 0;
margin: 4px;
position: absolute;
top: 0;
transition: .28s ease;
width: 16px;
z-index: 0
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after, [type=radio]:checked + label:before, [type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border-radius: 50%
}
[type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border: 2px solid #5a5a5a
}
[type=radio]:not(:checked) + label:after {
transform: scale(0);
z-index: -1
}
[type=radio]:checked + label:before {
border: 2px solid transparent
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after {
border: 2px solid #6f87a6
}
[type=radio].with-gap:checked + label:after, [type=radio]:checked + label:after {
background-color: #6f87a6;
z-index: 0
}
[type=radio]:checked + label:after {
transform: scale(1.02)
}
[type=radio].with-gap:checked + label:after {
transform: scale(.5)
}
[type=radio].tabbed:focus + label:before {
box-shadow: 0 0 0 10px rgba(0,0,0,.1)
}
[type=radio].with-gap:disabled:checked + label:before {
border: 2px solid rgba(0,0,0,.26)
}
[type=radio].with-gap:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border: none
}
[type=radio]:disabled:checked + label:before, [type=radio]:disabled:not(:checked) + label:before {
background-color: transparent;
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled + label {
color: rgba(0,0,0,.26)
}
[type=radio]:disabled:not(:checked) + label:before {
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border-color: #bdbdbd
}
form p {
margin-bottom: 10px;
text-align: left
}
form p:last-child {
margin-bottom: 0
}
[type=checkbox]:checked, [type=checkbox]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=checkbox] + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
[type=checkbox] + label:before, [type=checkbox]:not(.filled-in) + label:after {
border: 2px solid #5a5a5a;
border-radius: 1px;
content: "";
height: 18px;
left: 0;
margin-top: 2px;
position: absolute;
top: 0;
transition: .2s;
width: 18px;
z-index: 0
}
[type=checkbox]:not(.filled-in) + label:after {
border: 0;
transform: scale(0)
}
[type=checkbox]:not(:checked):disabled + label:before {
background-color: rgba(0,0,0,.26);
border: none
}
[type=checkbox].tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
transform: scale(1)
}
[type=checkbox]:checked + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-color: transparent #6f87a6 #6f87a6 transparent;
border-style: solid;
border-width: 2px;
height: 22px;
left: -5px;
top: -4px;
transform: rotate(40deg);
transform-origin: 100% 100%;
width: 12px
}
[type=checkbox]:checked:disabled + label:before {
border-bottom: 2px solid rgba(0,0,0,.26);
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox]:indeterminate + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: none;
border-right: 2px solid #6f87a6;
height: 22px;
left: -12px;
top: -11px;
transform: rotate(90deg);
transform-origin: 100% 100%;
width: 10px
}
[type=checkbox]:indeterminate:disabled + label:before {
background-color: transparent;
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox].filled-in + label:after {
border-radius: 2px
}
[type=checkbox].filled-in + label:after, [type=checkbox].filled-in + label:before {
content: "";
left: 0;
position: absolute;
transition: border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;
z-index: 1
}
[type=checkbox].filled-in:not(:checked) + label:before {
border: 3px solid transparent;
height: 0;
left: 6px;
top: 10px;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 0
}
[type=checkbox].filled-in:not(:checked) + label:after {
background-color: transparent;
border: 2px solid #5a5a5a;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in:checked + label:before {
border-color: transparent #fff #fff transparent;
border-style: solid;
border-width: 2px;
height: 13px;
left: 1px;
top: 0;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 8px
}
[type=checkbox].filled-in:checked + label:after {
background-color: #6f87a6;
border: 2px solid #6f87a6;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in.tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border-color: #5a5a5a;
border-radius: 2px
}
[type=checkbox].filled-in.tabbed:checked:focus + label:after {
background-color: #6f87a6;
border-color: #6f87a6;
border-radius: 2px
}
[type=checkbox].filled-in:disabled:not(:checked) + label:before {
background-color: transparent;
border: 2px solid transparent
}
[type=checkbox].filled-in:disabled:not(:checked) + label:after {
background-color: #bdbdbd;
border-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:before {
background-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:after {
background-color: #bdbdbd;
border-color: #bdbdbd
}
.switch, .switch * {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
.switch label {
cursor: pointer
}
.switch label input[type=checkbox] {
height: 0;
opacity: 0;
width: 0
}
.switch label input[type=checkbox]:checked + .lever {
background-color: #cacaca
}
.switch label input[type=checkbox]:checked + .lever:after {
background-color: #6f87a6;
left: 24px
}
.switch label .lever {
background-color: #818181;
border-radius: 15px;
content: "";
display: inline-block;
height: 15px;
margin: 0 16px;
position: relative;
transition: background .3s ease;
vertical-align: middle;
width: 40px
}
.switch label .lever:after {
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
content: "";
display: inline-block;
height: 21px;
left: -5px;
position: absolute;
top: -3px;
transition: left .3s ease,background .3s ease,box-shadow .1s ease;
width: 21px
}
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(111,135,166,.1)
}
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(0,0,0,.08)
}
.switch input[type=checkbox][disabled] + .lever {
cursor: default
}
.switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: #bdbdbd
}
select {
display: none
}
select.browser-default {
display: block
}
select {
background-color: rgba(255,255,255,.9);
border: 1px solid #f2f2f2;
border-radius: 2px;
height: 44px;
padding: 5px;
width: 100%
}
.select-label {
position: absolute
}
.select-wrapper {
position: relative
}
.select-wrapper input.select-dropdown {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
cursor: pointer;
display: block;
font-size: 22px;
height: 44px;
line-height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
position: relative;
width: 100%
}
.select-wrapper span.caret {
color: #000;
color: initial;
font-size: 10px;
position: absolute;
right: 0;
top: 16px
}
.select-wrapper span.caret.disabled {
color: rgba(0,0,0,.26)
}
.select-wrapper + label {
font-size: 9px;
position: absolute;
top: -14px
}
select:disabled {
color: rgba(0,0,0,.3)
}
.select-wrapper input.select-dropdown:disabled {
border-bottom: 1px solid rgba(0,0,0,.3);
color: rgba(0,0,0,.3);
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.select-wrapper i {
color: rgba(0,0,0,.3)
}
.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {
background-color: transparent;
color: rgba(0,0,0,.3)
}
.prefix ~ .select-wrapper {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.prefix ~ label {
margin-left: 3rem
}
.select-dropdown li img {
float: right;
height: 40px;
margin: 5px 15px;
width: 40px
}
.select-dropdown li.optgroup {
border-top: 1px solid #eee
}
.select-dropdown li.optgroup.selected > span {
color: rgba(0,0,0,.7)
}
.select-dropdown li.optgroup > span {
color: rgba(0,0,0,.4)
}
.select-dropdown li.optgroup ~ li.optgroup-option {
padding-left: 1rem
}
.file-field {
position: relative
}
.file-field .file-path-wrapper {
overflow: hidden;
padding-left: 10px
}
.file-field input.file-path {
width: 100%
}
.file-field .btn {
float: left;
height: 44px;
line-height: 44px
}
.file-field span {
cursor: pointer
}
.file-field input[type=file] {
bottom: 0;
cursor: pointer;
filter: alpha(opacity=0);
font-size: 20px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
.range-field {
position: relative
}
input[type=range], input[type=range] + .thumb {
cursor: pointer
}
input[type=range] {
background-color: transparent;
border: none;
margin: 15px 0;
outline: none;
padding: 0;
position: relative;
width: 100%
}
input[type=range]:focus {
outline: none
}
input[type=range] + .thumb {
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 0;
margin-left: -6px;
position: absolute;
top: 10px;
transform: rotate(-45deg);
transform-origin: 50% 50%;
width: 0
}
input[type=range] + .thumb .value {
color: #6f87a6;
display: block;
font-size: 0;
text-align: center;
transform: rotate(45deg);
width: 30px
}
input[type=range] + .thumb.active {
border-radius: 50% 50% 50% 0
}
input[type=range] + .thumb.active .value {
color: #fff;
font-size: 10px;
margin-left: -1px;
margin-top: 8px
}
input[type=range] {
-webkit-appearance: none
}
input[type=range]::-webkit-slider-runnable-track {
background: #c2c0c2;
border: none;
height: 3px
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin: -5px 0 0;
transform-origin: 50% 50%;
-webkit-transition: .3s;
transition: .3s;
width: 14px
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc
}
input[type=range] {
border: 1px solid #fff
}
input[type=range]::-moz-range-track {
background: #ddd;
border: none;
height: 3px
}
input[type=range]::-moz-range-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin-top: -5px;
width: 14px
}
input[type=range]:-moz-focusring {
outline: 1px solid #fff;
outline-offset: -1px
}
input[type=range]:focus::-moz-range-track {
background: #ccc
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
height: 3px
}
input[type=range]::-ms-fill-lower {
background: #777
}
input[type=range]::-ms-fill-upper {
background: #ddd
}
input[type=range]::-ms-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
width: 14px
}
input[type=range]:focus::-ms-fill-lower {
background: #888
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc
}
#modal-lightbox .modal-content .email:before, .icon-category:before, .icon-checkmark:before, .icon-collapse:before, .icon-configurator-back:before, .icon-configurator-cancel:before, .icon-configurator-checkmark-thin:before, .icon-configurator-checkmark:before, .icon-configurator-close:before, .icon-configurator-next:before, .icon-configurator-rotate:before, .icon-connectivity:before, .icon-dotted-arrow-right:before, .icon-down-arrow:before, .icon-driver-experience:before, .icon-edit:before, .icon-envelope:before, .icon-expand:before, .icon-facebook-filled:before, .icon-facebook:before, .icon-fuel-efficiency:before, .icon-geo:before, .icon-header-search:before, .icon-information:before, .icon-instagram:before, .icon-left-arrow:before, .icon-location:before, .icon-map-pin:before, .icon-minus-icon:before, .icon-pdf-icon:before, .icon-phone:before, .icon-play2:before, .icon-play3:before, .icon-play-icon:before, .icon-plus-icon:before, .icon-plus:before, .icon-productivity:before, .icon-quality:before, .icon-revealleft:before, .icon-revealright:before, .icon-right-arrow-with-background:before, .icon-right-arrow:before, .icon-route:before, .icon-safety:before, .icon-shock:before, .icon-tag:before, .icon-target:before, .icon-time:before, .icon-tools:before, .icon-twitter:before, icon-icon-linkedin:before, .icon-upfit:before, .icon-uptime:before, .icon-user:before, .icon-youtube:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, [resources-page] form:before, a[type=VID]:before, ms-pillars ms-pillar[pillar="Driver Experience"] inner-content > div:before, ms-pillars ms-pillar[pillar="Fuel Efficiency"] inner-content > div:before, ms-pillars ms-pillar[pillar=Connectivity] inner-content > div:before, ms-pillars ms-pillar[pillar=Productivity] inner-content > div:before, ms-pillars ms-pillar[pillar=Quality] inner-content > div:before, ms-pillars ms-pillar[pillar=Safety] inner-content > div:before, ms-pillars ms-pillar[pillar=Upfit] inner-content > div:before, ms-pillars ms-pillar[pillar=Uptime] inner-content > div:before, ms-pull[piller-nav] > * span[pillar="Driver Experience"]:before, ms-pull[piller-nav] > * span[pillar="Fuel Efficiency"]:before, ms-pull[piller-nav] > * span[pillar=Connectivity]:before, ms-pull[piller-nav] > * span[pillar=Productivity]:before, ms-pull[piller-nav] > * span[pillar=Quality]:before, ms-pull[piller-nav] > * span[pillar=Safety]:before, ms-pull[piller-nav] > * span[pillar=Testimonials]:before, ms-pull[piller-nav] > * span[pillar=Upfit]:before, ms-pull[piller-nav] > * span[pillar=Uptime]:before, ms-reveal > article:first-child label:not([active]):before, ms-reveal > article:first-child label[active]:after, ms-reveal > article:not(:first-child) label:not([active]):after, ms-reveal > article:not(:first-child) label[active]:before {
speak: none;
font-feature-settings: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: icomoon !important;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none
}
@font-face {
font-family: icomoon;
font-style: normal;
font-weight: 400;
src: url(https://freightliner.azureedge.net/images/icon-font/icomoon.eot?) format("eot"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.ttf) format("truetype"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.woff) format("woff"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.svg#icomoon) format("svg")
}
.icon-category:before {
content: "a"
}
.icon-checkmark:before {
content: "b"
}
.icon-down-arrow:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
content: "d"
}
.icon-information:before {
content: "i"
}
.icon-instagram:before {
content: "j"
}
.icon-left-arrow:before {
content: "k"
}
.icon-map-pin:before {
content: "l"
}
.icon-minus-icon:before {
content: "m"
}
.icon-pdf-icon:before {
content: "n"
}
.icon-play-icon:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before {
content: "p"
}
.icon-plus-icon:before, ms-reveal > article:first-child label:not([active]):before, ms-reveal > article:not(:first-child) label:not([active]):after {
content: "q"
}
.icon-productivity:before, ms-pillars ms-pillar[pillar=Productivity] inner-content > div:before, ms-pull[piller-nav] > * span[pillar=Productivity]:before {
content: "r"
}
.icon-quality:before, ms-pillars ms-pillar[pillar=Quality] inner-content > div:before, ms-pull[piller-nav] > * span[pillar=Quality]:before {
content: "s"
}
.icon-right-arrow:before {
content: "t"
}
.icon-right-arrow-with-background:before {
content: "u"
}
.icon-route:before {
content: "v"
}
.icon-target:before {
content: "x"
}
.icon-time:before {
content: "y"
}
.icon-uptime:before, ms-pillars ms-pillar[pillar=Uptime] inner-content > div:before, ms-pull[piller-nav] > * span[pillar=Uptime]:before {
content: "B"
}
.icon-user:before, ms-pull[piller-nav] > * span[pillar=Testimonials]:before {
content: "C"
}
.icon-youtube:before {
content: "D"
}
.icon-safety:before, ms-pillars ms-pillar[pillar=Safety] inner-content > div:before, ms-pull[piller-nav] > * span[pillar=Safety]:before {
content: "E"
}
.icon-upfit:before, ms-pillars ms-pillar[pillar=Upfit] inner-content > div:before, ms-pull[piller-nav] > * span[pillar=Upfit]:before {
content: "A"
}
.icon-fuel-efficiency:before, ms-pillars ms-pillar[pillar="Fuel Efficiency"] inner-content > div:before, ms-pull[piller-nav] > * span[pillar="Fuel Efficiency"]:before {
content: "g"
}
.icon-facebook:before {
content: "e"
}
.icon-header-search:before, [resources-page] form:before {
content: "f"
}
.icon-driver-experience:before, ms-pillars ms-pillar[pillar="Driver Experience"] inner-content > div:before, ms-pull[piller-nav] > * span[pillar="Driver Experience"]:before {
content: "h"
}
.icon-twitter:before {
content: "z"
}
.icon-icon-linkedin:before {
content: "\e900";
font-family: "icomoon" !important;
font-style: normal;
}
.icon-phone:before {
content: "F"
}
.icon-connectivity:before, ms-pillars ms-pillar[pillar=Connectivity] inner-content > div:before, ms-pull[piller-nav] > * span[pillar=Connectivity]:before {
content: "c"
}
.icon-plus:before {
content: "o"
}
.icon-revealleft:before, ms-reveal > article:not(:first-child) label[active]:before {
content: "w"
}
.icon-revealright:before, ms-reveal > article:first-child label[active]:after {
content: "G"
}
.icon-play2:before, a[type=VID]:before {
content: "H"
}
.icon-configurator-back:before {
content: "I"
}
.icon-configurator-cancel:before {
content: "J"
}
.icon-configurator-checkmark:before {
content: "K"
}
.icon-configurator-next:before {
content: "L"
}
.icon-configurator-rotate:before {
content: "M"
}
.icon-configurator-close:before {
content: "N"
}
.icon-configurator-checkmark-thin:before {
content: "O"
}
.icon-edit:before {
content: "P"
}
.icon-location:before {
content: "Q"
}
.icon-geo:before {
content: "R"
}
.icon-facebook-filled:before {
content: "S"
}
.icon-collapse:before {
content: "T"
}
.icon-expand:before {
content: "U"
}
.icon-dotted-arrow-right:before {
content: "V"
}
.icon-tag:before {
content: "W"
}
.icon-shock:before {
content: "X"
}
.icon-tools:before {
content: "Y"
}
#modal-lightbox .modal-content .email:before, .icon-envelope:before {
content: "Z"
}
.icon-play3:before {
content: "0"
}
body, html {
min-height: 100%
}
html {
scroll-behavior: smooth
}
.gsc-control-cse {
box-sizing: content-box
}
.gsc-control-cse *, .gsc-control-cse :after, .gsc-control-cse :before {
box-sizing: inherit;
line-height: normal
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .015em;
max-width: 100%;
overflow-x: hidden
}
body > img {
width: 100%
}
body > footer {
border-top: 1px solid #d7d7d7;
padding: 5.8565153734vw 0
}
body > footer inner-content:first-child {
margin: 0 auto;
max-width: 1188px;
width: 90%
}
@media(min-width:768px) {
body > footer inner-content:first-child {
display: flex
}
body > footer inner-content:first-child > * {
flex: 1;
padding: 0 3.6603221083vw
}
body > footer inner-content:first-child > :not(:first-child) {
border-left: 1px solid #f7f7f7
}
}
@media(min-width:768px)and (min-width:1320px) {
body > footer inner-content:first-child > * {
padding: 0 50px
}
}
@media(max-width:767px) {
body > footer inner-content:first-child > * {
border-bottom: 1px solid #d7d7d7;
display: block;
padding: 5.2% 40px
}
}
body > footer inner-content:first-child > .branding {
text-align: center
}
body > footer inner-content:first-child > .branding > a {
display: block;
margin-bottom: 20px
}
@media(min-width:768px) {
body > footer inner-content:first-child > .branding {
padding-left: 0;
text-align: left
}
body > footer inner-content:first-child > .branding > a {
margin-bottom: 30px;
max-width: 148px
}
}
body > footer inner-content:first-child > .branding p {
color: #585858;
font-family: industry,sans-serif;
font-size: 12px;
letter-spacing: .15em;
margin: 1em 0
}
body > footer inner-content:first-child > .branding .social a {
background: #808181;
background-size: 100% 0;
border-radius: 100%;
color: #fff;
display: inline-block;
height: 28px;
line-height: 28px;
margin: 3px;
text-align: center;
text-shadow: none;
transition: all .25s ease-in-out;
width: 28px
}
html:not(.touch) body > footer inner-content:first-child > .branding .social a:hover {
background: #713738;
color: #fff !important;
text-decoration: none
}
@media(max-width:767px) {
body > footer inner-content:first-child > .branding .social a {
height: 40px;
line-height: 40px;
width: 40px
}
}
body > footer inner-content:first-child > :not(.branding) a {
color: #484848;
display: block;
font-family: industry,sans-serif;
font-size: 12px
}
body > footer inner-content:last-child {
margin: 0 auto;
max-width: 1188px;
padding: 5% 0;
width: 90%
}
@media(min-width:768px) {
body > footer inner-content:last-child {
display: flex
}
}
body > footer inner-content:last-child > div {
flex-grow: 1
}
body > footer inner-content:last-child > div.branding {
flex-grow: 0
}
@media(min-width:768px) {
body > footer inner-content:last-child > div.branding {
width: 40%
}
body > footer inner-content:last-child > div.branding > div {
display: flex
}
}
body > footer inner-content:last-child > div.branding > div a {
flex: 1;
max-width: 144px
}
body > footer inner-content:last-child > div.branding > div span {
display: block;
flex: 1;
font-size: 12px
}
@media(min-width:768px) {
body > footer inner-content:last-child > div.branding > div span {
border-left: 1px solid #f7f7f7;
margin: 0 10px;
padding: 5px 10px
}
}
@media(max-width:767px) {
body > footer inner-content:last-child > div.branding > div span {
margin-bottom: 20px;
margin-top: 20px
}
}
body > footer inner-content:last-child > div p {
color: #3b3b3b;
font-size: 12px;
font-weight: 100;
margin: 0
}
iframe, img {
max-width: 100%
}
strong {
font-weight: 600
}
a, label {
cursor: pointer
}
a:focus, a:hover {
text-decoration: none
}
html:not(.touch) a:not(.btn):not([role=button]):not(.btn-default):not(.btn-primary):hover {
color: #713738
}
[clickable] {
cursor: pointer
}
.heading-1, .heading-2, h1, h2, sudo-h1, sudo-h2 {
font-weight: 100;
letter-spacing: .015em
}
.heading-5, .heading-6, h5, h6, sudo-h5, sudo-h6 {
color: #6f87a6;
letter-spacing: .15em
}
[class*=btn] {
font-family: industry,sans-serif;
transition: all .5s ease
}
[class*=btn]:focus, [class*=btn]:hover {
text-decoration: none
}
:not(td) > .btn, :not(td) > a[role=button], :not(td) > button, :not(td) > input[type=button], :not(td) > input[type=submit] {
background-color: #6f87a6;
border: 0;
color: #fff;
font-family: industry,sans-serif;
font-size: 18px;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
padding: 11px 30px;
transition: all .5s ease;
white-space: normal
}
:not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
:not(td) > .btn.toggle.on, :not(td) > a[role=button].toggle.on, :not(td) > button.toggle.on, :not(td) > input[type=button].toggle.on, :not(td) > input[type=submit].toggle.on {
background: #6f87a6
}
html:not(.touch) :not(td) > .btn.toggle.on:hover, html:not(.touch) :not(td) > a[role=button].toggle.on:hover, html:not(.touch) :not(td) > button.toggle.on:hover, html:not(.touch) :not(td) > input[type=button].toggle.on:hover, html:not(.touch) :not(td) > input[type=submit].toggle.on:hover {
background: #7f94b0
}
:not(td) > .btn.toggle:not(.on), :not(td) > a[role=button].toggle:not(.on), :not(td) > button.toggle:not(.on), :not(td) > input[type=button].toggle:not(.on), :not(td) > input[type=submit].toggle:not(.on) {
background: #484848
}
html:not(.touch) :not(td) > .btn.toggle:not(.on):hover, html:not(.touch) :not(td) > a[role=button].toggle:not(.on):hover, html:not(.touch) :not(td) > button.toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=button].toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=submit].toggle:not(.on):hover {
background: #555
}
:not(td) > .btn:focus, :not(td) > a[role=button]:focus, :not(td) > button:focus, :not(td) > input[type=button]:focus, :not(td) > input[type=submit]:focus, html:not(.touch) :not(td) > .btn:hover, html:not(.touch) :not(td) > a[role=button]:hover, html:not(.touch) :not(td) > button:hover, html:not(.touch) :not(td) > input[type=button]:hover, html:not(.touch) :not(td) > input[type=submit]:hover {
background-color: #713738
}
:not(td) > .btn[disabled], :not(td) > a[role=button][disabled], :not(td) > button[disabled], :not(td) > input[type=button][disabled], :not(td) > input[type=submit][disabled] {
cursor: not-allowed;
opacity: .5
}
.note {
display: block;
font-size: .8em
}
input.select, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #efefef url(../png/select-drop-arrow.png) no-repeat 100% !important;
border: none;
border-radius: 0;
box-shadow: 0 1px 0 #aaa;
display: inline-block;
padding: 5px 10px
}
input.select::-ms-expand, select::-ms-expand {
display: none
}
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important
}
input[type=email], input[type=number], input[type=tel], input[type=text], textarea {
background: #efefef;
border: solid #aaa;
border-width: 0 0 1px;
box-sizing: border-box;
display: block;
font-size: 18px;
padding: 5px 10px
}
input[type=email]:not(textarea), input[type=number]:not(textarea), input[type=tel]:not(textarea), input[type=text]:not(textarea), textarea:not(textarea) {
height: 43px
}
textarea {
height: auto
}
body form:not(.gsc-search-box) .input-field label {
font-size: 18px;
left: 10px;
top: 5px
}
.disclaimer {
font-size: .8em;
padding: 10px 0;
text-align: left
}
.disclaimer + .disclaimer {
padding-top: 0
}
.modal {
overflow-y: hidden !important;
will-change: auto
}
.material-tooltip {
font-size: 15px
}
.form-error {
color: red
}
hr {
background: #3b3b3b;
border: 0;
height: 38px;
width: 1px
}
.nav-fixed body {
padding-top: 80px
}
body > nav:not([breadcrumbs]) {
background: #fff;
display: flex;
left: 0;
position: relative;
top: 0;
transition: all .4s;
width: 100%;
z-index: 12
}
.nav-fixed body > nav:not([breadcrumbs]) {
background: #fff;
border-bottom: 1px solid #e5e7e9;
position: fixed
}
body > nav:not([breadcrumbs]) > * {
flex: 1 30%
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * {
display: flex;
margin: 0
}
body > nav:not([breadcrumbs]) > * > * {
flex: 1
}
}
body > nav:not([breadcrumbs]) > * > a {
color: #000;
display: inline-block;
font-family: industry,sans-serif;
font-size: 14px;
font-weight: 600;
height: 80px;
letter-spacing: .75px;
line-height: 80px;
overflow: hidden;
padding: 0 2.7818448023vw;
text-transform: uppercase;
transition: all .25s;
vertical-align: top
}
.nav-fixed body > nav:not([breadcrumbs]) > * > a {
height: 35px;
line-height: 35px;
padding: 0 1.217057101vw
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * > a {
font-size: 10px;
padding: 0 4px
}
}
body > nav:not([breadcrumbs]) .left {
padding-left: 1.4641288433vw
}
body > nav:not([breadcrumbs]) .right {
padding-right: 1.4641288433vw;
text-align: right
}
@media(min-width:900px) {
body > nav:not([breadcrumbs]) .right {
position: relative
}
}
@media(max-width:767px) {
body > nav:not([breadcrumbs]) .right {
padding-right: 0
}
body > nav:not([breadcrumbs]) .right > a:last-of-type {
flex: .5;
font-size: 14px;
width: 30%
}
}
body > nav:not([breadcrumbs]) .right > div {
background: #6f87a6;
display: flex;
height: 80px;
position: absolute;
right: 0;
top: 0;
transition: all .25s;
width: 0
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div {
height: 35px
}
body > nav:not([breadcrumbs]) .right > div button.close {
background: #6f87a6;
border-right: 1px solid rgba(255,255,255,.25);
flex-grow: 0;
transition: background-color .5s;
width: 80px
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div button.close {
width: 80px
}
html:not(.touch) body > nav:not([breadcrumbs]) .right > div button.close:hover {
background-color: #43556c
}
body > nav:not([breadcrumbs]) .right > div button.close i {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px
}
body > nav:not([breadcrumbs]) .right > div > form {
flex-grow: 1;
padding: 0 10px;
position: relative
}
body > nav:not([breadcrumbs]) .right > div > form input {
background: transparent !important;
border: 0;
border-bottom: 0 !important;
box-shadow: none !important;
color: #fff;
display: block;
font-size: 24px;
height: 100%;
height: 80px !important;
line-height: 80px;
margin: 0 !important;
padding: 0 !important
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div > form input {
line-height: 35px
}
body > nav:not([breadcrumbs]) .right > div > form input::-moz-placeholder {
color: #b7c3d3;
opacity: 1
}
body > nav:not([breadcrumbs]) .right > div > form input:-ms-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form input::-webkit-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form ul {
background: #6f87a6;
color: #fff;
list-style: none unset;
position: absolute;
right: 0;
top: 100%;
width: 100%
}
body > nav:not([breadcrumbs]) .right > div > form ul li {
display: block;
padding: 5px 10px;
text-align: left;
text-transform: uppercase
}
body > nav:not([breadcrumbs]) .right > div form {
height: 100%;
margin: 0
}
body > nav:not([breadcrumbs]) .right > div td {
display: block;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
body > nav:not([breadcrumbs]) .right > div table {
margin: 0;
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div {
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div {
height: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div * {
height: inherit
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) .right .search {
flex-basis: 30%;
flex-grow: 0;
max-width: 56px;
padding-right: calc(1.46413vw + 4px)
}
}
.nav-fixed body > nav:not([breadcrumbs]) .right .search, body > nav:not([breadcrumbs]) .right .scrolltop {
display: none
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop {
background-color: #6f87a6;
color: #fff !important;
display: inline-block;
text-align: center;
transition: all .5s ease
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
display: block;
margin-top: 8px;
transform: rotate(180deg)
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:focus, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:hover {
text-decoration: none !important
}
body > nav:not([breadcrumbs]) .right .scrolltop:focus, html:not(.touch) body > nav:not([breadcrumbs]) .right .scrolltop:hover {
background-color: #713738;
color: #fff !important
}
body > nav:not([breadcrumbs]) .center {
min-width: 130px;
text-align: center
}
body > nav:not([breadcrumbs]) .center a {
padding: 0
}
body > nav:not([breadcrumbs]) .center img {
width: 180px
}
.nav-fixed body > nav:not([breadcrumbs]) .center img {
width: 78px
}
nav[breadcrumbs] {
background: rgba(0,0,0,.77);
left: 0;
line-height: 36px;
padding: 0 4.2459736457vw;
top: 0;
width: 100%;
z-index: 1
}
nav[breadcrumbs] > * {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
margin-right: .5em;
transition: opacity .25s
}
nav[breadcrumbs] > :not(:last-child):after {
content: "/";
display: inline-block;
margin-left: .5em
}
nav[breadcrumbs] > a {
opacity: .5
}
html:not(.touch) nav[breadcrumbs] > a:hover {
color: #fff !important;
opacity: 1
}
nav[pagination] {
text-align: center
}
nav[pagination] a {
cursor: pointer;
display: inline-block;
padding: 10px 20px
}
html:not(.touch) nav[pagination] a.active:hover, nav[pagination] a.active {
background: #6f87a6;
color: #fff !important;
cursor: default
}
html:not(.touch) nav[pagination] a:hover {
background: #ebebeb;
text-decoration: none
}
nav[with-subtitle] > a {
align-items: center;
background-color: #6f87a6
}
html:not(.touch) nav[with-subtitle] > a:hover {
background: #713738
}
nav[with-subtitle] > a > span {
color: #fff !important;
z-index: 2
}
nav[with-subtitle] > a span.dir {
flex: 0 0 auto
}
nav[with-subtitle] > a span.dir:after, nav[with-subtitle] > a span.dir:before {
color: #000 !important
}
nav[with-subtitle] > a span.label {
flex: 2 0 auto;
font-size: 37px;
text-align: center
}
@media(min-width:768px)and (max-width:1200px) {
nav[with-subtitle] > a span.label {
font-size: 25px
}
}
@media(max-width:767px) {
nav[with-subtitle] > a span.label {
font-size: 20px
}
}
html:not(.touch) nav[with-subtitle] > a:hover:before {
transform: scaleY(1.1)
}
html:not(.touch) nav[with-subtitle] > a:hover span.dir:after, html:not(.touch) nav[with-subtitle] > a:hover span.dir:before {
color: #000 !important
}
comp-background, part-background {
background: #707070 no-repeat top;
background-size: cover;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
@media(max-width:767px) {
comp-background > span, part-background > span {
display: block
}
}
comp-background iframe, part-background iframe {
border: none;
left: 50%;
max-width: none;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 0
}
comp-background > .overlay, part-background > .overlay {
background: transparent;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
comp-background video, part-background video {
min-height: 100%;
min-width: 100%
}
@media(max-width:767px) {
comp-background video, part-background video {
display: none
}
}
comp-resources:not([vocation]) > .group {
border-bottom: 1px solid #f9fbfe;
padding: 4.39238653vw 20px
}
comp-resources:not([vocation]) > .group:nth-of-type(odd) {
background: #f9fbfe
}
comp-resources:not([vocation]) > .group > .group-inner {
margin: 0 auto;
max-width: 915px
}
@media(max-width:767px) {
comp-resources[vocation] {
padding: 0 20px
}
}
comp-resources[vocation] h2:after {
left: 0;
right: 0
}
comp-resources h2 {
font-size: 30px;
font-weight: 100;
margin: 0 0 1em
}
@media(max-width:1000px) {
comp-resources a {
width: 45%
}
}
@media(max-width:620px) {
comp-resources a {
width: 45%
}
}
@media(max-width:450px) {
comp-resources a {
margin-right: 0 !important;
width: calc(100% - 20px)
}
}
comp-resources a .thumb {
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 5.8565153734vw
}
@media(max-width:767px) {
comp-resources a .thumb {
width: 80px
}
}
comp-resources a .label {
display: block;
margin-left: 6.588579795vw
}
@media(max-width:767px) {
comp-resources a .label {
font-size: 16px;
margin-left: 90px
}
}
comp-resources a:after {
clear: both;
content: "";
display: table
}
comp-resources a:focus, comp-resources a:hover {
text-decoration: none
}
html:not(.touch) comp-resources a:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
transform: scale(1.1);
z-index: 2
}
[resources-page] form {
margin: 60px auto 30px;
position: relative
}
[resources-page] form:before {
font-size: 22px;
left: 0;
position: absolute;
top: 11px
}
[resources-page] form input {
box-sizing: border-box;
padding-left: 30px
}
[resources-page] nav[breadcrumbs] {
background: transparent;
margin: 30px auto;
padding: 0
}
[resources-page] nav[breadcrumbs] a {
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 18px;
opacity: 1
}
html:not(.touch) [resources-page] nav[breadcrumbs] a:hover {
color: #713738 !important
}
[resources-page] nav[breadcrumbs] span {
display: none
}
[resources-page] comp-resources > .group {
background: transparent;
border-top: 1px solid #d7d7d7;
padding: 48px 0
}
[resources-page] comp-resources > .group > .group-inner {
max-width: none
}
[resources-page] .children {
margin: 20px -10px
}
[resources-page] .children a {
margin: 10px
}
#modal-lightbox {
background: transparent
}
#modal-lightbox .modal-content {
padding: 0;
position: relative
}
#modal-lightbox .modal-content .close {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
height: 68px;
position: absolute;
right: 0;
top: 0;
width: 68px
}
#modal-lightbox .modal-content [actions] {
background: #777;
height: 36px;
left: 0;
padding-right: 16px;
position: absolute;
top: 0;
z-index: 1
}
#modal-lightbox .modal-content [actions] > a {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
font-size: 9px;
height: 36px;
line-height: 36px;
text-transform: uppercase
}
#modal-lightbox .modal-content .download {
background: transparent url(../png/download-icon.png) no-repeat 10px;
background-size: 20px;
padding-left: 46px
}
#modal-lightbox .modal-content .email {
margin-left: 20px
}
#modal-lightbox .modal-content .email:before {
display: inline-block;
font-size: 20px;
margin: 0 10px;
vertical-align: middle
}
#modal-lightbox .modal-content img {
width: 100%
}
#modal-lightbox .modal-content .vid-holder {
padding-bottom: 56.25%;
position: relative
}
#modal-lightbox .modal-content .vid-holder > div {
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#modal-lightbox .modal-content .vid-holder .jwplayer {
height: 100% !important;
width: 100% !important
}
#modal-lightbox iframe[name=mailto-target] {
height: 1px;
left: -1px;
opacity: 0;
position: absolute;
top: -1px;
width: 1px
}
ms-hero {
min-height: 49.85vw;
text-align: center
}
ms-hero > :not(part-background) {
margin-left: auto;
margin-right: auto;
max-width: 565px
}
@media(min-width:768px) {
ms-hero > :not(part-background) {
color: #fff
}
}
ms-hero h1 {
font-size: 48px;
font-weight: 500
}
@media(min-width:768px) {
ms-hero h1 {
color: #fff
}
}
ms-hero [append-sup]:after {
content: attr(append-sup);
display: inline-block;
font-size: .5em;
vertical-align: top
}
ms-hero p {
font-size: 18px
}
ms-hero > hr {
background: #fff
}
ms-hero[sub] {
min-height: 48vw;
padding: 0 20px
}
ms-hero[sub] > part-background {
background-position: bottom;
position: absolute
}
ms-hero[sub] > div {
margin-top: 12.5vw;
max-width: 1048px;
text-align: left
}
ms-hero[sub] > div > * {
max-width: 460px
}
ms-hero[sub] > div > a {
display: inline-block;
margin-top: 10px
}
ms-hero[sub] h1 {
font-size: 36px
}
@media(max-width:767px) {
ms-hero[sub] + ms-pull {
display: none
}
}
@media(min-width:768px) {
ms-hero[sub] + ms-pull.nav-fixed > * {
position: fixed;
top: 136px
}
}
ms-hero[home] > part-background, ms-hero[testimonial] > part-background {
position: absolute
}
ms-hero[home] > div {
margin-top: 12.5vw
}
@media(max-width:767px) {
ms-hero, ms-hero[home], ms-hero[sub] {
min-height: 0;
padding: 0
}
ms-hero > div, ms-hero[home] > div, ms-hero[sub] > div {
margin-top: 0;
padding: 20px
}
ms-hero > div > a, ms-hero[home] > div > a, ms-hero[sub] > div > a {
display: block;
text-align: center
}
ms-hero > part-background, ms-hero[home] > part-background, ms-hero[sub] > part-background {
display: block;
padding-bottom: 48%;
position: static
}
ms-hero[home] h1, ms-hero[sub] h1, ms-hero h1 {
font-size: 30px;
margin-top: 0
}
ms-hero[home] hr, ms-hero[sub] hr, ms-hero hr {
display: none
}
}
ms-pull {
position: relative
}
ms-pull > * {
background: #617074;
color: #fff;
display: block;
overflow: visible;
text-align: center
}
@media(min-width:768px) {
ms-pull > * {
left: 40px;
padding: 0 10px;
position: absolute;
right: 40px;
top: 0;
transform: translateY(-50%);
z-index: 10
}
}
@media(max-width:767px) {
ms-pull > * {
padding: 10px
}
}
ms-pull > * > p {
font-size: 18px;
font-weight: 500;
margin: 10px auto 15px;
max-width: 420px
}
ms-pull > * > a[role=button], ms-pull > * > button {
display: inline-block;
font-size: 70px;
padding: 0
}
@media(min-width:768px) {
ms-pull > * > a[role=button], ms-pull > * > button {
margin-top: -35px
}
}
ms-pull > * > a[role=button] + p, ms-pull > * > button + p {
margin-top: 0
}
ms-pull[piller-nav] > * {
box-shadow: 0 4px 21px 0 rgba(0,0,0,.35);
display: flex;
padding: 0
}
ms-pull[piller-nav] > * > * {
flex: 1
}
ms-pull[piller-nav] > * a {
align-items: center;
background: #5387e6;
color: #fff !important;
display: flex;
justify-content: center;
margin-top: 0;
order: 10;
padding: 18px
}
ms-pull[piller-nav] > * a, ms-pull[piller-nav] > * span {
border-radius: 0;
font-family: industry,sans-serif;
font-size: 18px;
text-align: center;
transition: all .25s
}
ms-pull[piller-nav] > * span {
background: #fff !important;
color: #3b3b3b;
cursor: pointer;
display: block;
line-height: 1.4;
padding: 70px 6px 18px;
position: relative
}
ms-pull[piller-nav] > * span:not(:last-of-type):after {
border-left: 1px solid #ebebeb;
bottom: 22px;
content: "";
position: absolute;
right: 0;
top: 22px
}
ms-pull[piller-nav] > * span:before {
color: #050708;
display: block;
font-size: 36px;
left: 50%;
position: absolute;
top: 18px;
transform: translateX(-50%)
}
ms-pull[piller-nav].nav-fixed > * a {
font-size: 16px;
padding-bottom: 10px;
padding-top: 10px
}
ms-pull[piller-nav].nav-fixed > * span {
font-size: 16px;
padding-bottom: 10px;
padding-top: 44px
}
ms-pull[piller-nav].nav-fixed > * span:not(:last-of-type):after {
bottom: 10px;
top: 10px
}
ms-pull[piller-nav].nav-fixed > * span:before {
font-size: 24px;
top: 10px
}
@media(min-width:768px) {
body > article, ms-pillar[type=cards] {
padding-top: 60px
}
}
body > [testimonial] ~ article {
padding-left: 20px;
padding-right: 20px
}
body > [testimonial] ~ article > * {
margin-left: auto;
margin-right: auto;
max-width: 1090px
}
body > [testimonial] ~ article h1 {
margin-top: 50px;
text-transform: uppercase
}
body > [testimonial] ~ article ms-details {
margin-bottom: 20px
}
body > [testimonial] ~ article ms-details > * {
/* color: #6f87a6;*/
display: inline-block;
font-size: 18px;
margin: 6px 15px 6px 0
}
body > [testimonial] ~ article ms-details > :before {
color: #000;
content: attr(type) ":";
display: inline-block;
font-family: industry,sans-serif;
margin-right: 12px
}
body > [testimonial] ~ article ms-details > [type=Website] {
display: block
}
body > [testimonial] ~ article ms-columns {
font-size: 18px;
padding-bottom: 100px
}
@media(min-width:768px) {
body > [testimonial] ~ article ms-columns {
grid-column-gap: 50px;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 50px;
column-gap: 50px
}
}
body > [testimonial] ~ article ms-columns p {
line-height: 1.84
}
@media(min-width:768px) {
ms-reveal {
display: flex;
height: 559px
}
ms-reveal > article {
width: 50%
}
ms-reveal > article > :first-child > * {
max-width: 425px !important;
min-width: 300px
}
ms-reveal > article > :not(:first-child) {
cursor: pointer;
display: flex;
position: relative
}
ms-reveal > article:first-child label[active] {
right: 18px
}
ms-reveal > article:first-child label:not([active]), ms-reveal > article:not(:first-child) label[active] {
left: 18px
}
ms-reveal > article:not(:first-child) label:not([active]) {
right: 18px
}
ms-reveal:not([focused]) > article > :first-child, ms-reveal[focused=""] > article > :first-child {
padding-left: 0;
padding-right: 0;
width: 0
}
ms-reveal:not([focused]) > article > :not(:first-child), ms-reveal[focused=""] > article > :not(:first-child) {
width: 100%
}
ms-reveal:not([focused]) label[active], ms-reveal[focused="1"] label:not([active]), ms-reveal[focused=""] label[active], ms-reveal[focused="-1"] label:not([active]) {
opacity: 0
}
ms-reveal[focused="1"] > article:first-child, ms-reveal[focused="-1"] > article:not(:first-child) {
width: 0
}
ms-reveal[focused="1"] > article:first-child > *, ms-reveal[focused="-1"] > article:not(:first-child) > * {
padding-left: 0;
padding-right: 0;
width: 0
}
ms-reveal[focused="1"] > article:not(:first-child), ms-reveal[focused="-1"] > article:first-child {
width: 100%
}
ms-reveal label {
bottom: 18px;
color: #fff;
cursor: pointer;
font-family: industry,sans-serif;
font-size: 36px;
font-weight: 300;
line-height: 1;
position: absolute;
transition: opacity .25s
}
ms-reveal label span {
font-weight: 700
}
ms-reveal label:after, ms-reveal label:before {
display: inline-block;
vertical-align: middle
}
ms-reveal label:before {
margin-right: 20px
}
ms-reveal label:after {
margin-left: 20px
}
}
@media(max-width:767px) {
ms-reveal {
display: block
}
ms-reveal label {
display: none
}
}
@media(min-width:768px) {
ms-reveal > article {
display: flex;
transition: all .25s
}
ms-reveal > article:nth-child(2n) {
flex-direction: row-reverse
}
ms-reveal > article > * {
overflow: hidden;
transition: all .25s;
width: 50%
}
}
@media(max-width:767px) {
ms-reveal > article > *, ms-reveal > article > * img {
width: 100%
}
}
ms-reveal > article > :first-child {
background-color: #f5f5f5;
box-shadow: inset 0 0 13px rgba(18,20,22,.08);
padding: 88px 60px
}
ms-reveal > article > :first-child h2 {
font-weight: 500
}
ms-reveal > article > :first-child > a {
word-wrap: none;
background: transparent;
color: #00b6e4;
display: block;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 18px;
margin-top: 70px;
padding-left: 0
}
ms-reveal > article > :first-child > a:after {
content: "+";
display: inline-block;
margin-left: 30px
}
@media(max-width:767px) {
ms-reveal > article > :first-child {
padding: 8vw
}
ms-reveal > article > :first-child h2 {
margin-top: 0
}
ms-reveal > article > :first-child > a {
margin-top: 20px
}
}
ms-reveal + ms-callout {
padding-bottom: 20px
}
ms-callout {
padding: 7.8% 20px;
text-align: center
}
ms-callout[dark] {
background-color: #5e6d71;
background-image: url(../jpg/dark-pattern.jpg)
}
ms-callout[dark] > * {
color: #fff
}
ms-callout[dark] h2, ms-callout[dark] p {
margin-bottom: 50px
}
ms-callout > * {
margin-left: auto;
margin-right: auto;
max-width: 582px
}
@media(max-width:767px) {
ms-callout h2 {
margin-top: 0
}
ms-callout a {
display: block;
text-align: center
}
}
@media(min-width:768px) {
ms-cards {
display: flex;
flex-wrap: wrap;
padding-bottom: 70px
}
ms-cards > * {
margin: 27px 20px;
width: calc(25% - 40px)
}
}
@media(max-width:767px) {
ms-cards {
display: block
}
}
ms-cards ms-thumb {
background-position: top;
background-size: cover;
cursor: pointer;
padding-bottom: 0
}
ms-cards ms-thumb video {
background: #fff;
display: block;
opacity: 0;
transition: opacity .25s
}
ms-cards ms-thumb video.active {
opacity: 1
}
@media(max-width:767px) {
ms-cards ms-card {
display: block;
padding: 6vw
}
}
ms-cards ms-card > a:after {
content: "+";
display: inline-block;
margin-left: 20px;
vertical-align: middle
}
.btn, a[role=button], button, input[type=button], input[type=submit] {
background-color: #5387e6;
border: 0;
color: #fff;
font-family: industry,sans-serif;
font-size: 18px;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
padding: 11px 30px;
transition: all .5s ease;
white-space: normal
}
a[type=VID] {
background: transparent !important;
font-size: 70px;
height: 70px;
padding: 0;
text-align: center;
width: 70px
}
a[type=VID]:before {
line-height: 70px;
vertical-align: top !important
}
ms-pillars ms-pillar part-background {
position: absolute
}
ms-pillars ms-pillar inner-content {
padding: 8.4vw 10vw 14.28vw
}
ms-pillars ms-pillar inner-content > div {
position: relative
}
ms-pillars ms-pillar inner-content > div:before {
position: absolute;
top: 0
}
@media(min-width:1366px) {
ms-pillars ms-pillar inner-content > div:before {
font-size: 4.39238653vw;
left: -6.588579795vw
}
}
@media(max-width:1365px) {
ms-pillars ms-pillar inner-content > div:before {
font-size: 60px;
left: -90px
}
}
ms-pillars ms-pillar inner-content h5 {
font-style: "industry",sans-serif;
text-transform: uppercase
}
@media(min-width:1366px) {
ms-pillars ms-pillar inner-content h5 {
font-size: 1.317715959vw
}
}
@media(max-width:1365px) {
ms-pillars ms-pillar inner-content h5 {
font-size: 18px
}
}
ms-pillars ms-pillar inner-content h6 {
font-style: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Segoe UI",Helvetica,Arial,"Lucida Grande",sans-serif;
letter-spacing: normal;
line-height: 1
}
@media(min-width:1366px) {
ms-pillars ms-pillar inner-content h6 {
font-size: 1.317715959vw;
max-width: 18.3016105417vw
}
}
@media(max-width:1365px) {
ms-pillars ms-pillar inner-content h6 {
font-size: 18px;
max-width: 250px
}
}
@media(min-width:1366px) {
ms-pillars ms-pillar inner-content h3 {
font-size: 2.635431918vw
}
}
@media(max-width:1365px) {
ms-pillars ms-pillar inner-content h3 {
font-size: 36px
}
}
@media(min-width:1366px) {
ms-pillars ms-pillar inner-content p {
font-size: 1.1713030747vw
}
}
@media(max-width:1365px) {
ms-pillars ms-pillar inner-content p {
font-size: 16px
}
}
@media(min-width:768px) {
ms-pillars ms-pillar inner-content {
text-align: left;
width: 50%
}
ms-pillars ms-pillar inner-content[text-light], ms-pillars ms-pillar inner-content[text-light] * {
color: #fff
}
}
@media(max-width:767px) {
ms-pillars ms-pillar inner-content {
padding: 8vw 6vw
}
ms-pillars ms-pillar inner-content[text-light], ms-pillars ms-pillar inner-content[text-light] * {
color: #221f1f
}
ms-pillars ms-pillar inner-content h5, ms-pillars ms-pillar inner-content h6 {
padding-left: 90px
}
ms-pillars ms-pillar inner-content > div:before {
left: 0
}
}
ms-pillars ms-pillar inner-content[text-dark], ms-pillars ms-pillar inner-content[text-dark] * {
color: #221f1f
}
@media(max-width:767px) {
ms-pillars ms-pillar[type=Split] comp-background, ms-pillars ms-pillar[type=Split] part-background {
display: none
}
ms-pillars ms-pillar[type=Full] comp-background, ms-pillars ms-pillar[type=Full] part-background {
display: block;
padding-bottom: 48%;
position: static
}
ms-pillars ms-pillar + [type=Split] {
border-top: 1px solid #d7d7d7
}
}
@media(min-width:768px) {
ms-pillars ms-pillar[type=Split] comp-background, ms-pillars ms-pillar[type=Split] part-background {
left: auto;
right: 0;
width: 44%
}
}
ms-comp[cut=left] part-background, ms-comp[cut=right] part-background, ms-feature part-background, ms-hero part-background {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
ms-comp, ms-feature, ms-hero {
overflow: hidden
}
comp-resources[vocation] > .group {
margin-left: auto;
margin-right: auto;
max-width: 1153px
}
@media(min-width:768px) {
comp-resources[vocation] > .group {
padding: 0 20px
}
}
ms-comp, ms-comp > :not(item-background), ms-feature, ms-feature > :not(item-background), ms-hero, ms-hero > :not(item-background) {
position: relative
}
ms-comp > :not(item-background), ms-feature > :not(item-background), ms-hero > :not(item-background) {
z-index: 1
}
ms-comp:not([inline]), ms-comp inner-content:not([inline]), ms-feature:not([inline]), ms-hero:not([inline]) {
display: block
}
@-webkit-keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@-webkit-keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
@keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
comp-resources[vocation] h2 {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25;
margin-bottom: 45px !important;
margin-top: 0;
padding-bottom: 18px !important;
position: relative
}
comp-resources[vocation] h2:after {
border-top: 1px solid rgba(151,151,151,.15);
bottom: 0;
content: "";
left: 20px;
position: absolute;
right: 20px
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif
}
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, 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
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace,monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0 0 15px;
}
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;
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
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
*, :after, :before {
box-sizing: border-box
}
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 10px
}
body {
background-color: #fff;
color: #3b3b3b;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 16px;
line-height: 1.8125
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
a:focus, a:hover {
color: #713738;
text-decoration: underline
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
figure {
margin: 0
}
img {
vertical-align: middle
}
.img-responsive {
display: block;
height: auto;
max-width: 100%
}
.img-rounded {
border-radius: 6px
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.8125;
max-width: 100%;
padding: 4px;
transition: all .2s ease-in-out
}
.img-circle {
border-radius: 50%
}
hr {
border-top: 1px solid #eee;
margin-bottom: 29px;
margin-top: 29px
}
.sr-only {
clip: rect(0,0,0,0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.sr-only-focusable:active, .sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}
[role=button] {
cursor: pointer
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: #3b3b3b;
font-family: industry,sans-serif;
font-weight: 500;
line-height: 1.1
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
color: #777;
font-weight: 400;
line-height: 1
}
.h1, .h2, .h3, h1, h2, h3 {
margin-bottom: 14.5px;
margin-top: 29px
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
font-size: 65%
}
.h4, .h5, .h6, h4, h5, h6 {
margin-bottom: 14.5px;
margin-top: 14.5px
}
.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
font-size: 75%
}
.h1, h1 {
font-size: 48px
}
.h2, h2 {
font-size: 33px
}
.h3, h3 {
font-size: 24px
}
.h4, h4 {
font-size: 18px
}
.h5, h5 {
font-size: 16px
}
.h6, h6 {
font-size: 12px
}
p {
margin: 0 0 14.5px
}
.lead {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
margin-bottom: 29px
}
@media(min-width:768px) {
.lead {
font-size: 24px
}
}
.small, small {
font-size: 87%
}
.mark, mark {
background-color: #fcf8e3;
padding: .2em
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.text-nowrap {
white-space: nowrap
}
.text-lowercase {
text-transform: lowercase
}
.initialism, .text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
.text-muted {
color: #777
}
.text-primary {
color: #337ab7
}
a.text-primary:focus, a.text-primary:hover {
color: #286090
}
.text-success {
color: #3c763d
}
a.text-success:focus, a.text-success:hover {
color: #2b542c
}
.text-info {
color: #31708f
}
a.text-info:focus, a.text-info:hover {
color: #245269
}
.text-warning {
color: #8a6d3b
}
a.text-warning:focus, a.text-warning:hover {
color: #66512c
}
.text-danger {
color: #a94442
}
a.text-danger:focus, a.text-danger:hover {
color: #843534
}
.bg-primary {
background-color: #337ab7;
color: #fff
}
a.bg-primary:focus, a.bg-primary:hover {
background-color: #286090
}
.bg-success {
background-color: #dff0d8
}
a.bg-success:focus, a.bg-success:hover {
background-color: #c1e2b3
}
.bg-info {
background-color: #d9edf7
}
a.bg-info:focus, a.bg-info:hover {
background-color: #afd9ee
}
.bg-warning {
background-color: #fcf8e3
}
a.bg-warning:focus, a.bg-warning:hover {
background-color: #f7ecb5
}
.bg-danger {
background-color: #f2dede
}
a.bg-danger:focus, a.bg-danger:hover {
background-color: #e4b9b9
}
.page-header {
border-bottom: 1px solid #eee;
margin: 58px 0 29px;
padding-bottom: 13.5px
}
ol, ul {
margin-bottom: 14.5px;
margin-top: 0
}
ol ol, ol ul, ul ol, ul ul {
margin-bottom: 0
}
.list-inline, .list-unstyled {
list-style: none;
padding-left: 0
}
.list-inline {
margin-left: -5px
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
dl {
margin-bottom: 29px;
margin-top: 0
}
dd, dt {
line-height: 1.8125
}
dt {
font-weight: 700
}
dd {
margin-left: 0
}
.dl-horizontal dd:after, .dl-horizontal dd:before {
content: " ";
display: table
}
.dl-horizontal dd:after {
clear: both
}
@media(min-width:768px) {
.dl-horizontal dt {
clear: left;
float: left;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 160px
}
.dl-horizontal dd {
margin-left: 180px
}
}
abbr[data-original-title], abbr[title] {
border-bottom: 1px dotted #777;
cursor: help
}
.initialism {
font-size: 90%
}
blockquote {
border-left: 5px solid #eee;
font-size: 20px;
margin: 0 0 29px;
padding: 14.5px 29px
}
blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
margin-bottom: 0
}
blockquote .small, blockquote footer, blockquote small {
color: #777;
display: block;
font-size: 80%;
line-height: 1.8125
}
blockquote .small:before, blockquote footer:before, blockquote small:before {
content: "— "
}
.blockquote-reverse, blockquote.pull-right {
border-left: 0;
border-right: 5px solid #eee;
padding-left: 0;
padding-right: 15px;
text-align: right
}
.blockquote-reverse .small:before, .blockquote-reverse footer:before, .blockquote-reverse small:before, blockquote.pull-right .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before {
content: ""
}
.blockquote-reverse .small:after, .blockquote-reverse footer:after, .blockquote-reverse small:after, blockquote.pull-right .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after {
content: " —"
}
address {
font-style: normal;
margin-bottom: 29px
}
.btn, address {
line-height: 1.8125
}
.btn {
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.focus, .btn:focus, .btn:hover {
color: #fff;
text-decoration: none
}
.btn.active, .btn:active {
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
outline: 0
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
box-shadow: none;
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: .65
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none
}
.btn-default {
background-color: #6f87a6;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open > .btn-default.dropdown-toggle {
background-color: #566e8c;
border-color: transparent;
color: #fff
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .btn-default.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover {
background-color: #495c76;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default:active, .open > .btn-default.dropdown-toggle {
background-image: none
}
.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
background-color: #6f87a6;
border-color: transparent
}
.btn-default .badge {
background-color: #fff;
color: #6f87a6
}
.btn-primary {
background-color: #484848;
border-color: #888;
color: #fff
}
.btn-primary.focus, .btn-primary:focus {
background-color: #2f2f2f;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open > .btn-primary.dropdown-toggle {
background-color: #2f2f2f;
border-color: dimgray;
color: #fff
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
background-color: #1d1d1d;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .open > .btn-primary.dropdown-toggle {
background-image: none
}
.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
background-color: #484848;
border-color: #888
}
.btn-primary .badge {
background-color: #fff;
color: #484848
}
.btn-success {
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff
}
.btn-success.focus, .btn-success:focus {
background-color: #449d44;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .btn-success:hover, .open > .btn-success.dropdown-toggle {
background-color: #449d44;
border-color: #398439;
color: #fff
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .btn-success.dropdown-toggle.focus, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle:hover {
background-color: #398439;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .open > .btn-success.dropdown-toggle {
background-image: none
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
background-color: #5cb85c;
border-color: #4cae4c
}
.btn-success .badge {
background-color: #fff;
color: #5cb85c
}
.btn-info {
background-color: #5bc0de;
border-color: #46b8da;
color: #fff
}
.btn-info.focus, .btn-info:focus {
background-color: #31b0d5;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .btn-info:hover, .open > .btn-info.dropdown-toggle {
background-color: #31b0d5;
border-color: #269abc;
color: #fff
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover {
background-color: #269abc;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .open > .btn-info.dropdown-toggle {
background-image: none
}
.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
background-color: #5bc0de;
border-color: #46b8da
}
.btn-info .badge {
background-color: #fff;
color: #5bc0de
}
.btn-warning {
background-color: #f0ad4e;
border-color: #eea236;
color: #fff
}
.btn-warning.focus, .btn-warning:focus {
background-color: #ec971f;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .btn-warning:hover, .open > .btn-warning.dropdown-toggle {
background-color: #ec971f;
border-color: #d58512;
color: #fff
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .btn-warning.dropdown-toggle.focus, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle:hover {
background-color: #d58512;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .open > .btn-warning.dropdown-toggle {
background-image: none
}
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color: #f0ad4e;
border-color: #eea236
}
.btn-warning .badge {
background-color: #fff;
color: #f0ad4e
}
.btn-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: #fff
}
.btn-danger.focus, .btn-danger:focus {
background-color: #c9302c;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .btn-danger:hover, .open > .btn-danger.dropdown-toggle {
background-color: #c9302c;
border-color: #ac2925;
color: #fff
}
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .btn-danger.dropdown-toggle.focus, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle:hover {
background-color: #ac2925;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .open > .btn-danger.dropdown-toggle {
background-image: none
}
.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
background-color: #d9534f;
border-color: #d43f3a
}
.btn-danger .badge {
background-color: #fff;
color: #d9534f
}
.btn-link {
border-radius: 0;
color: #6f87a6;
font-weight: 400
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
background-color: transparent;
box-shadow: none
}
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent
}
.btn-link:focus, .btn-link:hover {
background-color: transparent;
color: #713738;
text-decoration: underline
}
.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
color: #777;
text-decoration: none
}
.btn-lg {
border-radius: 6px;
font-size: 20px;
line-height: 1.3333333;
padding: 10px 16px
}
.btn-sm {
padding: 5px 10px
}
.btn-sm, .btn-xs {
border-radius: 3px;
font-size: 14px;
line-height: 1.5
}
.btn-xs {
padding: 1px 5px
}
.btn-block {
display: block;
width: 100%
}
.btn-block + .btn-block {
margin-top: 5px
}
input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
width: 100%
}
.fade {
opacity: 0;
transition: opacity .15s linear
}
.fade.in {
opacity: 1
}
.collapse {
display: none
}
.collapse.in {
display: block
}
tr.collapse.in {
display: table-row
}
tbody.collapse.in {
display: table-row-group
}
.collapsing {
height: 0;
overflow: hidden;
position: relative;
transition-duration: .35s;
transition-property: height,visibility;
transition-timing-function: ease
}
.materialize-red {
background-color: #484848 !important
}
.materialize-red-text {
color: #484848 !important
}
.materialize-red.lighten-5 {
background-color: #fdeaeb !important
}
.materialize-red-text.text-lighten-5 {
color: #fdeaeb !important
}
.materialize-red.lighten-4 {
background-color: #f8c1c3 !important
}
.materialize-red-text.text-lighten-4 {
color: #f8c1c3 !important
}
.materialize-red.lighten-3 {
background-color: #f3989b !important
}
.materialize-red-text.text-lighten-3 {
color: #f3989b !important
}
.materialize-red.lighten-2 {
background-color: #713738 !important
}
.materialize-red-text.text-lighten-2 {
color: #713738 !important
}
.materialize-red.lighten-1 {
background-color: #6f87a6 !important
}
.materialize-red-text.text-lighten-1 {
color: #6f87a6 !important
}
.materialize-red.darken-1 {
background-color: #d0181e !important
}
.materialize-red-text.text-darken-1 {
color: #d0181e !important
}
.materialize-red.darken-2 {
background-color: #b9151b !important
}
.materialize-red-text.text-darken-2 {
color: #b9151b !important
}
.materialize-red.darken-3 {
background-color: #a21318 !important
}
.materialize-red-text.text-darken-3 {
color: #a21318 !important
}
.materialize-red.darken-4 {
background-color: #8b1014 !important
}
.materialize-red-text.text-darken-4 {
color: #8b1014 !important
}
.red {
background-color: #f44336 !important
}
.red-text {
color: #f44336 !important
}
.red.lighten-5 {
background-color: #ffebee !important
}
.red-text.text-lighten-5 {
color: #ffebee !important
}
.red.lighten-4 {
background-color: #ffcdd2 !important
}
.red-text.text-lighten-4 {
color: #ffcdd2 !important
}
.red.lighten-3 {
background-color: #ef9a9a !important
}
.red-text.text-lighten-3 {
color: #ef9a9a !important
}
.red.lighten-2 {
background-color: #e57373 !important
}
.red-text.text-lighten-2 {
color: #e57373 !important
}
.red.lighten-1 {
background-color: #ef5350 !important
}
.red-text.text-lighten-1 {
color: #ef5350 !important
}
.red.darken-1 {
background-color: #e53935 !important
}
.red-text.text-darken-1 {
color: #e53935 !important
}
.red.darken-2 {
background-color: #d32f2f !important
}
.red-text.text-darken-2 {
color: #d32f2f !important
}
.red.darken-3 {
background-color: #c62828 !important
}
.red-text.text-darken-3 {
color: #c62828 !important
}
.red.darken-4 {
background-color: #b71c1c !important
}
.red-text.text-darken-4 {
color: #b71c1c !important
}
.red.accent-1 {
background-color: #ff8a80 !important
}
.red-text.text-accent-1 {
color: #ff8a80 !important
}
.red.accent-2 {
background-color: #ff5252 !important
}
.red-text.text-accent-2 {
color: #ff5252 !important
}
.red.accent-3 {
background-color: #ff1744 !important
}
.red-text.text-accent-3 {
color: #ff1744 !important
}
.red.accent-4 {
background-color: #d50000 !important
}
.red-text.text-accent-4 {
color: #d50000 !important
}
.pink {
background-color: #e91e63 !important
}
.pink-text {
color: #e91e63 !important
}
.pink.lighten-5 {
background-color: #fce4ec !important
}
.pink-text.text-lighten-5 {
color: #fce4ec !important
}
.pink.lighten-4 {
background-color: #f8bbd0 !important
}
.pink-text.text-lighten-4 {
color: #f8bbd0 !important
}
.pink.lighten-3 {
background-color: #f48fb1 !important
}
.pink-text.text-lighten-3 {
color: #f48fb1 !important
}
.pink.lighten-2 {
background-color: #f06292 !important
}
.pink-text.text-lighten-2 {
color: #f06292 !important
}
.pink.lighten-1 {
background-color: #ec407a !important
}
.pink-text.text-lighten-1 {
color: #ec407a !important
}
.pink.darken-1 {
background-color: #d81b60 !important
}
.pink-text.text-darken-1 {
color: #d81b60 !important
}
.pink.darken-2 {
background-color: #c2185b !important
}
.pink-text.text-darken-2 {
color: #c2185b !important
}
.pink.darken-3 {
background-color: #ad1457 !important
}
.pink-text.text-darken-3 {
color: #ad1457 !important
}
.pink.darken-4 {
background-color: #880e4f !important
}
.pink-text.text-darken-4 {
color: #880e4f !important
}
.pink.accent-1 {
background-color: #ff80ab !important
}
.pink-text.text-accent-1 {
color: #ff80ab !important
}
.pink.accent-2 {
background-color: #ff4081 !important
}
.pink-text.text-accent-2 {
color: #ff4081 !important
}
.pink.accent-3 {
background-color: #f50057 !important
}
.pink-text.text-accent-3 {
color: #f50057 !important
}
.pink.accent-4 {
background-color: #c51162 !important
}
.pink-text.text-accent-4 {
color: #c51162 !important
}
.purple {
background-color: #9c27b0 !important
}
.purple-text {
color: #9c27b0 !important
}
.purple.lighten-5 {
background-color: #f3e5f5 !important
}
.purple-text.text-lighten-5 {
color: #f3e5f5 !important
}
.purple.lighten-4 {
background-color: #e1bee7 !important
}
.purple-text.text-lighten-4 {
color: #e1bee7 !important
}
.purple.lighten-3 {
background-color: #ce93d8 !important
}
.purple-text.text-lighten-3 {
color: #ce93d8 !important
}
.purple.lighten-2 {
background-color: #ba68c8 !important
}
.purple-text.text-lighten-2 {
color: #ba68c8 !important
}
.purple.lighten-1 {
background-color: #ab47bc !important
}
.purple-text.text-lighten-1 {
color: #ab47bc !important
}
.purple.darken-1 {
background-color: #8e24aa !important
}
.purple-text.text-darken-1 {
color: #8e24aa !important
}
.purple.darken-2 {
background-color: #7b1fa2 !important
}
.purple-text.text-darken-2 {
color: #7b1fa2 !important
}
.purple.darken-3 {
background-color: #6a1b9a !important
}
.purple-text.text-darken-3 {
color: #6a1b9a !important
}
.purple.darken-4 {
background-color: #4a148c !important
}
.purple-text.text-darken-4 {
color: #4a148c !important
}
.purple.accent-1 {
background-color: #ea80fc !important
}
.purple-text.text-accent-1 {
color: #ea80fc !important
}
.purple.accent-2 {
background-color: #e040fb !important
}
.purple-text.text-accent-2 {
color: #e040fb !important
}
.purple.accent-3 {
background-color: #d500f9 !important
}
.purple-text.text-accent-3 {
color: #d500f9 !important
}
.purple.accent-4 {
background-color: #a0f !important
}
.purple-text.text-accent-4 {
color: #a0f !important
}
.deep-purple {
background-color: #673ab7 !important
}
.deep-purple-text {
color: #673ab7 !important
}
.deep-purple.lighten-5 {
background-color: #ede7f6 !important
}
.deep-purple-text.text-lighten-5 {
color: #ede7f6 !important
}
.deep-purple.lighten-4 {
background-color: #d1c4e9 !important
}
.deep-purple-text.text-lighten-4 {
color: #d1c4e9 !important
}
.deep-purple.lighten-3 {
background-color: #b39ddb !important
}
.deep-purple-text.text-lighten-3 {
color: #b39ddb !important
}
.deep-purple.lighten-2 {
background-color: #9575cd !important
}
.deep-purple-text.text-lighten-2 {
color: #9575cd !important
}
.deep-purple.lighten-1 {
background-color: #7e57c2 !important
}
.deep-purple-text.text-lighten-1 {
color: #7e57c2 !important
}
.deep-purple.darken-1 {
background-color: #5e35b1 !important
}
.deep-purple-text.text-darken-1 {
color: #5e35b1 !important
}
.deep-purple.darken-2 {
background-color: #512da8 !important
}
.deep-purple-text.text-darken-2 {
color: #512da8 !important
}
.deep-purple.darken-3 {
background-color: #4527a0 !important
}
.deep-purple-text.text-darken-3 {
color: #4527a0 !important
}
.deep-purple.darken-4 {
background-color: #311b92 !important
}
.deep-purple-text.text-darken-4 {
color: #311b92 !important
}
.deep-purple.accent-1 {
background-color: #b388ff !important
}
.deep-purple-text.text-accent-1 {
color: #b388ff !important
}
.deep-purple.accent-2 {
background-color: #7c4dff !important
}
.deep-purple-text.text-accent-2 {
color: #7c4dff !important
}
.deep-purple.accent-3 {
background-color: #651fff !important
}
.deep-purple-text.text-accent-3 {
color: #651fff !important
}
.deep-purple.accent-4 {
background-color: #6200ea !important
}
.deep-purple-text.text-accent-4 {
color: #6200ea !important
}
.indigo {
background-color: #3f51b5 !important
}
.indigo-text {
color: #3f51b5 !important
}
.indigo.lighten-5 {
background-color: #e8eaf6 !important
}
.indigo-text.text-lighten-5 {
color: #e8eaf6 !important
}
.indigo.lighten-4 {
background-color: #c5cae9 !important
}
.indigo-text.text-lighten-4 {
color: #c5cae9 !important
}
.indigo.lighten-3 {
background-color: #9fa8da !important
}
.indigo-text.text-lighten-3 {
color: #9fa8da !important
}
.indigo.lighten-2 {
background-color: #7986cb !important
}
.indigo-text.text-lighten-2 {
color: #7986cb !important
}
.indigo.lighten-1 {
background-color: #5c6bc0 !important
}
.indigo-text.text-lighten-1 {
color: #5c6bc0 !important
}
.indigo.darken-1 {
background-color: #3949ab !important
}
.indigo-text.text-darken-1 {
color: #3949ab !important
}
.indigo.darken-2 {
background-color: #303f9f !important
}
.indigo-text.text-darken-2 {
color: #303f9f !important
}
.indigo.darken-3 {
background-color: #283593 !important
}
.indigo-text.text-darken-3 {
color: #283593 !important
}
.indigo.darken-4 {
background-color: #1a237e !important
}
.indigo-text.text-darken-4 {
color: #1a237e !important
}
.indigo.accent-1 {
background-color: #8c9eff !important
}
.indigo-text.text-accent-1 {
color: #8c9eff !important
}
.indigo.accent-2 {
background-color: #536dfe !important
}
.indigo-text.text-accent-2 {
color: #536dfe !important
}
.indigo.accent-3 {
background-color: #3d5afe !important
}
.indigo-text.text-accent-3 {
color: #3d5afe !important
}
.indigo.accent-4 {
background-color: #304ffe !important
}
.indigo-text.text-accent-4 {
color: #304ffe !important
}
.blue {
background-color: #2196f3 !important
}
.blue-text {
color: #2196f3 !important
}
.blue.lighten-5 {
background-color: #e3f2fd !important
}
.blue-text.text-lighten-5 {
color: #e3f2fd !important
}
.blue.lighten-4 {
background-color: #bbdefb !important
}
.blue-text.text-lighten-4 {
color: #bbdefb !important
}
.blue.lighten-3 {
background-color: #90caf9 !important
}
.blue-text.text-lighten-3 {
color: #90caf9 !important
}
.blue.lighten-2 {
background-color: #64b5f6 !important
}
.blue-text.text-lighten-2 {
color: #64b5f6 !important
}
.blue.lighten-1 {
background-color: #42a5f5 !important
}
.blue-text.text-lighten-1 {
color: #42a5f5 !important
}
.blue.darken-1 {
background-color: #1e88e5 !important
}
.blue-text.text-darken-1 {
color: #1e88e5 !important
}
.blue.darken-2 {
background-color: #1976d2 !important
}
.blue-text.text-darken-2 {
color: #1976d2 !important
}
.blue.darken-3 {
background-color: #1565c0 !important
}
.blue-text.text-darken-3 {
color: #1565c0 !important
}
.blue.darken-4 {
background-color: #0d47a1 !important
}
.blue-text.text-darken-4 {
color: #0d47a1 !important
}
.blue.accent-1 {
background-color: #82b1ff !important
}
.blue-text.text-accent-1 {
color: #82b1ff !important
}
.blue.accent-2 {
background-color: #448aff !important
}
.blue-text.text-accent-2 {
color: #448aff !important
}
.blue.accent-3 {
background-color: #2979ff !important
}
.blue-text.text-accent-3 {
color: #2979ff !important
}
.blue.accent-4 {
background-color: #2962ff !important
}
.blue-text.text-accent-4 {
color: #2962ff !important
}
.light-blue {
background-color: #03a9f4 !important
}
.light-blue-text {
color: #03a9f4 !important
}
.light-blue.lighten-5 {
background-color: #e1f5fe !important
}
.light-blue-text.text-lighten-5 {
color: #e1f5fe !important
}
.light-blue.lighten-4 {
background-color: #b3e5fc !important
}
.light-blue-text.text-lighten-4 {
color: #b3e5fc !important
}
.light-blue.lighten-3 {
background-color: #81d4fa !important
}
.light-blue-text.text-lighten-3 {
color: #81d4fa !important
}
.light-blue.lighten-2 {
background-color: #4fc3f7 !important
}
.light-blue-text.text-lighten-2 {
color: #4fc3f7 !important
}
.light-blue.lighten-1 {
background-color: #29b6f6 !important
}
.light-blue-text.text-lighten-1 {
color: #29b6f6 !important
}
.light-blue.darken-1 {
background-color: #039be5 !important
}
.light-blue-text.text-darken-1 {
color: #039be5 !important
}
.light-blue.darken-2 {
background-color: #0288d1 !important
}
.light-blue-text.text-darken-2 {
color: #0288d1 !important
}
.light-blue.darken-3 {
background-color: #0277bd !important
}
.light-blue-text.text-darken-3 {
color: #0277bd !important
}
.light-blue.darken-4 {
background-color: #01579b !important
}
.light-blue-text.text-darken-4 {
color: #01579b !important
}
.light-blue.accent-1 {
background-color: #80d8ff !important
}
.light-blue-text.text-accent-1 {
color: #80d8ff !important
}
.light-blue.accent-2 {
background-color: #40c4ff !important
}
.light-blue-text.text-accent-2 {
color: #40c4ff !important
}
.light-blue.accent-3 {
background-color: #00b0ff !important
}
.light-blue-text.text-accent-3 {
color: #00b0ff !important
}
.light-blue.accent-4 {
background-color: #0091ea !important
}
.light-blue-text.text-accent-4 {
color: #0091ea !important
}
.cyan {
background-color: #00bcd4 !important
}
.cyan-text {
color: #00bcd4 !important
}
.cyan.lighten-5 {
background-color: #e0f7fa !important
}
.cyan-text.text-lighten-5 {
color: #e0f7fa !important
}
.cyan.lighten-4 {
background-color: #b2ebf2 !important
}
.cyan-text.text-lighten-4 {
color: #b2ebf2 !important
}
.cyan.lighten-3 {
background-color: #80deea !important
}
.cyan-text.text-lighten-3 {
color: #80deea !important
}
.cyan.lighten-2 {
background-color: #4dd0e1 !important
}
.cyan-text.text-lighten-2 {
color: #4dd0e1 !important
}
.cyan.lighten-1 {
background-color: #26c6da !important
}
.cyan-text.text-lighten-1 {
color: #26c6da !important
}
.cyan.darken-1 {
background-color: #00acc1 !important
}
.cyan-text.text-darken-1 {
color: #00acc1 !important
}
.cyan.darken-2 {
background-color: #0097a7 !important
}
.cyan-text.text-darken-2 {
color: #0097a7 !important
}
.cyan.darken-3 {
background-color: #00838f !important
}
.cyan-text.text-darken-3 {
color: #00838f !important
}
.cyan.darken-4 {
background-color: #006064 !important
}
.cyan-text.text-darken-4 {
color: #006064 !important
}
.cyan.accent-1 {
background-color: #84ffff !important
}
.cyan-text.text-accent-1 {
color: #84ffff !important
}
.cyan.accent-2 {
background-color: #18ffff !important
}
.cyan-text.text-accent-2 {
color: #18ffff !important
}
.cyan.accent-3 {
background-color: #00e5ff !important
}
.cyan-text.text-accent-3 {
color: #00e5ff !important
}
.cyan.accent-4 {
background-color: #00b8d4 !important
}
.cyan-text.text-accent-4 {
color: #00b8d4 !important
}
.teal {
background-color: #009688 !important
}
.teal-text {
color: #009688 !important
}
.teal.lighten-5 {
background-color: #e0f2f1 !important
}
.teal-text.text-lighten-5 {
color: #e0f2f1 !important
}
.teal.lighten-4 {
background-color: #b2dfdb !important
}
.teal-text.text-lighten-4 {
color: #b2dfdb !important
}
.teal.lighten-3 {
background-color: #80cbc4 !important
}
.teal-text.text-lighten-3 {
color: #80cbc4 !important
}
.teal.lighten-2 {
background-color: #4db6ac !important
}
.teal-text.text-lighten-2 {
color: #4db6ac !important
}
.teal.lighten-1 {
background-color: #26a69a !important
}
.teal-text.text-lighten-1 {
color: #26a69a !important
}
.teal.darken-1 {
background-color: #00897b !important
}
.teal-text.text-darken-1 {
color: #00897b !important
}
.teal.darken-2 {
background-color: #00796b !important
}
.teal-text.text-darken-2 {
color: #00796b !important
}
.teal.darken-3 {
background-color: #00695c !important
}
.teal-text.text-darken-3 {
color: #00695c !important
}
.teal.darken-4 {
background-color: #004d40 !important
}
.teal-text.text-darken-4 {
color: #004d40 !important
}
.teal.accent-1 {
background-color: #a7ffeb !important
}
.teal-text.text-accent-1 {
color: #a7ffeb !important
}
.teal.accent-2 {
background-color: #64ffda !important
}
.teal-text.text-accent-2 {
color: #64ffda !important
}
.teal.accent-3 {
background-color: #1de9b6 !important
}
.teal-text.text-accent-3 {
color: #1de9b6 !important
}
.teal.accent-4 {
background-color: #00bfa5 !important
}
.teal-text.text-accent-4 {
color: #00bfa5 !important
}
.green {
background-color: #4caf50 !important
}
.green-text {
color: #4caf50 !important
}
.green.lighten-5 {
background-color: #e8f5e9 !important
}
.green-text.text-lighten-5 {
color: #e8f5e9 !important
}
.green.lighten-4 {
background-color: #c8e6c9 !important
}
.green-text.text-lighten-4 {
color: #c8e6c9 !important
}
.green.lighten-3 {
background-color: #a5d6a7 !important
}
.green-text.text-lighten-3 {
color: #a5d6a7 !important
}
.green.lighten-2 {
background-color: #81c784 !important
}
.green-text.text-lighten-2 {
color: #81c784 !important
}
.green.lighten-1 {
background-color: #66bb6a !important
}
.green-text.text-lighten-1 {
color: #66bb6a !important
}
.green.darken-1 {
background-color: #43a047 !important
}
.green-text.text-darken-1 {
color: #43a047 !important
}
.green.darken-2 {
background-color: #388e3c !important
}
.green-text.text-darken-2 {
color: #388e3c !important
}
.green.darken-3 {
background-color: #2e7d32 !important
}
.green-text.text-darken-3 {
color: #2e7d32 !important
}
.green.darken-4 {
background-color: #1b5e20 !important
}
.green-text.text-darken-4 {
color: #1b5e20 !important
}
.green.accent-1 {
background-color: #b9f6ca !important
}
.green-text.text-accent-1 {
color: #b9f6ca !important
}
.green.accent-2 {
background-color: #69f0ae !important
}
.green-text.text-accent-2 {
color: #69f0ae !important
}
.green.accent-3 {
background-color: #00e676 !important
}
.green-text.text-accent-3 {
color: #00e676 !important
}
.green.accent-4 {
background-color: #00c853 !important
}
.green-text.text-accent-4 {
color: #00c853 !important
}
.light-green {
background-color: #8bc34a !important
}
.light-green-text {
color: #8bc34a !important
}
.light-green.lighten-5 {
background-color: #f1f8e9 !important
}
.light-green-text.text-lighten-5 {
color: #f1f8e9 !important
}
.light-green.lighten-4 {
background-color: #dcedc8 !important
}
.light-green-text.text-lighten-4 {
color: #dcedc8 !important
}
.light-green.lighten-3 {
background-color: #c5e1a5 !important
}
.light-green-text.text-lighten-3 {
color: #c5e1a5 !important
}
.light-green.lighten-2 {
background-color: #aed581 !important
}
.light-green-text.text-lighten-2 {
color: #aed581 !important
}
.light-green.lighten-1 {
background-color: #9ccc65 !important
}
.light-green-text.text-lighten-1 {
color: #9ccc65 !important
}
.light-green.darken-1 {
background-color: #7cb342 !important
}
.light-green-text.text-darken-1 {
color: #7cb342 !important
}
.light-green.darken-2 {
background-color: #689f38 !important
}
.light-green-text.text-darken-2 {
color: #689f38 !important
}
.light-green.darken-3 {
background-color: #558b2f !important
}
.light-green-text.text-darken-3 {
color: #558b2f !important
}
.light-green.darken-4 {
background-color: #33691e !important
}
.light-green-text.text-darken-4 {
color: #33691e !important
}
.light-green.accent-1 {
background-color: #ccff90 !important
}
.light-green-text.text-accent-1 {
color: #ccff90 !important
}
.light-green.accent-2 {
background-color: #b2ff59 !important
}
.light-green-text.text-accent-2 {
color: #b2ff59 !important
}
.light-green.accent-3 {
background-color: #76ff03 !important
}
.light-green-text.text-accent-3 {
color: #76ff03 !important
}
.light-green.accent-4 {
background-color: #64dd17 !important
}
.light-green-text.text-accent-4 {
color: #64dd17 !important
}
.lime {
background-color: #cddc39 !important
}
.lime-text {
color: #cddc39 !important
}
.lime.lighten-5 {
background-color: #f9fbe7 !important
}
.lime-text.text-lighten-5 {
color: #f9fbe7 !important
}
.lime.lighten-4 {
background-color: #f0f4c3 !important
}
.lime-text.text-lighten-4 {
color: #f0f4c3 !important
}
.lime.lighten-3 {
background-color: #e6ee9c !important
}
.lime-text.text-lighten-3 {
color: #e6ee9c !important
}
.lime.lighten-2 {
background-color: #dce775 !important
}
.lime-text.text-lighten-2 {
color: #dce775 !important
}
.lime.lighten-1 {
background-color: #d4e157 !important
}
.lime-text.text-lighten-1 {
color: #d4e157 !important
}
.lime.darken-1 {
background-color: #c0ca33 !important
}
.lime-text.text-darken-1 {
color: #c0ca33 !important
}
.lime.darken-2 {
background-color: #afb42b !important
}
.lime-text.text-darken-2 {
color: #afb42b !important
}
.lime.darken-3 {
background-color: #9e9d24 !important
}
.lime-text.text-darken-3 {
color: #9e9d24 !important
}
.lime.darken-4 {
background-color: #827717 !important
}
.lime-text.text-darken-4 {
color: #827717 !important
}
.lime.accent-1 {
background-color: #f4ff81 !important
}
.lime-text.text-accent-1 {
color: #f4ff81 !important
}
.lime.accent-2 {
background-color: #eeff41 !important
}
.lime-text.text-accent-2 {
color: #eeff41 !important
}
.lime.accent-3 {
background-color: #c6ff00 !important
}
.lime-text.text-accent-3 {
color: #c6ff00 !important
}
.lime.accent-4 {
background-color: #aeea00 !important
}
.lime-text.text-accent-4 {
color: #aeea00 !important
}
.yellow {
background-color: #ffeb3b !important
}
.yellow-text {
color: #ffeb3b !important
}
.yellow.lighten-5 {
background-color: #fffde7 !important
}
.yellow-text.text-lighten-5 {
color: #fffde7 !important
}
.yellow.lighten-4 {
background-color: #fff9c4 !important
}
.yellow-text.text-lighten-4 {
color: #fff9c4 !important
}
.yellow.lighten-3 {
background-color: #fff59d !important
}
.yellow-text.text-lighten-3 {
color: #fff59d !important
}
.yellow.lighten-2 {
background-color: #fff176 !important
}
.yellow-text.text-lighten-2 {
color: #fff176 !important
}
.yellow.lighten-1 {
background-color: #ffee58 !important
}
.yellow-text.text-lighten-1 {
color: #ffee58 !important
}
.yellow.darken-1 {
background-color: #fdd835 !important
}
.yellow-text.text-darken-1 {
color: #fdd835 !important
}
.yellow.darken-2 {
background-color: #fbc02d !important
}
.yellow-text.text-darken-2 {
color: #fbc02d !important
}
.yellow.darken-3 {
background-color: #f9a825 !important
}
.yellow-text.text-darken-3 {
color: #f9a825 !important
}
.yellow.darken-4 {
background-color: #f57f17 !important
}
.yellow-text.text-darken-4 {
color: #f57f17 !important
}
.yellow.accent-1 {
background-color: #ffff8d !important
}
.yellow-text.text-accent-1 {
color: #ffff8d !important
}
.yellow.accent-2 {
background-color: #ff0 !important
}
.yellow-text.text-accent-2 {
color: #ff0 !important
}
.yellow.accent-3 {
background-color: #ffea00 !important
}
.yellow-text.text-accent-3 {
color: #ffea00 !important
}
.yellow.accent-4 {
background-color: #ffd600 !important
}
.yellow-text.text-accent-4 {
color: #ffd600 !important
}
.amber {
background-color: #ffc107 !important
}
.amber-text {
color: #ffc107 !important
}
.amber.lighten-5 {
background-color: #fff8e1 !important
}
.amber-text.text-lighten-5 {
color: #fff8e1 !important
}
.amber.lighten-4 {
background-color: #ffecb3 !important
}
.amber-text.text-lighten-4 {
color: #ffecb3 !important
}
.amber.lighten-3 {
background-color: #ffe082 !important
}
.amber-text.text-lighten-3 {
color: #ffe082 !important
}
.amber.lighten-2 {
background-color: #ffd54f !important
}
.amber-text.text-lighten-2 {
color: #ffd54f !important
}
.amber.lighten-1 {
background-color: #ffca28 !important
}
.amber-text.text-lighten-1 {
color: #ffca28 !important
}
.amber.darken-1 {
background-color: #ffb300 !important
}
.amber-text.text-darken-1 {
color: #ffb300 !important
}
.amber.darken-2 {
background-color: #ffa000 !important
}
.amber-text.text-darken-2 {
color: #ffa000 !important
}
.amber.darken-3 {
background-color: #ff8f00 !important
}
.amber-text.text-darken-3 {
color: #ff8f00 !important
}
.amber.darken-4 {
background-color: #ff6f00 !important
}
.amber-text.text-darken-4 {
color: #ff6f00 !important
}
.amber.accent-1 {
background-color: #ffe57f !important
}
.amber-text.text-accent-1 {
color: #ffe57f !important
}
.amber.accent-2 {
background-color: #ffd740 !important
}
.amber-text.text-accent-2 {
color: #ffd740 !important
}
.amber.accent-3 {
background-color: #ffc400 !important
}
.amber-text.text-accent-3 {
color: #ffc400 !important
}
.amber.accent-4 {
background-color: #ffab00 !important
}
.amber-text.text-accent-4 {
color: #ffab00 !important
}
.orange {
background-color: #ff9800 !important
}
.orange-text {
color: #ff9800 !important
}
.orange.lighten-5 {
background-color: #fff3e0 !important
}
.orange-text.text-lighten-5 {
color: #fff3e0 !important
}
.orange.lighten-4 {
background-color: #ffe0b2 !important
}
.orange-text.text-lighten-4 {
color: #ffe0b2 !important
}
.orange.lighten-3 {
background-color: #ffcc80 !important
}
.orange-text.text-lighten-3 {
color: #ffcc80 !important
}
.orange.lighten-2 {
background-color: #ffb74d !important
}
.orange-text.text-lighten-2 {
color: #ffb74d !important
}
.orange.lighten-1 {
background-color: #ffa726 !important
}
.orange-text.text-lighten-1 {
color: #ffa726 !important
}
.orange.darken-1 {
background-color: #fb8c00 !important
}
.orange-text.text-darken-1 {
color: #fb8c00 !important
}
.orange.darken-2 {
background-color: #f57c00 !important
}
.orange-text.text-darken-2 {
color: #f57c00 !important
}
.orange.darken-3 {
background-color: #ef6c00 !important
}
.orange-text.text-darken-3 {
color: #ef6c00 !important
}
.orange.darken-4 {
background-color: #e65100 !important
}
.orange-text.text-darken-4 {
color: #e65100 !important
}
.orange.accent-1 {
background-color: #ffd180 !important
}
.orange-text.text-accent-1 {
color: #ffd180 !important
}
.orange.accent-2 {
background-color: #ffab40 !important
}
.orange-text.text-accent-2 {
color: #ffab40 !important
}
.orange.accent-3 {
background-color: #ff9100 !important
}
.orange-text.text-accent-3 {
color: #ff9100 !important
}
.orange.accent-4 {
background-color: #ff6d00 !important
}
.orange-text.text-accent-4 {
color: #ff6d00 !important
}
.deep-orange {
background-color: #ff5722 !important
}
.deep-orange-text {
color: #ff5722 !important
}
.deep-orange.lighten-5 {
background-color: #fbe9e7 !important
}
.deep-orange-text.text-lighten-5 {
color: #fbe9e7 !important
}
.deep-orange.lighten-4 {
background-color: #ffccbc !important
}
.deep-orange-text.text-lighten-4 {
color: #ffccbc !important
}
.deep-orange.lighten-3 {
background-color: #ffab91 !important
}
.deep-orange-text.text-lighten-3 {
color: #ffab91 !important
}
.deep-orange.lighten-2 {
background-color: #ff8a65 !important
}
.deep-orange-text.text-lighten-2 {
color: #ff8a65 !important
}
.deep-orange.lighten-1 {
background-color: #ff7043 !important
}
.deep-orange-text.text-lighten-1 {
color: #ff7043 !important
}
.deep-orange.darken-1 {
background-color: #f4511e !important
}
.deep-orange-text.text-darken-1 {
color: #f4511e !important
}
.deep-orange.darken-2 {
background-color: #e64a19 !important
}
.deep-orange-text.text-darken-2 {
color: #e64a19 !important
}
.deep-orange.darken-3 {
background-color: #d84315 !important
}
.deep-orange-text.text-darken-3 {
color: #d84315 !important
}
.deep-orange.darken-4 {
background-color: #bf360c !important
}
.deep-orange-text.text-darken-4 {
color: #bf360c !important
}
.deep-orange.accent-1 {
background-color: #ff9e80 !important
}
.deep-orange-text.text-accent-1 {
color: #ff9e80 !important
}
.deep-orange.accent-2 {
background-color: #ff6e40 !important
}
.deep-orange-text.text-accent-2 {
color: #ff6e40 !important
}
.deep-orange.accent-3 {
background-color: #ff3d00 !important
}
.deep-orange-text.text-accent-3 {
color: #ff3d00 !important
}
.deep-orange.accent-4 {
background-color: #dd2c00 !important
}
.deep-orange-text.text-accent-4 {
color: #dd2c00 !important
}
.brown {
background-color: #795548 !important
}
.brown-text {
color: #795548 !important
}
.brown.lighten-5 {
background-color: #efebe9 !important
}
.brown-text.text-lighten-5 {
color: #efebe9 !important
}
.brown.lighten-4 {
background-color: #d7ccc8 !important
}
.brown-text.text-lighten-4 {
color: #d7ccc8 !important
}
.brown.lighten-3 {
background-color: #bcaaa4 !important
}
.brown-text.text-lighten-3 {
color: #bcaaa4 !important
}
.brown.lighten-2 {
background-color: #a1887f !important
}
.brown-text.text-lighten-2 {
color: #a1887f !important
}
.brown.lighten-1 {
background-color: #8d6e63 !important
}
.brown-text.text-lighten-1 {
color: #8d6e63 !important
}
.brown.darken-1 {
background-color: #6d4c41 !important
}
.brown-text.text-darken-1 {
color: #6d4c41 !important
}
.brown.darken-2 {
background-color: #5d4037 !important
}
.brown-text.text-darken-2 {
color: #5d4037 !important
}
.brown.darken-3 {
background-color: #4e342e !important
}
.brown-text.text-darken-3 {
color: #4e342e !important
}
.brown.darken-4 {
background-color: #3e2723 !important
}
.brown-text.text-darken-4 {
color: #3e2723 !important
}
.blue-grey {
background-color: #607d8b !important
}
.blue-grey-text {
color: #607d8b !important
}
.blue-grey.lighten-5 {
background-color: #eceff1 !important
}
.blue-grey-text.text-lighten-5 {
color: #eceff1 !important
}
.blue-grey.lighten-4 {
background-color: #cfd8dc !important
}
.blue-grey-text.text-lighten-4 {
color: #cfd8dc !important
}
.blue-grey.lighten-3 {
background-color: #b0bec5 !important
}
.blue-grey-text.text-lighten-3 {
color: #b0bec5 !important
}
.blue-grey.lighten-2 {
background-color: #90a4ae !important
}
.blue-grey-text.text-lighten-2 {
color: #90a4ae !important
}
.blue-grey.lighten-1 {
background-color: #78909c !important
}
.blue-grey-text.text-lighten-1 {
color: #78909c !important
}
.blue-grey.darken-1 {
background-color: #546e7a !important
}
.blue-grey-text.text-darken-1 {
color: #546e7a !important
}
.blue-grey.darken-2 {
background-color: #455a64 !important
}
.blue-grey-text.text-darken-2 {
color: #455a64 !important
}
.blue-grey.darken-3 {
background-color: #37474f !important
}
.blue-grey-text.text-darken-3 {
color: #37474f !important
}
.blue-grey.darken-4 {
background-color: #263238 !important
}
.blue-grey-text.text-darken-4 {
color: #263238 !important
}
.grey {
background-color: #9e9e9e !important
}
.grey-text {
color: #9e9e9e !important
}
.grey.lighten-5 {
background-color: #fafafa !important
}
.grey-text.text-lighten-5 {
color: #fafafa !important
}
.grey.lighten-4 {
background-color: #f5f5f5 !important
}
.grey-text.text-lighten-4 {
color: #f5f5f5 !important
}
.grey.lighten-3 {
background-color: #eee !important
}
.grey-text.text-lighten-3 {
color: #eee !important
}
.grey.lighten-2 {
background-color: #e0e0e0 !important
}
.grey-text.text-lighten-2 {
color: #e0e0e0 !important
}
.grey.lighten-1 {
background-color: #bdbdbd !important
}
.grey-text.text-lighten-1 {
color: #bdbdbd !important
}
.grey.darken-1 {
background-color: #757575 !important
}
.grey-text.text-darken-1 {
color: #757575 !important
}
.grey.darken-2 {
background-color: #616161 !important
}
.grey-text.text-darken-2 {
color: #616161 !important
}
.grey.darken-3 {
background-color: #424242 !important
}
.grey-text.text-darken-3 {
color: #424242 !important
}
.grey.darken-4 {
background-color: #212121 !important
}
.grey-text.text-darken-4 {
color: #212121 !important
}
.shades.black {
background-color: #000 !important
}
.shades-text.text-black {
color: #000 !important
}
.shades.white {
background-color: #fff !important
}
.shades-text.text-white {
color: #fff !important
}
.shades.transparent {
background-color: transparent !important
}
.shades-text.text-transparent {
color: transparent !important
}
.black {
background-color: #000 !important
}
.black-text {
color: #000 !important
}
.white {
background-color: #fff !important
}
.white-text {
color: #fff !important
}
.transparent {
background-color: transparent !important
}
.transparent-text {
color: transparent !important
}
html {
box-sizing: border-box
}
*, :after, :before {
box-sizing: inherit
}
ul {
list-style-type: none
}
ul.browser-default {
list-style-type: disc
}
a {
-webkit-tap-highlight-color: transparent;
color: #6f87a6;
text-decoration: none
}
.valign-wrapper {
align-items: center;
display: flex
}
.valign-wrapper .valign {
display: block
}
ul {
padding: 0
}
ul li {
list-style-type: none
}
.clearfix {
clear: both
}
.z-depth-0 {
box-shadow: none !important
}
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)
}
.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
}
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)
}
.modal, .z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21)
}
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0,0,0,.2),0 40px 77px 0 rgba(0,0,0,.22)
}
.hoverable {
box-shadow: 0;
transition: box-shadow .25s
}
.hoverable:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
transition: box-shadow .25s
}
.divider {
background-color: #e0e0e0;
height: 1px;
overflow: hidden
}
blockquote {
border-left: 5px solid #713738;
margin: 20px 0;
padding-left: 1.5rem
}
i {
line-height: inherit
}
i.left {
float: left;
margin-right: 15px
}
i.right {
float: right;
margin-left: 15px
}
i.tiny {
font-size: 1rem
}
i.small {
font-size: 2rem
}
i.medium {
font-size: 4rem
}
i.large {
font-size: 6rem
}
img.responsive-img, video.responsive-video {
height: auto;
max-width: 100%
}
.pagination li {
border-radius: 2px;
display: inline-block;
font-size: 1.2rem;
line-height: 30px;
padding: 0 10px;
text-align: center
}
.pagination li a {
color: #444
}
.pagination li.active a {
color: #fff
}
.pagination li.active {
background-color: #713738
}
.pagination li.disabled a {
color: #999;
cursor: default
}
.pagination li i {
font-size: 2.2rem;
vertical-align: middle
}
.pagination li.pages ul li {
display: inline-block;
float: none
}
@media only screen and (max-width:992px) {
.pagination {
width: 100%
}
.pagination li.next, .pagination li.prev {
width: 10%
}
.pagination li.pages {
overflow: hidden;
white-space: nowrap;
width: 80%
}
}
.breadcrumb {
color: rgba(255,255,255,.7);
font-size: 18px
}
.breadcrumb [class*=mdi-], .breadcrumb [class^=mdi-], .breadcrumb i, .breadcrumb i.material-icons {
display: inline-block;
float: left;
font-size: 24px
}
.breadcrumb:before {
-webkit-font-smoothing: antialiased;
color: rgba(255,255,255,.7);
content: "";
display: inline-block;
font-family: Material Icons;
font-size: 25px;
font-style: normal;
font-weight: 400;
margin: 0 10px 0 8px;
vertical-align: top
}
.breadcrumb:first-child:before {
display: none
}
.breadcrumb:last-child {
color: #fff
}
.parallax-container {
height: 500px;
overflow: hidden;
position: relative
}
.parallax {
left: 0;
right: 0;
top: 0;
z-index: -1
}
.parallax, .parallax img {
bottom: 0;
position: absolute
}
.parallax img {
display: none;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translateZ(0);
transform: translateX(-50%)
}
.pin-bottom, .pin-top {
position: relative
}
.pinned {
position: fixed !important
}
.fade-in, ul.staggered-list li {
opacity: 0
}
.fade-in {
transform-origin: 0 50%
}
@media only screen and (max-width:600px) {
.hide-on-small-and-down, .hide-on-small-only {
display: none !important
}
}
@media only screen and (max-width:992px) {
.hide-on-med-and-down {
display: none !important
}
}
@media only screen and (min-width:601px) {
.hide-on-med-and-up {
display: none !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.hide-on-med-only {
display: none !important
}
}
@media only screen and (min-width:993px) {
.hide-on-large-only {
display: none !important
}
.show-on-large {
display: block !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.show-on-medium {
display: block !important
}
}
@media only screen and (max-width:600px) {
.show-on-small {
display: block !important
}
}
@media only screen and (min-width:601px) {
.show-on-medium-and-up {
display: block !important
}
}
@media only screen and (max-width:992px) {
.show-on-medium-and-down {
display: block !important
}
}
@media only screen and (max-width:600px) {
.center-on-small-only {
text-align: center
}
}
footer.page-footer {
background-color: #713738;
margin-top: 20px;
padding-top: 20px
}
footer.page-footer .footer-copyright {
background-color: rgba(51,51,51,.08);
color: rgba(255,255,255,.8);
height: 50px;
line-height: 50px;
overflow: hidden
}
table:not([class^=month-picker]) {
border: none;
display: table;
width: 100%
}
table:not([class^=month-picker]).bordered > tbody > tr, table:not([class^=month-picker]).bordered > thead > tr {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]).striped > tbody > tr:nth-child(odd) {
background-color: #f2f2f2
}
table:not([class^=month-picker]).striped > tbody > tr > td {
border-radius: 0
}
table:not([class^=month-picker]).highlight > tbody > tr {
transition: background-color .25s ease
}
table:not([class^=month-picker]).highlight > tbody > tr:hover {
background-color: #f2f2f2
}
table:not([class^=month-picker]).centered tbody tr td, table:not([class^=month-picker]).centered thead tr th {
text-align: center
}
thead {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]) td, table:not([class^=month-picker]) th {
border: none;
border-radius: 2px;
display: table-cell;
padding: 15px 5px;
text-align: left;
vertical-align: middle
}
@media only screen and (max-width:992px) {
table.responsive-table {
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
width: 100%
}
table.responsive-table td:empty:before {
content: "Â "
}
table.responsive-table td, table.responsive-table th {
margin: 0;
vertical-align: top
}
table.responsive-table th {
text-align: left
}
table.responsive-table thead {
display: block;
float: left
}
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0
}
table.responsive-table thead tr th:before {
content: "Â "
}
table.responsive-table tbody {
display: block;
overflow-x: auto;
position: relative;
white-space: nowrap;
width: auto
}
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top
}
table.responsive-table th {
display: block;
text-align: right
}
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left
}
table.responsive-table tr {
padding: 0 10px
}
table.responsive-table thead {
border: 0;
border-right: 1px solid #ddd
}
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0
}
table.responsive-table.bordered td {
border-bottom: 0;
border-left: 0;
border-right: 0
}
table.responsive-table.bordered tr {
border: 0
}
table.responsive-table.bordered tbody tr {
border-right: 1px solid #ddd
}
}
.collection {
border: 1px solid #e0e0e0;
border-radius: 2px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative
}
.collection .collection-item {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
line-height: 1.5rem;
margin: 0;
padding: 10px 20px
}
.collection .collection-item.avatar {
min-height: 84px;
padding-left: 72px;
position: relative
}
.collection .collection-item.avatar .circle {
display: inline-block;
height: 42px;
left: 15px;
overflow: hidden;
position: absolute;
vertical-align: middle;
width: 42px
}
.collection .collection-item.avatar i.circle {
background-color: #999;
color: #fff;
font-size: 18px;
line-height: 42px;
text-align: center
}
.collection .collection-item.avatar .title {
font-size: 16px
}
.collection .collection-item.avatar p {
margin: 0
}
.collection .collection-item.avatar .secondary-content {
position: absolute;
right: 16px;
top: 16px
}
.collection .collection-item:last-child {
border-bottom: none
}
.collection .collection-item.active {
background-color: #6f87a6;
color: #fff
}
.collection .collection-item.active .secondary-content {
color: #fff
}
.collection a.collection-item {
color: #6f87a6;
display: block;
transition: .25s
}
.collection a.collection-item:not(.active):hover {
background-color: #ddd
}
.collection.with-header .collection-header {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 10px 20px
}
.collection.with-header .collection-item {
padding-left: 30px
}
.collection.with-header .collection-item.avatar {
padding-left: 72px
}
.secondary-content {
color: #6f87a6;
float: right
}
.collapsible .collection {
border: none;
margin: 0
}
span.badge {
box-sizing: border-box;
color: #757575;
font-size: 1rem;
line-height: inherit;
min-width: 3rem;
padding: 0 6px;
position: absolute;
right: 15px;
text-align: center
}
span.badge.new {
background-color: #6f87a6;
border-radius: 2px;
color: #fff;
font-size: .8rem;
font-weight: 300
}
span.badge.new:after {
content: " new"
}
nav ul a span.badge {
line-height: 0;
margin-left: 4px;
position: static
}
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative
}
.video-container embed, .video-container iframe, .video-container object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.progress {
background-color: #fff;
border-radius: 2px;
display: block;
height: 4px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative;
width: 100%
}
.progress .determinate {
background-color: #fff;
bottom: 0;
left: 0;
position: absolute;
top: 0;
transition: width .3s linear
}
.progress .indeterminate {
background-color: #fff
}
.progress .indeterminate:before {
-webkit-animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
}
.progress .indeterminate:after, .progress .indeterminate:before {
background-color: inherit;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
will-change: left,right
}
.progress .indeterminate:after {
-webkit-animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
.hide {
display: none !important
}
.left-align {
text-align: left
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center
}
.left {
float: left !important
}
.right {
float: right !important
}
.no-select, input[type=range], input[type=range] + .thumb {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.circle {
border-radius: 50%
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.no-padding {
padding: 0 !important
}
em {
font-style: italic
}
strong {
font-weight: 500
}
small {
font-size: 75%
}
.light, footer.page-footer .footer-copyright {
font-weight: 300
}
.thin, nav[with-subtitle] > a span.label {
font-weight: 200
}
.flow-text {
font-weight: 300
}
@media only screen and (min-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
@media only screen and (min-width:390px) {
.flow-text {
font-size: 1.224rem
}
}
@media only screen and (min-width:420px) {
.flow-text {
font-size: 1.248rem
}
}
@media only screen and (min-width:450px) {
.flow-text {
font-size: 1.272rem
}
}
@media only screen and (min-width:480px) {
.flow-text {
font-size: 1.296rem
}
}
@media only screen and (min-width:510px) {
.flow-text {
font-size: 1.32rem
}
}
@media only screen and (min-width:540px) {
.flow-text {
font-size: 1.344rem
}
}
@media only screen and (min-width:570px) {
.flow-text {
font-size: 1.368rem
}
}
@media only screen and (min-width:600px) {
.flow-text {
font-size: 1.392rem
}
}
@media only screen and (min-width:630px) {
.flow-text {
font-size: 1.416rem
}
}
@media only screen and (min-width:660px) {
.flow-text {
font-size: 1.44rem
}
}
@media only screen and (min-width:690px) {
.flow-text {
font-size: 1.464rem
}
}
@media only screen and (min-width:720px) {
.flow-text {
font-size: 1.488rem
}
}
@media only screen and (min-width:750px) {
.flow-text {
font-size: 1.512rem
}
}
@media only screen and (min-width:780px) {
.flow-text {
font-size: 1.536rem
}
}
@media only screen and (min-width:810px) {
.flow-text {
font-size: 1.56rem
}
}
@media only screen and (min-width:840px) {
.flow-text {
font-size: 1.584rem
}
}
@media only screen and (min-width:870px) {
.flow-text {
font-size: 1.608rem
}
}
@media only screen and (min-width:900px) {
.flow-text {
font-size: 1.632rem
}
}
@media only screen and (min-width:930px) {
.flow-text {
font-size: 1.656rem
}
}
@media only screen and (min-width:960px) {
.flow-text {
font-size: 1.68rem
}
}
@media only screen and (max-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
.modal {
background-color: #fafafa;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
overflow-y: auto;
padding: 0;
position: fixed;
right: 0;
width: 55%;
will-change: top,opacity
}
@media only screen and (max-width:992px) {
.modal {
width: 80%
}
}
.modal h1, .modal h2, .modal h3, .modal h4 {
margin-top: 0
}
.modal .modal-content {
padding: 24px
}
.modal .modal-close {
cursor: pointer
}
.modal .modal-footer {
background-color: #fafafa;
border-radius: 0 0 2px 2px;
height: 56px;
padding: 4px 6px;
width: 100%
}
.modal .modal-footer .btn, .modal .modal-footer .btn-flat {
float: right;
margin: 6px 0
}
.lean-overlay {
background: #000;
bottom: 0;
display: none;
height: 125%;
left: 0;
position: fixed;
right: 0;
top: -100px;
width: 100%;
will-change: opacity;
z-index: 999
}
.modal.modal-fixed-footer {
height: 70%;
padding: 0
}
.modal.modal-fixed-footer .modal-content {
height: calc(100% - 56px);
max-height: 100%;
overflow-y: auto;
position: absolute;
width: 100%
}
.modal.modal-fixed-footer .modal-footer {
border-top: 1px solid rgba(0,0,0,.1);
bottom: 0;
position: absolute
}
.modal.bottom-sheet {
border-radius: 0;
bottom: -100%;
margin: 0;
max-height: 45%;
top: auto;
width: 100%;
will-change: bottom,opacity
}
select:focus {
outline: 1px solid #fff
}
button:focus {
background-color: #7c92ae;
outline: none
}
label {
color: #979797;
font-size: 9px
}
::-webkit-input-placeholder {
color: #979797
}
:-moz-placeholder, ::-moz-placeholder {
color: #979797
}
:-ms-input-placeholder {
color: #979797
}
input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
border-radius: 0;
box-shadow: none;
box-sizing: content-box;
font-size: 22px;
height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
transition: all .3s;
width: 100%
}
input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=date]:disabled, input[type=date][readonly=readonly], input[type=datetime-local]:disabled, input[type=datetime-local][readonly=readonly], input[type=datetime]:disabled, input[type=datetime][readonly=readonly], input[type=email]:disabled, input[type=email][readonly=readonly], input[type=number]:disabled, input[type=number][readonly=readonly], input[type=password]:disabled, input[type=password][readonly=readonly], input[type=search]:disabled, input[type=search][readonly=readonly], input[type=tel]:disabled, input[type=tel][readonly=readonly], input[type=text]:disabled, input[type=text][readonly=readonly], input[type=time]:disabled, input[type=time][readonly=readonly], input[type=url]:disabled, input[type=url][readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] {
border-bottom: 1px dotted rgba(0,0,0,.26);
color: rgba(0,0,0,.26)
}
input:not([type]):disabled + label, input:not([type])[readonly=readonly] + label, input[type=date]:disabled + label, input[type=date][readonly=readonly] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly=readonly] + label, input[type=datetime]:disabled + label, input[type=datetime][readonly=readonly] + label, input[type=email]:disabled + label, input[type=email][readonly=readonly] + label, input[type=number]:disabled + label, input[type=number][readonly=readonly] + label, input[type=password]:disabled + label, input[type=password][readonly=readonly] + label, input[type=search]:disabled + label, input[type=search][readonly=readonly] + label, input[type=tel]:disabled + label, input[type=tel][readonly=readonly] + label, input[type=text]:disabled + label, input[type=text][readonly=readonly] + label, input[type=time]:disabled + label, input[type=time][readonly=readonly] + label, input[type=url]:disabled + label, input[type=url][readonly=readonly] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly=readonly] + label {
color: rgba(0,0,0,.26)
}
input:not([type]):focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]):focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=datetime]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
color: #6f87a6
}
input:not([type]).valid, input:not([type]):focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=datetime].valid, input[type=datetime]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=text].valid, input[type=text]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]).valid + label:after, input:not([type]):focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=datetime].valid + label:after, input[type=datetime]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after {
color: #6f87a6;
content: attr(data-success);
opacity: 1
}
input:not([type]).invalid, input:not([type]):focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=datetime].invalid, input[type=datetime]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=text].invalid, input[type=text]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
border-bottom: 1px solid #f44336;
box-shadow: 0 1px 0 0 #f44336
}
input:not([type]).invalid + label:after, input:not([type]):focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=datetime].invalid + label:after, input[type=datetime]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after {
color: #f44336;
content: attr(data-error);
opacity: 1
}
input:not([type]).validate + label, input[type=date].validate + label, input[type=datetime-local].validate + label, input[type=datetime].validate + label, input[type=email].validate + label, input[type=number].validate + label, input[type=password].validate + label, input[type=search].validate + label, input[type=tel].validate + label, input[type=text].validate + label, input[type=time].validate + label, input[type=url].validate + label, textarea.materialize-textarea.validate + label {
pointer-events: none;
width: 100%
}
input:not([type]) + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=datetime] + label:after, input[type=email] + label:after, input[type=number] + label:after, input[type=password] + label:after, input[type=search] + label:after, input[type=tel] + label:after, input[type=text] + label:after, input[type=time] + label:after, input[type=url] + label:after, textarea.materialize-textarea + label:after {
content: "";
display: block;
opacity: 0;
position: absolute;
top: 65px;
transition: opacity .2s ease-out,color .2s ease-out
}
.input-field {
margin-top: 1rem;
position: relative
}
.input-field label {
color: #979797;
cursor: text;
font-size: 1rem;
left: .75rem;
position: absolute;
top: .8rem;
transition: .2s ease-out
}
.input-field label.active {
font-size: 9px;
transform: translateY(-140%)
}
.input-field .prefix {
font-size: 2rem;
position: absolute;
transition: color .2s;
width: 44px
}
.input-field .prefix.active {
color: #6f87a6
}
.input-field .prefix ~ input, .input-field .prefix ~ textarea {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.input-field .prefix ~ textarea {
padding-top: .8rem
}
.input-field .prefix ~ label {
margin-left: 3rem
}
@media only screen and (max-width:992px) {
.input-field .prefix ~ input {
width: 86%;
width: calc(100% - 3rem)
}
}
@media only screen and (max-width:600px) {
.input-field .prefix ~ input {
width: 80%;
width: calc(100% - 3rem)
}
}
.input-field input[type=search] {
display: block;
line-height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem)
}
.input-field input[type=search]:focus {
background-color: #fff;
border: 0;
box-shadow: none;
color: #444
}
.input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .material-icons, .input-field input[type=search]:focus ~ .mdi-navigation-close {
color: #444
}
.input-field input[type=search] + label {
left: 1rem
}
.input-field input[type=search] ~ .material-icons, .input-field input[type=search] ~ .mdi-navigation-close {
color: transparent;
cursor: pointer;
font-size: 2rem;
position: absolute;
right: 1rem;
top: 0;
transition: color .3s
}
textarea {
background-color: transparent;
height: 44px;
width: 100%
}
textarea.materialize-textarea {
min-height: 44px;
overflow-y: hidden;
padding: 1.6rem 0;
resize: none
}
.hiddendiv {
word-wrap: break-word;
display: none;
padding-top: 1.2rem;
white-space: pre-wrap
}
[type=radio]:checked, [type=radio]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=radio]:checked + label, [type=radio]:not(:checked) + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
transition: .28s ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
[type=radio] + label:after, [type=radio] + label:before {
content: "";
height: 16px;
left: 0;
margin: 4px;
position: absolute;
top: 0;
transition: .28s ease;
width: 16px;
z-index: 0
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after, [type=radio]:checked + label:before, [type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border-radius: 50%
}
[type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border: 2px solid #5a5a5a
}
[type=radio]:not(:checked) + label:after {
transform: scale(0);
z-index: -1
}
[type=radio]:checked + label:before {
border: 2px solid transparent
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after {
border: 2px solid #6f87a6
}
[type=radio].with-gap:checked + label:after, [type=radio]:checked + label:after {
background-color: #6f87a6;
z-index: 0
}
[type=radio]:checked + label:after {
transform: scale(1.02)
}
[type=radio].with-gap:checked + label:after {
transform: scale(.5)
}
[type=radio].tabbed:focus + label:before {
box-shadow: 0 0 0 10px rgba(0,0,0,.1)
}
[type=radio].with-gap:disabled:checked + label:before {
border: 2px solid rgba(0,0,0,.26)
}
[type=radio].with-gap:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border: none
}
[type=radio]:disabled:checked + label:before, [type=radio]:disabled:not(:checked) + label:before {
background-color: transparent;
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled + label {
color: rgba(0,0,0,.26)
}
[type=radio]:disabled:not(:checked) + label:before {
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border-color: #bdbdbd
}
form p {
margin-bottom: 10px;
text-align: left
}
form p:last-child {
margin-bottom: 0
}
[type=checkbox]:checked, [type=checkbox]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=checkbox] + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
[type=checkbox] + label:before, [type=checkbox]:not(.filled-in) + label:after {
border: 2px solid #5a5a5a;
border-radius: 1px;
content: "";
height: 18px;
left: 0;
margin-top: 2px;
position: absolute;
top: 0;
transition: .2s;
width: 18px;
z-index: 0
}
[type=checkbox]:not(.filled-in) + label:after {
border: 0;
transform: scale(0)
}
[type=checkbox]:not(:checked):disabled + label:before {
background-color: rgba(0,0,0,.26);
border: none
}
[type=checkbox].tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
transform: scale(1)
}
[type=checkbox]:checked + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-color: transparent #6f87a6 #6f87a6 transparent;
border-style: solid;
border-width: 2px;
height: 22px;
left: -5px;
top: -4px;
transform: rotate(40deg);
transform-origin: 100% 100%;
width: 12px
}
[type=checkbox]:checked:disabled + label:before {
border-bottom: 2px solid rgba(0,0,0,.26);
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox]:indeterminate + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: none;
border-right: 2px solid #6f87a6;
height: 22px;
left: -12px;
top: -11px;
transform: rotate(90deg);
transform-origin: 100% 100%;
width: 10px
}
[type=checkbox]:indeterminate:disabled + label:before {
background-color: transparent;
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox].filled-in + label:after {
border-radius: 2px
}
[type=checkbox].filled-in + label:after, [type=checkbox].filled-in + label:before {
content: "";
left: 0;
position: absolute;
transition: border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;
z-index: 1
}
[type=checkbox].filled-in:not(:checked) + label:before {
border: 3px solid transparent;
height: 0;
left: 6px;
top: 10px;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 0
}
[type=checkbox].filled-in:not(:checked) + label:after {
background-color: transparent;
border: 2px solid #5a5a5a;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in:checked + label:before {
border-color: transparent #fff #fff transparent;
border-style: solid;
border-width: 2px;
height: 13px;
left: 1px;
top: 0;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 8px
}
[type=checkbox].filled-in:checked + label:after {
background-color: #6f87a6;
border: 2px solid #6f87a6;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in.tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border-color: #5a5a5a;
border-radius: 2px
}
[type=checkbox].filled-in.tabbed:checked:focus + label:after {
background-color: #6f87a6;
border-color: #6f87a6;
border-radius: 2px
}
[type=checkbox].filled-in:disabled:not(:checked) + label:before {
background-color: transparent;
border: 2px solid transparent
}
[type=checkbox].filled-in:disabled:not(:checked) + label:after {
background-color: #bdbdbd;
border-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:before {
background-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:after {
background-color: #bdbdbd;
border-color: #bdbdbd
}
.switch, .switch * {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
.switch label {
cursor: pointer
}
.switch label input[type=checkbox] {
height: 0;
opacity: 0;
width: 0
}
.switch label input[type=checkbox]:checked + .lever {
background-color: #cacaca
}
.switch label input[type=checkbox]:checked + .lever:after {
background-color: #6f87a6;
left: 24px
}
.switch label .lever {
background-color: #818181;
border-radius: 15px;
content: "";
display: inline-block;
height: 15px;
margin: 0 16px;
position: relative;
transition: background .3s ease;
vertical-align: middle;
width: 40px
}
.switch label .lever:after {
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
content: "";
display: inline-block;
height: 21px;
left: -5px;
position: absolute;
top: -3px;
transition: left .3s ease,background .3s ease,box-shadow .1s ease;
width: 21px
}
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(111,135,166,.1)
}
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(0,0,0,.08)
}
.switch input[type=checkbox][disabled] + .lever {
cursor: default
}
.switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: #bdbdbd
}
select {
display: none
}
select.browser-default {
display: block
}
select {
background-color: rgba(255,255,255,.9);
border: 1px solid #f2f2f2;
border-radius: 2px;
height: 44px;
padding: 5px;
width: 100%
}
.select-label {
position: absolute
}
.select-wrapper {
position: relative
}
.select-wrapper input.select-dropdown {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
cursor: pointer;
display: block;
font-size: 22px;
height: 44px;
line-height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
position: relative;
width: 100%
}
.select-wrapper span.caret {
color: #000;
color: initial;
font-size: 10px;
position: absolute;
right: 0;
top: 16px
}
.select-wrapper span.caret.disabled {
color: rgba(0,0,0,.26)
}
.select-wrapper + label {
font-size: 9px;
position: absolute;
top: -14px
}
select:disabled {
color: rgba(0,0,0,.3)
}
.select-wrapper input.select-dropdown:disabled {
border-bottom: 1px solid rgba(0,0,0,.3);
color: rgba(0,0,0,.3);
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.select-wrapper i {
color: rgba(0,0,0,.3)
}
.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {
background-color: transparent;
color: rgba(0,0,0,.3)
}
.prefix ~ .select-wrapper {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.prefix ~ label {
margin-left: 3rem
}
.select-dropdown li img {
float: right;
height: 40px;
margin: 5px 15px;
width: 40px
}
.select-dropdown li.optgroup {
border-top: 1px solid #eee
}
.select-dropdown li.optgroup.selected > span {
color: rgba(0,0,0,.7)
}
.select-dropdown li.optgroup > span {
color: rgba(0,0,0,.4)
}
.select-dropdown li.optgroup ~ li.optgroup-option {
padding-left: 1rem
}
.file-field {
position: relative
}
.file-field .file-path-wrapper {
overflow: hidden;
padding-left: 10px
}
.file-field input.file-path {
width: 100%
}
.file-field .btn {
float: left;
height: 44px;
line-height: 44px
}
.file-field span {
cursor: pointer
}
.file-field input[type=file] {
bottom: 0;
cursor: pointer;
filter: alpha(opacity=0);
font-size: 20px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
.range-field {
position: relative
}
input[type=range], input[type=range] + .thumb {
cursor: pointer
}
input[type=range] {
background-color: transparent;
border: none;
margin: 15px 0;
outline: none;
padding: 0;
position: relative;
width: 100%
}
input[type=range]:focus {
outline: none
}
input[type=range] + .thumb {
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 0;
margin-left: -6px;
position: absolute;
top: 10px;
transform: rotate(-45deg);
transform-origin: 50% 50%;
width: 0
}
input[type=range] + .thumb .value {
color: #6f87a6;
display: block;
font-size: 0;
text-align: center;
transform: rotate(45deg);
width: 30px
}
input[type=range] + .thumb.active {
border-radius: 50% 50% 50% 0
}
input[type=range] + .thumb.active .value {
color: #fff;
font-size: 10px;
margin-left: -1px;
margin-top: 8px
}
input[type=range] {
-webkit-appearance: none
}
input[type=range]::-webkit-slider-runnable-track {
background: #c2c0c2;
border: none;
height: 3px
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin: -5px 0 0;
transform-origin: 50% 50%;
-webkit-transition: .3s;
transition: .3s;
width: 14px
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc
}
input[type=range] {
border: 1px solid #fff
}
input[type=range]::-moz-range-track {
background: #ddd;
border: none;
height: 3px
}
input[type=range]::-moz-range-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin-top: -5px;
width: 14px
}
input[type=range]:-moz-focusring {
outline: 1px solid #fff;
outline-offset: -1px
}
input[type=range]:focus::-moz-range-track {
background: #ccc
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
height: 3px
}
input[type=range]::-ms-fill-lower {
background: #777
}
input[type=range]::-ms-fill-upper {
background: #ddd
}
input[type=range]::-ms-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
width: 14px
}
input[type=range]:focus::-ms-fill-lower {
background: #888
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc
}
#modal-lightbox .modal-content .email:before, .icon-category:before, .icon-checkmark:before, .icon-collapse:before, .icon-configurator-back:before, .icon-configurator-cancel:before, .icon-configurator-checkmark-thin:before, .icon-configurator-checkmark:before, .icon-configurator-close:before, .icon-configurator-next:before, .icon-configurator-rotate:before, .icon-connectivity:before, .icon-dotted-arrow-right:before, .icon-down-arrow:before, .icon-driver-experience:before, .icon-edit:before, .icon-envelope:before, .icon-expand:before, .icon-facebook-filled:before, .icon-facebook:before, .icon-fuel-efficiency:before, .icon-geo:before, .icon-header-search:before, .icon-information:before, .icon-instagram:before, .icon-left-arrow:before, .icon-location:before, .icon-map-pin:before, .icon-minus-icon:before, .icon-pdf-icon:before, .icon-phone:before, .icon-play2:before, .icon-play3:before, .icon-play-icon:before, .icon-plus-icon:before, .icon-plus:before, .icon-productivity:before, .icon-quality:before, .icon-revealleft:before, .icon-revealright:before, .icon-right-arrow-with-background:before, .icon-right-arrow:before, .icon-route:before, .icon-safety:before, .icon-shock:before, .icon-tag:before, .icon-target:before, .icon-time:before, .icon-tools:before, .icon-twitter:before, icon-icon-linkedin:before, .icon-upfit:before, .icon-uptime:before, .icon-user:before, .icon-youtube:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, [resources-page] form:before, ms-comp[video] inner-content:before, ms-comp inner-content a[role=button]:after, ms-half[video] part-background:before {
speak: none;
font-feature-settings: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: icomoon !important;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none
}
@font-face {
font-family: icomoon;
font-style: normal;
font-weight: 400;
src: url(https://freightliner.azureedge.net/images/icon-font/icomoon.eot?) format("eot"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.ttf) format("truetype"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.woff) format("woff"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.svg#icomoon) format("svg")
}
.icon-category:before {
content: "a"
}
.icon-checkmark:before {
content: "b"
}
.icon-down-arrow:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
content: "d"
}
.icon-information:before {
content: "i"
}
.icon-instagram:before {
content: "j"
}
.icon-left-arrow:before {
content: "k"
}
.icon-map-pin:before {
content: "l"
}
.icon-minus-icon:before {
content: "m"
}
.icon-pdf-icon:before {
content: "n"
}
.icon-play-icon:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, ms-comp[video] inner-content:before {
content: "p"
}
.icon-plus-icon:before {
content: "q"
}
.icon-productivity:before {
content: "r"
}
.icon-quality:before {
content: "s"
}
.icon-right-arrow:before {
content: "t"
}
.icon-right-arrow-with-background:before {
content: "u"
}
.icon-route:before {
content: "v"
}
.icon-target:before {
content: "x"
}
.icon-time:before {
content: "y"
}
.icon-uptime:before {
content: "B"
}
.icon-user:before {
content: "C"
}
.icon-youtube:before {
content: "D"
}
.icon-safety:before {
content: "E"
}
.icon-upfit:before {
content: "A"
}
.icon-fuel-efficiency:before {
content: "g"
}
.icon-facebook:before {
content: "e"
}
.icon-header-search:before, [resources-page] form:before {
content: "f"
}
.icon-driver-experience:before {
content: "h"
}
.icon-twitter:before {
content: "z"
}
.icon-icon-linkedin:before {
content: "\e900";
font-family: "icomoon" !important;
font-style: normal;
}
.icon-phone:before {
content: "F"
}
.icon-connectivity:before {
content: "c"
}
.icon-plus:before {
content: "o"
}
.icon-revealleft:before {
content: "w"
}
.icon-revealright:before {
content: "G"
}
.icon-play2:before, ms-half[video] part-background:before {
content: "H"
}
.icon-configurator-back:before {
content: "I"
}
.icon-configurator-cancel:before {
content: "J"
}
.icon-configurator-checkmark:before {
content: "K"
}
.icon-configurator-next:before {
content: "L"
}
.icon-configurator-rotate:before {
content: "M"
}
.icon-configurator-close:before {
content: "N"
}
.icon-configurator-checkmark-thin:before {
content: "O"
}
.icon-edit:before {
content: "P"
}
.icon-location:before {
content: "Q"
}
.icon-geo:before {
content: "R"
}
.icon-facebook-filled:before {
content: "S"
}
.icon-collapse:before {
content: "T"
}
.icon-expand:before {
content: "U"
}
.icon-dotted-arrow-right:before, ms-comp inner-content a[role=button]:after {
content: "V"
}
.icon-tag:before {
content: "W"
}
.icon-shock:before {
content: "X"
}
.icon-tools:before {
content: "Y"
}
#modal-lightbox .modal-content .email:before, .icon-envelope:before {
content: "Z"
}
.icon-play3:before {
content: "0"
}
body, html {
min-height: 100%
}
html {
scroll-behavior: smooth
}
.gsc-control-cse {
box-sizing: content-box
}
.gsc-control-cse *, .gsc-control-cse :after, .gsc-control-cse :before {
box-sizing: inherit;
line-height: normal
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .015em;
max-width: 100%;
overflow-x: hidden
}
body > img {
width: 100%
}
body > footer {
border-top: 1px solid #d7d7d7;
padding: 5.8565153734vw 0
}
body > footer inner-content:first-child {
margin: 0 auto;
max-width: 1188px;
width: 90%
}
@media(min-width:768px) {
body > footer inner-content:first-child {
display: flex
}
body > footer inner-content:first-child > * {
flex: 1;
padding: 0 3.6603221083vw
}
body > footer inner-content:first-child > :not(:first-child) {
border-left: 1px solid #f7f7f7
}
}
@media(min-width:768px)and (min-width:1320px) {
body > footer inner-content:first-child > * {
padding: 0 50px
}
}
@media(max-width:767px) {
body > footer inner-content:first-child > * {
border-bottom: 1px solid #d7d7d7;
display: block;
padding: 5.2% 40px
}
}
body > footer inner-content:first-child > .branding {
text-align: center
}
body > footer inner-content:first-child > .branding > a {
display: block;
margin-bottom: 20px
}
@media(min-width:768px) {
body > footer inner-content:first-child > .branding {
padding-left: 0;
text-align: left
}
body > footer inner-content:first-child > .branding > a {
margin-bottom: 30px;
max-width: 148px
}
}
body > footer inner-content:first-child > .branding p {
color: #585858;
font-family: industry,sans-serif;
font-size: 12px;
letter-spacing: .15em;
margin: 1em 0
}
body > footer inner-content:first-child > .branding .social a {
background: #808181;
background-size: 100% 0;
border-radius: 100%;
color: #fff;
display: inline-block;
height: 28px;
line-height: 28px;
margin: 3px;
text-align: center;
text-shadow: none;
transition: all .25s ease-in-out;
width: 28px
}
html:not(.touch) body > footer inner-content:first-child > .branding .social a:hover {
background: #713738;
color: #fff !important;
text-decoration: none
}
@media(max-width:767px) {
body > footer inner-content:first-child > .branding .social a {
height: 40px;
line-height: 40px;
width: 40px
}
}
body > footer inner-content:first-child > :not(.branding) a {
color: #484848;
display: block;
font-family: industry,sans-serif;
font-size: 12px
}
body > footer inner-content:last-child {
margin: 0 auto;
max-width: 1188px;
padding: 5% 0;
width: 90%
}
@media(min-width:768px) {
body > footer inner-content:last-child {
display: flex
}
}
body > footer inner-content:last-child > div {
flex-grow: 1
}
body > footer inner-content:last-child > div.branding {
flex-grow: 0
}
@media(min-width:768px) {
body > footer inner-content:last-child > div.branding {
width: 40%
}
body > footer inner-content:last-child > div.branding > div {
display: flex
}
}
body > footer inner-content:last-child > div.branding > div a {
flex: 1;
max-width: 144px
}
body > footer inner-content:last-child > div.branding > div span {
display: block;
flex: 1;
font-size: 12px
}
@media(min-width:768px) {
body > footer inner-content:last-child > div.branding > div span {
border-left: 1px solid #f7f7f7;
margin: 0 10px;
padding: 5px 10px
}
}
@media(max-width:767px) {
body > footer inner-content:last-child > div.branding > div span {
margin-bottom: 20px;
margin-top: 20px
}
}
body > footer inner-content:last-child > div p {
color: #3b3b3b;
font-size: 12px;
font-weight: 100;
margin: 0
}
iframe, img {
max-width: 100%
}
strong {
font-weight: 600
}
a, label {
cursor: pointer
}
a:focus, a:hover {
text-decoration: none
}
html:not(.touch) a:not(.btn):not([role=button]):not(.btn-default):not(.btn-primary):hover {
color: #713738
}
[clickable] {
cursor: pointer
}
.heading-1, .heading-2, h1, h2, sudo-h1, sudo-h2 {
font-weight: 100;
letter-spacing: .015em
}
.heading-5, .heading-6, h5, h6, sudo-h5, sudo-h6 {
color: #6f87a6;
letter-spacing: .15em
}
[class*=btn] {
font-family: industry,sans-serif;
transition: all .5s ease
}
[class*=btn]:focus, [class*=btn]:hover {
text-decoration: none
}
:not(td) > .btn, :not(td) > a[role=button], :not(td) > button, :not(td) > input[type=button], :not(td) > input[type=submit] {
background-color: #6f87a6;
border: 0;
color: #fff;
font-family: industry,sans-serif;
font-size: 18px;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
padding: 11px 30px;
transition: all .5s ease;
white-space: normal
}
:not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
:not(td) > .btn.toggle.on, :not(td) > a[role=button].toggle.on, :not(td) > button.toggle.on, :not(td) > input[type=button].toggle.on, :not(td) > input[type=submit].toggle.on {
background: #6f87a6
}
html:not(.touch) :not(td) > .btn.toggle.on:hover, html:not(.touch) :not(td) > a[role=button].toggle.on:hover, html:not(.touch) :not(td) > button.toggle.on:hover, html:not(.touch) :not(td) > input[type=button].toggle.on:hover, html:not(.touch) :not(td) > input[type=submit].toggle.on:hover {
background: #7f94b0
}
:not(td) > .btn.toggle:not(.on), :not(td) > a[role=button].toggle:not(.on), :not(td) > button.toggle:not(.on), :not(td) > input[type=button].toggle:not(.on), :not(td) > input[type=submit].toggle:not(.on) {
background: #484848
}
html:not(.touch) :not(td) > .btn.toggle:not(.on):hover, html:not(.touch) :not(td) > a[role=button].toggle:not(.on):hover, html:not(.touch) :not(td) > button.toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=button].toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=submit].toggle:not(.on):hover {
background: #555
}
:not(td) > .btn:focus, :not(td) > a[role=button]:focus, :not(td) > button:focus, :not(td) > input[type=button]:focus, :not(td) > input[type=submit]:focus, html:not(.touch) :not(td) > .btn:hover, html:not(.touch) :not(td) > a[role=button]:hover, html:not(.touch) :not(td) > button:hover, html:not(.touch) :not(td) > input[type=button]:hover, html:not(.touch) :not(td) > input[type=submit]:hover {
background-color: #713738
}
:not(td) > .btn[disabled], :not(td) > a[role=button][disabled], :not(td) > button[disabled], :not(td) > input[type=button][disabled], :not(td) > input[type=submit][disabled] {
cursor: not-allowed;
opacity: .5
}
.note {
display: block;
font-size: .8em
}
input.select, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #efefef url(../png/select-drop-arrow.png) no-repeat 100% !important;
border: none;
border-radius: 0;
box-shadow: 0 1px 0 #aaa;
display: inline-block;
padding: 5px 10px
}
input.select::-ms-expand, select::-ms-expand {
display: none
}
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important
}
input[type=email], input[type=number], input[type=tel], input[type=text], textarea {
background: #efefef;
border: solid #aaa;
border-width: 0 0 1px;
box-sizing: border-box;
display: block;
font-size: 18px;
padding: 5px 10px
}
input[type=email]:not(textarea), input[type=number]:not(textarea), input[type=tel]:not(textarea), input[type=text]:not(textarea), textarea:not(textarea) {
height: 43px
}
textarea {
height: auto
}
body form:not(.gsc-search-box) .input-field label {
font-size: 18px;
left: 10px;
top: 5px
}
.disclaimer {
font-size: .8em;
padding: 10px 0;
text-align: left
}
.disclaimer + .disclaimer {
padding-top: 0
}
.modal {
overflow-y: hidden !important;
will-change: auto
}
.material-tooltip {
font-size: 15px
}
.form-error {
color: red
}
hr {
background: #3b3b3b;
border: 0;
height: 38px;
width: 1px
}
.nav-fixed body {
padding-top: 80px
}
body > nav:not([breadcrumbs]) {
background: #fff;
display: flex;
left: 0;
position: relative;
top: 0;
transition: all .4s;
width: 100%;
z-index: 12
}
.nav-fixed body > nav:not([breadcrumbs]) {
background: #fff;
border-bottom: 1px solid #e5e7e9;
position: fixed
}
body > nav:not([breadcrumbs]) > * {
flex: 1 30%
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * {
display: flex;
margin: 0
}
body > nav:not([breadcrumbs]) > * > * {
flex: 1
}
}
body > nav:not([breadcrumbs]) > * > a {
color: #000;
display: inline-block;
font-family: industry,sans-serif;
font-size: 14px;
font-weight: 600;
height: 80px;
letter-spacing: .75px;
line-height: 80px;
overflow: hidden;
padding: 0 2.7818448023vw;
text-transform: uppercase;
transition: all .25s;
vertical-align: top
}
.nav-fixed body > nav:not([breadcrumbs]) > * > a {
height: 35px;
line-height: 35px;
padding: 0 1.217057101vw
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * > a {
font-size: 10px;
padding: 0 4px
}
}
body > nav:not([breadcrumbs]) .left {
padding-left: 1.4641288433vw
}
body > nav:not([breadcrumbs]) .right {
padding-right: 1.4641288433vw;
text-align: right
}
@media(min-width:900px) {
body > nav:not([breadcrumbs]) .right {
position: relative
}
}
@media(max-width:767px) {
body > nav:not([breadcrumbs]) .right {
padding-right: 0
}
body > nav:not([breadcrumbs]) .right > a:last-of-type {
flex: .5;
font-size: 14px;
width: 30%
}
}
body > nav:not([breadcrumbs]) .right > div {
background: #6f87a6;
display: flex;
height: 80px;
position: absolute;
right: 0;
top: 0;
transition: all .25s;
width: 0
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div {
height: 35px
}
body > nav:not([breadcrumbs]) .right > div button.close {
background: #6f87a6;
border-right: 1px solid rgba(255,255,255,.25);
flex-grow: 0;
transition: background-color .5s;
width: 80px
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div button.close {
width: 80px
}
html:not(.touch) body > nav:not([breadcrumbs]) .right > div button.close:hover {
background-color: #43556c
}
body > nav:not([breadcrumbs]) .right > div button.close i {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px
}
body > nav:not([breadcrumbs]) .right > div > form {
flex-grow: 1;
padding: 0 10px;
position: relative
}
body > nav:not([breadcrumbs]) .right > div > form input {
background: transparent !important;
border: 0;
border-bottom: 0 !important;
box-shadow: none !important;
color: #fff;
display: block;
font-size: 24px;
height: 100%;
height: 80px !important;
line-height: 80px;
margin: 0 !important;
padding: 0 !important
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div > form input {
line-height: 35px
}
body > nav:not([breadcrumbs]) .right > div > form input::-moz-placeholder {
color: #b7c3d3;
opacity: 1
}
body > nav:not([breadcrumbs]) .right > div > form input:-ms-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form input::-webkit-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form ul {
background: #6f87a6;
color: #fff;
list-style: none unset;
position: absolute;
right: 0;
top: 100%;
width: 100%
}
body > nav:not([breadcrumbs]) .right > div > form ul li {
display: block;
padding: 5px 10px;
text-align: left;
text-transform: uppercase
}
body > nav:not([breadcrumbs]) .right > div form {
height: 100%;
margin: 0
}
body > nav:not([breadcrumbs]) .right > div td {
display: block;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
body > nav:not([breadcrumbs]) .right > div table {
margin: 0;
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div {
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div {
height: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div * {
height: inherit
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) .right .search {
flex-basis: 30%;
flex-grow: 0;
max-width: 56px;
padding-right: calc(1.46413vw + 4px)
}
}
.nav-fixed body > nav:not([breadcrumbs]) .right .search, body > nav:not([breadcrumbs]) .right .scrolltop {
display: none
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop {
background-color: #6f87a6;
color: #fff !important;
display: inline-block;
text-align: center;
transition: all .5s ease
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
display: block;
margin-top: 8px;
transform: rotate(180deg)
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:focus, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:hover {
text-decoration: none !important
}
body > nav:not([breadcrumbs]) .right .scrolltop:focus, html:not(.touch) body > nav:not([breadcrumbs]) .right .scrolltop:hover {
background-color: #713738;
color: #fff !important
}
body > nav:not([breadcrumbs]) .center {
min-width: 130px;
text-align: center
}
body > nav:not([breadcrumbs]) .center a {
padding: 0
}
body > nav:not([breadcrumbs]) .center img {
width: 180px
}
.nav-fixed body > nav:not([breadcrumbs]) .center img {
width: 78px
}
nav[breadcrumbs] {
background: rgba(0,0,0,.77);
left: 0;
line-height: 36px;
padding: 0 4.2459736457vw;
top: 0;
width: 100%;
z-index: 1
}
nav[breadcrumbs] > * {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
margin-right: .5em;
transition: opacity .25s
}
nav[breadcrumbs] > :not(:last-child):after {
content: "/";
display: inline-block;
margin-left: .5em
}
nav[breadcrumbs] > a {
opacity: .5
}
html:not(.touch) nav[breadcrumbs] > a:hover {
color: #fff !important;
opacity: 1
}
nav[pagination] {
text-align: center
}
nav[pagination] a {
cursor: pointer;
display: inline-block;
padding: 10px 20px
}
html:not(.touch) nav[pagination] a.active:hover, nav[pagination] a.active {
background: #6f87a6;
color: #fff !important;
cursor: default
}
html:not(.touch) nav[pagination] a:hover {
background: #ebebeb;
text-decoration: none
}
nav[with-subtitle] > a {
align-items: center;
background-color: #6f87a6
}
html:not(.touch) nav[with-subtitle] > a:hover {
background: #713738
}
nav[with-subtitle] > a > span {
color: #fff !important;
z-index: 2
}
nav[with-subtitle] > a span.dir {
flex: 0 0 auto
}
nav[with-subtitle] > a span.dir:after, nav[with-subtitle] > a span.dir:before {
color: #000 !important
}
nav[with-subtitle] > a span.label {
flex: 2 0 auto;
font-size: 37px;
text-align: center
}
@media(min-width:768px)and (max-width:1200px) {
nav[with-subtitle] > a span.label {
font-size: 25px
}
}
@media(max-width:767px) {
nav[with-subtitle] > a span.label {
font-size: 20px
}
}
html:not(.touch) nav[with-subtitle] > a:hover:before {
transform: scaleY(1.1)
}
html:not(.touch) nav[with-subtitle] > a:hover span.dir:after, html:not(.touch) nav[with-subtitle] > a:hover span.dir:before {
color: #000 !important
}
comp-background {
background: #707070 no-repeat top;
background-size: cover;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
@media(max-width:767px) {
comp-background > span {
display: block
}
}
comp-background iframe {
border: none;
left: 50%;
max-width: none;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 0
}
comp-background > .overlay {
background: transparent;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
comp-background video {
min-height: 100%;
min-width: 100%
}
@media(max-width:767px) {
comp-background video {
display: none
}
}
comp-resources:not([vocation]) > .group {
border-bottom: 1px solid #f9fbfe;
padding: 4.39238653vw 20px
}
comp-resources:not([vocation]) > .group:nth-of-type(odd) {
background: #f9fbfe
}
comp-resources:not([vocation]) > .group > .group-inner {
margin: 0 auto;
max-width: 915px
}
@media(max-width:767px) {
comp-resources[vocation] {
padding: 0 20px
}
}
comp-resources[vocation] h2:after {
left: 0;
right: 0
}
comp-resources h2 {
font-size: 30px;
font-weight: 100;
margin: 0 0 1em
}
@media(max-width:1000px) {
comp-resources a {
width: 45%
}
}
@media(max-width:620px) {
comp-resources a {
width: 45%
}
}
@media(max-width:450px) {
comp-resources a {
margin-right: 0 !important;
width: calc(100% - 20px)
}
}
comp-resources a .thumb {
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 5.8565153734vw
}
@media(max-width:767px) {
comp-resources a .thumb {
width: 80px
}
}
comp-resources a .label {
display: block;
margin-left: 6.588579795vw
}
@media(max-width:767px) {
comp-resources a .label {
font-size: 16px;
margin-left: 90px
}
}
comp-resources a:after {
clear: both;
content: "";
display: table
}
comp-resources a:focus, comp-resources a:hover {
text-decoration: none
}
html:not(.touch) comp-resources a:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
transform: scale(1.1);
z-index: 2
}
[resources-page] form {
margin: 60px auto 30px;
position: relative
}
[resources-page] form:before {
font-size: 22px;
left: 0;
position: absolute;
top: 11px
}
[resources-page] form input {
box-sizing: border-box;
padding-left: 30px
}
[resources-page] nav[breadcrumbs] {
background: transparent;
margin: 30px auto;
padding: 0
}
[resources-page] nav[breadcrumbs] a {
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 18px;
opacity: 1
}
html:not(.touch) [resources-page] nav[breadcrumbs] a:hover {
color: #713738 !important
}
[resources-page] nav[breadcrumbs] span {
display: none
}
[resources-page] comp-resources > .group {
background: transparent;
border-top: 1px solid #d7d7d7;
padding: 48px 0
}
[resources-page] comp-resources > .group > .group-inner {
max-width: none
}
[resources-page] .children {
margin: 20px -10px
}
[resources-page] .children a {
margin: 10px
}
#modal-lightbox {
background: transparent
}
#modal-lightbox .modal-content {
padding: 0;
position: relative
}
#modal-lightbox .modal-content .close {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
height: 68px;
position: absolute;
right: 0;
top: 0;
width: 68px
}
#modal-lightbox .modal-content [actions] {
background: #777;
height: 36px;
left: 0;
padding-right: 16px;
position: absolute;
top: 0;
z-index: 1
}
#modal-lightbox .modal-content [actions] > a {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
font-size: 9px;
height: 36px;
line-height: 36px;
text-transform: uppercase
}
#modal-lightbox .modal-content .download {
background: transparent url(../png/download-icon.png) no-repeat 10px;
background-size: 20px;
padding-left: 46px
}
#modal-lightbox .modal-content .email {
margin-left: 20px
}
#modal-lightbox .modal-content .email:before {
display: inline-block;
font-size: 20px;
margin: 0 10px;
vertical-align: middle
}
#modal-lightbox .modal-content img {
width: 100%
}
#modal-lightbox .modal-content .vid-holder {
padding-bottom: 56.25%;
position: relative
}
#modal-lightbox .modal-content .vid-holder > div {
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#modal-lightbox .modal-content .vid-holder .jwplayer {
height: 100% !important;
width: 100% !important
}
#modal-lightbox iframe[name=mailto-target] {
height: 1px;
left: -1px;
opacity: 0;
position: absolute;
top: -1px;
width: 1px
}
ms-comp[cut=left], ms-comp[cut=right] {
margin-top: -161px;
padding-bottom: 161px;
padding-top: 161px
}
@media(max-width:1100px) {
ms-comp[cut=left], ms-comp[cut=right] {
margin-top: -97px;
padding-bottom: 97px;
padding-top: 97px
}
}
@media(max-width:650px) {
ms-comp[cut=left], ms-comp[cut=right] {
margin-top: -51px;
padding-bottom: 51px;
padding-top: 51px
}
}
ms-comp[cut=left] part-background {
-webkit-clip-path: polygon(0 160px,100% 0,100% 100%,0 100%);
clip-path: polygon(0 160px,100% 0,100% 100%,0 100%)
}
@media(max-width:1100px) {
ms-comp[cut=left] part-background {
-webkit-clip-path: polygon(0 96px,100% 0,100% 100%,0 100%);
clip-path: polygon(0 96px,100% 0,100% 100%,0 100%)
}
}
@media(max-width:650px) {
ms-comp[cut=left] part-background {
-webkit-clip-path: polygon(0 50px,100% 0,100% 100%,0 100%);
clip-path: polygon(0 50px,100% 0,100% 100%,0 100%)
}
}
ms-comp[cut=right] part-background {
-webkit-clip-path: polygon(0 0,100% 160px,100% 100%,0 100%);
clip-path: polygon(0 0,100% 160px,100% 100%,0 100%)
}
@media(max-width:1100px) {
ms-comp[cut=right] part-background {
-webkit-clip-path: polygon(0 0,100% 96px,100% 100%,0 100%);
clip-path: polygon(0 0,100% 96px,100% 100%,0 100%)
}
}
@media(max-width:650px) {
ms-comp[cut=right] part-background {
-webkit-clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);
clip-path: polygon(0 0,100% 50px,100% 100%,0 100%)
}
}
ms-sub ~ ms-feature, ms-sub ~ ms-half {
border-top: 1px solid #e0e0e0
}
ms-sub + * {
border-top: none
}
ms-hero {
min-height: 58.5651537335vw
}
ms-hero part-background {
background-color: #e3dde3;
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto
}
@media(max-width:767px) {
ms-hero part-background {
background-size: 120% auto
}
}
ms-hero > div {
padding: 30px;
text-align: center
}
@media(max-width:446px) {
ms-hero > div {
padding-top: 14px
}
}
ms-hero > div > * {
text-transform: uppercase
}
ms-hero h4 {
color: #353435;
font-size: 1.8301610542vw;
font-weight: 300;
margin: 0
}
@media(max-width:657px) {
ms-hero h4 {
font-size: 12px
}
}
ms-hero h1 {
color: #fff;
font-size: 10.8345534407vw;
font-style: italic;
line-height: 1;
margin-top: 1.1713030747vw
}
ms-comp[video] {
cursor: pointer;
min-height: 61vw
}
ms-comp[video] inner-content {
color: #fff;
font-size: 22px;
font-weight: 500;
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%,-50%)
}
ms-comp[video] inner-content:before {
display: block;
font-size: 50px
}
ms-comp[tall] {
padding-top: 57vw
}
ms-comp[tall] part-background {
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto
}
ms-comp[padd-bottom] {
padding-bottom: 27vw
}
ms-comp[padd-bottom] part-background {
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto
}
ms-comp[padd-bottom-large] {
margin-bottom: 50px;
padding-bottom: 50vw
}
ms-comp[padd-bottom-large] part-background {
background-position: bottom;
background-repeat: no-repeat;
background-size: 80% auto
}
@media(max-width:767px) {
ms-comp[padd-bottom-large] part-background {
background-size: 90% auto
}
}
ms-comp:not([tall]):not([padd-bottom]):not([padd-bottom-large]) part-background:before {
background: radial-gradient(ellipse at center,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,0) 50%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0
}
ms-comp part-background {
overflow: hidden
}
ms-comp part-background > video {
height: 100vw;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 110vw
}
ms-comp inner-content {
margin: 0 auto;
max-width: 760px;
padding: 110px 20px;
text-align: center
}
ms-comp inner-content h2 {
font-size: 60px;
font-weight: 300;
line-height: 1
}
ms-comp inner-content h2:not([line-after]) {
font-size: 42px;
margin-bottom: 0
}
ms-comp inner-content h2:not([line-after]) + * {
margin-top: 36px
}
@media(max-width:767px) {
ms-comp inner-content h2 {
font-size: 38px
}
}
ms-comp inner-content h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 0;
text-transform: uppercase
}
ms-comp inner-content h4 + * {
margin-top: 10px
}
ms-comp inner-content p {
font-family: industry,sans-serif;
font-size: 18px;
line-height: 1.6;
margin: 0 auto;
max-width: 650px
}
ms-comp inner-content a[role=button] {
background: transparent;
border: 1px solid #1c9cff;
border-radius: 2px;
color: #122029;
display: inline-block;
font-size: 13.5px;
letter-spacing: .44em;
margin: 30px auto 0;
padding: 10px 60px;
text-transform: uppercase;
transition: box-shadow 1s;
transition-delay: .25s
}
ms-comp inner-content a[role=button]:after {
display: inline-block;
font-size: 28px;
margin-left: 26px;
transition: transform .25s ease-in-out,color .25s ease-in-out;
vertical-align: middle
}
@media(max-width:506px) {
ms-comp inner-content a[role=button]:after {
display: block;
margin-left: 0
}
}
html:not(.touch) ms-comp inner-content a[role=button]:hover, ms-comp inner-content a[role=button]:active, ms-comp inner-content a[role=button]:focus {
background: transparent;
box-shadow: 0 0 25px rgba(28,156,255,.5)
}
html:not(.touch) ms-comp inner-content a[role=button]:hover:after, ms-comp inner-content a[role=button]:active:after, ms-comp inner-content a[role=button]:focus:after {
transform: translateX(30px)
}
ms-comp inner-content [line-after] {
background-image: url(../png/heading-divider.png);
background-position: bottom;
background-repeat: no-repeat;
margin-bottom: 56px;
padding-bottom: 50px
}
ms-comp [text-white] *, ms-comp [text-white] a[role=button] {
color: #fff
}
.swiper-container {
list-style: none;
overflow: hidden;
padding: 0;
position: relative;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column
}
.swiper-wrapper {
box-sizing: content-box;
display: flex;
height: 100%;
position: relative;
transition-property: transform;
width: 100%;
z-index: 1
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
transform: translateZ(0)
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap
}
.swiper-container-free-mode > .swiper-wrapper {
margin: 0 auto;
transition-timing-function: ease-out
}
.swiper-slide {
flex-shrink: 0;
height: 100%;
position: relative;
transition-property: transform;
width: 100%
}
.swiper-invisible-blank-slide {
visibility: hidden
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform,height
}
.swiper-container-3d {
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(270deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(90deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(0deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(180deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
touch-action: pan-y
}
.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
touch-action: pan-x
}
.swiper-button-next, .swiper-button-prev {
background-position: 50%;
background-repeat: no-repeat;
background-size: 27px 44px;
cursor: pointer;
height: 44px;
margin-top: -22px;
position: absolute;
top: 50%;
width: 27px;
z-index: 10
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
cursor: auto;
opacity: .35;
pointer-events: none
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23007aff'/%3E%3C/svg%3E");
left: 10px;
right: auto
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23007aff'/%3E%3C/svg%3E");
left: auto;
right: 10px
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23fff'/%3E%3C/svg%3E")
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23fff'/%3E%3C/svg%3E")
}
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z'/%3E%3C/svg%3E")
}
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z'/%3E%3C/svg%3E")
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
transform: translateZ(0);
transition: opacity .3s;
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
font-size: 0;
overflow: hidden
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
position: relative;
transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(.33)
}
.swiper-pagination-bullet {
background: #000;
border-radius: 100%;
display: inline-block;
height: 8px;
opacity: .2;
width: 8px
}
button.swiper-pagination-bullet {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
box-shadow: none;
margin: 0;
padding: 0
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
background: #007aff;
opacity: 1
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0,-50%,0)
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
display: block;
margin: 6px 0
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: transform .2s,top .2s
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: transform .2s,left .2s
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: transform .2s,right .2s
}
.swiper-pagination-progressbar {
background: rgba(0,0,0,.25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(0);
transform-origin: left top;
width: 100%
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top
}
.swiper-container-horizontal > .swiper-pagination-progressbar {
height: 4px;
left: 0;
top: 0;
width: 100%
}
.swiper-container-vertical > .swiper-pagination-progressbar {
height: 100%;
left: 0;
top: 0;
width: 4px
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255,255,255,.25)
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0,0,0,.25)
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
background: rgba(0,0,0,.1);
border-radius: 10px;
position: relative;
-ms-touch-action: none
}
.swiper-container-horizontal > .swiper-scrollbar {
bottom: 3px;
height: 5px;
left: 1%;
position: absolute;
width: 98%;
z-index: 50
}
.swiper-container-vertical > .swiper-scrollbar {
height: 98%;
position: absolute;
right: 3px;
top: 1%;
width: 5px;
z-index: 50
}
.swiper-scrollbar-drag {
background: rgba(0,0,0,.5);
border-radius: 10px;
height: 100%;
left: 0;
position: relative;
top: 0;
width: 100%
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
text-align: center;
width: 100%
}
.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
max-height: 100%;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
.swiper-lazy-preloader {
-webkit-animation: swiper-preloader-spin 1s steps(12) infinite;
animation: swiper-preloader-spin 1s steps(12) infinite;
height: 42px;
left: 50%;
margin-left: -21px;
margin-top: -21px;
position: absolute;
top: 50%;
transform-origin: 50%;
width: 42px;
z-index: 10
}
.swiper-lazy-preloader:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: block;
height: 100%;
width: 100%
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%23fff' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E")
}
@-webkit-keyframes swiper-preloader-spin {
to {
transform: rotate(1turn)
}
}
@keyframes swiper-preloader-spin {
to {
transform: rotate(1turn)
}
}
.swiper-container .swiper-notification {
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
pointer-events: none;
transform-origin: 0 0;
visibility: hidden;
width: 100%;
z-index: 1
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 0
}
.swiper-container-cube .swiper-cube-shadow {
background: #000;
bottom: 0;
filter: blur(50px);
height: 100%;
left: 0;
opacity: .6;
position: absolute;
width: 100%;
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 0
}
.swiper-container-coverflow .swiper-wrapper {
-ms-perspective: 1200px
}
comp-count-cards {
margin: 0 auto;
max-width: 1130px;
padding: 11.7130307467vw 20px
}
@media(min-width:768px) {
comp-count-cards {
display: flex
}
}
@media(max-width:767px) {
comp-count-cards {
display: block
}
}
comp-count-cards > * {
text-align: center
}
@media(min-width:768px) {
comp-count-cards > * {
flex-basis: 33%;
max-width: 33%
}
comp-count-cards > :not(:last-child) {
margin-right: 66px
}
}
@media(max-width:767px) {
comp-count-cards > :not(:last-child) {
margin-bottom: 66px
}
}
comp-count-cards > * > * {
display: block
}
comp-count-cards > * pre-header {
color: #787878;
font-family: industry,sans-serif;
font-weight: 500;
margin-bottom: 50px
}
comp-count-cards > * header {
color: #2c6a9e;
font-family: Tungsten Cond A,Tungsten Cond B,industry,sans-serif;
font-size: 250px;
font-weight: 300;
line-height: 184px;
margin-bottom: 50px
}
@media(max-width:850px) {
comp-count-cards > * header {
font-size: 200px;
line-height: 130px
}
}
@media(max-width:767px) {
comp-count-cards > * header {
line-height: 84px
}
}
comp-count-cards > * header[type=per]:after {
content: "%"
}
comp-count-cards > * header[prepend]:before {
content: attr(prepend)
}
comp-count-cards > * header[append]:after {
content: attr(append)
}
comp-count-cards > * p {
color: #787878;
font-family: industry,sans-serif;
font-size: 18px;
font-weight: 300;
margin: 0 auto;
max-width: 195px
}
ms-feature part-background {
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto
}
@media(max-width:767px) {
ms-feature part-background:first-of-type {
display: none
}
}
@media(min-width:768px) {
ms-feature part-background + part-background {
display: none
}
}
ms-feature > div {
margin: 0 auto;
max-width: 760px;
padding: 30px;
text-align: center
}
@media(max-width:767px) {
ms-feature > div {
padding: 30px 14px
}
}
ms-feature h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 10;
margin-top: 0;
text-transform: uppercase
}
@media(max-width:767px) {
ms-feature h4 {
font-size: 10px;
letter-spacing: .2em;
margin-bottom: 23px;
margin-top: 10px
}
}
ms-feature h1 {
box-shadow: inset 0 -35px 0 rgba(255,255,255,.4);
display: inline;
font-size: 70px;
line-height: 1.2;
vertical-align: text-bottom
}
@media(max-width:767px) {
ms-feature h1 {
box-shadow: inset 0 -24px 0 rgba(255,255,255,.4);
font-size: 36px
}
}
ms-feature[theme=Dark] h1 {
box-shadow: inset 0 -35px 0 rgba(0,0,0,.12);
color: #fff
}
@media(max-width:767px) {
ms-feature[theme=Dark] h1 {
box-shadow: inset 0 -24px 0 rgba(0,0,0,.12)
}
}
ms-half part-background {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover
}
ms-half[video] part-background {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center
}
ms-half[video] part-background:before {
font-size: 42px;
margin-bottom: 16px
}
ms-half[video] part-background:after {
content: "Watch the Movie";
font-size: 20px
}
ms-half[video] part-background:after, ms-half[video] part-background:before {
color: #fff;
display: block;
text-align: center;
text-shadow: 0 1px 6px rgba(0,0,0,.5)
}
@media(min-width:961px) {
ms-half {
display: flex
}
ms-half > * {
flex: 1;
flex-basis: 50%;
width: 50%
}
}
@media(max-width:960px) {
ms-half {
display: block
}
ms-half part-background {
display: block;
height: 50vw;
min-height: 360px
}
}
ms-half > div {
background: #fff;
padding: 124px;
text-align: left
}
@media(max-width:767px) {
ms-half > div {
padding: 34px
}
}
ms-half h2 {
font-size: 40px;
line-height: 1.45;
margin: 0;
max-width: 340px
}
ms-half h2 + * {
margin-top: 50px
}
@media(max-width:767px) {
ms-half h2 {
font-size: 36px;
line-height: normal
}
ms-half h2 + * {
margin-top: 20px
}
}
ms-half a[role=button] {
background: transparent;
color: #353435;
display: inline-block;
font-size: 13.5px;
letter-spacing: .2em;
margin-top: 16px;
padding-left: 0;
text-transform: uppercase
}
html:not(.touch) ms-half a[role=button]:hover, ms-half a[role=button]:active, ms-half a[role=button]:focus {
background: transparent
}
ms-half a[role=button]:after {
content: "+";
display: inline-block;
font-size: 25px;
margin-left: 10px;
vertical-align: middle
}
ms-half[image-position=right] part-background {
order: 2
}
@media(min-width:961px) {
ms-half[float] {
display: block;
height: 50vw;
position: relative
}
ms-half[float] part-background {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
ms-half[float] > div {
box-shadow: 0 0 32px 0 rgba(0,0,0,.3);
min-width: 688px;
padding: 88px 124px;
position: absolute;
top: 25%;
z-index: 2
}
ms-half[float][video][image-position=left] part-background {
padding-right: 50vw
}
ms-half[float][video][image-position=right] part-background {
padding-left: 50vw
}
ms-half[float][image-position=left] > div {
right: 0
}
ms-half[float][image-position=right] > div {
left: 0
}
}
ms-grid {
background-position: cenetr 50%;
background-size: cover;
display: flex;
flex-wrap: wrap
}
@media(min-width:768px) {
ms-grid ms-item {
background: #fff;
cursor: pointer;
margin: .5px;
outline: 1px solid #e0e0e0;
padding: 60px;
position: relative;
transition: background-color .5s,color .5s,outline .5s;
width: calc(33.333% - 1px)
}
ms-grid ms-item * {
transition: color .5s
}
ms-grid ms-item:first-child {
z-index: 29
}
ms-grid ms-item:nth-child(2) {
z-index: 28
}
ms-grid ms-item:nth-child(3) {
z-index: 27
}
ms-grid ms-item:nth-child(4) {
z-index: 26
}
ms-grid ms-item:nth-child(5) {
z-index: 25
}
ms-grid ms-item:nth-child(6) {
z-index: 24
}
ms-grid ms-item:nth-child(7) {
z-index: 23
}
ms-grid ms-item:nth-child(8) {
z-index: 22
}
ms-grid ms-item:nth-child(9) {
z-index: 21
}
ms-grid ms-item:nth-child(10) {
z-index: 20
}
ms-grid ms-item:nth-child(11) {
z-index: 19
}
ms-grid ms-item:nth-child(12) {
z-index: 18
}
ms-grid ms-item:nth-child(13) {
z-index: 17
}
ms-grid ms-item:nth-child(14) {
z-index: 16
}
ms-grid ms-item:nth-child(15) {
z-index: 15
}
ms-grid ms-item:nth-child(16) {
z-index: 14
}
ms-grid ms-item:nth-child(17) {
z-index: 13
}
ms-grid ms-item:nth-child(18) {
z-index: 12
}
ms-grid ms-item:nth-child(19) {
z-index: 11
}
ms-grid ms-item:nth-child(20) {
z-index: 10
}
ms-grid ms-item:nth-child(21) {
z-index: 9
}
ms-grid ms-item:nth-child(22) {
z-index: 8
}
ms-grid ms-item:nth-child(23) {
z-index: 7
}
ms-grid ms-item:nth-child(24) {
z-index: 6
}
ms-grid ms-item:nth-child(25) {
z-index: 5
}
ms-grid ms-item:nth-child(26) {
z-index: 4
}
ms-grid ms-item:nth-child(27) {
z-index: 3
}
ms-grid ms-item:nth-child(28) {
z-index: 2
}
ms-grid ms-item:nth-child(29) {
z-index: 1
}
ms-grid ms-item:nth-child(30) {
z-index: 0
}
}
@media(min-width:768px)and (max-width:960px) {
ms-grid ms-item {
width: 50%
}
}
@media(max-width:767px) {
ms-grid ms-item {
background: #fff;
box-shadow: 0 0 30px rgba(0,0,0,.2);
box-sizing: border-box;
height: 118vw !important;
overflow: hidden
}
ms-grid ms-item part-background {
background-position: top;
background-size: cover;
display: block;
padding-bottom: 60%
}
ms-grid ms-item > h6 {
font-weight: 600;
letter-spacing: .05em;
padding-top: 20px
}
ms-grid ms-item > h6, ms-grid ms-item > p {
padding-left: 24px;
padding-right: 24px
}
ms-grid ms-item > p {
font-family: industry,sans-serif;
font-weight: 300;
line-height: 26px
}
ms-grid ms-item:after {
background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff 50%,#fff);
bottom: 0;
content: "";
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: 1
}
ms-grid.swiper-container {
background: #fefefe;
box-sizing: border-box;
padding: 50px 26px 90px
}
ms-grid.swiper-container .swiper-scrollbar {
border-radius: 0;
bottom: 50px;
height: 1px;
left: 26px;
right: 26px;
width: auto
}
ms-grid.swiper-container .swiper-scrollbar .swiper-scrollbar-drag {
background: #353435;
border-radius: 0;
height: 3px;
top: -1px
}
}
@media(min-width:961px) {
html:not(.touch) ms-grid.over-child:hover ms-item {
outline: 1px solid #fff
}
html:not(.touch) ms-grid.over-child:hover ms-item:not(:hover) {
background-color: transparent;
outline: 1px solid rgba(255,255,255,.4)
}
html:not(.touch) ms-grid.over-child:hover ms-item:not(:hover) * {
color: transparent
}
}
ms-grid h6 {
color: #353435;
font-size: 16px;
font-weight: 400;
letter-spacing: .1em
}
#modal-lightbox.grid-item-modal {
background: #fff;
bottom: 10px;
display: flex !important;
height: auto !important;
left: 10px !important;
max-height: none;
right: 10px;
top: 10px !important;
width: auto !important
}
#modal-lightbox.grid-item-modal part-background {
background-position: top;
background-size: cover;
height: 180px;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#modal-lightbox.grid-item-modal > div {
display: flex;
flex: 1;
padding: 204px 24px 24px
}
#modal-lightbox.grid-item-modal > div > div {
overflow-y: auto
}
#modal-lightbox.grid-item-modal > div h6 {
color: #353435;
font-size: 16px;
font-weight: 600;
letter-spacing: .05em;
padding-top: 0
}
#modal-lightbox.grid-item-modal > div p {
font-family: industry,sans-serif;
font-weight: 300;
line-height: 26px
}
.vid-holder {
background: #000
}
.vid-holder iframe {
border: 0;
height: 100%;
width: 100%
}
ms-hero {
overflow: hidden
}
comp-resources[vocation] > .group {
margin-left: auto;
margin-right: auto;
max-width: 1153px
}
@media(min-width:768px) {
comp-resources[vocation] > .group {
padding: 0 20px
}
}
ms-hero, ms-hero > :not(item-background) {
position: relative
}
ms-hero > :not(item-background) {
z-index: 1
}
ms-container:not([inline]), ms-container > :not([inline]), ms-float:not([inline]), ms-hero:not([inline]), ms-news:not([inline]), ms-slides:not([inline]), ms-slides > header:not([inline]), ms-videos:not([inline]), ms-videos > header:not([inline]) {
display: block
}
@-webkit-keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@keyframes collapse-expand {
0% {
max-height: 0;
opacity: 0;
overflow: hidden
}
99% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: none;
opacity: 1;
overflow: visible;
width: 100%
}
}
@-webkit-keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
@keyframes collapse {
0% {
max-height: none;
opacity: 1;
overflow: visible
}
1% {
max-height: 100vh;
opacity: 1;
overflow: hidden;
width: 99.999%
}
to {
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%
}
}
comp-resources[vocation] h2 {
font-weight: 300;
letter-spacing: .05em;
line-height: 1.25;
margin-bottom: 45px !important;
margin-top: 0;
padding-bottom: 18px !important;
position: relative
}
comp-resources[vocation] h2:after {
border-top: 1px solid rgba(151,151,151,.15);
bottom: 0;
content: "";
left: 20px;
position: absolute;
right: 20px
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif
}
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, 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
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace,monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0 0 15px;
}
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;
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
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}
*, :after, :before {
box-sizing: border-box
}
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 10px
}
body {
background-color: #fff;
color: #3b3b3b;
font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Segoe UI,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 16px;
line-height: 1.8125
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
a:focus, a:hover {
color: #713738;
text-decoration: underline
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
figure {
margin: 0
}
img {
vertical-align: middle
}
.img-responsive {
display: block;
height: auto;
max-width: 100%
}
.img-rounded {
border-radius: 6px
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.8125;
max-width: 100%;
padding: 4px;
transition: all .2s ease-in-out
}
.img-circle {
border-radius: 50%
}
hr {
border-top: 1px solid #eee;
margin-bottom: 29px;
margin-top: 29px
}
.sr-only {
clip: rect(0,0,0,0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.sr-only-focusable:active, .sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}
[role=button] {
cursor: pointer
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: #3b3b3b;
font-family: industry,sans-serif;
font-weight: 500;
line-height: 1.1
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
color: #777;
font-weight: 400;
line-height: 1
}
.h1, .h2, .h3, h1, h2, h3 {
margin-bottom: 14.5px;
margin-top: 29px
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
font-size: 65%
}
.h4, .h5, .h6, h4, h5, h6 {
margin-bottom: 14.5px;
margin-top: 14.5px
}
.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
font-size: 75%
}
.h1, h1 {
font-size: 48px
}
.h2, h2 {
font-size: 33px
}
.h3, h3 {
font-size: 24px
}
.h4, h4 {
font-size: 18px
}
.h5, h5 {
font-size: 16px
}
.h6, h6 {
font-size: 12px
}
p {
margin: 0 0 14.5px
}
.lead {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
margin-bottom: 29px
}
@media(min-width:768px) {
.lead {
font-size: 24px
}
}
.small, small {
font-size: 87%
}
.mark, mark {
background-color: #fcf8e3;
padding: .2em
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.text-nowrap {
white-space: nowrap
}
.text-lowercase {
text-transform: lowercase
}
.initialism, .text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
.text-muted {
color: #777
}
.text-primary {
color: #337ab7
}
a.text-primary:focus, a.text-primary:hover {
color: #286090
}
.text-success {
color: #3c763d
}
a.text-success:focus, a.text-success:hover {
color: #2b542c
}
.text-info {
color: #31708f
}
a.text-info:focus, a.text-info:hover {
color: #245269
}
.text-warning {
color: #8a6d3b
}
a.text-warning:focus, a.text-warning:hover {
color: #66512c
}
.text-danger {
color: #a94442
}
a.text-danger:focus, a.text-danger:hover {
color: #843534
}
.bg-primary {
background-color: #337ab7;
color: #fff
}
a.bg-primary:focus, a.bg-primary:hover {
background-color: #286090
}
.bg-success {
background-color: #dff0d8
}
a.bg-success:focus, a.bg-success:hover {
background-color: #c1e2b3
}
.bg-info {
background-color: #d9edf7
}
a.bg-info:focus, a.bg-info:hover {
background-color: #afd9ee
}
.bg-warning {
background-color: #fcf8e3
}
a.bg-warning:focus, a.bg-warning:hover {
background-color: #f7ecb5
}
.bg-danger {
background-color: #f2dede
}
a.bg-danger:focus, a.bg-danger:hover {
background-color: #e4b9b9
}
.page-header {
border-bottom: 1px solid #eee;
margin: 58px 0 29px;
padding-bottom: 13.5px
}
ol, ul {
margin-bottom: 14.5px;
margin-top: 0
}
ol ol, ol ul, ul ol, ul ul {
margin-bottom: 0
}
.list-inline, .list-unstyled {
list-style: none;
padding-left: 0
}
.list-inline {
margin-left: -5px
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px
}
dl {
margin-bottom: 29px;
margin-top: 0
}
dd, dt {
line-height: 1.8125
}
dt {
font-weight: 700
}
dd {
margin-left: 0
}
.dl-horizontal dd:after, .dl-horizontal dd:before {
content: " ";
display: table
}
.dl-horizontal dd:after {
clear: both
}
@media(min-width:768px) {
.dl-horizontal dt {
clear: left;
float: left;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 160px
}
.dl-horizontal dd {
margin-left: 180px
}
}
abbr[data-original-title], abbr[title] {
border-bottom: 1px dotted #777;
cursor: help
}
.initialism {
font-size: 90%
}
blockquote {
border-left: 5px solid #eee;
font-size: 20px;
margin: 0 0 29px;
padding: 14.5px 29px
}
blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
margin-bottom: 0
}
blockquote .small, blockquote footer, blockquote small {
color: #777;
display: block;
font-size: 80%;
line-height: 1.8125
}
blockquote .small:before, blockquote footer:before, blockquote small:before {
content: "— "
}
.blockquote-reverse, blockquote.pull-right {
border-left: 0;
border-right: 5px solid #eee;
padding-left: 0;
padding-right: 15px;
text-align: right
}
.blockquote-reverse .small:before, .blockquote-reverse footer:before, .blockquote-reverse small:before, blockquote.pull-right .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before {
content: ""
}
.blockquote-reverse .small:after, .blockquote-reverse footer:after, .blockquote-reverse small:after, blockquote.pull-right .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after {
content: " —"
}
address {
font-style: normal;
margin-bottom: 29px
}
.btn, address {
line-height: 1.8125
}
.btn {
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn.focus, .btn:focus, .btn:hover {
color: #fff;
text-decoration: none
}
.btn.active, .btn:active {
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
outline: 0
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
box-shadow: none;
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: .65
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none
}
.btn-default {
background-color: #6f87a6;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open > .btn-default.dropdown-toggle {
background-color: #566e8c;
border-color: transparent;
color: #fff
}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .btn-default.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover {
background-color: #495c76;
border-color: transparent;
color: #fff
}
.btn-default.active, .btn-default:active, .open > .btn-default.dropdown-toggle {
background-image: none
}
.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
background-color: #6f87a6;
border-color: transparent
}
.btn-default .badge {
background-color: #fff;
color: #6f87a6
}
.btn-primary {
background-color: #484848;
border-color: #888;
color: #fff
}
.btn-primary.focus, .btn-primary:focus {
background-color: #2f2f2f;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open > .btn-primary.dropdown-toggle {
background-color: #2f2f2f;
border-color: dimgray;
color: #fff
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
background-color: #1d1d1d;
border-color: #484848;
color: #fff
}
.btn-primary.active, .btn-primary:active, .open > .btn-primary.dropdown-toggle {
background-image: none
}
.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
background-color: #484848;
border-color: #888
}
.btn-primary .badge {
background-color: #fff;
color: #484848
}
.btn-success {
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff
}
.btn-success.focus, .btn-success:focus {
background-color: #449d44;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .btn-success:hover, .open > .btn-success.dropdown-toggle {
background-color: #449d44;
border-color: #398439;
color: #fff
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .btn-success.dropdown-toggle.focus, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle:hover {
background-color: #398439;
border-color: #255625;
color: #fff
}
.btn-success.active, .btn-success:active, .open > .btn-success.dropdown-toggle {
background-image: none
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
background-color: #5cb85c;
border-color: #4cae4c
}
.btn-success .badge {
background-color: #fff;
color: #5cb85c
}
.btn-info {
background-color: #5bc0de;
border-color: #46b8da;
color: #fff
}
.btn-info.focus, .btn-info:focus {
background-color: #31b0d5;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .btn-info:hover, .open > .btn-info.dropdown-toggle {
background-color: #31b0d5;
border-color: #269abc;
color: #fff
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover {
background-color: #269abc;
border-color: #1b6d85;
color: #fff
}
.btn-info.active, .btn-info:active, .open > .btn-info.dropdown-toggle {
background-image: none
}
.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
background-color: #5bc0de;
border-color: #46b8da
}
.btn-info .badge {
background-color: #fff;
color: #5bc0de
}
.btn-warning {
background-color: #f0ad4e;
border-color: #eea236;
color: #fff
}
.btn-warning.focus, .btn-warning:focus {
background-color: #ec971f;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .btn-warning:hover, .open > .btn-warning.dropdown-toggle {
background-color: #ec971f;
border-color: #d58512;
color: #fff
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .btn-warning.dropdown-toggle.focus, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle:hover {
background-color: #d58512;
border-color: #985f0d;
color: #fff
}
.btn-warning.active, .btn-warning:active, .open > .btn-warning.dropdown-toggle {
background-image: none
}
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color: #f0ad4e;
border-color: #eea236
}
.btn-warning .badge {
background-color: #fff;
color: #f0ad4e
}
.btn-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: #fff
}
.btn-danger.focus, .btn-danger:focus {
background-color: #c9302c;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .btn-danger:hover, .open > .btn-danger.dropdown-toggle {
background-color: #c9302c;
border-color: #ac2925;
color: #fff
}
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .btn-danger.dropdown-toggle.focus, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle:hover {
background-color: #ac2925;
border-color: #761c19;
color: #fff
}
.btn-danger.active, .btn-danger:active, .open > .btn-danger.dropdown-toggle {
background-image: none
}
.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
background-color: #d9534f;
border-color: #d43f3a
}
.btn-danger .badge {
background-color: #fff;
color: #d9534f
}
.btn-link {
border-radius: 0;
color: #6f87a6;
font-weight: 400
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
background-color: transparent;
box-shadow: none
}
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent
}
.btn-link:focus, .btn-link:hover {
background-color: transparent;
color: #713738;
text-decoration: underline
}
.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
color: #777;
text-decoration: none
}
.btn-lg {
border-radius: 6px;
font-size: 20px;
line-height: 1.3333333;
padding: 10px 16px
}
.btn-sm {
padding: 5px 10px
}
.btn-sm, .btn-xs {
border-radius: 3px;
font-size: 14px;
line-height: 1.5
}
.btn-xs {
padding: 1px 5px
}
.btn-block {
display: block;
width: 100%
}
.btn-block + .btn-block {
margin-top: 5px
}
input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
width: 100%
}
.fade {
opacity: 0;
transition: opacity .15s linear
}
.fade.in {
opacity: 1
}
.collapse {
display: none
}
.collapse.in {
display: block
}
tr.collapse.in {
display: table-row
}
tbody.collapse.in {
display: table-row-group
}
.collapsing {
height: 0;
overflow: hidden;
position: relative;
transition-duration: .35s;
transition-property: height,visibility;
transition-timing-function: ease
}
.materialize-red {
background-color: #484848 !important
}
.materialize-red-text {
color: #484848 !important
}
.materialize-red.lighten-5 {
background-color: #fdeaeb !important
}
.materialize-red-text.text-lighten-5 {
color: #fdeaeb !important
}
.materialize-red.lighten-4 {
background-color: #f8c1c3 !important
}
.materialize-red-text.text-lighten-4 {
color: #f8c1c3 !important
}
.materialize-red.lighten-3 {
background-color: #f3989b !important
}
.materialize-red-text.text-lighten-3 {
color: #f3989b !important
}
.materialize-red.lighten-2 {
background-color: #713738 !important
}
.materialize-red-text.text-lighten-2 {
color: #713738 !important
}
.materialize-red.lighten-1 {
background-color: #6f87a6 !important
}
.materialize-red-text.text-lighten-1 {
color: #6f87a6 !important
}
.materialize-red.darken-1 {
background-color: #d0181e !important
}
.materialize-red-text.text-darken-1 {
color: #d0181e !important
}
.materialize-red.darken-2 {
background-color: #b9151b !important
}
.materialize-red-text.text-darken-2 {
color: #b9151b !important
}
.materialize-red.darken-3 {
background-color: #a21318 !important
}
.materialize-red-text.text-darken-3 {
color: #a21318 !important
}
.materialize-red.darken-4 {
background-color: #8b1014 !important
}
.materialize-red-text.text-darken-4 {
color: #8b1014 !important
}
.red {
background-color: #f44336 !important
}
.red-text {
color: #f44336 !important
}
.red.lighten-5 {
background-color: #ffebee !important
}
.red-text.text-lighten-5 {
color: #ffebee !important
}
.red.lighten-4 {
background-color: #ffcdd2 !important
}
.red-text.text-lighten-4 {
color: #ffcdd2 !important
}
.red.lighten-3 {
background-color: #ef9a9a !important
}
.red-text.text-lighten-3 {
color: #ef9a9a !important
}
.red.lighten-2 {
background-color: #e57373 !important
}
.red-text.text-lighten-2 {
color: #e57373 !important
}
.red.lighten-1 {
background-color: #ef5350 !important
}
.red-text.text-lighten-1 {
color: #ef5350 !important
}
.red.darken-1 {
background-color: #e53935 !important
}
.red-text.text-darken-1 {
color: #e53935 !important
}
.red.darken-2 {
background-color: #d32f2f !important
}
.red-text.text-darken-2 {
color: #d32f2f !important
}
.red.darken-3 {
background-color: #c62828 !important
}
.red-text.text-darken-3 {
color: #c62828 !important
}
.red.darken-4 {
background-color: #b71c1c !important
}
.red-text.text-darken-4 {
color: #b71c1c !important
}
.red.accent-1 {
background-color: #ff8a80 !important
}
.red-text.text-accent-1 {
color: #ff8a80 !important
}
.red.accent-2 {
background-color: #ff5252 !important
}
.red-text.text-accent-2 {
color: #ff5252 !important
}
.red.accent-3 {
background-color: #ff1744 !important
}
.red-text.text-accent-3 {
color: #ff1744 !important
}
.red.accent-4 {
background-color: #d50000 !important
}
.red-text.text-accent-4 {
color: #d50000 !important
}
.pink {
background-color: #e91e63 !important
}
.pink-text {
color: #e91e63 !important
}
.pink.lighten-5 {
background-color: #fce4ec !important
}
.pink-text.text-lighten-5 {
color: #fce4ec !important
}
.pink.lighten-4 {
background-color: #f8bbd0 !important
}
.pink-text.text-lighten-4 {
color: #f8bbd0 !important
}
.pink.lighten-3 {
background-color: #f48fb1 !important
}
.pink-text.text-lighten-3 {
color: #f48fb1 !important
}
.pink.lighten-2 {
background-color: #f06292 !important
}
.pink-text.text-lighten-2 {
color: #f06292 !important
}
.pink.lighten-1 {
background-color: #ec407a !important
}
.pink-text.text-lighten-1 {
color: #ec407a !important
}
.pink.darken-1 {
background-color: #d81b60 !important
}
.pink-text.text-darken-1 {
color: #d81b60 !important
}
.pink.darken-2 {
background-color: #c2185b !important
}
.pink-text.text-darken-2 {
color: #c2185b !important
}
.pink.darken-3 {
background-color: #ad1457 !important
}
.pink-text.text-darken-3 {
color: #ad1457 !important
}
.pink.darken-4 {
background-color: #880e4f !important
}
.pink-text.text-darken-4 {
color: #880e4f !important
}
.pink.accent-1 {
background-color: #ff80ab !important
}
.pink-text.text-accent-1 {
color: #ff80ab !important
}
.pink.accent-2 {
background-color: #ff4081 !important
}
.pink-text.text-accent-2 {
color: #ff4081 !important
}
.pink.accent-3 {
background-color: #f50057 !important
}
.pink-text.text-accent-3 {
color: #f50057 !important
}
.pink.accent-4 {
background-color: #c51162 !important
}
.pink-text.text-accent-4 {
color: #c51162 !important
}
.purple {
background-color: #9c27b0 !important
}
.purple-text {
color: #9c27b0 !important
}
.purple.lighten-5 {
background-color: #f3e5f5 !important
}
.purple-text.text-lighten-5 {
color: #f3e5f5 !important
}
.purple.lighten-4 {
background-color: #e1bee7 !important
}
.purple-text.text-lighten-4 {
color: #e1bee7 !important
}
.purple.lighten-3 {
background-color: #ce93d8 !important
}
.purple-text.text-lighten-3 {
color: #ce93d8 !important
}
.purple.lighten-2 {
background-color: #ba68c8 !important
}
.purple-text.text-lighten-2 {
color: #ba68c8 !important
}
.purple.lighten-1 {
background-color: #ab47bc !important
}
.purple-text.text-lighten-1 {
color: #ab47bc !important
}
.purple.darken-1 {
background-color: #8e24aa !important
}
.purple-text.text-darken-1 {
color: #8e24aa !important
}
.purple.darken-2 {
background-color: #7b1fa2 !important
}
.purple-text.text-darken-2 {
color: #7b1fa2 !important
}
.purple.darken-3 {
background-color: #6a1b9a !important
}
.purple-text.text-darken-3 {
color: #6a1b9a !important
}
.purple.darken-4 {
background-color: #4a148c !important
}
.purple-text.text-darken-4 {
color: #4a148c !important
}
.purple.accent-1 {
background-color: #ea80fc !important
}
.purple-text.text-accent-1 {
color: #ea80fc !important
}
.purple.accent-2 {
background-color: #e040fb !important
}
.purple-text.text-accent-2 {
color: #e040fb !important
}
.purple.accent-3 {
background-color: #d500f9 !important
}
.purple-text.text-accent-3 {
color: #d500f9 !important
}
.purple.accent-4 {
background-color: #a0f !important
}
.purple-text.text-accent-4 {
color: #a0f !important
}
.deep-purple {
background-color: #673ab7 !important
}
.deep-purple-text {
color: #673ab7 !important
}
.deep-purple.lighten-5 {
background-color: #ede7f6 !important
}
.deep-purple-text.text-lighten-5 {
color: #ede7f6 !important
}
.deep-purple.lighten-4 {
background-color: #d1c4e9 !important
}
.deep-purple-text.text-lighten-4 {
color: #d1c4e9 !important
}
.deep-purple.lighten-3 {
background-color: #b39ddb !important
}
.deep-purple-text.text-lighten-3 {
color: #b39ddb !important
}
.deep-purple.lighten-2 {
background-color: #9575cd !important
}
.deep-purple-text.text-lighten-2 {
color: #9575cd !important
}
.deep-purple.lighten-1 {
background-color: #7e57c2 !important
}
.deep-purple-text.text-lighten-1 {
color: #7e57c2 !important
}
.deep-purple.darken-1 {
background-color: #5e35b1 !important
}
.deep-purple-text.text-darken-1 {
color: #5e35b1 !important
}
.deep-purple.darken-2 {
background-color: #512da8 !important
}
.deep-purple-text.text-darken-2 {
color: #512da8 !important
}
.deep-purple.darken-3 {
background-color: #4527a0 !important
}
.deep-purple-text.text-darken-3 {
color: #4527a0 !important
}
.deep-purple.darken-4 {
background-color: #311b92 !important
}
.deep-purple-text.text-darken-4 {
color: #311b92 !important
}
.deep-purple.accent-1 {
background-color: #b388ff !important
}
.deep-purple-text.text-accent-1 {
color: #b388ff !important
}
.deep-purple.accent-2 {
background-color: #7c4dff !important
}
.deep-purple-text.text-accent-2 {
color: #7c4dff !important
}
.deep-purple.accent-3 {
background-color: #651fff !important
}
.deep-purple-text.text-accent-3 {
color: #651fff !important
}
.deep-purple.accent-4 {
background-color: #6200ea !important
}
.deep-purple-text.text-accent-4 {
color: #6200ea !important
}
.indigo {
background-color: #3f51b5 !important
}
.indigo-text {
color: #3f51b5 !important
}
.indigo.lighten-5 {
background-color: #e8eaf6 !important
}
.indigo-text.text-lighten-5 {
color: #e8eaf6 !important
}
.indigo.lighten-4 {
background-color: #c5cae9 !important
}
.indigo-text.text-lighten-4 {
color: #c5cae9 !important
}
.indigo.lighten-3 {
background-color: #9fa8da !important
}
.indigo-text.text-lighten-3 {
color: #9fa8da !important
}
.indigo.lighten-2 {
background-color: #7986cb !important
}
.indigo-text.text-lighten-2 {
color: #7986cb !important
}
.indigo.lighten-1 {
background-color: #5c6bc0 !important
}
.indigo-text.text-lighten-1 {
color: #5c6bc0 !important
}
.indigo.darken-1 {
background-color: #3949ab !important
}
.indigo-text.text-darken-1 {
color: #3949ab !important
}
.indigo.darken-2 {
background-color: #303f9f !important
}
.indigo-text.text-darken-2 {
color: #303f9f !important
}
.indigo.darken-3 {
background-color: #283593 !important
}
.indigo-text.text-darken-3 {
color: #283593 !important
}
.indigo.darken-4 {
background-color: #1a237e !important
}
.indigo-text.text-darken-4 {
color: #1a237e !important
}
.indigo.accent-1 {
background-color: #8c9eff !important
}
.indigo-text.text-accent-1 {
color: #8c9eff !important
}
.indigo.accent-2 {
background-color: #536dfe !important
}
.indigo-text.text-accent-2 {
color: #536dfe !important
}
.indigo.accent-3 {
background-color: #3d5afe !important
}
.indigo-text.text-accent-3 {
color: #3d5afe !important
}
.indigo.accent-4 {
background-color: #304ffe !important
}
.indigo-text.text-accent-4 {
color: #304ffe !important
}
.blue {
background-color: #2196f3 !important
}
.blue-text {
color: #2196f3 !important
}
.blue.lighten-5 {
background-color: #e3f2fd !important
}
.blue-text.text-lighten-5 {
color: #e3f2fd !important
}
.blue.lighten-4 {
background-color: #bbdefb !important
}
.blue-text.text-lighten-4 {
color: #bbdefb !important
}
.blue.lighten-3 {
background-color: #90caf9 !important
}
.blue-text.text-lighten-3 {
color: #90caf9 !important
}
.blue.lighten-2 {
background-color: #64b5f6 !important
}
.blue-text.text-lighten-2 {
color: #64b5f6 !important
}
.blue.lighten-1 {
background-color: #42a5f5 !important
}
.blue-text.text-lighten-1 {
color: #42a5f5 !important
}
.blue.darken-1 {
background-color: #1e88e5 !important
}
.blue-text.text-darken-1 {
color: #1e88e5 !important
}
.blue.darken-2 {
background-color: #1976d2 !important
}
.blue-text.text-darken-2 {
color: #1976d2 !important
}
.blue.darken-3 {
background-color: #1565c0 !important
}
.blue-text.text-darken-3 {
color: #1565c0 !important
}
.blue.darken-4 {
background-color: #0d47a1 !important
}
.blue-text.text-darken-4 {
color: #0d47a1 !important
}
.blue.accent-1 {
background-color: #82b1ff !important
}
.blue-text.text-accent-1 {
color: #82b1ff !important
}
.blue.accent-2 {
background-color: #448aff !important
}
.blue-text.text-accent-2 {
color: #448aff !important
}
.blue.accent-3 {
background-color: #2979ff !important
}
.blue-text.text-accent-3 {
color: #2979ff !important
}
.blue.accent-4 {
background-color: #2962ff !important
}
.blue-text.text-accent-4 {
color: #2962ff !important
}
.light-blue {
background-color: #03a9f4 !important
}
.light-blue-text {
color: #03a9f4 !important
}
.light-blue.lighten-5 {
background-color: #e1f5fe !important
}
.light-blue-text.text-lighten-5 {
color: #e1f5fe !important
}
.light-blue.lighten-4 {
background-color: #b3e5fc !important
}
.light-blue-text.text-lighten-4 {
color: #b3e5fc !important
}
.light-blue.lighten-3 {
background-color: #81d4fa !important
}
.light-blue-text.text-lighten-3 {
color: #81d4fa !important
}
.light-blue.lighten-2 {
background-color: #4fc3f7 !important
}
.light-blue-text.text-lighten-2 {
color: #4fc3f7 !important
}
.light-blue.lighten-1 {
background-color: #29b6f6 !important
}
.light-blue-text.text-lighten-1 {
color: #29b6f6 !important
}
.light-blue.darken-1 {
background-color: #039be5 !important
}
.light-blue-text.text-darken-1 {
color: #039be5 !important
}
.light-blue.darken-2 {
background-color: #0288d1 !important
}
.light-blue-text.text-darken-2 {
color: #0288d1 !important
}
.light-blue.darken-3 {
background-color: #0277bd !important
}
.light-blue-text.text-darken-3 {
color: #0277bd !important
}
.light-blue.darken-4 {
background-color: #01579b !important
}
.light-blue-text.text-darken-4 {
color: #01579b !important
}
.light-blue.accent-1 {
background-color: #80d8ff !important
}
.light-blue-text.text-accent-1 {
color: #80d8ff !important
}
.light-blue.accent-2 {
background-color: #40c4ff !important
}
.light-blue-text.text-accent-2 {
color: #40c4ff !important
}
.light-blue.accent-3 {
background-color: #00b0ff !important
}
.light-blue-text.text-accent-3 {
color: #00b0ff !important
}
.light-blue.accent-4 {
background-color: #0091ea !important
}
.light-blue-text.text-accent-4 {
color: #0091ea !important
}
.cyan {
background-color: #00bcd4 !important
}
.cyan-text {
color: #00bcd4 !important
}
.cyan.lighten-5 {
background-color: #e0f7fa !important
}
.cyan-text.text-lighten-5 {
color: #e0f7fa !important
}
.cyan.lighten-4 {
background-color: #b2ebf2 !important
}
.cyan-text.text-lighten-4 {
color: #b2ebf2 !important
}
.cyan.lighten-3 {
background-color: #80deea !important
}
.cyan-text.text-lighten-3 {
color: #80deea !important
}
.cyan.lighten-2 {
background-color: #4dd0e1 !important
}
.cyan-text.text-lighten-2 {
color: #4dd0e1 !important
}
.cyan.lighten-1 {
background-color: #26c6da !important
}
.cyan-text.text-lighten-1 {
color: #26c6da !important
}
.cyan.darken-1 {
background-color: #00acc1 !important
}
.cyan-text.text-darken-1 {
color: #00acc1 !important
}
.cyan.darken-2 {
background-color: #0097a7 !important
}
.cyan-text.text-darken-2 {
color: #0097a7 !important
}
.cyan.darken-3 {
background-color: #00838f !important
}
.cyan-text.text-darken-3 {
color: #00838f !important
}
.cyan.darken-4 {
background-color: #006064 !important
}
.cyan-text.text-darken-4 {
color: #006064 !important
}
.cyan.accent-1 {
background-color: #84ffff !important
}
.cyan-text.text-accent-1 {
color: #84ffff !important
}
.cyan.accent-2 {
background-color: #18ffff !important
}
.cyan-text.text-accent-2 {
color: #18ffff !important
}
.cyan.accent-3 {
background-color: #00e5ff !important
}
.cyan-text.text-accent-3 {
color: #00e5ff !important
}
.cyan.accent-4 {
background-color: #00b8d4 !important
}
.cyan-text.text-accent-4 {
color: #00b8d4 !important
}
.teal {
background-color: #009688 !important
}
.teal-text {
color: #009688 !important
}
.teal.lighten-5 {
background-color: #e0f2f1 !important
}
.teal-text.text-lighten-5 {
color: #e0f2f1 !important
}
.teal.lighten-4 {
background-color: #b2dfdb !important
}
.teal-text.text-lighten-4 {
color: #b2dfdb !important
}
.teal.lighten-3 {
background-color: #80cbc4 !important
}
.teal-text.text-lighten-3 {
color: #80cbc4 !important
}
.teal.lighten-2 {
background-color: #4db6ac !important
}
.teal-text.text-lighten-2 {
color: #4db6ac !important
}
.teal.lighten-1 {
background-color: #26a69a !important
}
.teal-text.text-lighten-1 {
color: #26a69a !important
}
.teal.darken-1 {
background-color: #00897b !important
}
.teal-text.text-darken-1 {
color: #00897b !important
}
.teal.darken-2 {
background-color: #00796b !important
}
.teal-text.text-darken-2 {
color: #00796b !important
}
.teal.darken-3 {
background-color: #00695c !important
}
.teal-text.text-darken-3 {
color: #00695c !important
}
.teal.darken-4 {
background-color: #004d40 !important
}
.teal-text.text-darken-4 {
color: #004d40 !important
}
.teal.accent-1 {
background-color: #a7ffeb !important
}
.teal-text.text-accent-1 {
color: #a7ffeb !important
}
.teal.accent-2 {
background-color: #64ffda !important
}
.teal-text.text-accent-2 {
color: #64ffda !important
}
.teal.accent-3 {
background-color: #1de9b6 !important
}
.teal-text.text-accent-3 {
color: #1de9b6 !important
}
.teal.accent-4 {
background-color: #00bfa5 !important
}
.teal-text.text-accent-4 {
color: #00bfa5 !important
}
.green {
background-color: #4caf50 !important
}
.green-text {
color: #4caf50 !important
}
.green.lighten-5 {
background-color: #e8f5e9 !important
}
.green-text.text-lighten-5 {
color: #e8f5e9 !important
}
.green.lighten-4 {
background-color: #c8e6c9 !important
}
.green-text.text-lighten-4 {
color: #c8e6c9 !important
}
.green.lighten-3 {
background-color: #a5d6a7 !important
}
.green-text.text-lighten-3 {
color: #a5d6a7 !important
}
.green.lighten-2 {
background-color: #81c784 !important
}
.green-text.text-lighten-2 {
color: #81c784 !important
}
.green.lighten-1 {
background-color: #66bb6a !important
}
.green-text.text-lighten-1 {
color: #66bb6a !important
}
.green.darken-1 {
background-color: #43a047 !important
}
.green-text.text-darken-1 {
color: #43a047 !important
}
.green.darken-2 {
background-color: #388e3c !important
}
.green-text.text-darken-2 {
color: #388e3c !important
}
.green.darken-3 {
background-color: #2e7d32 !important
}
.green-text.text-darken-3 {
color: #2e7d32 !important
}
.green.darken-4 {
background-color: #1b5e20 !important
}
.green-text.text-darken-4 {
color: #1b5e20 !important
}
.green.accent-1 {
background-color: #b9f6ca !important
}
.green-text.text-accent-1 {
color: #b9f6ca !important
}
.green.accent-2 {
background-color: #69f0ae !important
}
.green-text.text-accent-2 {
color: #69f0ae !important
}
.green.accent-3 {
background-color: #00e676 !important
}
.green-text.text-accent-3 {
color: #00e676 !important
}
.green.accent-4 {
background-color: #00c853 !important
}
.green-text.text-accent-4 {
color: #00c853 !important
}
.light-green {
background-color: #8bc34a !important
}
.light-green-text {
color: #8bc34a !important
}
.light-green.lighten-5 {
background-color: #f1f8e9 !important
}
.light-green-text.text-lighten-5 {
color: #f1f8e9 !important
}
.light-green.lighten-4 {
background-color: #dcedc8 !important
}
.light-green-text.text-lighten-4 {
color: #dcedc8 !important
}
.light-green.lighten-3 {
background-color: #c5e1a5 !important
}
.light-green-text.text-lighten-3 {
color: #c5e1a5 !important
}
.light-green.lighten-2 {
background-color: #aed581 !important
}
.light-green-text.text-lighten-2 {
color: #aed581 !important
}
.light-green.lighten-1 {
background-color: #9ccc65 !important
}
.light-green-text.text-lighten-1 {
color: #9ccc65 !important
}
.light-green.darken-1 {
background-color: #7cb342 !important
}
.light-green-text.text-darken-1 {
color: #7cb342 !important
}
.light-green.darken-2 {
background-color: #689f38 !important
}
.light-green-text.text-darken-2 {
color: #689f38 !important
}
.light-green.darken-3 {
background-color: #558b2f !important
}
.light-green-text.text-darken-3 {
color: #558b2f !important
}
.light-green.darken-4 {
background-color: #33691e !important
}
.light-green-text.text-darken-4 {
color: #33691e !important
}
.light-green.accent-1 {
background-color: #ccff90 !important
}
.light-green-text.text-accent-1 {
color: #ccff90 !important
}
.light-green.accent-2 {
background-color: #b2ff59 !important
}
.light-green-text.text-accent-2 {
color: #b2ff59 !important
}
.light-green.accent-3 {
background-color: #76ff03 !important
}
.light-green-text.text-accent-3 {
color: #76ff03 !important
}
.light-green.accent-4 {
background-color: #64dd17 !important
}
.light-green-text.text-accent-4 {
color: #64dd17 !important
}
.lime {
background-color: #cddc39 !important
}
.lime-text {
color: #cddc39 !important
}
.lime.lighten-5 {
background-color: #f9fbe7 !important
}
.lime-text.text-lighten-5 {
color: #f9fbe7 !important
}
.lime.lighten-4 {
background-color: #f0f4c3 !important
}
.lime-text.text-lighten-4 {
color: #f0f4c3 !important
}
.lime.lighten-3 {
background-color: #e6ee9c !important
}
.lime-text.text-lighten-3 {
color: #e6ee9c !important
}
.lime.lighten-2 {
background-color: #dce775 !important
}
.lime-text.text-lighten-2 {
color: #dce775 !important
}
.lime.lighten-1 {
background-color: #d4e157 !important
}
.lime-text.text-lighten-1 {
color: #d4e157 !important
}
.lime.darken-1 {
background-color: #c0ca33 !important
}
.lime-text.text-darken-1 {
color: #c0ca33 !important
}
.lime.darken-2 {
background-color: #afb42b !important
}
.lime-text.text-darken-2 {
color: #afb42b !important
}
.lime.darken-3 {
background-color: #9e9d24 !important
}
.lime-text.text-darken-3 {
color: #9e9d24 !important
}
.lime.darken-4 {
background-color: #827717 !important
}
.lime-text.text-darken-4 {
color: #827717 !important
}
.lime.accent-1 {
background-color: #f4ff81 !important
}
.lime-text.text-accent-1 {
color: #f4ff81 !important
}
.lime.accent-2 {
background-color: #eeff41 !important
}
.lime-text.text-accent-2 {
color: #eeff41 !important
}
.lime.accent-3 {
background-color: #c6ff00 !important
}
.lime-text.text-accent-3 {
color: #c6ff00 !important
}
.lime.accent-4 {
background-color: #aeea00 !important
}
.lime-text.text-accent-4 {
color: #aeea00 !important
}
.yellow {
background-color: #ffeb3b !important
}
.yellow-text {
color: #ffeb3b !important
}
.yellow.lighten-5 {
background-color: #fffde7 !important
}
.yellow-text.text-lighten-5 {
color: #fffde7 !important
}
.yellow.lighten-4 {
background-color: #fff9c4 !important
}
.yellow-text.text-lighten-4 {
color: #fff9c4 !important
}
.yellow.lighten-3 {
background-color: #fff59d !important
}
.yellow-text.text-lighten-3 {
color: #fff59d !important
}
.yellow.lighten-2 {
background-color: #fff176 !important
}
.yellow-text.text-lighten-2 {
color: #fff176 !important
}
.yellow.lighten-1 {
background-color: #ffee58 !important
}
.yellow-text.text-lighten-1 {
color: #ffee58 !important
}
.yellow.darken-1 {
background-color: #fdd835 !important
}
.yellow-text.text-darken-1 {
color: #fdd835 !important
}
.yellow.darken-2 {
background-color: #fbc02d !important
}
.yellow-text.text-darken-2 {
color: #fbc02d !important
}
.yellow.darken-3 {
background-color: #f9a825 !important
}
.yellow-text.text-darken-3 {
color: #f9a825 !important
}
.yellow.darken-4 {
background-color: #f57f17 !important
}
.yellow-text.text-darken-4 {
color: #f57f17 !important
}
.yellow.accent-1 {
background-color: #ffff8d !important
}
.yellow-text.text-accent-1 {
color: #ffff8d !important
}
.yellow.accent-2 {
background-color: #ff0 !important
}
.yellow-text.text-accent-2 {
color: #ff0 !important
}
.yellow.accent-3 {
background-color: #ffea00 !important
}
.yellow-text.text-accent-3 {
color: #ffea00 !important
}
.yellow.accent-4 {
background-color: #ffd600 !important
}
.yellow-text.text-accent-4 {
color: #ffd600 !important
}
.amber {
background-color: #ffc107 !important
}
.amber-text {
color: #ffc107 !important
}
.amber.lighten-5 {
background-color: #fff8e1 !important
}
.amber-text.text-lighten-5 {
color: #fff8e1 !important
}
.amber.lighten-4 {
background-color: #ffecb3 !important
}
.amber-text.text-lighten-4 {
color: #ffecb3 !important
}
.amber.lighten-3 {
background-color: #ffe082 !important
}
.amber-text.text-lighten-3 {
color: #ffe082 !important
}
.amber.lighten-2 {
background-color: #ffd54f !important
}
.amber-text.text-lighten-2 {
color: #ffd54f !important
}
.amber.lighten-1 {
background-color: #ffca28 !important
}
.amber-text.text-lighten-1 {
color: #ffca28 !important
}
.amber.darken-1 {
background-color: #ffb300 !important
}
.amber-text.text-darken-1 {
color: #ffb300 !important
}
.amber.darken-2 {
background-color: #ffa000 !important
}
.amber-text.text-darken-2 {
color: #ffa000 !important
}
.amber.darken-3 {
background-color: #ff8f00 !important
}
.amber-text.text-darken-3 {
color: #ff8f00 !important
}
.amber.darken-4 {
background-color: #ff6f00 !important
}
.amber-text.text-darken-4 {
color: #ff6f00 !important
}
.amber.accent-1 {
background-color: #ffe57f !important
}
.amber-text.text-accent-1 {
color: #ffe57f !important
}
.amber.accent-2 {
background-color: #ffd740 !important
}
.amber-text.text-accent-2 {
color: #ffd740 !important
}
.amber.accent-3 {
background-color: #ffc400 !important
}
.amber-text.text-accent-3 {
color: #ffc400 !important
}
.amber.accent-4 {
background-color: #ffab00 !important
}
.amber-text.text-accent-4 {
color: #ffab00 !important
}
.orange {
background-color: #ff9800 !important
}
.orange-text {
color: #ff9800 !important
}
.orange.lighten-5 {
background-color: #fff3e0 !important
}
.orange-text.text-lighten-5 {
color: #fff3e0 !important
}
.orange.lighten-4 {
background-color: #ffe0b2 !important
}
.orange-text.text-lighten-4 {
color: #ffe0b2 !important
}
.orange.lighten-3 {
background-color: #ffcc80 !important
}
.orange-text.text-lighten-3 {
color: #ffcc80 !important
}
.orange.lighten-2 {
background-color: #ffb74d !important
}
.orange-text.text-lighten-2 {
color: #ffb74d !important
}
.orange.lighten-1 {
background-color: #ffa726 !important
}
.orange-text.text-lighten-1 {
color: #ffa726 !important
}
.orange.darken-1 {
background-color: #fb8c00 !important
}
.orange-text.text-darken-1 {
color: #fb8c00 !important
}
.orange.darken-2 {
background-color: #f57c00 !important
}
.orange-text.text-darken-2 {
color: #f57c00 !important
}
.orange.darken-3 {
background-color: #ef6c00 !important
}
.orange-text.text-darken-3 {
color: #ef6c00 !important
}
.orange.darken-4 {
background-color: #e65100 !important
}
.orange-text.text-darken-4 {
color: #e65100 !important
}
.orange.accent-1 {
background-color: #ffd180 !important
}
.orange-text.text-accent-1 {
color: #ffd180 !important
}
.orange.accent-2 {
background-color: #ffab40 !important
}
.orange-text.text-accent-2 {
color: #ffab40 !important
}
.orange.accent-3 {
background-color: #ff9100 !important
}
.orange-text.text-accent-3 {
color: #ff9100 !important
}
.orange.accent-4 {
background-color: #ff6d00 !important
}
.orange-text.text-accent-4 {
color: #ff6d00 !important
}
.deep-orange {
background-color: #ff5722 !important
}
.deep-orange-text {
color: #ff5722 !important
}
.deep-orange.lighten-5 {
background-color: #fbe9e7 !important
}
.deep-orange-text.text-lighten-5 {
color: #fbe9e7 !important
}
.deep-orange.lighten-4 {
background-color: #ffccbc !important
}
.deep-orange-text.text-lighten-4 {
color: #ffccbc !important
}
.deep-orange.lighten-3 {
background-color: #ffab91 !important
}
.deep-orange-text.text-lighten-3 {
color: #ffab91 !important
}
.deep-orange.lighten-2 {
background-color: #ff8a65 !important
}
.deep-orange-text.text-lighten-2 {
color: #ff8a65 !important
}
.deep-orange.lighten-1 {
background-color: #ff7043 !important
}
.deep-orange-text.text-lighten-1 {
color: #ff7043 !important
}
.deep-orange.darken-1 {
background-color: #f4511e !important
}
.deep-orange-text.text-darken-1 {
color: #f4511e !important
}
.deep-orange.darken-2 {
background-color: #e64a19 !important
}
.deep-orange-text.text-darken-2 {
color: #e64a19 !important
}
.deep-orange.darken-3 {
background-color: #d84315 !important
}
.deep-orange-text.text-darken-3 {
color: #d84315 !important
}
.deep-orange.darken-4 {
background-color: #bf360c !important
}
.deep-orange-text.text-darken-4 {
color: #bf360c !important
}
.deep-orange.accent-1 {
background-color: #ff9e80 !important
}
.deep-orange-text.text-accent-1 {
color: #ff9e80 !important
}
.deep-orange.accent-2 {
background-color: #ff6e40 !important
}
.deep-orange-text.text-accent-2 {
color: #ff6e40 !important
}
.deep-orange.accent-3 {
background-color: #ff3d00 !important
}
.deep-orange-text.text-accent-3 {
color: #ff3d00 !important
}
.deep-orange.accent-4 {
background-color: #dd2c00 !important
}
.deep-orange-text.text-accent-4 {
color: #dd2c00 !important
}
.brown {
background-color: #795548 !important
}
.brown-text {
color: #795548 !important
}
.brown.lighten-5 {
background-color: #efebe9 !important
}
.brown-text.text-lighten-5 {
color: #efebe9 !important
}
.brown.lighten-4 {
background-color: #d7ccc8 !important
}
.brown-text.text-lighten-4 {
color: #d7ccc8 !important
}
.brown.lighten-3 {
background-color: #bcaaa4 !important
}
.brown-text.text-lighten-3 {
color: #bcaaa4 !important
}
.brown.lighten-2 {
background-color: #a1887f !important
}
.brown-text.text-lighten-2 {
color: #a1887f !important
}
.brown.lighten-1 {
background-color: #8d6e63 !important
}
.brown-text.text-lighten-1 {
color: #8d6e63 !important
}
.brown.darken-1 {
background-color: #6d4c41 !important
}
.brown-text.text-darken-1 {
color: #6d4c41 !important
}
.brown.darken-2 {
background-color: #5d4037 !important
}
.brown-text.text-darken-2 {
color: #5d4037 !important
}
.brown.darken-3 {
background-color: #4e342e !important
}
.brown-text.text-darken-3 {
color: #4e342e !important
}
.brown.darken-4 {
background-color: #3e2723 !important
}
.brown-text.text-darken-4 {
color: #3e2723 !important
}
.blue-grey {
background-color: #607d8b !important
}
.blue-grey-text {
color: #607d8b !important
}
.blue-grey.lighten-5 {
background-color: #eceff1 !important
}
.blue-grey-text.text-lighten-5 {
color: #eceff1 !important
}
.blue-grey.lighten-4 {
background-color: #cfd8dc !important
}
.blue-grey-text.text-lighten-4 {
color: #cfd8dc !important
}
.blue-grey.lighten-3 {
background-color: #b0bec5 !important
}
.blue-grey-text.text-lighten-3 {
color: #b0bec5 !important
}
.blue-grey.lighten-2 {
background-color: #90a4ae !important
}
.blue-grey-text.text-lighten-2 {
color: #90a4ae !important
}
.blue-grey.lighten-1 {
background-color: #78909c !important
}
.blue-grey-text.text-lighten-1 {
color: #78909c !important
}
.blue-grey.darken-1 {
background-color: #546e7a !important
}
.blue-grey-text.text-darken-1 {
color: #546e7a !important
}
.blue-grey.darken-2 {
background-color: #455a64 !important
}
.blue-grey-text.text-darken-2 {
color: #455a64 !important
}
.blue-grey.darken-3 {
background-color: #37474f !important
}
.blue-grey-text.text-darken-3 {
color: #37474f !important
}
.blue-grey.darken-4 {
background-color: #263238 !important
}
.blue-grey-text.text-darken-4 {
color: #263238 !important
}
.grey {
background-color: #9e9e9e !important
}
.grey-text {
color: #9e9e9e !important
}
.grey.lighten-5 {
background-color: #fafafa !important
}
.grey-text.text-lighten-5 {
color: #fafafa !important
}
.grey.lighten-4 {
background-color: #f5f5f5 !important
}
.grey-text.text-lighten-4 {
color: #f5f5f5 !important
}
.grey.lighten-3 {
background-color: #eee !important
}
.grey-text.text-lighten-3 {
color: #eee !important
}
.grey.lighten-2 {
background-color: #e0e0e0 !important
}
.grey-text.text-lighten-2 {
color: #e0e0e0 !important
}
.grey.lighten-1 {
background-color: #bdbdbd !important
}
.grey-text.text-lighten-1 {
color: #bdbdbd !important
}
.grey.darken-1 {
background-color: #757575 !important
}
.grey-text.text-darken-1 {
color: #757575 !important
}
.grey.darken-2 {
background-color: #616161 !important
}
.grey-text.text-darken-2 {
color: #616161 !important
}
.grey.darken-3 {
background-color: #424242 !important
}
.grey-text.text-darken-3 {
color: #424242 !important
}
.grey.darken-4 {
background-color: #212121 !important
}
.grey-text.text-darken-4 {
color: #212121 !important
}
.shades.black {
background-color: #000 !important
}
.shades-text.text-black {
color: #000 !important
}
.shades.white {
background-color: #fff !important
}
.shades-text.text-white {
color: #fff !important
}
.shades.transparent {
background-color: transparent !important
}
.shades-text.text-transparent {
color: transparent !important
}
.black {
background-color: #000 !important
}
.black-text {
color: #000 !important
}
.white {
background-color: #fff !important
}
.white-text {
color: #fff !important
}
.transparent {
background-color: transparent !important
}
.transparent-text {
color: transparent !important
}
html {
box-sizing: border-box
}
*, :after, :before {
box-sizing: inherit
}
ul {
list-style-type: none
}
ul.browser-default {
list-style-type: disc
}
a {
-webkit-tap-highlight-color: transparent;
color: #6f87a6;
text-decoration: none
}
.valign-wrapper {
align-items: center;
display: flex
}
.valign-wrapper .valign {
display: block
}
ul {
padding: 0
}
ul li {
list-style-type: none
}
.clearfix {
clear: both
}
.z-depth-0 {
box-shadow: none !important
}
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)
}
.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
}
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)
}
.modal, .z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21)
}
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0,0,0,.2),0 40px 77px 0 rgba(0,0,0,.22)
}
.hoverable {
box-shadow: 0;
transition: box-shadow .25s
}
.hoverable:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
transition: box-shadow .25s
}
.divider {
background-color: #e0e0e0;
height: 1px;
overflow: hidden
}
blockquote {
border-left: 5px solid #713738;
margin: 20px 0;
padding-left: 1.5rem
}
i {
line-height: inherit
}
i.left {
float: left;
margin-right: 15px
}
i.right {
float: right;
margin-left: 15px
}
i.tiny {
font-size: 1rem
}
i.small {
font-size: 2rem
}
i.medium {
font-size: 4rem
}
i.large {
font-size: 6rem
}
img.responsive-img, video.responsive-video {
height: auto;
max-width: 100%
}
.pagination li {
border-radius: 2px;
display: inline-block;
font-size: 1.2rem;
line-height: 30px;
padding: 0 10px;
text-align: center
}
.pagination li a {
color: #444
}
.pagination li.active a {
color: #fff
}
.pagination li.active {
background-color: #713738
}
.pagination li.disabled a {
color: #999;
cursor: default
}
.pagination li i {
font-size: 2.2rem;
vertical-align: middle
}
.pagination li.pages ul li {
display: inline-block;
float: none
}
@media only screen and (max-width:992px) {
.pagination {
width: 100%
}
.pagination li.next, .pagination li.prev {
width: 10%
}
.pagination li.pages {
overflow: hidden;
white-space: nowrap;
width: 80%
}
}
.breadcrumb {
color: rgba(255,255,255,.7);
font-size: 18px
}
.breadcrumb [class*=mdi-], .breadcrumb [class^=mdi-], .breadcrumb i, .breadcrumb i.material-icons {
display: inline-block;
float: left;
font-size: 24px
}
.breadcrumb:before {
-webkit-font-smoothing: antialiased;
color: rgba(255,255,255,.7);
content: "";
display: inline-block;
font-family: Material Icons;
font-size: 25px;
font-style: normal;
font-weight: 400;
margin: 0 10px 0 8px;
vertical-align: top
}
.breadcrumb:first-child:before {
display: none
}
.breadcrumb:last-child {
color: #fff
}
.parallax-container {
height: 500px;
overflow: hidden;
position: relative
}
.parallax {
left: 0;
right: 0;
top: 0;
z-index: -1
}
.parallax, .parallax img {
bottom: 0;
position: absolute
}
.parallax img {
display: none;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translateZ(0);
transform: translateX(-50%)
}
.pin-bottom, .pin-top {
position: relative
}
.pinned {
position: fixed !important
}
.fade-in, ul.staggered-list li {
opacity: 0
}
.fade-in {
transform-origin: 0 50%
}
@media only screen and (max-width:600px) {
.hide-on-small-and-down, .hide-on-small-only {
display: none !important
}
}
@media only screen and (max-width:992px) {
.hide-on-med-and-down {
display: none !important
}
}
@media only screen and (min-width:601px) {
.hide-on-med-and-up {
display: none !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.hide-on-med-only {
display: none !important
}
}
@media only screen and (min-width:993px) {
.hide-on-large-only {
display: none !important
}
.show-on-large {
display: block !important
}
}
@media only screen and (min-width:600px)and (max-width:992px) {
.show-on-medium {
display: block !important
}
}
@media only screen and (max-width:600px) {
.show-on-small {
display: block !important
}
}
@media only screen and (min-width:601px) {
.show-on-medium-and-up {
display: block !important
}
}
@media only screen and (max-width:992px) {
.show-on-medium-and-down {
display: block !important
}
}
@media only screen and (max-width:600px) {
.center-on-small-only {
text-align: center
}
}
footer.page-footer {
background-color: #713738;
margin-top: 20px;
padding-top: 20px
}
footer.page-footer .footer-copyright {
background-color: rgba(51,51,51,.08);
color: rgba(255,255,255,.8);
height: 50px;
line-height: 50px;
overflow: hidden
}
table:not([class^=month-picker]) {
border: none;
display: table;
width: 100%
}
table:not([class^=month-picker]).bordered > tbody > tr, table:not([class^=month-picker]).bordered > thead > tr {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]).striped > tbody > tr:nth-child(odd) {
background-color: #f2f2f2
}
table:not([class^=month-picker]).striped > tbody > tr > td {
border-radius: 0
}
table:not([class^=month-picker]).highlight > tbody > tr {
transition: background-color .25s ease
}
table:not([class^=month-picker]).highlight > tbody > tr:hover {
background-color: #f2f2f2
}
table:not([class^=month-picker]).centered tbody tr td, table:not([class^=month-picker]).centered thead tr th {
text-align: center
}
thead {
border-bottom: 1px solid #ddd
}
table:not([class^=month-picker]) td, table:not([class^=month-picker]) th {
border: none;
border-radius: 2px;
display: table-cell;
padding: 15px 5px;
text-align: left;
vertical-align: middle
}
@media only screen and (max-width:992px) {
table.responsive-table {
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
width: 100%
}
table.responsive-table td:empty:before {
content: "Â "
}
table.responsive-table td, table.responsive-table th {
margin: 0;
vertical-align: top
}
table.responsive-table th {
text-align: left
}
table.responsive-table thead {
display: block;
float: left
}
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0
}
table.responsive-table thead tr th:before {
content: "Â "
}
table.responsive-table tbody {
display: block;
overflow-x: auto;
position: relative;
white-space: nowrap;
width: auto
}
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top
}
table.responsive-table th {
display: block;
text-align: right
}
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left
}
table.responsive-table tr {
padding: 0 10px
}
table.responsive-table thead {
border: 0;
border-right: 1px solid #ddd
}
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0
}
table.responsive-table.bordered td {
border-bottom: 0;
border-left: 0;
border-right: 0
}
table.responsive-table.bordered tr {
border: 0
}
table.responsive-table.bordered tbody tr {
border-right: 1px solid #ddd
}
}
.collection {
border: 1px solid #e0e0e0;
border-radius: 2px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative
}
.collection .collection-item {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
line-height: 1.5rem;
margin: 0;
padding: 10px 20px
}
.collection .collection-item.avatar {
min-height: 84px;
padding-left: 72px;
position: relative
}
.collection .collection-item.avatar .circle {
display: inline-block;
height: 42px;
left: 15px;
overflow: hidden;
position: absolute;
vertical-align: middle;
width: 42px
}
.collection .collection-item.avatar i.circle {
background-color: #999;
color: #fff;
font-size: 18px;
line-height: 42px;
text-align: center
}
.collection .collection-item.avatar .title {
font-size: 16px
}
.collection .collection-item.avatar p {
margin: 0
}
.collection .collection-item.avatar .secondary-content {
position: absolute;
right: 16px;
top: 16px
}
.collection .collection-item:last-child {
border-bottom: none
}
.collection .collection-item.active {
background-color: #6f87a6;
color: #fff
}
.collection .collection-item.active .secondary-content {
color: #fff
}
.collection a.collection-item {
color: #6f87a6;
display: block;
transition: .25s
}
.collection a.collection-item:not(.active):hover {
background-color: #ddd
}
.collection.with-header .collection-header {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 10px 20px
}
.collection.with-header .collection-item {
padding-left: 30px
}
.collection.with-header .collection-item.avatar {
padding-left: 72px
}
.secondary-content {
color: #6f87a6;
float: right
}
.collapsible .collection {
border: none;
margin: 0
}
span.badge {
box-sizing: border-box;
color: #757575;
font-size: 1rem;
line-height: inherit;
min-width: 3rem;
padding: 0 6px;
position: absolute;
right: 15px;
text-align: center
}
span.badge.new {
background-color: #6f87a6;
border-radius: 2px;
color: #fff;
font-size: .8rem;
font-weight: 300
}
span.badge.new:after {
content: " new"
}
nav ul a span.badge {
line-height: 0;
margin-left: 4px;
position: static
}
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative
}
.video-container embed, .video-container iframe, .video-container object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.progress {
background-color: #fff;
border-radius: 2px;
display: block;
height: 4px;
margin: .5rem 0 1rem;
overflow: hidden;
position: relative;
width: 100%
}
.progress .determinate {
background-color: #fff;
bottom: 0;
left: 0;
position: absolute;
top: 0;
transition: width .3s linear
}
.progress .indeterminate {
background-color: #fff
}
.progress .indeterminate:before {
-webkit-animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
}
.progress .indeterminate:after, .progress .indeterminate:before {
background-color: inherit;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
will-change: left,right
}
.progress .indeterminate:after {
-webkit-animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%
}
60% {
left: 100%;
right: -90%
}
to {
left: 100%;
right: -90%
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%
}
60% {
left: 107%;
right: -8%
}
to {
left: 107%;
right: -8%
}
}
.hide {
display: none !important
}
.left-align {
text-align: left
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center
}
.left {
float: left !important
}
.right {
float: right !important
}
.no-select, input[type=range], input[type=range] + .thumb {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.circle {
border-radius: 50%
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.no-padding {
padding: 0 !important
}
em {
font-style: italic
}
strong {
font-weight: 500
}
small {
font-size: 75%
}
.light, footer.page-footer .footer-copyright {
font-weight: 300
}
.thin, nav[with-subtitle] > a span.label {
font-weight: 200
}
.flow-text {
font-weight: 300
}
@media only screen and (min-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
@media only screen and (min-width:390px) {
.flow-text {
font-size: 1.224rem
}
}
@media only screen and (min-width:420px) {
.flow-text {
font-size: 1.248rem
}
}
@media only screen and (min-width:450px) {
.flow-text {
font-size: 1.272rem
}
}
@media only screen and (min-width:480px) {
.flow-text {
font-size: 1.296rem
}
}
@media only screen and (min-width:510px) {
.flow-text {
font-size: 1.32rem
}
}
@media only screen and (min-width:540px) {
.flow-text {
font-size: 1.344rem
}
}
@media only screen and (min-width:570px) {
.flow-text {
font-size: 1.368rem
}
}
@media only screen and (min-width:600px) {
.flow-text {
font-size: 1.392rem
}
}
@media only screen and (min-width:630px) {
.flow-text {
font-size: 1.416rem
}
}
@media only screen and (min-width:660px) {
.flow-text {
font-size: 1.44rem
}
}
@media only screen and (min-width:690px) {
.flow-text {
font-size: 1.464rem
}
}
@media only screen and (min-width:720px) {
.flow-text {
font-size: 1.488rem
}
}
@media only screen and (min-width:750px) {
.flow-text {
font-size: 1.512rem
}
}
@media only screen and (min-width:780px) {
.flow-text {
font-size: 1.536rem
}
}
@media only screen and (min-width:810px) {
.flow-text {
font-size: 1.56rem
}
}
@media only screen and (min-width:840px) {
.flow-text {
font-size: 1.584rem
}
}
@media only screen and (min-width:870px) {
.flow-text {
font-size: 1.608rem
}
}
@media only screen and (min-width:900px) {
.flow-text {
font-size: 1.632rem
}
}
@media only screen and (min-width:930px) {
.flow-text {
font-size: 1.656rem
}
}
@media only screen and (min-width:960px) {
.flow-text {
font-size: 1.68rem
}
}
@media only screen and (max-width:360px) {
.flow-text {
font-size: 1.2rem
}
}
.modal {
background-color: #fafafa;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
overflow-y: auto;
padding: 0;
position: fixed;
right: 0;
width: 55%;
will-change: top,opacity
}
@media only screen and (max-width:992px) {
.modal {
width: 80%
}
}
.modal h1, .modal h2, .modal h3, .modal h4 {
margin-top: 0
}
.modal .modal-content {
padding: 24px
}
.modal .modal-close {
cursor: pointer
}
.modal .modal-footer {
background-color: #fafafa;
border-radius: 0 0 2px 2px;
height: 56px;
padding: 4px 6px;
width: 100%
}
.modal .modal-footer .btn, .modal .modal-footer .btn-flat {
float: right;
margin: 6px 0
}
.lean-overlay {
background: #000;
bottom: 0;
display: none;
height: 125%;
left: 0;
position: fixed;
right: 0;
top: -100px;
width: 100%;
will-change: opacity;
z-index: 999
}
.modal.modal-fixed-footer {
height: 70%;
padding: 0
}
.modal.modal-fixed-footer .modal-content {
height: calc(100% - 56px);
max-height: 100%;
overflow-y: auto;
position: absolute;
width: 100%
}
.modal.modal-fixed-footer .modal-footer {
border-top: 1px solid rgba(0,0,0,.1);
bottom: 0;
position: absolute
}
.modal.bottom-sheet {
border-radius: 0;
bottom: -100%;
margin: 0;
max-height: 45%;
top: auto;
width: 100%;
will-change: bottom,opacity
}
select:focus {
outline: 1px solid #fff
}
button:focus {
background-color: #7c92ae;
outline: none
}
label {
color: #979797;
font-size: 9px
}
::-webkit-input-placeholder {
color: #979797
}
:-moz-placeholder, ::-moz-placeholder {
color: #979797
}
:-ms-input-placeholder {
color: #979797
}
input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
border-radius: 0;
box-shadow: none;
box-sizing: content-box;
font-size: 22px;
height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
transition: all .3s;
width: 100%
}
input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=date]:disabled, input[type=date][readonly=readonly], input[type=datetime-local]:disabled, input[type=datetime-local][readonly=readonly], input[type=datetime]:disabled, input[type=datetime][readonly=readonly], input[type=email]:disabled, input[type=email][readonly=readonly], input[type=number]:disabled, input[type=number][readonly=readonly], input[type=password]:disabled, input[type=password][readonly=readonly], input[type=search]:disabled, input[type=search][readonly=readonly], input[type=tel]:disabled, input[type=tel][readonly=readonly], input[type=text]:disabled, input[type=text][readonly=readonly], input[type=time]:disabled, input[type=time][readonly=readonly], input[type=url]:disabled, input[type=url][readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] {
border-bottom: 1px dotted rgba(0,0,0,.26);
color: rgba(0,0,0,.26)
}
input:not([type]):disabled + label, input:not([type])[readonly=readonly] + label, input[type=date]:disabled + label, input[type=date][readonly=readonly] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly=readonly] + label, input[type=datetime]:disabled + label, input[type=datetime][readonly=readonly] + label, input[type=email]:disabled + label, input[type=email][readonly=readonly] + label, input[type=number]:disabled + label, input[type=number][readonly=readonly] + label, input[type=password]:disabled + label, input[type=password][readonly=readonly] + label, input[type=search]:disabled + label, input[type=search][readonly=readonly] + label, input[type=tel]:disabled + label, input[type=tel][readonly=readonly] + label, input[type=text]:disabled + label, input[type=text][readonly=readonly] + label, input[type=time]:disabled + label, input[type=time][readonly=readonly] + label, input[type=url]:disabled + label, input[type=url][readonly=readonly] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly=readonly] + label {
color: rgba(0,0,0,.26)
}
input:not([type]):focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]):focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=datetime]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
color: #6f87a6
}
input:not([type]).valid, input:not([type]):focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=datetime].valid, input[type=datetime]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=text].valid, input[type=text]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
border-bottom: 1px solid #6f87a6;
box-shadow: 0 1px 0 0 #6f87a6
}
input:not([type]).valid + label:after, input:not([type]):focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=datetime].valid + label:after, input[type=datetime]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after {
color: #6f87a6;
content: attr(data-success);
opacity: 1
}
input:not([type]).invalid, input:not([type]):focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=datetime].invalid, input[type=datetime]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=text].invalid, input[type=text]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
border-bottom: 1px solid #f44336;
box-shadow: 0 1px 0 0 #f44336
}
input:not([type]).invalid + label:after, input:not([type]):focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=datetime].invalid + label:after, input[type=datetime]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after {
color: #f44336;
content: attr(data-error);
opacity: 1
}
input:not([type]).validate + label, input[type=date].validate + label, input[type=datetime-local].validate + label, input[type=datetime].validate + label, input[type=email].validate + label, input[type=number].validate + label, input[type=password].validate + label, input[type=search].validate + label, input[type=tel].validate + label, input[type=text].validate + label, input[type=time].validate + label, input[type=url].validate + label, textarea.materialize-textarea.validate + label {
pointer-events: none;
width: 100%
}
input:not([type]) + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=datetime] + label:after, input[type=email] + label:after, input[type=number] + label:after, input[type=password] + label:after, input[type=search] + label:after, input[type=tel] + label:after, input[type=text] + label:after, input[type=time] + label:after, input[type=url] + label:after, textarea.materialize-textarea + label:after {
content: "";
display: block;
opacity: 0;
position: absolute;
top: 65px;
transition: opacity .2s ease-out,color .2s ease-out
}
.input-field {
margin-top: 1rem;
position: relative
}
.input-field label {
color: #979797;
cursor: text;
font-size: 1rem;
left: .75rem;
position: absolute;
top: .8rem;
transition: .2s ease-out
}
.input-field label.active {
font-size: 9px;
transform: translateY(-140%)
}
.input-field .prefix {
font-size: 2rem;
position: absolute;
transition: color .2s;
width: 44px
}
.input-field .prefix.active {
color: #6f87a6
}
.input-field .prefix ~ input, .input-field .prefix ~ textarea {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.input-field .prefix ~ textarea {
padding-top: .8rem
}
.input-field .prefix ~ label {
margin-left: 3rem
}
@media only screen and (max-width:992px) {
.input-field .prefix ~ input {
width: 86%;
width: calc(100% - 3rem)
}
}
@media only screen and (max-width:600px) {
.input-field .prefix ~ input {
width: 80%;
width: calc(100% - 3rem)
}
}
.input-field input[type=search] {
display: block;
line-height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem)
}
.input-field input[type=search]:focus {
background-color: #fff;
border: 0;
box-shadow: none;
color: #444
}
.input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .material-icons, .input-field input[type=search]:focus ~ .mdi-navigation-close {
color: #444
}
.input-field input[type=search] + label {
left: 1rem
}
.input-field input[type=search] ~ .material-icons, .input-field input[type=search] ~ .mdi-navigation-close {
color: transparent;
cursor: pointer;
font-size: 2rem;
position: absolute;
right: 1rem;
top: 0;
transition: color .3s
}
textarea {
background-color: transparent;
height: 44px;
width: 100%
}
textarea.materialize-textarea {
min-height: 44px;
overflow-y: hidden;
padding: 1.6rem 0;
resize: none
}
.hiddendiv {
word-wrap: break-word;
display: none;
padding-top: 1.2rem;
white-space: pre-wrap
}
[type=radio]:checked, [type=radio]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=radio]:checked + label, [type=radio]:not(:checked) + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
transition: .28s ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
[type=radio] + label:after, [type=radio] + label:before {
content: "";
height: 16px;
left: 0;
margin: 4px;
position: absolute;
top: 0;
transition: .28s ease;
width: 16px;
z-index: 0
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after, [type=radio]:checked + label:before, [type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border-radius: 50%
}
[type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
border: 2px solid #5a5a5a
}
[type=radio]:not(:checked) + label:after {
transform: scale(0);
z-index: -1
}
[type=radio]:checked + label:before {
border: 2px solid transparent
}
[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after {
border: 2px solid #6f87a6
}
[type=radio].with-gap:checked + label:after, [type=radio]:checked + label:after {
background-color: #6f87a6;
z-index: 0
}
[type=radio]:checked + label:after {
transform: scale(1.02)
}
[type=radio].with-gap:checked + label:after {
transform: scale(.5)
}
[type=radio].tabbed:focus + label:before {
box-shadow: 0 0 0 10px rgba(0,0,0,.1)
}
[type=radio].with-gap:disabled:checked + label:before {
border: 2px solid rgba(0,0,0,.26)
}
[type=radio].with-gap:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border: none
}
[type=radio]:disabled:checked + label:before, [type=radio]:disabled:not(:checked) + label:before {
background-color: transparent;
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled + label {
color: rgba(0,0,0,.26)
}
[type=radio]:disabled:not(:checked) + label:before {
border-color: rgba(0,0,0,.26)
}
[type=radio]:disabled:checked + label:after {
background-color: rgba(0,0,0,.26);
border-color: #bdbdbd
}
form p {
margin-bottom: 10px;
text-align: left
}
form p:last-child {
margin-bottom: 0
}
[type=checkbox]:checked, [type=checkbox]:not(:checked) {
left: -9999px;
opacity: 0;
position: absolute
}
[type=checkbox] + label {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 25px;
line-height: 25px;
padding-left: 35px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
[type=checkbox] + label:before, [type=checkbox]:not(.filled-in) + label:after {
border: 2px solid #5a5a5a;
border-radius: 1px;
content: "";
height: 18px;
left: 0;
margin-top: 2px;
position: absolute;
top: 0;
transition: .2s;
width: 18px;
z-index: 0
}
[type=checkbox]:not(.filled-in) + label:after {
border: 0;
transform: scale(0)
}
[type=checkbox]:not(:checked):disabled + label:before {
background-color: rgba(0,0,0,.26);
border: none
}
[type=checkbox].tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
transform: scale(1)
}
[type=checkbox]:checked + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-color: transparent #6f87a6 #6f87a6 transparent;
border-style: solid;
border-width: 2px;
height: 22px;
left: -5px;
top: -4px;
transform: rotate(40deg);
transform-origin: 100% 100%;
width: 12px
}
[type=checkbox]:checked:disabled + label:before {
border-bottom: 2px solid rgba(0,0,0,.26);
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox]:indeterminate + label:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: none;
border-right: 2px solid #6f87a6;
height: 22px;
left: -12px;
top: -11px;
transform: rotate(90deg);
transform-origin: 100% 100%;
width: 10px
}
[type=checkbox]:indeterminate:disabled + label:before {
background-color: transparent;
border-right: 2px solid rgba(0,0,0,.26)
}
[type=checkbox].filled-in + label:after {
border-radius: 2px
}
[type=checkbox].filled-in + label:after, [type=checkbox].filled-in + label:before {
content: "";
left: 0;
position: absolute;
transition: border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;
z-index: 1
}
[type=checkbox].filled-in:not(:checked) + label:before {
border: 3px solid transparent;
height: 0;
left: 6px;
top: 10px;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 0
}
[type=checkbox].filled-in:not(:checked) + label:after {
background-color: transparent;
border: 2px solid #5a5a5a;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in:checked + label:before {
border-color: transparent #fff #fff transparent;
border-style: solid;
border-width: 2px;
height: 13px;
left: 1px;
top: 0;
transform: rotate(37deg);
transform-origin: 100% 100%;
width: 8px
}
[type=checkbox].filled-in:checked + label:after {
background-color: #6f87a6;
border: 2px solid #6f87a6;
height: 20px;
top: 0;
width: 20px;
z-index: 0
}
[type=checkbox].filled-in.tabbed:focus + label:after {
background-color: rgba(0,0,0,.1);
border-color: #5a5a5a;
border-radius: 2px
}
[type=checkbox].filled-in.tabbed:checked:focus + label:after {
background-color: #6f87a6;
border-color: #6f87a6;
border-radius: 2px
}
[type=checkbox].filled-in:disabled:not(:checked) + label:before {
background-color: transparent;
border: 2px solid transparent
}
[type=checkbox].filled-in:disabled:not(:checked) + label:after {
background-color: #bdbdbd;
border-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:before {
background-color: transparent
}
[type=checkbox].filled-in:disabled:checked + label:after {
background-color: #bdbdbd;
border-color: #bdbdbd
}
.switch, .switch * {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
}
.switch label {
cursor: pointer
}
.switch label input[type=checkbox] {
height: 0;
opacity: 0;
width: 0
}
.switch label input[type=checkbox]:checked + .lever {
background-color: #cacaca
}
.switch label input[type=checkbox]:checked + .lever:after {
background-color: #6f87a6;
left: 24px
}
.switch label .lever {
background-color: #818181;
border-radius: 15px;
content: "";
display: inline-block;
height: 15px;
margin: 0 16px;
position: relative;
transition: background .3s ease;
vertical-align: middle;
width: 40px
}
.switch label .lever:after {
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
content: "";
display: inline-block;
height: 21px;
left: -5px;
position: absolute;
top: -3px;
transition: left .3s ease,background .3s ease,box-shadow .1s ease;
width: 21px
}
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(111,135,166,.1)
}
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever:after, input[type=checkbox]:not(:disabled) ~ .lever:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(0,0,0,.08)
}
.switch input[type=checkbox][disabled] + .lever {
cursor: default
}
.switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: #bdbdbd
}
select {
display: none
}
select.browser-default {
display: block
}
select {
background-color: rgba(255,255,255,.9);
border: 1px solid #f2f2f2;
border-radius: 2px;
height: 44px;
padding: 5px;
width: 100%
}
.select-label {
position: absolute
}
.select-wrapper {
position: relative
}
.select-wrapper input.select-dropdown {
background-color: transparent;
border: none;
border-bottom: 1px solid #979797;
cursor: pointer;
display: block;
font-size: 22px;
height: 44px;
line-height: 44px;
margin: 0 0 15px;
outline: none;
padding: 0;
position: relative;
width: 100%
}
.select-wrapper span.caret {
color: #000;
color: initial;
font-size: 10px;
position: absolute;
right: 0;
top: 16px
}
.select-wrapper span.caret.disabled {
color: rgba(0,0,0,.26)
}
.select-wrapper + label {
font-size: 9px;
position: absolute;
top: -14px
}
select:disabled {
color: rgba(0,0,0,.3)
}
.select-wrapper input.select-dropdown:disabled {
border-bottom: 1px solid rgba(0,0,0,.3);
color: rgba(0,0,0,.3);
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.select-wrapper i {
color: rgba(0,0,0,.3)
}
.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {
background-color: transparent;
color: rgba(0,0,0,.3)
}
.prefix ~ .select-wrapper {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
.prefix ~ label {
margin-left: 3rem
}
.select-dropdown li img {
float: right;
height: 40px;
margin: 5px 15px;
width: 40px
}
.select-dropdown li.optgroup {
border-top: 1px solid #eee
}
.select-dropdown li.optgroup.selected > span {
color: rgba(0,0,0,.7)
}
.select-dropdown li.optgroup > span {
color: rgba(0,0,0,.4)
}
.select-dropdown li.optgroup ~ li.optgroup-option {
padding-left: 1rem
}
.file-field {
position: relative
}
.file-field .file-path-wrapper {
overflow: hidden;
padding-left: 10px
}
.file-field input.file-path {
width: 100%
}
.file-field .btn {
float: left;
height: 44px;
line-height: 44px
}
.file-field span {
cursor: pointer
}
.file-field input[type=file] {
bottom: 0;
cursor: pointer;
filter: alpha(opacity=0);
font-size: 20px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
.range-field {
position: relative
}
input[type=range], input[type=range] + .thumb {
cursor: pointer
}
input[type=range] {
background-color: transparent;
border: none;
margin: 15px 0;
outline: none;
padding: 0;
position: relative;
width: 100%
}
input[type=range]:focus {
outline: none
}
input[type=range] + .thumb {
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 0;
margin-left: -6px;
position: absolute;
top: 10px;
transform: rotate(-45deg);
transform-origin: 50% 50%;
width: 0
}
input[type=range] + .thumb .value {
color: #6f87a6;
display: block;
font-size: 0;
text-align: center;
transform: rotate(45deg);
width: 30px
}
input[type=range] + .thumb.active {
border-radius: 50% 50% 50% 0
}
input[type=range] + .thumb.active .value {
color: #fff;
font-size: 10px;
margin-left: -1px;
margin-top: 8px
}
input[type=range] {
-webkit-appearance: none
}
input[type=range]::-webkit-slider-runnable-track {
background: #c2c0c2;
border: none;
height: 3px
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin: -5px 0 0;
transform-origin: 50% 50%;
-webkit-transition: .3s;
transition: .3s;
width: 14px
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc
}
input[type=range] {
border: 1px solid #fff
}
input[type=range]::-moz-range-track {
background: #ddd;
border: none;
height: 3px
}
input[type=range]::-moz-range-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
margin-top: -5px;
width: 14px
}
input[type=range]:-moz-focusring {
outline: 1px solid #fff;
outline-offset: -1px
}
input[type=range]:focus::-moz-range-track {
background: #ccc
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
height: 3px
}
input[type=range]::-ms-fill-lower {
background: #777
}
input[type=range]::-ms-fill-upper {
background: #ddd
}
input[type=range]::-ms-thumb {
background: #6f87a6;
border: none;
border-radius: 50%;
height: 14px;
width: 14px
}
input[type=range]:focus::-ms-fill-lower {
background: #888
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc
}
#modal-lightbox .modal-content .email:before, .icon-category:before, .icon-checkmark:before, .icon-collapse:before, .icon-configurator-back:before, .icon-configurator-cancel:before, .icon-configurator-checkmark-thin:before, .icon-configurator-checkmark:before, .icon-configurator-close:before, .icon-configurator-next:before, .icon-configurator-rotate:before, .icon-connectivity:before, .icon-dotted-arrow-right:before, .icon-down-arrow:before, .icon-driver-experience:before, .icon-edit:before, .icon-envelope:before, .icon-expand:before, .icon-facebook-filled:before, .icon-facebook:before, .icon-fuel-efficiency:before, .icon-geo:before, .icon-header-search:before, .icon-information:before, .icon-instagram:before, .icon-left-arrow:before, .icon-location:before, .icon-map-pin:before, .icon-minus-icon:before, .icon-pdf-icon:before, .icon-phone:before, .icon-play2:before, .icon-play3:before, .icon-play-icon:before, .icon-plus-icon:before, .icon-plus:before, .icon-productivity:before, .icon-quality:before, .icon-revealleft:before, .icon-revealright:before, .icon-right-arrow-with-background:before, .icon-right-arrow:before, .icon-route:before, .icon-safety:before, .icon-shock:before, .icon-tag:before, .icon-target:before, .icon-time:before, .icon-tools:before, .icon-twitter:before, icon-icon-linkedin:before .icon-upfit:before, .icon-uptime:before, .icon-user:before, .icon-youtube:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, [resources-page] form:before, ms-news > section > * footer:after, ms-slides .swiper-button-next:before, ms-slides .swiper-button-prev:before, ms-stories [card] > :last-child:after, ms-videos nav [card] figure:before, ms-videos nav [card] figure > span:before {
speak: none;
font-feature-settings: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: icomoon !important;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none
}
@font-face {
font-family: icomoon;
font-style: normal;
font-weight: 400;
src: url(https://freightliner.azureedge.net/images/icon-font/icomoon.eot?) format("eot"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.ttf) format("truetype"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.woff) format("woff"),url(https://freightliner.azureedge.net/images/icon-font/icomoon.svg#icomoon) format("svg")
}
.icon-category:before {
content: "a"
}
.icon-checkmark:before {
content: "b"
}
.icon-down-arrow:before, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
content: "d"
}
.icon-information:before {
content: "i"
}
.icon-instagram:before {
content: "j"
}
.icon-left-arrow:before, ms-slides .swiper-button-prev:before {
content: "k"
}
.icon-map-pin:before {
content: "l"
}
.icon-minus-icon:before {
content: "m"
}
.icon-pdf-icon:before {
content: "n"
}
.icon-play-icon:before, :not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before, ms-videos nav [card] figure:before, ms-videos nav [card] figure > span:before {
content: "p"
}
.icon-plus-icon:before {
content: "q"
}
.icon-productivity:before {
content: "r"
}
.icon-quality:before {
content: "s"
}
.icon-right-arrow:before, ms-news > section > * footer:after, ms-slides .swiper-button-next:before, ms-stories [card] > :last-child:after {
content: "t"
}
.icon-right-arrow-with-background:before {
content: "u"
}
.icon-route:before {
content: "v"
}
.icon-target:before {
content: "x"
}
.icon-time:before {
content: "y"
}
.icon-uptime:before {
content: "B"
}
.icon-user:before {
content: "C"
}
.icon-youtube:before {
content: "D"
}
.icon-safety:before {
content: "E"
}
.icon-upfit:before {
content: "A"
}
.icon-fuel-efficiency:before {
content: "g"
}
.icon-facebook:before {
content: "e"
}
.icon-header-search:before, [resources-page] form:before {
content: "f"
}
.icon-driver-experience:before {
content: "h"
}
.icon-twitter:before {
content: "z"
}
.icon-icon-linkedin:before {
content: "\e900";
font-family: "icomoon" !important;
font-style: normal;
}
.icon-phone:before {
content: "F"
}
.icon-connectivity:before {
content: "c"
}
.icon-plus:before {
content: "o"
}
.icon-revealleft:before {
content: "w"
}
.icon-revealright:before {
content: "G"
}
.icon-play2:before {
content: "H"
}
.icon-configurator-back:before {
content: "I"
}
.icon-configurator-cancel:before {
content: "J"
}
.icon-configurator-checkmark:before {
content: "K"
}
.icon-configurator-next:before {
content: "L"
}
.icon-configurator-rotate:before {
content: "M"
}
.icon-configurator-close:before {
content: "N"
}
.icon-configurator-checkmark-thin:before {
content: "O"
}
.icon-edit:before {
content: "P"
}
.icon-location:before {
content: "Q"
}
.icon-geo:before {
content: "R"
}
.icon-facebook-filled:before {
content: "S"
}
.icon-collapse:before {
content: "T"
}
.icon-expand:before {
content: "U"
}
.icon-dotted-arrow-right:before {
content: "V"
}
.icon-tag:before {
content: "W"
}
.icon-shock:before {
content: "X"
}
.icon-tools:before {
content: "Y"
}
#modal-lightbox .modal-content .email:before, .icon-envelope:before {
content: "Z"
}
.icon-play3:before {
content: "0"
}
body, html {
min-height: 100%
}
html {
scroll-behavior: smooth
}
.gsc-control-cse {
box-sizing: content-box
}
.gsc-control-cse *, .gsc-control-cse :after, .gsc-control-cse :before {
box-sizing: inherit;
line-height: normal
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .015em;
max-width: 100%;
overflow-x: hidden
}
body > img {
width: 100%
}
body > footer {
border-top: 1px solid #d7d7d7;
padding: 5.8565153734vw 0
}
body > footer inner-content:first-child {
margin: 0 auto;
max-width: 1188px;
width: 90%
}
@media(min-width:768px) {
body > footer inner-content:first-child {
display: flex
}
body > footer inner-content:first-child > * {
flex: 1;
padding: 0 3.6603221083vw
}
body > footer inner-content:first-child > :not(:first-child) {
border-left: 1px solid #f7f7f7
}
}
@media(min-width:768px)and (min-width:1320px) {
body > footer inner-content:first-child > * {
padding: 0 25px
}
}
@media(max-width:767px) {
body > footer inner-content:first-child > * {
border-bottom: 1px solid #d7d7d7;
display: block;
padding: 5.2% 40px
}
}
body > footer inner-content:first-child > .branding {
text-align: center
}
body > footer inner-content:first-child > .branding > a {
display: block;
margin-bottom: 20px
}
@media(min-width:768px) {
body > footer inner-content:first-child > .branding {
padding-left: 0;
text-align: left
}
body > footer inner-content:first-child > .branding > a {
margin-bottom: 30px;
max-width: 148px
}
}
body > footer inner-content:first-child > .branding p {
color: #585858;
font-family: industry,sans-serif;
font-size: 12px;
letter-spacing: .15em;
margin: 1em 0
}
body > footer inner-content:first-child > .branding .social a {
background: #808181;
background-size: 100% 0;
border-radius: 100%;
color: #fff;
display: inline-block;
height: 28px;
line-height: 28px;
margin: 3px;
text-align: center;
text-shadow: none;
transition: all .25s ease-in-out;
width: 28px
}
html:not(.touch) body > footer inner-content:first-child > .branding .social a:hover {
background: #713738;
color: #fff !important;
text-decoration: none
}
@media(max-width:767px) {
body > footer inner-content:first-child > .branding .social a {
height: 40px;
line-height: 40px;
width: 40px
}
}
body > footer inner-content:first-child > :not(.branding) a {
color: #484848;
display: block;
font-family: industry,sans-serif;
font-size: 12px
}
body > footer inner-content:last-child {
margin: 0 auto;
max-width: 1188px;
padding: 5% 0;
width: 90%
}
@media(min-width:768px) {
body > footer inner-content:last-child {
display: flex
}
}
body > footer inner-content:last-child > div {
flex-grow: 1
}
body > footer inner-content:last-child > div.branding {
flex-grow: 0
}
@media(min-width:768px) {
body > footer inner-content:last-child > div.branding {
width: 40%
}
body > footer inner-content:last-child > div.branding > div {
display: flex
}
}
body > footer inner-content:last-child > div.branding > div a {
flex: 1;
max-width: 144px
}
body > footer inner-content:last-child > div.branding > div span {
display: block;
flex: 1;
font-size: 12px
}
@media(min-width:768px) {
body > footer inner-content:last-child > div.branding > div span {
border-left: 1px solid #f7f7f7;
margin: 0 10px;
padding: 5px 10px
}
}
@media(max-width:767px) {
body > footer inner-content:last-child > div.branding > div span {
margin-bottom: 20px;
margin-top: 20px
}
}
body > footer inner-content:last-child > div p {
color: #3b3b3b;
font-size: 12px;
font-weight: 100;
margin: 0
}
iframe, img {
max-width: 100%
}
strong {
font-weight: 600
}
a, label {
cursor: pointer
}
a:focus, a:hover {
text-decoration: none
}
html:not(.touch) a:not(.btn):not([role=button]):not(.btn-default):not(.btn-primary):hover {
color: #713738
}
[clickable] {
cursor: pointer
}
.heading-1, .heading-2, h1, h2, sudo-h1, sudo-h2 {
font-weight: 100;
letter-spacing: .015em
}
.heading-5, .heading-6, h5, h6, sudo-h5, sudo-h6 {
color: #6f87a6;
letter-spacing: .15em
}
[class*=btn] {
font-family: industry,sans-serif;
transition: all .5s ease
}
[class*=btn]:focus, [class*=btn]:hover {
text-decoration: none
}
:not(td) > .btn, :not(td) > a[role=button], :not(td) > button, :not(td) > input[type=button], :not(td) > input[type=submit] {
background-color: #6f87a6;
border: 0;
color: #fff;
font-family: industry,sans-serif;
font-size: 18px;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
padding: 11px 30px;
transition: all .5s ease;
white-space: normal
}
:not(td) > .btn[type=VID]:before, :not(td) > a[role=button][type=VID]:before, :not(td) > button[type=VID]:before, :not(td) > input[type=button][type=VID]:before, :not(td) > input[type=submit][type=VID]:before {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
:not(td) > .btn.toggle.on, :not(td) > a[role=button].toggle.on, :not(td) > button.toggle.on, :not(td) > input[type=button].toggle.on, :not(td) > input[type=submit].toggle.on {
background: #6f87a6
}
html:not(.touch) :not(td) > .btn.toggle.on:hover, html:not(.touch) :not(td) > a[role=button].toggle.on:hover, html:not(.touch) :not(td) > button.toggle.on:hover, html:not(.touch) :not(td) > input[type=button].toggle.on:hover, html:not(.touch) :not(td) > input[type=submit].toggle.on:hover {
background: #7f94b0
}
:not(td) > .btn.toggle:not(.on), :not(td) > a[role=button].toggle:not(.on), :not(td) > button.toggle:not(.on), :not(td) > input[type=button].toggle:not(.on), :not(td) > input[type=submit].toggle:not(.on) {
background: #484848
}
html:not(.touch) :not(td) > .btn.toggle:not(.on):hover, html:not(.touch) :not(td) > a[role=button].toggle:not(.on):hover, html:not(.touch) :not(td) > button.toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=button].toggle:not(.on):hover, html:not(.touch) :not(td) > input[type=submit].toggle:not(.on):hover {
background: #555
}
:not(td) > .btn:focus, :not(td) > a[role=button]:focus, :not(td) > button:focus, :not(td) > input[type=button]:focus, :not(td) > input[type=submit]:focus, html:not(.touch) :not(td) > .btn:hover, html:not(.touch) :not(td) > a[role=button]:hover, html:not(.touch) :not(td) > button:hover, html:not(.touch) :not(td) > input[type=button]:hover, html:not(.touch) :not(td) > input[type=submit]:hover {
background-color: #713738
}
:not(td) > .btn[disabled], :not(td) > a[role=button][disabled], :not(td) > button[disabled], :not(td) > input[type=button][disabled], :not(td) > input[type=submit][disabled] {
cursor: not-allowed;
opacity: .5
}
.note {
display: block;
font-size: .8em
}
input.select, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #efefef url(../png/select-drop-arrow.png) no-repeat 100% !important;
border: none;
border-radius: 0;
box-shadow: 0 1px 0 #aaa;
display: inline-block;
padding: 5px 10px
}
input.select::-ms-expand, select::-ms-expand {
display: none
}
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important
}
input[type=email], input[type=number], input[type=tel], input[type=text], textarea {
background: #efefef;
border: solid #aaa;
border-width: 0 0 1px;
box-sizing: border-box;
display: block;
font-size: 18px;
padding: 5px 10px
}
input[type=email]:not(textarea), input[type=number]:not(textarea), input[type=tel]:not(textarea), input[type=text]:not(textarea), textarea:not(textarea) {
height: 43px
}
textarea {
height: auto
}
body form:not(.gsc-search-box) .input-field label {
font-size: 18px;
left: 10px;
top: 5px
}
.disclaimer {
font-size: .8em;
padding: 10px 0;
text-align: left
}
.disclaimer + .disclaimer {
padding-top: 0
}
.modal {
overflow-y: hidden !important;
will-change: auto
}
.material-tooltip {
font-size: 15px
}
.form-error {
color: red
}
hr {
background: #3b3b3b;
border: 0;
height: 38px;
width: 1px
}
.nav-fixed body {
padding-top: 80px
}
body > nav:not([breadcrumbs]) {
background: #fff;
display: flex;
left: 0;
position: relative;
top: 0;
transition: all .4s;
width: 100%;
z-index: 12
}
.nav-fixed body > nav:not([breadcrumbs]) {
background: #fff;
border-bottom: 1px solid #e5e7e9;
position: fixed
}
body > nav:not([breadcrumbs]) > * {
flex: 1 30%
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * {
display: flex;
margin: 0
}
body > nav:not([breadcrumbs]) > * > * {
flex: 1
}
}
body > nav:not([breadcrumbs]) > * > a {
color: #000;
display: inline-block;
font-family: industry,sans-serif;
font-size: 14px;
font-weight: 600;
height: 80px;
letter-spacing: .75px;
line-height: 80px;
overflow: hidden;
padding: 0 2.7818448023vw;
text-transform: uppercase;
transition: all .25s;
vertical-align: top
}
.nav-fixed body > nav:not([breadcrumbs]) > * > a {
height: 35px;
line-height: 35px;
padding: 0 1.217057101vw
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) > * > a {
font-size: 10px;
padding: 0 4px
}
}
body > nav:not([breadcrumbs]) .left {
padding-left: 1.4641288433vw
}
body > nav:not([breadcrumbs]) .right {
padding-right: 1.4641288433vw;
text-align: right
}
@media(min-width:900px) {
body > nav:not([breadcrumbs]) .right {
position: relative
}
}
@media(max-width:767px) {
body > nav:not([breadcrumbs]) .right {
padding-right: 0
}
body > nav:not([breadcrumbs]) .right > a:last-of-type {
flex: .5;
font-size: 14px;
width: 30%
}
}
body > nav:not([breadcrumbs]) .right > div {
background: #6f87a6;
display: flex;
height: 80px;
position: absolute;
right: 0;
top: 0;
transition: all .25s;
width: 0
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div {
height: 35px
}
body > nav:not([breadcrumbs]) .right > div button.close {
background: #6f87a6;
border-right: 1px solid rgba(255,255,255,.25);
flex-grow: 0;
transition: background-color .5s;
width: 80px
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div button.close {
width: 80px
}
html:not(.touch) body > nav:not([breadcrumbs]) .right > div button.close:hover {
background-color: #43556c
}
body > nav:not([breadcrumbs]) .right > div button.close i {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px
}
body > nav:not([breadcrumbs]) .right > div > form {
flex-grow: 1;
padding: 0 10px;
position: relative
}
body > nav:not([breadcrumbs]) .right > div > form input {
background: transparent !important;
border: 0;
border-bottom: 0 !important;
box-shadow: none !important;
color: #fff;
display: block;
font-size: 24px;
height: 100%;
height: 80px !important;
line-height: 80px;
margin: 0 !important;
padding: 0 !important
}
.nav-fixed body > nav:not([breadcrumbs]) .right > div > form input {
line-height: 35px
}
body > nav:not([breadcrumbs]) .right > div > form input::-moz-placeholder {
color: #b7c3d3;
opacity: 1
}
body > nav:not([breadcrumbs]) .right > div > form input:-ms-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form input::-webkit-input-placeholder {
color: #b7c3d3
}
body > nav:not([breadcrumbs]) .right > div > form ul {
background: #6f87a6;
color: #fff;
list-style: none unset;
position: absolute;
right: 0;
top: 100%;
width: 100%
}
body > nav:not([breadcrumbs]) .right > div > form ul li {
display: block;
padding: 5px 10px;
text-align: left;
text-transform: uppercase
}
body > nav:not([breadcrumbs]) .right > div form {
height: 100%;
margin: 0
}
body > nav:not([breadcrumbs]) .right > div td {
display: block;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
body > nav:not([breadcrumbs]) .right > div table {
margin: 0;
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div {
width: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div {
height: 100%
}
html:not(.nav-fixed) body > nav:not([breadcrumbs]) .right.search-active > div > div > div * {
height: inherit
}
@media(max-width:510px) {
body > nav:not([breadcrumbs]) .right .search {
flex-basis: 30%;
flex-grow: 0;
max-width: 56px;
padding-right: calc(1.46413vw + 4px)
}
}
.nav-fixed body > nav:not([breadcrumbs]) .right .search, body > nav:not([breadcrumbs]) .right .scrolltop {
display: none
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop {
background-color: #6f87a6;
color: #fff !important;
display: inline-block;
text-align: center;
transition: all .5s ease
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:before {
display: block;
margin-top: 8px;
transform: rotate(180deg)
}
.nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:focus, .nav-fixed body > nav:not([breadcrumbs]) .right .scrolltop:hover {
text-decoration: none !important
}
body > nav:not([breadcrumbs]) .right .scrolltop:focus, html:not(.touch) body > nav:not([breadcrumbs]) .right .scrolltop:hover {
background-color: #713738;
color: #fff !important
}
body > nav:not([breadcrumbs]) .center {
min-width: 130px;
text-align: center
}
body > nav:not([breadcrumbs]) .center a {
padding: 0
}
body > nav:not([breadcrumbs]) .center img {
width: 180px
}
.nav-fixed body > nav:not([breadcrumbs]) .center img {
width: 78px
}
nav[breadcrumbs] {
background: rgba(0,0,0,.77);
left: 0;
line-height: 36px;
padding: 0 4.2459736457vw;
top: 0;
width: 100%;
z-index: 1
}
nav[breadcrumbs] > * {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
margin-right: .5em;
transition: opacity .25s
}
nav[breadcrumbs] > :not(:last-child):after {
content: "/";
display: inline-block;
margin-left: .5em
}
nav[breadcrumbs] > a {
opacity: .5
}
html:not(.touch) nav[breadcrumbs] > a:hover {
color: #fff !important;
opacity: 1
}
nav[pagination] {
text-align: center
}
nav[pagination] a {
cursor: pointer;
display: inline-block;
padding: 10px 20px
}
html:not(.touch) nav[pagination] a.active:hover, nav[pagination] a.active {
background: #6f87a6;
color: #fff !important;
cursor: default
}
html:not(.touch) nav[pagination] a:hover {
background: #ebebeb;
text-decoration: none
}
nav[with-subtitle] > a {
align-items: center;
background-color: #6f87a6
}
html:not(.touch) nav[with-subtitle] > a:hover {
background: #713738
}
nav[with-subtitle] > a > span {
color: #fff !important;
z-index: 2
}
nav[with-subtitle] > a span.dir {
flex: 0 0 auto
}
nav[with-subtitle] > a span.dir:after, nav[with-subtitle] > a span.dir:before {
color: #000 !important
}
nav[with-subtitle] > a span.label {
flex: 2 0 auto;
font-size: 37px;
text-align: center
}
@media(min-width:768px)and (max-width:1200px) {
nav[with-subtitle] > a span.label {
font-size: 25px
}
}
@media(max-width:767px) {
nav[with-subtitle] > a span.label {
font-size: 20px
}
}
html:not(.touch) nav[with-subtitle] > a:hover:before {
transform: scaleY(1.1)
}
html:not(.touch) nav[with-subtitle] > a:hover span.dir:after, html:not(.touch) nav[with-subtitle] > a:hover span.dir:before {
color: #000 !important
}
comp-background, part-background {
background: #707070 no-repeat top;
background-size: cover;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
@media(max-width:767px) {
comp-background > span, part-background > span {
display: block
}
}
comp-background iframe, part-background iframe {
border: none;
left: 50%;
max-width: none;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
z-index: 0
}
comp-background > .overlay, part-background > .overlay {
background: transparent;
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
comp-background video, part-background video {
min-height: 100%;
min-width: 100%
}
@media(max-width:767px) {
comp-background video, part-background video {
display: none
}
}
comp-resources:not([vocation]) > .group {
border-bottom: 1px solid #f9fbfe;
padding: 4.39238653vw 20px
}
comp-resources:not([vocation]) > .group:nth-of-type(odd) {
background: #f9fbfe
}
comp-resources:not([vocation]) > .group > .group-inner {
margin: 0 auto;
max-width: 915px
}
@media(max-width:767px) {
comp-resources[vocation] {
padding: 0 20px
}
}
comp-resources[vocation] h2:after {
left: 0;
right: 0
}
comp-resources h2 {
font-size: 30px;
font-weight: 100;
margin: 0 0 1em
}
@media(max-width:1000px) {
comp-resources a {
width: 45%
}
}
@media(max-width:620px) {
comp-resources a {
width: 45%
}
}
@media(max-width:450px) {
comp-resources a {
margin-right: 0 !important;
width: calc(100% - 20px)
}
}
comp-resources a .thumb {
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 5.8565153734vw
}
@media(max-width:767px) {
comp-resources a .thumb {
width: 80px
}
}
comp-resources a .label {
display: block;
margin-left: 6.588579795vw
}
@media(max-width:767px) {
comp-resources a .label {
font-size: 16px;
margin-left: 90px
}
}
comp-resources a:after {
clear: both;
content: "";
display: table
}
comp-resources a:focus, comp-resources a:hover {
text-decoration: none
}
html:not(.touch) comp-resources a:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.25);
transform: scale(1.1);
z-index: 2
}
[resources-page] form {
margin: 60px auto 30px;
position: relative
}
[resources-page] form:before {
font-size: 22px;
left: 0;
position: absolute;
top: 11px
}
[resources-page] form input {
box-sizing: border-box;
padding-left: 30px
}
[resources-page] nav[breadcrumbs] {
background: transparent;
margin: 30px auto;
padding: 0
}
[resources-page] nav[breadcrumbs] a {
color: #6f87a6;
font-family: industry,sans-serif;
font-size: 18px;
opacity: 1
}
html:not(.touch) [resources-page] nav[breadcrumbs] a:hover {
color: #713738 !important
}
[resources-page] nav[breadcrumbs] span {
display: none
}
[resources-page] comp-resources > .group {
background: transparent;
border-top: 1px solid #d7d7d7;
padding: 48px 0
}
[resources-page] comp-resources > .group > .group-inner {
max-width: none
}
[resources-page] .children {
margin: 20px -10px
}
[resources-page] .children a {
margin: 10px
}
#modal-lightbox {
background: transparent
}
#modal-lightbox .modal-content {
padding: 0;
position: relative
}
#modal-lightbox .modal-content .close {
background: transparent url(../png/close-icon-2.png) no-repeat 50%;
background-size: 20px;
height: 68px;
position: absolute;
right: 0;
top: 0;
width: 68px
}
#modal-lightbox .modal-content [actions] {
background: #777;
height: 36px;
left: 0;
padding-right: 16px;
position: absolute;
top: 0;
z-index: 1
}
#modal-lightbox .modal-content [actions] > a {
color: #fff;
display: inline-block;
font-family: industry,sans-serif;
font-size: 9px;
height: 36px;
line-height: 36px;
text-transform: uppercase
}
#modal-lightbox .modal-content .download {
background: transparent url(../png/download-icon.png) no-repeat 10px;
background-size: 20px;
padding-left: 46px
}
#modal-lightbox .modal-content .email {
margin-left: 20px
}
#modal-lightbox .modal-content .email:before {
display: inline-block;
font-size: 20px;
margin: 0 10px;
vertical-align: middle
}
#modal-lightbox .modal-content img {
width: 100%
}
#modal-lightbox .modal-content .vid-holder {
padding-bottom: 56.25%;
position: relative
}
#modal-lightbox .modal-content .vid-holder > div {
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#modal-lightbox .modal-content .vid-holder .jwplayer {
height: 100% !important;
width: 100% !important
}
#modal-lightbox iframe[name=mailto-target] {
height: 1px;
left: -1px;
opacity: 0;
position: absolute;
top: -1px;
width: 1px
}
ms-container > *, ms-float > *, ms-news > header, ms-slides > header, ms-videos > header {
margin: 0 auto;
max-width: 1040px
}
ms-container > * > h2, ms-slides > header, ms-videos > header > h2 {
padding-bottom: 24px
}
ms-container > * > h2:after, ms-slides > header:after, ms-videos > header > h2:after {
background: #d7d7d7;
content: "";
display: block;
height: 1px;
margin: 35px auto 0;
max-width: 80%;
width: 216px
}
ms-container > *, ms-float > * > inner-content, ms-news > header, ms-news > section > *, ms-slides, ms-slides > header, ms-stories, ms-videos > header {
font-family: industry,sans-serif
}
ms-slides .swiper-pagination-bullet, ms-stories .swiper-pagination-bullet, ms-videos nav .swiper-pagination-bullet {
background: #6f87a6;
height: 6px;
opacity: 1;
transition: all .25s;
vertical-align: middle;
width: 6px
}
ms-slides .swiper-pagination-bullet-active, ms-stories .swiper-pagination-bullet-active, ms-videos nav .swiper-pagination-bullet-active {
background: transparent;
border: 1px solid #6f87a6;
height: 12px;
width: 12px
}
.swiper-container {
list-style: none;
overflow: hidden;
padding: 0;
position: relative;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
transform: translateZ(0)
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap
}
.swiper-container-free-mode > .swiper-wrapper {
margin: 0 auto;
transition-timing-function: ease-out
}
.swiper-slide {
flex-shrink: 0;
height: 100%;
position: relative;
transition-property: transform;
width: 100%
}
.swiper-invisible-blank-slide {
visibility: hidden
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform,height
}
.swiper-container-3d {
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(270deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(90deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(0deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(180deg,rgba(0,0,0,.5),transparent)
}
.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
touch-action: pan-y
}
.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
touch-action: pan-x
}
.swiper-button-next, .swiper-button-prev {
background-position: 50%;
background-repeat: no-repeat;
background-size: 27px 44px;
cursor: pointer;
height: 44px;
margin-top: -22px;
position: absolute;
top: 50%;
width: 27px;
z-index: 10
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
cursor: auto;
opacity: .35;
pointer-events: none
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23007aff'/%3E%3C/svg%3E");
left: 10px;
right: auto
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23007aff'/%3E%3C/svg%3E");
left: auto;
right: 10px
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23fff'/%3E%3C/svg%3E")
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23fff'/%3E%3C/svg%3E")
}
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z'/%3E%3C/svg%3E")
}
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z'/%3E%3C/svg%3E")
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
transform: translateZ(0);
transition: opacity .3s;
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
font-size: 0;
overflow: hidden
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
position: relative;
transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(.33)
}
.swiper-pagination-bullet {
background: #000;
border-radius: 100%;
display: inline-block;
height: 8px;
opacity: .2;
width: 8px
}
button.swiper-pagination-bullet {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
box-shadow: none;
margin: 0;
padding: 0
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
background: #007aff;
opacity: 1
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0,-50%,0)
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
display: block;
margin: 6px 0
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: transform .2s,top .2s
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: transform .2s,left .2s
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: transform .2s,right .2s
}
.swiper-pagination-progressbar {
background: rgba(0,0,0,.25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(0);
transform-origin: left top;
width: 100%
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top
}
.swiper-container-horizontal > .swiper-pagination-progressbar {
height: 4px;
left: 0;
top: 0;
width: 100%
}
.swiper-container-vertical > .swiper-pagination-progressbar {
height: 100%;
left: 0;
top: 0;
width: 4px
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255,255,255,.25)
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0,0,0,.25)
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
background: rgba(0,0,0,.1);
border-radius: 10px;
position: relative;
-ms-touch-action: none
}
.swiper-container-horizontal > .swiper-scrollbar {
bottom: 3px;
height: 5px;
left: 1%;
position: absolute;
width: 98%;
z-index: 50
}
.swiper-container-vertical > .swiper-scrollbar {
height: 98%;
position: absolute;
right: 3px;
top: 1%;
width: 5px;
z-index: 50
}
.swiper-scrollbar-drag {
background: rgba(0,0,0,.5);
border-radius: 10px;
height: 100%;
left: 0;
position: relative;
top: 0;
width: 100%
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
text-align: center;
width: 100%
}
.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
max-height: 100%;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
.swiper-lazy-preloader {
-webkit-animation: swiper-preloader-spin 1s steps(12) infinite;
animation: swiper-preloader-spin 1s steps(12) infinite;
height: 42px;
left: 50%;
margin-left: -21px;
margin-top: -21px;
position: absolute;
top: 50%;
transform-origin: 50%;
width: 42px;
z-index: 10
}
.swiper-lazy-preloader:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: block;
height: 100%;
width: 100%
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%23fff' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E")
}
@-webkit-keyframes swiper-preloader-spin {
to {
transform: rotate(1turn)
}
}
@keyframes swiper-preloader-spin {
to {
transform: rotate(1turn)
}
}
.swiper-container .swiper-notification {
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
pointer-events: none;
transform-origin: 0 0;
visibility: hidden;
width: 100%;
z-index: 1
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 0
}
.swiper-container-cube .swiper-cube-shadow {
background: #000;
bottom: 0;
filter: blur(50px);
height: 100%;
left: 0;
opacity: .6;
position: absolute;
width: 100%;
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 0
}
.swiper-container-coverflow .swiper-wrapper {
-ms-perspective: 1200px
}
body {
background-color: #f7f7f7
}
body.modal-open {
overflow: hidden
}
ms-hero {
min-height: 45.3879941435vw
}
@media(max-width:767px) {
ms-hero {
min-height: 320px
}
}
ms-stories {
max-width: 1366px
}
@media(min-width:768px) {
ms-stories {
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
padding: 0 48px 48px
}
}
@media(max-width:767px) {
ms-stories {
display: block;
margin-bottom: 12px;
padding: 0 25px 63px !important
}
}
ms-stories:before {
background: #d7d7d7;
content: "";
display: block;
flex: 1;
height: 1px;
margin: 0 10px 48px;
min-width: 100%
}
ms-stories .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0;
margin-top: 0;
right: auto;
top: auto
}
ms-stories [card] {
box-sizing: border-box;
display: block;
font-size: 18px;
line-height: 24px;
padding: 9px 0 9px 160px;
position: relative
}
@media(min-width:768px) {
ms-stories [card] {
flex: .3;
margin: 10px;
min-height: 150px;
min-width: calc(33.3% - 20px)
}
}
@media(min-width:768px)and (max-width:1365px) {
ms-stories [card] {
flex: .5;
font-size: 16px;
min-width: calc(50% - 20px);
padding-top: 0
}
ms-stories [card] span {
display: block;
max-width: 300px
}
}
ms-stories [card] > figure {
background-position: 50%;
background-size: cover;
bottom: 0;
left: 0;
max-height: 150px;
position: absolute;
top: 0;
width: 150px
}
ms-stories [card] > figure + span {
color: #3b3b3b
}
ms-stories [card] > :last-child {
display: block;
margin-top: 10px
}
ms-stories [card] > :last-child:after {
display: inline-block;
vertical-align: middle
}
@media(max-width:767px) {
ms-stories [card] {
font-size: 16px;
min-height: 128px;
padding-left: 142px
}
ms-stories [card] > figure {
max-height: 128px;
width: 128px
}
ms-stories [card] > figure + span:not(:last-child) {
display: block;
max-height: 72px;
overflow: hidden;
text-overflow: ellipsis
}
}
ms-story-modal:not([single]) {
background: #fff;
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
transform-origin: 100% 50%;
transition: transform .25s ease-in;
z-index: 20
}
body:not(.modal-open) ms-story-modal:not([single]) {
transform: scaleX(0)
}
ms-story-modal > ms-hero {
min-height: 0
}
ms-story-modal > ms-hero:first-of-type {
height: 39vw
}
@media(max-width:767px) {
ms-story-modal > ms-hero:first-of-type {
height: 320px
}
}
ms-story-modal > ms-hero:not(:first-of-type) {
box-sizing: content-box;
height: 0;
margin-bottom: -6.6617862372vw;
padding-bottom: 31%;
width: 75vw
}
@media(max-width:767px) {
ms-story-modal > ms-hero:not(:first-of-type) {
padding-bottom: 57%;
width: 92vw
}
}
ms-story-modal > ms-container {
background-color: #fff;
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
padding-bottom: 9.5168374817vw;
padding-top: 14.6412884334vw
}
@media(max-width:767px) {
ms-story-modal > ms-container {
padding-top: 100px
}
}
ms-story-modal > ms-container:nth-of-type(odd) {
background-image: url(../png/sub-content-1.png)
}
ms-story-modal > ms-container:nth-of-type(2n) {
background-image: url(../png/sub-content-2.png)
}
ms-story-modal > ms-container > inner-content {
max-width: 666px;
text-align: left
}
ms-story-modal > ms-container > inner-content > h2:first-child {
font-size: 47px;
margin-bottom: 0;
padding-bottom: 0;
text-transform: uppercase
}
ms-story-modal > ms-container > inner-content > h2:first-child:after {
display: none
}
ms-story-modal > ms-container > inner-content > h2:first-child + h4 {
font-size: 27px;
font-weight: 500;
margin-bottom: 40px
}
@media(max-width:767px) {
ms-story-modal > ms-container > inner-content > h2:first-child + h4 {
font-weight: 300
}
}
ms-story-modal > ms-container > inner-content blockquote, ms-story-modal > ms-container > inner-content h3, ms-story-modal > ms-container > inner-content img {
margin-top: 62px
}
ms-story-modal > ms-container > inner-content img {
height: auto !important
}
ms-story-modal > ms-container > inner-content h3 {
font-size: 27px;
font-weight: 300;
margin-bottom: 30px
}
ms-story-modal > ms-container > inner-content p {
color: #717171;
font-size: 18px;
font-weight: 500;
line-height: 38px
}
ms-story-modal > ms-container > inner-content > img + p {
font-size: 16px;
font-style: italic;
font-weight: 300;
line-height: 30px;
margin-top: 16px
}
ms-story-modal > ms-container > inner-content blockquote {
border-left-color: #6f87a6;
border-left-width: 3px;
color: #6f87a6;
font-size: 30px;
font-style: italic;
font-weight: 100;
padding-bottom: 0;
padding-top: 0
}
@media(min-width:768px) {
ms-story-modal > ms-container > inner-content blockquote {
line-height: 1.2;
margin-left: -31px;
padding-left: 28px
}
}
@media(max-width:767px) {
ms-story-modal > ms-container > inner-content blockquote {
font-size: 24px;
line-height: 38px;
margin-bottom: 0;
margin-top: 30px;
padding-left: 20px
}
}
ms-story-modal > .close {
font-size: 0;
height: 100px;
padding-top: 49px;
position: fixed;
right: 0;
text-align: center;
top: 0;
width: 100px;
z-index: 21
}
ms-story-modal > .close:after, ms-story-modal > .close:before {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
content: "";
display: block;
height: 1px;
margin: 0 auto;
width: 36px
}
ms-story-modal > .close:before {
transform: rotate(45deg)
}
ms-story-modal > .close:after {
margin-top: -1px;
transform: rotate(-45deg)
}
ms-videos {
background: #dee3e8;
padding: 5.4904831625vw 20px
}
ms-videos > header {
text-align: center
}
ms-videos inner-content {
overflow: hidden;
position: relative
}
@media(max-width:767px) {
ms-videos inner-content {
display: none !important
}
}
ms-videos inner-content > div {
height: 0 !important;
padding-bottom: 56.25% !important;
width: 100% !important
}
ms-videos inner-content > h3 {
background: #fff;
bottom: 0;
font-size: 20px;
left: 0;
margin: 0;
padding: 20px;
position: absolute;
right: 98px;
text-align: left;
transition: transform .25s,bottom .25s;
z-index: 1
}
ms-videos inner-content > h3:not(.active) {
transform: translateY(100%)
}
ms-videos inner-content > h3.played {
bottom: 38px
}
ms-videos inner-content > h3.played:not(.active) {
transform: translateY(calc(100% + 38px))
}
ms-videos > div {
display: flex;
margin: 0 auto;
max-width: 1260px
}
@media(min-width:768px) {
ms-videos > div {
height: 500px
}
}
@media(min-width:768px)and (max-width:1310px) {
ms-videos > div {
height: calc(41vw - 40px)
}
}
ms-videos > div > * {
flex: 1
}
@media(min-width:768px) {
ms-videos nav {
background: #fff;
box-shadow: inset 12px 12px 0 0 #dee3e8,12px 12px 0 0 #fff;
flex-basis: 26%;
margin: 0 15px 12px 25px;
max-width: 26%;
overflow-y: auto;
padding: 0;
text-align: center
}
ms-videos nav::-webkit-scrollbar-track {
background-color: rgba(0,0,0,.15);
border-radius: 3px;
margin-top: 25px;
width: 4px
}
ms-videos nav::-webkit-scrollbar {
background-color: transparent;
width: 4px
}
ms-videos nav::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.4);
border-radius: 3px
}
}
@media(max-width:767px) {
ms-videos nav {
padding-bottom: 63px !important
}
}
ms-videos nav [card] {
display: block;
font-size: 18px
}
@media(min-width:768px) {
ms-videos nav [card] {
margin: 0 20px 20px 0
}
}
@media(min-width:768px)and (max-width:1310px) {
ms-videos nav [card] {
margin-bottom: 0
}
}
@media(max-width:767px) {
ms-videos nav [card] {
background: #fff;
margin-bottom: 20px
}
}
@media(min-width:768px) {
ms-videos nav [card] figure {
min-height: 152px;
padding: 26px 0 26px 170px;
position: relative;
text-align: left
}
}
@media(min-width:768px)and (max-width:1310px) {
ms-videos nav [card] figure {
padding-bottom: 14px;
padding-top: 14px
}
}
@media(min-width:768px) {
ms-videos nav [card] figure:before {
color: #fff;
font-size: 44px;
left: 75px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
transition: text-shadow .25s;
z-index: 1
}
}
@media(max-width:767px) {
ms-videos nav [card] figure:before {
display: none
}
}
ms-videos nav [card] figure > span {
background-position: 50%;
background-size: cover
}
@media(min-width:768px) {
ms-videos nav [card] figure > span {
bottom: 0;
left: 0;
position: absolute;
top: 0;
transition: box-shadow .25s,opacity .25s;
width: 150px
}
ms-videos nav [card] figure > span:before {
display: none
}
}
@media(max-width:767px) {
ms-videos nav [card] figure > span {
box-sizing: content-box;
display: block;
left: 0;
padding-bottom: 67%;
position: relative;
top: 0
}
ms-videos nav [card] figure > span:before {
color: #fff;
font-size: 70px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
transition: text-shadow .25s;
z-index: 1
}
}
ms-videos nav [card] figure figcaption {
transition: color .25s
}
@media(max-width:767px) {
ms-videos nav [card] figure figcaption {
font-family: industry,sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 30px;
padding: 25px
}
}
@media(max-width:1310px)and (min-width:768px) {
ms-videos nav [card] figure {
min-height: 0;
padding-left: 60px
}
ms-videos nav [card] figure:before {
font-size: 26px;
left: 20px
}
ms-videos nav [card] figure > span {
bottom: auto;
height: 40px;
top: 50%;
transform: translateY(-50%);
width: 40px
}
ms-videos nav [card] figure figcaption {
line-height: 1.3
}
}
ms-videos nav [card]:not(.selected) {
cursor: pointer
}
html:not(.touch) ms-videos nav [card]:not(.selected):hover figure:before {
text-shadow: 0 5px 10px rgba(0,0,0,.5)
}
html:not(.touch) ms-videos nav [card]:not(.selected):hover figure > span {
opacity: .75
}
html:not(.touch) ms-videos nav [card]:not(.selected):hover figcaption {
color: #6f87a6
}
.jw-state-idle .jw-title .jw-title-primary {
display: none
}
ms-float {
background-color: #f7f7f7;
padding: 0 20px
}
ms-float + * {
position: relative;
z-index: 1
}
ms-float h1 {
margin-top: 0
}
ms-float p:last-child {
margin-bottom: 0
}
ms-float > * {
min-height: 28.4040995608vw;
position: relative
}
@media(max-width:767px) {
ms-float > * {
display: flex;
flex-direction: column-reverse
}
}
@media(min-width:768px) {
ms-float > * > * {
box-shadow: 0 9px 26.68px 2.32px rgba(0,0,0,.02);
position: absolute
}
}
@media(max-width:767px) {
ms-float > * > * {
box-shadow: 0 9px 26.68px 2.32px rgba(0,0,0,.02);
display: block
}
}
ms-float > * > inner-content {
background-color: #fff;
max-width: 740px;
padding: 45px
}
@media(min-width:768px) {
ms-float > * > inner-content {
left: 0;
top: -100px
}
}
@media(max-width:767px) {
ms-float > * > inner-content {
padding: 34px 26px;
position: relative;
transform: translateY(-28px) !important;
z-index: 1
}
ms-float > * > inner-content h1 {
font-size: 42px
}
}
@media(min-width:768px) {
ms-float > * > img {
right: 0;
top: -30px
}
}
@media(max-width:767px) {
ms-float > * > img {
transform: scale(.9) translate(28px,-74px) !important
}
}
ms-news {
background-attachment: fixed;
background-color: #26598f;
background-image: url(../jpg/news.jpg);
background-position: 50%;
background-size: cover;
padding: 6.2957540264vw 20px
}
ms-news:after {
clear: both;
content: "";
display: table
}
ms-news > header {
padding-bottom: 60px;
text-align: center
}
ms-news > header * {
color: #fff
}
ms-news > section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
max-width: 928px
}
ms-news > section > * {
background: #fff;
flex: 1;
max-height: 250px;
overflow: hidden;
padding-top: 30px;
position: relative;
transition: all .5s ease-in
}
@media(min-width:768px) {
ms-news > section > * {
flex-basis: calc(50% - 20px);
margin: 10px;
max-width: calc(50% - 20px);
width: calc(50% - 20px)
}
}
@media(max-width:767px) {
ms-news > section > * {
flex-basis: 100%;
margin: 10px 0;
max-width: 100%;
width: 100%
}
}
ms-news > section > * > * {
padding-left: 30px;
padding-right: 30px;
position: relative;
z-index: 1
}
ms-news > section > :before {
background-attachment: fixed;
background-image: url(../jpg/news.jpg);
background-position: 50%;
background-size: cover;
bottom: -20px;
content: "";
filter: url("data:image/svg+xml;utf9,#blur");
-ms-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);
left: -20px;
opacity: .57;
position: absolute;
right: -20px;
top: -20px;
transition: opacity .5s ease-in;
z-index: 0
}
ms-news > section > * footer {
background: rgba(255,255,255,.2);
bottom: 0;
color: #6f87a6;
font-size: 14px;
height: 53px;
left: 0;
padding: 14px 30px;
position: absolute;
right: 0;
text-transform: uppercase;
transform: translateY(100%);
transition: transform .5s ease-in
}
ms-news > section > * footer:after {
display: inline-block;
margin-left: 10px;
vertical-align: middle
}
html:not(.touch) ms-news > section > :hover {
padding-bottom: 53px
}
html:not(.touch) ms-news > section > :hover:before {
opacity: .4
}
html:not(.touch) ms-news > section > :hover footer {
transform: translateY(0)
}
@media(max-width:767px) {
ms-news > section > * {
max-height: none;
padding-bottom: 53px
}
ms-news > section > * footer {
transform: translateY(0)
}
}
ms-news > section > * header {
display: flex
}
ms-news > section > * header > * {
color: #000;
flex: 1
}
ms-news > section > * header h3 {
font-size: 15px;
margin-top: 0;
opacity: .5
}
ms-news > section > * header time {
flex-basis: 60px;
font-size: 11px;
margin-left: 10px;
max-width: 60px;
opacity: .6;
text-align: right
}
ms-news > section > * p {
color: #000;
font-size: 20px
}
ms-news > footer {
padding: 40px 20px;
text-align: center
}
ms-news > footer button {
background: transparent;
border: 2px solid #fff;
border-radius: 21px;
line-height: 38px;
padding: 0 30px;
text-transform: uppercase
}
html:not(.touch) ms-news > footer button:hover, ms-news > footer button:active, ms-news > footer button:focus {
background: transparent;
box-shadow: 0 1px 10px rgba(0,0,0,.5);
text-shadow: 0 1px 10px rgba(0,0,0,.5)
}
@media(max-width:767px) {
ms-news > footer button {
font-size: 17px;
padding: 0 15px
}
}
@media(min-width:768px) {
ms-news:not(.expanded) > section > :nth-child(6) ~ * {
margin-bottom: 0;
margin-top: 0;
max-height: 0;
padding-bottom: 0;
padding-top: 0
}
}
@media(max-width:767px) {
ms-news:not(.expanded) > section > :nth-child(3) ~ * {
margin-bottom: 0;
margin-top: 0;
max-height: 0;
padding-bottom: 0;
padding-top: 0
}
}
ms-news.expanded > footer {
display: none
}
ms-slides {
background-color: #219de0;
background-image: url(../jpg/technology.jpg);
background-position: 50%;
background-size: cover;
margin-bottom: 197px;
padding-top: 6.2957540264vw
}
@media(max-width:767px) {
ms-slides {
padding-left: 20px;
padding-right: 20px
}
}
ms-slides:after {
clear: both;
content: "";
display: table
}
ms-slides > header {
padding-bottom: 60px;
text-align: center
}
ms-slides > header * {
color: #fff
}
ms-slides .swiper-container {
height: 482px;
width: 100%
}
@media(min-width:768px) {
ms-slides .swiper-container {
margin-bottom: -164px !important;
padding-bottom: 60px
}
ms-slides .swiper-container:after {
background: #fff;
bottom: 243px;
content: "";
height: 1px;
left: 154px;
position: absolute;
right: 34px
}
}
@media(max-width:767px) {
ms-slides .swiper-container {
box-sizing: content-box;
height: 89.0625vw;
margin-bottom: -222px !important;
padding-bottom: 98px
}
}
ms-slides .swiper-container .swiper-slide {
box-shadow: 0 1px 8px 0 rgba(0,0,0,.1);
display: flex;
flex-direction: column;
opacity: .25;
transition: all .25s
}
ms-slides .swiper-container .swiper-slide.swiper-slide-active, ms-slides .swiper-container .swiper-slide.swiper-slide-active ~ .swiper-slide {
opacity: 1
}
@media(min-width:768px) {
ms-slides .swiper-container .swiper-slide {
height: 422px;
width: 672px
}
ms-slides .swiper-container .swiper-slide:not(.swiper-slide-active) {
transform: scale(.8)
}
}
@media(max-width:767px) {
ms-slides .swiper-container .swiper-slide {
height: 89.0625vw;
width: 86.5625vw
}
}
ms-slides .swiper-container .swiper-slide > header {
background-position: top;
background-size: cover;
flex: 1
}
ms-slides .swiper-container .swiper-slide > label {
background-color: #fff;
color: #010101;
font-size: 20px;
padding: 20px
}
ms-slides .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0;
margin-top: 0;
right: auto;
top: auto
}
@media(max-width:767px) {
ms-slides .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 46px
}
}
ms-slides .swiper-button-next, ms-slides .swiper-button-prev {
background: none;
bottom: 256px;
color: #fff;
font-size: 26px
}
@media(max-width:767px) {
ms-slides .swiper-button-next, ms-slides .swiper-button-prev {
display: none
}
}
ms-slides .swiper-button-prev {
left: 34px
}
ms-slides .swiper-button-next {
left: 100px
}
ms-container {
background-color: #f7f7f7;
padding: 20px
}
ms-container > * {
text-align: center
}
comp-swipe-card comp-card {
display: inline-block !important;
font-size: 16px;
height: 100vh;
position: relative;
vertical-align: top;
white-space: normal;
width: 100vw;
}
comp-swipe-card .swiper-button-next,
comp-swipe-card .swiper-button-prev {
background-image: unset;
background-color: rgba(34,37,51,.35);
color: #fff;
cursor: pointer;
font-size: 16px;
height: 4.39238653vw;
line-height: 4.39238653vw;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
transition: background-color .25s;
width: 4.0263543192vw;
z-index: 10;
}
comp-swipe-card .swiper-pagination {
position: absolute;
text-align: center;
transform: translateZ(0);
transition: .3s;
z-index: 10;
}
comp-swipe-card .swiper-pagination-bullets {
bottom: 22px !important;
left: 0 !important;
width: 100% !important;
}
comp-swipe-card .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px !important;
background: transparent;
border: 2px solid #888;
border-radius: 100%;
display: inline-block;
height: 14px;
width: 14px;
opacity: 1;
}
comp-swipe-card .swiper-pagination-bullets .swiper-pagination-bullet-active {
background: #888 !important;
box-shadow: 0 0 50px rgb(0 0 0 / 50%) !important;
}
comp-swipe-card .swiper-wrapper {
display: block;
height: unset;
width: unset;
position: unset;
}
comp-swipe-card .swiper-slide {
flex-shrink: unset;
height: 100vh;
}
comp-truck-explore .swiper-button-next, comp-truck-explore .swiper-button-prev {
background-image: unset;
}
comp-truck-explore .swiper-pagination-bullet {
background: transparent;
border: 2px solid #888;
border-radius: 100%;
display: inline-block;
height: 14px;
width: 14px;
opacity: 1;
}
article[blog] nav a .blog-title {
flex-grow: 2;
}
article[blog] nav a.prev .blog-title {
padding-left: 3vw;
}
article[blog] nav a.prev .dir {
padding-right: 0;
padding-left: 2vw;
}
article[blog] nav a.next .dir {
padding-left: 0;
padding-right: 2vw;
}
article[blog] nav a.next .blog-title {
padding-right: 3vw;
}
comp-highlight inner-content a.resource-item {
width: unset;
height: unset;
}
comp-highlight inner-content a.resource-item:before {
vertical-align: middle !important;
}
a[type=VID] {
height: 100%;
width: auto;
}
.btn[type=VID]:before {
margin-top: 5px;
}
comp-vin-lookup .btn-help {
border-radius: 50%;
font-size: 12px;
height: 20px;
line-height: 22px;
padding: 0;
position: relative;
text-align: center;
top: -1px;
width: 20px;
}
comp-vin-results .content-section .asset {
width: unset !important;
height: unset !important;
background-color: unset !important;
font-size: unset !important;
}
comp-vin-results .content-section .asset:before {
line-height: unset !important;
vertical-align: unset !important;
content: unset !important;
}
comp-vin-results .content-section .asset.vid-link {
background: url(../png/video-icon.png) no-repeat left 3px;
}
comp-vin-results .content-section .asset.fab-link,
comp-vin-results .content-section .asset.img-link {
background: url(../png/download-icon-2.png) no-repeat left 3px;
}
comp-vin-results .content-section .asset.vid-link {
background: url(../png/video-icon.png) no-repeat left 3px !important;
}
comp-resources .children .btn.btn-default {
line-height: unset !important;
min-height: unset !important;
}
.resource-item.testimonial::before {
content: "";
}
.resource-item.testimonial {
background-color: #fff !important;
text-align: left;
}
comp-resources .group .group-inner a.resource-item {
background-color: unset !important;
}
comp-resources .group .group-inner a[type="VID"] {
color: #484848;
display: inline-block;
line-height: normal;
margin-bottom: 44px;
margin-right: 4%;
min-height: 60px;
padding: 0 10px 20px 0;
position: relative;
transition: all .25s;
vertical-align: top;
width: 40%;
height: unset;
font-size: unset;
text-align: unset;
}
comp-resources .group .group-inner a[type="VID"]:before {
clear: both;
content: "";
display: table;
}
/*Navigation Changes - To Be Isolated, Time Allowing. - K.P.*/
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none !important; /* IE and Edge */
scrollbar-width: none !important; /* Firefox */
}
.navre-text {
color: #000;
display: block;
font-family: industry,sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .75px;
overflow: visible;
margin-bottom: 0;
text-transform: uppercase;
margin-left: 8px;
margin-right: 8px;
}
/*Navigation Remaster Effects - Please Do Not Touch - K.P.*/
.navre-text:hover {
color: #934849 !important;
}
.navre-menutext:hover {
color: #934849 !important;
}
.navre-push {
transition: 350ms margin-right, 350ms margin-left;
}
.navre-push:hover {
margin-right: 16px;
margin-left: 16px
}
.navre-glow {
transition-duration: 50ms;
transition-property: filter;
filter: saturate(0.90) brightness(0.85);
transition-timing-function: ease-in-out;
}
.navre-glow img {
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.navre-glow:hover {
filter: saturate(1.75) brightness(1.05);
transition-duration: 50ms;
transition-property: filter;
transition-timing-function: ease-in-out;
}
#navigationDrawer {
transition: max-height 250ms ease-in-out;
will-change: max-height;
}
#searchContent {
transition: width 250ms ease-in-out;
will-change: width;
}
#search_autocomplete {
color: white;
padding-left: 12px;
padding-top: 16px;
font-size: 20px;
}
/***** Override Funky stuff on RCO *****/
ms-hero[home].rco {
min-height: 49.85vw;
}
ms-hero[home].rco div.rco {
padding: 0;
}
ms-hero[home].rco div.rco h1.rco {
font-size: 48px;
font-weight: 500;
font-style: normal;
line-height: 1.1;
margin-top: 29px;
text-transform: none;
}
ms-hero[home].rco div.rco a.rco {
border-radius: 25px;
padding: 11px 30px;
text-transform: none;
}
ms-hero[home] div p.rco {
text-transform: none;
}
ms-callout[dark] p.rco {
margin-left: auto;
margin-right: auto;
max-width: 582px;
}
ms-callout p.rco {
margin-left: auto;
margin-right: auto;
}
ms-pull inner-content a.resource-item {
margin-top: -35px;
display: inline-block;
font-size: 70px;
padding: 0;
transition: all .5s ease;
white-space: normal;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
border: 0;
color: #fff;
font-family: industry,sans-serif;
text-align: center;
width: 70px;
height: 70px;
background: transparent !important;
}
ms-pull inner-content a.resource-item:hover {
background: transparent !important;
}
ms-hero[sub] h1.rco {
font-style: normal;
}
ms-hero[sub] div.rco p {
text-transform: none;
}
ms-hero[sub] div.rco a {
border-radius: 25px;
}
ms-pull[piller-nav] inner-content a[role=button] {
background-color: #5387e6;
}
body > article.rco, ms-pillar.rco[type=cards] {
background-image: url(../png/background-light.png);
margin: 0 auto;
max-width: 1278px;
overflow: visible
}
/******* Override Legacy CSS for Blogs **************/
article[blog] {
padding-top: 0;
}
/******* Override Legacy CSS for Newsletter **************/
form[type="Newsletter"] .error {
border-color: red;
}
form[type="Newsletter"] select.error {
border-bottom: 1px solid red;
}
/******* Override Legacy CSS for Loading button **************/
input[type="submit"].loading {
background-image: url(https://freightliner.azureedge.net/images/loader.svg);
background-color: #ccc !important;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
cursor: not-allowed;
}
input[type="submit"].loading:hover,
input[type="submit"].loading:active,
input[type="submit"].loading:link,
input[type="submit"].loading:visited {
background-color: #ccc !important;
cursor: not-allowed;
}
/******* Override Legacy CSS for Electric Hero **************/
comp-truck-hero .specs.light a {
background-color: #75c1e3;
}
/******* Override Legacy CSS for comp-background video button *********/
comp-highlight comp-background[hasbutton] a[role="button"] {
background-color: #6f87a6 !important;
z-index: 10;
}
comp-highlight comp-background[hasbutton] a[role="button"]:hover {
background-color: #713738 !important;
}
comp-highlight inner-content a[type="vid"] {
background-color: #6f87a6;
border: 0;
color: #fff;
font-family: industry,sans-serif;
font-size: 18px;
letter-spacing: .075em;
line-height: 1.5;
max-width: 100%;
padding: 11px 30px;
transition: all .5s ease;
white-space: normal;
}
comp-highlight inner-content a[type="vid"]:before {
display: inline-block;
margin: 0 5px 0 0 !important;
vertical-align: middle;
content: "p";
}
#modal-dialog [option-container] figure.included a {
cursor: pointer;
}
.tippy-box[data-animation=fade][data-state=hidden] {
opacity: 0
}
[data-tippy-root] {
max-width: calc(100vw - 10px)
}
.tippy-box {
position: relative;
background-color: #333;
color: #fff;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
white-space: normal;
outline: 0;
transition-property: transform,visibility,opacity
}
.tippy-box[data-placement^=top] > .tippy-arrow {
bottom: 0
}
.tippy-box[data-placement^=top] > .tippy-arrow:before {
bottom: -7px;
left: 0;
border-width: 8px 8px 0;
border-top-color: initial;
transform-origin: center top
}
.tippy-box[data-placement^=bottom] > .tippy-arrow {
top: 0
}
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
top: -7px;
left: 0;
border-width: 0 8px 8px;
border-bottom-color: initial;
transform-origin: center bottom
}
.tippy-box[data-placement^=left] > .tippy-arrow {
right: 0
}
.tippy-box[data-placement^=left] > .tippy-arrow:before {
border-width: 8px 0 8px 8px;
border-left-color: initial;
right: -7px;
transform-origin: center left
}
.tippy-box[data-placement^=right] > .tippy-arrow {
left: 0
}
.tippy-box[data-placement^=right] > .tippy-arrow:before {
left: -7px;
border-width: 8px 8px 8px 0;
border-right-color: initial;
transform-origin: center right
}
.tippy-box[data-inertia][data-state=visible] {
transition-timing-function: cubic-bezier(.54,1.5,.38,1.11)
}
.tippy-arrow {
width: 16px;
height: 16px;
color: #333
}
.tippy-arrow:before {
content: "";
position: absolute;
border-color: transparent;
border-style: solid
}
.tippy-content {
position: relative;
padding: 5px 9px;
z-index: 1
}
.form-button-loading {
background-image: url(../gif/ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
background-color: #fff !important;
border: 1px solid #6f87a6 !important;
cursor: progress !important;
}