*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
*:focus { outline: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Google Sans Flex", sans-serif; font-size: clamp(16px, 1.1vw, 20px); -webkit-tap-highlight-color: transparent; }
ul, ol { margin: 0; }
a, a:link, a:hover, a:focus, a:active { text-decoration: none; outline: 0; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }
.container { width: 100%; max-width: 1600px; margin-inline: auto; padding: 0 60px; }
.mt-0 { margin-top: 0!important; }
.m-0 { margin: 0!important; }
.with-hero header { position: absolute; top: 0; width: 100%; background: transparent; z-index: 10; }
.with-hero header nav ul li a, .with-hero .search-toggle { color: #fff; }
.with-hero .nav-toggle .bar { background: #fff; }
.with-hero .logo img { filter: brightness(100); }
.with-hero .search { border: 0; }
.with-hero .logo p { color: #fff; }
.with-hero .date { margin-bottom: 0; }
.with-hero.nav-active header { background: #fff; }
header { background: #fff; padding: 40px 0; }
header .container { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
header nav ul li { display: inline-block; }
header nav ul li:not(:last-child) { margin-right: 40px; }
header nav ul li a { font-size: clamp(16px, 1.1vw, 18px); color: #000; }
header .logo { display: flex; align-items: center; }
.logo img { height: 55px; }
.logo p { font-size: 22px; color: #000; text-transform: uppercase; font-weight: 900; margin-left: 15px; }
.logo p span { display: inline-block; font-weight: 300; }
header .logo + div { display: flex; align-items: center; }
.search-toggle { font-size: clamp(20px, 1vw, 22px); color: #000; margin-left: 40px; }
.nav-toggle {  display: none; position: relative;  }
.nav-toggle .bar {  position: absolute; left: 50%; width: 100%; height: 2px; background: #000; transition: all 0.3s; }
.nav-toggle .bar.bar1 {top: 0;transform: translateX(-50%); }
.nav-toggle .bar.bar2 {  top: 50%; transform: translate(-50%, -50%); }
.nav-toggle .bar.bar3 {  bottom: 0; transform: translateX(-50%); }
.nav-active .nav-toggle .bar1 { top: 50%; transform: translate(-50%, 0) rotate(45deg); }
.nav-active .nav-toggle .bar2 { opacity: 0; }
.nav-active .nav-toggle .bar3 { top: 50%; bottom: auto; transform: translate(-50%, 0) rotate(-45deg); }
.search { display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 60px; height: 40px; border: 1px solid #000; border-radius: 10px; overflow: hidden; z-index: 1; }
.search input { font-size: clamp(16px, 1.1vw, 18px); width: 200px; padding-left: 20px; border: 0; }
.search button { font-size: clamp(18px, 1.1vw, 22px); border: 0; background: #fff; height: 100%; padding: 0 20px;cursor: pointer; }
.search.active { display: flex; }
.hero {  position: relative; width: 100%; height: 50vh; min-height: 600px; color: #fff; padding-bottom: 50px; overflow: hidden; }
.hero .container { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.hero img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); z-index: -1; }
.hero .date { color: #fff;  border-bottom: 1px solid #fff; }
.title { font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; line-height: 1.2; font-weight: 900; margin: 20px 0 25px 0; }
.category, .date { text-transform: uppercase; font-weight: 700; }
.date, .style-text .date { color: #009BDB; padding-bottom: 10px; margin-bottom: 40px; border-bottom: 1px solid #009BDB; }
section { padding: 40px 0; }
.logos { position: sticky; top: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 60px; }
.logos img { min-width: 150px; max-width: 250px; }
.style-text .excerpt p { color: #1098d4; font-size: 120%; }
.style-text h2, .style-text h3, .style-text h4, .style-text h5, .style-text h6 { font-weight: 700; line-height: 1.25; }
.style-text h1 { font-size: clamp(28px, 4vw, 40px); text-transform: uppercase;  line-height: 1.2; font-weight: 900; margin: 0 0 20px 0; }
.style-text h2 { font-size: clamp(24px, 3vw, 34px); margin: 48px 0 24px 0; }
.style-text h3 { font-size: clamp(20px, 2.2vw, 28px); margin: 40px 0 20px 0; }
.style-text h4 { font-size: clamp(18px, 1.6vw, 24px); margin: 32px 0 16px 0; }
.style-text h5 { font-size: clamp(16px, 1.3vw, 22px); margin: 24px 0 16px 0; letter-spacing: 0.06em; }
.style-text a { color: #000; text-decoration: underline; }
.style-text h6 { font-weight: 600; color: #555; }
.style-text p, .style-text li, .style-text h6 { font-size: clamp(14px, 1.1vw, 20px); }
.style-text p, .style-text h6 { margin: 16px 0; }
.style-text ul, .style-text ol { margin: 16px 0 16px 24px; }
.style-text p, .style-text li { line-height: 1.45; }
.style-text li { margin-bottom: 8px; }
.style-text h1 + p, .style-text h2 + p, .style-text h3 + p, .style-text h4 + p, .style-text h5 + p, .style-text h6 + p { margin-top: 0; }
.style-text :first-child { margin-top: 0; }
.articles { max-width: 1200px; min-height: 50vh; margin: 0 auto; display: flex; }
.item { position: relative; background: #F6F6F6; border-radius: 14px; overflow: hidden; display: none; }
.grid-loaded .item { display: block; }
.item .item-text { padding: 20px; }
.item img { display: block; }
.item h3 { font-size: clamp(16px, 1.1vw, 20px); text-transform: uppercase; font-weight: 700; line-height: 1.25; border-bottom: 1px solid #009BDB; padding-bottom: 10px; margin-bottom: 10px; }
.item h3 a { color: #000; }
.item h3 a:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.item p { font-size: clamp(14px, 1vw, 18px); font-weight: 300; }
.wp-block-column { position: relative; }
.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow { display: flex; flex-direction: column; }
.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow .wp-block-group.item { flex-grow: 1; }
.wp-block-columns.is-layout-flex { gap: 30px; }
.wp-block-group.item { padding: 20px; }
.wp-block-group.item + .wp-block-group.item { margin-top: 30px; }
h2.wp-block-heading { margin-bottom: 15px; }
.item h3.wp-block-heading { border-bottom: 0; padding-bottom: 0; }
.item hr { width: 100%; height: 1px; border: 0; background-color: #009BDB; margin: 10px 0!important; }
.wp-block-image { margin: 50px 0; }
.wp-block-image img { width: 100%; border-radius: 14px; }
.wp-block-image.cover-img img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-group p, .wp-block-group li { line-height: 1.45; }
footer { background: #000; padding: 60px 0; margin-top: 60px; color: #fff; }
footer .container { display: flex; gap: 40px; justify-content: center; align-items: flex-start; }
footer .container > div:nth-child(1), footer .container > div:nth-child(3) { width: 25%; }
footer .container > div:nth-child(2) { width: 50%; }
footer .container > div:nth-child(1) { display: flex; }
footer .logo { text-align: center; }
footer .logo p { color: #fff; margin: 10px 0 0 0; }
footer .text-center { text-align: center; }
footer .text-center p { font-size: clamp(14px, 1vw, 20px); font-weight: 300; text-wrap: balance; }
footer .text-center p + p { margin-top: 20px; }
footer ul { list-style: none; text-align: right; }
footer ul li { margin-bottom: 15px; }
footer ul li a { font-size: clamp(14px, 1vw, 18px); color: #fff; font-weight: 800; } @media only screen and (max-width: 991px) {
header nav { display: none; }
header nav ul li { display: block; text-align: center; }
header nav ul li:not(:last-child) { margin: 0 0 20px 0; }
header nav ul li a { font-size: 24px; font-weight: 700; text-transform: uppercase; }
.nav-toggle { display: block; }
.search-toggle { margin-left: 0; }
.nav-active { overflow-y: hidden; }
.nav-active header { height: 100vh; }
.nav-active header nav { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.with-hero.nav-active .logo img { filter: unset; }
.with-hero.nav-active .logo p { color: #000; }
.with-hero.nav-active header nav ul li a, .with-hero.nav-active .search-toggle { color: #000; }
.with-hero.nav-active .nav-toggle .bar { background: #000; }
.with-hero.nav-active .search { border: 1px solid #000; }
.logos { position: unset; flex-direction: row; gap: 20px; flex-wrap: wrap; margin-top: 15px; }
.logos > div { width: calc(25% - 15px); }
.logos img { width: 100%; min-width: unset; max-width: unset; }
.hero.basic { height: 40vh; height: 40vh; min-height: unset;}
.wp-block-image.cover-img img { position: unset; left: unset; top: unset; right: unset; bottom: unset; }
.wp-block-image.cover-img { margin: 0; }
footer { padding: 50px 0; margin-top: 0; }
footer .container { flex-direction: column; }
footer .container > div:nth-child(1), footer .container > div:nth-child(2), footer .container > div:nth-child(3) { width: 100%; }
footer .container > div:nth-child(1) { justify-content: center; }
footer ul { text-align: center; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.container { padding: 0 40px; }
header { padding: 30px 0; }
.logo img { height: 40px; }
.logo p { font-size: 18px; }
header nav ul li a { font-size: 26px; }
.nav-toggle { width: 34px; height: 28px; margin-left: 30px; }
.search-toggle { font-size: 30px; }
.wp-block-image { margin: 30px 0; }
}
@media only screen and (max-width: 767px) {
body > section:first-of-type { padding-top: 20px; }
.container { padding: 0 20px; }
header { padding: 20px 0; }
header .container { gap: 0; }
.logo img { height: 32px; }
.logo p { font-size: 14px; margin-left: 10px; }
header nav ul li a { font-size: 22px; }
.nav-toggle { width: 30px; height: 24px; margin-left: 25px; }
.search-toggle { font-size: 24px; }
.search { height: 35px; right: 19px; }
.search input { width: 150px; padding-left: 10px; }
.search button { padding: 0 10px; }
.hero { height: 100vh; height: 100dvh;  padding-bottom: 40px; }
.style-text h1 { margin: 0 0 15px 0; }
.date, .style-text .date { margin-bottom: 20px; }
.wp-block-group.item + .wp-block-group.item { margin-top: 20px; }
.wp-block-image { margin: 20px 0; }
} .font-icon { font-family: 'font-icons'; }
@font-face {
font-family: 'font-icons';
src: url(//bvb.nsz.hr/wp-content/themes/brzevisebolje/assets/fonts/font-icons.eot?35223828);
src: url(//bvb.nsz.hr/wp-content/themes/brzevisebolje/assets/fonts/font-icons.eot?35223828#iefix) format('embedded-opentype'),
url(//bvb.nsz.hr/wp-content/themes/brzevisebolje/assets/fonts/font-icons.woff2?35223828) format('woff2'),
url(//bvb.nsz.hr/wp-content/themes/brzevisebolje/assets/fonts/font-icons.woff?35223828) format('woff'),
url(//bvb.nsz.hr/wp-content/themes/brzevisebolje/assets/fonts/font-icons.ttf?35223828) format('truetype'),
url(//bvb.nsz.hr/wp-content/themes/brzevisebolje/assets/fonts/font-icons.svg?35223828#font-icons) format('svg');
font-weight: normal;
font-style: normal;
} .row { display: flex; flex-wrap: wrap; margin: 0 -20px;  }
.row > * { padding: 0 20px; }
[class*="col-"] { width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%;}
.col-10 { flex: 0 0 auto; width: 83.33333333%;}
.col-9 { flex: 0 0 auto; width: 75%;}
.col-8 { flex: 0 0 auto; width: 66.66666667%;}
.col-7 { flex: 0 0 auto; width: 58.33333333%;}
.col-6 { flex: 0 0 auto; width: 50%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%;}
.col-4 { flex: 0 0 auto; width: 33.33333333%;}
.col-3 { flex: 0 0 auto; width: 25%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%;}
.col-1 { flex: 0 0 auto; width: 8.33333333%;}
.offset-1 { margin-left: 8.33333333%; }
.offset-2 { margin-left: 16.66666667%; }
.offset-3 { margin-left: 25%;}
.offset-4 { margin-left: 33.33333333%;}
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important ;}
.order-5 { order: 5 !important; }
@media (min-width: 768px) {
.col-md-auto { flex: 0 0 auto; width: auto; }
.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-md-3 { flex: 0 0 auto; width: 25%; }
.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-md-6 { flex: 0 0 auto; width: 50%; }
.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-md-9 { flex: 0 0 auto; width: 75%; }
.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-md-12 { flex: 0 0 auto; width: 100%; }
.offset-md-1 { margin-left: 8.33333333%; }
.offset-md-2 { margin-left: 16.66666667%; }
.offset-md-3 { margin-left: 25%;}
.offset-md-4 { margin-left: 33.33333333%;}
.order-md-0 { order: 0 !important; }
.order-md-1 { order: 1 !important; }
.order-md-2 { order: 2 !important; }
.order-md-3 { order: 3 !important; }
.order-md-4 { order: 4 !important ;}
.order-md-5 { order: 5 !important; }
}
@media (min-width: 992px) {
.col-lg-auto { flex: 0 0 auto; width: auto; }
.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-lg-3 { flex: 0 0 auto; width: 25%; }
.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-lg-6 { flex: 0 0 auto; width: 50%; }
.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-lg-9 { flex: 0 0 auto; width: 75%; }
.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-lg-12 { flex: 0 0 auto; width: 100%; }
.offset-lg-1 { margin-left: 8.33333333%; }
.offset-lg-2 { margin-left: 16.66666667%; }
.offset-lg-3 { margin-left: 25%;}
.offset-lg-4 { margin-left: 33.33333333%;}
.order-lg-0 { order: 0 !important; }
.order-lg-1 { order: 1 !important; }
.order-lg-2 { order: 2 !important; }
.order-lg-3 { order: 3 !important; }
.order-lg-4 { order: 4 !important ;}
.order-lg-5 { order: 5 !important; }
}
@media (min-width: 1200px) {
.col-xl-auto { flex: 0 0 auto; width: auto; }
.col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xl-3 { flex: 0 0 auto; width: 25%; }
.col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xl-6 { flex: 0 0 auto; width: 50%; }
.col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xl-9 { flex: 0 0 auto; width: 75%; }
.col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xl-12 { flex: 0 0 auto; width: 100%; }
.offset-xl-1 { margin-left: 8.33333333%; }
.offset-xl-2 { margin-left: 16.66666667%; }
.offset-xl-3 { margin-left: 25%;}
.offset-xl-4 { margin-left: 33.33333333%;}
.order-xl-0 { order: 0 !important; }
.order-xl-1 { order: 1 !important; }
.order-xl-2 { order: 2 !important; }
.order-xl-3 { order: 3 !important; }
.order-xl-4 { order: 4 !important ;}
.order-xl-5 { order: 5 !important; }
}
@media (min-width: 1400px) {
.col-xxl-auto { flex: 0 0 auto; width: auto; }
.col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xxl-3 { flex: 0 0 auto; width: 25%; }
.col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xxl-6 { flex: 0 0 auto; width: 50%; }
.col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xxl-9 { flex: 0 0 auto; width: 75%; }
.col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xxl-12 { flex: 0 0 auto; width: 100%; }
.offset-xxl-1 { margin-left: 8.33333333%; }
.offset-xxl-2 { margin-left: 16.66666667%; }
.offset-xxl-3 { margin-left: 25%;}
.offset-xxl-4 { margin-left: 33.33333333%;}
.order-xxl-0 { order: 0 !important; }
.order-xxl-1 { order: 1 !important; }
.order-xxl-2 { order: 2 !important; }
.order-xxl-3 { order: 3 !important; }
.order-xxl-4 { order: 4 !important ;}
.order-xxl-5 { order: 5 !important; }
}