/* Media Queries /*

/*
------------------------------------------------- screen size at 1232pixel (77em) & above
*/
@media (max-width: 77em) {
  /*footer*/
  .containerWrapper {
    display: block;
  }

  .footerContainer .brandLogo {
    margin: 0;
  }
  /*footer end here*/
}
/*
------------------------------------------------------------ 1232pixel (77em) & above END
*/




/*
------------------------------------------------- screen size at 1184pixel (74em) & above
*/
@media (max-width: 74em) {
  /*style guide header*/
  .sideBody section .headerContainer {
    display: block;
  }

  .sideBody section .headerContainer a:not(:first-child) {
    display: none;
  }

  .sideBody section .headerContainer a#hamburgerMenu {
    float: right;
    display: block;
    visibility: visible;
    position: inherit;
  }

  .sideBody section .headerContainer.responsive a#hamburgerMenu {
    position: absolute;
    right: 2%;
  }

  .sideBody section .headerContainer.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .sideBody section .headerContainer .account.hide {
    display: none;
  }
}
/*
------------------------------------------------------------ 1184pixel (74em) & above END
*/




/*
-------------------------------------------------- screen size at 880pixel (55em) & above
*/
@media (max-width: 55em) {
  /*header*/
  .navBar {
    margin: 0.75em 0;
  }

  .headerItem {
    margin: 0.5em;
  }

  .headerContainer {
    display: block;
  }

  .headerContainer div.brandLogo {
    width: 100%;
    margin: 1em 0 0;
  }
  /*header end here*/

  /*account*/
  .accProfileBottomRightContainer {
    display: block;
  }

  .accProfileBottomRightItemLeft {
    display: block;
    text-align: left;
    padding-left: 2em;
  }

  .profileImg {
    width: 50%;
    height: auto;
  }

  .accProfileBottomRightItemRight, .accForumPostsCentered, .accountRightSideItemBottomContainerPurchase3  {
    margin-left: 2em;
    margin-bottom: 3em;
  }

  .centerColumnFormForAccount {
    margin: 0;
  }
}
/*
------------------------------------------------------------- 880pixel (55em) & above END
*/




/*
-------------------------------------------------- screen size at 768pixel (48em) & above
ipad size
*/
@media (max-width: 48em) {
  /*header*/
  .headerContainer a:not(:first-child) {
    display: none;
  }

  .headerContainer a#hamburgerMenu {
    float: right;
    display: block;
    visibility: visible;
  }

  .headerContainer a.account {
    display: none;
  }

  /*style guide side navigation menu & content*/
  .sideBody {
    max-width: 100%;
    margin-left: 0;
  }

  .sideBody section {
    padding: 0 2em;
  }

  .sideMenu {
    position: relative;
    max-width: 100%;
    height: 0;
    background: transparent;
    float: none;
  }

  #sideNavItems img {
    display: none;
  }

  /*carousel*/
  .fullImageContainer {
    width: auto;
    height: 45vh;
  }

  /*body content*/
  .centerContent {
    padding: 2em 0;
  }

  .twoColumnGridContainer {
    display: block;
  }

  .oneColumnContent {
    margin: 0;
  }

  .centerColumnForm {
    margin: 0;
  }

  /* account */
  .accountSideMenu {
      font-size: 1.2em;
      text-decoration: none;
      padding: 1em 0em;
      margin: 0em;
  }

  hr.solidLineDivideAccount {
    margin: 0em 4em;
  }

  .twoGridColumnItem {
    padding: 0;
  }
}
/*
------------------------------------------------------------- 768pixel (48em) & above END
ipad size style guide media query end here
*/



/*
-------------------------------------------------- screen size at 768pixel (48em) & above
ipad size for hamburgerMenu only
*/
@media (max-width: 48em) {
  /*header hamburgerMenu*/
  header {
    height: auto;
  }

  .headerContainer.responsive a#hamburgerMenu {
    position: absolute;
    right: 2%;
    top: 0;
  }

  .headerContainer.responsive a {
    float: none;
    display: block;
    text-align: left;
    /*padding: 0;*/
  }

  .headerContainer .account.hide {
    display: none;
  }
}
/*
------------------------------------------------------------- 768pixel (48em) & above END
ipad size for hamburgerMenu only
*/



/*
-------------------------------------------------- screen size at 608pixel (38em) & above
*/
@media (max-width: 38em) {
  /*header*/
  .navBar span {
    visibility: hidden;
    display: none;
  }

  #mainNavToggle {
    visibility: visible;
    float: none;
    display: flex;
  }

  /*carousel*/
  .fullImageContainer {
    width: auto;
    height: 35vh;
  }

  /*body content*/
  .fullImageContainer h1 {
    font-size: 2em;
  }

  .centerContent {
    padding: 1em 0;
    margin: 0 2%;
  }

  .threeGridColumnItem {
    max-width: 100%;
  }

  .lightButtonOnImg {
    padding: 0.5em 1em;
  }

  .fullLengthText {
    margin: 0;
  }

  /*footer*/
  footer {
    padding: 1em;
  }

  /*account*/
  .accountMenuTitles {
    text-align: center;
  }

  .accountRightSideItemTopContainer, .accountPosButtonItem, .accountNegButtonItem {
    display: block;
    margin: 0 1em;
  }

  .accProfileBottomRightItemLeft, .accProfileBottomRightItemRight, .accForumPostsCentered, .notifyItemColumns, .accountRightSideItemBottomContainerPurchase3 {
    margin: 0 1em 3em;
    padding: 0;
  }

  .accountPosButtonItem, .accountNegButtonItem {
    margin: 0 0 1em;
  }

  .purchaseHistoryContainer, .purchaseHistoryProductsItem a.button.buttonFill {
    display: block;
  }

  .purchaseHistoryDateItem {
    max-width: 100%;
    border: none;
    padding-bottom: 1em;
    border-bottom: thin solid;
    margin-bottom: 1em;
  }

  .purchaseHistoryProducts, .purchaseHistoryProductsItem ul li .generalLink {
    margin: 0;
  }

  .purchaseHistoryProductsItem a.button.buttonFill {
    position: relative;
    max-width: 100%;
  }

  .threeColumnGridContainer.marginLeftAndRight div.threeGridColumnItem {
    margin: 1em 0 0;
  }

  .marginLeftAndRight {
    margin: 0;
  }

  .productListings {
    margin-bottom: 0;
  }

  .accountRightSideItemBottomContainer {
    margin: 0 1em 3em;
  }
}
/*
------------------------------------------------------------- 608pixel (38em) & above END
*/

/*
-------------------------------------------------- screen size at 320pixel (20em) & above
*/
@media (max-width: 20em) {
  input[type=search] {
    width: 100%;
    margin-bottom: 1em;
  }

  #searchButton {
    width: 100%;
  }

  .centerContent a.button.buttonFill {
    width: 100%;
  }
}
/*
------------------------------------------------------------- 320pixel (20em) & above END
*/