@media (min-width: 768px) {
  .bar1 {height: 78vh; align-items: baseline; max-width: 250px;}
  .bar2 {max-width: 250px; align-items: baseline;}
  .main {padding-left: 250px;}
  footer .contact {border-left: 1px solid #ACBC37; padding-left: 3vw}
}

body, html {overflow-x:hidden;}
main {min-height: 50vh;}

@font-face {
  font-family: ekonova;
  src: url(assets/font/Averta.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaThin.woff) format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaLight.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaSemibold.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaBold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaExtraBold.woff) format("woff");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaBlack.woff) format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaBlackItalic.woff) format("woff");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaExtraBoldItalic.woff) format("woff");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaBoldItalic.woff) format("woff");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: ekonova;
  src: url(assets/font/AvertaRegularItalic.woff) format("woff");
  font-weight: normal;
  font-style: italic;
}

body::-webkit-scrollbar {display: none;}
body {-ms-overflow-style: none; font-family: "ekonova", sans-serif;}
.sideHeading {max-width: 300px;}
.homepage { 
  background-image: url(assets/HOME-Ekonova.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  height: 78vh;
  z-index: 2;}
 .naslov {
   margin-left: 10px;
   position: relative;
   top: 20%;
   max-width: 600px;
   font-size: 78px;
  }
@media(max-width: 900px) {
  .naslov {font-size: 40px;}
  .homepage {height: 70vh;}
}
@media(max-width: 374px) {
  .naslov {padding-top: 25px; font-size: 30px;}
}

@media(width:1280px) {
  .naslov {font-size: 64px; top: 98px;}
}

@media(width:1440px) {
  .naslov {transform: translateY(-7%);}
}

@media(width:1920px) {
  .naslov {top: 19%;}
}

@media(min-width: 2000px){
  .eko-img{display: none;}}


nav {z-index: 3;}

h1, h2, h3 {color: #261219; margin-bottom: 0px;}
h1 {font-weight: 500;}
h2 {font-weight: 800; font-size: 2.25em}

/*COLORS #FAF5DA */
body {background-color: #F9F8F4;}
a {color: #ACBC37}
a:hover {color: #4D2431}
.c1 {color: #F9F8F4}
.c2 {color: #4D2431}
.c3 {color: #ACBC37}
.bc1 {background-color: #F9F8F4}
.bc2 {background-color: #4D2431}
.bc3 {background-color: #ACBC37}
hr {border-color: #F9F8F4}
.main p {color: #261219}
.main span {color: #261219;}
.mainHR {border-color: #ACBC37; border-width: 5px; border-radius: 10px; max-width: 200px; margin-left: 0;}

.breadcrumb {background-color: #F9F8F4; font-size: 12px; color: dimgray;}
.breadcrumb a {color: #4D2431}
footer a, h4, p, span{color: white;}
footer a:hover {color: #ACBC37}

/* NAV */
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgba(76, 36, 49, 0.97);
  transition: 0.4s;
  overflow: hidden;
}

.overlay span {
  font-size: 12px;
}

.overlay-content {
  position: relative;
  margin-left: 30vw;
  top: 25vw;
  width: 100vw;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  font-size: 20px;
  color: #FAF5DA;
}

.overlay p {
  padding: 8px;
  text-decoration: none;
  color: #818181;
  transition: 0.3s;
  font-size: 20px;
  color: #FAF5DA;
  font-size: 18px;
}

.drop-link {
  margin-left: 0px;}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  right: 7px;
  font-size: 40px;
}

.ulli {list-style: none; padding-left: 0;}
.ulli li {padding-top: 25px}
.homepageList {color: #261219; border: 4px solid #261219; padding: 2px 10px; border-radius: 100px; font-weight: 900; font-size: 20px;}
.navPC1 a {color: white; font-size: 16px;} 
.navPC1 .dropdown-item {color: black;}
.navPC a {color: black; font-size: 16px;}
.navPC a:hover {text-decoration: underline;}
.navPC1 a:hover {text-decoration: underline;}
/* END NAV */

/* MAIN */
footer {position: relative; margin-top: 200px}
h1 {margin-top: 4vh;}
h2 {padding-top: 5rem;}
.greenrow {
  background: linear-gradient(180deg, rgba(249,248,244,1) 0%, rgba(249,248,244,1) 50%, rgba(172,188,55,1) 50%);
background-size: auto 50%;
background-repeat: no-repeat;
}

#owl-demo .item img{
  display: block;
  width: 100%;
  height: fit-content;
  object-fit: cover;
}

@media(max-width: 1281px) {
  #owl-demo .item img {height: 85vh;}
}

@media(max-width: 800px) {
  #owl-demo .item img {height: 70vh;}
}

.owl-stage-outer {max-height: 80vh;}


.fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.CTA {
  display: block;
    position: absolute;
    right: 0;
    padding: 35px;
    color: white;
    background-color: #ACBC37;
    width: 100%;
    bottom: 0;
    text-align: center;
}
@media(max-width: 1200px) {
  /* .CTA {display: none;} */
}
 
/*ANIMATION CREDITS TO AARON IKER ON CODEPEN*/
.underline1 {
  --line: #4D2431;
  text-decoration: none;
  position: relative;
}
.underline1 span {
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--line)), to(var(--line)));
  background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size, 100%) 1px;
  -webkit-transition: background-size 0.2s linear var(--background-delay, 0.15s);
  transition: background-size 0.2s linear var(--background-delay, 0.15s);
  line-height: 20px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  color: #ACBC37;
}
.underline1 svg {
  vertical-align: top;
  display: inline;
  line-height: 1;
  width: 13px;
  height: 20px;
  position: relative;
  left: -2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke: var(--line);
  stroke-dasharray: 7.95 30;
  stroke-dashoffset: var(--stroke-dashoffset, 46);
  -webkit-transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
  transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.underline1:hover {
  --background-size: 0%;
  --background-delay: 0s;
  --stroke-dashoffset: 26;
  --stroke-duration: 0.3s;
  --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
  --stroke-delay: 0.195s;
  text-decoration: none;
}

/*FILTER*/
.filters a {
  color: #000;
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;}
.filters a:hover,
.filters a:focus,
.filters a:active {
  text-decoration: none;
color: #ACBC37; }
.filters a:hover:before {
  content: "";
  color: #ACBC37;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1px;
  background-color: #ACBC37;}
.filters a.active {
  color: #ACBC37;}
.filters a.active:before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1px;
  background-color: #ACBC37;}
.item {
  border: none;
  margin-bottom: 30px;}
.item .item-wrap {
  display: block;
  position: relative;
  overflow: hidden;}
.item .item-wrap:after {
  z-index: 2;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(172, 188, 55, 0.9);
  visibility: hidden;
  opacity: 0;
  transition: .3s all ease-in-out;}
.item .item-wrap img {
  transition: .3s transform ease;
  -webkit-transform: scale(1);
  transform: scale(1);}
.item .item-wrap > .work-info {
  padding: 20px;
  position: absolute;
  top: 60%;
  width: 100%;
  text-align: left;
  z-index: 3;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  margin-top: 20px;
  transition: .3s all ease;}
.item .item-wrap > .work-info h3 {
  margin-bottom: 0;
font-weight: 600}
.item .item-wrap > .work-info span {
  font-size: 14px;}
.item .item-wrap > .work-info p {
  color: white;
padding-top: 20px;
padding-bottom: 0;}
.item .item-wrap:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);}
.item .item-wrap:hover:after {
  opacity: 1;
  visibility: visible;}
.item .item-wrap:hover .work-info {
  margin-top: 0px;
  opacity: 1;
  visibility: visible;}
@-webkit-keyframes animate-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);}

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);}
}
@keyframes animate-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);}

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);}}
#scroll {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #ACBC37;
  color: white;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 4px;
}

footer .nav-link {
  padding: 0.5rem 0
}

.filters a.active {
  font-weight: 700;
  color: #ACBC37;
}

.cnt .crd {
  width: 25vw;
  min-width: 265px;
  max-width: 345px;
  height: 500px;
  /* max-height: 500px; */
  border-radius: 6px;
  overflow: hidden;
}

.shape {
  overflow: hidden;
      position: absolute;
      left: 0;
      width: 100%;
      line-height: 0;
  }
   .shape svg {
  display: block;
      width: calc(100% + 1.3px);
      position: relative;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);}
  
      .shape-fill {fill: #20EED9;}

.crd1:before {background: #ACBC37;}
.crd2:before {background: #f1eace;}
.crd3:before {background: #4D2431;}
.crd4:before {background: #00F9FC;}
.crd5:before {background: #0FF0A3;}

.cnt .crd:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: circle(150px at 80% 20%);
  transition: 0.5s ease-in-out;
}

.cnt .crd:hover:before{
  clip-path: circle(300px at 80% -20%);
}

.cnt .crd .imgBx {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 100%;
  height: 160px;
  transition: 0.5s;
}

.cnt .crd:hover .imgBx {
  top: 20%;
  transform: translateY(0%);
}

.cnt .crd .imgBx img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.cnt .crd .cntBx {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 75px;
  padding: 0 20px;
  text-align: center;
  transition: 1s;
  z-index: 3;
}
.cnt .crd:hover .cntBx {
  height: 70px;
}

.cnt .crd .cntBx details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  transition: 0.5s;
}

.nav-scroller {
  position: relative;
  overflow-y: hidden;
}

.nav-scroller nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.dropdown-menu {
  background-color: #4D2431;
}

.dropdown-menu .dropdown-item {
  background-color: #4D2431;
  color: white;
}

.dropdown-menu .dropdown-item:hover {
  text-decoration: none;
  background-color: #ACBC37;
  color: white;
  transition: all 0.1s;
}

.navbar-brand {
  display: inline-block;
  padding-top: 1.3125rem;
  padding-bottom: 5.3125rem;
}

.pt-4, .py-4 {
  padding-top: 200px!important;
}

.mt-4, .my-4 {
  margin-left: 3vw;
}