.header {
    display: flex;
    position:absolute; 
    flex-direction: column;
    top:0; left:0; right:0; 
    height:165px; 
    width:300px ;
    background: none; 
    z-index:503;
    font-family: "Montserrat", serif;
    font-weight: 600;
    background:#fff;
}


.header .logo{
    width:100%;   
    height:90px;  
    display: flex;
    justify-content: center; 
    align-items: center;
    z-index:502;
    position: relative;
    background:#D8E1E6;
    background:#f5f7f9;

}

.header .logo a {
    width: 100%;
    display: block;
    padding-top: 10px;
    padding-left: 10px;
}

.header .logo img {
    height: auto;
    width: 100%;
    max-width: 375px;
}

.header .title {
    background: #73777c; 
    display: flex;
    align-items: center;
    height: 75px;
    width: 100%;
    font-size:16px;
    z-index:502;
    position: relative;
}

.header .title h1 a {
    text-decoration: none;
    top:2px;
    color:#fff;
    position:relative; 
    padding-left:15px;
}

.header .title h1 a .pay-off {
    font-weight:400;
}

.header .hamburger {
    background: #A5122F; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
    width: 75px;
    color:white;
    position:fixed;
    right: 0;
    top: 0;
    z-index:599;
    display:none;
}

.header .hamburger img {
    width:50%;
    height:50%;
}

@media (max-width: 1080px) { 

    .header {
         flex-direction: row; 
         width: 100%; 
         height:75px;
         background:#f5f7f9;
    }

    .header .hamburger {
        display: flex;
    }

    .header .logo {
        height:75px;  
        width:300px;
    }

    .header .title {
        width: auto; 
        right: 75px;
        position: absolute;
       padding-right: 15px;
    }    

    .header .title h1 a {
        padding:0 30px;
    }    

    .header .title h1 a .pay-off {
        display: none;
    }


} /* @media */


@media (max-width: 600px) { 

    .header {
         height:75px;  
    }
      .header .logo{
         width:calc(100% - 270px);   
         height:75px;  

      }
      .header .logo img{
         width:100%;   
      }

      .header .title {
         right:75px; 
         position:absolute;
      }
}



@media (max-width: 500px) { 

    .header {
         height:70px;  
    }

      .header .title {
         height: 70px;
         font-size:13px;
         right:70px;
      }   

      .header .logo{
         width:calc(100% - 270px);   
         height:70px;  
      }

      .header .hamburger {
         height: 70px;
         width: 70px;
      }

      .header .title h1 a {
         padding:0 5px 0 20px;
      }    
}


@media (max-width: 450px) { 

      .header {
         height:60px;  

    }
      .header .title {
         height: 60px;
         font-size:13px;
         right:60px;
      }    
      
      .header .logo{
         width: calc(100% - 235px);
         height:60px;  
      }

      .header .hamburger {
          height: 60px;
          width: 60px;
      }
}

@media (max-width: 400px) { 


}