@font-face {
  font-family: 'icons';
  src: url('/fonts/icons.eot');
  src: url('/fonts/icons.eot#iefix') format('embedded-opentype'),
       url('/fonts/icons.woff2') format('woff2'),
       url('/fonts/icons.woff') format('woff'),
       url('/fonts/icons.ttf') format('truetype'),
       url('/fonts/icons.svg#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

html { scroll-behavior: smooth; }
* { font-family: "Barlow Condensed", sans-serif; text-decoration: none; outline: none; text-wrap: pretty; }
body { min-height: 100vh; background: url('images/background.jpg') no-repeat center; background-size: cover; background-attachment: fixed; padding: 0; margin: 0; }

main { width: 100%; min-height: 100vh; position: relative; overflow: hidden; }

a { color: #fff; }

nav { display: flex; justify-content: space-between; margin-block: 3vh 5vh; align-items: center; max-width: 60vw; margin-inline: auto; }
/* nav > a { aspect-ratio: 1439 / 419; background: url('images/pan-logo.svg'); width: 6vw; text-indent: -99999px; overflow: hidden; } */
nav > a { aspect-ratio: 503 / 236; background: url('images/pan-logo.webp'); background-size: cover; width: 6vw; text-indent: -99999px; overflow: hidden; }
nav > div { display: flex; gap: 1.6vw; font-size: 1.6vw; font-weight: 300; }
nav > div > a { color: #f4e0a5; transition: .3s color ease-in-out; }
nav > div > a:hover { color: #fff; }

.balance { text-wrap: balance; }
.intro strong { color: #f4e0a5; }

.klas { position: absolute; top: 20vh; left: -30vw; width: 70vw; height: auto; opacity: .2; z-index: -3; }

.lijeva { position: absolute; top: 40vh; left: -14vw; pointer-events: none; }
.lijeva img { position: relative; width: 35vw; height: auto; z-index: -1; }
.lijeva:before,
.lijeva:after { content: ''; position: absolute; top: 0; left: 14vw; width: 28vw; height: calc(688 / 260 * 28vw); transform: rotate(28deg); }

.desna { position: absolute; top: 16vh; right: 10vw; pointer-events: none; }
.desna img { position: relative; width: 14vw; height: auto; z-index: -1; } 
.desna:before,
.desna:after { content: ''; position: absolute; top: -4vh; left: 3vh; width: 16vw; height: calc(688 / 260 * 16vw); }

.lijeva:before,
.desna:before { background: url('images/sjena.webp') no-repeat center; background-size: cover; mix-blend-mode: multiply; -webkit-mix-blend-mode: multiply; opacity: .6; z-index: -2; }
.lijeva:after,
.desna:after { background: url('images/refrakcija.webp') no-repeat center; background-size: cover; mix-blend-mode: overlay; -webkit-mix-blend-mode: overlay; opacity: 1; z-index: -3; }

.desna:before, 
.desna:after {
	transform: rotate(-4deg);
	top: 2vw;
	left: 3vw;
}

.content { width: 42vw; margin: 0 auto 3vw auto; text-align: center; min-height: 80vh; display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center; }
.naslov { width: 42vw; height: auto; margin-inline: auto; margin-top: 6vw; margin-bottom: 3vw; display: block; }

h1, h2, h3, p, label { color: #fff; }
h1, h2, label { text-transform: uppercase; text-wrap: balance; }
h1, h2.h1 { font-size: 3vw; }
h2 { font-size: 2.5vw; }
h3 { font-size: 2vw; }
p, label, input, .btn { font-size: 1.6vw; }

label { display: block; font-weight: 500; }
input { transition: .3s all ease-in-out; }
input[type="text"] { text-align: center; background: #fff; padding: .4vw 3vw; border-radius: 1.2vw; border: none; width: 60%; margin: .4vw 0 1.2vw 0; box-shadow: 0 0vw 0 rgba(151, 125, 68, .5); box-sizing: border-box; }
input[type="text"]:focus { box-shadow: 0 .5vw 0 rgba(151, 125, 68, .5); }

input[type="submit"], .btn { text-align: center; background: #977D44; background: linear-gradient(90deg,rgba(151, 125, 68, 1) 0%, rgba(249, 228, 169, 1) 50%, rgba(151, 125, 68, 1) 100%); padding: .4vw 3vw; border-radius: 1.2vw; border: none; width: auto; margin: .4vw 0 1.2vw 0; font-weight: 700; text-transform: uppercase; color: #124e25; cursor: pointer; box-shadow: 0 0vw 0 rgba(151, 125, 68, .5); }
input[type="submit"]:hover, .btn:hover { background-position-x: 2vw; box-shadow: 0 .5vw 0 rgba(0, 0, 0, .3); }


hr { border: 0; background: none; }

.debtors { width: 70%; margin-inline: auto; }
.debtors table { border-collapse: collapse; }
.debtors tr td { font-size: 2vw; color: #fff; text-align: right; border-top: 1px solid rgba(244, 224, 165, .3); margin: 0; padding: 0.5vw 0; }
.debtors tr:first-child td { border-top: none; }
.debtors tr td:first-child { color: rgba(244, 224, 165, 1); text-align: left; }

.content-generator .intro { margin: 0 0 60px 0; }

.nav-toggle,
.hidden { display: none; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.mt-4 { margin-top: 4vw; }

#plati-panom-iframe { width: 100%; border: none; overflow: hidden; }

.swiper-outer-wrapper { position: relative; width: 80%; margin: 0 auto; padding: 0 60px; }
.swiper.swiper-gallery .swiper-slide { height: auto; display: flex; align-items: center; color: #fff; font-size: 1.3vw; }
.swiper.swiper-gallery img { width: 100%; height: auto; }
.swiper-button-prev, .swiper-button-next { -webkit-tap-highlight-color: transparent; }
.swiper-button-prev { left: 0!important; }
.swiper-button-next { right: 0!important; }
.swiper-button-prev:after, .swiper-button-next:after { font-size: 34px!important; padding: 20px; color: #fff; }
.swiper-slide .wrap { padding: 3vw; text-transform: uppercase; }
.swiper-slide .wrap span { display: block; text-align: left; text-wrap: balance; }
.lg { font: bold 6vw/1 "Barlow Condensed", sans-serif; }
.md { font: bold 4vw/1.1 "Barlow Condensed", sans-serif; margin-block: .3vw; }
.sm { font: bold 3vw/1.2 "Barlow Condensed", sans-serif; margin-block: .5vw; }
.gold { color: #f4e0a5; }

footer { width: 80vw; max-width: 1200px; margin-inline: auto; box-sizing: border-box; }
footer * { text-align: left; }
footer .footer-top { display: flex; justify-content: space-between; background: #007a33; height: 84px; border-radius: 42px; padding-inline: 50px; align-items: center; }
footer .footer-top > div { display: flex; align-items: center; gap: 30px; }
footer .footer-top a { font-family: 'icons'; font-size: 20px; }
footer .footer-top .logo img { height: 56px; width: auto; }
footer .footer-bottom { display: flex; padding: 30px 50px; justify-content: space-between; }
footer .social { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; }
footer .legal { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; }

@media only screen and (max-width: 991px) {
  .swiper-outer-wrapper { padding: 0; }
  .swiper.swiper-gallery .swiper-slide { font-size: 5vw; }
  .swiper-button-prev, .swiper-button-next { top: auto!important; margin-top: 15px!important; }
  .swiper-button-prev:after, .swiper-button-next:after { font-size: 30px!important; }
}

@media only screen and (max-width: 767px) {
  .swiper-outer-wrapper { width: 100%; }
  .swiper.swiper-gallery .swiper-slide { font-size: 7vw; }
}

@media only screen and (max-aspect-ratio: 1 / 1) {
  .lg { font: bold 8vh/1.1 "Barlow Condensed", sans-serif; }
  .md { font: bold 6vh/1.25 "Barlow Condensed", sans-serif; margin-block: .3vh; }
  .sm { font: bold 5vh/1.4 "Barlow Condensed", sans-serif; margin-block: .5vh; }
}