/* Font loading was moved to stylesheet.tpl file */
/* @font-face {
  font-family: 'Libre Baskerville';
  src: url('../css/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} */

/* Animacje */
@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes draw {
  0% {
    opacity: 0;
  }

  60%,
  100% {
    opacity: 1;
  }
}

@keyframes drawErase {
  0% {
    stroke-dashoffset: 1;
  }

  20% {
    stroke-dashoffset: 0;
  }

  35% {
    stroke-dashoffset: 0;
  }

  55% {
    stroke-dashoffset: 1;
  }
}

@keyframes pulse {
  100%,
  0% {
    scale: 1;
  }

  65% {
    scale: 1.1;
  }
}

/* Main styles */
body {
  --inverted-brown: #9d4a1f;
  --inverted-olive: #827d55;
  --inverted-yellow: #ffc700;

  font-family: "Libre Baskerville", serif;

  --bs-primary: var(--inverted-yellow);
  --bs-link-color: var(--inverted-olive);
  --bs-link-color-rgb: 130, 125, 85;
}

#content-wrapper {
  padding-bottom: 0 !important;
}

.offcanvas {
  --bs-offcanvas-width: 300px;
  padding-bottom: 16px;
}

.page-footer {
  display: none !important;
}

.footer {
  --footer-background-color: var(--inverted-olive);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffdc5b;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* HomePage - Carousel */
.carousel .carousel-item .caption {
  .display-1 {
    color: var(--inverted-yellow);
    text-transform: none !important;
    font-size: 2rem;
  }

  .caption-description {
    p {
      color: white;

      @media (max-width: 400px) {
        font-size: 14px;
      }
    }
  }
}

.carousel-content {
  img {
    @media (max-width: 991px) {
      object-position: 70%;
    }

    @media (max-width: 445px) {
      object-position: 60%;
    }
  }
}

.carousel-control-next {
  opacity: 40%;
  right: 1rem !important;
  @media (max-width: 543px) {
    scale: 0.8;
    right: 0 !important;
  }
}

.carousel-control-prev {
  opacity: 40%;
  left: 1rem !important;
  @media (max-width: 543px) {
    scale: 0.8;
    left: 0 !important;
  }
}

.carousel-indicators {
  @media (max-width: 543px) {
    margin-bottom: 0.5rem;
  }
}

/* Carousel - first item */
@media (max-width: 991px) {
  .carousel-inner > .carousel-item:nth-of-type(1) {
    img {
      display: none;
    }

    .carousel-content {
      background-image: url("/img/cms/home_slider_no_text.png");
      background-size: cover;
      background-position: 60% 50%;
    }
  }
}

/* HomePage - Customer reviews */
h4.ets-ttn-follow-title {
  font-family: "Square Peg";
  font-weight: 400 !important;
  font-size: 80px !important;

  @media (min-width: 992px) {
    margin-bottom: 32px !important;
  }
}

.ets-ttn-follow-title::after {
  height: 0;
  display: block;
  right: 32px;
  position: relative;
  content: url("../img-dist/paint_line.png");
  transform: scale(0.2);
  animation: draw 3s ease-in infinite alternate;
  @media (max-width: 543px) {
    right: 64px;
  }

  @media (max-width: 400px) {
    right: 86px;
  }
}

.ets-ttn-home-reviews {
  margin: auto;
  margin-bottom: 3rem;
  width: 1160px;

  @media (max-width: 991px) {
    width: 100%;
  }

  ul.slick-dots {
    display: none !important;
  }

  button.slick-arrow {
    top: 60%;
  }
}

div.review-item {
  width: 300px !important;
  height: 450px !important;
  background-image: url("../img-dist/testimonials_background.svg");
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 32px;

  @media (max-width: 991px) {
    transform: scale(0.9) !important;
  }

  @media (max-width: 425px) {
    transform: scale(0.8) !important;
  }

  .review_avatar {
    display: none;
  }

  /* Review text */
  .testimonial_des {
    font-size: larger;
    width: 100%;

    @media (max-width: 425px) {
      font-size: medium;
    }
  }

  /* Author position */
  .has_license {
    bottom: 24px;

    @media (max-width: 991px) {
      bottom: 32px;
    }

    @media (max-width: 425px) {
      bottom: 64px;
    }
  }

  /* Author name */
  .license {
    font-size: larger;

    @media (max-width: 425px) {
      font-size: medium;
    }
  }
}

div.review-item.slick-slide:before {
  background: none;
}

/* HomePage - Spiral */
.spiral {
  margin: auto;
  margin-top: 3rem;
  width: fit-content;
  text-align: center;
  font-family: "Square Peg";
  font-weight: 400;
  font-size: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    transform: rotate(60deg);
    width: 150px;
    height: 150px;
  }
}

/* Taka tam kropka */
.dot {
  width: 32px;
  height: 32px;
  background-color: var(--inverted-yellow);
  border-radius: 50%;
  border-color: var(--inverted-yellow);
  border-style: solid;
}

.waves {
  --size: 50px;
  --p: 35px;
  --R: 61.03px; /*sqrt(var(--size)*var(--size) + var(--p)*var(--p))*/
  margin: auto;
  width: 100%;
  display: flex;
  -webkit-mask: radial-gradient(
        var(--R) at 50% calc(var(--size) + var(--p)),
        var(--inverted-brown) 99%,
        #0000 101%
      )
      calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(
        var(--R) at 50% calc(-1 * var(--p)),
        #0000 99%,
        var(--inverted-brown) 101%
      )
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  background: linear-gradient(
    90deg,
    var(--inverted-brown),
    var(--inverted-brown)
  );
  border: none;
  justify-content: center;
  align-items: center;

  .text {
    color: var(--inverted-yellow);
    font-size: large;
    padding-top: 100px;
    text-align: center;
    max-width: 95%;
  }

  @media (max-width: 600px) {
    .text {
      font-size: large;
    }
  }
}

/* Portfolio */
.portfolio {
  max-width: 1320px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;

  @media (max-width: 1399px) {
    max-width: 1116px;
  }

  @media (max-width: 991px) {
    max-width: 936px;
  }

  @media (max-width: 767px) {
    max-width: 536px;
  }

  & > .section {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .sectionHeader {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      text-align: end;
      gap: 16px;

      @media (max-width: 1199px) {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      & > h4 {
        text-align: start;

        @media (max-width: 991px) {
          text-align: center;
        }

        &::before {
          display: inline-block;
          position: relative;
          margin-right: -24px;
          left: -40px;
          content: "";
          width: 20px;
          height: 20px;
          background-color: var(--inverted-yellow);
          border-radius: 50%;
          border-color: var(--inverted-yellow);
          border-style: solid;
        }
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      @media (max-width: 1199px) {
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
    }
  }
}

/* Modal */

.imageModalWrapper {
  & > img:focus ~ .overlay,
  > img:active ~ .overlay,
  > .overlay:focus {
    visibility: visible;
    opacity: 1;
  }

  > img {
    object-fit: cover;
    cursor: pointer;
    width: 24rem;
    height: 18rem;
    border-width: 0;
    border-style: solid;
    border-radius: 4px;

    &:hover {
      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
    }

    @media (max-width: 1399px) {
      width: 20rem;
      height: 16rem;
    }

    @media (max-width: 1199px) {
      width: 26rem;
      height: 18rem;
    }

    @media (max-width: 425px) {
      width: 16rem;
      height: 12rem;
    }
  }

  & > .overlay {
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: 500ms;
    width: 100%;
    height: 100%;

    & > a {
      position: fixed;
      width: 100%;
      height: 100%;
      cursor: default;
    }

    & > .imageModal {
      margin: auto auto;
      padding: 12px;
      width: fit-content;
      height: fit-content;
      background: #fff;
      border: 1px solid #666;
      border-radius: 6px;
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);

      & > img {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        max-height: calc(100vh - 64px);
        max-width: calc(100vw - 64px);
      }
    }
  }
}

/* About Me */
.aboutme {
  max-width: 1320px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;

  @media (max-width: 1399px) {
    max-width: 1116px;
  }

  @media (max-width: 991px) {
    max-width: 936px;
  }

  @media (max-width: 767px) {
    max-width: 536px;
  }

  .aboutme-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .aboutme-header {
    h1 {
      font-size: 70px;

      @media (max-width: 991px) {
        font-size: 48px;
      }

      @media (max-width: 600px) {
        font-size: 48px;
      }
    }

    .dot {
      position: absolute;
      top: 200px;
      right: 20vw;

      @media (max-width: 1280px) {
        right: 15vw;
      }

      @media (max-width: 767px) {
        display: none;
      }
    }

    .aboutme-header-followup {
      color: var(--inverted-olive);
      font-weight: 400;
    }

    svg {
      display: block;
      position: relative;
      width: 20rem;
      height: 20rem;
      left: -16rem;
      top: -8rem;

      @media (max-width: 991px) {
        width: 16rem;
        height: 16rem;
        left: -12rem;
        top: -7rem;
      }

      @media (max-width: 600px) {
        width: 12rem;
        height: 12rem;
        left: -9rem;
        top: -5rem;
      }

      @media (max-width: 484px) {
        left: -104vw;
        top: -3rem;
      }
    }

    .aboutme-path-draw {
      stroke: var(--inverted-yellow);
      stroke-width: 3;
      fill-opacity: 0;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: drawErase 8s ease-out infinite;
    }
  }

  .aboutme-header-english-ver {
    h1 {
      font-size: 70px;

      @media (max-width: 991px) {
        font-size: 48px;
      }

      @media (max-width: 600px) {
        font-size: 48px;
      }
    }

    .dot {
      position: absolute;
      top: 200px;
      right: 20vw;

      @media (max-width: 1280px) {
        right: 15vw;
      }

      @media (max-width: 767px) {
        display: none;
      }
    }

    .aboutme-header-followup {
      color: var(--inverted-olive);
      font-weight: 400;
    }

    svg {
      display: block;
      position: relative;
      width: 20rem;
      height: 20rem;
      left: -16rem;
      top: -8rem;

      @media (max-width: 991px) {
        width: 16rem;
        height: 16rem;
        left: -12rem;
        top: -7rem;
      }

      @media (max-width: 600px) {
        width: 12rem;
        height: 12rem;
        left: -9rem;
        top: -5rem;
      }

      @media (max-width: 400px) {
        width: 10rem;
        height: 10rem;
        left: -9rem;
        top: -4rem;
      }

      @media (max-width: 323px) {
        left: -104vw;
        top: -3rem;
      }
    }

    .aboutme-path-draw {
      stroke: var(--inverted-yellow);
      stroke-width: 3;
      fill-opacity: 0;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: drawErase 8s ease-out infinite;
    }
  }

  .aboutme-good-to-see {
    padding-top: 3rem;
    padding-bottom: 3rem;
    font-family: "Square Peg";
    font-size: 60px;
    font-weight: 400;
    color: var(--inverted-brown);

    &::after {
      height: 0;
      display: block;
      right: 1vw;
      bottom: 1.25rem;
      position: relative;
      content: url("../img-dist/paint_line.png");
      transform: scale(0.3);
      animation: draw 3s ease-in infinite alternate;

      @media (max-width: 991px) {
        right: calc(5vw + 5%);
        transform: scale(0.2);
      }

      @media (max-width: 767px) {
        right: calc(5vw + 10%);
        transform: scale(0.2);
      }

      @media (max-width: 543px) {
        right: calc(5vw + 10%);
        transform: scale(0.15);
      }

      @media (max-width: 400px) {
        right: calc(5vw + 15%);
        transform: scale(0.15);
      }
    }
  }

  .aboutme-images {
    width: calc(100vw - 10px);
    margin-left: calc(50% - 50vw);
    background-color: var(--inverted-olive);

    @media (max-width: 991px) {
      width: calc(100vw - 4px);
    }

    img {
      width: 100%;
    }
  }

  .aboutme-introduction {
    div {
      --bs-gutter-x: 7rem; /* Gap between columns*/

      @media (max-width: 574px) {
        --bs-gutter-x: 0rem;
      }
    }

    .name {
      font-size: 72px;
      font-family: "Square Peg";
      color: var(--inverted-brown);
    }

    .freetext {
      font-size: medium;
      text-align: justify;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    img {
      width: 100%;
    }

    .dot {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  .aboutme-text1 {
    div {
      --bs-gutter-x: 3rem; /* Gap between columns*/
    }

    .freetext {
      font-size: medium;
      text-align: justify;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    img {
      width: 100%;
    }
  }

  .aboutme-text2 {
    div {
      --bs-gutter-x: 3rem; /* Gap between columns*/
    }

    &.container {
      padding-top: 20px;
    }

    .freetext {
      font-size: medium;
      text-align: justify;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    img {
      width: 100%;
    }

    .dot {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  .aboutme-scope-of-activities {
    text-align: center;

    .aboutme-scope-of-activities-header {
      font-size: 72px;
      font-family: "Square Peg";
      color: var(--inverted-brown);
    }

    img {
      width: 60%;
    }

    div .col-md-4 {
      --bs-gutter-y: 1rem;
    }

    .col-md-4::after {
      height: 0;
      display: block;
      right: 4vw;
      bottom: 0;
      position: relative;
      content: url("../img-dist/paint_line.png");
      transform: scale(0.2);

      @media (max-width: 1399px) {
        right: calc(5vw + 5%);
      }

      @media (max-width: 991px) {
        right: calc(5vw + 10%);
        transform: scale(0.1);
      }

      @media (max-width: 767px) {
        right: calc(5vw + 5%);
        transform: scale(0.2);
      }

      @media (max-width: 543px) {
        right: calc(5vw + 10%);
        transform: scale(0.15);
      }

      @media (max-width: 400px) {
        right: calc(5vw + 15%);
        transform: scale(0.15);
      }
    }
  }

  .aboutme-portfolio-examples {
    text-align: center;

    .aboutme-portfolio-examples-header {
      font-size: 72px;
      font-family: "Square Peg";
      color: var(--inverted-brown);
    }

    img {
      width: 60%;
    }

    div .col-md-4 {
      --bs-gutter-y: 1rem;
    }
  }

  .aboutme-footer {
    color: var(--inverted-olive);
    font-size: 26px;
    padding-bottom: 50px;

    .aboutme-footer-instagram {
      --bs-link-color-rgb: var(--inverted-brown);
      color: var(--inverted-brown);
      font-size: 72px;
      font-family: "Square Peg";
      font-weight: 400;
      text-decoration: underline;
      padding: 0 2px;

      > a {
        &:hover {
          color: var(--inverted-yellow);
        }
      }
    }

    .dot {
      position: relative;
      bottom: 0;
      left: 50vw;

      @media (max-width: 1399px) {
        display: none;
      }
    }

    svg {
      display: block;
      position: relative;
      width: 12rem;
      height: 10rem;
      left: 30rem;
      top: -5rem;

      @media (max-width: 767px) {
        left: -3rem;
      }

      @media (max-width: 543px) {
        left: 4rem;
      }
    }

    .aboutme-path-draw {
      stroke: var(--inverted-yellow);
      stroke-width: 3;
      fill-opacity: 0;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: drawErase 8s ease-out infinite;
    }
  }
}

.aboutme-footer-english-ver {
  color: var(--inverted-olive);
  font-size: 26px;
  padding-bottom: 50px;

  .aboutme-footer-instagram {
    --bs-link-color-rgb: var(--inverted-brown);
    color: var(--inverted-brown);
    font-size: 72px;
    font-family: "Square Peg";
    font-weight: 400;
    text-decoration: underline;
    padding: 0 2px;

    > a {
      &:hover {
        color: var(--inverted-yellow);
      }
    }
  }

  .dot {
    position: relative;
    bottom: 0;
    left: 50vw;

    @media (max-width: 1399px) {
      display: none;
    }
  }

  svg {
    display: block;
    position: relative;
    width: 12rem;
    height: 10rem;
    left: 27rem;
    top: -5rem;

    @media (max-width: 767px) {
      left: -2rem;
    }

    @media (max-width: 491px) {
      left: 7rem;
    }
  }

  .aboutme-path-draw {
    stroke: var(--inverted-yellow);
    stroke-width: 3;
    fill-opacity: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawErase 8s ease-out infinite;
  }
}

.wishlist-button-add:hover {
  animation: pulse 1s linear infinite;
}

button[data-button-action="add-to-cart"]:hover {
  animation: pulse 1s linear infinite;
}

.special-link {
  --bs-link-color-rgb: var(--inverted-brown);
  color: var(--inverted-brown);
  font-size: 32px;
  font-family: "Square Peg";
  font-weight: 500;
  text-decoration: underline !important;
  padding: 0 2px;

  &:hover {
    color: var(--inverted-yellow);
  }
}