:root {
  --theme-dark-grey: #292929;
  --theme-light-grey: #F8F8F8;
  --theme-orange: #F79510;
  --theme-font: 'Lato';
}

.tight.row { max-width: 67.5rem; }
.row { max-width: 100.5rem; }
.wide.row { max-width: 110.5rem; }
.full.row { max-width: 100%; }
.nopadding { padding: 0; }
.centered-content { text-align: center; }

section.dark-grey, .dark-grey { background-color: var(--theme-dark-grey); color: #fff; }
section.dark-grey *, .dark-grey * { color: #fff; }
section.dirty-white { background-color: var(--theme-light-grey); color: var(--theme-dark-grey); }
section.white, .white { background-color: #fff; color: var(--theme-dark-grey); }
section.dirty-white *, section.white *, .white * { color: var(--theme-dark-grey); }
footer { background-color: #fff; }
footer *, footer a { color: var(--theme-dark-grey); }

body, p { font-family: 'LucidaGrande'; font-size: 16px; color: var(--theme-dark-grey); }
a { text-decoration: none; border-bottom: none; }
a:not(.button):hover { color: unset; font-weight: bold; text-decoration: none; border-bottom: none; }
h1, h1.title, h1.page-title { font-family: 'DINBold'; font-size: 40px; text-transform: uppercase; }
h2 { font-family: 'DINBold'; font-size: 35px; text-transform: uppercase; margin-bottom: 0; }
h3 { font-family: 'DINRegular'; font-size: 35px; }
h1::before, h2::before { content: url(../images/champion_sales_logo_crown.svg); width: 50px; display: block; position: relative; left: -5px; top: 5px; }
h2::before { top: 20px; }
.centered-content h1::before, .centered-content h2::before { margin: auto; }
@media only screen and (max-width: 1024px) {
  h1, h1.title, h1.page-title { font-size: 36px; }
  h2, h3 { font-size: 32px; }
  body, p { font-size: 14px; }
}
@media only screen and (max-width: 640px) {
  h1, h1.title, h1.page-title { font-size: 32px; }
  h2, h3 { font-size: 28px; }
  body, p { font-size: 12px; }
}
@media only screen and (max-width: 400px) {
  h1, h1.title, h1.page-title { font-size: 30px; }
  h2, h3 { font-size: 26px; }
}


.button { background-image: none; background-color: var(--theme-dark-grey); color: #fff; text-transform: uppercase; font-family: 'DINBold'; font-size: 18px; text-align: center; padding: 10px; 
display: inline-block; min-width: 250px; border-radius: 0; }
section.dark-grey .button, .dark-grey .button { background-color: var(--theme-light-grey); color: var(--theme-dark-grey); border: 1px solid var(--theme-light-grey); }
section.dark-grey .button:hover, .dark-grey .button:hover { background-color: var(--theme-dark-grey); color: var(--theme-light-grey); border: 1px solid var(--theme-light-grey); }
section.dirty-white .button, section.white .button, .white .button { background-color: var(--theme-dark-grey); color: #fff; border: 1px solid var(--theme-dark-grey); }
section.dirty-white .button:hover, section.white .button:hover, .white .button:hover { color: var(--theme-dark-grey); background-color: var(--theme-light-grey); }
footer .button { background-color: #fff; color: var(--theme-dark-grey); border: 1px solid var(--theme-dark-grey); }
@media only screen and (max-width: 640px) {
  .button { font-size: 14px; padding: 8px; }
}

.field--type-image img, 
.field--name-user-picture img,
.field--type-entity-reference { margin: 0; }

header { position: fixed; z-index: 110; width: 100%; }

.region-header-top { padding: 15px; }
.region-header-left, .region-header-right { margin: 30px 0; }
.region-highlighted-left { padding: 100px 100px 0 150px; }
.region-highlighted-left p { font-size: 32px; line-height: 1; }
.region-content-secondary { padding: 6rem 0; display: inline-block; }
.region-content-2 { padding: 100px 0; display: inline-block; }
.region-content-4 { display: inline-block; width: 100%; padding: 75px 0; }
.region-content-5 { padding-top: 6rem; }
.region-highlighted-bottom { padding: 10px 0; }
.region-footer-top { margin: 25px 0; }
.region-footer-mid-left { margin: 15px 0; }
.off-canvas { background-color: #fff; }
@media only screen and (max-width: 1440px) {
  .region-highlighted-left { padding: 30px 30px 0; }
}
@media only screen and (max-width: 1024px) {
  .region-highlighted-bottom { padding: 50px 15px; }
  .region-highlighted-left p { font-size: 32px; }
}
@media only screen and (max-width: 640px) {
  .region-content-2 { padding: 50px 0; }
  .region-content-5 { padding-top: 3rem; }
  .region-highlighted-left { padding: 30px 15px; }
  .region-highlighted-left p { font-size: 28px; }
}
@media only screen and (max-width: 400px) {
  .region-highlighted-left { padding: 15px 0; }
  .region-highlighted-left p { font-size: 26px; }
}

.block .content { margin-top: 0; }

.flexslider { background: unset; border: none; margin: 0; }

/* Phone block */
#block-phone * { font-size: 14px; text-align: right; }
#block-phone p { margin-bottom: 0; }
#block-phone a:hover { color: #fff; font-weight: bold; }

/* Logo block */
#block-champsales-branding { max-width: 300px; }

/* Main Menu */
#block-champsales-main-menu ul.menu { float: right; }
#block-champsales-main-menu a { font-size: 14px; font-weight: bold; text-transform: uppercase; }
#block-champsales-main-menu a:hover { color: var(--theme-orange); }


/* Banner Overlay Block */
.banner-wrapper { background-image: url(../images/DFFBB40A2DA67180.jpg); background-position: center; background-size: cover; }
.region-banner { background-color: #000; opacity: 0.7; text-align: center; padding: 400px 15px 250px; }
.region-banner .site-branding__text { padding: 0; margin: 0; }
.region-banner .site-branding__slogan { font-family: 'LucidaGrandeBold'; font-size: 25px; margin-bottom: 30px; color: #fff; text-transform: uppercase; font-style: normal; }
.region-banner .button { background-color: #fff; color: var(--theme-dark-grey); }
.region-banner .button:hover { color: #fff; background-color: var(--theme-dark-grey); }
#block-champsales-whitelogo { margin-bottom: 1rem; }
@media only screen and (max-width: 640px) {
  .region-banner { padding: 45vw 15px 10vw; }
  .region-banner #block-champsales-whitelogo { max-width: 80%; margin: auto; }
  .region-banner .site-branding__slogan { font-size: 20px; }
}
@media only screen and (max-width: 480px) {
  #block-banneroverlaylogo .site-branding__slogan { font-size: 18px; }
}

/* Front Page Content */
.path-frontpage h1.page-title { margin: 0; line-height: 1; }
.path-frontpage #block-mainpagecontent h3 { margin: 0 0 30px; line-height: 1; }
.path-frontpage #block-mainpagecontent .button { margin-top: 50px; }
@media only screen and (max-width: 1440px) {
  .path-frontpage #block-mainpagecontent h3 { margin: 0 0 15px; }
  .path-frontpage #block-mainpagecontent .button { margin-top: 20px; }
  .path-frontpage #block-mainpagecontent .button { display: none; /* Button removed as linked page doesn't exist */  }
}

/* Warehouse Workers */
#block-warehouseworkers p { margin-bottom: 0; }
#block-warehouseworkers img { width: 100%; }

/* Markets Block */
.view-markets .view-header { margin-bottom: 50px; }
.view-markets .view-header * { font-family: 'DINRegular'; font-size: 35px; }
.view-markets .view-content { padding-left: 14%; }
.view-markets .columns:last-child:not(:first-child) { float: left; }
.view-markets .views-field-field-icon,
.view-markets .views-field-title { text-align: center; }
.view-markets .views-field-title a { color: var(--theme-dark-grey); }
@media only screen and (max-width: 1024px) {
  .view-markets .view-header * { font-size: 32px; }
}
@media only screen and (max-width: 640px) {
  .view-markets .view-content { padding-left: 0; }
  .view-markets .columns:nth-of-type(4) { margin-left: 16%;  }
  .view-markets .view-header * { font-size: 28px; line-height: 1.2; }
}
@media only screen and (max-width: 480px) {
  .view-markets .view-header * { font-size: 28px; }
}

/* Products Block */
.block-views-blockproduct-categories-block-1 { float: left; }
.view-product-categories .view-header { padding: 5rem 0; margin-bottom: 2rem; background-color: var(--theme-light-grey); }
.view-product-categories .view-header p { font-size: 2rem; }
.view-product-categories .view-content { margin-top: 30px; }
.view-product-categories .views-row { position: relative; margin-bottom: 45px; }
.view-product-categories .views-row:nth-of-type(odd) { padding: 0 45px 0 30px; clear: both; }
.view-product-categories .views-row:nth-of-type(even) { padding: 0 30px 0 45px; }
.view-product-categories .views-field-name a { color: #fff; position: absolute; bottom: 0; z-index: 100; background-color: var(--theme-dark-grey); display: block; min-width: 425px;
padding: 15px 30px; font-family: 'DINBold'; font-size: 30px; text-transform: uppercase; text-align: left; }
.view-product-categories .views-field-name a:hover { -background-image: url('../images/arrow_orangebckg.svg'); -background-repeat: no-repeat; -background-position-x: right; }

.view-product-categories .item .container {
  background-size: cover;
  background-position: center;
  height: auto;
  position: relative;
}

.view-product-categories .item .container .image-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: var(--theme-dark-grey);
}
.view-product-categories .item .container:hover .image-overlay {
  opacity: 1;
}

.view-product-categories .item .container .image-overlay .views-field-description__value {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
}

.view-product-categories .views-field-name {
  contain: layout;
}
.view-product-categories .views-field-name a {
  width: 100%;
}
.view-product-categories .views-field-description__value p {
  margin: 0;
  font-size: 18px;
  color: #fff;
}





@media screen and (max-width: 1440px) {
  .view-product-categories .views-field-description__value p { font-size: 1.3vw; }
}
@media only screen and (max-width: 1024px) {
  .view-product-categories .views-field-name a { position: unset; min-width: unset; font-size: 28px; text-align: left; }
  .view-product-categories .views-row:nth-of-type(even),
  .view-product-categories .views-row:nth-of-type(odd) { padding: 0 15px; }
  .view-product-categories .views-field-description__value p { font-size: 1.6vw; }
  .view-product-categories .view-header p { font-size: 2rem; }
}
@media only screen and (max-width: 800px) {
  .view-product-categories .views-field-name a { font-size: 22px; padding-left: 15px; padding-right: 45px; }
  .view-product-categories .views-field-name a:hover { border-right-width: 60px; }
  .view-product-categories .views-field-description__value p { font-size: 1.8vw; }
}
@media screen and (max-width: 640px) {
  .view-product-categories .views-field-description__value p { font-size: 3vw; }
  .view-product-categories .view-header p { font-size: 1.75rem; }
}
@media screen and (max-width: 480px) {
  .view-product-categories .views-field-description__value p { font-size: 3.4vw; }
  .view-product-categories .view-header p { font-size: 1.5rem; }
}

/* Contact Us block */
.block-webform { display: block; max-width: 82.5rem; margin: auto; }
.block-webform .webform-flexbox { margin-top: 0; }
.block-webform h2 { padding: 0 40px; }
.webform-flex--container { padding: 0 40px; }
.block-webform .webform-submission-contact-us-form .form-item-header { margin-top: 0; }
.block-webform .webform-submission-contact-us-form .form-item-header p { font-family: 'DINRegular'; font-size: 35px; line-height: 1.2; }
.block-webform fieldset { margin-bottom: 0; }
.block-webform fieldset legend { font-weight: bold; text-transform: capitalize; margin-bottom: 0; }
.block-webform fieldset .form-item,
.block-webform .form-item.half-width { width: 48%; display: inline-block; margin: 0; }
.block-webform fieldset .form-item:nth-of-type(odd),
.block-webform .form-item.half-width.left { margin-right: 1%; }
.block-webform fieldset .form-item:nth-of-type(even),
.block-webform .form-item.half-width.right { margin-left: 2%; }
.block-webform #edit-contact-info { margin-top: 0; }
.block-webform #edit-contact-info p { margin-bottom: 0; font-size: 12px; }
.block-webform #edit-contact-info p:first-of-type { font-size: 14px; }
.block-webform .webform-submission-contact-us-form #edit-container-right { position: relative; top: -35px; }
@media only screen and (max-width: 1600px) {
  .block-webform fieldset .form-item,
  .block-webform .form-item.half-width { width: 47%; }
}
@media only screen and (max-width: 1024px) {
  .block-webform .webform-submission-contact-us-form .form-item-header p { font-size: 32px; }
  .block-webform fieldset .form-item, 
  .block-webform .form-item.half-width { width: 47.5%; }
}
@media only screen and (max-width: 767px) {
  .block-webform .webform-submission-contact-us-form #edit-container-right { position: unset; }
  #webform-submission-contact-us-node-1-add-form #edit-contact-info { display: none; }
}
@media only screen and (max-width: 640px) {
  .block-webform fieldset .form-item, 
  .block-webform .form-item.half-width { width: 100%; margin: 0; }
  .block-webform fieldset .form-item:nth-of-type(odd), .block-webform .form-item.half-width.left,
  .block-webform fieldset .form-item:nth-of-type(even), .block-webform .form-item.half-width.right { margin: 0; }
  #webform-submission-contact-us-node-1-add-form .form-item-country {margin-top: 0;}
  [type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select { font-size: 0.75rem; }
}

/* Testimonials Slider */
.view-testimonials .flexslider { padding-top: 75px; }
.view-testimonials .views-field-field-testimonial-text { font-size: 18px; max-width: 62.5rem; margin: auto; }
.view-testimonials .views-field-title { font-family: 'LucidaGrandeBold'; font-size: 18px; margin-top: 30px; }
.view-testimonials .flex-nav-prev a { top: 100px; left: 0; }
.view-testimonials .flex-nav-next a { top: 100px; right: 0; }
.flex-direction-nav a.flex-next:before,
.flex-direction-nav a.flex-prev:before { content: ""; display: block; width: 30px; height: 30px; background-repeat: no-repeat; }
.flex-direction-nav a.flex-next:before { background-image: url('../images/arrow_circle_right.svg'); }
.flex-direction-nav a.flex-prev:before { background-image: url('../images/arrow_circle_left.svg'); }
@media only screen and (max-width: 1024px) {
  .view-testimonials .flex-nav-prev a,
  .view-testimonials .flex-nav-next a { top: 45px; }
  .view-testimonials .views-field-field-testimonial-text { font-size: 16px; }
}
@media only screen and (max-width: 640px) {
  .view-testimonials .views-field-field-testimonial-text { font-size: 14px; }
  .view-testimonials .views-field-title { font-size: 16px; }
}

/* Secondary pages */
.path-node main { background-color: var(--theme-light-grey); display: inline-block; padding: 60px 0; width: 100% }
.path-node h1 { text-align: center; }
.path-node h1::before { margin: auto; }
.node__content .field--name-body h2::before { content: unset; }

/* Footer Elements */
footer { padding-top: 75px; }
footer .site-branding__logo { max-width: 300px; }
nav.menu--footer { font-size: 14px; text-transform: uppercase; }
nav.menu--footer ul.menu { padding: 0; }
nav.menu--footer a { padding: 0 30px; }
nav.menu--footer li.menu-item:first-of-type a { padding-left: 0; }
#block-copyrightmaintenance p { font-size: 12px; margin-bottom: 0; }
#block-socialmedia { text-align: right; }
#block-socialmedia a { margin: 5px; }
#block-socialmedia a img { max-height: 20px; }
@media only screen and (max-width: 1600px) {
  nav.menu--footer a { padding: 0 25px; }
}
@media only screen and (max-width: 1024px) {
  nav.menu--footer a { padding: 0 15px; } 
}
@media only screen and (max-width: 640px) {
  footer { padding-top: 30px; }
  footer .region,
  footer .region p { text-align: center; }
  footer .region-footer-btm-left { margin-bottom: 15px; }
}

/* --- Contact Us page ---------------- */
.path-node .block-webform h2,
.path-node .block-webform #edit-header,
.path-node .block-webform #edit-contact-info { display: none; }
.path-node .block-webform .webform-submission-contact-us-form #edit-container-right { position: unset; padding-top: 12px; }

/* Mobile Menu */
.region-mobile-nav { padding-top: 50px; }
.region-mobile-nav:before { content: url(../images/champion_sales_logo_crown.svg); width: 50px; display: block; margin: auto; }
.region-mobile-nav ul.menu { display: inline-block; width: 100%; }
.region-mobile-nav a { text-transform: uppercase; font-size: 20px; background-color: var(--theme-light-grey); color: #000; margin-bottom: 15px; }
.region-mobile-nav a:hover { font-weight: unset; }

/* --- Mobile Nav Toggle -------------- */
.mobile-nav-toggle {
  padding: 0 10px 10px; text-align: right; position: relative; top: 35px;
}
@media only screen and (max-width: 640px) {
  .mobile-nav-toggle { top: 45px; }
}
@media only screen and (max-width: 480px) {
  .mobile-nav-toggle { right: 15px; }
}
.mobile-nav-toggle a.button { 
  padding: 30px; border: 0; margin: -30px; cursor: pointer; min-width: unset; background: transparent; 
}
.mobile-nav-toggle a.button span,
.mobile-nav-toggle a.button span::before,
.mobile-nav-toggle a.button span::after {
  content: ""; background-color: var(--theme-dark-grey); display: block; height: 6px; width: 40px; border-radius: 0; 
}
.mobile-nav-toggle a.button span::before { 
  position: relative; top: -12px; 
}
.mobile-nav-toggle a.button span::after { 
  position: relative; top: 7px; 
}



.path-node main {
  padding: 140px 0 60px;
}
.block-page-title-block h1.page-title::before {
  content: url(../images/champion_sales_logo_crown.svg);
  display: block;
  width: 50px;
}






/* Capabilities Block */
.view-capabilities .views-row {
    margin: 2rem auto 0;
    position: relative;
    padding: 0;
}

.view-capabilities .views-field-title {
    position: absolute;
    width: 94%;
    top: 0;
    left: 3%;
    z-index: 910;
    height: 100%;
}
.view-capabilities .views-field-title a {
    background-color: transparent;
    text-shadow: 2px 2px 1px #000;

    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    padding: 30% 0 0;
    font-family: 'DINBold';
    font-size: 25px;
    color: #fff;
    text-align: center;
    cursor: default;
}

.view-capabilities .views-field-field-image {
    position: relative;
    width: 94%;
    left: 3%;
}
.view-capabilities .views-field-field-image:before {
    display: block;
    position: absolute;
    opacity: 0.3;
    content: ' ';
    background-color: #000;
    width: 100%;
    height: 100%;
    z-index: 900;
}
.view-capabilities .views-field-field-image img {
    width: 100%;
}
.view-capabilities .views-field-body p {
    margin: 0;
    padding: 2rem 1rem;
    padding: 1rem;
    font-size: 16px;
    color: #fff ;
}
.view-capabilities .views-field-body .button:hover {
    color: var(--theme-orange);
}



.view-capabilities .item .container {
  transform-style: preserve-3d;
  perspective: 1000px;
  padding: 0 0.5rem;
}

.view-capabilities .item .container .front,
.view-capabilities .item .container .back {
  transition: all .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  height: auto;
}

.view-capabilities .item .container .front {
  transform: rotateY(0deg);
  opacity: 1;
}
.view-capabilities .item .container:hover .front {
  transform: rotateY(-180deg);
  opacity: 0;
}
.view-capabilities .item .container .back {
  transform: rotateY(180deg);
  opacity: 0;
}
.view-capabilities .item .container:hover .back {
  transform: rotateY(0deg);
  opacity: 1;
}

.view-capabilities .item .container .back {
  width: calc(100% - 1rem);
  height: 100%;
  background-color: var(--theme-dark-grey);
  position: absolute;
  top: 0;
  left: 0.5rem;
}
.view-capabilities .item .container .back .inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.view-capabilities .view-footer {
  clear: both;
}
@media screen and (max-width: 1240px) {
  .view-capabilities .views-field-body p { font-size: 1.2vw; }
  .view-capabilities .views-field-body a.button { font-size: 1.4vw; }
  .view-capabilities .views-field-body a.button { display: none; /* Button removed as linked page doesn't exist */  }
}
@media screen and (max-width: 1024px) {
  .view-capabilities .views-field-body p { font-size: 1.6vw; }
  .view-capabilities .views-field-body a.button { font-size: 1.8vw; }
  .view-capabilities .columns:last-child:not(:first-child) { float: none; display: inline-block; margin-top: 1rem; }
}
@media screen and (max-width: 800px) {
  .view-capabilities .views-field-body p { font-size: 1.8vw; }
  .view-capabilities .views-field-body a.button { font-size: 1.6vw; }
}
@media screen and (max-width: 800px) {
  .view-capabilities .views-field-body p { font-size: 1.8vw; }
  .view-capabilities .views-field-body a.button { font-size: 2vw; }
}
@media screen and (max-width: 640px) {
  .view-capabilities .views-field-body p { font-size: 2.8vw; }
  .view-capabilities .views-field-body a.button { font-size: 3.2vw; }
}
@media screen and (max-width: 480px) {
  .view-capabilities .views-field-body p { font-size: 3.6vw; }
  .view-capabilities .views-field-body a.button { font-size: 4vw; }
}


/* See Our Work page */
#block-champsales-views-block-our-work-gallery-block-1 { margin-top: 4rem; }
#block-champsales-views-block-our-work-gallery-block-1 .field--name-field-media-image { border: 4px solid #000; margin-bottom: 2rem; }
#block-champsales-views-block-our-work-gallery-block-1 .columns:last-child:not(:first-child) { float: left; }