@import url('CSSVariables.css');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    overflow-x: hidden;
    width: 100%;
}

.NaslovStranice {
    margin-top: 70px;
    margin-bottom: 25px;
    font-size: 40px;
    color: black;
}

span.Napomena {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 100% !important;
}

h2 {
    margin-top: 30px;
    margin-bottom: 40px;
    font-size: 40px;
    font-weight: normal;
}

h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: normal;
}

p.Pitanje {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: normal;
    /*        padding-left: 50px;*/
}

p.Odgovor {
    font-size: 16px;
    padding-left: 50px;
    line-height: 32px;

}

p.Odgovor::before {
    content: "\1F4AC";
    background-color: var(--main-colour);
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 18px;
    margin-left: -50px;
    border-radius: 3px;
}

ul.NabrajanjeOdgovor {
    margin-top: 20px;
    list-style-type: none;
    margin-left: 20px;
    margin-bottom: 40px;
}

ul.NabrajanjeOdgovor li {
    padding-left: 20px;
    font-size: 16px;
    line-height: 28px;
    margin-top: 12px;
    margin-bottom: 12px;
}

ul.NabrajanjeOdgovor li::before {
    content: "\25A0";
    color: var(--main-colour);
    margin-left: -20px;
    margin-right: 12px;
    font-size: 12px;
}


p.Obican {
    font-size: 16px;
}

strong.Vazno {
    background-color: var(--main-colour-light);
    color: var(--text-with-main-colour-bk-light);
    padding-left: 10px;
    padding-right: 10px;
}



/* Za SVG objekte */
.MainColour {
    fill: var(--main-colour);
}

/* Za SVG objekte header slike */
.BojaPozadinskaSlika {
    fill: var(--main-colour-light);
}

.SvetloSivaPozadina {
    background-color: #f4f4f4;
}

.TamnoSivaPozadina {
    background-color: grey;
}

.SvetlaSekundarnaBojaPozadina {
    background-color: var(--main-colour-extra-light);
}

.ContentBox {
    width: 100%;
    display: flex;
}

.Content {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.Content.Full {
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.IzdvojeniBlokContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}


#HeaderBarContainer {
    background-color: #808080;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    text-align: right;
    z-index: 100;
}

/*#HeaderBar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}*/

#HeaderBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#HeaderBar>div:first-of-type>a.Jezici {
    margin-left: 0 !important;
    font-size: 12px;
}

#HeaderBar>div:last-of-type {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#Facebook,
#SearchIcon,
#Instagram,
#Youtube {
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    cursor: pointer;
}

#Facebook {
    /* background-color: var(--main-colour); */
    background-image: url(../images/FaceBookHeader.svg);
}

#Instagram {
    /* background-color: var(--main-colour); */
    background-image: url(../images/InstagramHeader.svg);

}

#Youtube {
    /* background-color: var(--main-colour); */
    background-image: url(../images/YouTubeHeader.svg);
}

#SearchIcon {
    background-color: transparent;
    background-image: url(../images/Search.svg);
    opacity: 1;
    transition: all 0.5s;
}

#GooglePretragaContainer {
    display: flex;
    align-items: flex-start;
    position: absolute;
    overflow: hidden;
    max-width: 400px;
    width: 100%;
    height: 0px;
    top: 50px;
    opacity: 0;
    transition: all 0.5s;
    z-index: 1;
}

.gsc-control-cse {
    border: 0px #ccc dotted !important;
    border-radius: 5px;
    background-color: transparent;
}

#GoogleSearchKomponenta {
    width: 100%;
    border: 1px #ccc dotted !important;
    border-radius: 5px;
}

#GoogleSearchKomponenta:hover {
    border-color: black !important;
}

#ZatvoriGooglePretragu {
    margin-left: 5px;
    transition: all .3s;
    width: 18px;
    height: 18px;
    background-image: url(../images/ZatvoriGoogleSearch.svg);
    background-size: 100% 100%;
    background-color: #f4f4f4;
}

#ZatvoriGooglePretragu:hover {
    opacity: 1;
    /*    transform: rotate(180deg);*/
}

.PostepenoPorasti {
    height: 66px !important;
    opacity: 1 !important;
}

.PostepenoSakrij {
    width: 1px !important;
    opacity: 0 !important;
    margin: 0 !important;
}



a.Jezici,
#SearchIcon,
#Facebook,
#Instagram,
#Youtube {
    margin-left: 30px;
}

#SearchIcon {
    opacity: 0.8;
}

#SearchIcon:hover {
    opacity: 1;
}

a.Jezici:link,
a.Jezici:visited,
a.Jezici:active {
    color: white;
    text-decoration: none;
    opacity: 0.8;
}

a.Jezici:hover {
    opacity: 1;
}

#LogoMainMenuContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: flex-start;
}

#Logo {
    display: flex;
}

#LogoEFSU {
    width: 142px;
    height: 90px;
}

a.NazivSP:link,
a.NazivSP:active,
a.NazivSP:visited,
a.NazivSP:hover {
    width: 235px;
    height: 90px;
    font-size: 35px;
    text-decoration: none;
    color: black;
    margin-left: 15px;
}

a.NazivSP:hover {
    color: gray;
}

#MainMenu {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
    margin-bottom: 20px;
}

a.MainMenu:link,
a.MainMenu:visited,
a.MainMenu:active {
    font-size: 16px;
    color: black;
    margin-left: 40px;
    text-decoration: none;
}

a.MainMenu:hover {
    /*    color: var(--main-colour);*/
    border-bottom: 2px dashed var(--main-colour);
    padding-bottom: 5px;
}

a.MainMenu:first-of-type {
    margin-left: 20px;
}

a.MainMenu.Selected {
    /*    cursor: text;*/
    border-bottom: 2px dashed var(--main-colour);
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: bold;
}

#HeaderSlika {
    border-top: 3px solid var(--main-colour);
    border-bottom: 3px solid var(--main-colour);
    overflow: hidden;
    /*    min-height: 50px;*/
    height: auto;
}

#HeaderSlika>div {
    position: relative;
    width: 100%;
    height: auto;
}

#HeaderSlika>div>img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#Osnovno {
    padding-top: 30px;
    padding-bottom: 30px;
}

#PromoSpot {
    margin-top: 40px;
    font-size: 16px;
    margin-bottom: 40px;
    line-height: 26px;
}

#IzdvojeniLinkovi {
    padding-top: 30px;
    padding-bottom: 30px;
}


/* Blok tip 1 */

.IzdvojenBlokTip1 {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 350px;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    padding-top: 5px;
    margin: 40px;
    background-color: white;
    border-radius: 5px;
}

.IzdvojenBlokTip1>div {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.IzdvojenBlokTip1>div:first-of-type>img {
    width: 150px;
    height: 120px;
    margin-bottom: 5px;
}

.IzdvojenBlokTip1>div:first-of-type>span:first-of-type {
    font-size: 24px;
    margin-bottom: 15px;
}

.IzdvojenBlokTip1>div:first-of-type>span:last-of-type {
    font-size: 15px;
    line-height: 22px;
}



a.IzdvojeniBlokTip1Detaljnije:link,
a.IzdvojeniBlokTip1Detaljnije:visited,
a.IzdvojeniBlokTip1Detaljnije:active {
    border: 1.5px solid var(--main-colour);
    padding: 10px 20px;
    font-size: 14px;
    text-decoration: none;
    color: var(--text-with-main-colour-bk);
    transition: all 0.3s;
}

a.IzdvojeniBlokTip1Detaljnije:hover {
    background-color: var(--main-colour);
    border: 2px gray dotted;
}


/* Blok tip 2 */

.IzdvojenBlokTip2 {
    display: flex;
    flex-direction: column;
    width: 180px;
    height: 180px;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    padding-top: 5px;
    margin: 40px;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    border: 1px #ccc dotted;
}

.IzdvojenBlokTip2 img {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    transition: all 0.5s;
}

.IzdvojenBlokTip2:hover {
    border: 1px solid var(--main-colour);
}

#OstaliSP .IzdvojenBlokTip2:hover {
    border: 1px solid #b5cdec;
}

.IzdvojenBlokTip2:hover img {
    transform: scale(1.1, 1.1);
}

a.OstaliStudijskiProgrami:link,
a.OstaliStudijskiProgrami:active,
a.OstaliStudijskiProgrami:visited,
a.OstaliStudijskiProgrami:hover {
    text-decoration: none;
    color: black;
}

/* Blok tip 3 */

.IzdvojenBlokTip3 {
    display: flex;
    flex-direction: row;
    width: 500px;
    height: 100px;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    margin: 20px 10px;
    border-radius: 5px;
    font-size: 18px;
}

.IzdvojenBlokTip3 img {
    width: 60px;
    height: 60px;
    margin-left: 10px;
    margin-right: 20px;
}

.IzdvojenBlokTip3>div {
    display: flex;
    flex-direction: column;
    width: 400px;
}

.IzdvojenBlokTip3>div>span:first-of-type {
    font-size: 18px;
}

.IzdvojenBlokTip3>div>span:last-of-type {
    font-size: 24px;
}

/* Blok tip 5 */
.IzdvojenBlokTip5 {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 40px;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.IzdvojenBlokTip5 img {
    transition: all 0.5s;
    /*    max-width: 320px;
        max-height: 80px;
        width: auto;
        height: auto;   */
}

.IzdvojenBlokTip5:hover img {
    transform: scale(1.05, 1.05);
}

/* Blok tip 4 -- Promo spot */

.IzdvojenBlokTip4 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

#PromoSpot>.IzdvojenBlokTip4>div:first-of-type {
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-right: 30px;
    margin: 10px;
}

#PromoSpot>.IzdvojenBlokTip4 img {
    margin-top: 10px;
    margin-bottom: 30px;

}

#PromoSpot>.IzdvojenBlokTip4>span {
    margin-top: 30px;
}

#PromoSpot .VideoSpot {
    margin: 10px;
    width: 650px;
    height: 370px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dotted var(--main-colour);
}

#PromoSpot .VideoSpot>iframe {
    width: 640px;
    height: 360px;
}

/* Predmeti */
#Predmeti {
    padding-bottom: 40px;
}

/* Blok tip 6 */
.IzdvojenBlokTip6 {
    display: flex;
    flex-direction: row;
    height: auto;
    text-align: left;
    align-items: flex-start;
    margin: 40px;
    background-color: white;
    border-radius: 5px;
}


/* Ucitavanje stranice */

#StranicaSeUcitava {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

#UcitavanjeAnimacija {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    animation-name: animVrtiUKrug;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}


@keyframes animVrtiUKrug {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


#AlumniSpisak .IzdvojenBlokTip6 {
    transition: all 0.2s;
}

/*#AlumniSpisak  .IzdvojenBlokTip6:hover  {
    transform: scale(1.01, 1.01);
}*/

#AlumniSpisak>.IzdvojenBlokTip6 {
    width: 500px;
    background-color: white;
}

/* Div koji sadrzi sliku alumniste */
#AlumniSpisak>.IzdvojenBlokTip6 .Manji {
    flex-basis: 150px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-self: flex-start;
}

#AlumniSpisak>.IzdvojenBlokTip6 .Manji img {
    width: 150px;
    height: 180px;

    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

#AlumniSpisak>.IzdvojenBlokTip6 .Veci {
    font-size: 13px;
    flex-shrink: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    height: auto;
    padding-left: 10px;
}

#AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:first-of-type {
    margin-right: 5px;
}

/* Div koji sadrzi generalije */
#AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:first-of-type>div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: black;
    opacity: 0.85;
    margin-bottom: 10px;
    line-height: 15px;
}

/* Ime i prezime */
#AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:first-of-type>div:first-of-type {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 30px;
    color: black;
}

/* Ikonice ispred datuma diplomiranja, mesta zaposlenja i pozicije */
#AlumniSpisak>.IzdvojenBlokTip6>.Veci img {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

/* Kontejner dugmeta Detaljnije */
/* Kontejner dugmeta Detaljnije */
#AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:last-of-type {
    text-align: right;
    margin-bottom: 14px;
    margin-right: 8px;
}

#AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:last-of-type>span {
    border: 1px black dotted;
    padding: 5px 10px;
    background-color: var(--main-colour-light);
    color: var(--text-with-main-colour-bk-light);
    transition: all 0.3s;
    cursor: pointer;
    font-size: 13px;
    border-radius: 3px;
}

#AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:last-of-type>span:hover {
    border: 1px black solid;
    background-color: var(--main-colour);
    color: var(--text-with-main-colour-bk);
}



/* Pojedinacni alumni */

#SemitransparentnaPozadina {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}

#TransparentnaPozadina {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    animation-name: animPrikaziPostepeno;
    animation-duration: 0.8s;
}

.Nevidljivo {
    display: none !important;
    opacity: 0 !important;
}

#PojedinacniAlumniContainer {
    display: flex;
    flex-direction: column;
    max-height: 90%;
    max-width: 1000px;
    background-color: white;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Container dugmeta za zatvaranje */
#ZatvoriAlumniProzorContainer {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    /* Ovo omogucava zaobljenost dugmeta za zatvaranje */
    border-top-right-radius: 5px;
}

#ZatvoriAlumniProzor {
    width: 35px;
    height: 35px;
    cursor: pointer;
}

#PojedinacniAlumni .IzdvojenBlokTip6 {
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 0px;
    margin-bottom: 0;
    border-radius: 0;
}

/* Div koji sadrzi sliku alumniste */
#PojedinacniAlumni>.IzdvojenBlokTip6 .Manji {
    display: flex;
    flex-basis: 150px;
    flex-shrink: 0;
}

/* Slika alumniste */
#PojedinacniAlumni .IzdvojenBlokTip6 .Manji img {
    width: 150px;
    height: 180px;
    border-radius: 10px;
}

#PojedinacniAlumni .IzdvojenBlokTip6 .Veci {
    font-size: 16px;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    height: auto;
    padding-left: 20px;
}

#PojedinacniAlumni>.IzdvojenBlokTip6>.Veci>div:first-of-type {
    margin-right: 10px;
    margin-left: 10px;
}

/* Div koji sadrzi generalije */
#PojedinacniAlumni>.IzdvojenBlokTip6>.Veci>div:first-of-type>div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: black;
    opacity: 0.85;
    margin-bottom: 10px;
    line-height: 20px;
}

/* Ime i prezime */
#PojedinacniAlumni>.IzdvojenBlokTip6>.Veci>div:first-of-type>div:first-of-type {
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 40px;
    color: black;
}

/* Ikonice ispred datuma diplomiranja, mesta zaposlenja i pozicije */
#PojedinacniAlumni>.IzdvojenBlokTip6>.Veci img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Ime i prezime */
#PojedinacniAlumni>.IzdvojenBlokTip6>.Veci>div:last-of-type {
    display: none;
}

#CV {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-right: 35px;
    margin-bottom: 30px;
    margin-left: 35px;
    font-size: 16px;
    overflow-y: scroll;
    padding: 10px;
    padding-bottom: 30px;
    border: 2px var(--main-colour) dotted;
}

.SiviBorder {
    border: 1px #ccc dotted;
}


/* Facebook aktuelnosti */

#Aktuelnosti {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 18px;
    line-height: 35px;
}

/* div koji sadrzi logotip FB i sliku megafona */
#Aktuelnosti>.DrustveneMrezeLogoText {
    flex-basis: 430px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Slika megafona */
#Aktuelnosti>.DrustveneMrezeLogoText>img {
    margin-bottom: 30px;
}

/* Div koji sadrzi tekst o aktuelnostima i link ka FB */
#Aktuelnosti>.AktuelnostiText {
    flex-shrink: 1;
    width: 100%;
}

/* Div koji sadrzi naslov i opis, ali ne i link */
#Aktuelnosti>.AktuelnostiText>div:first-of-type {
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

/* Naslov Aktuelnosti */
#Aktuelnosti>.AktuelnostiText>div:first-of-type>span {
    font-size: 30px;
    margin-bottom: 20px;
}

/* Ovaj div sadrzi link ka facebook-u */
#Aktuelnosti>.AktuelnostiText>div:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
}

.EmbedDrustveneMreze {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

#InstagramEmbed,
#FacebookEmbed {
    max-width: 320px;
    width: 100%;
    height: 400px;
    margin: 5px;
}

a.DrustveneMrezeAktuelnosti:link,
a.DrustveneMrezeAktuelnosti:visited,
a.DrustveneMrezeAktuelnosti:active,
a.DrustveneMrezeAktuelnosti:hover {
    text-decoration: none;
    color: black;
    margin-bottom: 15px;
}

a.DrustveneMrezeAktuelnosti:hover {
    color: var(--text-with-main-colour-bk-light);
}

/*a.DrustveneMrezeAktuelnosti:last-of-type {
    margin-left: 20px;
}*/


/* Boja Facebook i Instagram tekstualnog logotipa u levoj koloni */
.FacebookLogoColour,
.InstagramLogoColour {
    fill: white;
}

/* div koji sadrzi tekstualni logotip Facebook-a */
#Aktuelnosti .FacebookLogoTextContainer {
    width: 130px;
    height: 33px;
    background-image: url(../images/FacebookHandwriting.png);
    background-size: 100% 100%;
}

/* div koji sadrzi tekstualni logotip Instagrama-a */
#Aktuelnosti .InstagramLogoTextContainer {
    width: 160px;
    height: 41px;
    background-image: url(../images/InstragramHandwriting.png);
    background-size: 100% 100%;
}

/* div koji je link ka Facebook i Instagram stranicama */
.AktuelnostiFacebookLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 52px;
    border: 2px dashed #808080;
    background-color: white;
    font-size: 16px;
    margin-top: 30px;
    cursor: pointer;
    border-radius: 3px;
}

.AktuelnostiFacebookLink>div:nth-of-type(2) {
    width: 32px;
    height: 32px;
    margin-left: 15px;
}

.AktuelnostiFacebookLink:hover {
    background-color: var(--main-colour-light);
}

/* Odnosi se na facebook logo u okviru linka ka FB stranicama */
.FacebookLogoFreehandBackground {
    fill: var(--main-colour);
}

/* ------------------------- */
.SmoothScrollAnchor {
    width: 100%;
    height: 120px;
}

.Fiksiraj {
    position: fixed;
    top: 0;
    background-color: snow;
    z-index: 5000;
    border-bottom: 1px solid var(--main-colour);
    box-shadow: 0px 5px 8px -2px rgba(148, 148, 148, 1);
    animation-name: animPrikaziPostepeno;
    animation-duration: 0.5s;

}

@keyframes animPrikaziPostepeno {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

iframe {
    width: 100%;
    height: 400px;
}


#KontaktPodaci {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.KontaktiPodatak {
    display: flex;
    align-self: center;
    font-size: 18px;
    margin-left: 10px;
}

#KontaktPodaci>div {
    max-width: 500px;
    width: 100%;
    margin: 15px 5px;
    /*    border: 1px #ccc dashed;
        border-radius: 5px;*/
}

.Kontakt {
    display: flex;
    margin-bottom: 20px;

}

.KontaktIkona {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    flex-basis: 60px;
    flex-shrink: 0;
}

.KontaktOpis {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
}

.MailTelefon {
    font-size: 30px;
}

.ObjasnjenjeKontakt {
    color: #808080;
}

.KontaktOpis>span {
    margin-top: 3px;
    margin-bottom: 3px;
}

.KontaktOpis>span:first-of-type {
    font-size: 20px;
}


/*#mapSU, #mapNS {
    width: 100%;
    height: 450px;
    background-color: grey;
}*/


#FooterContainer {
    background-color: #808080;
    color: white;
    font-size: 14px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
}

#FooterContainer .Content {
    margin-top: 5px;
    margin-bottom: 5px;
}

#NaVrhDirektno {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    background-color: var(--main-colour);
    cursor: pointer;
    background-image: url('../images/BelaStrelica.svg');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    display: none;
}

.Vidljivo {
    display: block !important;
    animation-name: animPrikaziPostepeno;
    animation-duration: 0.8s;
}

#TribarMenuSimbol {
    cursor: pointer;
    display: none;
    width: 60px;
    margin-left: 2px;
    margin-bottom: 7px;
}


#TribarMenuSimbol>div {
    width: 23px;
    height: 3px;
    background-color: var(--main-colour);
    margin: 5px 0;
    transition: 0.2s;
}

.SimbolZatvori>div:first-of-type {
    transform: rotate(-45deg) translate(-4px, 7px);
}

.SimbolZatvori>div:nth-of-type(2) {
    opacity: 0;
}

.SimbolZatvori>div:last-of-type {
    transform: rotate(45deg) translate(-4px, -7px);
}


#BrziKontakti {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.BrziKontaktContainer {
    max-width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.BrziKontaktiIcon {
    width: 60px;
    height: 60px;
}

.BrziKontaktiPodatak {
    display: flex;
    align-self: center;
    font-size: 18px;
    margin-left: 10px;
}


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


    a.Jezici,
    #SearchIcon,
    #Facebook,
    #Instagram,
    #Youtube {
        margin-left: 20px;
    }

    #BrziKontakti {
        margin-top: 0;
        margin-bottom: 0;
    }

    .BrziKontaktContainer {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-right: 10px;
        width: 100%;
    }

    #LogoMainMenuContainer {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 5px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    #Logo {
        margin-top: 10px;
        margin-bottom: 0px;
        padding-left: 10px;
    }

    #TribarMenuSimbol {
        display: block;
        padding-left: 16px;
    }

    #MainMenu {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    #StavkeMainMenu {
        display: flex;
        flex-direction: column;
        display: none;
    }


    a.MainMenu:first-of-type {
        margin-left: 0px;
    }

    a.MainMenu:link,
    a.MainMenu:visited,
    a.MainMenu:active {
        display: flex;
        align-items: center;
        margin-left: 0;
        height: 50px;
        background-color: #f4f4f4;
        border-bottom: 3px solid white;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
    }

    a.MainMenu:hover {
        background-color: var(--main-colour-light);
        padding-bottom: 5px;
    }

    a.MainMenu.Selected {
        cursor: text;
        padding-left: 5px;
        padding-right: 5px;
        background-color: var(--main-colour-light);
    }

    h2 {
        font-size: 30px;
    }


    .SmoothScrollAnchor {
        height: 1px;
    }

    .BrziKontaktiPodatak,
    .KontaktiPodatak {
        font-size: 15px;
    }

    .BrziKontaktiIcon,
    .KontaktiIcon {
        width: 40px;
        height: 40px;
    }



    /* Facebook aktuelnosti */

    #Aktuelnosti {
        display: flex;
        flex-direction: column;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /* div koji sadrzi logotip FB i sliku megafona */
    #Aktuelnosti>.DrustveneMrezeLogoText {
        flex-basis: 100%;
        margin-bottom: 30px;
    }

    /* Div koji sadrzi naslov i opis, ali ne i link */
    #Aktuelnosti>.AktuelnostiText>div:first-of-type {
        align-items: center;
        margin-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    /* Naslov Aktuelnosti */
    #Aktuelnosti>.AktuelnostiText>div:first-of-type>span {
        font-size: 30px;
        margin-bottom: 20px;
    }

    /* Ovaj div sadrzi link ka facebook-u */
    #Aktuelnosti>.AktuelnostiText>div:nth-of-type(2) {
        /*        justify-content: center;*/
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    a.DrustveneMrezeAktuelnosti:last-of-type {
        margin-left: 0;
    }

    /* div koji sadrzi tekstualni logotip Facebook-a */
    #Aktuelnosti .DrustveneMrezeLogoTextContainer {
        width: 117px;
        height: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    #EmbedSadrzaji {
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }

    .AktuelnostiFacebookLink {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .AktuelnostiFacebookLink:last-of-type {
        margin-bottom: 0;
    }

    .EmbedDrustveneMreze:first-of-type {
        margin-top: 25px;
    }

    #BrziKontakti {
        justify-content: space-around;
    }

}


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

    h2 {
        margin-top: 10px;
        margin-bottom: 25px;
    }

    .NaslovStranice {
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 30px;
    }


    #HeaderSlika {
        height: 160px;
    }

    #HeaderSlika>div {
        min-width: 650px;
    }

    #PromoSpot {
        margin-top: 15px;
        font-size: 14px;
    }


    #PromoSpot>.IzdvojenBlokTip4>div:first-of-type {
        padding-right: 10px;
        text-align: center;
    }

    #PromoSpot>.IzdvojenBlokTip4 img {
        margin-top: 0;
        margin-bottom: 15px;
    }


    #PromoSpot .VideoSpot {
        margin-top: 20px;
        width: 260px;
        height: 190px;
    }

    #PromoSpot .VideoSpot>iframe {
        width: 320px;
        height: 180px;
    }

    #LogoEFSU {
        width: 110px;
        height: 70px;
    }

    a.NazivSP:link,
    a.NazivSP:active,
    a.NazivSP:visited,
    a.NazivSP:hover {
        width: 183px;
        height: 70px;
        font-size: 25px;
    }

    /*    Izdvojeni blok linkovi ka glavnim sadrzajim*/

    .IzdvojenBlokTip1 {
        min-height: 350px;
        height: auto;
    }

    .IzdvojenBlokTip1>div:first-of-type>span:last-of-type {
        margin-bottom: 15px;
    }


    /* Opsti podaci */

    #Osnovno {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .IzdvojenBlokTip3 {
        flex-direction: column;
        height: auto;
        margin: 20px;
        font-size: 16px;
        width: 100%;
    }

    .IzdvojenBlokTip3 img {
        width: 60px;
        height: 60px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .IzdvojenBlokTip3>div {
        width: 100%;
        text-align: center;
    }


    .IzdvojenBlokTip3>div>span:first-of-type {
        font-size: 13px;
    }

    .IzdvojenBlokTip3>div>span:last-of-type {
        font-size: 18px;
    }


    .IzdvojenBlokTip1,
    .IzdvojenBlokTip2,
    .IzdvojenBlokTip4,
    .IzdvojenBlokTip5 {
        margin: 10px;
    }




    /* Alumni spisak */


    /* Blok tip 6 */
    #AlumniSpisak>.IzdvojenBlokTip6 {
        margin: 10px;
    }

    #AlumniSpisak>.IzdvojenBlokTip6 {
        width: 100%;
        background-color: white;
    }

    #AlumniSpisak>.IzdvojenBlokTip6 .Veci {
        min-height: 120px;
    }

    /* Div koji sadrzi sliku alumniste */
    #AlumniSpisak>.IzdvojenBlokTip6 .Manji {
        flex-basis: 80px;
    }

    #AlumniSpisak>.IzdvojenBlokTip6 .Manji img {
        width: 80px;
        height: 96px;
    }

    /* Ime i prezime */
    #AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:first-of-type>div:first-of-type {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 20px;
    }


    /* Kontejner dugmeta Detaljnije */
    #AlumniSpisak>.IzdvojenBlokTip6>.Veci>div:last-of-type {
        margin-top: 15px;
    }



    /* Alumni pojedinacno */

    #PojedinacniAlumni>.IzdvojenBlokTip6 {
        margin: 10px;
    }

    #PojedinacniAlumni>.IzdvojenBlokTip6 .Veci {
        min-height: 120px;
    }

    /* Div koji sadrzi sliku alumniste */
    #PojedinacniAlumni>.IzdvojenBlokTip6 .Manji {
        flex-basis: 80px;
    }

    #PojedinacniAlumni>.IzdvojenBlokTip6 .Manji img {
        width: 80px;
        height: 96px;
    }

    /* Ime i prezime */
    #PojedinacniAlumni>.IzdvojenBlokTip6>.Veci>div:first-of-type>div:first-of-type {
        font-size: 18px;
        margin-top: 5px;
        margin-bottom: 15px;
    }


    /* Ikonice ispred datuma diplomiranja, mesta zaposlenja i pozicije */
    #PojedinacniAlumni>.IzdvojenBlokTip6>.Veci img {
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }

    /* Div koji sadrzi generalije */
    #PojedinacniAlumni>.IzdvojenBlokTip6>.Veci>div:first-of-type>div {
        line-height: 15px;
    }

    #PojedinacniAlumni .IzdvojenBlokTip6 .Veci {
        font-size: 12px;
        padding-left: 10px;
    }

    #CV {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
    }

    #CV p.Obican {
        font-size: 13px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /* O POSLOVNOJ INFORMATICI */


    p.Pitanje {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 20px;
    }

    p.Odgovor {
        font-size: 14px;
        line-height: 28px;
    }

    p.Odgovor::before {
        margin-right: 20px;
    }

    ul.NabrajanjeOdgovor {
        margin-top: 10px;
        list-style-type: none;
        margin-left: 20px;
        margin-bottom: 20px;
    }

    ul.NabrajanjeOdgovor li {
        font-size: 14px;
        line-height: 25px;
    }

    ul.NabrajanjeOdgovor li::before {
        margin-right: 14px;
    }

    /* Facebook aktuelnosti */

    #Aktuelnosti {
        font-size: 14px;
        line-height: 28px;
    }

    /* Naslov Aktuelnosti */
    #Aktuelnosti>.AktuelnostiText>div:first-of-type>span {
        font-size: 24px;
        margin-bottom: 20px;
    }

    #OstaliSP {
        display: none !important;
        padding-bottom: 20px;
    }


    #GooglePretragaContainer {
        max-width: 300px;
        /*        margin-left: 30px;*/
    }

    /* Logotipovi partnera */
    .IzdvojenBlokTip5 img {
        transform: scale(0.7, 0.7);
        margin: 10px;
    }

    .IzdvojenBlokTip5:hover img {
        transform: scale(0.8, 0.8);
    }
}






#HeaderBar>div:nth-of-type(2) a:nth-of-type(2) {
    display: none;
}

#StudijskiProgramEkonomija {
    display: flex;
    flex-direction: column;
}

#StudijskiProgramEkonomija h3 {
    font-size: 24px;
}

#StudijskiProgramEkonomija p {
    font-size: 18px;
    line-height: 200%;
}

#StudijskiProgramEkonomija a:link,
#StudijskiProgramEkonomija a:visited,
#StudijskiProgramEkonomija a:active,
#StudijskiProgramEkonomija a:hover {
    background-color: #003d68;
    color: white;
    padding: 3px;
    text-decoration: none;
}

.PINStudentiItem iframe,
.KompanijeItem iframe,
.LetnjaPraksaItem iframe {
    height: 550px !important;
}