/* Right margin on iOS fix */
html, body {overflow-x: clip; scroll-behavior: smooth;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

html * {font-family: 'Montserrat', Arial, sans-serif; color: #003165;} 
.row:before, .row:after {display: none;} 

/* MY RULES */
img.center {display: block; margin: 0 auto;}
p.white {color: #fff;}
p.cyan {color: #00cccc;}
p.large {font-size: 1.5em;}
p.medium {font-size: 1.25em;}
p.small {font-size: .8em;}
p.tiny {font-size: .65em;}
p.left {text-align: left !important;}
p.right {text-align: right !important;}
p.center {text-align: center;}
.space_above_xt {margin-top: 5px;}
.space_above_t {margin-top: 10px;}
.space_above_s {margin-top: 20px;}
.space_above_m {margin-top: 40px;}
.space_above_l {margin-top: 60px;}
.space_below_xt {margin-bottom: 5px;}
.space_below_t {margin-bottom: 10px;}
.space_below_s {margin-bottom: 20px;}
.space_below_m {margin-bottom: 40px;}
.space_below_l {margin-bottom: 60px;}
.space_left_xt {margin-left: 5px;}
.space_left_t {margin-left: 10px;}
.space_left_s {margin-left: 20px;}
.space_left_m {margin-left: 40px;}
.space_left_l {margin-left: 60px;}

a {text-decoration: none; color: inherit; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;} 
a:hover,
a:focus {-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; color: #003165;}
.main p a,
.main ul li a,
.main ol li a{font-weight: 700; color:#0f5fb3;}
section.news .container a{font-weight: 400;}

.logo {position: relative; display: flex; align-items: center;} 
.logo hr {width: 2px; height: 70px; background-color: #003165; margin-right: 10px;} 
.logo h3 {font-size: 13px; text-transform: uppercase; font-weight: 900; color: #003165;} 
.logo h6 {text-align: center; text-transform: uppercase;} 

[class^="fa-"], [class*=" fa-"] {text-transform: none;transition: all .3s ease;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

 #burger-button {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 20px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#burger-button span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #003165;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#burger-button span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#burger-button span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#burger-button span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#burger-button.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#burger-button.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#burger-button.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}


/* Main menu */
.fixed-menu{position: fixed; top: 0; right: 0; left: 0; z-index: 20; background-color: #fff;}
.menu::before{content:'mobile';display:none}
.menu .main-nav{display:none;}
.menu .menu-wrapper{position:absolute;top:100px;left:0;width:100%;max-height: 700px; background-color: rgba(255, 255, 255, .95);padding: 0 5%; z-index: 11; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms ease-out;}
.menu .menu-wrapper ul{list-style-type: none;}
.menu .menu-wrapper .dropdown-list{overflow: hidden;}
.menu.nav-open .menu-wrapper .dropdown-list{overflow: scroll;}
.menu.nav-open .menu-wrapper{padding: 1.2em 5%; grid-template-rows: 1fr;}
.menu.nav-open .menu-wrapper ul{list-style-type: none;  }
.menu.nav-open .menu-wrapper li{color:#4B5675;}
.menu.nav-open .menu-wrapper ul li .fa-arrow-right {display: none;}
.menu .dropdown-list>ul>li>a{margin-top:1.5em; text-transform: uppercase; font-weight: 700;}
.menu .content li::after{clear:both;content:"";display:block}
.menu .menu-wrapper .dropdown-list .dropdown .content{display: none;}
.menu .menu-wrapper .dropdown-list .dropdown a hr{width:90%;}

.header{position:relative; z-index:1;}
.header img{position: relative; width:100%; object-fit: contain; opacity: .5; z-index: -12;} 
.header .caption{margin: -170px 0 100px 0; }
.header h1{font-weight: bold; font-size:1.1em; text-align:center; line-height: 20pt; text-transform: uppercase;}
.header p{font-size:1em; text-align:center; line-height: 20pt;}

h2 {font-size:1.2em; font-weight: bold; color: #003165; text-transform: uppercase; margin-bottom: 1rem;}
h3 {font-size: 1em; font-weight: bold; color: #003165; margin-bottom: 1rem;}

hr.wide {margin-top: 0; margin-bottom:0.5rem; border-top: 10px solid #003165; opacity: 1; width:128px; position:relative;}
.font-icons{align-items: center; justify-content: center;}

/* PROGRAM */
.program img{width: 100%; height:100%; object-fit: cover;}

/* PRIJAVA */
.prijava img{width: 100%; height:100%; object-fit: cover;}

/* BIOLOGIJA */
.biologija {margin-top: 7rem; position: relative; /* zbog apsolutnog pozicioniranja slike */overflow: visible; /* omogućava da IMG izlazi van diva */}
.biologija img.bg-img {position: absolute;top: -140px; left: 50%;transform: translateX(-50%);width: auto;height: auto;max-width: 100%;object-fit: contain;z-index: -1; pointer-events: none; /* da ne blokira klikove */}
ol li{margin-bottom: .7rem;}

/* HEMIJA */
.hemija {margin-top: 4rem; position: relative; /* zbog apsolutnog pozicioniranja slike */overflow: visible; /* omogućava da IMG izlazi van diva */}
.hemija img.bg-img {position: absolute;top: -50px; left: 50%;transform: translateX(-50%);width: auto;height: auto;max-width: 100%;object-fit: contain;z-index: -1; pointer-events: none; /* da ne blokira klikove */}

/* BIOLOGIJA + HEMIJA */
img.predavac{width:100%}
p.ime{font-size: 1.2em; font-style:italic; text-align: center; margin-top: 1rem; margin-bottom: 0}
p.titula{font-size: 1em; text-align: center;}
p.biografija{font-size: .9em; font-style: normal; line-height: 2; margin-top: 2rem}

/* CENA */
.payment-wrapper {max-width: 1200px;}
.payment-slip {background-color: #ffffff;border-radius: 18px;border: 1px solid #dde1e6;padding: 2.5rem 2.25rem;box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);}
.payment-field-label {font-size: 0.9rem;font-weight: 600;color: #6b7280;margin-bottom: 0.25rem;}
.payment-field-box {background-color: #f5f6f8;border-radius: 4px;min-height: 3rem;padding: 0.75rem 1rem;font-size: 1.05rem;color: #1f2933;}
.payment-field-box em {font-style: normal;color: #0a4c9a;}
.payment-footer {margin-top: 2rem;font-weight: 700;letter-spacing: 0.06em;font-size: 1.05rem;color: #0b3675;text-transform: uppercase;}

/* UTISCI */
.utisci {position: relative;}
/* Top-left icon */
.utisci::before {content: "\ef06";/* Unicode for fi-rr-quote-right */font-family: 'uicons-bold-rounded';font-size: 100px;color: #003165;opacity: 0.15;position: absolute;top: 10px;left: 10px;z-index: 0;pointer-events: none;	animation: fancySpin 12s infinite ease-in-out;transform-origin: center;pointer-events: none;}
/* Bottom-right icon */
.utisci::after {content: "\ef06";/* same icon again */font-family: 'uicons-bold-rounded';font-size: 100px;color: 003165;opacity: 0.15;position: absolute;bottom: 10px;right: 15px;z-index: 0;pointer-events: none;	animation: fancySpinReverse 15s infinite ease-in-out;transform-origin: center;pointer-events: none;}

@keyframes fancySpin {
    0%   { transform: rotate(0deg) scale(1) translate(0,0); opacity: 0.25; }
    20%  { transform: rotate(15deg) scale(1.04) translate(2px, -3px); }
    40%  { transform: rotate(-10deg) scale(0.98) translate(-3px, 1px); opacity: 0.32; }
    60%  { transform: rotate(25deg) scale(1.05) translate(4px, 3px); }
    80%  { transform: rotate(-5deg) scale(1.02) translate(1px, -2px); }
    100% { transform: rotate(360deg) scale(1) translate(0,0); opacity: 0.25; }
}

/* REVERSED VERSION FOR THE BOTTOM ICON */
@keyframes fancySpinReverse {
    0%   { transform: rotate(0deg) scale(1); opacity: 0.25; }
    25%  { transform: rotate(-20deg) scale(1.03); }
    50%  { transform: rotate(10deg) scale(1.05); opacity: 0.3; }
    75%  { transform: rotate(-15deg) scale(1.02); }
    100% { transform: rotate(-360deg) scale(1); opacity: 0.25; }
}


/* FOOTER */
footer {position: relative; background: #F5F5F5; padding-bottom:20px; flex-shrink: 0;} 
.logo-footer {position: absolute; top: 0; left: 0; transform: rotate(45deg) translate(-30%, 30%); width: 75%;height: auto;max-width: 100%;object-fit: contain; pointer-events: none; opacity:.1; z-index:1;}
footer .fa-instagram::before, .fa-tiktok::before, .fa-youtube::before, .fa-linkedin::before, .fa-twitter::before, .fa-facebook::before {font-size: 28px; color: #fff;} 
footer .font-icons i{font-size: 18px;}
footer .social i{font-size: 30px;}

/* NAVIGATION ICON ROTATION ANIMATION */
.nav-link .rotate-180 {display: inline-block;transition: transform 0.3s ease;}

.nav-link:hover .rotate-180 {transform: rotate(180deg);}

/* carousel settings */
.splide .splide__arrow svg {fill: #003165;}
.splide .splide__pagination__page.is-active {background: #003165;}
.splide__slide img {width: 100%;height: 100%;object-fit: cover;}

/* PARTICLES */ 
#particles-js{position:relative; width: 100%; height: 100%;background: url("../img/prijava.1ff8d2f43d04.svg") no-repeat center center;}


/* Slightly tighter layout on small screens */
        @media (max-width: 575.98px) {
            .payment-slip {
                padding: 1.5rem 1.25rem;
                border-radius: 16px;
            }

            .payment-field-box {
                font-size: 0.98rem;
            }

            .payment-footer {
                font-size: 0.95rem;
                text-align: left;
            }
        }


























/* FORMS */ 
form input[type=text], form select, form textarea{width:100%; background-color: transparent; border: none; padding: 10px; border-bottom: 1px solid #BFBFBF;}
form select {min-width: 218px; color: #757575}
form .button {padding: 10px; background-color: transparent; border: 2px solid #003165; color:fff; font-size: 14px; text-transform: uppercase; width: 100%;}
form .button:disabled, form .button[disabled]{cursor: not-allowed; border: 2px solid red; color:red;}
label.error{font-size:1em;	background-color:rgba(255,0,0,0.6); font-weight:bold; color:white; padding:3px 6px; max-width: 30em; margin-top: 5px;}





.back-to-top {position: fixed; bottom: 25px; right: 25px; display: none;}
.back-to-top i{color: #fff;}

#map {position:relative; z-index: 10; height: 600px;}





/* MD BREAKPOINT */ 
@media (min-width: 768px){
}

/* XXL BREAKPOINT */ 
@media (min-width: 1200px){
    .nav-item{padding: 0 1em;}
	.nav-link {display: block; line-height:40px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity .2s; transition: opacity .2s; color: #003165;  text-align: center;} 
    .nav-link i{color: #003165; text-align: center}
    nav.navbar{position:relative;z-index:10;}
    .header{position:relative; z-index:1; margin-top: -130px;}
    .header img{position:relative; opacity: .3; z-index: -12; } 
    .header .caption{margin: -750px 0 300px 0;}
    .header .caption h1{font-size: 3em; line-height: 1.5em;}
    .header .caption p{font-size: 2em; line-height: 1.5em;}
    .header .caption a{color:#003165;}
    .biologija {margin-top: 2rem;}
    .hemija{margin-top: 2rem;}
    .logo-footer {position: absolute; top: 0; left: 0; transform: rotate(45deg) translate(-30%, 30%); width: 40%;height: auto;max-width: 100%;object-fit: contain; pointer-events: none; opacity:.1; z-index:1;}

/* SCROLL DOWN */
.pointer a {display: inline-block;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);color: #fff;letter-spacing: .1em;text-decoration: none;transition: opacity .3s;}
.pointer a:hover {opacity: .5;}
#scroll {margin-top: 10rem;}
#scroll a {padding-top: 80px;}
#scroll a span {position: absolute;top: 0;left: 50%;width: 24px;height: 24px;margin-left: -12px;border-left: 1px solid #003165;border-bottom: 1px solid #003165;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: sdb07 2s infinite;animation: sdb07 2s infinite;opacity: 0;box-sizing: border-box;}
#scroll a span:nth-of-type(1) {-webkit-animation-delay: 0s;animation-delay: 0s;}
#scroll a span:nth-of-type(2) {top: 16px;-webkit-animation-delay: .15s;animation-delay: .15s;}
#scroll a span:nth-of-type(3) {top: 32px;-webkit-animation-delay: .3s;animation-delay: .3s;}
    
@-webkit-keyframes sdb07 {
    0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes sdb07 {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
}