/*
FONTS

font-family: graphik;
font-family: graphikm;
font-family: druk;

*/


@font-face {
    font-family: 'graphik';
	src: url('/css/fonts/Graphik-Regular.woff') format('woff'),
         url('/css/fonts/Graphik-Regular.woff2') format('woff2'),
         url('/css/fonts/Graphik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'graphikm';
	src: url('fonts/Graphik-Medium.woff') format('woff'),
         url('fonts/Graphik-Bold.woff2') format('woff2'),
         url('fonts/Graphik-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'druk';
	src: url('fonts/Druk-Bold.woff') format('woff'),
         url('fonts/Druk-Bold.woff2') format('woff2'),
         url('fonts/Druk-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* VARIABLES */

:root {
  --default-font: graphik;
  --default-font-size: 18px;
  --default-line-height: 1.66;

  --default-input-font: graphik;
  --default-input-font-size: 18px;
  --dim-input-height: 50px;
  
  --button-input-font: graphikm;
  --button-font-size: 18px;
  --button-height: 50px;

  --col-primary: #003C77;
  --col-accent: #000;
  --col-burger: #003C77;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #707070;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: #fff;
  --col-button: #fff;
  --col-button-bg: #003C77;
  --col-link: #000;
  --col-link-hover: #000000;

  --col-error: #ff6633;
  --col-attention: #ff6633;
  --col-warning: #f5b00e;
  --col-missing: #ff6633;

  --col-primary-rgb: 0,122,209;
  --col-accent-rgb: 0, 0, 0;
  --col-button-rgb: 255, 255, 255;
  --col-link-rgb: 0,0,0;
  --col-link-hover-rgb: 0, 0, 0;
  --col-error-rgb: 255, 51, 0;
  --col-attention-rgb: 255, 51, 0;
  --col-warning-rgb: 245, 176, 14;
  --col-border-rgb: 190, 190, 190;
  --col-missing-rgb: 255, 51, 0;

  --dim-site-width: 1920px;
  --dim-default-space: 120px;

  --vh: 1vh;

 --ds: #6AAAE4;
--dw: #003C77;
--es: #00945E;
--ba: #898A8D;
--lm: #356E2C;

}

/* theme */


/*CORE HTML*/

p { margin-bottom: 40px; font-weight: 300}
p a:hover { color: #aaa;}
a.underline { text-decoration: underline}

h1, h2 { font-size: 140px; font-family: druk; margin: 0 auto 65px; text-align: center; color: var(--col-primary); line-height: 1; text-transform: uppercase; }
h1.home-headline { font-size: 72px; padding: 100px 0 0px; }
h1.h2 { font-size: 120px; }
h2 { text-align: left; margin-bottom: 30px; font-size: 120px; }
/*h2 { font-weight: 200; font-size: 32px; margin: 0 auto; text-align: left; color: #000; line-height: 1.1; text-transform: uppercase; margin-bottom: 14px}*/
h3 { font-family: graphikm; font-size: 40px; text-align: left; color: var(--col-primary); line-height: 1.1;  text-transform: uppercase; margin-bottom: 20px}
h4 { font-family: graphikm; font-size: 30px; text-align: left; line-height: 1.1;  margin-bottom: 30px}

h3.isolated { margin-bottom: 40px}
h3:empty { display: none;}

h1 { transform: translateY(-200px); opacity: 0}
.in-better-view h1 { transform: translateY(0px); opacity: 1; transition: all 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; }

p.larger { font-size: 25px; line-height: 1.44}
p.short { max-width: 1360px; margin-right: auto; margin-left: 0}
p.shorter { max-width: 1160px; margin-right: auto; margin-left: 0}
p.shortest { max-width: 1040px; margin-right: auto; margin-left: 0;}

/*CONTAINERS*/

article { padding-top: 0px; }
section { max-width: 1720px; padding-left: 40px; padding-right: 40px; z-index: 2;}
section.masthead { z-index: 3; max-width: 1720px; padding-left: 40px; padding-right: 40px; }
section.narrow { max-width: 1440px; }
section.full { max-width: 1920px; padding-left: 0; padding-right: 0}
#mainbody {    min-height: 0}


/*BUTTONS*/
a.btn { padding: 0 20px; background-color: var(--col-primary); border-radius: 5px; text-transform: none; display: table; width: auto; margin-left: 0; margin-right: auto}
.ds a.btn  { background-color: var(--ds)}
.dw a.btn  { background-color: var(--dw)}
.es a.btn  { background-color: var(--es)}
.ba a.btn  { background-color: var(--ba)}
.lm a.btn  { background-color: var(--lm)}
a.special-button img {height: 72px;}
a.special-button { padding: 25px 35px; border-radius: 16px; display: table; margin: 0 auto 0 0}
a.special-button.ds { background-color: var(--ds)}
a.special-button.dw { background-color: var(--dw)}
a.special-button.es { background-color: var(--es)}
a.special-button.ba { background-color: var(--ba)}
a.special-button.lm { background-color: var(--lm)}

div.buttons { display: flex; gap: 10px; justify-content: flex-start;}

/*COLORS*/

.c-primary { color: var(--col-primary) !important}
.c-black { color: #000 !important}
.b-primary { background-color: var(--col-primary) !important}
.b-black { background-color: #000 !important}
.b-gray {background-color: #F2F2F2 !important}

.c-ds {color: #6AAAE4 !important}
.c-dw {color: #003C77 !important}
.c-es {color: #00945E !important}
.c-ba {color: #898A8D !important}
.c-lm {color: #356E2C !important}
.b-ds {background-color: #6AAAE4 !important}
.b-dw {background-color: #003C77 !important}
.b-es {background-color: #00945E !important}
.b-ba {background-color: #898A8D !important}
.b-lm {background-color: #356E2C !important}


/*HEADER AND NAV*/

header { max-width: 100%; position: relative; top: 0; left: 0%;  z-index: 5; background: #fff; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; margin: 0 auto; }
header > div { padding-top: 160px; position: relative;}
header > div > div { margin: 0 auto; position: relative}
header > div > div.topline { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1920px; z-index: 3;}
div.burger { left: 20px; top: 60px; display: block; position: absolute; }
header div.logo { left: 140px; top: 50px; display: block; position: absolute; width: 247px;}
div.quick-actions { position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end;}
div.quick-actions a { display: block; width: 210px; text-align: center; line-height: 60px; color: #fff; font-size: 20px; font-family: graphikm; background: var(--col-primary); z-index: 2; border-radius: 0px 0 0 10px; position: relative; transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.quick-actions a:hover {background: var(--ba)}
div.quick-actions a:first-child { background: var( --ds); z-index: 1; left: 10px;}
div.quick-actions a:first-child:hover { background: var( --ba);}

div.navigation {position: relative;  width: 100%; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; }
div.navigation > div { max-width: 1920px; position: relative; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; gap: 80px; padding: 0 140px; align-items: center; }
div.tagline { width: 313px;}
div.tagline img { width: 100%; max-width: 157px; display: block;}
subnav { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 393px);}
subnav > div { padding: 0px; position: static;}
subnav > div > a { padding: 30px 20px; display: block;}
subnav > div > a:hover { background: #F8F8F8}
subnav div.subnav { width: 100%; position: absolute; top: 90px; left: 0; background: #F8F8F8; display: none; padding: 40px 20px;}
subnav div.subnav > div { width: 100%; max-width: 1640px; display: flex; gap: 90px; margin: 0 auto;}
subnav > div:hover > a { background: #F8F8F8;}
subnav > div:hover > div.subnav { display: block; }

subnav div.menu-video { width: 320px;}
subnav div.menu-video > div { width: 100%; position: relative; padding-bottom: 56.25%; }
subnav div.menu-video > div iframe { width: 100%; position: absolute; height: 100%; border: 0; display: block;}
subnav div.links { display: flex; justify-content: space-between; gap: 120px; }
subnav div.links div { text-align: left; display: flex; flex-direction: column; gap: 10px;}
subnav div.links a { font-size: 15px; color: #707070; }
subnav div.links strong { font-family: graphikm; font-size: 15px; padding-bottom: 15px; font-weight: normal; text-transform: uppercase;}
subnav div.ds strong, subnav div.ds div.subnav a:hover { color: var(--ds)}
subnav div.dw strong, subnav div.dw div.subnav a:hover { color: var(--dw)}
subnav div.es strong, subnav div.es div.subnav a:hover { color: var(--es)}
subnav div.ba strong, subnav div.ba div.subnav a:hover { color: var(--ba)}
subnav div.lm strong, subnav div.lm div.subnav a:hover { color: var(--lm)}

nav { position: absolute; left: 0; top: 183px; width: 400px; display: flex; justify-content: flex-start; flex-direction: column; gap: 20px; left: -200vw; opacity: 0; background: #fff; z-index: 5; padding: 0px 0 50px;}
header.active nav { left: 0; opacity: 1;}
nav a { font-size: 18px; text-align:left; color: #000; padding-left: 40px; }
nav a:hover { color: var(--ds)}

header.attached > div > div.topline {position: fixed; top: -600px; opacity: 0}
header.attached.visible > div > div.topline {top: 0px; opacity: 1; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; background: #fff; height: 60px}
header.attached.visible {background: #fff; }
header.attached.visible div.burger {top: 0}
header.attached.visible div.logo {top: 20px; left: 70px; width: 80px;}
header.attached.visible div.quick-actions a {width: 160px; font-size: 14px; line-height: 60px;}
header.attached.visible nav { top: 60px; padding-top: 20px}

footer { display: block; width: 100%; padding-bottom: 45px; z-index: 5; position: relative}
footer section { max-width: 100%; width: 100%; margin: 0 auto; padding: 0}
div.star-shine { height: 7px; width: 100%; position: relative; display: block; max-width: 100%; margin: 0 auto; }
div.star-shine span:first-child { height: 6px; background: var(--col-primary); width: 0; position: absolute; display: block; left: 0px; top: 0px; }
div.star-shine span:last-child { height: 6px; background: var(--col-primary); position: absolute; display: block; left: calc(108px + 50vw - 960px); top: 0px; width: 0; opacity: 0; transition: all .5s linear 1.2s}
.in-better-view div.star-shine span:first-child { width: 100vw; transition: all .3s linear .9s}
.in-better-view div.star-shine span:last-child { width: calc(50vw - 108px + 960px); opacity: 1}
div.star-shine > img { width: 46px; position: absolute; display: block; left: calc(50vw - 960px + 64px); top: -121px; opacity: 0}
.in-better-view div.star-shine > img { opacity: 1; transition: all .3s ease-in 1.7s}

div.footer { padding: 88px 100px 0; max-width: 1772px; display: flex; gap: 40px; justify-content: space-between}
div.footer div.logo { width: 286px; padding-right: 40px; display: flex; justify-content: flex-start; flex-direction: column; gap: 45px;}
div.footer div.logo div { width: 100%;}
div.footer div.logo div:last-child { max-width: 60%;}
div.footer div.brands { display: flex; justify-content: flex-start; flex-direction: column; gap: 20px;}
div.footer div.nav { display: flex; justify-content: flex-start; flex-direction: column; gap: 20px;}
div.footer div.nav a { font-size: 20px; font-family: graphikm; color: var(--col-primary); }
div.footer div.address > div { display: flex; justify-content: space-between; flex-direction: column; gap: 20px;}
div.footer div.address strong { display: block; font-size: 20px; font-family: graphikm; color: var(--col-primary); margin-bottom: 10px; font-weight: normal;}
div.footer div.address p { display: block; font-size: 15px; color: var(--col-primary); margin-bottom: 20px;color: #000;}
div.footer div.address div.actions { display: flex; gap: 28px; justify-content: flex-start; align-items: flex-end; }
div.footer div.address div.actions span { font-size: 12px; color: #000; display: block; margin-bottom: 10px;}
div.footer div.address div.actions a { font-size: 10px; color: #fff; background: var(--col-primary); line-height: 35px; padding: 0 14px 0 35px; text-align: left; font-family: graphikm; position: relative; display: block; border-radius: 5px}
div.footer div.address div.actions a:before { content:""; display: block; position: absolute; left: 10px; top: 0; height: 100%; width: 15px; background: url(/img/svg/white/call.svg) no-repeat left center; background-size: contain;}
div.footer div.address div.actions div:nth-child(2) a:before { background-image: url(/img/svg/white/fax.svg);}
div.footer div.address div.actions div:nth-child(3) a:before { background-image: url(/img/svg/white/email.svg);}
div.footer div.social { display: block;}
div.footer div.social > span { display: block; font-size: 20px; font-family: graphikm; color: var(--col-primary); margin-bottom: 20px; font-weight: normal; }
div.footer div.social div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 12px; }
div.footer div.social div a { display: block; font-size: 20px; color: var(--col-primary); padding: 15px; border: 1px solid #D2D2D2; border-radius: 5px;}

div.address-block { display: flex; flex-direction: column; justify-content: space-between; gap: 40px}
div.address-block > div { display: flex; gap: 40px; justify-content: space-between}
div.address-block > div.disclaimer { justify-content: flex-start; }
div.address-block > div.disclaimer p { font-size: 12px}

/*CONTENT*/

div.masthead { margin-top: 60px}
div.masthead > img, div.masthead > picture, div.masthead > picture > img { display: block; width: 100%;}
div.masthead > picture.placeholder > img {border-radius: 40px;}
div.masthead div.caption { position: absolute; left: 70px; text-align: left; bottom: 50px; display: flex; justify-content: flex-start; align-items: flex-end; gap: 0;}
div.masthead div.caption div.title { font-size: 180px;font-family: druk;color: #fff; line-height: 0.85; text-transform: uppercase;}
div.masthead div.caption p { font-size: 30px;font-family: graphikm; color: #fff; position: relative; left: -140px;}
div.masthead a.play-video { position: absolute; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0)}

div.masthead div.inner-caption { position: absolute; left: 0px; text-align: left; top: 0; padding: 90px 80px 20px; text-align: left;}
div.masthead div.inner-caption-logo { position: absolute; left: 0px; text-align: left; top: 50%; padding: 0px 80px 0px; text-align: left; transform: translateY(-50%); }
div.masthead div.inner-caption-logo img { display: block; margin: 0 auto 0 0; height: 200px}

div.content-short { max-width: 980px; margin: 0 auto 0 0}

div.brand-tools { display: flex; width: 1920px; gap: 20px; justify-content: center; align-items: flex-start; position: relative; top: -90px; left: -140px; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); height: 350px; display: none !important}
div.brand-tools > div { width: 350px; background: #fff; border-radius: 40px; padding: 50px 40px; text-align: left; display: flex; justify-content: space-between; flex-direction: column; border: 1px solid #CCCCCC; transition: width .3s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.brand-tools div.top { height: 145px;}
div.brand-tools div.bottom { height: 160px;}
div.brand-tools div.bottom img { display: block; top: 50%; margin: 0 auto 0 0; transform: translateY(-50%); position: relative; height: 70px; transition: height .2s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.brand-tools .lm div.bottom img { height: 160px; position: relative; left: -15px;}
div.brand-tools div.rsg { display: none}

div.brand-tools.active { width: 2270px; left: -315px;}
div.brand-tools > div.active { width: 700px; padding-bottom: 0; gap: 120px}
div.brand-tools > div.active div.top { height: auto;}
div.brand-tools > div.active div.logo { display: none;}
div.brand-tools > div.active div.rsg { display: flex; gap: 100px; }
div.brand-tools div.active div.bottom img { top: 0; transform: translateY(0); height: 140px;}
div.brand-tools div.active.lm div.bottom img {height: 140px; left: 0}
div.brand-tools div.title {font-size: 200px; font-family: druk; }
div.brand-tools .ds div.title { color: var(--ds)}
div.brand-tools .dw div.title { color: var(--dw)}
div.brand-tools .es div.title { color: var(--es)}
div.brand-tools .ba div.title { color: var(--ba)}
div.brand-tools .lm div.title { color: var(--lm)}
div.brand-tools div.links { display: flex; flex-direction: column; gap: 0; justify-content: flex-start; min-width: 300px;}
div.brand-tools div.links a { display: block; padding-left: 76px; padding-right: 20px; position: relative; line-height: 80px; border-bottom: 1px solid #ccc; font-size: 20px; font-family: graphikm; color: #707070; align-items: flex-start; }
div.brand-tools div.links a img { display: block; position: absolute; width: 40px; top: 50%; transform: translateY(-50%); left: 0}
div.brand-tools div.links a:nth-child(2) img { width: 30px; left: 11px; }
div.brand-tools div.links a:nth-child(3) img { width: 26px; left: 13px; }
div.brand-tools div.links a:after { content: ""; width: 8px; height: 100%; position: absolute; top: 0; right: 0; display: block; background: url(/img/svg/arrow.svg) no-repeat right center; background-size: contain; }


div.brand-boxes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 160px; row-gap: 60px; }
div.brand-boxes > div { display: flex; gap: 0; justify-content: space-between; align-items: flex-start; flex-direction: column; border-radius: 40px; border: 1px solid #ccc; max-width: 600px}
div.brand-boxes div.thumbnail { display: block; margin-bottom: 40px; }
div.brand-boxes div.thumbnail > img { display: block;}
div.brand-boxes div.thumbnail > div{ display: block; position: absolute; left: 50px; bottom: 28px;}
div.brand-boxes div.thumbnail > div img { display: block; height: 100px}
div.brand-boxes p { padding: 0 50px;}
div.brand-boxes div.actions { display: flex; padding: 40px 20px; gap: 120px; justify-content: center; align-items: flex-end; margin: 0 auto; width: 100%; }
div.brand-boxes div.actions a { padding: 22px 0; position: relative; text-align: center; font-size: 20px; font-family: graphikm;}
div.brand-boxes div.actions a img { display: block; margin: 0 auto 17px;}
div.brand-boxes div.actions a:after { content:""; right: -59px; top: 0; display: block; position: absolute; width: 1px; background: #ccc; height: 100%; }
div.brand-boxes div.actions a:last-child:after { display: none;}
div.brand-boxes .ds div.actions a { color: var(--ds)}
div.brand-boxes .dw div.actions a { color: var(--dw)}
div.brand-boxes .es div.actions a { color: var(--es)}
div.brand-boxes .ba div.actions a { color: var(--ba)}
div.brand-boxes .lm div.actions a { color: var(--lm)}
div.brand-boxes div.quick-quote-form {background: var(--col-primary); padding: 50px; display: block}
div.brand-boxes div.quick-quote-form div.title { color: #fff; font-size: 70px; font-family: druk; margin-bottom: 20px}
div.brand-boxes div.quick-quote-form p { color: #fff; font-size: 20px; margin-bottom: 38px; text-align: left; width: 100%; padding: 0}
div.brand-boxes div.quick-quote-form a { color: #fff; }
div.brand-boxes div.quick-quote-form input[type="text"], div.quick-quote-form input[type="email"] { border: 1px solid #ccc; border-radius: 5px; }
div.brand-boxes div.quick-quote-form div.checkbox label { color: #fff; padding-left: 30px; font-size: 12px}
div.brand-boxes div.quick-quote-form div.checkbox label:before { border-color: #fff; background: #fff; width: 20px; height: 20px;}
div.brand-boxes div.quick-quote-form div.checkbox input:checked + label:before { background: url(/img/svg/checkmark.svg) #fff no-repeat center center; background-size: 16px 12px; }
div.brand-boxes div.quick-quote-form button {background: #fff; color: var(--col-primary); border-radius: 5px; text-transform: none; font-size: 18px; font-family: graphikm; font-weight: normal;}
div.brand-boxes div.bottom { padding: 0 50px 40px}
div.brand-boxes div.bottom img { height: 120px; margin: 0 auto 0 0; display: block}

div.brand-boxes > div { opacity: 0; transform: translateY(300px);}
div.brand-boxes > div.in-better-view { opacity: 1; transform: translateY(0);}
div.brand-boxes > div:nth-child(1).in-better-view { transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s; }
div.brand-boxes > div:nth-child(2).in-better-view { transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s; }
div.brand-boxes > div:nth-child(3).in-better-view { transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s; }
div.brand-boxes > div:nth-child(4).in-better-view { transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s; }
div.brand-boxes > div:nth-child(5).in-better-view { transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s; }
div.brand-boxes > div:nth-child(6).in-better-view { transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s; }

div.news-home { display: flex; gap: 50px; justify-content: center; margin-bottom: 65px}
div.news-home a { display: block; width: 33.33%}
div.news-home a div { margin-bottom: 30px; }
div.news-home a p { text-align: center; font-size: 25px; font-family: graphikm; color: var(--col-primary); line-height: 1.25;}
div.news-home a img { display: block; }

div.testimonials { display: flex; justify-content: space-between; gap: 40px;}
div.testimonials > div { max-width: 856px; padding-bottom: 60px;}
div.testimonials h2 { margin: 0}

ul.slick-dots {text-align: left; bottom:-60px; display: flex; justify-content: flex-start; gap: 10px; align-items: center;}
ul.slick-dots li {padding: 0px;}
ul.slick-dots li button { width: 10px; height: 10px; background: #CCCCCC;}
ul.slick-dots li.slick-active { padding: margin: 0 10px;}
ul.slick-dots li.slick-active button { width: 20px; height: 20px; background: var(--col-primary); }

div.newsletter-registration {max-width: 1640px; padding: 50px 40px;}
div.newsletter-registration input[type="text"], div.newsletter-registration input[type="email"] { border: 0px solid #ccc; border-radius: 5px; }
div.newsletter-registration div.form-footer { justify-content: space-between}
div.newsletter-registration button {color: #fff; background-color: var(--col-primary); border-radius: 5px; text-transform: none; font-size: 18px; font-family: graphikm; font-weight: normal; margin: 0 0 0 auto;}

div.project-gallery { margin-top: 40px; padding-bottom: 60px; margin-bottom: 100px}
div.project-gallery ul.slick-dots { justify-content: center;}
div.project-gallery .slick-slide img { border-radius: 40px; display: block}
div.project-gallery label {position: absolute; bottom: 50px; left: 60px; text-align: left; font-size: 40px; font-family: druk; color: #fff; text-transform: uppercase;}

div.stupid-idea { display: block; max-width: 1640px; margin: 0 auto 90px}
div.stupid-idea p { display: block; font-size: 80px; font-family: druk; text-transform: uppercase;}
div.stupid-idea p span { display: block; opacity: 0; position: relative; left: 0px;}
.in-better-view div.stupid-idea p span { opacity: 1; left: 0}
.in-better-view div.stupid-idea p span:nth-child(1) { transition: all .5s linear}
.in-better-view div.stupid-idea p span:nth-child(2) { transition: all .5s linear .3s}
.in-better-view div.stupid-idea p span:nth-child(3) { transition: all .5s linear .8s}
.in-better-view div.stupid-idea p span:nth-child(4) { transition: all .5s linear 1.3s}

div.rolling-trucks { display: flex; width: 100%; flex-direction: column; gap: 20px; justify-content: flex-start; align-items: flex-start;}
div.rolling-trucks > div { display: block; width: 100%; padding-left: 0px; padding-right: 0px; position: relative; height: 100px; opacity: 0}
div.rolling-trucks > div p { display: block; width: 100%; text-align: left; line-height: 100px; margin: 0; text-transform: uppercase; color: #fff; font-family: druk; font-size: 60px; opacity: 0; transition: opacity .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.2s}
div.rolling-trucks > div img { display: block; height: 100%; position: absolute; right: 0; top: 0; background: #fff;}

div.rolling-trucks > div.b-ds { max-width: 0px; transition: all 1.2s linear 2s}
div.rolling-trucks > div.b-dw { max-width: 0px; transition: all 1.2s linear 2s}
div.rolling-trucks > div.b-ba { max-width: 0px; transition: all 1.2s linear 2s}
div.rolling-trucks > div.b-es { max-width: 0px; transition: all 1.2s linear 2s}
div.rolling-trucks > div.b-lm { max-width:0px; transition: all 1.2s linear 2s}

.in-better-view div.rolling-trucks > div { padding-left: 140px; padding-right: 357px; }
.in-better-view div.rolling-trucks > div.b-ds { max-width: 78%; opacity: 1}
.in-better-view div.rolling-trucks > div.b-dw { max-width: 92%; opacity: 1}
.in-better-view div.rolling-trucks > div.b-ba { max-width: 86%; opacity: 1}
.in-better-view div.rolling-trucks > div.b-es { max-width: 65%; opacity: 1}
.in-better-view div.rolling-trucks > div.b-lm { max-width: 59%; opacity: 1}
.in-better-view div.rolling-trucks > div p { opacity: 1}
div.js-accordion {border-bottom: 1px solid #ccc}
div.js-accordion h5 {padding: 16px 140px 33px 65px; text-align: left; color: #fff; line-height: 1; font-size: 60px; font-family: druk; color: #CCCCCC; background: #fff; border: 1px solid #CCCCCC; border-bottom: 0; border-radius: 20px 20px 0 0; margin-top: -20px;text-transform: uppercase; position: relative}
div.js-accordion h5.last-accordion {padding-bottom: 16px}
div.js-accordion h5 span {position: absolute; right: 55px; top: -8px; height: 100%; width: 45px; background: url(/img/svg/plus.svg) no-repeat center center; background-size: contain; }
div.js-accordion h5.last-accordion span {top: 0}
div.js-accordion h5.ui-accordion-header-active { background-color: var(--ds); color: #fff; padding-bottom: 16px; }
div.js-accordion h5.ui-accordion-header-active span { background-image: url(/img/svg/white/minus.svg);top: 0}
.dw div.js-accordion h5.ui-accordion-header-active { background-color: var(--dw); }
.es div.js-accordion h5.ui-accordion-header-active { background-color: var(--es); }
.lm div.js-accordion h5.ui-accordion-header-active { background-color: var(--lm); }
.ba div.js-accordion h5.ui-accordion-header-active { background-color: var(--ba); }
div.js-accordion div.category { padding: 30px 35px 50px; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 20px; border-left: 1px solid #CCCCCC; border-right: 1px solid  #CCCCCC;}
div.js-accordion div.product { background: #F2F2F2; border-radius: 20px; padding: 40px 55px 35px; display: flex; justify-content: space-between; flex-direction: column; align-items: center; }
div.js-accordion div.product div.logo { margin-bottom: 30px}
div.js-accordion div.product div.logo img { height: 50px; display: block; margin: 0 auto;}
div.js-accordion div.product div.thumbnail { display: block; margin: 0 auto; margin-bottom: 40px;}
div.js-accordion div.product div.thumbnail img { display: block; width: 100%;border-radius: 20px; }
div.js-accordion div.product div.title { font-size: 20px; font-family: graphikm; margin-bottom: 10px; text-align: center;}
div.js-accordion div.product p { text-align: center;}
div.js-accordion div.product a.btn { margin-top: 20px;}
div.content-acccordion { padding: 70px; border-left: 1px solid #ccc; border-right: 1px solid #ccc}
ul { list-style-position: inside;}
ul.thick li { font-family: graphikm; font-size: 35px;}

div.articles { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 26px; row-gap: 60px;}
div.article-preview { border-radius: 20px; background: #F2F2F2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 40px; overflow: hidden}
div.article-preview div.thumbnail { width: 100%;}
div.article-preview div.thumbnail img { display: block; width: 100%; }
div.article-preview div.details { display: block; padding: 0 18px 15px 40px; height: 100%; width: 100%}
div.article-preview div.details p { padding-right: 22px}
div.article-preview div.title { display: flex; font-size: 40px; font-family: druk; line-height: 1.2; margin-bottom: 30px; text-transform: uppercase; gap: 34px; justify-content: space-between; align-items: flex-start;}
div.article-preview div.title span { display: block; min-width: 132px; font-size: 20px; font-family: druk; color: #fff; background: #ccc; text-align: center; border-radius: 33px; padding: 15px 10px}
div.article-preview div.subtitle { display: block; font-size: 20px; font-family: graphikm; line-height: 1.2; margin-bottom: 10px; text-transform: uppercase;}
div.article-preview div.date { display: block; font-size: 20px; font-family: graphik; font-weight: normal; line-height: 1.2; margin-bottom: 40px;}
div.article-preview > a { display: block; width: 100%; line-height: 60px; color: #fff; font-size: 18px; font-family: graphikm; text-align: center; text-transform: uppercase;}
div.article-preview.ds div.title { color: var(--ds);}
div.article-preview.dw div.title { color: var(--dw);}
div.article-preview.es div.title { color: var(--es);}
div.article-preview.ba div.title { color: var(--ba);}
div.article-preview.lm div.title { color: var(--lm);}
div.article-preview.ds > a { background-color: var(--ds);}
div.article-preview.dw > a { background-color: var(--dw);}
div.article-preview.es > a { background-color: var(--es);}
div.article-preview.ba > a { background-color: var(--ba);}
div.article-preview.lm > a { background-color: var(--lm);}

div.content-blog { max-width: 1500px; margin-right: auto; margin-left: 0; font-size: 24px;}
div.content-blog p { font-size: 24px;}
div.content-blog ul { margin-bottom: 40px}
div.content-blog.ds h2 { color: var(--ds);}
div.content-blog.dw h2 { color: var(--dw);}
div.content-blog.ba h2 { color: var(--ba);}
div.content-blog.es h2 { color: var(--es);}
div.content-blog.ds h3 { color: var(--ds);}
div.content-blog.dw h3 { color: var(--dw);}
div.content-blog.ba h3 { color: var(--ba);}
div.content-blog.es h3 { color: var(--es);}
div.content-blog a:not(.btn) { color: var(--dw); text-decoration: underline}
div.content-blog.ds a:not(.btn) { color: var(--ds);}
div.content-blog.es a:not(.btn) { color: var(--es);}
div.content-blog.ba a:not(.btn) { color: var(--ba);}

 div.team  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 60px; row-gap: 40px; margin-top: 60px}
 div.team div.thumbnail { margin-bottom: 30px }
 div.team div.thumbnail img { display: block; border-radius: 10px; box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.0); transition: all .3s linear}
 div.team a:hover div.thumbnail img { box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.43);}
 div.team div.name { display: block; margin-bottom: 10px; font-size: 20px; font-family: graphikm; color: var(--ds);}
 div.team div.title { display: block; font-size: 20px; font-family: graphikm; margin-bottom: 20px}
div.team div.info{ position: relative; padding-left: 50px; cursor: pointer;}
div.team div.info:after { position: absolute; content:""; top: 0; left: 0; width: 20px; height: 40px; display: block; background: url(/img/svg/plus2.svg) no-repeat center center; background-size: contain;}
div.team div.info.open:after { background-image: url(/img/svg/minus2.svg);}
div.team p { display: none;}
div.team div.info.open p { display: block;}

 div.careers { display: flex; gap: 150px;}
 div.careers div.sidemenu { width: 400px ; text-align: left;}
 div.careers div.job-listings { width: calc(100% - 550px); text-align: left; }
 div.filters {margin-bottom: 70px;}
 div.filter div.title {border-radius: 40px 40px 0 0; border: 1px solid var(--col-primary); background-color: var(--col-primary); color: #fff; line-height: 100px; padding: 0 30px; font-size: 40px; font-family: druk;  }
 div.filter div.filters { padding: 40px 30px; border: 1px solid #ccc; border-radius: 0 0 40px 40px; display: flex; gap: 30px; flex-direction: column}
 div.filter div.checkbox label { padding-left: 60px; font-size: 18px;}
 div.filter div.checkbox label:before { width: 20px; height:20px; }
 div.filter a.btn {margin: 0 auto 0 0}
div.job-listings div.company { margin-bottom: 60px}
div.job-listings div.company > img { display: block; margin-bottom: 60px; height: 60px}
div.job-listing {border-bottom: 1px solid #CCCCCC; padding-bottom: 30px; margin-bottom: 30px}
div.job-listing div.title {display: block; font-size: 30px; font-family: graphikm; line-height: 1.2; margin-bottom: 30px;}
div.job-listing div.details {display: flex; gap: 30px; justify-content: space-between; margin-bottom: 30px}
div.job-listing div.details div {font-size: 20px; font-family: graphikm; line-height: 1.2; color: #000;}
div.job-listing a.btn { margin: 36px auto 0 0;}

div.filter-result, div.filtered-list div.company {position: absolute !important; left: -800vw;}
div.filter-result.active, div.filtered-list div.company.active {position: relative !important; left: 0;}

div.job-details div.logo img { height: 120px; display: block;}
div.job-details div.logo { margin-bottom: 70px;}
div.job-details div.title {display: block; font-size: 30px; font-family: graphikm; line-height: 1.2; margin-bottom: 30px;}
div.job-details div.details {display: flex; gap: 130px; justify-content: flex-start; margin-bottom: 30px; padding-right: 180px; position: relative;}
div.job-details div.details div {font-size: 20px; font-family: graphikm; line-height: 1.2; color: #000;}
div.job-details div.details a.btn { position: absolute; right: 0; top: -10px; margin: 0}
div.more-details { display: flex; flex-wrap: wrap; gap: 50px 0; margin-bottom: 90px}
div.more-details > div { width: 50%; padding-right: 50px;}
ul li { line-height: 1.5; margin-bottom: 5px}
div.file-upload label { padding-left: 62px; ; line-height: 60px; }
div.file-upload label:after { background-image: url(/img/svg/download.svg); width: 42px; height: 60px;}

#job-form { margin-top: 50px;}
#job-form fieldset.split-set { display: flex; gap: 60px; justify-content: space-between; width: 100%}
#job-form fieldset.split-set div.form-left { width: calc(100% - 260px)}
#job-form fieldset.split-set div.form-right { width: 200px}

 div.locations { display: flex; gap: 80px;}
 div.locations div.sidemenu { width: 400px ; text-align: left;}
 div.locations div.job-listings { width: calc(100% - 480px); text-align: left; }

div.sidemenu h2 { margin-bottom: 50px}
 div.locations div.filter div.title {padding-bottom: 55px}
 div.filter div.title p {color: #fff; line-height: 100px; padding-left: 30px; font-size: 40px; font-family: druk; margin-bottom: 0  }
 div.input-filter { display: flex; gap: 0; width: 100%;}
 div.input-filter input { width: 60%; border: 0; border-radius: 5px 0 0 5px; background: #fff; font-size: 18px;}
 div.input-filter a { width: 40%; position: relative; line-height: 50px; padding-left: 20px; color: #fff; background: #CCCCCC; border-radius: 0 5px 5px 0; display: block; font-size: 18px; font-family: graphikm; }
 div.input-filter a:after { content:""; display: block; position: absolute; right: 20px; width: 12px; height: 100%; top:0; background: url(/img/svg/white/arrow2.svg) no-repeat center center; background-size: contain;}
div.filters .select2-container .select2-selection--single { border-radius: 5px;}

div.wrp-map { height: 900px; position: relative;}
div.wrp-map div.gmap { height: 100%; width: 100%; display: block; border-radius: 40px; }
div.location-map { margin-bottom: 90px;}
div.location-list { display: flex; gap: 20px; flex-direction: column;}
div.location { border: 1px solid #CCCCCC; padding: 30px 20px 40px 40px; display: flex; gap: 45px; border-radius: 20px; border-top-width: 20px;}
div.location > div:first-child { padding-right: 20px; display: flex; justify-content: space-between; gap: 20px; flex-direction: column; width: 240px}
div.location > div.details { width: calc(100% - 285px)}
div.location div.logo img { display: block; height: 50px}
div.location div.details p {font-size: 15px; margin-bottom: 20px;}
div.location div.hours {display: grid; column-gap: 20px; grid-template-columns: 1fr 1fr; row-gap: 10px; max-width: 220px}
div.location div.hours span {font-size: 15px; white-space: nowrap;}
div.location div.actions { display: flex; gap: 10px; flex-direction: column}
div.location div.actions > div { display: flex; gap: 10px; }
div.location div.actions > div:first-child a { font-size: 16px; background: #898A8D; color: #fff; font-family: graphikm; display: block; line-height: 50px; padding: 0 20px; border-radius: 5px; white-space: nowrap}
div.location div.city { font-size: 20px; font-family: graphikm;}
div.location.ds div.city { color: var(--ds)}
div.location.dw div.city { color: var(--dw)}
div.location.es div.city { color: var(--es)}
div.location.ba div.city { color: var(--ba)}
div.location.ds { border-top-color: var(--ds);}
div.location.dw { border-top-color: var(--dw);}
div.location.es { border-top-color: var(--es);}
div.location.ba { border-top-color: var(--ba);}


div.words img { position: relative; opacity: 0}
div.words img:nth-child(1) { transform: translateX(-1000px)}
div.words img:nth-child(2) { transform: translateX(1000px)}
.in-better-view div.words > img { transform: translateX(0px); opacity: 1; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;  }


div.location-map:after {content: ""; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; background: rgba(0,0,0,0.85); left: -200vw; opacity: 0; transition: opacity .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
div.location-map.active:after {opacity: 1; left: 0}			 
div.location-popup { width: calc(100% - 80px); height: calc(100% - 80px); position: absolute; top: 40px; left: 40px; color: #fff; display: none; z-index: 4;}
div.location-popup > div { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
div.location-popup.active { display: block}
a.close-location-popup { position: absolute; right: 25px; top: 25px; width: 16px; display: block;z-index: 5;}
div.location-popup-info { display: block; position: absolute; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); padding: 50px; border-radius: 40px; width: 800px; max-width: 100%;}
div.location-popup-info div.logo { display: block; margin: 0 auto 30px 0; max-width: 188px;}
div.location-popup-info div.details { display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; row-gap: 50px; color: #fff;}
div.location-popup-info p.hours {display: grid; column-gap: 12px; grid-template-columns: 1fr 1fr; row-gap: 10px; }
div.location-popup-info div.hours span {font-size: 15px; white-space: nowrap; color: #fff;}
div.location-popup-info div.actions { display: flex; gap: 10px; justify-content: flex-start; padding-top: 40px;}
div.location-popup-info div.actions > div { display: flex; gap: 10px; color: #fff;}
div.location-popup-info div.city { font-size: 24px; font-family: graphikm; color: #fff; margin-bottom: 20px;}
div.location-popup-info div.title { font-size: 20px; font-family: graphikm; color: #fff; margin-bottom: 6px;}
div.location-popup-info div.details p {font-size: 15px; color: #fff; margin-bottom: 25px}
div.location-popup-info div.details p a { color: #fff; }
div.location-popup-info div.address { margin-bottom: 10px}
div.location-popup-info.ds { background: var(--ds); }
div.location-popup-info.es { background: var(--es); }
div.location-popup-info.dw { background: var(--dw); }
div.location-popup-info.ba { background: var(--ba); }

.home-video {border-radius: 40px; position: relative;}
picture.placeholder {position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
a.toggle-sound { display: block; position: absolute; bottom: 30px; left: 30px; width: 200px; height: 20px; background: url(/img/svg/sound.svg) no-repeat left center; background-size: contain;}
a.toggle-sound.active { background-image: url(/img/svg/sound-off.svg);}

div.person { display: flex; gap: 110px; align-items: flex-start; max-width: 1640px; padding: 0px; margin: 0 auto}
div.person > div { width: 34%;}
div.person div.photo img { display: block; width: 100%; border-radius: 10px}
div.person > div:last-child { width: 66%; text-align: left;}
div.person div.name { display: block; font-family: druk; font-size: 100px; margin-bottom: 10px; text-transform: uppercase; color: var(--col-primary);}
div.person div.title { display: block; font-family: graphikm; font-size: 33px; margin-bottom: 38px; }
div.person div.bio  { font-size: 25px; line-height: 1.33;}

/*FORMS*/
input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { }
textarea { height: 240px}
div.field.form-footer { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-top: 20px}
button[type="submit"], button[type="button"] { border-radius: 0px; padding: 0 20px; font-size: 18px; font-family: graphikm; border-radius: 5px}
div.checkbox label:before { width: 40px; height: 40px; border-radius: 0px;}
div.checkbox label { padding-left: 50px;font-size: 15px; padding-top: 0px}
#Comments { height: 110px;}

div.reveal-response p { text-align: left; font-size: 24px; }

/*ANIMATIONS*/

.slide-in-bottom { transform: translateY(300px); opacity: 0;}
.slide-in-top { transform: translateY(-300px); opacity: 0;}
.in-better-view.slide-in-bottom {opacity: 1;	animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-bottom {	opacity: 1; animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-top {	opacity: 1;animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view.slide-in-top {	opacity: 1;animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes slide-in-top {
  0% { transform: translateY(-300px); opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes slide-in-bottom {
  0% {transform: translateY(300px);opacity: 0;  }
  100% { transform: translateY(0);opacity: 1;
  }
}


@media only screen and (min-width: 1641px) {
	div.location > div:first-child { width: 160px}
	div.location > div.actions { width: 490px;}
	div.location > div.details { width: calc(100% - 740px);}
}

@media only screen and (max-width: 1920px) {
	div.star-shine > img { left: 40px; }
}


@media only screen and (max-width: 1720px) {
	div.newsletter-registration { padding: 120px 40px}
	div.stupid-idea { padding: 0 40px;}
	.in-better-view div.rolling-trucks > div { padding-left: 40px}
}

@media only screen and (max-width: 1640px) {
	div.brand-boxes { column-gap: 50px; row-gap: 50px}
	div.footer div.address-block > div:first-child { flex-direction: column}
	div.footer div.social { max-width: 236px}
	div.footer div.social div { grid-template-columns: 1fr 1fr 1fr 1fr}
	div.location div.actions > div:first-child > a:nth-child(2) { display: none;}
	div.location div.actions > div:last-child > a:nth-child(3) { display: none;}

	div.masthead div.caption { left: 40px;}
	div.masthead div.caption div.title { font-size: 140px}

	div.person { gap: 60px; }

}


@media only screen and (max-width: 1440px) {

		:root {
		  --default-font-size: 18px;
		  --default-line-height: 1.66;

		  --default-input-font-size: 18px;
		  --dim-input-height: 50px;
		  
		  --button-font-size: 18px;
		  --button-height: 50px;

		    --dim-default-space: 100px;
		}

		h1, h2 { font-size: 100px; margin: 0 auto 50px; }
		h1.h2 { font-size: 100px; }
		h2 { margin-bottom: 30px; font-size: 100px; }
		h3 { font-size: 32px; }
		h4 { font-size: 26px; margin-bottom: 30px}

		p.larger { font-size: 22px; }

		header { }
		header > div { padding-top: 120px; }
		div.burger { left: 20px; top: 30px; }
		header div.logo { left: 80px; top: 40px; width: 180px;}

		div.quick-actions a { width: 210px; line-height: 48px; font-size: 16px; }
		div.quick-actions a:first-child { left: 10px;}

		div.navigation > div { gap: 60px; padding: 0 40px; }
		div.tagline { width: 240px;}
		div.tagline img { max-width: 120px; }
		subnav { width: calc(100% - 300px);}
		subnav > div > a { padding: 30px 20px; }
		subnav div.subnav { top: 90px; padding: 40px 40px;}
		subnav div.subnav > div { gap: 60px; }

		subnav div.menu-video { width: 240px;}

		div.footer div.logo { width: 220px}
		div.footer div.nav a { font-size: 18px}


		nav { top: 140px; }


		div.brand-boxes { column-gap: 40px; row-gap: 40px}
		div.brand-boxes div.actions { padding: 30px 20px; gap: 80px; }
		div.brand-boxes div.actions a { padding: 0px 0; font-size: 18px;}
		div.brand-boxes div.actions a img { height: 40px}
		div.brand-boxes div.actions a:after { right: -43px; }
		div.brand-boxes div.actions a:last-child:after { display: none;}
		div.brand-boxes div.bottom { padding: 0 20px 40px;}
		div.brand-boxes div.bottom img { height: 80px}
		div.brand-boxes div.thumbnail > div { left: 20px; bottom: 20px}
		div.brand-boxes div.thumbnail > div img { height: 60px}
		div.brand-boxes p { padding: 0 40px;}

		div.rolling-trucks > div p { font-size: 50px}
		

		div.team { grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 40px; row-gap: 40px;margin-top: 50px;}

		div.locations, div.careers { gap: 60px}
		div.locations div.sidemenu, div.careers div.sidemenu { width: 350px;}
		div.locations div.job-listings, div.careers div.job-listings { width: calc(100% - 410px);}
		div.filter div.title p, div.filter div.title { font-size: 32px; line-height: 60px}
		div.filter div.title p { padding-left: 0; }
		div.locations div.filter div.title { padding-bottom: 30px; padding-top: 10px}

		div.testimonials > div { max-width: 60%;}

		div.stupid-idea p { font-size: 72px}

		div.js-accordion h5 { font-size: 48px}
		div.js-accordion h5 span { right: 40px; width: 32px}

		div.masthead div.inner-caption-logo { padding: 0 40px; }
		div.masthead div.inner-caption-logo img { height: 160px}

		div.team div.info { padding-left: 40px}
		div.team div.info:after { height: 32px;}

		div.article-preview div.title { flex-direction: column-reverse; align-items: flex-start; gap: 20px;}
		div.article-preview div.title span { font-size: 24px; padding: 10px 20px}
		div.article-preview div.subtitle { font-size: 18px; }
		div.article-preview div.date { font-size: 18px; margin-bottom: 30px;}
		div.article-preview div.details { padding: 0 20px 15px}
		div.article-preview div.details p { padding: 0}

		h1.home-headline { font-size: 60px; padding: 70px 0 0px; }

		div.person { gap: 40px}
		div.person div.name { font-size: 72px; }
		div.person div.title { font-size: 25px; margin-bottom: 30px; }
		div.person div.bio  { font-size: 20px; }

}

@media only screen and (max-width: 1280px) {
		:root {
		  --default-font-size: 18px;
		  --default-line-height: 1.66;

		  --default-input-font-size: 16px;
		  --dim-input-height: 40px;
		  
		  --button-font-size: 16px;
		  --button-height: 40px;

		    --dim-default-space: 100px;
		}

		h1, h2 { font-size: 72px; margin: 0 auto 40px; }
		h1.h2 { font-size: 72px; }
		h2 { margin-bottom: 30px; font-size: 72px; }
		h3 { font-size: 28px; }
		h4 { font-size: 22px; margin-bottom: 30px}

		p.larger { font-size: 20px; }

		div.masthead div.inner-caption { padding: 50px 40px 20px}
		
		div.footer { padding-right: 40px}
		div.footer div.address div.actions { flex-wrap: wrap; }
		div.footer div.address div.actions > div:last-child { display: block; width: 100%;}
		div.footer div.address div.actions > div:last-child a { display: table; width: auto;}
		div.footer div.address div.actions > div:last-child span { display: none}
		div.footer div.nav { width: 200px}
		div.footer div.address-block { width: 350px}

		div.navigation > div { gap: 20px; padding: 0 40px; }
		subnav { width: calc(100% - 180px);}
		div.tagline { width: 160px;}

		div.rolling-trucks > div p { font-size: 36px}

		div.team { grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 40px; row-gap: 40px;margin-top: 50px;}

		div.locations, div.careers { gap: 40px}
		div.locations div.sidemenu, div.careers div.sidemenu { width: 300px;}
		div.locations div.job-listings, div.careers div.job-listings { width: calc(100% - 340px);}
		div.filter div.title p, div.filter div.title { font-size: 24px; line-height: 48px}
		div.filter div.title p { padding-left: 0; }
		div.locations div.filter div.title { padding: 20px;}
		div.input-filter input { width: calc(100% - 78px)}
		div.input-filter a { width: 78px; font-size: 14px; padding-left: 14px}
		div.input-filter a:after { width: 10px; right: 10px}
		div.filter div.filters { padding: 30px 20px; gap: 20px}

		div.testimonials > div { max-width: 60%;}

		div.stupid-idea p { font-size: 60px}

		.select2-container--default .select2-selection--single .select2-selection__arrow { background-size: 16px 10px;}

		div.job-listings div.company > img { height: 48px; margin-bottom: 30px}
		div.job-listing div.title { font-size: 24px; margin-bottom: 20px}
		div.job-listing div.details div {font-size: 16px}

		div.masthead div.caption { left: 40px;}
		div.masthead div.caption p { font-size: 20px; left: -80px}
		div.masthead div.caption div.title { font-size: 90px}

		div.news-home a p { font-size: 18px}
		div.news-home { margin-bottom: 40px}

		div.js-accordion div.product { padding: 40px 30px 30px;}
		div.js-accordion div.category { grid-template-columns: 1fr 1fr}

		div.masthead div.inner-caption-logo img { height: 120px}

		div.location {padding: 30px 20px; flex-wrap: wrap;}
		div.location div.actions { width: 100%}
		div.sidemenu h2 { margin-bottom: 30px}

		div.team { grid-template-columns: 1fr 1fr 1fr; column-gap: 30px; row-gap: 40px; margin-top: 30px;    }
		div.articles {grid-template-columns: 1fr 1fr;column-gap: 26px;row-gap: 60px;}

		div.project-gallery { margin-bottom: 50px}
}

@media only screen and (max-width: 1080px) {
		div.footer { flex-wrap: wrap; padding-left: 80px}
		div.footer div.address-block { width: 100%;}
	/*	div.footer div.address-block > div:first-child { flex-direction: row}*/
		div.footer div.address div.actions > div:last-child { width: auto}

		div.stupid-idea p { font-size: 48px}

		div.rolling-trucks > div { height: 60px; }
		div.rolling-trucks > div p { line-height: 60px; font-size: 24px; }
		.in-better-view div.rolling-trucks > div { padding-right: 257px; }
		.in-better-view div.rolling-trucks > div.b-lm { max-width: 62%}

		div.js-accordion h5 { font-size: 32px;     padding: 12px 80px 28px 40px;}
		div.js-accordion h5.ui-accordion-header-active { padding-bottom: 12px}
		div.js-accordion h5 span { right: 20px; width: 24px; }
		div.js-accordion div.category { padding: 30px}

		div.team div.info { padding-left: 30px}
		div.team div.info:after { height: 32px;}

		div.job-details div.details { gap: 50px; padding-right: 0}

		h1.home-headline { font-size: 40px; }
}

@media only screen and (max-width: 980px) {
		div.navigation > div { gap: 20px; padding: 0 40px; }
		subnav { width: 100%;}
		div.tagline { display: none;}
		subnav div.subnav > div { gap: 40px;}
		subnav div.links { gap: 40px}
		subnav div.links strong, subnav div.links a { font-size: 14px;}
		subnav div.links strong { padding-bottom: 10px}

		section { padding-left: 30px; padding-right: 30px; }
		section.masthead { padding-left: 30px; padding-right: 30px; }
		section.full { padding-left: 0; padding-right: 0}

		div.rolling-trucks > div { height: 40px; }
		div.rolling-trucks > div p { line-height: 40px; font-size: 18px; }
		div.stupid-idea p { font-size: 40px}
		div.stupid-idea { margin-bottom: 50px}
		.in-better-view div.rolling-trucks > div { padding-right: 160px; padding-left: 30px }
		.in-better-view div.rolling-trucks > div.b-ds { max-width: 82%; }
		.in-better-view div.rolling-trucks > div.b-es { max-width: 74%; }
		.in-better-view div.rolling-trucks > div.b-lm { max-width: 72%;}

		div.brand-boxes { column-gap: 30px; row-gap: 30px}
		div.brand-boxes div.actions { padding: 30px 20px; gap: 60px; }
		div.brand-boxes div.actions a { padding: 0px 0; font-size: 14px;}
		div.brand-boxes div.actions a img { height: 30px}
		div.brand-boxes div.actions a:after { right: -33px; }
		div.brand-boxes div.actions a:last-child:after { display: none;}
		div.brand-boxes div.bottom { padding: 0 20px 40px;}
		div.brand-boxes div.bottom img { height: 60px}
		div.brand-boxes div.thumbnail > div { left: 20px; bottom: 20px}
		div.brand-boxes div.thumbnail > div img { height: 60px}
		div.brand-boxes p { padding: 0 20px;}

		div.brand-boxes div.quick-quote-form div.title { font-size: 48px}
		div.brand-boxes div.quick-quote-form p { margin-bottom: 12px; font-size: 14px}

		div.brand-boxes div.quick-quote-form { padding: 40px}

		div.masthead div.inner-caption-logo img { height: 80px}

		div.locations, div.careers { flex-direction: column}
		div.locations div.job-listings, div.careers div.job-listings { width: 100%;}
		div.filters { margin-bottom: 40px}

		div.masthead div.caption { left: 30px; bottom: 30px}
		div.masthead div.caption div.title { font-size: 80px}
		div.masthead a.play-video { width: 60px}

}

@media only screen and (max-width: 760px) {

		:root {
			  --dim-default-space: 80px;
	  		  --default-font-size: 16px;
		  }

		h1, h2 { font-size: 60px; margin: 0 auto 40px; }
		h1.h2 { font-size: 60px; }
		h2 { margin-bottom: 30px; font-size: 60px; }
		h3 { font-size: 24px; }
		h4 { font-size: 20px; margin-bottom: 30px}

		p.larger { font-size: 18px; }

		div.masthead > picture.placeholder > img {border-radius: 0px;}

		div.star-shine > img { left: 10px; width: 30px; top: -79px;}
		div.star-shine span { height: 4px !important}
		div.footer { gap: 60px 0; padding: 50px 50px 0 }
		div.footer div.logo { width: 100%; flex-direction: row; align-items: flex-end;}
		div.footer div.logo > div { width: 50%; }
		div.footer div.logo img { width: 123px;}
		div.footer div.brands { width: 50%;}
		div.footer div.nav { width: 50%;}
/*		div.footer div.address > div { flex-direction: row; justify-content: flex-start;}*/
/*		div.footer div.social div { grid-template-columns: 1fr 1fr }*/

		subnav div.subnav > div { flex-wrap: wrap; }
		div.navigation > div { padding: 0 18px}
		subnav div.subnav { top: 54px}
		subnav div.links { width: 100%; flex-wrap: wrap;}
		subnav > div > a { padding: 20px 12px}

		div.quick-actions a { line-height: 30px !important; font-size: 10px !important; width: auto !important; padding: 0 14px !important}
		div.quick-actions a:first-child { padding-right: 24px !important}
		div.quick-actions a:last-child { font-size: 0 !important;}
		div.quick-actions a:last-child:after { content:"Quote"; font-size: 10px}
		header {z-index: 99}
		header div.logo { width: 102px; top: 20px; left: 71px;}
		header div.burger {top: 5px; left: 8px}
		header > div { padding-top: 65px}
		header.active nav {top: 0; width: 100vw; height: calc(100 * var(--vh)); padding: 50px 20px; background: #fff; justify-content: center; align-items: center; gap: 50px; text-align: center; font-family: graphik; z-index: 19; position: fixed;}
		header.active nav a { font-size: 32px; padding-left: 0;}

		.in-better-view div.rolling-trucks > div { padding-left: 20px }
		div.rolling-trucks > div p { font-size: 14px; }

		div.brand-boxes { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto}
		div.field.form-footer { flex-direction: column; align-items: flex-start;}

		div.newsletter-registration { padding: 50px 30px}

		div.js-accordion h5 { font-size: 32px;     padding: 12px 80px 28px 40px;}
		div.js-accordion h5.ui-accordion-header-active { padding-bottom: 12px}
		div.js-accordion h5 span { right: 20px; width: 24px; }
		div.js-accordion div.category { padding: 13px 10px 32px; gap: 9px}
		div.js-accordion div.product div.title { font-size: 10px;}
		div.js-accordion div.product p { font-size: 10px;}
		div.js-accordion div.product { padding: 20px 10px; border-radius: 10px}
		div.js-accordion div.product div.logo img { height: 20px}
		div.js-accordion div.product div.logo { margin-bottom: 10px}
		div.js-accordion div.product div.thumbnail { margin-bottom: 17px}

		a.btn { line-height: 30px; font-size: 12px; padding: 0 30px}

		div.masthead div.inner-caption { padding: 0 20px; top: 50%; transform: translateY(-50%);}
		div.masthead div.inner-caption h1 { text-align: left}

		section.masthead { margin-bottom: -20px}
		div.masthead { margin-top: 20px}

	    div.team { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 40px;    }
		div.team div.thumbnail { margin-bottom: 20px}
		div.team div.name { font-size: 15px; margin-bottom: 5px}
		div.team div.title { font-size: 15px}

		div.articles {grid-template-columns: 1fr ;column-gap: 26px;row-gap: 50px;}
		div.article-preview div.details { padding: 0px 30px }
		div.article-preview { gap: 30px}
		div.article-preview div.title { font-size: 35px;}
		div.article-preview div.subtitle { font-size: 20px; margin-bottom: 20px}

		div.testimonials { flex-direction: column}
		div.testimonials > div { width: 100%; max-width: 100%;}
		div.testimonials h2 { width: 100%; text-align: center;}
		div.testimonials p { width: 100%; text-align: center;}
		ul.slick-dots { justify-content: center;}
		div.news-home { flex-direction: column}
		div.news-home > a { width: 100%}
		div.form-row { flex-direction: column}

		div.team div.info { padding-left: 30px}
		div.team div.info:after { height: 22px; width: 16px}

		a.special-button img {height: 36px;}
		a.special-button { padding: 14px 20px; border-radius: 10px; }

/*		div.masthead div.caption div.title { font-size: 80px}*/
		.select2-container--default .select2-selection--single .select2-selection__placeholder { font-size: 11px}
		div.brand-boxes div.quick-quote-form { padding: 40px 20px}

		div.more-details {flex-direction: column}
		div.more-details > div { width: 100%; padding-right: 0}
		div.job-details div.details { gap: 10px; flex-direction: column; padding-right: 0}

		#job-form fieldset.split-set { flex-direction: column; gap: 20px; margin-bottom: 30px}
		#job-form fieldset.split-set > div { width: 100% !important}

		div.js-accordion div.category.simpler { grid-template-columns: 1fr;}

		.home-video {border-radius: 0px} 
		a.toggle-sound { bottom: 10px; left: 10px; width: 200px; height: 16px; background: url(/img/svg/sound.svg) no-repeat left center; background-size: contain;}

		div.location { flex-direction: column;}
		div.location > div { width: 100% !important}

		.blog-content .inner-caption h1 { font-size: 32px;}

		div.person { gap: 40px; flex-direction: column;}
		div.person > div { width: 100% !important;}
		div.person div.photo img { border-radius: 10px}
		div.person div.name { font-size: 60px; text-align: center; margin-bottom: 15px}
		div.person div.title { font-size: 20px; text-align: center; margin-bottom: 40px}
		div.person div.bio  { font-size: 16px; text-align: center;}

}

@media only screen and (max-width: 480px) {
	subnav div.menu-video { width: 100%;}
	div.locations div.sidemenu, div.careers div.sidemenu { width: 100%}
}