* {
  box-sizing: border-box;
}

.header{
  height: 90px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  background-color: rgb(13, 13, 13);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgb(230, 228, 228);
}

.left-section{
  align-items: center;
  display:flex;
}

.logo{
  height: 75px;
  margin-left: 50px;
  margin-right: 20px;
  border-radius: 2px;
}

.slogan{
  color: rgb(239, 212, 6);
  font-size: 20px;
  padding-left: 30px;
 }


.middle-section{
  flex: 1;
  margin-left: 340px;
  margin-right: 40px;
 /* max-width: 100px;*/
  display: flex;
  align-items: center;
 }


.linkedin-button, .facebook-button, .slo-lang-button{
  height: 40px;
  width: 40px;
  border-radius: 6px;
  border: none;
  background-color: rgb(9, 9, 9);
  cursor: pointer;
  padding: 16px;
}

.slo-lang-button{
  position:absolute;
  left:40px;
}

.linkedin-icon, .facebook-icon, .slo-lang-icon{
  height: 30px;
  width: 30px;
}

.slo-lang-icon{
  margin: 20px;
}


.linkedin-button,
.facebook-button,
.slo-lang-button,
.home-icon-container,
.services-container,
.references-icon-container,
.product-icon-container,
.contact-icon-container{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.linkedin-button .tooltip,
.facebook-button .tooltip,
.slo-lang-button .tooltip,
.home-icon-container .tooltip,
.services-container .tooltip,
.references-icon-container .tooltip,
.product-icon-container .tooltip,
.contact-icon-container .tooltip{
  position: absolute;
  background-color: gray;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 2px;
  font-size: 12px;
  bottom: -30px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
}

.linkedin-button:hover .tooltip,
.facebook-button:hover .tooltip,
.slo-lang-button:hover .tooltip,
.home-icon-container:hover .tooltip,
.services-container:hover .tooltip,
.references-icon-container:hover .tooltip,
.product-icon-container:hover .tooltip,
.contact-icon-container:hover .tooltip{
  opacity: 1;
}


.right-section{
  width: 300px;
  display: flex;
  margin-right: 60px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}


.home-icon, .services-icon, .references-icon, .product-icon, .contact-icon{
  height: 40px;
  width: 40px;
  cursor: pointer;
  border-radius: 6px;
  border: none;
  background-color: rgb(255, 252, 252);
  cursor: pointer;
  padding: 4px;
}


.linkedin-button:hover,
.facebook-button:hover,
.slo-lang-button:hover,
.home-icon:hover,
.services-icon:hover,
.references-icon:hover,
.product-icon:hover,
.contact-icon:hover{
  background-color:rgb(255, 225, 0)
}

@media (max-width: 800px) {
  .slogan{
     font-size: 12px;
     padding-left: 5px;
   }
}

@media (min-width: 801px) and (max-width: 999px){
   .slogan{
      font-size: 14px;
   }
 }
   
@media (min-width: 1000px) {
   .slogan{
     font-size: 20px;
   }
 }

@media only screen and (max-width: 900px) {
   .logo{
     height: 40px;
     margin-left: 10px;
     margin-right: 0px;
     margin-top: 10px;
   }

   .linkedin-button, .facebook-button, .slo-lang-button{
     height: 30px;
     width: 30px;
     left: 290px;
     top: 0px;
   }

   .linkedin-icon, .facebook-icon, .slo-lang-icon{
    height: 20px;
    width: 20px;
   }
   
   .home-icon, .services-icon, .references-icon, .product-icon, .contact-icon{
    height: 30px;
    width: 30px;
    margin-bottom: 10px;
   }
   
   .right-section{
    width: 260px;
    margin-left: 10px;
   }

  .middle-section{
    width: 120px;
    margin-left: 10px;
    justify-content: space-between;
   }

   .header{
    position: fixed;
    height: 130pX;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   }
}