/* 

orange: #ffb100
neon pink: #ff5656

skincare pink: #e67275
top članci text trula višnja:  #8b3133
svi članci naslovi brown: #443030
makeup tamno -zlatna: #8b6a02
makeup svijetlo -zlatna: #d3a743
kosa tamno siva: #46403d
kosa svijetlo siva: #705e56

svijetlo-siva za citat i foto-caption: #858585 (#8d808a)


elementima:
<header> <h3>,
<div class="intro"> <p class="citat-autor">,
<div class="clanak-sve"> <h4></h4> 
i
<div class="top-opis"> <p class="top-opis-text">

je dodan pseudoelement ":empty" sa propertijem display: none;
  
  &:empty {
    display: none;
  }

ŠTO ZNAČI DA KADA JE ELEMENT POTPUNO PRAZAN BIT ĆE VIZUALNO KAO DA GA NEMA

*/

:root {
  --navmob-element-position: absolute;
  --logo-background-color: transparent;
  --header-logo-width: 80px;

  /* HEADER NASLOV */
  --header-title-font: "Delicious Handrawn", cursive;
  --header-title-font-weight: 400;
  --header-title-font-size: 94px;
  --header-title-letter-spacing: -1px;
  --header-title-font-stroke-weight: 0px; /* u pikselima */

  /* HEADER PODNASLOV */
  --header-subtitle-font: "Roboto", sans-serif;
  --header-subtitle-font-weight: 400;
  --header-subtitle-font-size: 49px;

  /* INTRO TEKST (CITAT) */
  --intro-text-font: "Roboto Slab", serif;
  --intro-text-font-size: 22px;
  --intro-text-pseudo-el-color: #f3f3f3;
  --intro-text-pseudo-el-font-size: 200px;

  /* NASLOVI KATEGORIJA */
  --category-font: "Roboto", sans-serif;
  --category-font-weight: 500;
  --category-font-size: 50px;
  --category-font-stroke-weight: 0px; /* u pikselima */

  /* VELIKI ČLANCI */
  --big-article-title-font: "Delicious Handrawn", cursive;
  --big-article-title-font-weight: 900;
  --big-article-title-font-size: 50px;
  --big-article-subtitle-font: "Roboto Slab", serif;
  --big-article-subtitle-font-weight: 300;

  /* MALI - OBIČNI ČLANCI */
  --article-title-font: "Delicious Handrawn", cursive;
  --article-title-font-weight: 600;
  --article-title-font-size: 28px;
  --article-subtitle-font: "Roboto Slab", serif;
  --article-subtitle-font-weight: 300;

  /* BOJE I POZADINE */
  --article-title-default-color: #443030;
  --article-subtitle-default-color: #1f1f1f;
  --color-cat-1: #08eaea;
  --color-cat-2: #c04a6d;
  --color-cat-3: #caa100;
  --color-cat-4: #08eaea;
  --color-cat-1-btn-hover: #00cdcd;
  --color-cat-2-btn-hover: #c04a6d;
  --color-cat-3-btn-hover: #caa100;
  --color-cat-4-btn-hover: #00cdcd;
  --color-cat-1-p: #00cdcd;
  --color-cat-2-p: #c04a6d;
  --color-cat-3-p: #caa100;
  --color-cat-4-p: #00cdcd;
  /* --bckg-img-cat-1: linear-gradient(0deg, #88ffe05c 0%, #4e97ff3b 100%),
    url(../img/anna-sullivan-iUmoREuqGbo-unsplash.jpg); */
  /* --bckg-img-cat-2: linear-gradient(0deg, #ff9bc563 10%, #26f7ff47 100%),
    url(../img/anna-sullivan-iUmoREuqGbo-unsplash.jpg); */
  /* --bckg-img-cat-3: linear-gradient(0deg, #88ffe05c 0%, #4e97ff3b 100%),
    url(../img/anna-sullivan-iUmoREuqGbo-unsplash.jpg); */
  --bckg-img-cat-1: transparent;
  --bckg-img-cat-2: transparent;
  --bckg-img-cat-3: transparent;
  --bckg-img-cat-4: ;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background-color: #fff;
}

a,
a:hover {
  text-decoration: none;
}

::selection {
  color: #fff;
  background: #ffb100;
}

::-moz-selection {
  color: #fff;
  background: #ffb100;
}

.my-img-fluid {
  width: 100%;
  height: auto;
}

/* FIXNI ELEMENTI ********************************************************************************************************************/

.nav-mob {
  position: var(--navmob-element-position);
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  align-items: center;
}

.logo-m {
  background-color: var(--logo-background-color);
  border-radius: 50%;
  width: var(--header-logo-width);
  height: auto;
  margin-right: 4px;

  position: relative;
}

/**************/
.logo {
  position: fixed;
  top: 28px;
  left: 50px;
  z-index: 1001;
  background-color: var(--logo-background-color);
  border-radius: 50%;
  width: var(--header-logo-width);
  height: auto;
  transition: 0.3s;
}

/**************/
.navigacija {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1001;
}

.link-1,
.link-2,
.link-3,
.btt {
  background-color: #ffb100;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 4px;
  transition: 0.3s;
  position: relative;
}

.link-1 img,
.link-2 img,
.link-3 img {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}

.link-1:hover,
.link-2:hover,
.link-3:hover,
.btt:hover {
  background-color: #ff5656;
}

.link-1:hover img,
.link-2:hover img,
.link-3:hover img {
  width: 26px;
  height: 26px;
}

/**************/
.btt-a {
  color: #fff;
  font-size: 26px;
  position: relative;
}
.btt-a:hover {
  color: #fff;
  font-size: 30px;
}
.btt-a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btt {
  opacity: 0;
  transition: opacity 2s;
}

.btt-mob {
  position: fixed;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
}

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

header {
  /* height: 618px; */
  /* aspect-ratio: 16/9; */
  height: 240px;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.video-wrapper {
  position: fixed;
  /* aspect-ratio: 16/9; */
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.video-wrapper video,
.video-wrapper img {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header h1 {
  position: relative;
  top: 51%;
  text-align: center;
  color: #fff;
  font-family: var(--header-title-font);
  font-weight: var(--header-title-font-weight);
  font-size: var(--header-title-font-size);
  line-height: 1;
  letter-spacing: var(--header-title-letter-spacing);
  -webkit-text-stroke: var(--header-title-font-stroke-weight);
  text-shadow: 8px 9px 24px #1d1d1dd9;
}

header h3 {
  position: relative;
  top: 46%;
  text-align: center;
  color: #a67b00;
  font-family: var(--header-subtitle-font);
  font-weight: var(--header-subtitle-font-weight);
  font-size: var(--header-subtitle-font-size);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  margin-top: 60px;

  &:empty {
    display: none;
  }
}

/* INTRO ********************************************************************************************************************/
.intro {
  position: relative;
  /* background: radial-gradient(circle at 60% 40%, #f1f1f1 7%, transparent 8%);
  background-size: 2vw 2vw;
  background-position: 12% 30%; */
  background-color: #ffffff;
  box-shadow: 0 -3px 31px #0000001a;
  z-index: 2;

  /* padding: 2rem 0 4.5rem; */
  padding: 2rem 0 7.5rem;
}

.intro-citat {
  text-align: center;
  position: relative;
}

.intro-citat p {
  margin: 0;
  font-family: var(--intro-text-font);
}

.intro-citat p.citat-text {
  color: #858585;
  font-size: var(--intro-text-font-size);
  line-height: 1.5;
  font-weight: 400;
  padding: 104px 12px 4px 12px;
  font-style: italic;
  position: relative;
  z-index: 101;
}

.intro-citat p.citat-autor {
  font-size: 16px;
  line-height: 46px;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding-bottom: 50px;
  font-family: "Raleway", sans-serif;

  &:empty {
    display: none;
  }
}

.intro-citat::before,
.intro-citat::after {
  content: "“";
  position: absolute;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--intro-text-pseudo-el-font-size);
  line-height: 0.05;
  font-weight: 600;
  z-index: 99;
  color: var(--intro-text-pseudo-el-color);
}

.intro-citat::before {
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
}

.intro-citat::after {
  content: "”";
  bottom: -98px;
  right: 50%;
  transform: translateX(50%);
  left: unset;
}

/* SKINCARE ****************************************************************************************************************/

.kategorija {
  padding: 0 0 4rem;
  position: relative;
  margin: -1px 0;

  background: radial-gradient(circle at 60% 40%, #f1f1f1 7%, transparent 8%);
  background-size: 2vw 2vw;
  background-color: #ffffff;
  background-position: 12% 30%;
}

.podnaslov {
  padding: 0;
  /* height: 240px; */
  height: 140px;
  background-repeat: no-repeat;
  background-image: var(--bckg-img-cat-1);
  background-size: 100%, 302%;
  background-position: 20% 0%;
}

#cat-1 .podnaslov {
  background-image: var(--bckg-img-cat-1);
}

#cat-2 .podnaslov {
  background-image: var(--bckg-img-cat-2);
}

#cat-3 .podnaslov {
  background-image: var(--bckg-img-cat-3);
  background-size: cover;
}

.podnaslov h2 {
  color: #fff;
  font-family: var(--category-font);
  font-weight: var(--category-font-weight);
  font-size: var(--category-font-size);
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  padding: 0.8rem 2rem 1rem 2rem;
  width: 334px;
  position: relative;
  left: 42px;
  /* top: 180px; */
  /* top: 142px; */
  top: 45px;
  z-index: 100;
  -webkit-text-stroke: var(--category-font-stroke-weight);
  background-color: var(--color-cat-1);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

#cat-2 .podnaslov h2 {
  background-color: var(--color-cat-2);
}

#cat-3 .podnaslov h2 {
  background-color: var(--color-cat-3);
}

#cat-4 .podnaslov h2 {
  background-color: var(--color-cat-4);
}

/* .top-clanak {
    padding: 0;
    }
 */
.top-opis {
  padding: 2rem;
}

.top-opis h4 {
  color: var(--color-cat-1);
  font-family: var(--big-article-title-font);
  font-weight: var(--big-article-title-font-weight);
  font-size: var(--big-article-title-font-size);
  line-height: 1.05;

  -webkit-text-stroke: 1px;
  text-transform: uppercase;
  letter-spacing: -1px;
}

#cat-2 .top-opis h4 {
  color: var(--color-cat-2);
}

#cat-3 .top-opis h4 {
  color: var(--color-cat-3);
}

.top-opis p {
  color: var(--color-cat-1-p);
  font-family: var(--big-article-subtitle-font);
  font-weight: var(--big-article-subtitle-font-weight);
  font-size: 20px;
  line-height: 1.2;
  padding-left: 5px;
  margin-bottom: 0;

  &:empty {
    display: none;
  }
}

#cat-2 .top-opis p {
  color: var(--color-cat-2-p);
}

#cat-3 .top-opis p {
  color: var(--color-cat-3-p);
}

#cat-4 .top-opis p {
  color: var(--color-cat-4-p);
}

.opis-btn {
  font-family: var(--category-font);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  transition-duration: 0.2s;
  border-radius: 50vw;
  padding: 6px 40px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 40px;
}

#cat-1 .opis-btn {
  color: var(--color-cat-1-p);
  border: 3px solid var(--color-cat-1-p);
}

#cat-2 .opis-btn {
  color: var(--color-cat-2-p);
  border: 3px solid var(--color-cat-2-p);
}

#cat-3 .opis-btn {
  color: var(--color-cat-3-p);
  border: 3px solid var(--color-cat-3-p);
}

.opis-btn:hover {
  color: #fff !important;
}

#cat-1 .opis-btn:hover {
  background-color: var(--color-cat-1-btn-hover);
  border: 3px solid var(--color-cat-1-btn-hover) !important;
}

#cat-2 .opis-btn:hover {
  background-color: var(--color-cat-2-btn-hover);
  border: 3px solid var(--color-cat-2-btn-hover) !important;
}
#cat-3 .opis-btn:hover {
  background-color: var(--color-cat-3-btn-hover);
  border: 3px solid var(--color-cat-3-btn-hover) !important;
}

#cat-4 .opis-btn:hover {
  background-color: var(--color-cat-4-btn-hover);
  border: 3px solid var(--color-cat-4-btn-hover) !important;
}

.clanak-sve h3 {
  color: #08eaea;
  font-family: var(--article-title-font);
  font-weight: var(--article-title-font-weight);
  font-size: var(--article-title-font-size);
  line-height: 1.05;
  -webkit-text-stroke: 1.4px;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  margin-top: 14px;
  transition: 0.2s ease;
}

#cat-2 .clanak-sve h3 {
  color: #e67275;
}
#cat-1 .clanak-sve h3 {
  color: #08eaea;
}
#cat-3 .clanak-sve h3 {
  color: #caa100;
}

.clanak-sve h4 {
  color: #1f1f1f;
  font-family: var(--article-subtitle-font);
  font-weight: var(--article-subtitle-font-weight);
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.1px;
  margin-bottom: 34px;

  &:empty {
    display: none;
  }
}

/* SLIDER proizvodi ***********************************************************/

.product-slider {
  width: 80%;
  margin: 4rem auto;
  padding: 0;
}

.product-slider-prvi {
  margin: 4rem auto -4rem auto;
  width: 100%;
  padding: 0;
}

.product-slider .slide,
.product-slider-prvi .slide {
  position: relative;
  margin: 0 1rem;
  background-color: #ffffff;
}

.product-slider-prvi .slide {
  height: 288px;
}

.product-slider .slide {
  background-color: #b6b6b6;
}

.product-slider .slide img,
.product-slider-prvi .slide img {
  object-fit: cover;
  margin: 0 auto;
  transition: filter 0.4s;
  height: 250px;
  width: auto;
}

p.foto-caption {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #858585;
  padding-left: 16px;
}

.button-vise {
  position: absolute;
  background-color: #ffb100;
  color: #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 0;
  bottom: 14px;
  right: 12px;
  filter: drop-shadow(2px 2px 3px #8d8d8d);
  transition: 0.3s;
}

.product-slider-prvi .slide .button-vise {
  width: 116px;
  height: 116px;
  bottom: 26px;
  right: 32px;
}

.product-slider .slide .button-vise::after {
  content: "+";
  position: absolute;
  color: #ffffff;
  top: 40%;
  left: 49%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  line-height: 96px;
  transition: 0.3s;
}

.button-vise:hover {
  background-color: #ff5656;
  filter: drop-shadow(2px 2px 3px #7d7d7d);
}

.product-slider-prvi .slide .button-vise img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  transition: 0.3s;
}

.product-slider .slide .button-vise:hover::after {
  font-size: 96px;
}

.insta-icon {
  width: 100px;
  height: 100px;
  margin: 20px auto;
}

/*********************************************************************************************************************/
footer {
  position: relative;
  background-color: #fff;
  font-family: "Raleway", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
  text-align: center;
  padding: 20px 50px;
}

footer p {
  margin-bottom: 0;
}

.copy {
  margin-bottom: 0;
}

.gloria-logo-footer {
  width: 126px;
  margin-bottom: 60px;
}

.gloria-logo-footer:hover {
  filter: drop-shadow(2px 4px 6px #eee16cb9);
  scale: 1.1;
  transition: 0.2s ease-in-out;
}

/* RESPONSIVE  **************************************************************************************/

@media (min-width: 375px) {
  header {
    height: 275px;
  }

  .video-wrapper {
    height: 275px;
  }
}

@media (min-width: 576px) {
  :root {
    --header-title-font-size: 158px;
    --header-title-font-stroke-weight: 2px; /* u pikselima */
    --intro-text-font-size: 25px;
    --article-title-font-size: 34px;
  }

  header {
    /* height: 100vh; */
    height: 430px;
    margin: 0 auto;
  }

  .video-wrapper {
    height: 430px;
  }

  header h1 {
    top: 49%;
    text-shadow: 12px 24px 32px #2b2b2bb8;
  }

  header h3 {
    top: 48%;
    font-size: 60px;
  }

  header .container-fluid {
    max-width: 1000px;
  }

  .naslov h1 {
    font-size: 160px;
    line-height: 120px;
    letter-spacing: 14px;
    -webkit-text-stroke: 10px #fff;
    word-wrap: normal;
  }

  .naslov h3 {
    margin-top: 40px;
  }

  .clanak-sve h3 {
    -webkit-text-stroke: 1.4px;
    letter-spacing: -0.8px;
  }

  .intro-citat p.citat-text {
    padding: 96px 72px 20px 72px;
  }

  .intro-citat::after {
    bottom: -76px;
  }

  #cat-1 .podnaslov {
    background-size: cover;
    background-position: 20% 0%;
  }

  .podnaslov h2 {
    left: 76px;
    padding: 1rem 3rem;
    width: 516px;
  }

  .product-slider-prvi {
    margin: 4rem auto -3rem auto;
    width: 540px;
  }

  .product-slider-prvi .slide {
    height: 324px;
  }

  .product-slider-prvi .slide .button-vise {
    bottom: 14px;
    right: 64px;
  }

  .top-img img {
    width: 82%;
  }
  .top-opis {
    padding: 2rem 4rem;
  }
  footer {
    padding: 32px;
  }

  .gloria-logo-footer {
    width: 180px;
    margin-bottom: 60px;
    margin-top: 52px;
  }
}

@media (min-width: 768px) {
  :root {
    --header-logo-width: 100px;
    --header-title-font-size: 180px;
    --header-title-letter-spacing: -3px;
    --header-title-font-stroke-weight: 3px; /* u pikselima */
    --big-article-title-font-size: 60px;
    --category-font-size: 60px;
    --article-title-font-size: 42px;
  }

  .link-1,
  .link-2,
  .link-3,
  .btt {
    margin-bottom: 8px;
  }
  .podnaslov {
    height: 120px;
  }
  .podnaslov h2 {
    padding: 1.2rem 3rem;
    width: 616px;
  }
  .intro {
    /* padding: 3rem 0 4rem; */
    padding: 3rem 0 7rem;
  }

  header,
  .video-wrapper {
    height: 560px;
  }
}

@media (min-width: 992px) {
  .top-img img {
    width: 100%;
    padding-left: 2%;
  }
  .podnaslov h2 {
    width: 700px;
    padding: 14px 54px 20px 54px;
  }
  .top-opis {
    position: absolute;
    top: 55%;
    transform: translate(0, -50%);
    width: 85%;
    padding: 0;
  }

  header,
  .video-wrapper {
    height: 760px;
  }
}

@media (min-width: 1200px) {
  :root {
    --header-subtitle-font-size: 78px;
    --intro-text-font-size: 28px;
    --category-font-size: 80px;
    --big-article-title-font-size: 86px;
    --article-title-font-size: 40px;
  }

  header {
    /* height: 94vh; */
    aspect-ratio: 16/9;
    height: unset;
  }

  .video-wrapper {
    aspect-ratio: 16/9;
    height: unset;
  }

  header h3 {
    top: 49%;
  }

  .intro {
    /* padding: 6rem 0; */
    padding: 6rem 0 8rem;
  }

  .intro-citat p.citat-text {
    padding: 80px 72px 20px 72px;
  }

  .intro-citat::before {
    top: 56px;
  }

  .podnaslov h2 {
    width: 45%;
    padding: 10px 52px;
  }

  .top-opis {
    top: 55%;
    width: 80%;
  }
  .top-opis h4 {
    -webkit-text-stroke: 2px;
    text-transform: uppercase;
    letter-spacing: -2px;
  }
  .top-opis p {
    font-size: 22px;
    padding-left: 5px;
  }
  .opis-btn {
    padding: 6px 40px;
    letter-spacing: 1.5px;
    margin-top: 50px;
  }

  #cat-2 .clanak-sve h3,
  #cat-1 .clanak-sve h3,
  #cat-3 .clanak-sve h3 {
    color: var(--article-title-default-color);
  }
  .clanak-sve h4 {
    color: var(--article-subtitle-default-color);
    font-size: 18px;
    line-height: 20px;
    font-weight: 300;
    letter-spacing: -0.1px;
    margin-bottom: 34px;
  }

  #cat-1 .clanak-sve:hover h3,
  #cat-1 .clanak-sve:hover h4 {
    color: var(--color-cat-1);
  }

  #cat-2 .clanak-sve:hover h3,
  #cat-2 .clanak-sve:hover h4 {
    color: var(--color-cat-2);
  }

  #cat-3 .clanak-sve:hover h3,
  #cat-3 .clanak-sve:hover h4 {
    color: var(--color-cat-3);
  }

  .clanak-sve:hover img {
    transform: rotate(-2deg);
    filter: contrast(1.2);
  }

  .product-slider-prvi {
    width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
  }

  .product-slider-prvi .slide {
    height: 570px;
  }

  footer {
    padding: 30px 0;
    font-size: 11px;
    line-height: 14px;
  }
}

@media (min-width: 1650px) {
  :root {
    --article-title-font-size: 42px;
    --intro-text-pseudo-el-font-size: 400px;
  }

  .intro {
    padding: 3rem 0 4rem;
  }

  .intro-citat::before {
    top: unset;
    bottom: 30px;
    left: -172px;
  }
  .intro-citat::after {
    bottom: 10px;
    right: -180px;
  }

  .intro-citat::before,
  .intro-citat::after {
    transform: translateX(0);
  }

  .product-slider-prvi {
    width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
  }

  .kategorija {
    padding: 0 0 8rem;

    &#cat-3 {
      padding-bottom: 5rem;
    }
  }
}

@media (min-width: 1921px) {
  :root {
    --header-title-font-size: 240px;
    --header-title-letter-spacing: -8px;
    --header-title-font-stroke-weight: 4px; /* u pikselima */
    --header-subtitle-font-size: 53px;
    --intro-text-font-size: 32px;
    --intro-text-pseudo-el-font-size: 550px;
    --category-font-size: 100px;
    --big-article-title-font-size: 120px;
    --header-logo-width: 110px;
  }

  .link-1,
  .link-2,
  .link-3,
  .btt {
    width: 70px;
    height: 70px;
    margin-right: 0;
  }

  .link-1 img,
  .link-2 img,
  .link-3 img {
    width: 38px;
    height: 38px;
  }

  .link-1:hover img,
  .link-2:hover img,
  .link-3:hover img {
    width: 30px;
    height: 30px;
  }

  .btt {
    transition: opacity 2s;
  }

  /* header {
    height: 98vh;
  } */

  header h3 {
    top: 51.5%;
  }

  .naslov h1 {
    font-size: 283px;
    line-height: 160px;
    letter-spacing: 0.5px;
    -webkit-text-stroke: 12px #fff;
    margin-top: 60px;
  }

  .naslov h3 {
    font-size: 84px;
    line-height: 122px;
    font-weight: 300;
  }

  .intro {
    padding: 5rem 0 7rem;
  }

  .intro-citat {
    text-align: center;
    position: relative;
  }

  .intro-citat p {
    margin: 0;
  }

  .intro-citat p.citat-text {
    padding: 80px 72px 20px 72px;
  }

  .intro-citat::before {
    bottom: 50px;
    left: -292px;
  }

  .intro-citat::after {
    bottom: 35px;
    right: -296px;
  }

  .podnaslov h2 {
    letter-spacing: 0.5px;
    padding: 16px 64px;
    left: 140px;
    /* top: 160px; */
    top: 33px;
    z-index: 100;
  }

  .top-clanak {
    padding: 0;
  }

  .top-opis {
    top: 50%;
    width: 65%;
  }

  .top-opis h4 {
    -webkit-text-stroke: 3px;
    letter-spacing: -2px;
  }

  .top-opis p {
    font-size: 29px;
    padding-left: 5px;
  }

  .opis-btn {
    padding: 6px 40px;
    letter-spacing: 1.5px;
    margin-top: 60px;
  }

  .clanak-sve h3 {
    letter-spacing: -0.8px;
    margin-top: 14px;
  }

  #cat-2 .clanak-sve:hover img {
    transform: rotate(-2deg);
    filter: contrast(1.2);
  }

  #cat-1 .clanak-sve:hover img {
    transform: rotate(-2deg);
    filter: contrast(1.2);
  }

  #cat-3 .clanak-sve:hover img {
    transform: rotate(-2deg);
    filter: contrast(1.2);
  }

  .clanak-sve h4 {
    font-size: 18px;
    line-height: 20px;
    font-weight: 300;
    letter-spacing: -0.1px;
  }

  /* SLIDER proizvodi ***********************************************************/
  .product-slider {
    width: 1490px;
    margin: 4rem auto;
    padding: 0 2rem;
  }

  .product-slider-prvi {
    width: 1200px;
  }

  .product-slider .slide,
  .product-slider-prvi .slide {
    position: relative;
    margin: 0 2rem;
  }

  .product-slider .slide img {
    /*object-fit: cover;
        margin: 0 auto;*/
    transition: filter 0.4s;
  }

  .slide img {
    height: 240px;
    width: auto;
  }

  p.foto-caption {
    font-weight: 700;
    font-size: 20px;
  }

  .button-vise {
    width: 110px;
    height: 110px;
    border: 0;
    bottom: 17px;
    right: -22px;
    filter: drop-shadow(2px 2px 3px #8d8d8d);
  }

  .button-vise:hover {
    filter: drop-shadow(2px 2px 3px #7d7d7d);
  }

  .button-vise::after {
    top: 40%;
    left: 49%;
    transform: translate(-50%, -50%);
    font-size: 112px;
    line-height: 96px;
  }

  /* MAKEUP ****************************************************************************************************************/

  #cat-1 .podnaslov {
    padding: 0;
    /* height: 260px; */
    height: 149px;
    background-position: 4% 72%;
  }

  /* HAIR ****************************************************************************************************************/

  #cat-3 .podnaslov {
    padding: 0;
    /* height: 260px; */
    height: 149px;
    background-position: 0 80%;
  }
}