/*  NAVIGATION MENU */ 
header { 
    position: fixed; 
    width: 100%; 
    top: 0px; 
    height: 60px; /* H1 - all height with this sign must be same */
    background-color: #373842; /* Color 02 - header color */
    text-align: center; 
    z-index: 5001; 
    box-shadow: 0px 8px 13px black;
  }  
.undercover { 
    position: static; 
    height: 60px; /* H1 × 2 ??? */
    font-size: 16px; 
    background-color: #373842; /* Color 02 */
    visibility: visible; 
    z-index: 10; 
}
.logotype a { 
    display: inline-block; 
    text-decoration: none; 
    line-height: 34px; 
} 
.logotype img { 
    display: block;  /*  because of -webkit-tap-highlight-color */ 
    height: 50px; /* Combine with margin-top and margin-bottom to get H1 */
    margin-top: 5px; 
    margin-bottom: 5px; 
    line-height: 50px; /* vertically centers broken image icon and alt text in some browsers */
    margin-left: 8px; 
    width:auto; 
    font-size: 22px;   /* ALT */
    font-family: "SlovaC", Tahoma, sans-serif; 
    color: #e2d3ff; /* Img alt text color */
} 
.toplink a {
    height: 60px; /* H1 */
    line-height: 60px; /* H1 */
    font-size: 22px;   /*  ¤T */
    font-family: "SlovaC", Tahoma, sans-serif; 
    color: #ffffff; 
    text-decoration: none; 
}
.toplink a:focus, .sublinks a:focus, .tab-key a:focus { /* Keyboard accessibility */
    outline: 0; 
    box-shadow: -1px 1px #ffcd8c inset, 1px -1px #ffcd8c inset ; /* S1 boja za TAB i hover  */ 
}
.toplink img, .sublinks img { 
    height: 30px; /* Combine with margin-top and margin-bottom to get H1 */
    line-height: 22px; 
    width: auto;
    margin-top: 15px; 
    margin-bottom: 15px; 
    font-size: 22px;   /* ALT */
    font-family: "SlovaC", Tahoma, sans-serif; 
    color: #ffffff; /* Img alt text color */
}
.sublinks a {
    height: 60px; /* H1 */
    line-height: 60px; /* H1 */
    cursor: pointer;
    font-size: 22px;   /*  ¤T */
    font-family: "SlovaC", Tahoma, sans-serif; 
    color: #ffffff; 
    text-decoration: none;
}
.iconlinks { 
    height: 60px; /* H1 */
    width: auto; /* #i */
    position: absolute;
    text-align: center; 
}
.iconlinks a { 
    height: 60px; /* H1 */
    line-height: 60px; /* text vertical center */ 
    padding: 0 8px; 
    display: inline-block; 
    text-decoration: none; 
    color: white;  
    text-decoration: none; 
    background-color: #373842; /* Color 02 */
}
.iconlinks img { 
    height: 40px; /* Combine with margin-top and margin-bottom to get H1 */
    margin: 10px 0;
    line-height: 40px; /* ALT */
    display: block;
    width: auto; /* #i */
    font-size: 22px;   /* ALT */
    font-family: "SlovaC", Tahoma, sans-serif; 
    color: #ffffff; /* Img alt text color */ 
}
/* ------------------------------------------------ SMALL VIEWPORT */ 
@media screen and (max-width: 960px) {
#wrapper { /* Navigation wrapper */
    z-index: 5009; 
    position: fixed; 
    display: block; 
    max-width: unset; 
    width: 100%; 
    margin: 0; 
    height: 1px; 
    text-align: center; 
    top: 60px; /* H1 submenu under header */
}
.logotype {
    z-index: 5008; 
    position: fixed;
    float: unset; 
    height: 60px; /* H1 */ 
    width: auto; 
    text-align: center; 
    top: 0;
    left: 0;
    display: unset; 
 }
.nav-class { /* Navigation */
    z-index: 5006; 
    display: none; 
    position: relative;
    min-width: unset;
    width: 100%; 
    height: calc(100vh - 60px);  /* 100vh - H1 */ 
    text-align: center; /* Horizontal position of topmenu links */ 
    overflow-y: auto; 
    outline: 0; 
    background-color: #352c44; /* Color 03 - toplink color */ 
    justify-content: unset;
    float: unset; 
}
.nav-toggle { /* just for hamburger */
    display: block; 
}
.nav-close { /* just for hamburger */
    display: none; 
}
.toplink {
    z-index: 5005; 
    display: block;
    position: relative;
    background-color: unset;       
    box-shadow: inset 0 1px #3e3c4b; /* Color 10 - top border color */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* Safari */
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.top-toggle { 
    background-color: #423757; /* Color 20 - change toplink color when tapped/clicked */
}
.toplink a {
    display: block; 
    position: relative;
    padding: 0 5% 0 5%;
} 
.topsub a { 
    cursor: pointer; 
    pointer-events: unset; 
} 
.sublinks {
    z-index: 5005; 
    top: unset; 
    display: none; 
    position: relative; 
    width: 100%; 
}
.sublinks a {
    padding: 0 10% 0 10%; 
    background-color: #483b5e;  /* Color 04 - sublinks color */
    display: inherit; 
    box-shadow: inset 0 1px #5e4e77; /* Color 30 - top border color */
}
#hamburger { /* Hamburger icon */
    z-index: 5007; 
    background-color: #373842; /* Color 02 */
    width: auto;
    height: 60px;
    padding: 0;
    display: block; 
    position: fixed;
    right: 0;
    top: 0;
}
#hamburger a { 
    display: inline-block; 
    text-decoration: none;
    height: 60px; 
    line-height: 60px; 
}
#hamburger img { 
    display: block;   /* because of -webkit-tap-highlight-color */    
    height: 40px; 
    line-height: 40px; /* Img alt text verticaly centering */
    margin: 10px;
    font-size: 24px; /* Img alt hamburger ☰ size */
    font-family: "SlovaC", Tahoma, sans-serif; 
    color: #e2d3ff; /* Img alt text color */
}
.iconmask { /* just for big screens */
  display: none;
}
.sub-toggle { /* Show submenus with javascript */
    display: block; 
}
.langtop a {
    text-align: center;
    padding: 0 14px; 
}
.langsub a {
    text-align: center;
    padding: 0 14px; 
}
.iconlinks { 
    top: -60px; 
    right: 60px; 
}
.razmak { 
height: 120px; 
width: 2px; 
display: inline-block; 
position: relative; 
}
}
/* ------------------------------------------------- MIDDLE VIEWPORT */ 
@media screen and (min-width: 800px) {
body { 
    font-size: 21px; 
}
.nav-class { /* Navigation */
    z-index: 5006;  
    width: 60%; 
    float: right; 
} 
}
/* ------------------------------------------------- Jumping top menu VIEWPORT */ 
@media (min-width:960px) and (max-width:1183px) {
    .undercover { 
        position: static; 
        height: 120px; /* H1 × 2 */
        font-size: 16px; 
    }
    }
/* ------------------------------------------------- BIG VIEWPORT */ 
@media screen and (min-width: 960px) { /* #B */
body { 
    font-size: 22px;  
}  
#wrapper { /* Logo & navigation wrapper */
    position: relative; 
    display: block; 
    max-width: 1460px; /* #W = #B + #L (logotype) + #i (iconlinks) */
    width: unset; 
    margin: 0 auto; /* Horizontal centered in header     */   
    height: 60px; /* H1 */
    text-align: center; 
    top: unset; 
}
.logotype { 
    position: relative; 
    float: left;
    height: 60px; /* H1 */
    width: auto; 
    text-align: center; 
    top: unset; 
    left: unset;
    display: block; 
}  
.nav-class { /* Navigation, #M, max width < #B */
    z-index: 5006; 
    display: flex; 
    position: relative; 
    min-width: max-content; 
    width: unset; 
    height: 60px;  
    text-align: center; /* Must be center! Position of submenu links. */
    overflow-y: unset;
    outline: 0;
    background-color: #373842; /* Color 02 */
    justify-content: center;
    float: unset; 
}
.toplink { 
    z-index: 5005; 
    height: 60px; /* H1 */
    display: inline-block;
    position: relative;
}
.toplink a { 
    display: inline-block; 
    vertical-align: middle; 
    padding: 0 14px 0 14px; 
}
.topsub a { /* This piece of css must be placed above .sublinks a */
    cursor: default; 
    pointer-events: none; /* Prevents javascript from executing .sub-toggle */
}
.sublinks { 
    z-index: 5005; 
    background-color: #302a3a; /* Color 03  */
    top: 60px; /* H1 */
    display: none;
    position: absolute; 
    width: unset; 
}
.sublinks a { 
    padding: 0 14px 0 14px; 
    pointer-events: auto; /* Restored functionality from .topsub a */ 
    display: inline-block; 
    box-shadow: unset; 
    cursor: pointer;
} 
#hamburger { 
    display: none; /* Hide hamburger */ 
} 
.sub-toggle { 
    display: none; /* Just in case... */ 
} 
#stikerim .stikerim, 
#uputstvam .uputstvam, 
#pitanjam .pitanjam, 
#narucivanjem .narucivanjem, 
#kontaktm .kontaktm {     /* styles when current */
    box-shadow: inset 0 3px #837767; 
}
.toplink:hover, .toplink:focus-within { 
    background-color: #302a3a; /* Color 03  */
    box-shadow: inset 0 3px #ffcd8c; /* S1 boja za hover  */
} 
.sublinks a:hover { 
    box-shadow: inset 0 -3px #ffcd8c; /* S1 boja za hover  */
} 
/* Show horizontal submenus ---------------------------------------------------------------- */ 
.topsub:hover #sub0, .topsub:focus-within #sub0 { /* u Firefox Resposiv Design Modu se submeni ne pojavljuje - mije bitno ali ne bi bilo loše rešiti i to - https://stackoverflow.com/questions/67604810/firefox-rdm-touch-simulation-doesnt-simulate-hover  */ 
    display: block; 
    width: 200vw; 
    right: calc(-100vw + 220px); /* Položaj PRVOG submenija - Higher px value moves submenu left. Na stikey.net - KOHTAKT */ 
} 
.topsub:hover #sub1, .topsub:focus-within #sub1 { 
    display: block; 
    width: 200vw; 
    right: calc(-100vw + 130px); /* Položaj DRUGOG submenija... itd. Na stikey.net - JEZICI */ 
} 
.topsub:hover #sub2, .topsub:focus-within #sub2 { /* Ovi ostali submeniji nisu aktivni na stikey.net */ 
    display: block; 
    width: 200vw; 
    right: calc(-100vw + 80px);  
} 
.topsub:hover #sub3, .topsub:focus-within #sub3 {
    display: block; 
    width: 200vw; 
    right: calc(-100vw + 230px); 
}
.topsub:hover #sub4, .topsub:focus-within #sub4 {
    display: block; 
    width: 200vw; 
    right: calc(-100vw + 200px); 
}
.topsub:hover #sub5, .topsub:focus-within #sub5 {
    display: block; 
    width: 200vw; 
    right: calc(-100vw + 120px); 
}
.iconmask { /* just for big screens */
  display: block;
  position: relative;
  float: right; 
  width: 147px; /* #i - .iconlinks width px value */
  height: 60px;
  line-height: 60px;
}
/* Menu icons */
.iconlinks { 
    top: 0; 
    right: 0; 
}
.iconlinks a:hover, .iconlink a:focus-within { 
    background-color: #302a3a; /* Color 03  */
} 
.razmak { 
height: 60px; 
width: 2px; 
display: inline-block; 
position: relative; 
}
}
/* --------------------------------------- LARGE VIEWPORT (optional) */ 
@media screen and (min-width: 1540px) {
body { 
    font-size: 24px; 
} 
}
/* END OF NAVIGATION MENU */