﻿#ugyfeleim-mondtak .slick-list {
	color: var(--color-first);
}

#arlista {
	padding: 40px 0;
}

#arlista h5 {
	margin: 0;
	color: var(--color-first);
  font-size: 26px;
}

#szolgaltatasaim-cim {
	position: relative;
	padding-top: 40px;
}

.image-between-section-left {
	position: absolute;
  top: -130px;
  left: 0px;
}

.headline-font {
  font-family: var(--font-headline-family) !important;
}

.bold-font {
  font-weight: bold;
}

.font-size-20 {
  font-size: 20px;
}

.font-size-22 {
  font-size: 22px;
}

.font-size-24 {
  font-size: 24px;
}

.font-size-26 {
  font-size: 26px;
}

.font-size-28 {
  font-size: 28px;
}

.font-size-30 {
  font-size: 30px;
}

.headline-font .sub-title {
  font-size: 22px;
  margin-bottom: 10px;
}

.headline-font a,
.headline-font p {
  font-size: 22px;
}

.center-title,
.sub .container .lead-text,
.sub .container h2,
.container .sub h2 {
  display: flex;
  justify-content: center;
}

#intro {
	padding-bottom: 80px;
}

#intro,
#szlogen {
  background-size: 300px;
}

#leiras {
  background-size: 300px;
  background-position: top;
}

#szolgaltatasaim .list-default .listelement .pic-container {
  background-color: var(--color-content-bg);
  padding: 3px;
}

.list-default .listelement .pic-container {
  background-color: var(--color-third);
  padding: 3px;
}

#szolgaltatasaim .list-default .listelement .pic-container .pic-content {
  background: #ffffff;
  padding: 5px 10px;
}

.list-default .listelement .pic-container .pic-content {
  background: var(--color-content-bg);
  padding: 5px 10px;
}

.list-default .listelement .text-container h3 {
  font-size: 22px !important;
}

.list-default .listelement .text-container span.link {
  font-family: var(--font-headline-family);
  font-size: 20px;
}

.image-with-frame {
  border-style: solid;
  border-width: 3px 3px 3px 3px;
  border-color: var(--color-third);
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px 0px 0px 0px;
}

.image-with-frame img {
  border-style: solid;
  border-width: 12px 12px 12px 12px;
  border-color: transparent;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  margin: 0px 0px 0px 0px;
}

.lead-text {
  font-family: var(--font-headline-family);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

footer.footer-2 nav ul {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  list-style-image: url('/userfiles/domain25/8/9/892347323ad6a0d53d160ab91cad787f.webp');
  margin-left: 12px;
}

#leiras {
	padding-top: 100px !important;
}

#szolgaltatasaim {
	margin-top: -20px !important;
}

.fixed-header header {
	-webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.1);
  box-shadow: 0 0 10px 4px rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.custom-slogan .ca-overlap-title .ca-overlap-title__wrap {
  position: relative;
  text-align: center;
  padding: 22px 0;
}

.custom-slogan .ca-overlap-title .ca-overlap-title__bg {
  #font-family: "Georgia","Times New Roman",serif;
  margin: 0;
  margin-bottom: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 6px;
  line-height: 1;
  font-size: 48px;
  color: rgba(255, 143, 127, 0.7);
  white-space: normal;
}

.custom-slogan .ca-overlap-title .ca-overlap-title__fg {
  font-family: "Georgia","Times New Roman",serif;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.15;
  font-size: 26px;
  color: #111;
  position: relative;
  top: -12px;
  z-index: 2;
}

.custom-images-parallax {
  display: flex;
}

.custom-images-parallax img {
  margin-bottom: 0;
}

.gsc-images-parallax {
  width: 720px;
  max-width: 100%;
  margin: 0px auto;
}

.gsc-images-parallax::before,
.gsc-images-parallax::after {
  content: " ";
  display: table;
}

.gsc-images-parallax::after {
  clear: both;
}

.gsc-images-parallax.style-v1 {
  margin-bottom: -20px;
}

.gsc-images-parallax.style-v1 .images {
  position: relative;
  text-align: center;
}

.gsc-images-parallax.style-v1 .content-box {
  width: 169px;
  height: 169px;
  color: rgb(255, 255, 255);
  text-align: center;
  position: absolute;
  top: 45px;
  left: 0px;
  z-index: 99;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border-radius: 50%;
  background: #46bab9;
  padding: 10px 20px;
}

.gsc-images-parallax.style-v1 .content-box:hover {
  background: #308a89;
  transition: all 0.3s ease;
}

.gsc-images-parallax.style-v1 .content-box .icon {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  font-size: 46px;
  line-height: 50px;
  font-weight: 400;
}

.gsc-images-parallax.style-v1 .content-box a {
  color: rgb(255, 255, 255);
}

.gsc-images-parallax.style-v1.left .image-1 {
  position: relative;
  z-index: 1;
  padding-left: 90px;
}

.gsc-images-parallax.style-v1.left .image-2 {
  position: absolute;
  bottom: -120px;
  left: 0px;
  z-index: 9;
  text-align: left;
  max-width: 80%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 21px 3px;
  padding: 15px;
  background: rgb(255, 255, 255);
}

table.pricelist {
	width: 70% !important;
}

table.pricelist td {
	text-wrap: nowrap;
}

/* ===== GALLERY ALAP ===== */
.gallery {
  display: block !important;
  position: relative !important;
}

/* ===== MASONRY ITEM (NEM ANIMÁLJUK!) ===== */
.gallery .col.item {
  width: 33.333% !important;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  position: absolute !important;

  opacity: 0; /* kezdetben rejtett */
}

/* ===== BELSŐ ELEM – EZ ANIMÁL ===== */
.gallery .col.item .pic-container {
  background-color: transparent !important;
  padding: 5px !important;

  transform: translateY(50px);
  opacity: 0;

  transition: 
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;

  will-change: transform, opacity;
}

/* ===== MEGJELENÉS ===== */
.gallery .col.item.is-visible {
  opacity: 1;
}

.gallery .col.item.is-visible .pic-container {
  transform: translateY(0);
  opacity: 1;
}

/* ===== KÉP MEGJELENÉS ===== */
.gallery .col.item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ===== PIC CONTENT ===== */
.gallery .col.item .pic-container .pic-content {
  padding: 0 !important;
}

/* ===== HOVER (extra finom effekt) ===== */
.gallery .col.item.is-visible .pic-container:hover {
  transform: translateY(-6px);
}

/* ===== PERFORMANCE OPTIMALIZÁLÁS ===== */
.gallery .col.item {
  will-change: opacity;
}

@media (max-width: 1399.99px) {
  #szolgaltatasaim-cim {
    padding-top: 70px;
  }

  .image-between-section-left {
    top: -160px;
  }
}

@media (max-width: 768.99px) {
  table.pricelist {
    border: 0;
    width: 100% !important;
  }

  table.pricelist thead {
    display: none;
  }

  table.pricelist tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #fff0ee;
    height: auto !important;
  }

  table.pricelist td {
    display: block;
    text-align: right;
    padding: 8px;
    position: relative;
    border: none;
    border-bottom: 1px solid #eee;
    height: auto !important;
    width: auto !important;
  }

  table.pricelist td:first-child {
    text-align: center;
    font-weight: bold;
    background: #ff8f7f;
    font-family: var(--font-headline-family) !important;
    font-size: 20px;
  }

  table.pricelist.pricelist-color td:first-child {
    text-align: right;
    font-weight: normal;
    background: none !important;
  }

  table.pricelist td::before {
    position: absolute;
    left: 10px;
    font-weight: bold;
    text-align: left;
  }

  /* címkék hozzáadása */
  table.pricelist-1 td:nth-child(2)::before { content: "Rövid"; }
  table.pricelist-1 td:nth-child(3)::before { content: "Félhosszú"; }
  table.pricelist-1 td:nth-child(4)::before { content: "Hosszú"; }
  table.pricelist-1 td:nth-child(5)::before { content: "Extra hosszú"; }
  
  table.pricelist-hajfonat td:nth-child(2)::before { content: "Rövid fonat"; }
  table.pricelist-hajfonat td:nth-child(3)::before { content: "Hosszú fonat"; }
  
  table.pricelist-hullamositas td:nth-child(2)::before { content: "75ml / 1 flakon"; }
  table.pricelist-hullamositas td:nth-child(3)::before { content: "150ml / 2 flakon"; }
  table.pricelist-hullamositas td:nth-child(4)::before { content: "225ml / 3 flakon"; }
  table.pricelist-hullamositas td:nth-child(5)::before { content: "300ml / 4 flakon"; }
  
  table.pricelist-ferfi-kisfiu td:nth-child(2)::before { content: "Alap ár"; }
  table.pricelist-ferfi-kisfiu td:nth-child(3)::before { content: "Mosással"; }
  
  table.pricelist-color td.headline-font:first-child {
  	font-family: var(--font-headline-family) !important;
    font-size: 20px;
  }

  table.pricelist-color td.headline-font:first-child::before {
  	content: "";
  }

  table.pricelist-color td:first-child {
  	font-family: var(--font-content-family) !important;
  	font-size: 14px;
  }
  table.pricelist-color td:nth-child(1)::before { content: "10gr"; }
  table.pricelist-color td:nth-child(2)::before { content: "20gr"; }
  table.pricelist-color td:nth-child(3)::before { content: "30gr"; }
  table.pricelist-color td:nth-child(4)::before { content: "40gr"; }
  table.pricelist-color td:nth-child(5)::before { content: "50gr"; }
  table.pricelist-color td:nth-child(6)::before { content: "60gr"; }
  table.pricelist-color td:nth-child(7)::before { content: "70gr"; }
  table.pricelist-color td:nth-child(8)::before { content: "80gr"; }
  table.pricelist-color td:nth-child(9)::before { content: "90gr"; }
  table.pricelist-color td:nth-child(10)::before { content: "100gr"; }
  table.pricelist-color td:nth-child(11)::before { content: "110gr"; }
  table.pricelist-color td:nth-child(12)::before { content: "120gr"; }
  
  table.pricelist-hajegyenes td:nth-child(2)::before { content: "Anyag ár"; }
  table.pricelist-hajegyenes td:nth-child(3)::before { content: "Munkadíj"; }
  
  table.pricelist-ossejt td:nth-child(2)::before { content: "1 ampulla"; }
  table.pricelist-ossejt td:nth-child(3)::before { content: "2 ampulla"; }
  table.pricelist-ossejt td:nth-child(4)::before { content: "3 ampulla"; }
  
  table.pricelist-olaplex-kotes td:nth-child(2)::before { content: "7,5 ml"; }
  table.pricelist-olaplex-kotes td:nth-child(3)::before { content: "15 ml"; }
  table.pricelist-olaplex-kotes td:nth-child(4)::before { content: "22,5 ml"; }
}

@media (max-width: 1399.98px) {
  .gsc-images-parallax.style-v1.left .image-1 {
    padding-left: 30px;
  }
}

@media (max-width: 1199.98px) {
  .gsc-images-parallax.style-v1.left .image-1 {
    padding-left: 0px;
    margin-right: 50px;
  }
}

@media (max-width: 991.98px) {
  .custom-images-parallax {
    display: block;
  }

  .gsc-images-parallax.style-v1.left .image-1 {
    padding-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .gsc-images-parallax.style-v1.left .image-1 img {
    width: 100%;
  }

  .gsc-hidden-mobile {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #icon-box-style-1 {
    background-image: none;
  }

  .gsc-heading.style-1 .title {
    font-size: 30px;
    line-height: 1;
  }

  .gsc-images-parallax.style-v1 {
    margin-bottom: 0px;
  }

  .gsc-images-parallax.style-v1 .images {
    max-width: 650px;
    float: none;
    margin: 0 auto;
  }

  .gsc-images-parallax.style-v1.left .image-2 {
    bottom: 0 !important;
  }

  .gsc-images-parallax.style-v1 .content-box {
    width: 120px;
    height: 120px;
    font-size: 14px;
  }

  .gsc-call-to-action .video-inner .link-video {
    width: 60px;
    height: 60px;
    line-height: 62px;
  }

  .gsc-call-to-action.text-light .content .title {
    font-size: 40px !important;
  }

  .gsc-call-to-action.text-light .button-action {
    margin-top: 20px;
  }

  .custom-slogan .ca-overlap-title .ca-overlap-title__bg {
    font-size: 35px;
  }

  .custom-slogan .ca-overlap-title .ca-overlap-title__fg {
    font-size: 26px;
  }

  .image-between-section-left {
    top: -180px;
  }

  #intro {
    padding-bottom: 100px;
  }

  #leiras {
    padding-top: 190px !important;
  }

  #arlista h5 {
    font-size: 22px;
  }

  .gallery .col.item {
    width: 100% !important;
  }

  .gallery .col.item .pic-container {
    transform: translateY(30px);
  }
}
