/*  ============================================================================= */
/*  ======== HEADER | HEADER | HEADER | HEADER | HEADER | HEADER ================ */ 
/*  ============================================================================= */
:root {
  --header-backgroundColor: white;
  --header--tab__textColor: #6b6b6b;
  --header--tab__textColorHover: #3973e6;
  
}

header {
    background: var(--header-backgroundColor);
    height: 50px;
    border-bottom: 1px solid #BDBDBD;
    position: fixed;
    top: 0px;
    width: 100%;   
    font-size:22px;
    
}


.header__fixed{
  position: fixed;
  width: 100%;
  height: 100%;
} 

.header--container{
  max-width:1100px;
  display:flex;
  
  height: 100%;  
}

.header__fixed .header--tabContainer{
  display: flex;
}


.header--logo{
  flex-grow: 1;
  text-align:left;
  margin:auto;
  padding-left: 10px;
  padding-top: 3px;
  height: 100%;
  
}

.header--tabContainer{
  display:flex; 
}

.header--tab{
  width: 100px;
  text-align:center;
  line-height: 50px;
  font-size:15px;
  color:var(--header--tab__textColor);
  font-weight:bold;
  
  
}

.header--tab a{
  text-decoration:none;
  color:var(--header--tab__textColor);
  display: block;
  height: 100%;

  
}

.header--tab a:hover{
  color:var(--header--tab__textColorHover);
  

}

.header--tab__menu{
  display:none;
  width: 50px;
  text-align: center;
  line-height: 50px;  
  
}

.header__hamburgerMenu{
    margin-top: 7px;
    position: relative; 
     height: 36px;
    margin: 9px; 
}

.header__fixed .header__hamburgerMenu{


}

.header__hamburgerMenu line{
    background: black;
    height: 3px;
    width: 100%;
    display: block;
    position: absolute;
    cursor: pointer;
    width:100%;
    border-radius:3px;
    transition: all 0.2s ease-in-out;

}


.header__hamburgerMenu line:nth-child(1){
  top:8px;
}

.header__hamburgerMenu line:nth-child(2){
  top:16px;
}
.header__hamburgerMenu line:nth-child(3){
  top:16px;

}
.header__hamburgerMenu line:nth-child(4){
  top:24px;
}

.header__fixed .header__hamburgerMenu line:nth-child(1){
  display:none;
}
.header__fixed .header__hamburgerMenu line:nth-child(2){
  
  transform:rotate(45deg);
}
.header__fixed .header__hamburgerMenu line:nth-child(3){
  
  transform:rotate(-45deg);
}
.header__fixed .header__hamburgerMenu line:nth-child(4){
  display:none;
}

@media only screen and (max-width:700px) {
 
  
  .header--tabContainer{
    position: absolute;
    z-index: auto;
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    overflow: auto;
    display: none;
    top:50px;
  }
  
  .header--tab{
    width: calc(100% - 20px);
    text-align: left;
    padding-left: 20px;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px dashed #90CAF9;    
  }
  
  .header--tab__menu{
    display:block;
  }
  
  .header--tab a{
    color:white;
    font-size:26px;
    height:50px;
  }
  
}



/*  ============================================================================= */
/*  ============================================================================= */
/*  ============================================================================= */