:root {
    /*Svetlo-siva*/
    --background-color: #fafafa;
    --background-color: #fffdfa;

    --boja-zastava-crvena: #C6363C;
    --boja-zastava-crvena-rgb: rgb(198,54,60);

    /* Vostok */
    --boja-vostok-plava: #2966F4;
    --boja-vostok-plava-svetla: #7393ff;
    --boja-vostok-plava-tamna: #003dc0;

    --boja-vostok-plava-rgb-0-3: rgb(41, 102, 244, 0.3);
    --boja-vostok-plava-svetla-rgb-0-3: rgb(115, 147, 255, 0.3);
    --boja-vostok-plava-tamna-rgb-0-3: rgb(0, 61, 192, 0.3);

    --boja-vostok-zuta-komplementarna: #F4B729;
    --boja-vostok-zuta-komplementarna-svetla: #ffe95f;
    --boja-vostok-zuta-komplementarna-tamna: #bd8800;

    --boja-vostok-plava-analogna-svetla: #29CCF4;
    --boja-vostok-plava-analogna-tamna: #5129F4;

    --boja-vostok-crvena-trijada: #F42966;
    --boja-vostok-zelena-trijada: #66F429;

    --boja-vostok-roza-tetrada: #F429CC;
    --boja-vostok-oker-tetrada: #F4B729;
    --boja-vostok-zelena-tetrada: #29F451;

    /* Zvezda */
    --boja-zvezda-primarna: #9A0000;

    --boja-zvezda-tekst: #33353f;

    /*Grb-crvena*/
    --boja-grb-crvena-primarna: #a12d2e;
    --boja-grb-crvena-primarna-svetla: #d75e57;
    --boja-grb-crvena-primarna-tamna: #6c0006;

    --boja-grb-crvena-komplementarna: #2DA1A0;
    --boja-grb-crvena-komplementarna-tamna: #006C66;

    /*Grb-žuta*/
    --boja-grb-zuta-sekundarna: #caa52f;
    --boja-grb-zuta-sekundarna-svetla: #ffd660;
    --boja-grb-zuta-sekundarna-tamna: #957700;

    --boja-grb-zuta-sekundarna-rgb-0-3: rgb(202, 165, 47, 0.3);

    --boja-tekst-primarna: #222;

    /* Eksperimentalne boje */
    --boja-enigmatri-ljubicasta: #e9e4ff;
    --boja-enigmatri-zuta: #fff1d6;
    --boja-enigmatri-roza: #fce1dd;

    --boja-skala: #4A5659;

    --boja-dorotej-primarna: #8e16e9;

    --boja-prljavo-plava: #26c6da;
    --boja-prljavo-plava-svetla: #6ff9ff;
    --boja-prljavo-plava-tamna: #0095a8;

    --primary-gray: #f6f8fa;
    --primary-light-gray: #fff;
    --primary-dark-gray: #c3c5c7;
    --color-btn-border: rgba(27, 31, 36, 0.15);
    --color-btn-hover-bg: #f3f4f6;
    --color-btn-hover-border: rgba(27, 31, 36, 0.15);

    /* Varijable od varijabli */
    --boja-primarna: var(--boja-grb-crvena-primarna);
    --boja-primarna-svetla: var(--boja-grb-crvena-primarna-svetla);
    --boja-primarna-tamna: var(--boja-grb-crvena-primarna-tamna);

    --boja-sekundarna: var(--boja-vostok-plava);
    --boja-sekundarna-svetla: var(--boja-vostok-plava-svetla);
    --boja-sekundarna-tamna: var(--boja-vostok-plava-tamna);

    --boja-podcrtano: var(--boja-sekundarna-svetla);
    --boja-podcrtano: var(--boja-vostok-plava-analogna-svetla);
    --boja-podcrtano: var(--boja-primarna-svetla);

    --boja-stubac: var(--boja-vostok-plava);

    --boja-h: var(--boja-primarna);

    --boja-a: var(--boja-sekundarna-tamna);
    --boja-a-hover: var(--boja-sekundarna-svetla);
}

::selection {
    background-color: var(--boja-grb-zuta-sekundarna);
    background-color: var(--boja-grb-zuta-sekundarna-svetla);
    background-color: var(--boja-sekundarna-tamna);
    color: var(--boja-tekst-primarna);
    color: var(--boja-primarna-tamna);
    color: white;
}

* {
    transition: all 350ms ease-in-out;
}

/* Webfont: LingvaRNIDS-Bold */
@font-face {
    font-family: 'LingvaRNIDS';
    src: url('/фонтови/LingvaRNIDS-woff2/LingvaRNIDS-Bold.woff2') format('woff2'),
        /* Modern Browsers */
        url('/фонтови/LingvaRNIDS-otf/LingvaRNIDS-Bold.otf') format('opentype');
    /* Safari, Android, iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: LingvaRNIDS-Italic */
@font-face {
    font-family: 'LingvaRNIDS';
    src: url('/фонтови/LingvaRNIDS-woff2/LingvaRNIDS-Italic.woff2') format('woff2'),
        /* Modern Browsers */
        url('/фонтови/LingvaRNIDS-otf/LingvaRNIDS-Italic.otf') format('opentype');
    /* Safari, Android, iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: LingvaRNIDS-Regular */
@font-face {
    font-family: 'LingvaRNIDS';
    src: url('/фонтови/LingvaRNIDS-woff2/LingvaRNIDS-Regular.woff2') format('woff2'),
        /* Modern Browsers */
        url('/фонтови/LingvaRNIDS-otf/LingvaRNIDS-Regular.otf') format('opentype');
    /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: LingvaRNIDS-Thin */
@font-face {
    font-family: 'LingvaRNIDSThin';
    src: url('/фонтови/LingvaRNIDS-woff2/LingvaRNIDS-Thin.woff2') format('woff2'),
        /* Modern Browsers */
        url('/фонтови/LingvaRNIDS-otf/LingvaRNIDS-Thin.otf') format('opentype');
    /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}



body {
    background-color: var(--background-color);
    color: var(--boja-grb-crvena-primarna);
    color: black;
    color: var(--boja-skala);
    color: var(--boja-tekst-primarna);
    margin: 0;
    padding: 0;
    font-family: Georgia, serif;
    font-family: "LingvaRNIDS", Georgia, serif;
    font-family: "Courier New", "Lucida Console", monospace;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;

    -webkit-font-smoothing: antialiased;
}

header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    flex: 1 100%;
    background: white;
    padding: 10px;
}

header #logo {
    flex: 1 100%;
    text-align: center;
}

header #logo a {
    color: var(--boja-primarna);
    text-decoration: none;
}

header #logo img {
    padding: 5px 0 0 0;
    margin: 10px;
}

nav {
    flex: 1 100%;
    background-color: var(--boja-primarna-tamna);
    background-color: var(--boja-primarna);
    color: white;
    box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
    margin: 0 0 10px 0;
    font-variant: small-caps;
    letter-spacing: 3px;
}

.navigation {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
}

.navigation li:hover {
    background-color: var(--boja-grb-zuta-sekundarna-svetla);
    background-color: var(--boja-primarna-svetla);
    box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
}

.navigation li.selected {
    background-color: var(--boja-sekundarna-tamna);
    background-color: var(--boja-sekundarna);
    box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
}

.navigation a {
    color: black;
    color: white;
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 27px;
    padding: 10px;
    text-decoration-line: none;
}

.navigation a.selected {
    color: white;
}

.navigation .dropdown {
    position: relative;
}

.navigation .dropdown a img {
    vertical-align: middle;
}

.navigation .dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--boja-grb-zuta-sekundarna);
    background-color: var(--boja-primarna-tamna);
    background-color: var(--boja-primarna);
    min-width: 160px;
    box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
    width: auto;
    /* overflow: auto; */
    z-index: 1;
}

.navigation .dropdown .dropdown-content a {
    float: none;
    color: black;
    color: white;
    display: block;
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 27px;
    padding: 10px;
    text-decoration-line: none;
}

.navigation .dropdown .dropdown-content a:hover {
    background-color: var(--boja-grb-zuta-sekundarna-svetla);
    background-color: var(--boja-primarna-svetla);
    box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
}

.navigation .dropdown .dropdown-content a.selected {
    background-color: var(--boja-sekundarna-tamna);
    background-color: var(--boja-sekundarna);
    color: white;
    box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
}

.navigation .dropdown:hover .dropdown-content {
    display: block;
}

.navigation .dropdown div.down-arrow {
    background-image: url(/слике/иконице/expand_more_white_24dp.svg);
    width: 24px;
    height: 24px;
    float: right;
    margin-top: 3px;
}

.navigation .dropdown div.down-arrow.selected {
    background-image: url(/слике/иконице/expand_more_white_24dp.svg);
}

.footer {
    flex: 1 100%;
    background: var(--boja-grb-zuta-sekundarna-tamna);
}

article {
    flex: 1 100%;
    font-size: 20px;
    font-size: x-large;
    /* overflow-y: scroll; */
}

article h1,
h2,
h3,
h4 {
    /* color: var(--boja-grb-crvena-primarna);
    color: var(--boja-grb-crvena-komplementarna);
    color: var(--boja-sekundarna-tamna);
    color: var(--boja-h); */
    margin: 20px 5px;
    padding: 5px;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 3px;
    /*text-shadow: 1px 1px 2px black;*/
}

article h3,
h4 {
    /* color: var(--boja-grb-zuta-sekundarna-tamna); */
    text-align: left;
}

article h1 {
    font-size: 48px;
    font-size: 42px;
    font-size: 36px;
}

article h2 {
    font-size: 42px;
    font-size: 36px;
    font-size: 30px;
}

article h3 {
    font-size: 36px;
    font-size: 30px;
    font-size: 24px;
}

article h4 {
    color: var(--boja-grb-zuta-sekundarna-tamna);
}

article .column {
    margin: auto;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

article ol {
    margin: 10px 10px;
    margin: 10px 5px 30px 20px;
    word-wrap: anywhere;
    line-height: 1.25em;
}

article ol li {
    margin: 0 0 5px 0;
}

article ul li {
    margin: 0 10px 5px 0;
}

article p.link {
    line-height: 1.5em;
}

article p.link a {
    font-weight: bold;
}

article p span.index {
    margin: 0 0 0 10px;
    color: white;
    background-color: #0087eb;
    font-size: 16px;
    font-weight: bold;
    padding: 3px;
    /* border: 2px solid black; */
    border-radius: 5px;
}

article p.link span.meta {
    font-size: 16px;
    font-weight: bold;
    /* margin: 0 0 0 20px; */
}

article transition {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .35s ease-in-out, transform .35s ease-in-out, background-size .5s ease-in-out;
}

article .styled {
    border: 0;
    line-height: 2.5;
    margin: 5px 10px 5px 10px;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    /*border-radius: 10px;*/
    background-color: var(--boja-grb-crvena-primarna);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}

article .styled:hover {
    background-color: var(--boja-vostok-plava-svetla);
}

article .styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}

article p {
    margin: 5px;
    padding: 5px;
    line-height: 1.25em;
    line-height: 35px;
}

article p img.jutjub {
    width: 100%;
}

article p.istaknuto {
    color: black;
    background-color: var(--boja-grb-zuta-sekundarna-svetla);
    border: 1px solid var(--boja-grb-zuta-sekundarna);
    border-left: 10px solid var(--boja-grb-zuta-sekundarna);
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
}

article p.istaknuto img {
    border: 1px solid var(--boja-grb-zuta-sekundarna-svetla);
    border-radius: 5px;
    margin: 0;
}

article p.istaknuto img:hover {
    background-color: var(--boja-grb-zuta-sekundarna);
    border: 1px solid var(--boja-grb-zuta-sekundarna);
    border-radius: 5px;
    transition-duration: .1s;
}

article p.istaknuto img:active {
    background-color: var(--boja-grb-zuta-sekundarna-tamna);
    border: 1px solid var(--boja-grb-zuta-sekundarna-tamna);
    border-radius: 5px;
    transition-duration: .1s;
}

article .column p.naglaseno {

    line-height: 35px;
    font-size: x-large;
}

article section {
    margin: 10px 0 40px 0;
    /* padding: 20px 0; */
    flex: 1 100%;
}

article section img {
    /* width: 95%; */
    margin: 10px;
    float: left;
}

.plava-transparentna {
    background-color: var(--boja-vostok-plava-rgb-0-3);
    background-color: var(--boja-vostok-plava-tamna-rgb-0-3);
    background-color: var(--boja-vostok-plava-svetla-rgb-0-3);
    color: white;
    color: var(--boja-tekst-primarna);
}

.zuta {
    background-color: var(--boja-enigmatri-zuta);
    background-color: var(--boja-sekundarna-tamna);
    background-color: var(--boja-grb-zuta-sekundarna);
    background-color: var(--boja-grb-zuta-sekundarna-rgb-0-3);
}

span.podcrtano {
    /* background-image: linear-gradient(#FF4370, #FF4370);
    background-size: 100% 10px;
    transition: opacity .35s ease-in-out .9s, top .35s ease-in-out .9s, background-size .45s ease-in-out 1.2s; */

    border-bottom: solid 10px var(--boja-podcrtano);
    /* background-image: linear-gradient(white, var(--boja-sekundarna-svetla)); */
    /* font-weight: bold; */
}

article p.footnote {
    font-size: 18px;
}

article p.asterisk {
    text-align: center;
    color: var(--boja-grb-crvena-primarna);
    color: var(--boja-primarna-tamna);
}

article p span.first-letter {
    font-size: 40px;
    line-height: 70px;
}

article p.first-letter::first-letter {
    initial-letter: 2;
    font-size: 45px;
    float: left;
    padding: 0 5px 0 0;
}

article a {
    color: var(--boja-a);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

article a:hover {
    color: var(--boja-a-hover);
    text-decoration: none;
}

.ad-bottom {
    text-align: center;
}

div.sekcija {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    margin: 5px;
    padding: 5px;
}

div.sekcija.plava {
    background-color: var(--boja-grb-crvena-komplementarna);
    background-color: var(--boja-primarna);
    color: white;
}

div.sekcija.plava a {
    color: white;
}

div.sekcija div.stubac {
    flex: 1 30%;
    /* max-width: 50%; */
    font-size: x-large;
    border-radius: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1), 3px 10px 30px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 15px 15px 5px rgba(0, 0, 0, 0.4);
    margin: 0 10px 10px 0;
    padding: 5px;
}

div.sekcija div.stubac p {
    padding: 0;
}

.plava {
    /* background: linear-gradient(red, yellow);
    background: linear-gradient(var(--boja-sekundarna-tamna), var(--boja-sekundarna-svetla)); */
    background-color: var(--boja-stubac);
    color: white;
}

.plava a {
    color: white;
}

.plava h2 {
    color: white;
}

.citat {
    background: url(/слике/иконице/цитат.svg) 15px top no-repeat #f3f3f3;
    margin: 20px 5px;
    /* letter-spacing: 1px; */
    line-height: 35px;
    /* padding: 1em 40px 1em 98px; */
    padding: 30px 0 30px 100px;
}

.image-in-text {
    display: flex;
    flex-flow: column wrap;
    margin: 0 20px 10px 0;
    float: left;
}

.slika-u-tekstu {
    margin: 0 20px 10px 0;
    float: left;
    width: 340px;
}

@media all and (max-width: 400px) {
    header #logo {
        flex: 1 100%;
    }
}

@media all and (max-width: 440px) {
    section img {
        width: 95%;
    }
}

@media all and (max-width: 500px) {
    article p, .citat {
        font-size: 18px;
    }
}

@media all and (min-width: 400px) and (max-width: 500px) {
    header #logo {
        flex: 1 100%;
    }
}

@media all and (min-width: 500px) and (max-width: 1000px) {
    
}

@media all and (max-width: 600px) {
    .navigation {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }

    .navigation a {
        text-align: center;
        padding: 10px 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .navigation li:last-of-type a {
        border-bottom: none;
    }

    .navigation .dropdown .dropdown-content {
        width: 100%;
    }
}

@media all and (max-width: 800px) {
    article div.column div.sekcija {
        -webkit-flex-flow: column;
        flex-flow: column;
    }

    article div.column div.sekcija div.stubac {
        flex: 1 100%;
        margin: 0 0 10px 0;
    }
}

@media all and (max-width: 1000px) {
    article {
        flex: 1 100%;
    }

    article .column .converters {
        flex-flow: column;
    }

    article .column .converters .left-column {
        flex: 1;
        text-align: center;
    }

    article .column .converters .middle-column {
        flex: 1;
        text-align: center;
    }

    article .column .converters .right-column {
        flex: 1;
        text-align: center;
    }

    article button {
        margin: 10px 0 15px 0;
    }
}

@media all and (min-width: 1000px) and (max-width: 1200px) {
    article .column .converters .middle-column {
        flex: 1 15%;
    }
}

@media all and (min-width: 1200px) {
    article .column {
        width: 1200px;
    }
}