/* CSS Document */

/*-----------------------------------------------------------------*/
/*--- Font Face Including ---*/
/*-----------------------------------------------------------------*/
/*------------------------------------------------------*/
/*--- Font Family :: [Helvetica] :: Regular ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/helvetica.eot');
  src: url('../fonts/helvetica.eot?#iefix') format('embedded-opentype'),
       url('../fonts/helvetica.woff2') format('woff2'),
       url('../fonts/helvetica.woff') format('woff'),
       url('../fonts/helvetica.ttf') format('truetype'),
       url('../fonts/helvetica.svg#helveticaregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Helvetica] :: Bold ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/helvetica-bold.eot');
  src: url('../fonts/helvetica-bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/helvetica-bold.woff2') format('woff2'),
       url('../fonts/helvetica-bold.woff') format('woff'),
       url('../fonts/helvetica-bold.ttf') format('truetype'),
       url('../fonts/helvetica-bold.svg#helveticabold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Freight Disp] :: Light ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Freight Disp';
  src: url('../fonts/freight-disp-light.eot');
  src: url('../fonts/freight-disp-light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/freight-disp-light.woff2') format('woff2'),
       url('../fonts/freight-disp-light.woff') format('woff'),
       url('../fonts/freight-disp-light.ttf') format('truetype'),
       url('../fonts/freight-disp-light.svg#freightdisp_light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Lato] :: Regular ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-regular.eot');
  src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/lato-regular.woff2') format('woff2'),
       url('../fonts/lato-regular.woff') format('woff'),
       url('../fonts/lato-regular.ttf') format('truetype'),
       url('../fonts/lato-regular.svg#latoregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Lato] :: Italic ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-italic.eot');
  src: url('../fonts/lato-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/lato-italic.woff2') format('woff2'),
       url('../fonts/lato-italic.woff') format('woff'),
       url('../fonts/lato-italic.ttf') format('truetype'),
       url('../fonts/lato-italic.svg#latoitalic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Lato] :: Bold ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-bold.eot');
  src: url('../fonts/lato-bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/lato-bold.woff2') format('woff2'),
       url('../fonts/lato-bold.woff') format('woff'),
       url('../fonts/lato-bold.ttf') format('truetype'),
       url('../fonts/lato-bold.svg#helveticabold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Lato] :: Bold Italic ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-bolditalic.eot');
  src: url('../fonts/lato-bolditalic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/lato-bolditalic.woff2') format('woff2'),
       url('../fonts/lato-bolditalic.woff') format('woff'),
       url('../fonts/lato-bolditalic.ttf') format('truetype'),
       url('../fonts/lato-bolditalic.svg#latobold_italic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/*-----------------------------------------------------------------*/
/*--- Custom Reset Styles ---*/
/*-----------------------------------------------------------------*/
body, html { margin: 0; padding: 0; outline: none; min-width: 320px; }
p, img { margin: 0; padding: 0; }
h1, h2, h3, h4 ,h5, h6 { font-weight: normal; padding: 0; margin: 0; }
button, a { outline: none; -webkit-outline: none; -moz-outline: none; }
a img { border: 0; display: block; outline: none; -webkit-outline: none; -moz-outline: none; }
a, button { transition: all 0.3s ease; }
a { color: #fff; text-decoration: none; }
a:hover, a:focus { outline: none; }
button { border: 0; box-shadow: none; line-height: normal; outline: none; text-shadow: none; }
/*-----------------------------------------------------------------*/
/*--- Canvas Styles ---*/
/*-----------------------------------------------------------------*/
html { font-size: 16px; }
html, body { font: 1rem / 1.5625 'Lato', Helvetica, Arial, sans-serif; color: #383838; }

.main { background: #000; }

.main-content { position: relative; z-index: 2; }

.lazy { opacity: 0; }
.lazy.loaded { opacity: 1; }

.fade { opacity: 0; transition: all 1.3s 0.2s linear; }

.animated.fade, .animated .fade, .inviewport.fade, .inviewport .fade { opacity: 1; }

.delay-1 { transition-delay: 0.5s; }
.delay-2 { transition-delay: 1s; }
.delay-3 { transition-delay: 1.5s; }
.delay-4 { transition-delay: 2s; }
.delay-5 { transition-delay: 2.5s; }
.delay-6 { transition-delay: 3s; }
/*-----------------------------------------------------------------*/
/*--- Wysiwyg Styles ---*/
/*-----------------------------------------------------------------*/
.wysiwyg strong { font-weight: 700; }
.wysiwyg em { font-style: italic; }

.wysiwyg p { padding: 10px 0; }

.wysiwyg p:first-child { padding-top: 0; }
.wysiwyg p:last-child { padding-bottom: 0; }

.wysiwyg a { color: currentColor; text-decoration: underline; }
.wysiwyg a:hover { text-decoration: none; }
/*-----------------------------------------------------------------*/
/*--- Buttons Styles ---*/
/*-----------------------------------------------------------------*/
.btn { display: inline-block; vertical-align: top; line-height: 20px; border-radius: 50px; text-transform: uppercase; }

.btn--sm { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; padding: 12px 25px; }
.btn--md { font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; padding: 19px 34px; }
.btn--lg { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.1em; padding: 24px 53px; }

.btn--primary { color: #fff; background-color: #0d643b; }
.btn--primary:hover, .btn--primary:active { background-color: #074428; }

.btn--secondary { color: #fff; background-color: #1d1d1d; }
.btn--secondary:hover, .btn--secondary:active { color: #000; background-color: #fff; }

.btn--white { color: #000; background-color: #fff; }
.btn--white:hover, .btn--white:active { color: #fff; background-color: #074428; }
/*-----------------------------------------------------------------*/
/*--- Header Styles ---*/
/*-----------------------------------------------------------------*/
.header { color: #fff; background: #1e222c; position: fixed; left: 0; top: 0; width: 100%; transition: all 0.2s linear; z-index: 10001; }
.header__container { display: flex; justify-content: space-between; align-items: center; height: 48px; }

.header__logo { padding: 0 15px 0 0; }
.header__logo__img { display: block; height: auto; width: 100%; max-width: 208px; }

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

.header__client-logo { display: flex; align-items: center; }
.header__client-logo__link { color: inherit; display: block; padding: 0 0 0 12px; }
.header__client-logo__text { font-family: Helvetica; font-size: 10px; line-height: 12px; text-align: right; text-transform: uppercase; }
.header__client-logo__image { display: block; height: auto; width: 100%; max-width: 88px; }

.header__about { position: relative; margin: 0 0 0 15px; min-width: 20px; }
.header__about__text { font-family: Helvetica; font-size: 11px; line-height: 20px; font-weight: 700; display: block; padding: 0 0 0 18px; }
.header__about__icon { position: absolute; top: 50%; height: 12px; width: 12px; transform: translateY(-50%); left: 0; background: no-repeat url(../images/icons/questionmark.png) center / contain; }

.header__menu__btn { display: none; }
/*-----------------------------------------------------------------*/
/*--- Hero Section Styles ---*/
/*-----------------------------------------------------------------*/
.hero-section { min-height: 806px; padding: 124px 0 70px; text-align: center; position: relative; z-index: 1; }
.hero-section__title { font-family: 'Freight Disp'; font-size: 8.1250rem; line-height: 1; font-weight: 300; color: #4f3a1e; }
.hero-section__intro { max-width: 470px; margin: 0 auto 22px; }
.hero-section__bg { position: absolute; top: 48px; left: 0; width: 100%; height: auto; z-index: -1; }
/*-----------------------------------------------------------------*/
/*--- Promos Section Styles ---*/
/*-----------------------------------------------------------------*/
.section-promos { color: #fff; padding: 0 0 48px; background: url(../images/backgrounds/content-bg.png) no-repeat center bottom / 100% auto; }
.section-promos__header { text-align: center; padding: 0 0 58px; }
.section-promos__title { font-family: 'Freight Disp'; font-size: 3.6250rem; line-height: 1.2; font-weight: 300; overflow: hidden; }
.section-promos__title span { position: relative; }
.section-promos__title span::before, .section-promos__title span::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); height: 2px; background: rgba(255,255,255, 0.1); }
.section-promos__title span::before { right: calc(100% - 68px); left: -100vw; }
.section-promos__title span::after { left: calc(100% - 68px); right: -100vw; }
.section-promos__subtitle { font-size: 0.8750rem; line-height: 1.2; letter-spacing: 0.15em; text-transform: uppercase; }

.section-promos__col { display: flex; }
.section-promos__item { display: flex; align-items: flex-end; min-height: 429px; width: 100%; margin-bottom: 22px; border-radius: 10px; overflow: hidden; position: relative; z-index: 1; }
.section-promos__item a:not(.btn) { display: block; }
.section-promos__item__media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center / cover; transition: all 0.5s linear; z-index: -1; }
.section-promos__item__content { padding: 30px 16px; }
.section-promos__item__title { font-family: 'Freight Disp'; font-size: 2rem; line-height: 1; font-weight: 300; padding: 0 0 16px; }
/*-----------------------------------------------------------------*/
/*--- Section Ad Styls ---*/
/*-----------------------------------------------------------------*/
.section-ad { color: #fff; background: #393939; padding: 50px 0; }
.section-ad p { font-size: 0.6875rem; line-height: 1; color: #fff; text-align: right; margin: 0; padding: 0 0 10px; text-transform: uppercase; }

.section-ad .container { max-width: 1002px; }
.section-ad .ad-container { height: 250px; }
/*-----------------------------------------------------------------*/
/*--- CTA Section Styles ---*/
/*-----------------------------------------------------------------*/
.section-cta { color: #fff; padding: 90px 0; position: relative; z-index: 1; min-height: 552px; }
.section-cta__container { max-width: 1230px; }
.section-cta__client-logo { display: flex; align-items: center; float: right; padding: 12px 0 0 20px; }
.section-cta__client-logo__link { color: inherit; display: block; padding: 0 0 0 12px; }
.section-cta__client-logo__text { font-family: Helvetica; font-size: 10px; line-height: 12px; letter-spacing: 0.05em; text-align: right; text-transform: uppercase; }
.section-cta__client-logo__image { display: block; height: auto; width: 100%; max-width: 100px; }

.section-cta__title { font-family: 'Freight Disp'; font-size: 2.5rem; line-height: 1.1; font-weight: 300; padding: 0 0 16px; }
.section-cta__text { line-height: 1.875; max-width: 540px; padding: 0 0 40px; }

.section-cta__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: no-repeat center / cover; }
/*-----------------------------------------------------------------*/
/*--- Socials Styles ---*/
/*-----------------------------------------------------------------*/
.section-social { display: flex; align-items: center; height: 200px; background: #000; }

.social-list { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }
.social-list__item { padding: 0 25px; }
.social-list__link { font-size: 0; display: block; height: 50px; width: 50px; border-radius: 100%; background: no-repeat center / contain; position: relative; }
.social-list__link:hover { transform: scale(1.1); }
.social-list__link:active { transform: scale(0.9); }

.social-list__link--facebook { background-image: url(../images/icons/icon-facebook.svg); }
.social-list__link--twitter { background-image: url(../images/icons/icon-twitter.svg); }
/*-----------------------------------------------------------------*/
/*--- Footer Styles ---*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/*--- Footer Copyright Styles ---*/
/*-----------------------------------------------------------------*/
.footer { font-family: Helvetica; font-size: 10px; line-height: 20px; color: #fff; background: #000; padding: 10px 0; }
.footer__container { display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer a { color: inherit; }
.footer a:hover { text-decoration: underline; }
.footer__copyright, .footer__menu { padding: 5px 0; }
.footer__copyright { padding-right: 10px; }
.footer__menu { display: flex; justify-content: flex-end; align-items: center; padding: 0; margin: 0; list-style: none; }
.footer__menu__item:not(:last-child) .footer__menu__link::after { content: '|'; margin: 0 6px; }
/*-----------------------------------------------------------------*/
/*--- Media Queries Styles ---*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/*---------- Styles for Desktop -----------*/
/*-----------------------------------------------------------------*/
@media screen and (min-width: 992px) {
  .tablet, .mobile { display: none !important; }

  .section-promos__item:hover .section-promos__item__media { transform: scale(1.2); }
}
/*-----------------------------------------------------------------*/
/*---------- Styles for Tablet -----------*/
/*-----------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 991px) {
  .desktop, .mobile { display: none !important; }
}

@media screen and (max-width: 991px) {
  .btn--lg { padding: 21px 65px; }

  .header__container { padding-left: 52px; }
  .header__logo__img { max-width: 180px; }
  .header__about__icon { height: 20px; width: 20px; }
  .header__about__text { padding-left: 30px; }

  .hero-section { padding-top: 105px; padding-bottom: 20px; min-height: 712px; }
  .hero-section__title { font-size: 6.5rem; line-height: 0.9; padding-bottom: 10px; max-width: 600px; margin: 0 auto; }
  .hero-section__intro { margin-bottom: 28px; }

  .main { background: none; }
  .section-promos { background-position: center top 65px; background-image: url(../images/backgrounds/content-bg-m.png); }
  .section-promos__title span::before,
  .section-promos__title span::after { display: none; }
  .section-promos__header { padding-bottom: 50px;}
  .section-promos__item { min-height: 273px; max-width: 610px; margin-left: auto; margin-right: auto; }
  .section-promos__item__title { font-size: 2.1875rem; line-height: 1.0286; }
  .section-promos__item__content { padding: 32px; }

  .section-ad { padding: 36px 0; }
  .section-ad .ad-container { height: 88px; }

  .section-cta { padding: 90px 35px; min-height: 600px; }
  .section-cta__title { font-size: 1.8750rem; line-height: 1.2667; padding-bottom: 26px; }
  .section-cta__text { line-height: 2; max-width: 450px; padding-bottom: 26px; }

  .social-list__link { height: 40px; width: 40px; }

  .footer__container { padding-left: 32px; padding-right: 32px; }
}
/*-----------------------------------------------------------------*/
/*---------- Styles for Mobile -----------*/
/*-----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .desktop, .tablet { display: none !important; }

  .btn--sm { padding: 9px 20px; }
  .btn--lg { padding: 16px 41px; }

  .header__logo__img { max-width: 130px; }
  .header__container { padding: 0 15px; }

  .header__about { position: absolute; top: calc(100% + 7px); right: -3px; margin: 0; }
  .header__about__icon { height: 12px; width: 12px; }
  .header__about__text { font-size: 0; padding-left: 30px; }

  .hero-section { min-height: 590px; }
  .hero-section__title { line-height: 1; margin: 0 auto; }
  .hero-section__intro { margin-bottom: 20px; }
  .hero-section__bg { top: auto; bottom: -150%; }

  .section-promos__header { padding-bottom: 34px; }
  .section-promos__item { min-height: 219px; margin-bottom: 26px; }
  .section-promos__title { font-size: 2.5625rem; padding-bottom: 12px; }
  .section-promos__item__title { font-size: 1.5625rem; line-height: 1.0400; padding-bottom: 8px; }
  .section-promos__item__content { padding: 18px; }

  .section-ad { padding: 26px 0; }
  .section-ad .ad-container { height: 280px; }

  .section-cta { padding: 28px 0 84px; }
  .section-cta__client-logo { padding: 8px 0 22px; }
  .section-cta__title { font-size: 2rem; line-height: 1.125; clear: both; padding-bottom: 35px; }
  .section-cta__text { line-height: 1.6875; }
  .section-cta__btn { position: absolute; bottom: 26px; left: 15px; }

  .footer { line-height: 15px; }
  .footer__container { padding-left: 15px; padding-right: 15px; display: block; }
  .footer__copyright { display: inline; padding: 0; }
  .footer__menu { display: inline-flex; padding-left: 0; }
  .footer__menu__item:first-child .footer__menu__link::before { content: '|'; margin: 0 6px; }
}
@media screen and (max-width: 991px) {
  .hero-section__bg { top: 0px; }
  .section-promos__header {padding-top: 100px;}
}
@media screen and (max-width: 900px) {
  .section-promos__header {padding-top: 50px;}
}
@media screen and (max-width: 820px) {
  .hero-section__bg { top: 48px; }
  .section-promos__header {padding-top: 50px;}
}
@media screen and (max-width: 767px) {
  .hero-section__bg { top: -300px; }
  .section-promos__header {padding-top: 100px;}
}
@media screen and (max-width: 680px) {
  .hero-section__bg { top: -250px; }
  .section-promos__header {padding-top: 100px;}
}
@media screen and (max-width: 630px) {
  .hero-section__bg { top: -200px; }
  .section-promos__header {padding-top: 50px;}
}
@media screen and (max-width: 567px) {
  .hero-section__bg { top: -200px; }
  .section-promos__header {padding-top: 0px;}
  .hero-section__title {font-size: 3.625rem; max-width: 400px;}
}

@media screen and (max-width: 500px) {
  .hero-section__bg { top: -80px; }
  .hero-section__title {font-size: 3.625rem; max-width: 400px;}
}

@media screen and (max-width: 400px) {
  .hero-section__bg { top: 0px; bottom: auto; }
  .hero-section__title {font-size: 3.625rem; max-width: 400px;}
}