@media only screen and (max-width: 1023px) {
  #header-navigation {
    display: none;
  }
  #responsive-menu {
    position: relative;
    display: block;
  }
  .toggleMenu {
    position: relative;
    z-index: 20;
    display: block !important;
    height: 44px;
    padding-left: 10px;
    line-height: 44px;
    text-align: left;
    text-decoration: none;
  }
  .toggleMenu a {
    font-weight: bold;
    color: #525153;
  }
  .arrow {
    display: block;
    float: right;
    width: 33px;
    height: 33px;
    margin: 0;
    margin-top: 10px;
    background: url('../images/menu.png') no-repeat;
  }
  #responsive-menu ul {
    display: none;
  }
  #responsive-menu ul.sub-menu {
    display: block;
  }
  #responsive-menu li {
    display: block;
    float: none;
    font-weight: bold;
  }
  #responsive-menu ul.sub-menu li {
    font-weight: normal;
  }
}

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    position: relative;
    width: 768px;
    padding: 0;
    margin: 0 auto;
  }
  .container [class*="span"] {
    position: relative;
    display: inline;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
  }
  .container [class*="span"].alpha {
    margin-left: 0;
  }
  .container [class*="span"].omega {
    margin-right: 0;
  }
  .row {
    margin-bottom: 20px;
  }
  .container .span16 {
    width: 748px;
  }
  .container .span15 {
    width: 700px;
  }
  .container .span14 {
    width: 652px;
  }
  .container .span13 {
    width: 604px;
  }
  .container .span12 {
    width: 556px;
  }
  .container .span11 {
    width: 508px;
  }
  .container .span10 {
    width: 460px;
  }
  .container .span9 {
    width: 412px;
  }
  .container .span8 {
    width: 364px;
  }
  .container .span7 {
    width: 316px;
  }
  .container .span6 {
    width: 268px;
  }
  .container .span5 {
    width: 220px;
  }
  .container .span4 {
    width: 172px;
  }
  .container .span3 {
    width: 124px;
  }
  .container .span2 {
    width: 76px;
  }
  .container .span1 {
    width: 28px;
  }
  .container .span1Third {
    width: 236px;
  }
  .container .span2Thirds {
    width: 492px;
  }
  .container .offset15 {
    padding-left: 720px;
  }
  .container .offset14 {
    padding-left: 672px;
  }
  .container .offset13 {
    padding-left: 624px;
  }
  .container .offset12 {
    padding-left: 576px;
  }
  .container .offset11 {
    padding-left: 528px;
  }
  .container .offset10 {
    padding-left: 480px;
  }
  .container .offset9 {
    padding-left: 432px;
  }
  .container .offset8 {
    padding-left: 384px;
  }
  .container .offset7 {
    padding-left: 336px;
  }
  .container .offset6 {
    padding-left: 288px;
  }
  .container .offset5 {
    padding-left: 240px;
  }
  .container .offset4 {
    padding-left: 192px;
  }
  .container .offset3 {
    padding-left: 144px;
  }
  .container .offset2 {
    padding-left: 96px;
  }
  .container .offset1 {
    padding-left: 48px;
  }
  .container .offset1Third {
    padding-left: 256px;
  }
  .container .offset2Thirds {
    padding-left: 512px;
  }
  .container .push15 {
    left: 720px;
  }
  .container .push14 {
    left: 672px;
  }
  .container .push13 {
    left: 624px;
  }
  .container .push12 {
    left: 576px;
  }
  .container .push11 {
    left: 528px;
  }
  .container .push10 {
    left: 480px;
  }
  .container .push9 {
    left: 432px;
  }
  .container .push8 {
    left: 384px;
  }
  .container .push7 {
    left: 336px;
  }
  .container .push6 {
    left: 288px;
  }
  .container .push5 {
    left: 240px;
  }
  .container .push4 {
    left: 192px;
  }
  .container .push3 {
    left: 144px;
  }
  .container .push2 {
    left: 96px;
  }
  .container .push1 {
    left: 48px;
  }
  .container .pull15 {
    left: -720px;
  }
  .container .pull14 {
    left: -672px;
  }
  .container .pull13 {
    left: -624px;
  }
  .container .pull12 {
    left: -576px;
  }
  .container .pull11 {
    left: -528px;
  }
  .container .pull10 {
    left: -480px;
  }
  .container .pull9 {
    left: -432px;
  }
  .container .pull8 {
    left: -384px;
  }
  .container .pull7 {
    left: -336px;
  }
  .container .pull6 {
    left: -288px;
  }
  .container .pull5 {
    left: -240px;
  }
  .container .pull4 {
    left: -192px;
  }
  .container .pull3 {
    left: -144px;
  }
  .container .pull2 {
    left: -96px;
  }
  .container .pull1 {
    left: -48px;
  }
}

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
  .container {
    width: 300px;
  }
  .container .column,
  .container .columns {
    margin: 0;
  }
  .container .span16 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span15 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span14 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span13 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span12 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span11 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span10 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span9 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span8 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span7 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span6 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span5 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span4 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span3 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span2 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span1 {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span1Third {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .span2Thirds {
    left: 0;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .container .offset1Third {
    padding-left: 0;
  }
  .container .offset2Thirds {
    padding-left: 0;
  }
}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .container {
    width: 576px;
  }
  .container .column,
  .container .columns {
    margin: 0;
  }
  .container .span16 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span15 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span14 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span13 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span12 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span11 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span10 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span9 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span8 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span7 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span6 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span5 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span4 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span3 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span2 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span1 {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span1Third {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .span2Thirds {
    left: 0;
    width: 576px;
    padding: 0;
    margin: 0;
  }
  .container .offset1Third {
    padding-left: 0;
  }
  .container .offset2Thirds {
    padding-left: 0;
  }
}