/*-- header --*/
header{
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:row;
    padding: 40px 35px;
    align-items: center;
    /*border-bottom: 1px solid #e5e5e5;*/
    justify-content: space-between;
}

#logo { 
    display: block;
    width: 550px; 
}
#logo img {
    display: block;
    margin: 0 auto;
}
.brands,
header nav ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: center;
}
header nav ul{
  text-align:right;
  justify-content:flex-end;
}
header nav a{
  display:block;
  margin:0 0 0 30px;
  text-transform:uppercase;
  text-decoration:none;
  color:black;
  font-family:"Lato";
  font-weight:700;
  letter-spacing:2px;
  font-size:14px;
  position:relative;
}
header nav .selected a {
    color: #ccc;
    position: relative;
}
header nav a::after {
    content: "";
    width: 100%;
    display: block;
    height: 1px;
    bottom: 0;
    position: absolute;
    background: #e5e5e5;
    opacity:0;
    transition:0.35s ease;
}
header nav .selected a::after,
header nav a:hover::after{
  opacity:1;
}
header nav li:first-of-type a{
  margin:0;
}
.brands a {
    display: block;
    margin: 0 30px 0 0px;
}

.brands a img {
    display: block;
    margin: 0 auto;
    width: 48px;
}

.brands a img[alt="Blackberry Farm"] {
    width: 36px;
}

.brands a img[alt="Blackberry Mountain"] {
    width: 50px;
}

header nav {
    width: 146px;
}
header.sub-section nav,
header.sub-section .brands{
  width:320px;
}

@media only screen and (max-width:1400px){
  #logo {
      width: 465px;
  }
  header {
      padding: 20px 35px;
  }

  header nav a {
      font-size: 12px;
  }

  .brands a img[alt="Blackberry Farm"] {
      width: 30px;
  }

  .brands a img[alt="Blackberry Mountain"] {
      width: 42px;
  }
}
@media only screen and (max-width:1200px){
  header {
      padding: 20px 30px;
  }
  header nav a {
      font-size: 11px;
      margin: 0 0 0 25px;
  }
  .brands a img[alt="Blackberry Farm"] {
      width: 28px;
  }
  .brands a img[alt="Blackberry Mountain"] {
      width: 40px;
  }
  #logo {
      width: 405px;
  }
  .brands a {
      margin: 0 25px 0 0;
  }
  header.sub-section nav, 
  header.sub-section .brands {
      width: 264px;
  }
}
@media only screen and (max-width:1050px){
  header {
      padding: 12px 30px;
  }
  header nav a, 
  header nav li:first-of-type a {
      margin: 0 0 3px 0;
      display: inline-block;
      font-size: 10px;
      line-height: 1.0;
  }
  header nav ul {
      display: inline-block;
  }

  nav {
      text-align: right;
  }

  header nav a::after {
      display: none;
  }

/*
}

@media only screen and (max-width: 768px){*/
    
    
    #logo {
        order: 1;
        width: 100%;
        border-bottom: 1px solid #eaeaea;
    }

    header nav {
        order: 3;
    }

    .brands, 
    header.sub-section .brands {
        order: 2;
        width: auto;
        text-align: right;
        justify-content: flex-end;
        padding: 6px 0 0 25px;
    }

    #logo img {
        width: 460px;
        margin: 18px auto 28px;
    }

    header.sub-section nav,
    header nav {
        width: auto;
        padding: 6px 25px 0 0;
    }

    header {
        flex-wrap: wrap;        
        padding: 8px 0px;
    }

    header nav ul {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    .brands a {
        margin: 0 20px 0 0px;
    }

    header nav a, 
    header nav li:first-of-type a {
        margin: 0 0 0 20px;
        font-size: 12px;
    }

    .brands a img[alt="Blackberry Farm"] {
        width: 28px;
    }

    .brands a img[alt="Blackberry Mountain"] {
        width: 38px;
    }
}
@media only screen and (max-width: 768px){
  #logo img {
      width: 380px;
      margin: 10px auto 18px;
  }
   header {
        border-bottom: 1px solid #eaeaea;
    }
}
@media only screen and (max-width:600px){

    .brands, header.sub-section .brands {
        padding: 0px 0 0 0;
        width: auto;
    }

    .brands li:last-of-type a {
        margin: 0;
    }

    header.sub-section nav, header nav {
        display: none;
    }

    #logo img {
        margin: 0;
        width:100%;
    }

    #logo {
        width: 235px;
        border: none;

    }
    .brands a img[alt="Blackberry Farm"] {
        width: 22px;
    }
    .brands a img[alt="Blackberry Mountain"] {
        width: 33px;
    }
    header {
        padding: 8px 20px;
    }
}



@media only screen and (max-width:500px){
  #logo{
    width:200px;
  }
    .brands a img[alt="Blackberry Farm"] {
      width: 18px;
  }

  .brands a img[alt="Blackberry Mountain"] {
      width: 26px;
  }

  .brands a {
      margin: 0 15px 0 0;
}
}