@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-Italic.woff") format("woff");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Crimson";
src: url("../fonts/CrimsonPro-BoldItalic.woff") format("woff");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-Italic.woff") format("woff");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Zilla";
src: url("../fonts/ZillaSlab-BoldItalic.woff") format("woff");
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Thin.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}


@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}



@font-face {
font-family: 'Icomoon';
src: url('../fonts/icomoon7.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: inherit;
}
:root {
--tamnoplava-hladna: #1B2893;
--tamnoplava-topla: #00529E;
--svijetloplava: #eefaff;
--svjetlije-plava: #57B8E8;
--sivoplava: #4D80A1;
--zelena: #0C8E8E;
--svijetlozelena: #2AB674;
--siva-topla: #5C5F5F;
--tamnije-crvena: #b51100;
--tamnocrvena: #C13122;
--zarkocrvena: #ED1C24;
--crvena:#EA584A;
--narancasta: #F5813E;
--zuta: #FFCF01;
--oker: #DF9A34;
--ljubicasta: #7666AD;
--pozadina: #EFEFEF;
--page-navigation: #C13122;
--tamnosivoplava: #394553;
--navlink: #000; 
--navlink-icon: #315177; 
--page-navigation-hover: #0C8E8E;
}



.icon,
.icon::before,
.pagenav a::before,
.pagenav a::after {
font-family: 'Icomoon' !important;
font-weight: normal !important;
}

body {
margin: 0;
padding: 0;
font-family: "Crimson";
font-size: 22px;
font-weight: 400;
line-height: 1.3;
color: #000;
background-color: var(--pozadina);
}

.wrap {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
max-width: 1084px;
margin: 0 auto;
}

header {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
padding: 50px 100px 40px;
background: linear-gradient(0deg, rgba(45,146,208,1) 0%, rgba(0,83,159,1) 88%, rgba(0,83,159,1) 100%);
}
.site_title {
font-family: "RobotoCondensed";
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.site_title .name {
font-size: 44px;
text-transform: uppercase;
}
.site_title .author {
font-size: 20px;
}

.header-right {
display: grid;
grid-template-columns: 1fr auto;
gap: 25px;
}

.languages {
font-size: 1em;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row nowrap;
gap: 15px;
justify-content: flex-end;
align-items: center;
}

.languages a {
display: block;
font-family: "Roboto";
font-size: 0.636em;
line-height: 1;
color: var(--tamnoplava-topla);
font-weight: 500;
padding: 5px 6px;
background-color: #fff;
border-radius: 3px;
}
.languages a.active {
background-color: #a3e0ff;
}
.languages a:hover {
color: var(--tamnoplava-topla);
background-color: #a3e0ff;
}

.utility {
font-size: 1em;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
display: flex;
flex-flow: row nowrap;
gap: 15px;
justify-content: flex-end;
align-items: center;
}

main {
flex: 1;
padding: 0 100px 70px;
background-color: #fff;
border-top: 5px solid var(--pozadina);
}
footer {
flex: 0;
padding: 40px 70px 60px;
font-family: "RobotoCondensed";
font-size: 16px;
font-weight: 400;
background-color: #fff;
border-top: 5px solid var(--pozadina);
}

.article-content p.figure {
margin-top: 2em;
}
.caption {
font-family: "Zilla";
font-size: 0.8em;
font-weight: 400;
margin-bottom: 2em;
}

p {
margin: 1em 0;
}
img {
display: block;
width: 100%;
}

a {
color: var(--tamnocrvena);
text-decoration: none;
}
a:hover {
color: var(--zelena);
}
header a {
color: #fff;
}
header a:hover {
color: #a3e0ff;
}


.bars {
font-size: 24px;
margin: 1em 0 2em;
padding: 20px;
border-top: 4px solid var(--tamnoplava-topla);
border-bottom: 4px solid var(--tamnoplava-topla);
}
.pullquote {
margin: 1.5em 0 1.5em;
padding: 20px 40px;
border-top: 4px solid var(--tamnoplava-topla);
border-bottom: 4px solid var(--tamnoplava-topla);
background: var(--svijetloplava);
}
.pullquote h3 {
color: var(--tamnoplava-topla);
margin-top: 0;
}
.pullquote p:last-child {
margin-bottom: 0;
}




.timestamp {
margin-top: 50px;
font-family: "Roboto";
font-size: 12px;
font-weight: 400;
color: #666;
}

.blog .timestamp {
margin: -10px 0 20px;
}

.contents .timestamp {
margin: 30px 0 10px;
padding-top: 5px;
font-family: "Roboto";
font-size: 12px;
font-weight: 400;
color: #666;
border-top: 1px dotted #000;
}



article h1 {
margin: 20px 0 40px;
font-family: "Zilla";
font-size: 1.545em;
font-weight: 600;
line-height: 1.2;
}

.lead {
font-size: 23px;
color: var(--tamnoplava-topla);
margin: 1em 0 2em;
padding: 20px 0;
border-top: 4px solid var(--tamnoplava-topla);
border-bottom: 4px solid var(--tamnoplava-topla);
}
.article-content p,
.text-box .columns p {
margin-top: 0;
}
.article-content.album {
margin-top: 3em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.article-content.album p {
margin: 0;
}
.article-content.album img {
width: 100%;
}

h2 {
font-family: "Zilla";
font-size: 1.3em;
font-weight: 600;
line-height: 1.2;
margin: 20px 0;
-webkit-column-break-inside: avoid;
break-iniside: avoid;
column-break-inside: avoid;
break-inside: avoid;
}
h2.separator {
margin-top: 30px;
padding-top: 15px;
border-top: 1px dotted #000;
}
h2.subtitle {
margin: -20px 0 30px;
}




h3 {
font-family: "Zilla";
font-size: 1.2em;
font-weight: 600;
line-height: 1.2;
margin: 20px 0;
}


.pagenav {
padding: 30px 0 0;
display: flex;
justify-content: space-between;
font-family: "RobotoCondensed";
font-weight: 700;
font-size: 32px;
line-height: 32px;
}


.blog {
padding-top: 40px;
}


.blog_item h3 {
margin: 0 0 20px 0;
}
.blog_item h3 a {
color: #000;
}
.blog_item h3 a:hover {
color: var(--zelena);
}
.blog_item a.readmore {
display: block;
margin-top: 14px;
font-size: 24px;
line-height: 1;
}

.blog_item {
max-width: 580px;
margin-top: 30px;
padding: 15px 0;
border-top: 1px dotted #000;
}
.blog_item p {
font-size: 20px;
margin: 0;
}

.blog_readmore {
margin-top: 40px;
font-family: "RobotoCondensed";
font-size: 20px;
}


.contents h1 {
margin: 50px 0 40px;
font-family: "RobotoCondensed";
font-size: 32px;
font-weight: 400;
}
.contents h3 {
margin: 0;
font-size: 24px;
}




/*ol ul {
padding-left: 1em;
}
ol ul li {
list-style: disc;
}
.text-box.blue p:last-child,
.text-box.blue ol:last-child,
.text-box.blue ul:last-child,
.text-box.blue li:last-child {
margin-bottom: 0;
}
.text-box .quotes {
width: 40px;
margin-bottom: 1em;
}*/







/*** styling ***/

/*.white-on-blue {
color: #fff;
background: #00529e;
}
.white-on-red {
color: #fff; 
background: #ed1c24;
}
.white-on-orange {
color: #fff; 
background: #f5813e;
}
.white-on-black {
color: #fff; 
background: #000;
}
.white-on-pink {
color: #fff; 
background: #df787a;
}
.black-on-yellow {
color: #000; 
background: #ffcf01;
}
.white-on-grey {
color: #fff; 
background: #58595b;
}
*/
.smallcaps {
font-variant-caps: small-caps;
}
.note {
margin-top: 1.75em;
font-size: 20px;
}

/*** pagination ***/

.pagination {
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid #ccc;
}

.list .pagination {
padding-top: 50px;
padding-left: 0;
}

.pagination-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
gap: 15px;
}

.pagination ul li.disabled {
display: none;
}

.pagination ul li.disabled a {
color: #BCBCBC;
}
.pagination a {
background-color: #444;
color: #fff;
display: block;
height: 36px;
width: 36px;
float: left;
font: 500 17px/36px "Roboto",sans-serif;
text-align: center;
border-radius: 18px;
}
.pagination .active a, .pagination .active a:hover {
color: #000;
background-color: #ccc;
}

.start, .prev, .next, .end {
font: normal 23px/36px "Icomoon", sans-serif;
font-family: "Icomoon" !important;
}
.start, .end {
line-height: 34px;
padding-bottom: 2px;
}

.pagination a:hover {
background-color: var(--zelena);

}

/*.start::before {
content: "\e028";
}
.prev::before {
content: "\e606";
padding-right: 2px;
}
.next::before {
content: "\e607";
padding-left: 2px;
}
.end::before {
content: "\e027";
}*/



/******* to top *******/

.fixed {
display: none;
width: 30px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 200;
}
a#to_top {
display: block;
width: 30px;
text-align: center;
color: var(--zarkocrvena);
}
a#to_top:hover {
color: #000;
}

a#to_top::before {
content: "\e90b";
font-size: 30px;
line-height: 1;
}

/******* end to top *******/





@media screen and (max-width: 1024px) {


main {
padding: 30px 40px 50px;
}
.pagenav {
padding-left: 0;
padding-right: 0;
}
footer {
padding: 40px 40px 60px;
}

}


@media screen and (max-width: 1023px) {

header {
gap: 20px;
padding: 70px 40px 50px;
}


}




@media screen and (max-width: 760px) {

header {
display: block;
padding-top: 50px;
padding-bottom: 40px;
}
main {
padding: 0 40px 70px;
}
.header-right {
margin-top: 40px;
grid-template-columns: 1fr 1fr;
}
.languages,
.utility {
justify-content: flex-start;

}

}


@media screen and (max-width: 680px) {



}


@media screen and (max-width: 640px) {
	
article h1 {
font-size: 1.364em;
}
.contents h1 {
font-size: 1.364em;
}

.lead {
font-size: 1em;
}
h2 {
font-size: 1.2em;
}


.pullquote {
padding: 20px;
}

header, main, footer, .pagenav {
padding-left: 20px;
padding-right: 20px;
}
header {
flex-flow: column;
}
footer {
padding-bottom: 80px;
}
.navbuttons {
top: auto;
bottom: 0;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
column-gap: 2px;
}
.navbuttons a {
width: 100%;
line-height: 30px;
}
.navbuttons .segment {
background: #000;
} 

}



@media screen and (max-width: 480px) {

body {
font-size: 20px;
}
.pullquote {
padding: 20px 10px;
}
footer {
font-size: 15px;
}


}


@media screen and (max-width: 420px) {

.site_title {
font-size: 1.2em;
}
.social {
gap: 20px;
}

}



@media screen and (max-width: 340px) {

main, footer, .pagenav, .sitenav {
padding-left: 10px;
padding-right: 10px;
}
header {
padding-left: 10px;
padding-right: 10px;
}

}


/* Magnific Popup CSS */


.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure {
display: none;
}
.mfp-hide {
display: none !important;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a {
color: #CCC;
}
.mfp-preloader a:hover {
color: #FFF;
}
.mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-s-error .mfp-content {
display: none;
}
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
font-size: 24px;
/*  color: #FFF;
font-style: normal;  
font-family: Arial, Baskerville, monospace;*/ }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1;
}
/*  .mfp-close:active {
top: 1px;
}*/

.mfp-close-btn-in .mfp-close {
color: #000;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
padding-top: 10px;
color: #CCC;
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F;
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F;
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000;
}
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0;
}
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
font-family: "Zilla";
font-size: 15px;
font-weight: 500;
line-height: normal;
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
color: #F3F3F3;
word-wrap: break-word;
padding: 10px 50px 10px 0;
}
.mfp-image-holder .mfp-content {
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {

/* Remove all paddings around the image on small screen */
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
/*padding: 3px 5px;*/
position: fixed;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
/*.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px;
}*/
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0;
}

}
@media all and (max-width: 900px) {

.mfp-arrow {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px;
}

}