.site-header {

height: 60px;
background: $primary;
color: $primary-text;
margin: 0;
display: flex;
align-items: center;

}

.site-name {

font-size: 28px;
margin: 0;
font-family: $header-font;

}

.site-logo {

height: 54px;
width: 54px;
padding: 3px 5%;

}

.site-logo:hover {

background: $primary-light;

}

.site-menu {

font-family: $header-font;
color: $primary-text;
font-size: 18px;
line-height: 60px;
padding: 0 5%;

} .site-menu-list {

list-style-type: none;
margin: 0;
padding: 0 5%;
display: flex;
flex-direction: row; 
width: 100%;

}

.site-menu-item {

box-sizing: border-box;
white-space: nowrap;
padding: 0 15px;

}

.site-menu-link {

text-decoration: none;
color: $primary-text;
display: block;

}

@media screen

and (min-device-width: 1020px)
and (orientation: landscape) {
    .site-menu-link:hover {
        color: whitesmoke;
        transition: 1s;
    }

    .site-menu-item:hover {
        background: $primary-light;
        transition: 1s;
    }
}

@media screen

and (min-device-width: 320px) 
and (max-device-width: 640px) 
and (orientation: portrait) {
  .site-header {
      flex-direction: column; 
      align-items: center;
      height: auto;
  }
  .site-menu {
      margin: 0;
      padding: 0;
      width: 100%;
  }
  .site-menu-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      width: 100%; 
      flex-direction: row;      
  }
  .site-menu-item {
      border-top: 1pt solid $primary-light;
      width: 100%;
      height: 50px;
      background: $primary;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
  }

  .site-logo {
      height: 44px;
      width: 44px;
      padding: 3px 5%;
      position: relative;
  }
  .site-name {
      width: 100%;
      font-weight: 500;
  }
  .menu-link {
      display: flex;
      align-self: center;
      align-items: center;
      text-decoration: none;
  }
  .menu-link::after {
      content: "Kot Źródłowy";
      display: inline;
      color: $primary-text;
      text-decoration: none;

  }

}

/* Landscape */ @media screen

and (device-width: 320px) 
and (device-height: 640px)  
and (orientation: landscape) {

}