* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
 }


 body {
   font-family: sans-serif;
 }


/* ajmo probati detektirati mobitele
 * znači razlikujemo prave mobitele sa bijesnom rezolucijom od onih
 * jednostavnih rulova sa pixelima gore. Ono je OK kada netko smanjuje
 * prozor na ekranu, ali za pravi mobitel otkriti treba puno kompleksniji
 * query */
/* DPI = (square root of (horizontal pixels² + vertical pixels²)) / diagonal screen size in inches*/
/* iphone14pro -->  (square root of (393² + 852²)) / 6.1 = 153.81 */
/* desktop (2560*1440 , 27") -->  (square root of (2560² + 1440²)) / 27 = 108.79 */
/* laptop (1920*1080, 15.6" --> 141.21) */


/* Mobile for min-width, for min-height, for landscape-orientation,for portrait orientation and for device pixel ratio*/
@media screen and (min-width: 360px),
and (min-height: 740px),
and (min-width: 360px) and (orientation: landscape),
and (min-width: 740px) and (orientation: portrait),
and (-webkit-min-device-pixel-ratio: 3),
and (min--moz-device-pixel-ratio: 3),
and (-o-min-device-pixel-ratio: 3/1),
and (min-device-pixel-ratio: 3) {


.menu {
  background-color: purple;
  padding: 5px 20px;
  width: 100%;
  position: fixed;
}

.menu li{
  padding:15px 5px;
  font-size: 40px;
}

  .ss_logo {
    flex: 1;
    width: 600px;
  }


  #logo {
    flex: 1;
    width: 500px;
  }

  .bars {
    
    background:#999;
    display: inline-block;
    height: 6px;
    width: 54px;
    position: relative;
    
  }
  .bars::before, .bars::after {
    background:#999;
    display: inline-block;
    content:"";
    height: 6px;
    width: 54px;
    position: absolute;
  }
  
  .bars::before{
    top: 15px;
  }
  
  .bars::after{
    top: -15px;
  }

  .item {
    
    width: 100%;
    text-align: center;
    order:3;
    display: none;
  }

  .item.active {
  
    display: block;
  }

  .user-info {
    order:3;
  }

}



/* Tablet Menu */
@media screen and (min-width: 1024px),
and (min-height: 1366px),
and (min-width: 1024px) and (orientation: landscape),
and (min-width: 1366px) and (orientation: portrait),
and (-webkit-min-device-pixel-ratio: 2),
and (min--moz-device-pixel-ratio: 2),
and (-o-min-device-pixel-ratio: 2/1),
and (min-device-pixel-ratio: 2) {  
  
  
  .ss_logo {
    flex: 1;
    width: 200px;
  }

  #logo {
    flex: 1;
    width: 180px;
  }

  .menu {
    justify-content: center;
  }
  
  .menu li {
    
    font-size: 16px;
    padding:0px 10px;
  }
  
  .logo {
    flex:1;
  }
  
  .item{
    display:block;
    width:auto;
    order:1;
  }
  
  .item.button {
    
    width: auto;
    order:2;
    display:block;
  }
  
  
  .user-info {
    order:2;
  }

  .bars {
    
    background:#999;
    display: inline-block;
    height: 2px;
    width: 18px;
    position: relative;
    
  }
  
  .bars::before, .bars::after {
    background:#999;
    display: inline-block;
    content:"";
    height: 2px;
    width: 18px;
    position: absolute;
  }
  
  .bars::before{
    top: 5px;
  }
  
  .bars::after{
    top: -5px;
  }

  .toggle {
    order:2;
    display: none;
  }
  
}


/*desktop menu*/
@media only screen and (min-width: 1700px){

  .menu li {
    
    font-size: 16px;
    padding:0px 10px;
  }
  
  .item{
    display:block;
    width:auto;
    order:1;
  }
  
   .toggle {
    display: none;
  }
  
  .logo {
    order:0;
  }
  
  .ss_logo {
    flex: 1;
    width: 200px;
  }
  #logo {
    flex: 1;
    width: 180px;
  }

  .user-info {
    order:2;
  }
}



.menu,
.menu ul {
  list-style: none;
}
.menu {
  background-color: #0c334e;
  padding: 5px 20px;
  width: 100%;
  position: relative;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu li {
  float: centre;
  box-shadow: 1px 0 0 #444;
  position: relative;
  
}

.menu a {
  
  padding: 12px 30px;
  text-decoration: none;
  color: white;
}

.menu li a {
  display: block;
}

.menu li:hover > a {
  color: #fafafa;
  background: #20577d;
}

.menu li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}

.menu ul {
  margin: 20px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 46px;
  left: 0px
  z-index: 1;
  background: #0c334e;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}
.menu ul li {
  float: none;
  display: block;
  border: 0;
  box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  text-align: left;
}

.menu ul li:last-child {
  box-shadow: none;
}

.menu ul a {
  padding: 10px;
  width: 160px;
  display: block;
  white-space: nowrap;
  float: none;
}

.menu ul a:hover {
  background-color: #20577d;
}

.menu ul li:first-child > a {
  border-radius: 3px 3px 0 0;
}

/* Ovo crta trokutić iznad podmenija */
.menu ul li:first-child a:after {
  content: "";
  position: absolute;
  left: 40px;
  top: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
}

/* Ovo nisam siguran zašto nam točno treba, pošto boja se ne mijenja na hoveru*/
.menu ul li:first-child a:hover:after {
  border-bottom-color: white;
}

.menu ul ul li:first-child a:after {
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-right: 6px solid white;
  left: -6px;
  top: 50%;
  margin-top: -6px;
  border-left: 0;
}
.menu ul ul li:first-child a:hover:after {
  border-right-color: white;
  border-bottom-color: transparent;
}

.user-name {
  display: inline;
  text-align: center;
  color: white;
  align-items: center;
}

.user-info {
  padding-right: 90px;
}
.toggle {
  
  cursor: pointer;
  order:1;
}