@font-face {
  font-family: BalooBhai;
  src: url(../fonts/BalooBhai-Regular.ttf);
}

body{
  font-family: BalooBhai ;
  font-display: swap;
  color: #3c3c3b;
  width: 100vw;
  padding: 0;
  margin: 0;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.2.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 328.1 336.3' style='enable-background:new 0 0 328.1 336.3%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bopacity:0.2%3B%7D.st1%7Bfill:%23DABB74%3B%7D%3C/style%3E%3Cg class='st0'%3E%3Cg id='a'%3E%3C/g%3E%3Cg id='b'%3E%3Cg id='c'%3E%3Cg%3E%3Cpath class='st1' d='M91.1 329.2c-9.5 9-24.2 9.6-33.6 1C21.3 296.9 0.8 250.9 0 200.6C-0.8 150.3 18.1 101.8 53.2 64C88.3 26.2 135.5 3.6 186 0.4c50.5-3.2 98.3 13.4 134.6 46.7c9.7 9 10 24.4 0.6 34.6c-9.7 10.4-25 11.1-34.7 2.2C231 33 142 38.6 88.6 96.4c-26 28-40 63.9-39.4 101.1c0.6 37.2 15.7 71.3 42.6 95.9c9.7 9 10 24.4 0.6 34.6C91.9 328.4 91.5 328.8 91.1 329.2L91.1 329.2z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") -30px 100px no-repeat fixed,  url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.2.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 219.3 287.2' style='enable-background:new 0 0 219.3 287.2%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bopacity:0.2%3B%7D.st1%7Bfill:%23A7D8D7%3B%7D%3C/style%3E%3Cg class='st0'%3E%3Cg id='a'%3E%3C/g%3E%3Cg id='b'%3E%3Cg id='c'%3E%3Cg%3E%3Cpath class='st1' d='M211 285.8c-2.5 1.2-5.4 1.7-8.4 1.2L82.7 268.6c-4.4-0.7-8.3-3.4-10.5-7.3c-2.1-3.9-2.3-8.7-0.5-12.8l41.7-93.6L12.2 139.4c-4.4-0.7-8.3-3.4-10.5-7.3c-2.2-3.9-2.3-8.7-0.5-12.8L50.7 8.5C54 1.3 62.5-2 69.8 1.3c7.3 3.2 10.5 11.8 7.3 19l-41.8 93.5l101.2 15.5c4.4 0.7 8.3 3.4 10.5 7.3c2.2 3.9 2.3 8.7 0.5 12.8L105.8 243L207 258.6c7.9 1.2 13.3 8.6 12.1 16.4C218.3 279.9 215.2 283.8 211 285.8L211 285.8z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 90vw 30px no-repeat fixed, url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.2.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 486.2 216' style='enable-background:new 0 0 486.2 216%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bopacity:0.2%3B%7D.st1%7Bopacity:0.3%3B%7D.st2%7Bfill:%231D1D1B%3B%7D%3C/style%3E%3Cg class='st0'%3E%3Cg id='a'%3E%3C/g%3E%3Cg id='b'%3E%3Cg id='c'%3E%3Cg class='st1'%3E%3Cpath class='st2' d='M39 215.6C23.2 218 7.5 208.9 2 193.3c-6.3-17.7 3-37.2 20.7-43.5L440.8 2c17.7-6.4 37.2 3 43.5 20.7c6.3 17.7-3 37.2-20.7 43.5L45.4 214.1C43.3 214.8 41.1 215.3 39 215.6L39 215.6z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 90vw 75vh no-repeat fixed, url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.2.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 348.9 346.2' style='enable-background:new 0 0 348.9 346.2%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bopacity:0.2%3B%7D.st1%7Bfill:%23A7D8D7%3B%7D%3C/style%3E%3Cg class='st0'%3E%3Cg id='a'%3E%3C/g%3E%3Cg id='b'%3E%3Cg id='c'%3E%3Cg%3E%3Cpath class='st1' d='M48.8 17.8c0.1-0.9 0.3-1.7 0.6-2.6C52.3 5.6 62.5 0.1 72.2 3l234.2 70.8c9.7 2.9 15.2 13.1 12.3 22.9l-70.8 234.2c-2.9 9.7-13.2 15.2-22.9 12.3c-9.7-2.9-15.1-13.1-12.3-22.9l65.5-216.6L61.6 38.1C52.8 35.5 47.4 26.7 48.8 17.8L48.8 17.8z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") -10vw 70vh no-repeat fixed;
  background-size: 15vw auto, 15vw auto, 15vw auto, 20vw auto ;
  background-attachment: fixed, fixed, fixed, fixed;
  background-color: white;
}

.js-scroll {
  opacity: 0;
}

.js-scroll.fade-in.scrolled {
  -webkit-animation: fade-in 1s ease-in-out both;
          animation: fade-in 1s ease-in-out both;
}

@-webkit-keyframes fade-in {
  from {
    -webkit-transform: translateY(10px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

a{
  color: grey;
  text-decoration: none;
  font-size: 18px;
  -webkit-transition: color .3s ease;
  -o-transition: color .3s ease;
  transition: color .3s ease;
}

a:hover, a:focus{
  color: #3c3c3b;
  text-decoration: none;
}


.uni{
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
          transform: translateX(5px);
}

.cat{
  -webkit-transform: translateX(-5px);
      -ms-transform: translateX(-5px);
          transform: translateX(-5px);
}

.uni, .cat{
  opacity: 0;
  -webkit-animation: translate-back .2s linear forwards;
          animation: translate-back .2s linear forwards;
  z-inex: -1;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
  position: relative;
  z-index: 1;
}

.pillow, .cat-outline{
  opacity: 0;
  -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
          transform: scale(.7);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-animation: scale .3s linear forwards;
          animation: scale .3s linear forwards;
  position: relative;
  z-index: 3;
}

@-webkit-keyframes translate-back {
  to {
    opacity:  1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes translate-back {
  to {
    opacity:  1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@-webkit-keyframes scale {
  to {
    opacity:  1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale {
  to {
    opacity:  1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

header{
  display: block;
  padding: 120px 0 20px;
}

header .site-title{
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  max-width: 440px;
  height: auto;
}

header .site-title h1{
  display: none;
}

.tagline{
  text-align: center;
  padding: 20px;
  position:  relative;
}

.site-inner{
  max-width: 1200px;
  margin:  0 auto;
  padding: 50px 20px;
}

.product{
  text-align: center;
  margin: 60px 0;
  padding: 60px 0 0;
}
.product h2, .prodaja h2{
  display: inline-block;
  position: relative;
  font-size: 27px;
}
.product h2::after, .prodaja h2::after{
  content: '';
  position: absolute;
  left: -10px;
  top: -10px;
  width: 100%;
  height: 50px;
  background-image: url('../img/elements/yellow-pattern.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: .6;
  display: none;
}

.site-inner .product:nth-child(2n) h2::after{
  left: 30%;
  top: 5px;
}

.image-mosaic {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  padding: 30px 0;
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  -webkit-box-shadow: rgba(3, 8, 20, 0.2) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.2) 0px 0.075rem 0.175rem;
          box-shadow: rgba(3, 8, 20, 0.2) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.2) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 30px;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  overflow: hidden;
  background-color: whitesmoke;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  opacity:1;
}

.card:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  background-color: whitesmoke;
  opacity: 0;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
.card:hover:after{
  opacity: .4;
  cursor: pointer;
}

.card.lazy{
  background-image: none !important;
  opacity: 0;
}

.description{
  padding: 60px 0;
  text-align: center;
  max-width: 850px;
  margin: 60px auto 30px;
}

.prodaja{
  text-align: center;
  padding: 30px 0;
}

.prodaja h2{
  font-size: 27px;
}


@media screen and (min-width: 350px) {

  .card-tall {
    -ms-grid-row-span: 2;
    grid-row: span 2 / auto;
  }

  .card-wide {
    -ms-grid-column-span: 2;
    grid-column: span 2 / auto;
  }
}

@media screen and (max-width: 1500px) {
  .site-inner{
    padding: 0 20px 50px;
  }
  .site-inner > .product:first-child{
    margin: 0 0 60px;
  }
  header {
    display: block;
    padding: 60px 0 20px;
  }
}

@media screen and (max-width: 1200px) {

  h1{
    font-size: 27px !important;
  }
  h2{
    font-size: 24px !important;
  }
  header .site-title{
    max-width: 300px;
  }

}

@media screen and (min-width: 870px) and (max-width: 1060px) {
  .image-mosaic {
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    padding: 30px 0;
  }
}

@media screen and (min-width: 350px) and (max-width: 869px) {
  .image-mosaic {
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
    grid-auto-rows: 20vw;
    padding: 15px 0;
  }
  .card, .card:after{
    border-radius: 10px;
  }
}