/*
               @@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@
               @@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@
               @@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@
               @@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@
               @@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@
               @@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
               @@@@@@@         @@@@@@@      @@@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@
               @@@@@@@         @@@@@@@       @@@@@@@

*/
/* Responsive overrides for viewport sizes that fall between the legacy breakpoints. */

#section1 #selectLanguage a {
  font-size: clamp(1.2rem, 1.8vw, 1.875rem) !important;
  cursor: pointer;
}

#section1 #logoIM {
  font-size: clamp(5rem, 16vw, 14rem) !important;
}

#section1 h2 {
  font-size: clamp(1.1rem, 2vw, 2rem) !important;
  line-height: 1.2;
}

#section1 #cursorPointerText {
  padding: clamp(4px, 0.5vw, 10px) clamp(8px, 1vw, 16px) !important;
}

#section1 #cursorPointerText span {
  font-size: clamp(0.35rem, 0.55vw, 0.55rem) !important;
  letter-spacing: clamp(0.25px, 0.06vw, 1px);
}

#section1 #cursorPointer {
  width: clamp(38px, 4vw, 72px) !important;
  height: clamp(38px, 4vw, 72px) !important;
  background-size: contain !important;
}

.btn {
  border-radius: clamp(3px, 0.4vw, 8px) !important;
}

.btn-primary {
  padding: clamp(6px, 0.8vh, 12px) clamp(10px, 1vw, 18px) !important;
  font-size: clamp(0.8rem, 1.2vw, 1rem) !important;
}

#menuBar #logoIMHeaders {
  font-size: clamp(1.5rem, 2.8vw, 2.6rem) !important;
}

#menuBar nav ul {
  font-size: clamp(0.75rem, 1vw, 1rem) !important;
}

#menuBar nav ul li a {
  height: auto !important;
  min-height: 42px;
  line-height: 1.25 !important;
  padding: 12px clamp(6px, 0.8vw, 14px) !important;
}

@media (min-width: 992px) and (max-width: 1023px) {
  #menuBar nav ul {
    font-size: 3rem !important;
  }

  #menuBar nav ul li a {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
}

.skill {
  width: clamp(58px, 7vw, 100px) !important;
  height: clamp(58px, 7vw, 100px) !important;
}

.skill i {
  font-size: clamp(1.5rem, 3vw, 2.7rem) !important;
}

.skillCircle strong {
  font-size: clamp(1rem, 2vw, 1.8rem) !important;
}

.skillCircle canvas {
  max-width: clamp(60px, 12vw, 120px);
  height: auto !important;
}

.descriptionSkill,
#skillsIcons p {
  font-size: clamp(0.75rem, 1vw, 1rem) !important;
}

#progressBars .progressBar {
  width: clamp(80px, 18vw, 180px) !important;
}

.form-control {
  height: auto !important;
  min-height: 42px;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
}

.wrapper textarea {
  min-height: 120px;
  height: clamp(120px, 16vh, 220px) !important;
  padding-left: 42px !important;
}

.wrapper i {
  font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
}

.inputfile-6 + label span {
  height: auto !important;
  min-height: 42px;
}

.inputfile-6 + label strong,
.alert-danger,
.alert-success {
  font-size: clamp(0.85rem, 1vw, 1rem) !important;
}

.portfolioCarouselEffect .titleWork {
  font-size: clamp(1.1rem, 2vw, 1.8rem) !important;
}

.portfolioCarouselEffect .subTitleWork {
  font-size: clamp(0.85rem, 1.2vw, 1.2rem) !important;
}

figure.portfolioCarouselEffect figcaption {
  height: auto !important;
  min-height: 4rem;
  padding: clamp(8px, 1vw, 18px) !important;
}

figure.portfolioCarouselEffect p.icon-links a i {
  font-size: clamp(1rem, 2vw, 1.8rem) !important;
}

.modal-body {
  max-height: 65vh !important;
  overflow-y: auto;
}

.modal-title {
  font-size: clamp(1.1rem, 2vw, 1.8rem) !important;
}

#cookies {
  width: clamp(56px, 8vw, 100px) !important;
  height: clamp(28px, 4vw, 50px) !important;
  background-size: contain !important;
}

#cookiesMessage {
  font-size: clamp(0.7rem, 0.9vw, 0.95rem) !important;
}

#footerDisclaimer,
#domains {
  font-size: clamp(0.7rem, 0.9vw, 0.95rem) !important;
}

#wrapContactForm #qrText,
#privacyPolicyTextContent {
  font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
}

#privacyPolicyTextContent {
  color: #FFF;
}

#wrapQR #qr,
#wrapSocials .fa-linkedin-square {
  font-size: 3.6rem !important;
}

.wrapSocialsItem {
  margin-top: clamp(20px, 2.5vh, 32px);
  margin-bottom: clamp(20px, 2.5vh, 32px);
  display: flex;
  align-items: center;
}

#wrapSocials.row {
  display: flex;
  align-items: stretch;
}

#wrapSocials #wrapQR .row {
  display: flex;
  align-items: center;
  width: 100%;
}

.wrapSocials .fa-linkedin-square {
  font-size: 3.6rem !important;
}

.alert {
  padding: clamp(8px, 1vh, 14px) !important;
  margin-bottom: clamp(8px, 1vh, 14px) !important;
}

#section1 .container > div[itemprop="logo"] svg {
  width: clamp(160px, 25vw, 300px) !important;
  max-width: 80vw;
  height: auto !important;
}

.fp-controlArrow.fp-prev,
.fp-controlArrow.fp-next {
  width: clamp(28px, 5vw, 72px) !important;
  height: clamp(90px, 22vh, 220px) !important;
  top: 50% !important;
  transform: translateY(-50%);
  background-size: contain;
}

@media (max-width: 767px) {
  #wrapSocials.row {
    flex-direction: column;
  }

  #wrapSocials > .wrapSocialsItem {
    width: 100%;
  }

  #section1 #selectLanguage {
    margin-bottom: clamp(1rem, 5vh, 3rem);
  }

  #section1 .container {
    padding: 0 16px;
  }

  #menuBar {
    max-width: 100vw;
  }

  .fp-controlArrow.fp-prev,
  .fp-controlArrow.fp-next {
    width: 24px !important;
    height: clamp(70px, 18vh, 130px) !important;
  }

  #cookiesContainerBox {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }

  #cookiesClose {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-right: 0;
  }

  #cookiesClose .btn {
    margin: 2px;
    padding: 6px 8px;
    font-size: 0.7rem;
  }
}

@media (max-height: 640px) {
  #section1 #selectLanguage {
    margin-top: 64px;
    margin-bottom: 1rem;
  }
}

@media (min-width: 1200px) {
  #wrapQR #qr,
  .wrapSocials .fa-linkedin-square {
    font-size: 4.8rem !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .wrapSocials .fa-linkedin-square {
    font-size: 4.5rem !important;
  }
}