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

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

[class*="icon"],
*::before,
*::after {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
}


html {
height: 100%;
box-sizing: border-box;
font-size: 20px;
}

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


body {
min-height: 100vh;
margin: 0;
padding: 0;
font-family: "Nimbus", serif;
font-weight: 400;
color: #000;
hyphens: manual;
background-color: #f4f4f4;
}

.wrapper {
max-width: 1920px;
margin: 0 auto;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: #fff;
}

header {
padding-top: 50px;
font-family: "RobotoCondensed";
line-height: normal;
text-align: center;
}

header h1 {
font-size: 1.625rem;
font-weight: 700;
margin: 0;
padding: 0 40px;
}
.author-date-separator {
display: none;
}
a {
color: #ab0613;
text-decoration: none;
}

a:hover {
color: #000;
text-decoration: none;
}
article a {
text-decoration: underline;
}
article a:hover {
color: #000;
text-decoration: underline;
}

header .subtitle {
padding: 20px 40px 40px;
font-size: 0.9rem;
color: #000;
}

#menu {
background-color: #826551;
}

#navmain {
display: flex;
flex-flow: row nowrap;
gap: 58px;
justify-content: center;
align-items: center;
padding: 15px 40px;
border-bottom: 1px solid #f4f4f4;
}
#navmain p {
margin: 0;
}
#navmain a {
color: #fff;
font-family: "Roboto";
font-size: 0.9rem;
line-height: normal;
text-align: center;
}
#navmain a:hover {
color: #000;
}

#navmainswitch {
display: none;
}
#navmainswitch {
display: none;
font-size: 30px;
color: #fff;
text-align: left;
padding: 10px 20px;
border-bottom: 1px solid #f4f4f4;
}

#navmainswitch::after {
display: block;
content: "\e5d2";
}


.fp_illustration { 
width: 100%; 
height: 70vh; 
background: url(../img/srednja_europa.png) no-repeat center center;
}
#fp_image {
display: none;	
}

.content {
padding: 40px;
}

footer {
padding: 40px;
border-top: 1px solid #666;
display: flex;
flex-flow: row nowrap;
gap: 100px;
justify-content: center;
align-items: center;
font-family: "Roboto";
font-size: 0.75rem;
line-height: normal;
text-align: center;
}
#hrzz {
max-width: 160px;
}
#croris,
#ffzg {
max-width: 120px;
}


footer p {
margin: 5px 0;
}

article {
max-width: 880px;
margin: 60px auto;
padding: 0 40px;
}
article h1 {
margin: 0 0 40px;
font-size: 1.6rem;
font-weight: 700;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
article h2 {
margin: 1em 0;
font-size: 1.4rem;
font-weight: 700;
}
article h3 {
margin: 1em 0;
font-size: 1.2rem;
font-weight: 700;
}
article h3:nth-of-type(1) {
margin-top: 0;
}


.twocols .article-body {
columns: 300px 2;
column-gap: 40px;
}
.twocols .article-body p {
break-inside: avoid;
}



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

html {
font-size: 18px;
}

#navmain {
display: none;
padding: 0;
border-top: none;
border-bottom: 1px solid #f4f4f4;
}

#navmainswitch {
display: block;
}


#navmain a {
display: block;
text-align: left;
}
#navmain p {
display: block;
padding: 14px 20px;
border-top: 1px solid #f4f4f4;
}

#navmain p:first-child {
border-top: none;
}

footer {
padding: 20px;
flex-flow: row wrap;
gap: 20px;
}

#hrzz {
max-width: 120px;
}

#croris,
#ffzg {
max-width: 100px;
}



}


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

header h1 {
padding: 0 20px;
}

header .subtitle {
padding: 20px 20px 40px;
}

article {
padding: 0 20px;
margin: 50px auto;
}


footer {
padding: 40px 20px;
}

.fp_illustration {
height: auto; 
min-height: 0;
background: none; 
}
#fp_image {
display: block;
width: 100%;
}



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

header h1 {
font-size: 1.3rem;
padding: 0 20px;
}
header .subtitle {
font-size: 0.8rem;
}

}