#logo_and_search {
  display: block;
  margin: 0 auto 0.35714em auto;
  padding: 0 12px 0 8px;
}
@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation:portrait) {
  #logo_and_search {
    margin: 0 auto;
  }
}
#logo_and_search:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
@media only screen and (min-width: 320px) and (max-width: 975px) {
  #logo_and_search .logoAndPhoneSearch {
    text-align: center;
  }
}
#logo_and_search .logoAndPhoneSearch #logo {
  height: 3.9286em;
  margin: 0 6.3839% 0 0;
  float: left;
}
@media only screen and (min-width: 320px) and (max-width: 975px) {
  #logo_and_search .logoAndPhoneSearch #logo {
    float: none;
    display: inline-block;
  }
}
#logo_and_search .logoAndPhoneSearch #logo img {
  margin: 0;
}
@media only screen and (min-width: 320px) and (max-width: 975px) {
  #logo_and_search .logoAndPhoneSearch .searchIcon {
    float: right;
    font-size: 36px;
    color: #4a4a4a;
    text-decoration: none;
  }
  #logo_and_search .logoAndPhoneSearch .searchIcon i {
    vertical-align: top;
  }
}
#navigation {
  width: 100%;
}
@media only screen and (min-width: 320px) and (max-width: 975px) {
  #navigation {
    position: fixed;
    top: 0;
    width: 0;
    height: 100%;
    background: #3B3B3B;
    overflow-y: auto;
    transition: width 0.3s ease;
  }
  #navigation:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 34px;
  }
  #navigation:target {
    width: 70%;
    transition: none;
  }
  #navigation:target + .containerWrapper {
    transform: translate(70%, 0);
  }
  #navigation:target + .containerWrapper .open-menu {
    display: none;
  }
  #navigation:target + .containerWrapper .close-menu {
    display: block;
  }
}