:root {
  --font-primary: "Roboto", sans-serif;
  --font-secondary: "Playfair Display", serif;
  --color-accent-primary-1: #c69f73;
  --color-accent-primary-2: #ebe6dd;
  --color-accent-primary-3: #c9bcae;
  --color-accent-primary-4: #837567;
  --color-accent-secondary-1: #628ab2;
  --color-accent-secondary-2: #3c556e;
  --color-accent-secondary-3: #283847;
  --color-accent-secondary-4: #162330;
  --distance-max-xsmall: 60;
  --distance-max-small: 100;
  --distance-max-normal: 200;
  --distance-max-large: 300;
  --distance-max-xlarge: 400;
  --distance-min-xsmall: 40;
  --distance-min-small: 40;
  --distance-min-normal: 60;
  --distance-min-large: 100;
  --distance-min-xlarge: 160;
  --xxl-max-font-size: 167;
  --xxl-min-font-size: 58;
  --xxl-line-height: 1;
  --xl-max-font-size: 107;
  --xl-min-font-size: 58;
  --xl-line-height: 1;
  --h1-max-font-size: 65;
  --h1-min-font-size: 34;
  --h1-line-height: 1.28;
  --h2-max-font-size: 52;
  --h2-min-font-size: 30;
  --h2-line-height: 1.38;
  --h3-max-font-size: 42;
  --h3-min-font-size: 26;
  --h3-line-height: 1.57;
  --h4-max-font-size: 33;
  --h4-min-font-size: 22;
  --h4-line-height: 1.61;
  --h5-max-font-size: 20;
  --h5-min-font-size: 18;
  --h5-line-height: 1.7;
  --h6-max-font-size: 18;
  --h6-min-font-size: 16;
  --h6-line-height: 1.81;
  --subheading-max-font-size: 13;
  --subheading-min-font-size: 11;
  --subheading-line-height: 1.75;
  --blockquote-max-font-size: 20;
  --blockquote-min-font-size: 16;
  --blockquote-line-height: 1.7;
  --paragraph-max-font-size: 16;
  --paragraph-min-font-size: 16;
  --paragraph-line-height: 1.75
}
/*!========================================================================
 * 2. Backgrounds
 * ======================================================================!*/
.bg-dark {
  background-color: #181818
}

.bg-dark-2 {
  background-color: #222
}

.bg-dark-3 {
  background-color: #fff;
  opacity: 0.8;
}

/*!========================================================================
 * 12. Counter
 * ======================================================================!*/
.counter {
  text-align: center;
  color: #888
}

/*!========================================================================
 * 19. Figure Portfolio
 * ======================================================================!*/
.figure-portfolio {
  display: block
}

.figure-portfolio__wrapper-img {
  position: relative;
  overflow: hidden
}

.figure-portfolio__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: 0 0 !important
}

.figure-portfolio__header {
  position: relative;
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  z-index: 50;
  margin-bottom: 3rem;
  padding-left: 1.5rem !important;
}

.figure-portfolio__category {
  position: relative;
  /* font-family: var(--font-primary); */
  font-size: calc(var(--subheading-min-font-size) * 1px);
  font-weight: 700;
  line-height: var(--subheading-line-height);
  letter-spacing: 1px;
  color: #002c45;
  /* text-transform: uppercase; */
  z-index: 50;
  margin-bottom: 0;
  font-family:'Ethique';

  text-align: start;
  padding-left: 1.5rem !important;
  margin-bottom: -.5rem;
}

@media screen and (min-width:320px) {
  .figure-portfolio__category {
    font-size: calc(var(--subheading-min-font-size) * 2px + (var(--subheading-max-font-size) - var(--subheading-min-font-size)) * ((100vw - 320px)/ 1600))
  }
}

@media screen and (min-width:1920px) {
  .figure-portfolio__category {
    font-size: calc(var(--subheading-max-font-size) * 1px)
  }
}

.figure-portfolio__curtain {
  position: absolute;
  top: -40px;
  left: -20px;
  right: -20px;
  bottom: -100px;
  z-index: 1;
  transform: skewY(0) translateY(100%)
}

.figure-portfolio__heading {
  font-family: 'Montserrat', sans-serif;
  color: #002c45;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.33;
  /* margin: auto; */
  font-size: 1.2rem;
  font-weight: 600;
}

.figure-portfolio__icon {
  margin-top: 10px;
  z-index: 50
}

@media screen and (max-width:991px) {
  .figure-portfolio__content {
    padding: 8px
  }

  .figure-portfolio__icon {
    margin-top: 5px
  }
}

/*!========================================================================
 * 36. Lazy
 * ======================================================================!*/
.lazy {
  background-color: rgba(136, 136, 136, .1)
}

.lazy__img:not(img) {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

.lazy-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(136, 136, 136, .1)
}

/*!========================================================================
 * 37. Link
 * ======================================================================!*/
.link-arrow {
  display: inline-flex;
  align-items: center;
  /* font-family: var(--font-primary); */
  font-size: calc(var(--subheading-min-font-size) * 1px);
  font-weight: 700;
  line-height: var(--subheading-line-height);
  letter-spacing: 2px;
  color: #888;
  text-transform: uppercase;
  color: var(--color-accent-primary-1);
  font-weight: 700
}

@media screen and (min-width:320px) {
  .link-arrow {
    font-size: calc(var(--subheading-min-font-size) * 1px + (var(--subheading-max-font-size) - var(--subheading-min-font-size)) * ((100vw - 320px)/ 1600))
  }
}

@media screen and (min-width:1920px) {
  .link-arrow {
    font-size: calc(var(--subheading-max-font-size) * 1px)
  }
}

.link-arrow__icon {
  display: inline-block;
  font-size: 20px !important;
  margin-bottom: 1px;
  margin-left: 10px;
  vertical-align: middle
}

/*!========================================================================
 * 43. Art Parallax
 * ======================================================================!*/
[data-art-parallax=background],
[data-art-parallax=image] {
  position: relative;
  overflow: hidden
}

[data-art-parallax=background] img,
[data-art-parallax=image] img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

/*!========================================================================
 * 46. Preloader
 * ======================================================================!*/
@-webkit-keyframes preloader-load {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

@keyframes preloader-load {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

/*!========================================================================
 * 49. Section
 * ======================================================================!*/
.section {
  position: relative;
  /* z-index: 50 */
  z-index: 1
}

.section__content {
  position: relative;
  z-index: 60
}

/*!========================================================================
 * 50. Section Height
 * ======================================================================!*/
.section_h-100 {
  height: 100px;
  max-height: 100vh
}

.section_h-200 {
  height: 200px;
  max-height: 100vh
}

.section_h-300 {
  height: 300px;
  max-height: 100vh
}

.section_h-400 {
  height: 400px;
  max-height: 100vh
}

.section_h-500 {
  height: 500px;
  max-height: 100vh
}

.section_h-600 {
  height: 600px;
  max-height: 100vh
}

.section_h-700 {
  height: 700px;
  max-height: 100vh
}

.section_h-800 {
  height: 800px;
  max-height: 100vh
}

.section_h-900 {
  height: 900px;
  max-height: 100vh
}

@media screen and (max-width:767px) {
  .section_h-100 {
    max-height: 70vh
  }

  .section_h-200 {
    max-height: 70vh
  }

  .section_h-300 {
    max-height: 70vh
  }

  .section_h-400 {
    max-height: 70vh
  }

  .section_h-500 {
    max-height: 70vh
  }

  .section_h-600 {
    max-height: 70vh
  }

  .section_h-700 {
    max-height: 70vh
  }

  .section_h-800 {
    max-height: 70vh
  }

  .section_h-900 {
    max-height: 70vh
  }
}

/*!========================================================================
 * 60. Section Content
 * ======================================================================!*/
.section-content__content {
  margin-bottom: -1em
}

.section-content__content :first-child:not(.section-content__headline):not(.section-content__subheading) {
  margin-top: 0 !important
}

.section-content__header :first-child:not(.section-content__headline):not(.section-content__subheading) {
  margin-top: 0 !important
}

@media screen and (max-width:991px) {
  .section-content__content {
    margin-top: 1em;
    margin-bottom: 0
  }

  .section-content__content :last-child {
    margin-bottom: 0
  }

  .section-content__header :last-child {
    margin-bottom: 0
  }
}

/*!========================================================================
 * 69. Section Nav Projects
 * ======================================================================!*/
.section-nav-projects__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  font-size: 32px !important
}

.section-nav-projects__arrow_prev {
  left: 120px
}

.section-nav-projects__arrow_next {
  right: 120px
}

.section-nav-projects__heading {
  /* font-family: var(--font-secondary); */
  font-size: calc(34 * 1px);
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: .25em
}

@media screen and (min-width:320px) {
  .section-nav-projects__heading {
    font-size: calc(34 * 1px + (52 - 34) * ((100vw - 320px)/ 1600))
  }
}

@media screen and (min-width:1920px) {
  .section-nav-projects__heading {
    font-size: calc(52 * 1px)
  }
}

.section-nav-projects__wrapper-heading_prev {
  padding-right: 20px;
  padding-left: 120px
}

.section-nav-projects__wrapper-heading_next {
  padding-left: 20px;
  padding-right: 120px
}

@media screen and (max-width:1400px) {
  .section-nav-projects__arrow_prev {
    left: 70px
  }

  .section-nav-projects__arrow_next {
    right: 70px
  }

  .section-nav-projects__wrapper-heading_prev {
    padding-left: 80px
  }

  .section-nav-projects__wrapper-heading_next {
    padding-right: 80px
  }
}

@media screen and (max-width:1280px) {
  .section-nav-projects__arrow_prev {
    left: 40px
  }

  .section-nav-projects__arrow_next {
    right: 40px
  }

  .section-nav-projects__wrapper-heading_prev {
    padding-left: 50px
  }

  .section-nav-projects__wrapper-heading_next {
    padding-right: 50px
  }
}

@media screen and (max-width:991px) {
  .section-nav-projects__arrow_prev {
    left: 10px
  }

  .section-nav-projects__arrow_next {
    right: 10px
  }

  .section-nav-projects__wrapper-heading_prev {
    padding-left: 20px
  }

  .section-nav-projects__wrapper-heading_next {
    padding-right: 20px
  }
}

@media screen and (max-width:767px) {
  .section-nav-projects__arrow {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    margin-top: .25em;
    font-size: 24px !important
  }
}

/*!========================================================================
 * 75. Section Slider Themes
 * ======================================================================!*/
.section-slider.bg-dark-3 .slider__counter_current {
  color: var(--color-accent-primary-1)
}

/*!========================================================================
 * 83. Slider
 * ======================================================================!*/
.slider:not(.container) {
  max-width: 100%
}

.slider__bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat
}

.slider__counter {
  /* font-family: var(--font-primary); */
  font-size: calc(var(--subheading-min-font-size) * 1px);
  font-weight: 700;
  line-height: var(--subheading-line-height);
  letter-spacing: 2px;
  color: #888;
  text-transform: uppercase;
  height: 24px
}

@media screen and (min-width:320px) {
  .slider__counter {
    font-size: calc(var(--subheading-min-font-size) * 1px + (var(--subheading-max-font-size) - var(--subheading-min-font-size)) * ((100vw - 320px)/ 1600))
  }
}

@media screen and (min-width:1920px) {
  .slider__counter {
    font-size: calc(var(--subheading-max-font-size) * 1px)
  }
}

.slider__counter_current {
  color: var(--color-accent-primary-3)
}

.slider__counter_total {
  color: #888
}

.slider__link {
  display: block
}

.slider__progress {
  display: inline-flex;
  align-items: center
}

.slider__arrows {
  display: inline-flex;
  align-items: center
}

.slider__arrows-divider,
.slider__counter-divider {
  width: 1px;
  height: 18px;
  background-color: rgba(136, 136, 136, .3);
  transform: rotate(45deg);
  margin-left: 40px;
  margin-right: 40px;
  opacity: 0;
}

.slider__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.785, .135, .15, .86);
  outline: 0;
  width: 24px;
  height: 24px;
  color: #888
}

.slider__arrow i {
  font-size: 2.5rem;
  color: #002c45;
}

.slider__arrow:hover {
  color: var(--color-accent-primary-3)
}

.slider__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 80px;
  padding-left: 0;
  padding-right: 0;
  z-index: 50
}

.slider__footer_left {
  margin-right: auto
}

.slider__footer_right {
  margin-left: auto
}

.swiper-lazy {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease
}

.slider__footer-relative {
  padding-top: 30px
}

.slider__progress {
  vertical-align: top
}

@media screen and (max-width:1400px) {
  .slider__footer {
    padding-bottom: 60px
  }
}

@media screen and (max-width:1280px) {
  .slider__footer {
    padding-bottom: 40px
  }
}

@media screen and (max-height:800px) and (min-width:991px) {
  .slider__footer {
    padding-bottom: 40px
  }
}

@media screen and (max-width:991px) {
  .slider__footer {
    padding-bottom: 20px
  }
}

@media screen and (max-width:767px) {
  .slider__footer-relative {
    padding-top: 20px
  }

  .slider__footer-col {
    padding-top: 10px
  }

  .slider__footer-col.text-center,
  .slider__footer-col.text-left,
  .slider__footer-col.text-right {
    text-align: center !important
  }

  .slider__arrows-divider,
  .slider__counter-divider {
    margin-left: 20px;
    margin-right: 20px
  }

  .slider__counter {
    height: 18px
  }

  .slider__arrow {
    width: 18px;
    height: 18px
  }

  .slider__arrow i {
    font-size: 18px
  }

  .slider__arrows,
  .slider__progress {
    vertical-align: top
  }
}

/*!========================================================================
 * 88. Slider Projects
 * ======================================================================!*/
.slider-projects__footer {
  padding-top: 30px
}