@charset "utf-8";
/* CSS Document */

@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: 'Heuristica';
src: url('../fonts/heuristica-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Heuristica';
src: url('../fonts/heuristica-italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Heuristica';
src: url('../fonts/heuristica-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Heuristica';
src: url('../fonts/heuristica-bolditalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'Icomoon';
src: url('../fonts/icomoon6.woff') format('woff');
font-weight: normal;
font-style: normal;
}

.icon.searchbutton,
.icon::before,
.icon::after,
#navmainswitch::before,
#searchswitch::before,
.image-link::after {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
/*line-height: 1;*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


:root {
--background: #2a3035;
--cro_red: #ca1b29;
--line: #434E56;
--faint: #63737E;
--silver: #dadada;

--blue: #36a5ef;
--red: #d4327e;
--green: #8ab444;
--header_bg: #f7f7f7;
--navigation_bg: #4b515b;
--navlink: #fff;
--navlink_hover: #ffde00;
--sidebar: #000;
--sidebar_bg: #cccfd3;
--link: #0D5188;
--link_hover: #000;
--article_link_hover: #168AE9;
--toplink_hover: #168AE9;
}



html {
height: 100%;
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}


body {
min-height: 100vh;
margin: 0;
padding: 0;
font-family: 'Heuristica';
font-size: 18px;
font-weight: 400;
color: #fff;
line-height: 1.6;
hyphens: manual;
-ms-hyphens: manual;
-webkit-hyphens: manual;
background-color: #1e1d24;
-moz-osx-font-smoothing: grayscale;
}

.wrapper {
max-width: 1920px;
margin: 0 auto;
min-height: 100vh;
/*display: grid;*/
background-color: var(--background);
}

.content {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
.column {
width: 1440px;
margin: 0 auto;
padding: 0 40px;
}

header .column,
footer .column {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: 40px;
}
header {
padding: 50px 0 40px;
border-bottom: 1px solid var(--line);
line-height: 1;
}
header .left {
font-size: 50px;
color: var(--cro_red);
}
header .left span {
display: inline-block;
white-space: nowrap;
}

header .right {
font-family: "Roboto";
font-size: 20px;
font-weight: 500;
color: #ececec;
}

footer {
padding: 40px 0 60px;
border-top: 1px solid var(--line);
font-family: "Roboto";
font-size: 18px;
}

footer .left {
display: flex;
flex-flow: row wrap;
gap: 25px;
}

main {
width: 100%;
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.grid_rows main {
display: grid;
grid-template-rows: auto 96px;
}


.content_center {
padding: 80px 0 60px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.content_center img {
width: 100%;
}

.year {
font-size: 60px;
line-height: 1;
color: var(--silver);
}
.date {
display: inline-block;
padding-top: 20px;
margin-bottom: 20px;
color: var(--silver);
border-bottom: 1px dotted #fff;
text-align: right;
}

.image-link {
position: relative;
display: block;
width: 100%;
min-height: 374px;
background-repeat: no-repeat;	
background-position: center center;
background-size: cover;
}

.image-link::after {
content: "\e916";
font-size: 16px;
line-height: 1;
color: #fff;
display: block;
position: absolute;
bottom: 0;
right: 0;
padding: 4px;
background: #000;
}
.image-link:hover::after {
background: var(--cro_red);
}

img {
display: block;
}

h1 {
font-size: 34px;
font-weight: 400;
margin: 80px 0 30px;
}
 
article h1 {
font-size: 24px;
line-height: 1.4;
margin: 40px 0 30px;
}
article a {
text-decoration: underline;
color: #fff;
}
article a:hover {
color: var(--cro_red);
text-decoration: none;
}

.credits a {
text-decoration: none;
color: var(--cro_red);
}
.credits a:hover {
color: #fff;
text-decoration: underline;
}
.columns_2 a {
text-decoration: none;
color: #fff;
}
.columns_2 a:hover {
color: var(--cro_red);
}

.nobreak {
page-break-inside: avoid;	
}

h4 {
font-size: 24px;
font-weight: 400;
color: var(--silver);
margin: 0 0 1em;	
}

.photocredit {
min-height: 32px;
margin-top: 10px;
font-family: "Roboto";
font-size: 10px;
color: #ececec;
}

.images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.split {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 10px;
/*max-height: 374px;*/
}

.images.multiple .split .image-link {
min-height: 0;
height: 100%;
}

.intro_image img { 
width: 100%;
}


.columns_2 {
width: 100%;
columns: 300px 2;
column-gap: 81px;
column-rule: solid 1px var(--line);
column-fill: revert;
margin: 80px 0;
}
.columns_2 p {
margin: 0 0 1em;
}
.columns_2 li {
break-inside: avoid;
margin: 0 0 1em;
}


.blog {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 40px;
}
.blog_item {
min-height: 300px;
border: 1px solid #ccc;
}


.pagenav, 
.langnav {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: 20px;
font-size: 30px;
line-height: 1;
}

.pagenav { 
margin-bottom: 60px;
}

.title a {
color: var(--cro_red);
text-decoration: none;
}
.title a:hover {
color: #fff;
}


.langnav a, 
.pagenav a {
display: block;
color: #fff;
text-decoration: none;
}
footer a {
color: #fff;
text-decoration: none;
font-size: 16px;
}
.pagenav a:hover,
.langnav a:hover, 
footer a:hover {
color: var(--cro_red);
}

footer a::before {
display: inline-block;
margin-right: 8px;
}
a#croatia::before {
content: "\e901";
}
a#sitemap::before {
content: "\e94b";
}
a#credits::before {
content: "\e913";
}



.langnav a.active, 
.pagenav a.inactive {
color: var(--faint);
}
.pagenav a.prev::before {
content: "\e5c4";
}
.pagenav a.next::before {
content: "\e5c8";
}

#navmainswitch::before {
content: "\e5d2";
font-size: 30px;
}
#navmainswitch.expand::before {
content: "\e921";
color: var(--cro_red);
}
#searchswitch::before {
content: "\f002";
font-size: 18px;
}
#to_top::before {
content: "\e90b";
font-size: 24px;
}


#navmain {
display: none;
}

#contents {
list-style: none;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr) ); 
gap: 15px;
font-family: "Roboto";
font-size: 16px;
line-height: 1;
border-bottom: 1px solid var(--line);
padding: 30px 0;
}


#navmain a {
text-decoration: none;	
color: #fff;
display: block;
padding: 9px;
background: #1E2226;
border-radius: 3px;
}
#navmain a:hover {
background-color: var(--cro_red);
}
#navmain .current a {
color: #fff;
background: var(--faint);
}
#navmain div sub {
font-size: 12px;
padding-left: 2px;
}

.bottomspace {
margin-bottom: 3em;	
}
.insignia {
display: flex;
flex-flow: row nowrap;
gap: 40px;
}
.insignia p {
margin: 0;
}
.insignia p:last-child img {
width: 150px;
}
.scaps {
font-variant: small-caps;
/*font-size:1.1em;*/ 
}
sup {
font-size:.7em; 
}





.modal {
position: relative;
width: 100%;
max-width: 400px;
margin: -30vh auto 0;
padding: 30px;
font-family: "Roboto";
color: #fff;
background: var(--background);
border-radius: 6px;
}
label.finder {
display: block;
font-size: 20px;
font-weight: 500;
text-align: center;
margin: 0 auto 25px;
}


/*.search_inner {
margin: 20px auto 10px;
}
*/

.inputfield {
width: 100%;
padding: 0 10px;
background-color: transparent;
border: none;
font: 400 16px/52px 'Roboto', sans-serif;
text-align: center;
color: #666;
background: #fff;
border-radius: 4px;
}
.inputfield:focus {
outline: none;
color: #000;
}
.inputfield:focus::placeholder {
  color: transparent;
}
.searchbutton {
display: block;
width: 80px;
margin: 30px auto 0;
font-size: 20px;
line-height: 40px;
border: none;
text-align: center;
color: #fff;
border-radius: 4px;
cursor: pointer;
outline: none;
background-color: var(--faint);
}
.searchbox:focus .searchbutton {
color: #000;
}
/*.searchbutton.popup {
font: 400 20px/40px "icomoon", sans-serif;
}
*/

#search-result-list {
columns: 150px 5;
column-gap: 41px;
column-rule: solid 1px var(--line);
column-fill: revert;
margin: 40px 0 50px;	
}
.searchres ol {
margin: 0;
padding-top: 0;
columns: 150px 2;
column-gap: 21px;
column-rule: solid 1px var(--line);
column-fill: revert;
}
.searchres a {
text-decoration: none;
}
.form_container {
margin-top: 80px;
}
.form_container .searchbox {
max-width: 320px;
display: flex;
gap: 10px;
margin-bottom: 60px;
}
.form_container .inputfield {
font: 400 16px/1 'Roboto', sans-serif;
text-align: left;
}
.form_container .searchbutton {
margin: 0;
}

.searchbutton:hover,
.searchbutton:active {
background: var(--cro_red);
}


.result__item {
margin-bottom: 10px;	
}

ul.pagination {
list-style: none;
margin: 0 0 80px;
padding: 0;
display: flex;
gap: 20px;
}

.page-item:first-child,
.page-item:nth-of-type(2),
.page-item:nth-last-of-type(1),
.page-item:nth-last-of-type(2)  {
display: none;	
}
.page-item a {
display: block;
width: 36px;
height: 36px;
background: var(--faint);
text-align: center;
font: 700 16px/36px 'Roboto', sans-serif;
border-radius: 17px;
}
.page-item a:hover {
color: #fff;
background: var(--cro_red);
}


.active.page-item a {
color: var(--cro_red);	
background: var(--silver);
}





/************** media queries ****************/


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

.column {
width: 100%;
}

main {
max-width: none;
padding: 0 60px;
}

.alt_content main,
#navmain div {
max-width: none;
margin: 0;
}

#navmain div {
width: 100%;
}

.content_center {
gap: 60px;
}

/*.alt_content .pagenav {
width: 100%;
}
*/
.image-link {
min-height: 0;
}

}

@media screen and (max-width: 1364px) {
	
header .column {
align-items: flex-start;
}
	
}

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


.insignia {
flex-flow: row wrap;
margin-bottom: 30px;
}
.insignia p {
width: 100%;
}

.insignia p:last-child img {
margin: 0 auto;
}



}


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

header .left {
font-size: 40px;
}

.content_center {
padding: 60px 0 40px;
gap: 40px;
}
h1 {
font-size: 32px;
margin: 60px 0 30px;
}

.columns_2 {
margin: 40px 0 40px;
}


}




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

body {
font-size: 16px;	
}


header .left {
font-size: 34px;
line-height: 1.2;
}

header .right {
padding-top: 7px;
}

.year {
font-size: 50px;
}

article h1 {
font-size: 20px;
margin: 30px 0;
}

}



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


.content_center {
padding: 60px 0 30px;
display: block;
}
/*.pagenav {
margin: 0 40px 60px;
}*/

article:first-child {
margin-bottom: 100px;
} 


}




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

header {
padding: 0;
}
header .column {
padding: 40px 0 15px;
}
header .left {
padding: 0 40px;
}
header .right {
width: 100%;
justify-content: flex-start;
padding: 15px 40px 0;
border-top: 1px solid var(--line);
}

header .column {
flex-flow: column nowrap;
align-items: flex-start;
gap: 20px;
}

main {
padding: 0 40px;
}
#navmain {
margin: 0 -40px;
}
#navmain div {
padding: 20px 40px;
}



.pagenav {
  margin-bottom: 40px;
}

}


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

header .left {
padding: 0 20px;
}
header .right {
padding: 15px 20px 0;
}

main {
padding: 0 20px;
}
#navmain {
margin: 0 -20px;
}
#navmain div {
padding: 20px;
}

footer .column {
padding: 0 20px;
}

}