/*

Theme Name: ARTGO Média Base
Description: Template de base Artgo Média, sans partials.
Author: ARTGO Média
Author URI: http://www.artgomedia.com
Version: 2.0
TIPS : Link to convert fonts : https://transfonter.org/
       Link to calculate vw / px : https://web-development.space/tools/px-to-vw/
*/

/* ------------------------------------------------ */
/* ------------------ SUMMARY ----------------------*/
/* ------------------------------------------------ */
/* 1 ___ FONTS (import in woff2)
/* 2 ___ VARIABLES
/*    2.1 ___ Colors
/*    2.2 ___ Font sizes
/*    2.3 ___ Line-Heights
/*    2.4 ___ Gutters
/*    2.5 ___ Transitions
/*    2.6 ___ Fonts
/* 3 ___ RESET DEFAULT STYLES
/* 4 ___ GLOBALS
/*    4.1 ___ Boxing
/*    4.2 ___ Sections
/*    4.3 ___ Styling texts
/*    4.4 ___ Headings
/*    4.5 ___ Buttons
/*    4.6 ___ Fonts
/* 5 ___ HEADER
/* 6 ___ INNER BLOCKS
/*    6.1 ___ Text block
/*    6.2 ___ Text / image block
/*    6.3 ___ Images block
/*    6.4 ___ Gallery block
/*    6.5 ___ Light box
/*    6.6 ___ Slider block
/*    6.7 ___ Form block
/*    6.8 ___ Video block
/*    6.9 ___ Push content block
/*   6.10 ___ TablePress block
/*   6.11 ___ Buttons block
/*   6.12 ___ Push pages block
/*   6.13 ___ FAQ block
/*   6.14 ___ Push posts block
/*   6.15 ___ Listing posts block
/* 7 ___ CONTACT PAGE MODEL
/* 8 ___ FOOTER
/* 9 ___ RESPONSIVE

/****************************************************** FONTS  ******************************************************/

@font-face {
  font-family: "Roboto";
  src: url(assets/fonts/Roboto-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(assets/fonts/Roboto-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(assets/fonts/Roboto-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(assets/fonts/Roboto-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url(assets/fonts/Oswald-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url(assets/fonts/Oswald-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/****************************************************** VARIABLES  ******************************************************/

:root {
  /* COlORS */

  --mainColor: #69222d;
  --secondaryColor: #be8066;
  --darkColor: #222;
  --grayColor: #f8f9fb;
  --lightColor: #fff;

  /* FONT SIZES */

  --fontSizeXs: 12px;
  --fontSizeSm: 14px;
  --fontSizeBase: 16px;
  --fontSizeMedium: clamp(14px, 0.938vw, 18px);
  --fontSizeXl: clamp(16px, 1.042vw, 20px);
  --fontSizeXxl: 25px;
  --fontSizeH1: clamp(25px, 2.344vw, 45px);
  --fontSizeH2: clamp(20px, 1.563vw, 30px);
  --fontSizeH3: clamp(18px, 1.302vw, 25px);
  --fontSizeH4: 25px;

  /* LINE-HEIGHT */

  --lineHeightBase: 1.7;
  --lineHeightH1: 1.5;

  /* GUTTERS */

  --gutterBlocks: clamp(30px, 2.083vw, 40px);
  --gutterSection: clamp(40px, 4.167vw, 80px);

  /* TRANSITION */

  --transitionSpeed: 0.3s;

  /* FONTS */

  --mainFont: "Roboto", sans-serif;
  --secondaryFont: "Oswald", sans-serif;
}

/****************************************************** RESET  ******************************************************/

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  scroll-behavior: smooth;
}

a,
a:hover {
  text-decoration: none;
  transition: var(--transitionSpeed);
}

img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
}

p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

/****************************************************** GLOBAL  ******************************************************/

body {
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: var(--mainFont);
  font-size: var(--fontSizeBase);
  font-weight: 400;
  color: var(--darkColor);
  background-color: var(--lightColor);
  line-height: var(--lineHeightBase);
}

/* BOXING */

.boxed-base {
  width: 90vw;
  max-width: 1640px;
  margin: 0 auto;
}

.boxed-sm {
  width: 90vw;
  max-width: 1360px;
  margin: 0 auto;
}

/* SECTIONS */

section {
  padding: var(--gutterSection) 0;
}

section :last-child {
  margin-bottom: 0;
}

.section-dark {
  background-color: var(--darkColor);
}

.section-gray {
  background-color: var(--grayColor);
}

.section-primary {
  background-color: var(--mainColor);
}

/* STYLING TEXTS */

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.content p,
.content ul,
.content ol {
  margin-bottom: var(--fontSizeBase);
}

.content ul,
.content ol {
  padding-left: 20px;
}

.content p:last-child {
  margin-bottom: 0;
}

.content ul li {
  margin-bottom: 10px;
  list-style-type: disc;
}

.content ol li {
  position: relative;
  margin-bottom: 10px;
}

.content ol {
  counter-reset: item;
}

.content ol li::before {
  position: absolute;
  content: counter(item) ".";
  counter-increment: item;
  color: var(--mainColor);
  left: -20px;
}

.section-primary .content ol li::before,
.section-dark .content ol li::before {
  color: var(--lightColor);
}

.content p a,
.content ul a,
.content ol a,
.content a:not(.artgo-btn) {
  color: var(--secondaryColor);
}

.section-primary .content p a,
.section-primary .content ul a,
.section-primary .content ol a,
.section-primary .content a:not(.artgo-btn),
.section-dark .content p a,
.section-dark .content ul a,
.section-dark .content ol a,
.section-dark .content a:not(.artgo-btn) {
  color: var(--secondaryColor);
}

.content p a:hover,
.content ul a:hover,
.content ol a:hover,
.content a:not(.artgo-btn):hover {
  text-decoration: underline;
}

.section-dark .content,
.section-primary .content {
  color: var(--lightColor);
}

/* HEADINGS */

.artgo-h1-title {
  font-family: var(--secondaryFont);
  font-size: var(--fontSizeH1);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  line-height: var(--lineHeightH1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.artgo-h1-title img {
  width: 45px;
  height: auto;
  margin: auto;
}

.artgo-h2-title,
.content h2 {
  font-family: var(--secondaryFont);
  font-size: var(--fontSizeH2);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--mainColor);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: var(--gutterBlocks);
}

.artgo-h2-title::before {
  content: url(./assets/images/deco-title-h2.svg);
  height: 40px;
}

.artgo-h3-title,
.content h3 {
  font-family: var(--secondaryFont);
  font-size: var(--fontSizeH3);
  font-weight: 500;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: var(--h3-alignement);
  margin-bottom: var(--gutterBlocks);
  color: var(--mainColor);
}

.section-dark .artgo-h2-title,
.section-primary .artgo-h2-title,
.section-dark .artgo-h3-title,
.section-primary .artgo-h3-title,
.section-dark .content h2,
.section-primary .content h2,
.section-dark .content h3,
.section-primary .content h3 {
  color: var(--lightColor);
}

/* BUTTONS */

.artgo-btn {
  font-size: var(--fontSizeMedium);
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid var(--mainColor);
  padding: 18px 50px;
  width: fit-content;
  color: var(--mainColor);
}

.section-dark .artgo-btn,
.section-primary .artgo-btn {
  border-color: var(--lightColor);
  color: var(--lightColor);
}

.artgo-btn::after {
  content: url(./assets/images/chevron.svg);
  transition: var(--transitionSpeed);
}

.section-dark .artgo-btn::after,
.section-primary .artgo-btn::after {
  content: url(./assets/images/chevron-light.svg);
}

.artgo-btn:hover {
  color: var(--lightColor);
  background-color: var(--secondaryColor);
  border-color: var(--secondaryColor);
}

.artgo-btn:hover::after {
  content: url(./assets/images/chevron-light.svg);
}

/* UP BUTTON */

#btn-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translateX(200%);
  z-index: 500;
  cursor: pointer;
  background-color: var(--darkColor);
  transition: transform var(--transitionSpeed);
}

#btn-up.active {
  transform: translateX(0);
}

#btn-up:hover {
  background-color: var(--secondaryColor);
}

/****************************************************** HEADER  ******************************************************/

.header__top-bar {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 13px 20px -5px rgba(0, 0, 0, 0.1);
}

.header__top-bar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-grow: 1;
  padding: 0 2.604vw;
  background: rgba(255, 255, 255, 0.9);
}

.header__top-bar__logo img {
  max-width: 150px;
}

.header__top-bar nav {
  display: flex;
  align-items: center;
  height: 100%;
}

.header__menu {
  font-family: var(--secondaryFont);
  font-size: var(--fontSizeMedium);
  display: flex;
  align-items: center;
  height: 100%;
  background-color: var(--mainColor);
}

.header__menu > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.header__menu > li > a {
  font-weight: 500;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--lightColor);
  padding: 0 2.604vw;
  text-align: center;
}

.header__menu > li:last-child > a {
  background-color: var(--lightColor);
  color: var(--mainColor);
}

.header__menu > li > a:hover,
.header__menu > li.current-menu-item > a,
.header__menu > li.current-page-ancestor > a,
.header__menu > li:hover > a {
  background-color: var(--secondaryColor);
}

.header__menu > li:last-child > a:hover {
  background-color: var(--secondaryColor);
  color: var(--lightColor);
}

.header__menu > li > .sub-menu {
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 300px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0px 35px;
  box-shadow: 0px 10px 20px rgba(34, 34, 34, 0.2);
  align-items: flex-start;
  z-index: 1;
}

.header__menu > li > .sub-menu > li:first-child {
  margin-top: 20px;
}
.header__menu > li > .sub-menu > li:last-child {
  margin-bottom: 20px;
}

.header__menu > li:hover > .sub-menu {
  max-height: 100vh;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.header__menu > li > .sub-menu > li > a {
  text-transform: none;
  color: var(--darkColor);
  font-weight: 400;
}

.header__menu > li > .sub-menu > li > a:hover {
  color: var(--mainColor);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#toggle-mobile-menu {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--mainColor);
  height: 100%;
  width: 100px;
  cursor: pointer;
  z-index: 9000;
}

#toggle-mobile-menu:hover svg > * {
  fill: var(--secondaryColor);
}

.header__top-bar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  opacity: 0;
  animation: appear 0.5s forwards;
  transform: translateY(-75px);
  width: 100vw;
}

@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-page {
  background-color: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: var(--lightColor);
  padding: 25px 5vw;
  gap: 20px;
}

.top-page__breadcrumb {
  font-size: var(--fontSizeXs);
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.top-page__breadcrumb a {
  color: var(--secondaryColor);
}

.top-page__breadcrumb a:hover {
  text-decoration: underline;
}

.home-banner-wrapper {
  position: relative;
  display: flex;
  height: calc(100vh - 100px);
}

.home-banner {
  flex: 2;
  background: var(--bg-home);
  background-size: cover;
  background-position: center;
}

.home-banner__content {
  flex: 1;
  background-color: var(--mainColor);
  color: var(--lightColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  text-align: center;
}

.home-banner__subtitle {
  font-weight: 700;
  color: var(--secondaryColor);
  letter-spacing: 6.72px;
  text-transform: uppercase;
  margin: 25px 0 45px;
}

.home-banner__text {
  font-size: var(--fontSizeXl);
}

/****************************************************** INNER BLOCKS  ******************************************************/

#chapo-page {
  font-size: var(--fontSizeXl);
  max-width: 950px;
}

/* TEXT BLOCK */

.text-block {
  margin-bottom: var(--gutterBlocks);
  display: flex;
  gap: var(--gutterBlocks);
}

.text-block .content .artgo-btn {
  margin-top: var(--gutterBlocks);
}

.text-block .text-block__columns {
  flex: 1;
  border-left: 3px solid var(--secondaryColor);
  padding-left: 15px;
}

/* TEXT / IMG BLOCK */

.image-text-block {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 5vw;
  flex-direction: var(--img-text-block-orientation);
  margin-bottom: calc(var(--gutterBlocks) + 15px);
}

.image-text-block__img {
  position: relative;
  width: fit-content;
}

.image-text-block__img::before {
  position: absolute;
  content: "";
  z-index: 0;
  background-color: var(--secondaryColor);
  top: 15px;
  right: -15px;
  bottom: -15px;
  left: 15px;
}

.image-text-block__img img {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-text-block__txt {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-text-block__txt .content {
  margin-bottom: var(--gutterBlocks);
}

/* IMAGES BLOCK */

.image-block {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 0 auto var(--gutterBlocks);
}

.image-block__item {
  flex: 1;
  display: flex;
  justify-content: center;
}

.image-block__item img {
  width: auto;
}

/* GALLERY BLOCK */

.gallery-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 15px;
  margin-bottom: var(--gutterBlocks);
}

.gallery-block__item {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.gallery-block__item > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: var(--transitionSpeed);
}

.gallery-block__item:hover img {
  transform: scale(1.1);
  filter: brightness(0.5);
}

/* LIGHT BOX */

.sl-wrapper {
  z-index: 9500;
}

.sl-overlay {
  background: var(--darkColor);
  z-index: 9400;
}

.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button,
.sl-wrapper .sl-counter {
  color: var(--lightColor);
}

.sl-next div,
.sl-prev div {
  background-color: var(--darkColor);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  transition: var(--transitionSpeed);
}

.sl-next div {
  transform: rotate(180deg);
}

/* SLIDER BLOCK */

.slider-block-wrapper {
  position: relative;
  margin-bottom: var(--gutterBlocks);
}

.slider-block-wrapper .slider-block__controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-bottom: 15px;
}

.swiper-button-next-custom,
.swiper-button-prev-custom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  background-color: var(--mainColor);
}

.section-primary .swiper-button-next-custom,
.section-primary .swiper-button-prev-custom,
.section-dark .swiper-button-next-custom,
.section-dark .swiper-button-prev-custom {
  background-color: var(--secondaryColor);
}

.section-primary .swiper-button-next-custom:hover,
.section-primary .swiper-button-prev-custom:hover,
.section-dark .swiper-button-next-custom:hover,
.section-dark .swiper-button-prev-custom:hover {
  background-color: var(--darkColor);
}

.swiper-button-next-custom:hover,
.swiper-button-prev-custom:hover {
  background-color: var(--secondaryColor);
}

.slider-block-wrapper .swiper-pagination {
  bottom: calc(var(--gutterBlocks) * -1) !important;
  z-index: 1;
}

.slider-block-wrapper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background-color: var(--mainColor);
  opacity: 1;
}

.section-primary .slider-block-wrapper .swiper-pagination-bullet {
  background-color: var(--darkColor);
}

.section-dark .slider-block-wrapper .swiper-pagination-bullet {
  background-color: var(--lightColor);
}

.slider-block-wrapper .swiper-pagination-bullet-active,
.section-primary .slider-block-wrapper .swiper-pagination-bullet-active,
.section-dark .slider-block-wrapper .swiper-pagination-bullet-active {
  background-color: var(--secondaryColor);
}

.slider-block__item {
  padding-bottom: 15px;
  aspect-ratio: 1 / 1;
}

.slider-block__item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: var(--transitionSpeed);
}

.slider-block__item::before {
  position: absolute;
  background-color: var(--secondaryColor);
  content: "";
  z-index: -1;
  top: 15px;
  right: -15px;
  bottom: -15px;
  left: 15px;
  transition: var(--transitionSpeed);
}

.slider-block__item:hover::before {
  inset: 0;
  bottom: 15px;
}

.slider-block__item:hover img {
  transform: translate(15px, 15px);
}

/* FORM BLOCK */

.form-block {
  max-width: 990px;
  margin: auto;
  padding: var(--gutterBlocks) 5%;
  background-color: var(--darkColor);
  color: var(--lightColor);
  margin-bottom: var(--gutterBlocks);
}

.form-block .gfield_label {
  text-transform: uppercase;
  letter-spacing: 6.72px;
}

.form-block .gform_wrapper .gfield_required {
  display: inline-block;
  color: var(--lightColor);
}

.form-block .gform_wrapper .gfield input,
.form-block .gform_wrapper .gfield select.large,
.form-block .gform_wrapper .gfield textarea {
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  color: var(--lightColor);
  border: none;
  padding: 10px 15px !important;
}

.form-block .gform_wrapper.gravity-theme .gfield textarea {
  margin-bottom: 30px;
}

.form-block input::placeholder,
.form-block textarea::placeholder {
  font-weight: 400;
  color: var(--lightColor);
  opacity: 0.5;
}

.form-block .ginput_container_consent {
  margin: 20px 0;
}

.form-block .ginput_container_consent .gfield_consent_label {
  display: inline;
  vertical-align: top;
  width: calc(100% - 20px);
}

.form-block button.gform_button_select_files {
  color: var(--lightColor);
  background: transparent;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid var(--mainColor);
  margin: auto;
  cursor: pointer;
}

.form-block button.gform_button_select_files:hover {
  background-color: var(--mainColor);
}

.artgo-btn--gform {
  background-color: transparent;
  cursor: pointer;
}

/* VIDEO BLOCK */

.video-block {
  position: relative;
  aspect-ratio: 16/9;
  margin: 0 auto var(--gutterBlocks);
}

.video-block a,
.video-block iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-block iframe {
  border: 0;
}

.video-block a::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  height: 50px;
  width: 50px;
  background-color: var(--secondaryColor);
  color: var(--lightColor);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  filter: brightness(0.8);
  transition: 0.3s;
}
.video-block img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  filter: brightness(0.8);
  transition: 0.3s;
}
.video-block:hover a::before {
  filter: brightness(1);
  height: 65px;
  width: 65px;
}

.video-block:hover img {
  filter: brightness(0.5);
}

/* PUSH CONTENT BLOCK */

.push-content-block {
  margin-bottom: var(--gutterBlocks);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--gutterBlocks);
  text-align: center;
}

.section-dark .push-content-block,
.section-primary .push-content-block {
  color: var(--lightColor);
}

.push-content-block__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gutterBlocks);
  text-transform: uppercase;
  letter-spacing: 6.72px;
  font-weight: 700;
}

.push-content-block__title::after {
  content: url(./assets/images/deco-title-h2.svg);
}

.push-content-block__content {
  font-size: var(--fontSizeMedium);
  font-weight: 300;
  max-width: 820px;
  text-transform: uppercase;
}

/* TABLEPRESS BLOCK */

.tablepress-block {
  overflow-x: auto;
}

.tablepress-block .tablepress tfoot th,
.tablepress-block .tablepress thead th {
  background-color: var(--secondaryColor);
  color: var(--lightColor);
  text-align: center;
  color: var(--mainColor);
}

.tablepress-block .tablepress .sorting:hover,
.tablepress-block .tablepress .sorting_asc,
.tablepress-block .tablepress .sorting_desc {
  background-color: var(--mainColor);
  color: var(--lightColor);
}

.tablepress-block .tablepress td,
.tablepress-block .tablepress th {
  padding: 14px;
  font-size: 16px;
  color: var(--darkColor);
  border: none !important;
  text-align: center;
  min-width: 100px;
}

.tablepress-block .tablepress tr td:first-child,
.tablepress-block .tablepress tr th:first-child {
  text-align: left;
}

.tablepress-block .tablepress .odd td {
  background-color: var(--grayColor);
}

.dataTables_length,
.dataTables_info {
  font-size: 14px;
}

.dataTables_paginate {
  color: var(--mainColor);
}

.paginate_button.disabled {
  color: var(--mainColor) !important;
  text-decoration: none;
  cursor: default;
}

.paging_simple .paginate_button.next:after {
  color: var(--mainColor) !important;
}

.paging_simple .paginate_button.previous:after {
  color: var(--mainColor) !important;
}

/* BUTTONS BLOCK */

.btn-block {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: var(--gutterBlocks);
}

/* PUSH PAGES BLOCK */

.push-pages-block {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: var(--gutterBlocks);
}

.push-pages-block__item {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.push-pages-block__item:not(:last-child) {
  border-right: 1px solid var(--secondaryColor);
}

.section-primary .push-pages-block__item:not(:last-child),
.section-dark .push-pages-block__item:not(:last-child) {
  border-color: var(--lightColor);
}

.push-pages-block__item img {
  max-width: 110px;
  max-height: 65px;
  transition: var(--transitionSpeed);
}

.push-pages-block__item p {
  font-family: var(--secondaryFont);
  color: var(--darkColor);
  text-transform: uppercase;
  font-size: var(--fontSizeXxl);
  max-width: 130px;
  text-align: center;
}

.push-pages-block__item:hover img {
  transform: scale(1.1);
}

.section-dark .push-pages-block__item p,
.section-primary .push-pages-block__item p {
  color: var(--lightColor);
}

.push-pages-block__item svg path {
  fill: var(--secondaryColor);
}

.section-primary .push-pages-block__item svg path,
.section-dark .push-pages-block__item svg path {
  fill: var(--lightColor);
}

/* FAQ BLOCK */

.faq-block {
  margin-bottom: var(--gutterBlocks);
}

.faq__item__question {
  font-family: var(--secondaryFont);
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.section-dark .faq__item__question,
.section-primary .faq__item__question {
  color: var(--lightColor);
}

.faq__item__question::before {
  content: url(./assets/images/chevron.svg);
  transition: var(--transitionSpeed);
}

.section-primary .faq__item__question::before,
.section-dark .faq__item__question::before {
  content: url(./assets/images/chevron-light.svg);
}

.faq__item__question.active::before {
  transform: rotate(90deg);
}

.faq__item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transitionSpeed);
}

.faq__item__answer .content {
  margin-bottom: 20px;
  padding-left: 5vw;
}

/* PUSH POSTS BLOCK */

.push-posts-block {
  margin-bottom: var(--gutterBlocks);
}

.push-posts-block .slider-block__controls {
  display: none;
  justify-content: flex-end;
  gap: 15px;
}

/* LISTINGS POSTS BLOCK */

.listing-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
  justify-content: center;
  column-gap: 30px;
  row-gap: var(--gutterSection);
  margin-bottom: var(--gutterBlocks);
}

.listing-posts__item__img {
  position: relative;
  max-width: 335px;
  max-height: 378px;
}

.listing-posts__item__img::before {
  position: absolute;
  background-color: var(--secondaryColor);
  content: "";
  z-index: -1;
  top: 15px;
  right: -15px;
  bottom: -15px;
  left: 15px;
  transition: var(--transitionSpeed);
}

.listing-posts__item__img img {
  transition: var(--transitionSpeed);
}

.listing-posts__item:hover .listing-posts__item__img img {
  transform: translate(15px, 15px);
}

.listing-posts__item:hover .listing-posts__item__img::before {
  inset: 0;
}

.listing-posts__item:hover {
  color: var(--mainColor);
}

.listing-posts__item__content {
  padding-top: 30px;
}

.listing-posts__item__city {
  color: var(--darkColor);
  text-transform: uppercase;
  letter-spacing: 0.32px;
}

.section-dark .listing-posts__item__city,
.section-primary .listing-posts__item__city {
  color: var(--lightColor);
}

.listing-posts__item__content h3 {
  color: var(--darkColor);
  text-transform: none;
  display: flex;
  justify-content: space-between;
  transition: var(--transitionSpeed);
}

.listing-posts__item:hover .listing-posts__item__content h3 {
  color: var(--secondaryColor);
}

.section-primary .listing-posts__item__content svg path,
.section-dark .listing-posts__item__content svg path {
  fill: var(--lightColor);
}

.wp-pagenavi {
  display: flex;
  justify-content: center;
  margin: var(--gutterBlocks) 0;
}

.wp-pagenavi .current,
.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--darkColor);
  font-size: var(--fontSizeBase);
}

.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
  width: auto;
}

.wp-pagenavi span.current {
  border: 1px solid var(--secondaryColor);
  background: none;
  border-radius: 50%;
}

.wp-pagenavi a:hover {
  text-decoration: underline;
}

.wp-pagenavi a,
.wp-pagenavi span {
  text-decoration: none;
  border: none;
  padding: 3px 5px;
  margin: 2px;
}

/****************************************************** CONTACT PAGE MODEL  ******************************************************/

.contact-page__info {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: auto;
}

.contact-page__info__logo {
  display: flex;
  max-width: 150px;
  margin: 0 auto var(--gutterBlocks);
}

.contact-page__info__adress,
.contact-page__info__phone,
.contact-page__info__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

.contact-page__info__phone a,
.contact-page__info__mail a {
  color: var(--darkColor);
}

.contact-page__info__phone a:hover,
.contact-page__info__mail a:hover {
  color: var(--secondaryColor);
}

.contact-page__info__socials {
  display: flex;
  justify-content: center;
  gap: var(--gutterBlocks);
  margin: var(--gutterBlocks) 0;
}

.contact-page__info__socials a:hover svg > * {
  fill: var(--mainColor);
}

.contact-page__info .artgo-btn {
  margin: auto;
}

.contact-page__text {
  font-size: var(--fontSizeXxl);
  margin-top: var(--gutterBlocks);
}

/****************************************************** FOOTER  ******************************************************/

.footer__icons-wrapper {
  background-color: var(--mainColor);
  padding: 60px 0;
}

.footer__icons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 25px;
}

.footer__icons__item {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--lightColor);
  gap: var(--gutterBlocks);
}

.footer__icons__item img {
  width: 60px;
  height: 60px;
}

.footer__cols {
  display: flex;
}

.footer__cols__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--gutterSection);
}

.footer__cols__item--left {
  padding-bottom: var(--gutterBlocks);
}

.footer__cols__item--center {
  align-items: center;
  padding-bottom: var(--gutterBlocks);
}

.footer__icon {
  max-width: 20px;
  max-height: 20px;
}

.footer__logo {
  max-width: 200px;
  margin-bottom: var(--gutterBlocks);
}

.footer__cols__item__socials {
  display: flex;
  gap: 15px;
}

.footer__cols__item__socials a:hover svg > * {
  fill: var(--mainColor);
}

.footer__cols__item__adress,
.footer__cols__item__phone,
.footer__cols__item__mail {
  display: flex;
  gap: 5px;
  justify-content: center;
  width: 100%;
  margin-bottom: 25px;
}

.footer__cols__item__adress {
  justify-content: flex-start;
}

.footer__cols__item__phone a,
.footer__cols__item__mail a {
  color: var(--darkColor);
}

.footer__cols__item__phone a:hover,
.footer__cols__item__mail a:hover {
  color: var(--secondaryColor);
}

.footer__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.footer__bottom-bar li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__bottom-bar li:not(:first-child)::before {
  content: "-";
  margin-right: 5px;
}

.footer__bottom-bar li a {
  font-size: var(--fontSizeXs);
  color: var(--darkColor);
}

.footer__bottom-bar li a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/****************************************************** RESPONSIVE MEDIA QUERIES ******************************************************/

@media only screen and (max-width: 991px) {
  /* MENU RESPONSIVE */

  #toggle-mobile-menu {
    display: flex;
  }

  .header__top-bar nav {
    position: fixed;
    inset: 0;
    top: 100px;
    height: calc(100vh - 100px);
    overflow: auto;
    background-color: var(--darkColor);
    padding: var(--gutterBlocks) 5vw;
    transform: translateX(100%);
    transition: var(--transitionSpeed);
    z-index: 9000;
  }

  .header__top-bar nav.active {
    transform: translateX(0);
  }

  .header__menu {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    background-color: var(--darkColor);
  }

  .header__menu > li {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .header__menu > li > a {
    padding: 0;
    font-size: 22px;
  }

  .header__menu > li.current-menu-item > a,
  .header__menu > li.current-page-ancestor > a {
    background-color: transparent;
    color: var(--secondaryColor);
  }

  .header__menu > li > a:hover {
    background: transparent;
    color: var(--secondaryColor);
  }

  .header__menu > li > .sub-menu {
    position: initial;
    max-height: unset;
    opacity: 1;
    transform: none;
    background-color: transparent;
    min-width: auto;
    overflow: visible;
    padding: 0 0 0 20px;
    box-shadow: unset;
  }

  .header__menu > li > .sub-menu > li > a {
    color: var(--lightColor);
    font-size: 18px;
  }

  .header__menu > li > .sub-menu > li > a:hover {
    color: var(--secondaryColor);
  }

  .header__menu > li:last-child > a {
    background-color: transparent;
    margin-bottom: 100px;
  }

  .header__menu > li:last-child > a:hover {
    background-color: transparent;
    color: var(--secondaryColor);
  }

  /* INNER BLOCKS RESPONSIVE */

  .image-text-block {
    flex-direction: column-reverse;
  }

  .image-text-block__txt,
  .image-text-block__img {
    width: 100%;
  }

  .text-block {
    flex-direction: column;
  }

  .push-pages-block__item:not(:last-child) {
    border-right: 0;
  }

  .push-posts-block .slider-block__controls {
    display: flex;
  }
}

@media only screen and (max-width: 768px) {
  .home-banner {
    display: none;
  }

  /* INNER BLOCKS RESPONSIVE */

  .image-block {
    flex-direction: column;
    max-height: 100%;
  }

  .image-text-block__img::before {
    top: 5px;
    right: -5px;
    bottom: -5px;
    left: 5px;
  }

  /* FOOTER RESPONSIVE */

  .footer__cols {
    flex-direction: column;
    align-items: center;
    gap: var(--gutterBlocks);
    padding: var(--gutterSection) 0 var(--gutterBlocks);
  }

  .footer__cols__item {
    align-items: center;
    padding: 0;
  }
}

@media only screen and (max-width: 576px) {
  .btn-block {
    flex-direction: column;
  }
}