#header {
  z-index: 100;
  position: relative;
}
#header > .region-inner {
  background-image: url("../resources/images/header_bg_1.gif");
  background-repeat: repeat-y;
  background-position: 50% top;
  border-bottom: 5px solid #EEEEEE;
  -moz-transition: box-shadow 250ms ease-in-out;
  -o-transition: box-shadow 250ms ease-in-out;
  -webkit-transition: box-shadow 250ms ease-in-out;
  transition: box-shadow 250ms ease-in-out;
}

.state-scrolled #header > .region-inner {
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
}

/**
 * This class, if applied on a root HTMl element (html, body), makes the header fixed to the top.
 */
.state-headerfixed #header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.state-headerfixed #body-container-2 {
  padding-top: 110px;
}

@media (max-width: 767px) {
  .state-headerfixed #body-container-2 {
    padding-top: 72px;
  }
  .state-headerfixed #header > .region-inner {
    border-bottom: 0;
  }
}
@media (min-width: 768px) {
  #header > .region-inner {
    height: 110px;
  }
}
@media (max-width: 992px) {
  #header > .region-inner {
    background: #333333;
  }
  #header > .region-inner .wrapper {
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }
}
@media (max-width: 1200px) {
  #header > .region-inner {
    background-position: -1156px top;
  }
}