:root {--prim-color: #005BAB; --prim-color-lite: #80c3ff;}

/* mulish-regular - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mulish-v12-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-italic - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/mulish-v12-cyrillic_cyrillic-ext_latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-700 - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/mulish-v12-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-700italic - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/mulish-v12-cyrillic_cyrillic-ext_latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {width: 100vw; height: 100vh; overflow:hidden;}

* {position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

body {margin: 0; font-family: 'Mulish', sans-serif; font-size: 24px;}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

img {vertical-align: middle;}

a {text-decoration:none;}

p {margin-bottom: 2rem;}

.head {position: fixed; z-index: 10; height: 100px; background: var(--prim-color); width: 100vw; top: 0; left: 0; padding: 10px 50px; display:flex; align-items: center; box-shadow: 0px 0 25px rgba(0,0,0,0.5); }

.foot {position: fixed; z-index: 10; height: 80px; background: var(--prim-color); width: 100vw; bottom: 0; left: 0; padding: 10px 50px; display:flex; align-items: center; color:white; box-shadow: 0px 0 25px rgba(0,0,0,0.5);}

.foot a, .foot a:hover, .foot span {color:white; line-height: 80px; display: inline-block;}

.foot_item {width:25%; text-align:center; line-height: 80px;}
.foot_item:first-child {text-align:left;}
.foot_item:last-child {text-align:right;}

.wrap {width: 100vw; height: calc(100vh - 180px); margin: 100px 0 0 0; background: lightgray;}

.grid {display: flex; width: 100%; height: 100%; flex-wrap: wrap; padding: 50px 50px; z-index:1; overflow-y:auto; scroll-behavior: smooth;     align-content: flex-start;}

.grid.ext {padding: 50px 42px;}

.bg:after {content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-image:url(../img/bg.webp); background-size: cover; z-index: 0; opacity: 0.1; pointer-events:none;} 

.bg {width: 100%; height: calc(100vh - 180px); background-color: #032d4b;}
    
.grid::-webkit-scrollbar {width: 10px; }
.grid {   
    scrollbar-width: thin;
    scrollbar-color: #032d4b ;
    -webkit-overflow-scrolling: auto;
    -webkit-overflow-scrolling: touch;
}
.grid::-webkit-scrollbar-track {background: #032d4b; }
.grid::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 4px solid #032d4b; 
    border-radius: 5px;
}

.grid_item {width: 33.333%; height: 33.333%; z-index: 5;}
.grid_item.alt {width: calc(33.333% - 16px); height: calc(33.333% - 16px); margin: 8px; background: black; border-radius: 15px; overflow: hidden; }

.grid_item > a {display:flex; flex-wrap:wrap; align-content: center; width: 100%; height:100%;}
.grid_item.alt > a {display:block;}

.grid_item.alt_ > a .grid_icn:after {content: ""; position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height:100%; background-image: linear-gradient(0deg, rgba(0,0,0, 0.5) 0%, rgba(0,0,0, 0) 100%); }

.grid_item > a .grid_icn {width: 100px; height:100px; border-radius: 100px; overflow:hidden; margin: 0 auto; border:5px solid rgba(255, 255, 255, 0.3); background-size: cover; background-position: center center;}
.grid_item.alt > a .grid_icn {width: 100%; min-width: 100%; height:100%; border-radius: 15px; border:none;}

.grid_item > a h3 {display:block; width: 100%; text-align:center; margin: 10px 0 0 0; color: white;}
.grid_item.alt > a h3 {margin: 0; padding: 20px; position: absolute; left: 0; bottom: 0; z-index: 5; background-image: linear-gradient(0deg, rgba(0,0,0, 0.7) 0%, rgba(0,0,0, 0) 100%);}

.grid_item > a i {display:block; width: 90px; height: 90px; text-align:center; line-height: 90px; color: white; font-size: 36px; background: var(--prim-color); text-align: center; }
.grid_item.alt > a i {display:block; width: 100%; height: 100%; line-height: 220px; color: white; font-size: 80px; background: var(--prim-color);  }

.logo {width: 40%; overflow: hidden; display: flex; align-items: center; justify-content: center;}

.logo img {height: 80px; width: auto; }

.logo span {display: inline-block; padding: 0 0 0 30px; color:#fff; line-height: 110%;}

.clock {width: 20%; text-align: center; color: white; font-size: 40px;}

.clock span {color: #ddd; font-size: 20px;}

.langs {width: 30%; height: 100%; }

.langs ul {position: absolute; top:-10px; right: 0; height: 100px; text-align: right; list-style:none; padding: 0; margin: 0; height: 100px; margin: 0;}

.langs li {display: inline-block; width: 50px; padding: 24px 0 0 0; height: 100px;}

.langs ul ul {display:none;}

.langs.open ul li ul {display: block; position: absolute; top: 100%; right: -30px; background: white; padding: 20px; height: auto; width: 250px; }

.langs img {border: 3px solid #ddd; border-radius: 50px;}

.langs li li {padding: 10px; width: auto; height: auto; float: left;}

.nav {width: 30%;}

.nav_btn {display: inline-block; line-height: 50px; border-radius: 30px; height: 50px; min-width: 30px; border: 1px solid #ddd; text-align: center; font-size: 16px; padding: 0 20px 0 20px; color: #ddd; margin: 0 10px 0 0; /*box-shadow: 0px 0 15px rgba(0,0,0,0.5);*/}

.nav_btn i {color: var(--prim-color); color: white; font-size:24px; display: inline-block; transform: translateY(3px); margin-right: 4px;}

.weather_basic{
  height: 80px; display: flex; justify-content: center; padding: 0 30px;
}
.weather_basic .weather-icon {
  font-size: 2em;
  padding-bottom: 2em;
  width: 30px;
}
.weather_basic span {
  display: inline-block; line-height: 80px; padding: 0 1px 0 0; 
}
.weather_basic span i {
  /*color: rgba(255, 255, 255, 0.3); */
}

.weather,
.weather span {font-size: 14px; color:black;}

.weather .mod-weather-now span.mod-weather-temp  {display: block; font-size: 28px; padding: 0 0 10px 0; width: 100%; }

.weather .mod-weather-now {position: relative; padding-top: 0 !important; margin-top: 0 !important; }
.weather .mod-weather-now .weather-icon {position: relative; }
.weather .mod-weather-now .weather-icon i {position: relative !important; display: block;}

.mod-weather-now .weather-icon {
  vertical-align: top;
}
.mod-weather-forecast.block div > .weather-icon {
  vertical-align: bottom;
}
.mod-weather-forecast {
  padding: 0 0 0px 0;
}
.dark.mod-weather, .dark.mod-weather .mod-weather-source, .dark.mod-weather .mod-weather-now .weather-icon, .dark.mod-weather .mod-weather-now .mod-weather-temp {
    color: #000;
}
.dark.mod-weather .mod-weather-now, .dark.mod-weather .mod-weather-forecast {
    border-bottom: 1px solid #ddd;
}
.mod-weather-forecast {
    margin-bottom: 15px;
}
.mod-weather-forecast.block div > .weather-icon {
    margin: -5px 0 20px 0; vertical-align: top;
}
.mod-weather-forecast.block div {
    align-items: center;
}



.modal .app {text-align:center; padding: 30px 0 15px 0;}
.modal .app img {width: 100%; height: auto; max-width: 215px; }

.article {/*background:rgba(255,255,255,0.8); */border-radius: 15px; width:100%; margin-top:8px; color: white; }

.date {margin: 0 0 10px 0; color: var(--prim-color-lite); width: 100%;}
.date i {margin: -2px 15px 0 0; /*color: var(--prim-color);*/ }

.scroll {position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); z-index: 9; pointer-events:none; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.scroll.visible {pointer-events:all; bottom: 80px;}
.scroll a {display: inline-block; background: white; border-radius: 8px 8px 0 0; padding: 15px 30px; color: #aaa; text-transform: uppercase; font-size: 14px;}
.scroll a i {color: var(--prim-color); font-size: 20px; margin-right: 5px; transform: translateY(2px);}

.text {width: 800px; margin: 0 auto;}

.gallery {width: 1200px; margin: 0 auto; background: var(--prim-color); margin-bottom: 30px; box-shadow: 0px 0 15px rgba(0,0,0,0.2);}

.button-prev,
.button-next{
  cursor: pointer;
  border: none;
  position: absolute;
  z-index: 80; 
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 65px;
  height: 65px !important;
  padding: 0;
  text-indent: -9999px;
  margin: 0 0 0 0;	
  background-color: white;
  -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.button-prev:before,
.button-next:before{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.button-prev:after,
.button-next:after{
  position:absolute;
  display: block;
  width: 65px;
  height: 65px !important; 
  z-index:155;
  top:0;
  left:0;
  opacity: 1;
  display:block;
  text-indent: 0;
  font: var(--fa-font-solid);
  font-size: 24px;
  text-align: center;
  line-height: 65px;
  color: #484848;
}

.button-prev:after{
    content: "\f060";
}

.button-next:after{
    content: "\f061";
}

.button-prev{
    left: 0px;	
}

.button-next{
    right: 0px;
}

.pager-dots {position: absolute; left: 0; bottom: 30px; width: 100%; z-index: 20; text-align: center; }
.swiper-pagination-bullet {background: white; opacity: 0.5;}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.download {position:fixed; z-index:999; bottom: 110px; right:30px; background: white; border-radius: 50px; padding: 0 20px; line-height: 50px; color: #aaa; text-transform: uppercase; font-size: 14px; }
.download span i {color: var(--prim-color); font-size: 20px; margin-right: 5px; transform: translateY(2px);}

.events {width: 1200px; margin: 0 auto;}

.event {width: 100%; display:flex; color: white; margin: 0 0 30px 0; align-content: center;}

.event_img {width: 400px;}
.event_img img {width: 400px; height: auto;}

.event_txt {width: calc(100% - 400px); padding: 0 0 0 30px; display:flex; align-content: center; flex-wrap: wrap;}
.event_txt p {margin:0; width: 100%; display: block;}

.choose {display: flex; padding: 0 0 30px 0; justify-content: space-between; color:white; width: 400px;}

.choose div {width: 49%; border: 1px solid #ccc; padding: 0;}

.choose ul {list-style:none; margin: 0; padding: 0; }

.choose li { display: block; }

.choose li i  {position: absolute; top: 18px; right: 15px; color: var(--prim-color-lite); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.choose .open li i  {top: 16px; transform: rotate(180deg);}

.choose li ul {display: none; border: 1px solid var(--prim-color); position: absolute; top: 100%; left: 0; z-index: 99; padding: 10px 0; width: 100%; background: var(--prim-color);  box-shadow: 0px 5px 15px rgba(0,0,0,0.2)}
.choose .open ul {display: block;} 

.choose li a,
.choose li a:hover {color: white; display: block; padding: 10px 15px;}

.photogallery {display:flex; flex-wrap:wrap; }
.photogallery a {width:25%; padding: 15px; display: inline-block; margin:0;}
.photogallery a img {width:100%; height: auto;}

.beach_feats ul {margin: 15px 0 0 0; list-style: none;}
.beach_feats li {  color: #ddd; font-size: 16px; width: 50%; float: left; padding: 0 30px 0 0; }
.beach_feats li:before {
  content: "\f00c";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -2em;
  width: 2em;
  color: var(--prim-color-lite);
  text-align: center;
}
a .gall_icon,
a .gall_icon:hover {position: absolute; z-index: 10; color: white; top: 10px; right: 10px; } 

.ss_txt {position: absolute; left: 0; width: 100%; padding: 50px; color: white; }
.top {top: 0;}
.center {top: 50%; transform: translateY(-50%); }
.bottom {bottom:0; }
.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}
.btn, 
.btn:hover {display: inline-block; border-radius: 50px; padding: 0 20px; line-height: 50px; background: white; color: #000; text-transform:uppercase; margin-top: -10px;}

.ss_langs {width: 100%; height: 100vh; display:flex; flex-wrap:wrap; justify-content: center; color: white; align-content: center; background: var(--prim-color); }
.ss_langs > img {width: 400px; height: auto; margin: 0 0 40px 0; display: block; }
.ss_langs h3 {width: 100%; text-align: center; }
.ss_langs_holder {width: 100%; padding: 30px 0 0 0;}
.ss_langs_holder ul {list-style: none; width: 100%; text-align:center;}
.ss_langs_holder li {display: inline-block; width: auto; margin: 0 10px;}
.ss_langs_holder img {display: inline-block; width: auto; border-radius: 50px; border: 3px solid #ddd; }
.video {width: 100vw; height: 100vh; background: var(--prim-color); }

.katalog {width: calc(100% + 30px); margin: 0 -15px; display:flex; flex-wrap: wrap;}

.kat_item {width: calc(25% - 0px); padding: 0 15px 60px 15px;}

.kat_img {width: 100%; display: block; margin: 0 0 15px 0;}
.kat_img img {width: 100%; height: auto;}
.stars {width: 100%; height: 16px; line-height: 16px; margin: 0 0 10px 0; color: var(--prim-color-lite); font-size: 14px;}

.kat_txt {width: 100%; color: white;}

.data {width: 100%; padding: 0 0 15px 0;}
.datum {padding: 0 0 0 30px;}
.datum i {
  position: absolute;
  top: 13px; font-size: 14px;
  left: 0; color: var(--prim-color-lite);
  display: inline-block; width: 20px; text-align: center; 
}
.status {
  position: absolute;
  top: 6px;
  right: 0;
  width: 15px;
  height: 15px;
  border-radius: 8px;
  z-index:5;
}
.katalog .status {
  top: auto;
  left: auto;
  bottom: 15px;
  right: 15px;
}
.obj {  display: flex;  width: 100%;}
.obj:first-of-type {  border-top: 1px solid var(--prim-color-lite);  padding-top: 15px;}
.obj div {  width: 50%;  text-align: right; color: var(--prim-color-lite); font-size: 18px;}
.obj div:first-child {text-align: left; color: white; }
.kat_txt .btn, .kat_txt .btn:hover {
  background: var(--prim-color);
  color: white; margin: 0 auto; 
  margin-top: 10px;
}
.btn_wrap {text-align:center;}


.search button {width: 100%; border: none; padding: 10px 0; color: white; background: var(--prim-color); border: 1px solid var(--prim-color);}

.search {width: calc(100% + 30px); margin: 0 -15px; display: flex; padding: 0 0 30px 0;}

.search_item {width: 25%; margin: 0 15px;}

.search ul {list-style: none; margin: 0; padding: 0;}
.search ul ul {background: var(--prim-color); display:none;}
.search li.open ul {display:block; position: absolute; top: 100%; left: 0; width: 100%; z-index: 99; box-shadow: 0px 5px 15px rgba(0,0,0,0.2);}

.search li span {display: block; padding: 10px 15px; border: 1px solid var(--prim-color-lite); border: 1px solid var(--prim-color-lite);color: white;}
.search li a {display: block; padding: 10px 15px; color: white;}

.search li i {
  position: absolute;
  top: 18px;
  right: 15px;
  color: var(--prim-color-lite);
  -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.search li.open i {  transform: rotate(180deg); top: 16px;}




.legenda {display: flex; padding: 0 0 30px 0; width: calc(100% + 30px); margin: 0 -15px;}
.legenda_item {width: 25%; padding: 0 15px;}
.status-legend {
  padding-right: 20px;
  padding-left: 30px;
  color:white;
}
.status {
  position: absolute;
  top: 6px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 16px;
  border: 2px solid #ddd;
}
.status_title .status {  right: 0;  left: auto;  top: 5px;}
.status.green {  background: green;}
.status.yellow {  background: #FACC39;}
.status.red {  background: red;}

.pswp__icn {width: 48px;  height: 48px;}
.pswp__counter {font-size: 24px;}
.pswp__top-bar {padding-right: 30px; padding-top: 15px;}
.pswp__top-bar button {margin-right: 15px; }

table {width: 100%; margin: 0 0 15px 0;}
table td {background: rgba(0,0,0,0.17); padding: 5px 15px; }
table tr:nth-child(even) td {background: rgba(0,0,0,0.1);}
blockquote {padding: 0 0 0 30px; border-left: 3px solid var(--prim-color-lite); font-size: 28px;}
.text ul ul ul {list-style: none;}
.text ul ul ul li:before {content:"-"; position: absolute; top: 0; left:-19px;}

.qr1 {    --bs-modal-width: 350px;}
.qr2 {    --bs-modal-width: 600px;}
.qr3 {    --bs-modal-width: 850px;}
.qr4 {    --bs-modal-width: 1100px;}

.modal {
  --bs-modal-zindex: 100002;
}

.modal-backdrop {
  --bs-backdrop-zindex: 100001;
}
.notes {font-size: 16px;}
.vozniredovi h4 {text-transform: uppercase; color: var(--prim-color-lite);}
.vozniredovi table {border-collapse: collapse; /*table-layout: fixed;*/}
.vozniredovi table th, 
.vozniredovi table td {text-align: center; line-height: 110%; padding: 15px; border: 1px solid var(--prim-color);}
.vozniredovi table th {background: var(--prim-color); color: white; }
.vozniredovi thead th { width: 33%;}












/**/