@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



html, body {
    /* When there is not enough content */
    min-height: calc(100vh - 80px);
    margin: 0px
  }
  
  body {
    position: relative;
    /* Sum of heights for footer and nav */
    padding-bottom: 80px;
  }
  
  .footer {
    position: absolute;
    
    /* Place above nav */
    bottom: 80px;
    left: 0px;
    
    height: 100px;
    width: 100%;
      
    background-color: blue;
    color: white;
    text-align: center;
  }
  
  .stickyBottomNav {
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 5;
     text-align: center;
  }

/* begin cn 
html,body{
  text-align: center;
  /*display: flex;
  justify-content: center;
  
    Za najt neko drugo rešitev centiranja diva
}
  */

.container{
  height: 80px;
  width: 70vw;
  line-height: 80px;
  
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

@media only screen and (max-width: 800px) {
    .container {
      width: 100vw;
    }
  }
.container .menu{
  display: flex;
  position: relative;
}
.container .menu li{
  list-style: none;
  flex: 1;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
}
.container .menu li a{
  color: #1d1f20;
  transition: color 0.3s ease;
}
.container .menu li:hover a{
  color: #f23b26;
}
.container .menu li.active a{
  color: #f23b26;
}
.container .menu .line{
  position: absolute;
  height: 5px;
  width: 25%;
  background: #f23b26;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
}
.container .menu li:nth-child(2):hover ~ .line{
  left: 25%;
}
.container .menu li:nth-child(3):hover ~ .line{
  left: 50%;
}
.container .menu li:nth-child(4):hover ~ .line{
  left: 75%;
}