/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
@font-face {
  font-family: "BN-Jinx";
  src: url('../../fonts/BN-Jinx/BN-Jinx.ttf.woff') format("woff"), url('../../fonts/BN-Jinx/BN-Jinx.ttf.svg#BN-Jinx') format("svg"), url('../../fonts/BN-Jinx/BN-Jinx.ttf.eot'), url('../../fonts/BN-Jinx/BN-Jinx.ttf.eot#iefix') format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
.g-promo {
  font-family: "BN-Jinx" !important;
  font-size: 5.5rem;
  -webkit-text-stroke: 1.8px black;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
}
.g-animatedblock-title {
  font-size: 3rem !important;
  /* Promijenite velicinu prema potrebi */
}
.g-animatedblock-image .g-animatedblock-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.29);
  z-index: 0;
}
.g-tags li, .g-gridpromogallery-item-tag {
  background: #f7c500;
}
.g-gridcontent-wrapper {
  align-items: center;
}
.g-gridcontent-wrapper .g-gridcontent-item-wrapper {
  border: none !important;
}
.grid-sponzori img {
  max-height: 100px;
}
#g-feature {
  background: #f5f5f5 url('../../../../images/sampledata/dh_buzet3.jpg') top center no-repeat;
  background-size: cover;
  position: relative;
  z-index: 100;
}
#g-feature:before {
  background: linear-gradient(rgba(58, 122, 217, 0.35), rgba(58, 122, 217, 0.5));
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
#g-feature a {
  color: white;
  font-weight: bold;
}
#g-feature a:hover {
  color: inherit;
}
.g-home #g-feature, .g-homepositions #g-feature {
  padding: 8rem 0 3rem 0;
}
.g-home #g-feature .g-superpromo, .g-homepositions #g-feature .g-superpromo {
  color: white;
}
.g-home #g-feature .g-textpromo, .g-homepositions #g-feature .g-textpromo {
  width: 75%;
}
#vertical-spacer:after {
  background: rgba(136, 136, 136, 0.25);
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  content: "";
  height: 5px;
}
.vertical-spacer {
  height: 5rem;
}
.g-infolist-item-desc * {
  margin: 0 !important;
  font-size: 0.8rem !important;
}
.limited-text {
  display: -webkit-box;
  /* Omogućuje fleksibilni prikaz */
  -webkit-box-orient: vertical;
  /* Postavlja usmjerenje okvira na vertikalno */
  -webkit-line-clamp: 2;
  /* Ograničava broj redaka na 3 */
  overflow: hidden;
  /* Sakriva tekst koji prelazi ograničenje */
  text-overflow: ellipsis;
  /* Dodaje "..." kada tekst prelazi granicu */
}
.g-infolist-item-desc, .news-see-more {
  font-size: 0.8rem !important;
  padding-top: 0.1rem !important;
}
.g-infolist-item-title {
  font-size: 0.89rem !important;
}
.g-infolist .g-infolist-link {
  margin-top: 0.1rem !important;
}
.g-gridpromogallery-item {
  background-color: #f7c500;
}
.bg-transparent {
  background: #ffffff00 !important;
}
.strava-section {
  display: flex !important;
  flex-direction: row;
  flex-basis: 0;
  justify-content: space-evenly;
  /* Flexbox Layout */
  /* Plavi box (prazno polje) */
  /* Iframe */
}
.strava-section .strava-quote {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  padding: 2rem;
}
.strava-section .flex-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.strava-section .flex-column {
  display: flex;
  flex-direction: column;
  background-color: #3a7ad9;
  border-radius: 10px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}
.strava-section .flex-row-item {
  display: flex;
  flex: 1;
  max-height: fit-content;
  gap: 10px;
}
.strava-section .blue-box {
  width: 200px;
}
.strava-section .blue-box.large {
  height: 454px;
  width: 300px;
}
.strava-section .iframe {
  flex: 0 0 300px;
}
.strava-text {
  color: #f7c500;
}
.strava-quote h1 {
  color: #3a7ad9;
}
/* Media query za mobilnu verziju */
@media screen and (max-width: 768px) {
  .strava-section {
    flex-direction: column;
    /* Elementi će biti postavljeni jedan ispod drugog */
    align-items: center;
    /* Opcionalno, poravnaj sadržaj po sredini */
  }
  .strava-quote, .flex-column {
    width: 100%;
    /* Širina oba elementa na mobilnim uređajima */
    text-align: center;
    /* Opcionalno, centriranje teksta */
  }
}
/* Banner container */
.custom-banner {
  background-color: #3a7ad9;
  /* Dominant blue color */
  color: white;
  /* White text for contrast */
  padding: 90px 25px;
  /* Balanced padding for spacious design */
  text-align: center;
  border-radius: 25px;
  /* Rounded corners for smooth appearance */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  /* Deep shadow for a floating effect */
  position: relative;
  overflow: hidden;
  /* Keeps everything tidy */
}
/* Banner content container */
.custom-banner-content {
  max-width: 850px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Banner heading */
.custom-banner-heading {
  font-size: 50px;
  /* Larger heading for visual impact */
  font-weight: 700;
  /* Bold for emphasis */
  letter-spacing: 3px;
  /* Slight letter-spacing for a modern touch */
  text-transform: uppercase;
  /* Uppercase text for emphasis */
  margin-bottom: 15px;
  color: #fff;
  /* White text */
  position: relative;
  z-index: 1;
}
/* Banner description */
.custom-banner-description {
  font-size: 20px;
  /* Balanced font size */
  font-weight: 300;
  /* Light font weight for a clean look */
  color: #f7f7f7;
  /* Lighter text for contrast */
  line-height: 1.6;
  /* Easy-to-read line spacing */
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  text-align: center;
}
/* Button styling */
.custom-banner-btn {
  background-color: #f7c500;
  /* Bright yellow for contrast */
  color: #3a7ad9;
  /* Blue text */
  padding: 18px 50px;
  /* Generous padding for the button */
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  border-radius: 50px;
  /* Rounded button */
  display: inline-block;
  transition: all 0.4s ease-in-out;
  /* Smooth transition for hover */
  text-transform: uppercase;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  /* Soft shadow for depth */
  position: relative;
  z-index: 1;
}
.custom-banner-btn:hover {
  background-color: #3a7ad9;
  /* Blue on hover */
  color: white;
  /* White text on hover */
  transform: translateY(-6px);
  /* Lift effect */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  /* Stronger shadow on hover */
}
.custom-banner-btn:active {
  transform: translateY(2px);
  /* Small press effect */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  /* Softer shadow on click */
}
/* Add a floating circle element for modern touch */
.custom-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 400px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.2);
  animation: moveCircle 8s infinite linear;
  z-index: 0;
}
/* Circle animation */
@keyframes moveCircle {
  0% {
    transform: translateX(-100%) translateY(0);
  }
  50% {
    transform: translateX(100%) translateY(200%);
  }
  100% {
    transform: translateX(-100%) translateY(0);
  }
}
#g-extension {
  /* ==== Slider Style === */
  /* ==== Slick Slider Css Ruls === */
}
#g-extension .g-container {
  padding: 6rem 0rem;
}
#g-extension .img-fill {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}
#g-extension .img-fill img {
  height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none;
}
#g-extension *, #g-extension *:before, #g-extension *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}
#g-extension .Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}
#g-extension .blocks-box, #g-extension .slick-slider {
  margin: 0 0;
  padding: 0 !important;
}
#g-extension .slick-slide {
  float: left;
  transition: opacity 0.5s ease-in-out;
  padding: 0px;
}
#g-extension .g-slider {
  position: relative;
}
#g-extension .g-slider .slick-next {
  position: absolute;
  top: 50%;
  right: -5rem;
  width: 45px;
  height: 45px;
  background: rgba(247, 197, 0, 0.5);
  border: 0 none;
  margin-top: -22.5px;
  text-align: center;
  font: 20px/45px FontAwesome;
  color: #FFF;
  z-index: 5;
}
#g-extension .g-slider .slick-next:before {
  content: "";
}
#g-extension .g-slider .slick-prev {
  position: absolute;
  top: 50%;
  left: -5rem;
  width: 45px;
  height: 45px;
  background: rgba(247, 197, 0, 0.5);
  border: 0 none;
  margin-top: -22.5px;
  text-align: center;
  font: 20px/45px FontAwesome;
  color: #FFF;
  z-index: 5;
}
#g-extension .g-slider .slick-prev:before {
  content: "";
}
#g-extension .Modern-Slider .img-fill {
  height: 100vh;
  background: #000;
}
#g-extension .Modern-Slider .img-fill:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
}
#g-extension .Modern-Slider .img-fill img {
  filter: blur(5px);
}
#g-extension .Modern-Slider .img-fill .info {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 3;
  top: 30%;
  padding: 0 20px;
}
#g-extension .Modern-Slider .img-fill h3 {
  font: 22px/50px RalewayB;
  color: #FFF;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  visibility: hidden;
  text-transform: uppercase;
}
#g-extension .Modern-Slider .img-fill p {
  max-width: 650px;
  margin: auto;
  margin-top: 15px;
  font: 14px/22px NeoSansR;
  color: #FFF;
  height: 66px;
  text-align: justify;
  overflow: hidden;
  visibility: hidden;
  text-transform: capitalize;
}
#g-extension .g-slider .slick-active h3 {
  animation: fadeInDown 1s both 0.5s;
  visibility: visible;
}
#g-extension .g-slider .slick-active p {
  animation: fadeInUp 1s both 1s;
  visibility: visible;
}
#g-extension .slick-slider {
  position: relative;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
#g-extension .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#g-extension .slick-list:focus {
  outline: none;
}
#g-extension .slick-list.dragging {
  cursor: hand;
}
#g-extension .slick-slider .slick-track, #g-extension .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#g-extension .slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
#g-extension .slick-track:before, #g-extension .slick-track:after {
  display: table;
  content: "";
}
#g-extension .slick-track:after {
  clear: both;
}
#g-extension .slick-loading .slick-track {
  visibility: hidden;
}
#g-extension .slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
#g-extension .slick-slide.dragging img {
  pointer-events: none;
}
#g-extension .slick-initialized .slick-slide {
  display: block;
}
#g-extension .slick-loading .slick-slide {
  visibility: hidden;
}
#g-extension .slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.g-social-text {
  font-size: 0.8rem;
}
#membershipFormDiv {
  background: #3a7ad9;
  color: #efefef;
  position: relative;
  z-index: 100;
  background: #3a7ad9 url('../../../../images/DH%20Buzet/dh_buzet1.jpg?677d9cbe') top center no-repeat;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}
#membershipFormDiv:before {
  background: linear-gradient(rgba(58, 122, 217, 0.35), rgba(58, 122, 217, 0.5));
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
#membershipForm {
  /* background: #ffffff;*/
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
}
#membershipForm h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #ffffff;
}
#membershipForm label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #ffffff;
}
#membershipForm input, #membershipForm select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 14px;
}
#membershipForm .row {
  display: flex;
  gap: 10px;
}
#membershipForm .row .half-width {
  flex: 1;
}
#membershipForm input:focus, #membershipForm select:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
#membershipForm button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#membershipForm button:hover {
  background-color: #0056b3;
}
#membershipForm .required {
  color: red;
}
#membershipForm .error {
  color: red;
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  #membershipForm .row {
    flex-direction: column;
  }
  #membershipForm .row .half-width {
    flex: none;
    width: 100%;
  }
}
#membershipButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 15px;
  margin: 20px 0;
}
#membershipButtons button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#membershipButtons button:hover {
  background-color: #0056b3;
}
#membershipButtons button.active {
  background-color: #f7c500;
}
.membership-code-img {
  display: none;
  max-width: 100%;
  margin: 20px 0 0;
  /* margin: 20px auto 0; */
  border: 1px solid #ccc;
  border-radius: 5px;
}
#membershipLeftDiv #basic {
  display: block;
}
/*# sourceMappingURL=custom_16.css.map */