/*---------------------------------------------------------------------------------

 Theme Name:   Banana_code
 Theme URI:    https://banana.com.hr
 Description:  Banana Code child Theme
 Author:       Banana_code
 Author URI:   https://banana.com.hr
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/* Initially hide the span with class "show-hover" */
.hover-desc .show-hover {
    display: none;
}

/* Show the span when the parent element is hovered */
.hover-desc:hover .show-hover {
    display: inline; /* or display: block; depending on your layout needs */
}

.hover-desc {
   cursor:pointer;
}




#eutable.eutabela {
    display: none;
}

/*place button modules next to each other in the same column*/
.b-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}


.ctdag-lightbox .mfp-bottom-bar { 
display:none;
}



/*disable parallax affect*/
.b-background-filter .et_pb_parallax_css {
	background-attachment: inherit !important;
	background-position: 50%;
}


/*apply a blur or other filter effect to the background image*/
.b-background-filter .et_pb_parallax_css {
-webkit-animation: summersaleburns 30s ease-out both; /* You can change the duration by changing the 30s here */
     animation: summersaleburns 30s ease-out both; /* You can change the duration by changing the 30s here */
     animation-iteration-count: infinite; /* This makes the effect loop forever */
}
.b-ken-burns {
     -webkit-animation: summersaleburns 30s ease-out both; /* You can change the duration by changing the 30s here */
     animation: summersaleburns 30s ease-out both; /* You can change the duration by changing the 30s here */
     animation-iteration-count: infinite; /* This makes the effect loop forever */
}
/* Divi Engine Ken Burns Animation Keyframes */
 @-webkit-keyframes summersaleburns {
     0% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
     50% {
         -webkit-transform: scale(1.25) translate(20px, 15px);
         transform: scale(1.25) translate(20px, 15px);
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
    }
     100% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
}
 @keyframes summersaleburns {
     0% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
     50% {
         -webkit-transform: scale(1.25) translate(20px, 15px);
         transform: scale(1.25) translate(20px, 15px);
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
    }
     100% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 84% 84%;
         transform-origin: 84% 84%;
    }
}



.b-vertical-menu .et_pb_menu_inner_container,
.b-vertical-menu .et_pb_menu__wrap,
.b-vertical-menu .et_pb_menu__menu,
.b-vertical-menu.et_pb_menu .et_pb_menu__menu>nav,
.b-vertical-menu.et_pb_menu .et_pb_menu__menu>nav>ul {
    display: block;
}

.b-vertical-menu .et_mobile_nav_menu {
    display: none;
}

#page-container .b-vertical-menu ul.sub-menu {
    position: relative;
    visibility: visible;
    opacity: 1;
    top: 0;
    left: 0;
    width: auto;
    border-top: none;
    box-shadow: none;
    display:none;
    transition: none;
}

#page-container .b-vertical-menu ul.sub-menu a {
    text-transform: none;
    background:none;
}

#page-container .b-vertical-menu li {
    display: block;
    width: fit-content;
}

#page-container .b-vertical-menu li a {
    width:fit-content;
    display: inline-block;
}

.b-vertical-menu .menu-item-has-children>a:first-child:after {
    display: none;
}

span.dl-sub-toggle {
    font-family: 'ETmodules';
    display: inline-block;
    line-height: 18px;
    text-align: center;
    width: 20px;
    height: 20px;
    border: 0px solid #666;
    transform: scale(1.2);
    transition: .3s ease;
    cursor:pointer;
}

.toggled > span.dl-sub-toggle {
    transform: scale(1.2) rotate(180deg);
}



@media (max-width:980px) {
#page-container .b-vertical-menu ul.sub-menu a {
  font-size:14px;
}
}







.gradient-overlay:before {
    content: "";
    position: absolute;
    z-index: 1;
    background: inherit;
    top: 0;
    bottom: 0;
    width: 100%;
}

.edo h1 { 
font-family: 'Edo'!important;
}


@media (max-width:980px) {
	.reverse-columns-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
}



/* HOTSPOT */

:root {
  --button-radius: 24px;
  --label-padding-x: calc(var(--button-radius) * 1);
  --label-border-radius: 2px;
  --label-fade: 0.1s;
  --color-button: #ff6000;
  --color-button-hover: #ff774c;
  --color-text: #333;
  --color-heading-background: #555;
}





.notes {
  margin: auto;
  padding: 2rem 1.2rem 0;
  max-width: 35rem;
  font-family: "Open Sans", sans-serif;
  text-align: center;
}

.hm-container {
  width: 100%;
  padding: 1em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}

.lg-container {
max-width:1000px;
  position: relative;
  margin: 1rem;
  padding: 0;
}

.lg-image {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: scale-down;
}

.lg-hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.lg-hotspot:hover .lg-hotspot__button,
.lg-hotspot:active .lg-hotspot__button {
  border-color: var(--color-button-hover);
}

.lg-hotspot--selected {
  z-index: 999;
}

.lg-hotspot--selected .lg-hotspot__label {
  opacity: 1;
}

.lg-hotspot__button {
  height: 30px;
  width: 30px;
  padding: 0px;
  border-radius: 100%;
  border: 10px solid var(--color-button);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 999;
  animation: button-pulse 7s ease-in-out infinite;
  cursor: pointer;
}

.lg-hotspot__button:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  content: "";
  display: block;
  height: var(--button-radius) * 0.7;
  width: var(--button-radius) * 0.7;
  border-radius: 100%;
  border: 3px solid white;
  background-color: var(--color-button);
  transition: border-color 1s linear;
}

.lg-hotspot__label {
  position: absolute;
  padding: 0 0 1.1em 0;
  width: 16em;
  max-width: 50vw;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: "Open Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.45em;
  z-index: -1;
  border-radius: var(--label-border-radius);
  user-select: none;
  opacity: 0;
  transition: all var(--label-fade) linear;
}

.lg-hotspot__label h4 {
  margin: 0;
  padding: 0.65em var(--label-padding-x);
  background-color: var(--color-heading-background);
  font-size: 1.1em;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: white;
  border-radius: var(--label-border-radius) var(--label-border-radius) 0 0;
}

.lg-hotspot__label p {
  margin: 0;
  padding: 1.1em var(--label-padding-x) 0 var(--label-padding-x);
  color: var(--color-text);
}

.lg-hotspot--top-left .lg-hotspot__label {
  top: var(--button-radius);
  left: var(--button-radius);
}

.lg-hotspot--top-right .lg-hotspot__label {
  top: var(--button-radius);
  right: var(--button-radius);
}

.lg-hotspot--bottom-right .lg-hotspot__label {
  right: var(--button-radius);
  bottom: var(--button-radius);
}

.lg-hotspot--bottom-left .lg-hotspot__label {
  bottom: var(--button-radius);
  left: var(--button-radius);
}

@keyframes button-pulse {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  40% {
    transform: scale(1.15, 1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}





@media all and (max-width: 980px) {
	html,
	body {
		overflow-x: hidden;
	}
	body {
		position: relative
	}
}