*,
::before,
::after {
  box-sizing: border-box;
}
html {
  -moz-tab-size: 4;
  tab-size: 4;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
hr {
  height: 0;
  color: inherit;
}
abbr[title] {
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
html {
  font-size: 62.5%;
}
html body {
  margin: 0;
  font-size: 1.3rem;
}
@media (max-width: 640px) {
  html body {
    font-size: 1.2rem;
  }
}
a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #004276;
  font-weight: 600;
}
a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1;
  background: #d3e1e8 url("/bg_vreme.png") no-repeat center top;
  color: #4e5359;
}
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}
p {
  margin: 0 0 15px;
}
*:focus {
  outline: none;
}
@media (max-width: 768px) {
  body {
    padding-top: 69px;
  }
}
@media (max-width: 640px) {
  body {
    padding-top: 50px;
  }
}
body.locked {
  overflow-y: hidden;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 990px;
  margin: 0 auto;
  padding-top: 8px;
  font-size: 1.3rem;
  padding-right: 170px;
}
@media (max-width: 900px) {
  header {
    padding-right: 10px;
  }
}
@media (max-width: 768px) {
  header {
    align-items: flex-start;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #d3e1e8 url("/sys/bg_vreme.png") no-repeat center top;
  }
}
.logo {
  position: relative;
  left: -72px;
}
.logo-mobile {
  display: none;
}
@media (max-width: 900px) {
  .logo {
    top: 0;
    left: 5px;
  }
}
@media (max-width: 768px) {
  .logo {
    display: none;
  }
  .logo-mobile {
    display: block;
  }
  header {
    padding: 10px;  
  }
  .logo-mobile {
    margin:  6px 0 0;
  }
}
.add-to-favourites {
  margin-bottom: 19px;
}
@media (max-width: 768px) {
  .add-to-favourites {
    display: none;
  }
}
.hamburger {
  display: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .hamburger {
    padding: 6px 20px 10px 0;
    position: relative;
    display: block;
    float: right;
    width: 38px;
    top: -5px;
    border: 0;
    background-color: transparent;
    text-indent: -9999px;
    font-size: 0;
    height: 30px;
    cursor: pointer;
  }
  .hamburger span,
  .hamburger span::after,
  .hamburger span::before {
    cursor: pointer;
    border-radius: 0.3px;
    position: absolute;
    display: block;
    content: "";
    margin: 4px 0;
    width: 100%;
    height: 4px;
    background: #445963;
    transition: all 0.4s ease-out;
  }
  .hamburger span::before {
    top: -13px;
  }
  .hamburger span::after {
    top: 5px;
  }
  .hamburger.active span {
    background-color: transparent;
    transition: all 0.2ms ease-out;
  }
  .hamburger.active span::before {
    top: -2px;
    transform: rotate(45deg);
  }
  .hamburger.active span::after {
    top: -2px;
    transform: rotate(-45deg);
  }
}
@media (max-width: 640px) {
  .hamburger {
    top: -5px;
  }
}
footer {
  padding: 0 10px 30px;
}
@media (max-width: 640px) {
  footer {
    padding: 0 10px 20px;
  }
}
footer .footer {
  margin-top: 30px;
}
footer .container {
  flex-direction: column;
  justify-content: center;
  max-width: 650px;
  z-index: 0;
}
@media (max-width: 900px) {
  footer .container {
    max-width: 100%;
  }
}
footer .container ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}
@media (max-width: 640px) {
  footer .container ul {
    flex-wrap: wrap;
  }
}
footer .container ul li {
  list-style: none;
  margin: 0 14px;
  position: relative;
}
footer .container ul li:first-child {
  margin-left: 0;
}
footer .container ul li:last-child {
  margin-right: 0;
}
@media (max-width: 640px) {
  footer .container ul li {
    margin: 0 10px;
  }
  footer .container ul li:last-child {
    flex-basis: 100%;
    justify-content: center;
    display: flex;
    margin-top: 10px;
  }
  footer .container ul li:last-child::before {
    display: none;
  }
}
footer .container ul li::before {
  position: absolute;
  left: -17px;
  top: 1px;
  color: #4e5359;
  content: "•";
}
@media (max-width: 640px) {
  footer .container ul li::before {
    left: -12px;
  }
}
footer .container ul li:first-child::before {
  display: none;
}
footer .container ul li a.fb {
  padding-right: 30px;
  background: url("/sys/icon-facebook.svg") no-repeat center right;
  background-size: 18px;
}
@media (max-width: 640px) {
  footer .container ul li a.fb {
    padding-right: 18px;
  }
}
footer .container ul li a.tw {
  padding-right: 30px;
  background: url("/sys/icon-twitter.svg") no-repeat center right;
  background-size: 18px;
}
@media (max-width: 640px) {
  footer .container ul li a.tw {
    padding-right: 18px;
  }
}
@media (max-width: 680px) {
  footer .container ul li a span {
    display: none;
  }
}
.fb_iframe_widget {
  top: -3px;
}
@media (max-width: 640px) {
  .fb_iframe_widget {
    top: 0;
  }
}
sidebar {
  flex: 160px;
  max-width: 160px;
}
@media (max-width: 900px) {
  sidebar {
    flex: 130px;
    max-width: 130px;
  }
}
@media (max-width: 768px) {
  sidebar {
    position: fixed;
    z-index: 1;
    flex: 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    right: calc(-100% - 50px);
    opacity: 0;
    transition: opacity 0.4s ease-in-out, right 0.1s ease-out 0.4s;
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
  sidebar.opened {
    right: 0;
    opacity: 1;
    transition: opacity 0s ease, right 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }
}
sidebar nav {
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  width: 100%;
  max-width: 160px;
  overflow: hidden;
}
@media (max-width: 768px) {
  sidebar nav {
    max-width: 100%;
    font-size: 1.5rem;
    box-shadow: -5px 5px 25px 8px rgba(0, 0, 0, 0.5);
  }
}
sidebar nav h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  margin: 0;
  text-transform: uppercase;
  background: #f2f2f2;
}
sidebar nav h4 span {
  text-transform: none;
  font-size: 1.2rem;
  cursor: pointer;
}
sidebar nav ul {
  padding: 2px 10px;
  margin: 0;
  max-height: 600px;
  overflow: hidden;
}
sidebar nav ul.hidden {
  max-height: 0;
  padding: 0 10px;
}
@media (max-width: 768px) {
  sidebar nav ul {
    display: flex;
    flex-wrap: wrap;
  }
}
sidebar nav ul li {
  list-style: none;
}
@media (max-width: 768px) {
  sidebar nav ul li {
    width: 33%;
    padding: 0;
  }
}
sidebar nav ul li a {
  display: block;
  padding: 3px;
  line-height: 1.4rem;
}
@media (max-width: 768px) {
  sidebar nav ul li a {
    font-size: 1.4rem;
    padding: 10px 0 10px 5px;
    border-radius: 5px;
  }
}
sidebar nav ul li a:hover {
  background: #f2f2f2;
}
@media (min-width: 769px) {
  sidebar nav ul li a.city {
    padding-left: 8px;
  }
  sidebar nav ul li a.city::before {
    position: relative;
    left: -5px;
    content: "•";
  }
}
sidebar nav ul li a.city.more::after {
  content: "›";
  font-weight: 600;
  color: #999;
  margin: 0 0 0 3px;
}
.container {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 990px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
}
.banner-728-90 {
  display: none;
}
@media (max-width: 900px) {
  .banner-728-90 {
    display: block;
    margin: 0 auto;
    width: 728px;
    height: 90px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
@media (max-width: 690px) {
  .banner-728-90 {
    display: none;
  }
}
.right-banner {
  width: 160px;
  height: 600px;
}
@media (max-width: 900px) {
  .right-banner {
    display: none;
  }
}
.right-banner .banner {
  width: 160px;
  height: 600px;
}
.right-banner .banner.fixed {
  position: fixed;
  top: 10px;
}
.banner-300-250 {
  display: none;
}
@media (max-width: 690px) {
  .banner-300-250 {
    display: block;
    width: 300px;
    height: 250px;
    border: 1px #f2f2f2 solid;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
@media (max-width: 280px) {
  .banner-300-250 {
    display: none;
  }
}
.banner-300-250.mb-20 {
  margin-bottom: 35px;
}
@media (max-width: 768px) {
  .banner-desktop-300 {
    display: none;
  }
}
.weather-main {
  flex: 1;
  max-width: 650px;
  margin: 0 10px;
}
@media (max-width: 768px) {
  .weather-main {
    max-width: 728px;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .weather-main {
    margin: 0;
    padding: 0;
  }
}
.section-title {
  background: #f2f2f2;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 16px 15px;
}
@media (max-width: 768px) {
  .section-title {
    margin-bottom: 0;
    border-radius: 5px 5px 0 0;
    border-bottom: 15px #fff solid;
  }
}
@media (max-width: 640px) {
  .section-title {
    padding: 12px 15px;
  }
}
.section-title h1 {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin: 0 0 10px;
}
@media (max-width: 640px) {
  .section-title h1 {
    font-size: 1.5rem;
  }
}
.section-title p {
  font-size: 1.1rem;
  line-height: 1.9rem;
  margin: 0;
}
.section-title p a {
  text-decoration: underline;
}
.section-title p a:hover {
  text-decoration: none;
}
.content-box {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
.content-box.croatia-central h3 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeaea;
  display: inline-block;
}
@media (max-width: 768px) {
  .content-box {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.content-box h2 {
  background: #47b2df;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 8px 15px;
  margin: 0;
}
@media (max-width: 768px) {
  .content-box h2 {
    background: none;
    color: #4e5359;
    border-bottom: 1px #f2f2f2 dotted;
  }
}
@media (max-width: 640px) {
  .content-box h2 {
    font-size: 1.4rem;
  }
}
.content-box h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-weight: bold;
  color: #000;
}
.content-box h3.h3-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeaea;
  display: inline-block;
}
.content-box h3.h3-title.warning {
  color: #f60;
}
.content-box p {
  font-size: 1.4rem;
  line-height: 2.3rem;
}
@media (max-width: 640px) {
  .content-box p {
    font-size: 1.3rem;
    line-height: 2.1rem;
  }
}
.content-box p.link-text {
  font-size: 1.3rem;
}
.content-box .content-box-body {
  padding: 25px 35px 15px;
}
@media (max-width: 900px) {
  .content-box .content-box-body {
    padding: 15px;
  }
}
.content-box .small {
  display: inline-block;
  width: 100%;
  font-size: 1.1rem;
  opacity: 0.8;
  font-weight: normal;
  margin: 10px 0;
}
.content-box .small.center {
  text-align: center;
}
.content-box.weather-boxes-wrapper .content-box-body {
  padding: 15px;
}
.content-box.weather-boxes-wrapper .content-box-body p {
  margin-bottom: 0;
}
.content-box.weather-boxes-wrapper .content-box-body p.mb-15 {
  margin-bottom: 15px;
}
.content-box-wrapper-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
}
@media (max-width: 768px) {
  .content-box-wrapper-two {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
    background: #fff;
  }
}
.content-box-body-grey {
  padding: 15px 35px;
  background: #f2f2f2;
}
@media (max-width: 900px) {
  .content-box-body-grey {
    padding: 15px;
  }
}
@media (max-width: 768px) {
  .content-box-body-grey {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 15px #fff solid;
  }
}
.weather-boxes {
  display: flex;
  justify-content: space-between;
  margin: 0 -8px;
  padding-bottom: 10px;
}
@media (max-width: 768px) {
  .weather-boxes {
    overflow-x: auto;
  }
}
.weather-boxes .wb-day {
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  flex: 15%;
  justify-content: flex-start;
  align-items: center;
  margin: 0 8px;
  padding: 8px;
  min-height: 144px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.7rem;
  border-radius: 3px;
}
@media (max-width: 768px) {
  .weather-boxes .wb-day {
    margin: 0 4px;
  }
}
@media (max-width: 520px) {
  .weather-boxes .wb-day {
    flex: 0 0 83px;
    max-width: 83px;
    padding: 8px 4px;
  }
}
.weather-boxes .wb-day p {
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.tabs {
  margin: 10px 0 15px;
}
.tabs ul {
  padding: 0;
  margin: 0 0 25px;
  display: flex;
}
.tabs ul li {
  list-style: none;
  padding: 0 10px;
  position: relative;
}
.tabs ul li:first-child {
  padding-left: 0;
}
.tabs ul li:last-child {
  padding-right: 0;
}
.tabs ul li:last-child::after {
  display: none;
}
.tabs ul li a {
  padding: 2px 5px;
}
@media (max-width: 280px) {
  .tabs ul li a {
    padding: 2px;
  }
}
.tabs ul li a:hover {
  background: #f2f2f2;
}
@media (max-width: 640px) {
  .tabs ul li a span {
    display: none;
  }
}
.tabs ul li.active a {
  background: #f2f2f2;
}
.tabs ul li::after {
  position: absolute;
  right: -2px;
  top: 0;
  color: #999;
  content: "•";
}
.tabs-body .tab {
  display: none;
}
.tabs-body .tab.active {
  display: block;
}
.tabs-body .tab img {
  width: 100%;
  height: auto;
}
.featured-box {
  padding: 10px 5px;
}
@media (max-width: 640px) {
  .featured-box {
    padding: 10px 15px;
  }
}
.featured-box h2 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.featured-box p {
  font-size: 1.1rem;
  line-height: 1.9rem;
  margin: 0;
}
.cookies {
  background: #f2f2f2;
  padding: 8px 10px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}
@media (max-width: 768px) {
  .cookies {
    width: 100%;
  }
}
.cookies p {
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin: 0;
}
.cookies button {
  margin-left: 15px;
  white-space: nowrap;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}
table tr td,
table tr th {
  background: #f2f2f2;
  padding: 5px 15px;
  border-bottom: 5px #fff solid;
  text-align: left;
  height: 34px;
  line-height: 1.7rem;
}
@media (max-width: 640px) {
  table tr td,
  table tr th {
    padding: 5px;
    vertical-align: top;
  }
}
table tr th {
  font-size: 1rem;
  color: #999;
}
table tr th .dot {
  display: none;
}
@media (max-width: 640px) {
  table tr th .dot {
    display: inline-block;
  }
}
@media (max-width: 640px) {
  table tr th {
    white-space: nowrap;
  }
  table tr th .mobile-hide {
    display: none;
  }
}
table tr td {
  font-weight: bold;
  font-size: 1.3rem;
}
table tr td a {
  font-weight: bold;
}
table tr td small {
  color: #999;
}
@media (max-width: 768px) {
  table tr td small {
    display: block;
    margin: 0;
  }
}
@media (max-width: 640px) {
  table tr td {
    font-size: 1rem;
  }
}
.updated {
  padding: 15px 0 10px;
}
@media (max-width: 768px) {
  .updated {
    padding: 15px 15px 0;
  }
}
.updated p {
  margin: 0;
  color: #999;
}
@media (max-width: 640px) {
  .updated p {
    font-size: 1rem;
  }
}
.breadcrumbs {
  padding: 0;
  margin: 15px 0;
}
.breadcrumbs li {
  position: relative;
  list-style: none;
  display: inline-block;
  padding-right: 10px;
  margin-right: 6px;
}
.breadcrumbs li::after {
  position: absolute;
  right: -2px;
  top: -5px;
  font-weight: bold;
  font-size: 1.8rem;
  color: #999;
  content: "›";
}
.breadcrumbs li:last-child {
  padding-right: 0;
  margin-right: 0;
}
.breadcrumbs li:last-child::after {
  display: none;
}
.wc-temp {
  display: flex;
  width: 200px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.wc-temp h3 {
  font-size: 42px;
  line-height: 36px;
  font-weight: normal;
  margin: 0 15px;
  white-space: nowrap;
}
.wc-temp .wc-icon {
  margin: 0 15px;
}
.wc-info {
  text-align: center;
  line-height: 1.9rem;
  margin-bottom: 15px;
}
.wc-info strong {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 6px;
}
.wc-text-left .wc-temp {
  width: auto;
  margin-left: 0;
  justify-content: flex-start;
}
.wc-text-left .wc-temp h3 {
  margin-left: 0;
}
.wc-text-left .wc-info {
  text-align: left;
}
.weather-by-hour {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  flex-wrap: wrap;
}
.weather-by-hour .wbh-box {
  margin: 0 10px;
  text-align: center;
  min-width: 35px;
  flex: 0 0 35px;
}
@media (max-width: 768px) {
  .weather-by-hour .wbh-box {
    margin: 0 1% 2%;
    padding: 5px;
    min-width: 18%;
    flex: 0 0 18%;
    background-color: #f2f2f2;
  }
}
.weather-by-hour .wbh-box .hour {
  color: #999;
  font-size: 1.1rem;
  padding-bottom: 5px;
}
.weather-by-hour .wbh-box .temp {
  margin: 8px 0;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  .weather-day-table tr th:nth-child(3) {
    display: none;
  }
}
.weather-day-table tr td {
  vertical-align: top;
  font-size: 1.4rem;
}
.weather-day-table tr td:nth-child(2) {
  width: 230px;
}
@media (max-width: 768px) {
  .weather-day-table tr td:nth-child(2) {
    width: auto;
  }
}
@media (max-width: 768px) {
  .weather-day-table tr td:nth-child(3) {
    display: none;
  }
}
.weather-day-table tr td .weather-temp {
  display: none;
}
.weather-day-table tr td .date {
  display: block;
  font-size: 1rem;
  color: #999;
  margin-top: 2px;
}
.weather-day-table tr td .weather {
  display: flex;
}
.weather-day-table tr td .weather .weather-img {
  flex: 0 0 55px;
  max-width: 55px;
  height: 35px;
}
.weather-day-table tr td .weather img {
  width: 35px;
  height: auto;
}
.weather-day-table tr td small,
.weather-day-table tr td medium {
  font-size: 1rem;
  color: #999;
}
.weather-day-table tr td .condition-mobile {
  display: none;
}
@media (max-width: 768px) {
  .weather-day-table tr td {
    font-size: 1.3rem;
  }
  .weather-day-table tr td .condition-mobile {
    display: block;
    font-weight: normal;
  }
  .weather-day-table tr td .weather {
    flex-direction: column;
  }
  .weather-day-table tr td .weather .weather-img {
    flex: auto;
  }
  .weather-day-table tr td .condition {
    display: none;
  }
  .weather-day-table tr td .weather-temp {
    display: block;
  }
}
.weather-day-table.weather-day-table-normal tr td {
  width: auto;
}
@media (max-width: 640px) {
  .weather-day-table.weather-day-table-europa tr td {
    font-size: 1rem;
  }
}
.city-box-info {
  display: flex;
  margin-bottom: 15px;
}
.city-box-info .cbi-img {
  flex: 0 0 62px;
  max-width: 62px;
}
.city-box-info .cbi-img span {
  display: flex;
  width: 40px;
  height: 36px;
  font-size: 16px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
.city-box-info .cbi-img span.verylow {
  background-color: #a0ce00;
}
.city-box-info .cbi-img span.low {
  background-color: #f7e400;
}
.city-box-info .cbi-img span.med {
  background-color: #f88700;
}
.city-box-info .cbi-img span.high {
  background-color: #e82c0e;
}
.city-box-info .cbi-img span.veryhigh {
  background-color: #b54cff;
}
.city-box-info .cbi-info {
  padding-left: 15px;
  font-size: 1.3rem;
  line-height: 1.9rem;
}
.city-box-info .cbi-info.v-center {
  display: flex;
  align-self: center;
}
.city-box-info .cbi-info ul {
  padding: 0;
  margin: 0;
}
.city-box-info .cbi-info ul li {
  list-style: none;
  margin-bottom: 5px;
}
.city-box-info .cbi-info ul li:last-child {
  margin-bottom: 0;
}
.city-box-info .cbi-info .small {
  margin-top: 5px;
}
.city-box-info .cbi-info .legend {
  position: relative;
  top: 3px;
  margin: 0 4px;
}
.city-box-info .cbi-info .legend span {
  display: inline-block;
  margin: 0 1px;
  width: 15px;
  height: 15px;
}
.city-box-info .cbi-info .legend span.verylow {
  background-color: #a0ce00;
}
.city-box-info .cbi-info .legend span.low {
  background-color: #f7e400;
}
.city-box-info .cbi-info .legend span.med {
  background-color: #f88700;
}
.city-box-info .cbi-info .legend span.high {
  background-color: #e82c0e;
}
.city-box-info .cbi-info .legend span.veryhigh {
  background-color: #b54cff;
}
.wc-temp-left {
  float: left;
  display: flex;
  width: 200px;
  align-items: center;
  margin: 10px 0 5px;
}
.wc-temp-left h3 {
  font-size: 42px;
  line-height: 36px;
  font-weight: normal;
  margin: 0 15px 0 0;
}
.wc-temp-left .wc-icon {
  margin: 0 15px;
}
.wc-info {
  text-align: center;
  line-height: 1.9rem;
  margin-bottom: 15px;
}
.wc-info strong {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 6px;
}
.list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.list-column {
  flex: 0 0 120px;
  max-width: 120px;
}
@media (max-width: 530px) {
  .list-column {
    flex: 0 0 115px;
    max-width: 115px;
  }
}
.list-column.list-column-two {
  display: flex;
  flex: 0 0 240px;
  max-width: 240px;
}
@media (max-width: 530px) {
  .list-column.list-column-two {
    flex: 0 0 115px;
    max-width: 115px;
    flex-direction: column;
  }
}
@media (max-width: 320px) {
  .list-column.list-column-two {
    flex: 0 0 230px;
    max-width: 230px;
    flex-direction: row;
  }
}
.list-box {
  width: 120px;
  margin: 0 0 30px 5px;
}
.list-box:last-child {
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .list-box:last-child {
    margin-bottom: 30px;
  }
}
.list-box h4 {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  padding-bottom: 5px;
  margin: 0 0 8px;
  color: #000;
  border-bottom: 1px solid #ebeaea;
}
.list-box ul {
  padding: 0;
  margin: 0;
}
.list-box ul li {
  list-style: none;
  margin-bottom: 7px;
}
@media (max-width: 530px) {
  .list-box ul li {
    margin-bottom: 12px;
  }
}
.rain-fall-remarks {
  padding: 0;
  margin: 0;
}
.rain-fall-remarks li {
  line-height: 1.9rem;
  font-size: 1.3rem;
  list-style: none;
  margin-bottom: 5px;
}
.rain-fall-remarks li::before {
  content: "•";
  padding-right: 5px;
}
.rain-fall-legend {
  padding: 0;
  margin: 0;
}
.rain-fall-legend li {
  line-height: 2.5rem;
  font-size: 1.4rem;
  list-style: none;
  margin-bottom: 5px;
}
.rain-fall-legend li span {
  margin-right: 5px;
  display: inline-block;
  width: 19px;
  height: 14px;
}
.rain-fall-legend li span.blue {
  background-color: #085afe;
}
.rain-fall-legend li span.green {
  background-color: #04d883;
}
.rain-fall-legend li span.orange {
  background-color: #fe8400;
}
.rain-fall-legend li span.red {
  background-color: #d30000;
}
.rain-fall-legend li span.purple {
  background-color: #cb00cc;
}
.cities {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.cities li {
  list-style: none;
  font-size: 1.4rem;
  border-right: 1px #999 solid;
  padding: 0 7px 0 0;
  margin-right: 7px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media (max-width: 768px) {
  .cities li {
    margin-bottom: 15px;
  }
}
.cities li:first-child {
  padding-left: 0;
}
.cities li:last-child {
  padding-right: 0;
  border-right: 0;
}
.cities-in-wrapper {
  margin: 30px 0 20px;
}
.small-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 10px;
}
@media (max-width: 768px) {
  .small-cards {
    padding: 15px;
    background: #fff;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .small-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.small-card {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}
@media (max-width: 768px) {
  .small-card {
    background-color: #f2f2f2;
    padding: 10px;
  }
}
.small-card h2 {
  background: #47b2df;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 8px 15px;
  margin: 0;
}
@media (max-width: 768px) {
  .small-card h2 {
    padding: 0;
    color: #004276;
    background: none;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
.small-card .small-card-body {
  padding: 10px;
}
@media (max-width: 768px) {
  .small-card .small-card-body {
    padding: 0;
  }
}
.small-card .small-card-body p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #999;
}
.small-card .small-card-temp {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
}
.small-card .small-card-temp-item {
  width: 50px;
}
.small-card .small-card-temp-img img {
  height: 40px;
}
.radar-img img {
  width: 100%;
  height: auto;
}
.radar-img-satelit {
  text-align: center;
}
.radar-img-satelit small {
  text-align: left;
}
@media (max-width: 768px) {
  .radar-img-satelit img {
    width: 100%;
    height: auto;
  }
}
.content-box .content-box-body.radar-img-satelit-eu {
  text-align: center;
  padding-bottom: 25px;
}
@media (max-width: 768px) {
  .radar-img-satelit-eu img {
    width: 100%;
    height: auto;
  }
}
.indexbanner {
  display: none;
}
@media (max-width: 768px) {
  .indexbanner {
    display: block;
    text-align: center;
    padding-bottom: 30px;
  }
}
.subban {
  display: none;
}
@media (max-width: 768px) {
  .subban {
    display: block;
    background: #ffffff;
    text-align: center;
    padding: 30px 0;
  }
}

.map-box{display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;color:#000;}
.map-box strong{display:block;margin-bottom:2px;margin-top:-6px;color: #004276;}
.map-box span{font-size:20px;opacity: .7;}
.map {position:relative;width:100%;height:500px;background:url('https://weather.hr/croatia.jpg') no-repeat center center;background-size:cover;}
.map .zagreb{position:absolute;top:37px;left:213px;}
.map .osijek{position:absolute;top:67px;left:438px;}
.map .split{position:absolute;top:294px;left:241px;}
.map .dubrovnik{position:absolute;top:375px;left:377px;}
.map .rijeka{position:absolute;top:100px;left:90px;}
.map .zadar{position:absolute;top:230px;left:150px;}
.map .slavonskibrod{position:absolute;top:150px;left:380px;}
@media (max-width:1000px){
    .map {margin:0 auto;width:500px;height:500px;background-size:500px;}
    .map .zagreb{top:56px;left:170px;}
    .map .osijek{top:78px;left:368px;}
    .map .split{top:281px;left:205px;}
    .map .dubrovnik{top:375px;left:308px;}
    .map .rijeka{top:114px;left:69px;}
    .map .zadar{position:absolute;top:230px;left:130px;}
    .map .slavonskibrod{position:absolute;top:150px;left:320px;}
}
@media (max-width:640px){
    .map {margin:0 auto;width:330px;height:330px;background-size:390px;}
    .map .zagreb{top:18px;left:96px;}
    .map .osijek{top:22px;left:247px;}
    .map .split{top:186px;left:109px;}
    .map .dubrovnik{top:241px;left:195px;}
    .map .rijeka{top:52px;left:22px;}
    .map .zadar{position:absolute;top:150px;left:70px;}
    .map .slavonskibrod{position:absolute;top:80px;left:240px;}
}

.word-box {background: #47B2DF; margin-bottom: 10px; border-radius: 5px;}
.word-box-content {background: #fff; border-radius: 40px 5px 5px 5px; padding: 24px 36px;}
.word-box-content h2 {position: relative; padding: 15px 0 15px 60px; font-size: 17px; font-weight: bold; color: #47B2DF; text-transform: uppercase; margin-bottom: 23px; background-image: url("data:image/svg+xml,%0A%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9207 15.2494C24.6458 14.9878 26.4099 14.3599 29.2206 13.3582C31.7995 12.4387 34.5205 11.9678 37.2639 11.9678H40.6651V31.1043H37.2639C33.4216 31.1043 29.6168 31.7621 25.9988 33.0553L23.9207 33.7879V15.2494ZM23.9207 10.1663L20.2279 8.85065C17.1332 7.74432 13.8665 7.17621 10.5774 7.17621H5.98018C3.99926 7.17621 2.39209 8.78338 2.39209 10.7643V32.2929C2.39209 34.2738 3.99926 35.881 5.98018 35.881H10.5774C13.8665 35.881 17.1332 36.4491 20.2354 37.5554L23.1208 38.587C23.6441 38.7739 24.2122 38.7739 24.728 38.587L27.6134 37.5554C30.7156 36.4491 33.9748 35.881 37.2714 35.881H41.8686C43.8495 35.881 45.4567 34.2738 45.4567 32.2929V10.7643C45.4567 8.78338 43.8495 7.17621 41.8686 7.17621H37.2714C33.9823 7.17621 30.7156 7.74432 27.6134 8.85065L23.9207 10.1663Z' fill='%2347B2DF'/%3E%3Cpath d='M3.79405 43.5881C2.79985 43.5881 2 42.7882 2 41.794C2 40.7998 2.79985 40 3.79405 40H10.1853C13.6837 40 17.1522 40.598 20.4413 41.7791L23.3267 42.8107C23.4613 42.8555 23.6033 42.8555 23.7304 42.8107L26.6158 41.7791C29.9049 40.598 33.3734 40 36.8718 40H43.2631C44.2573 40 45.0571 40.7998 45.0571 41.794C45.0571 42.7882 44.2573 43.5881 43.2631 43.5881H36.8718C33.7845 43.5881 30.7272 44.1188 27.8193 45.1579L24.9414 46.1895C24.0294 46.5109 23.0352 46.5109 22.1232 46.1895L19.2378 45.1579C16.33 44.1188 13.2726 43.5881 10.1853 43.5881H3.79405Z' fill='%23B5E0F2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left center;}
.word-box-content h2::after {position: absolute; content: ""; width: 100%; height: 4px; left: 60px; bottom: 4px; background-repeat: no-repeat; background-position: center left; background-image: url("data:image/svg+xml,%0A%3Csvg width='511' height='4' viewBox='0 0 511 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2H509' stroke='url(%23paint0_linear_2_11)' stroke-opacity='0.4' stroke-width='3' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2_11' x1='8.99998' y1='2.5' x2='508.999' y2='2.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2347B2DF'/%3E%3Cstop offset='1' stop-color='%2347B2DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");}
.word-box-content p {margin-bottom: 28px;}
.word-box-content p, .word-box-content li {line-height: 20px;}

@media (max-width:640px){
    .word-box-content h2::after {max-width: 230px;}    
}