.vk-img-home {
  width: 5em !important;
  height: 5em !important;
  object-fit: fill !important;
}
.vidi-btn-sm {
  padding: .2em .3em;
}
.ponuda-card-sm img {
  height: 7em;
}
.ponuda-card-sm .ponuda-title {
  font-size: .8em !important;
}
.to-bottom {
  position: absolute;
  bottom: 0;
}
.stroke {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff !important;
}

/* [SLIDER] */
#slider .slide1 {
 height: 17em;
 width: 100vw;

 -webkit-box-shadow: inset 0px -8px 88px 0px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0px -8px 88px 0px rgba(0,0,0,0.5);
 box-shadow: inset 0px -8px 88px 0px rgba(0,0,0,0.5);
}
#slider {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  height: 17em;
  position: absolute;
}
#slider .cont {
  position: relative;
  width: 1000vw;
  top: 0;
  right: 0;
  animation: slide-animation 40s infinite;
}
#slider .slide1 {
  position: relative;
  float: left;
  box-sizing: border-box;
  padding: 10px 20px;
}

/* [ANIMATION] */
@keyframes slide-animation {
  0% {
    opacity: 0;
    right: 0;
  }
  5% {
    opacity: 1;
    right: 0;
  }
  15% { right: 100vw; }
  25% { right: 200vw; }
  35% { right: 300vw; }
  45% { right: 400vw; }
  55% { right: 500vw; }
  65% { right: 600vw; }
  75% { right: 700vw; }
  85% { right: 800vw; }
  95% {
    opacity: 1;
    right: 900vw;
  }
  100% {
    opacity: 0;
    right: 1000vw;
  }
}

.img-slideshow {
  height: 17em;
  background-color: #3B214F;
}

.slide-text {
  font-size: 5em;
  color: white;
}

@media screen and (max-width: 576px) {
  .slide-text {
    font-size: 3em;
  }
}

.cont a:nth-child(1) .slide1 {
  background-image: url('putuj.jpg');
  background-size: cover;
  background-position: 50% 50%;
}
.cont a:nth-child(2) .slide1 {
  background-image: url('massage.jpg');
  background-size: cover;
  background-position: 50% 70%;
}
.cont a:nth-child(3) .slide1 {
  background-image: url('ukusi.jpg');
  background-size: cover;
  background-position: 50% 0%;
}
.cont a:nth-child(4) .slide1 {
  background-image: url('zdravlje.jpg');
  background-size: cover;
  background-position: 50% 50%;
}
.cont a:nth-child(5) .slide1 {
  background-image: url('sport.jpg');
  background-size: cover;
  background-position: 50% 90%;
}
.cont a:nth-child(6) .slide1 {
  background-image: url('automobili2.jpg');
  background-size: cover;
  background-position: 50% 30%;
}
.cont a:nth-child(7) .slide1 {
  background-image: url('kategorije_slike/edu.jpeg');
  background-size: cover;
  background-position: 50% 50%;
}
.cont a:nth-child(8) .slide1 {
  background-image: url('usluge.jpg');
  background-size: cover;
  background-position: 50% 60%;
}
.cont a:nth-child(9) .slide1 {
  background-image: url('proizvodi.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

/*NA BODY BG-LIGHT*/

.stt-color-light {
  color: #a84f96;
}

.stt-bg-color-light {
  background-color: #a84f96;
}

.pattern-div {
  background-image: url('/beta/public/assets/images/pattern.png');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#bkmkr01 {
  position: relative;
}

.vk-image {
  display: block;
  margin: 0 auto;
}

.dropdown-header {
font-size: 1.1em;
}

/*
input[type="text"] {
font-family: 'Pacifico', cursive;
}
*/

.vidi-sve-img {
cursor: pointer;
}

.mySlides {display:none}

.slideshow-container {
max-width: 1110px;
position: relative;
margin: auto;
}

.fade_s {
-webkit-animation-name: fade;
-webkit-animation-duration: 5s;
animation-name: fade;
animation-duration: 5s;
}

@-webkit-keyframes fade_s {
from {opacity: .4} 
to {opacity: 1}
}

@keyframes fade_s {
from {opacity: .4} 
to {opacity: 1}
}


.grad .dropdown-item {
white-space: normal !important;
}



.delatnost .card .dropdown-header, .delatnost .card .dropdown-item {
white-space: normal !important;
}

.delatnost .card .dropdown-header i {
margin-bottom: .3em;
}


button:focus {
outline: none;
}

.no-anim {
animation: none !important;
}

body {
overflow-x: hidden !important;
font-family: 'Roboto', sans-serif;
color: #3B214F;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Poppins', sans-serif;
font-weight: 1000;
color: #3B214F;
}

.potpis {
font-family: 'Pacifico', cursive;
font-size: 1.5em;
}

.pacifico {
font-family: 'Pacifico', cursive;
}

.uvodni-text {
line-height: 1.5;
}

.bg-light {
background-color: #f0f0f0 !important;
}

.navbar {
background-color: white;
}

.gradient-bar {
width: 100%;
height: 1em;
}

.stt-gradient {
/*background: rgb(59,33,79);
background: -moz-linear-gradient(90deg, rgba(59,33,79,1) 0%, rgba(123,81,156,1) 35%, rgba(109,232,158,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(59,33,79,1) 0%, rgba(123,81,156,1) 35%, rgba(109,232,158,1) 100%);
background: linear-gradient(90deg, rgba(59,33,79,1) 0%, rgba(123,81,156,1) 35%, rgba(109,232,158,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b214f",endColorstr="#6de89e",GradientType=1);*/

background: linear-gradient(270deg, #3b214f, #7b519c, #6de89e, #7b519c, #3b214f);
background-size: 300% 100%;

-webkit-animation: AnimatedGradient 20s ease infinite;
-moz-animation: AnimatedGradient 20s ease infinite;
animation: AnimatedGradient 20s ease infinite;

-webkit-animation-direction: alternate-reverse;
-moz-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}

.line {
width: 7em;
height: .2em;
margin: 0 auto;
}

.navbar-brand, .pinned-ponuda-title, .ponuda-title, .pinned-vidi-btn, .vidi-btn, .cifra, .vidi-sve-btn {
font-family: 'Poppins', sans-serif;
font-weight: 1000;
}

.pinned-ponuda-title::first-line {
text-indent: 1.3em;
}

.pinned-ponuda-title a {
color: white;
}

.ponuda-title a {
color: #3B214F;
}

#pinned .info-col .small a {
color: #6DE89E !important;
}

.navbar-brand img {
width: 6em;
}

.nav-item .nav-link {
font-weight: bold;
color: #7B519C !important;
transition: all 0.2s ease-in-out;
border-left: 0;
}

.nav-item .nav-link:hover {
color: #3B214F !important;
}

.kategorije .nav-item .nav-link:hover, .gradovi .nav-item .nav-link:hover {
color: #3B214F !important;
border-left: .3em solid #6DE89E;
}

.kategorije a, .gradovi a {
font-weight: normal !important;
}

.stt-color {
color: #7B519C !important;
}

.stt-bg-color {
background-color: #7B519C !important;
color: white;
}

.stt-color-green {
color: #6DE89E !important;
}

.stt-bg-color-green {
background-color: #6DE89E !important;
}

.stt-color-dark {
color: #3B214F !important;
}

.stt-bg-color-dark {
background-color: #3B214F !important;
}

.card {
border-color: #f4f4f4;
}

#pinned {
/*height: 18em;*/
margin-bottom: 3em;
}

.info-col, .img-col {
height: 18em;
}

#karte-lg, #karte-md, #karte-sm {
margin-top: 3em;
}

#karte-lg .card, #karte-md .col-4, #karte-sm .col-12 {
/*height: 5em;*/
margin-bottom: 1em;
overflow: hidden;
}

#karte-lg .card p, #karte-md .card p, #karte-sm .card p {
padding: 1em;
}

#karte-lg a, #karte-md a, #karte-sm a {
color: #3B214F !important;
}

#karte-lg .card .col-5, #karte-lg .card .col, #karte-md .card .col-5, #karte-md .card .col, #karte-sm .card .col-5, #karte-sm .card .col {
padding: 0;
}

#karte-lg img, #karte-md img, #karte-sm img, #pinned img {
width: 100%;
height: 100%;
object-fit: cover;
}

.img-col {
width: 100%;
}

.info-col .card {
background-color: #3B214F;
color: white;
border-radius: 0;
}

.info-col .card .card-footer {
border: 0;
background-color: transparent;
}

.pinned-vidi-btn {
background-color: white;
padding: .3em .5em;
text-decoration: none;
color: #3B214F;
}

.pinned-vidi-btn:hover {
background-color: #eee;
text-decoration: none;
color: #3B214F;
}

.vidi-btn, .vidi-sve-btn {
background-color: #3B214F;
padding: .3em .5em;
text-decoration: none;
color: white;
transition: all .2s ease-in-out;
}

.vidi-btn:hover, .vidi-sve-btn:hover {
background-color: #7B519C;
text-decoration: none;
color: #eee;
}

.pinned-vidi-btn i, .vidi-btn i, .kategorije i, .vidi-sve-btn i {
vertical-align: middle;
}

.cene {
line-height: 1;
}

.stara-cena {
text-decoration: line-through;
}

.cifra {
font-size: 1.3em;
position: relative;
color: #6DE89E;
/*-webkit-animation-name: shake-x;
-webkit-animation-duration: .1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-name: shake-x;
animation-duration: .1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;*/
}

#pinned .carousel-indicators {
bottom: -3.5em !important;
}

#karte-lg .carousel-indicators, #karte-md .carousel-indicators, #karte-sm .carousel-indicators {
top: -2.5em !important;
z-index: 0;
}

#karte-lg .row, #karte-md .row, #karte-sm .row {
margin: 0 !important;
}

#karte-lg .col-12, #karte-md .col-12, .#karte-sm .col-12 {
padding: 0 !important;
}

.carousel-indicators li {
background-color: #7B519C;
height: 1em;
width: 1em;
}

#pinned .carousel-inner {
padding-top: 2.9em;
}

.akcija-badge {
width: 4em;
height: 4em;
position: absolute;
top: -1.5em;
right: -1.5em;
background-image: url("/beta/public/assets/images/akcija-badge.png");
background-size: cover;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: bold;
z-index: 2000;

/*-webkit-animation-name: cicle;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-name: cicle;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;*/
}

.akcija-badge span {
position: absolute;
font-size: 1.3em;
top: .9em;
left: 0.5em;
}

.pinned-akcija-badge {
width: 5em;
height: 5em;
position: absolute;
top: -2.5em;
right: -2.5em;
background-image: url("akcija-badge.png");
background-size: cover;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: bold;
z-index: 900;

-webkit-animation-name: badge; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: .3s; /* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-name: badge;
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}

.akcija-badge span {
/*-webkit-animation-name: badge;
-webkit-animation-duration: .3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-name: badge;
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;*/
}

.pinned-akcija-badge span {
position: absolute;
font-size: 1.8em;
top: .7em;
left: 0.3em;
}

.ponuda-card {
color: #3B214F;
/*margin-bottom: 2em;*/
transition: all .2s ease-in-out;
}

.ponuda-card .card-body {
padding-bottom: 0;
}

.ponuda-card:hover {
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}

.ponuda-card img {
height: 10em;
object-fit: cover;
}

.ponuda-card .small a {
color: #7B519C !important;
}

.vidi-btn i, .pinned-vidi-btn i, .vidi-sve-btn i {
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: .3s; /* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-name: example;
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}

.pretraga .form-control {
background-color: transparent;
border: 0;
border-radius: 0;
border-bottom: 1px solid #3B214F;
}

.pretraga .input-group-text {
background-color: transparent;
border: 0;
border-radius: 0;
border-bottom: 1px solid #3B214F;
}

.pretraga .input-group-text i {
-webkit-animation-name: rotate; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-name: rotate;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}

.pretraga .form-control:focus, .pretraga .form-control:active {
background-color: transparent;
outline: 0;
box-shadow: none !important;
border-color: #6DE89E;
}

.footer-logo {
max-width: 12em;
}

.footer .linkovi a {
color: #7B519C !important;
text-decoration: none;
}

.footer .linkovi a i {
vertical-align: middle;
}

#istaknuto {
-webkit-animation-name: flip; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-name: flip;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}

.fb-page span {
width: 100%;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {left: 0;}
to {left: -.3em;}
}

/* Standard syntax */
@keyframes example {
from {left: 0;}
to {left: -.3em;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes flip {
0% {
transform: rotateY(0deg);
color: #3B214F;
}
15% {
color: #6DE89E;
}
30% {
transform: rotateY(360deg);
color: #3B214F;
}
100% {
transform: rotateY(360deg);
}
}

/* Standard syntax */
@keyframes flip {
0% {
transform: rotateY(0deg);
color: #3B214F;
}
15% {
color: #6DE89E;
}
30% {
transform: rotateY(360deg);
color: #3B214F;
}
100% {
transform: rotateY(360deg);
}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes badge {
from {
transform: scale(.9,.9);
}
to {
transform: scale(1.1,1.1);
}
}

/* Standard syntax */
@keyframes badge {
from {
transform: scale(.9,.9);
}
to {
transform: scale(1.1,1.1);
}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes shake-x {
from {
left: 0em;
}
to {
left: .1em;
}
}

/* Standard syntax */
@keyframes shake-x {
from {
left: 0em;
}
to {
left: .1em;
}
}

@-webkit-keyframes AnimatedGradient {
0%{background-position:0% 62%}
50%{background-position:100% 39%}
100%{background-position:0% 62%}
}
@-moz-keyframes AnimatedGradient {
0%{background-position:0% 62%}
50%{background-position:100% 39%}
100%{background-position:0% 62%}
}
@keyframes AnimatedGradient {
0%{background-position:0% 62%}
50%{background-position:100% 39%}
100%{background-position:0% 62%}
}

@-webkit-keyframes rotate {
0% {
transform: rotateY(0deg);
color: #3B214F;
}
100% {
transform: rotateY(360deg);
}
}

/* Standard syntax */
@keyframes rotate {
0% {
transform: rotateY(0deg);
color: #3B214F;
}
100% {
transform: rotateY(360deg);
}
}

@-webkit-keyframes cicle {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}

/* Standard syntax */
@keyframes cicle {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}

/*#karte-md, #karte-lg {
display: none;
}

@media only screen and (max-width: 991px) {
#karte-md {
display: block;
}
#karte-lg {
display: none;
}
}

@media only screen and (min-width: 992px) {
#karte-md {
display: none;
}
#karte-lg {
display: block;
}
}*/

@media only screen and (max-width: 575px) {
.info-col {
height: 15em;
}

.img-col {
height: 12em;
}
}

.scrollToTop {
display: inline-block;
position: fixed;
bottom: 1em;
right: 1em;
z-index: 9000;
display: none;
}

.scrollToTop:hover {
cursor: pointer;
}

/* DODATO */
.linkovi .fab {
color: #7B519C;
transition: all .2s ease-in-out;
}

.linkovi .fab:hover {
color: #6DE89E;
}

.zodiac-sign {
  width: 50%;
  height: 50%;
}

.kat-item .kat-link img {
  font-size:2em;
  border: 2px solid #6DE89E;
  border-radius: 50%;
  padding: .2em;
  margin-bottom: .15em;
  transition: all 0.2s ease-in-out;
}

.kat-item .kat-link i {
  font-size:2em;
  border: 2px solid #6DE89E;
  border-radius: 50%;
  padding: .2em;
  margin-bottom: .15em;
  transition: all 0.2s ease-in-out;
}

.kat-item {
  margin-bottom: 1.5em;
  padding-left: 0!important;
  padding-right: 0!important;
}

.kat-item a {
  text-decoration: none;
  color: #7B519C;
}

.kat-item a:hover {
  color: #3B214F !important;
}

.kat-item a:hover:hover i {
  background-color: #6DE89E;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.kat-item a:hover:hover img {
  background-color: #6DE89E;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.pagination .page-link {
  background-color: transparent !important;
  border: 0;
  color: #3B214F;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0px !important;
  transition: all .2s ease-in-out;
}

.pagination .page-link:hover {
  border-bottom: 3px solid #6DE89E;
}

.pagination .page-link:active, .pagination .page-link:focus {
  box-shadow: none !important;
}

.pagination .page-link i {
  vertical-align: middle;
}

.pagination .page-item.active .page-link {
  border-top: 3px solid transparent !important;
  border-bottom: 3px solid #3B214F !important;
  color: #3B214F !important;
  font-weight: bold;
}