#menucontainer {
  height: 61px !important;
}
#democontainer {
  top: 61px !important;
}
#democontainer::selection {
  background-color: #ebebeb;
}
#democontainer::-moz-selection {
  background-color: #ebebeb;
}
#menu {
  z-index: 4;
  position: fixed;
  top: 0;
  bottom: auto;
  width: 100%;
  min-width: 916px;
  height: 60px;
  margin: 0 0 20px 0;
  background: #ffffff;
  font-size: 16px;
  text-align: center;
  transition: background 0.24s ease-in-out;
}
#menu a {
  color: #000000;
  text-decoration: none;
}
#menu.hide {
  background: rgb(255, 255, 255, 0);
}
#name, .menulink, .c-hamburger, #searchbar, #searchicon, #carticon {
  pointer-events: all;
  opacity: 1;
  transition: top 0.24s, opacity 0.24s;
  -webkit-transition: top 0.24s, opacity 0.24s;
  -moz-transition: top 0.24s, opacity 0.24s;
}
#name {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 21px 20px 21px 20px;
  font-weight: normal;
  letter-spacing: -0.2px;
}
#name, .menulink, #searchbar #searchicon, #carticon {
  display: inline;
}
.menulink {
  position: relative;
  top: 21px;
  padding: 42px 20px 21px 20px;
  text-decoration: none;
}
.menulink:nth-child(2) {
  searchbar: 0.08s;
}
.menulink:nth-child(3) {
  transition-delay: 0.16s;
}
.menulink:nth-child(4) {
  transition-delay: 0.24s;
}
#shoplink {
  cursor: pointer;
}
#democontainer img, #bgvid {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
}
#dropdownarrow {
  z-index: 4;
  position: absolute;
  bottom: 2px;
  left: 28px;
  right: auto;
  width: 20px;
  transform: translateY(0) rotate(0);
  -webkit-transform: translateY(0) rotate(0);
  -moz-transform: translateY(0) rotate(0);
  transition: transform 0.24s ease-in-out;
}
#dropdownarrow.open {
  transform: translateY(8px) rotate(0);
  -webkit-transform: translateY(8px) rotate(0);
  -moz-transform: translateY(8px) rotate(0);
  transition: transform 0.24s ease-in-out;
}
#searchbar {
  z-index: 4;
  position: absolute;
  top: 0;
  left: auto;
  right: 100px;
  width: 200px;
  height: 20px;
  margin: 20px 20px 0 20px;
  padding: 1px 2px 0 2px;
  font-size: 16px;
  font-family: Helvetica;
  font-weight: lighter;
  letter-spacing: -0.4px;
  line-height: 20px;
  background: #eeeeee;
  border: 0;
  border-radius: 0;
  outline: none;
  transition-delay: 0.32s;
}
#searchicon, #carticon {
  z-index: 5;
  position: absolute;
  top: 0;
  height: 20px;
  margin: 0;
  padding: 20px;
}
#searchicon {
  right: 60px;
  cursor: pointer;
  transition-delay: 0.4s;
}
#searchlist {
  z-index: 6;
  position: absolute;
  top: 22px;
  left: auto;
  right: 100px;
  width: 204px;
  height: 0;
  margin: 20px 20px 0 20px;
  padding: 0;
  text-align: left;
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
}
#searchlist li {
  width: 100%;
  padding: 0;
}
#searchlist li a {
  position: relative;
  display: block;
  width: 100%;
  margin: -1px 0 0 0;
  padding: 0;
  background: #f7f7f7;
  border: 1px solid #d8d8d8;
  border-width: 1px 0 1px 0;
  overflow: hidden;
}
#carticon {
  right: 0;
  transition-delay: 0.48s;
}
/* Credit to Call Me Nick (https://callmenick.com/) for hamburger menu icon. */
.c-hamburger {
  z-index: 5;
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  float: right;
  overflow: hidden;
}
.c-hamburger:focus {
  outline: none;
}
.c-hamburger span {
  position: absolute;
  display: block;
  top: 30px;
  left: 21px;
  right: 21px;
  height: 1px;
  background: #000000;
}
.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
  content: "";
}
.c-hamburger span::before {
  top: -7px;
}
.c-hamburger span::after {
  bottom: -7px;
}
.c-hamburger--htx span {
  transition: background 0s 0.1s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.1s, 0.1s;
  transition-delay: 0.1s, 0s;
}
.c-hamburger--htx span::before {
  transition-property: top, transform;
}
.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}
.c-hamburger--htx.is-active span {
  background: none;
}
.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
  bottom: 0px;
  transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.1s;
}
#name.hide, .menulink.hide, #searchbar.hide, #searchicon.hide, #carticon.hide, .c-hamburger.hide {
  pointer-events: none;
  opacity: 0;
  top: -100px;
  transition: top 0.24s, opacity 0.24s;
  -webkit-transition: top 0.24s, opacity 0.24s;
  -moz-transition: top 0.24s, opacity 0.24s;
}
#shopmenu {
  z-index: 3;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  padding: 21px 20px 20px 20px;
  background-color: #ffffff;
}
#shopmenu a {
  display: inline;
  width: auto;
  padding: 21px 20px 20px 20px;
}
#shopmenu.open {
  pointer-events: all;
  opacity: 1;
}
#contentcover {
  z-index: 2;
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.06);
}
#searchresults, #content, #footerlinks {
  position: relative;
  left: 0;
  right: 0;
  width: calc(100% - 20px);
  max-width: 900px;
  margin: 0 auto;
}
#searchresults {
  display: none;
  top: 60px;
  height: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#searchresults li, #productlist li {
  display: inline;
  text-align: left;
}
#searchresults li a, #productlist li a {
  color: #000000;
  text-decoration: none;
}
#searchresults li a img {
  width: calc(50% - 20px);
  margin: 0 10px 85px 10px;
}
.productinfo {
  position: relative;
  display: inline-block;
  top: 10px;
  margin: 0;
  padding: 0;
}
#searchresults li a .productinfo {
  width: calc(50% - 15px);
  margin: 0 0 20px calc(-50% + 10px);
}
#shopmenu, #searchlist, #contentcover, #searchresults {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease-in-out;
}
#searchresults, #searchresultsempty, #searchresultsclose {
  transition: opacity 0s ease-in-out;
}
.producttitle, .productoption, .productprice, .productbuybutton {
  display: block;
}
.productoption {
  margin: 0 0 0 -3px;
}
.productoption div {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 3px 0 3px;
  background-color: #e0e0e0;
  border-radius: 6px;
}
.productbuybutton, .aboutbutton {
  position: relative;
  height: 16px;
  text-decoration: none;
  background-color: #000000;
  color: #ffffff;
  border-radius: 14px;
}
.productbuybutton {
  width: 30px;
  margin: 2px 0 6px 0;
  padding: 3px 6px 2px 8px;
}
#searchresultsempty, #searchresultsclose {
  position: relative;
  height: 0;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  opacity: 0;
}
#searchresultsempty {
  color: #000000;
}
#searchresultsclose {
  color: #888888;
}
#searchresults.show {
  display: block;
  margin: 0 auto 120px auto;
}
#searchresultsempty.show, #searchresultsclose.show {
  margin: 40px auto 0 auto;
}
#searchlist.show, #searchresults.show, #searchresultsempty.show, #searchresultsclose.show {
  height: auto;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.24s ease-in-out;
}
.banner {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 60px auto 80px auto;
  background-image: url("../../../images/demos/ecommercesuite/placeholder.png");
  background-repeat: repeat;
  text-align: center;
}
.banner h1 {
  position: relative;
  top: 150px;
  margin: 0 20px 0 20px;
  font-size: 32px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: -0.8px;
}
.buybuttonlrg, .learnmorebuttonlrg {
  display: block;
  position: relative;
  text-decoration: none;
}
.buybuttonlrg, .productbuybutton, .aboutbutton {
  line-height: 16px;
}
.buybuttonlrg, .infobuttonlrg {
  width: 40px;
  height: 16px;
  background-color: #000000;
  color: #ffffff;
  border-radius: 14px;
}
.banner .buybuttonlrg, .banner .learnmorebuttonlrg {
  display: block;
  left: 0;
  right: 0;
  width: 100px;
}
.banner .buybuttonlrg {
  margin: 27px auto -1px auto;
  padding: 5px 0 3px 0;
}
.learnmorebuttonlrg {
  color: #000000;
}
.banner .learnmorebuttonlrg {
  margin: 2px auto 0 auto;
}
.learnmorearrow {
  position: relative;
  display: inline;
  left: -2px;
  bottom: -6px;
  height: 20px;
  max-width: 20px;
  margin: 0;
}
.banner .learnmorearrow {
  margin: 0 -20px 0 0;
}
.banner .buybuttonlrg, .banner .learnmorebuttonlrg {
  position: relative;
  top: 130px;
}
#content {
  z-index: 0;
  top: 60px;
  width: 100%;
  min-height: 60px;
  margin: 0 auto;
  padding: 0;
}
#productpreviewtitle, #productlisttitle {
  margin: 64px 10px 40px 10px;
  font-size: 24px;
  font-weight: lighter;
  line-height: 24px;
  letter-spacing: -0.6px;
  float: none;
}
#productlist {
  list-style: none;
  margin: 0 5px 100px 5px;
  padding: 0;
}
#productlist li a img {
  width: calc(25% - 10px);
  margin: 0 5px 72px 5px;
}
#productlist li a .productinfo {
  width: calc(25% - 10px);
  margin: 0 0 20px calc(-25% + 5px);
}
.featuredproduct, .introblock {
  display: flex;
  align-items: center;
}
.featuredproduct {
  width: calc(100% - 20px);
  margin: 0 auto 120px auto;
}
.featuredimg {
  width: 30%;
  left: 0;
}
.featuredtext {
  position: relative;
  right: 0;
  width: calc(70% - 40px);
  margin: 0 20px 0 20px;
}
.featuredtext h2 {
  margin: 0 0 3px 0;
  padding: 0;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.6px;
}
.featuredtext .buybuttonlrg {
  margin: 7px 0 0 0;
  padding: 5px 24px 3px 36px;
}
.featuredtext .learnmorebuttonlrg {
  margin: 0 auto 0 2px;
}
.introblock {
  width: calc(100% - 20px);
  margin: 0 auto 100px auto;
  background-color: #eeeeee;
}
.introblock h2 {
  font-weight: lighter;
  margin: 0 0 20px 0;
  padding: 0;
}
.introtext {
  position: relative;
  left: 0;
  width: calc(60% - 40px);
  margin: 40px 0 40px 40px;
}
.aboutbutton {
  position: relative;
  display: block;
  left: auto;
  right: 0;
  width: 100px;
  margin: 20px 0 0 auto;
  padding: 5px 8px 3px 9px;
}
.introimg {
  position: relative;
  width: 33%;
  right: 0;
  width: calc(40% - 40px);
  margin: 40px;
}
#footer {
  height: 315px;
  width: 100%;
  background-color: #eeeeee;
}
#footerlinks {
  top: 40px;
}
#footerlinks a {
  color: #000000;
  line-height: 20px;
  text-decoration: none;
}
.sectionab, .sectioncd {
  position: relative;
}
.sectionab {
  left: 10px;
  width: 66%;
  float: left;
}
.sectioncd {
  right: 10px;
  width: 33%;
  float: right;
}
.sectiona, .sectionb {
  margin: 0 auto 20px 0;
}
.sectionc, .sectiond {
  margin: 0 0 20px auto;
  text-align: right;
}
.sectiona a {
  display: inline-block;
  margin: 0 40px 0 0;
  font-weight: bold;
}
.sectionb a, .sectionc a {
  display: block;
}
.sectionc {
  margin: 0 auto 60px 0;
}
.sectionc a {
  font-weight: bold;
}
#productlisttitle {
  margin: 64px 10px 40px 10px;
  float: left;
}
select#productcategory, select#productselect {
  margin: 60px 12px 0 0;
  padding: 1px 4px 0 4px;
  font-family: Helvetica;
  font-weight: lighter;
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 20px;
  width: 150px;
  background: url("../../../images/demos/ecommercesuite/dropdownarrow.svg") 100% / 20px no-repeat #ffffff;
  border: 1px #000000 solid;
  border-radius: 0;
  float: right;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}
select#productcategory {
  max-width: 30%;
}
select::-ms-expand {
  display: none;
}
.floatclear {
  clear: both;
}
.productcategory1, .productcategory2 {
  display: block;
  height: auto;
  opacity: 1;
  pointer-events: all;
}
.productcategory1.hide, .productcategory2.hide {
  display: none;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
#productslideshow {
  width: calc(50% - 37px);
  max-width: 418px;
  margin: 120px 22px 60px 10px;
  float: left;
}
#productdesc {
  width: calc(50% - 28px);
  max-width: 422px;
  margin: 120px 10px 60px 10px;
  float: right;
}
#productdesc h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
  font-weight: normal;
  line-height: 24px;
  letter-spacing: -0.6px;
  text-align: left;
}
#productdesc h2 {
  margin: 0 0 40px 0;
  font-size: 18px;
  font-weight: lighter;
  line-height: 18px;
  letter-spacing: -0.4px;
  text-align: left;
}
#productdesc p {
  margin: 0 0 20px 0;
}
ul {
  margin: 0 0 40px 0;
  padding: 0 20px;
}
.subtext {
  color: #888888;
}
#productactions {
  text-align: left;
}
select#productselect {
  margin: 22px 0 0 0;
  padding: 2px 4px 0 4px;
  float: none;
}
#productaddtocart {
  height: 24px;
  margin: 22px 0 0 0;
  image-rendering: pixelated;
}
#productrelatedtitle {
  margin: 60px 10px 40px 10px;
  font-size: 24px;
  font-weight: lighter;
  line-height: 24px;
  letter-spacing: -0.6px;
}
#mission {
  margin: 90px 20px 60px 20px;
  font-size: 32px;
  font-weight: lighter;
  line-height: 32px;
  letter-spacing: -0.8px;
}
#aboutimg {
  width: calc(100% - 40px);
  margin: 0 20px 20px 20px;
}
#democontainer p {
  margin: 0 20px 20px 20px;
}
#centertext {
  margin: 0 20px 0 20px;
  text-align: center;
}
#centertext h1 {
  margin: 240px 0 3px 0;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.6px;
}
.infobuttonlrg {
  position: relative;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  padding: 4px 8px 3px 7px;
  text-decoration: none;
  text-align: center;
}
@media only screen and (max-width: 920px) {
  body {
    font-size: 14px;
  }
  #menu {
    z-index: 4;
    position: fixed;
    top: 0;
    bottom: 0;
    min-width: 320px;
    margin: 0;
  }
  .c-hamburger {
    display: block;
    transition-delay: 0s;
  }
  #menu.hide {
    transition-delay: 0s;
  }
  .menulink {
    position: relative;
    display: block;
    top: 120px;
    padding: 21px 20px 20px 20px;
    background-color: #ffffff;
    text-align: left;
  }
  .menulink:nth-child(2) {
    transition-delay: 0s;
  }
  .menulink:nth-child(3) {
    transition-delay: 0s;
  }
  .menulink:nth-child(4) {
    transition-delay: 0s;
  }
  .menulink, #searchbar, #searchicon {
    opacity: 0;
    pointer-events: none;
    transition: top 0.24s, opacity 0.24s;
    transition-delay: 0s;
  }
  #dropdownarrow {
    z-index: 2;
    position: absolute;
    left: auto;
    bottom: 20px;
    right: 24px;
    width: 20p;
    transform: translateY(0) rotate(-90deg);
    -webkit-transform: translateY(0) rotate(-90deg);
    -moz-transform: translateY(0) rotate(-90deg);
  }
  #dropdownarrow.open {
    transform: translateY(0) rotate(0);
    -webkit-transform: translateY(0) rotate(0);
    -moz-transform: translateY(0) rotate(0);
  }
  #searchbar {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 20px;
  }
  #searchicon {
    top: 60px;
    right: 0;
  }
  #carticon {
    right: 60px;
    transition-delay: 0s;
  }
  #searchbar, #searchicon {
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s, opacity 0.24s;
  }
  .menulink.show, #searchbar.show, #searchicon.show, #shopmenu.show, #contentcover.show {
    pointer-events: all;
    opacity: 1;
    transition: top 0.24s, opacity 0.24s;
    transition-delay: 0s;
  }
  .menulink:nth-child(4) {
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transition: transform 0.24s;
  }
  .menulink:nth-child(4).fall {
    transform: translateY(181px);
    -webkit-transform: translateY(181px);
    -moz-transform: translateY(181px);
    transition: transform 0.24s;
  }
  #shopmenu {
    position: absolute;
    top: 238px;
    left: -20px;
    padding: 0 20px 0 20px;
    background-color: #f7f7f7;
    text-align: left;
  }
  #shopmenu a {
    display: block;
    width: calc(100% + 20px);
  }
  #shopmenu a {
    border-bottom: 1px solid #d8d8d8;
  }
  #shopmenu a:nth-child(1) {
    border-top: 1px solid #d8d8d8;
  }
  #searchlist {
    position: absolute;
    top: 121px;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
  }
  #searchlist li {
    width: 100%;
  }
  #searchlist li a {
    padding: 20px;
  }
  #searchresults li a img {
    margin: 0 10px 68px 10px;
  }
  .banner h1 {
    top: 160px;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.6px;
  }
  .buybuttonlrg, .productbuybutton, .aboutbutton {
    line-height: 15px;
  }
  .buybuttonlrg {
    width: 34px;
  }
  .banner .buybuttonlrg, .banner .learnmorebuttonlrg {
    width: 94px;
  }
  .banner .buybuttonlrg {
    margin: 38px auto 0 auto;
  }
  .banner .learnmorebuttonlrg {
    margin: 0 auto 0 auto;
  }
  .learnmorebuttonlrg {
    margin: 2px auto 0 auto;
  }
  #productpreviewtitle, #productlisttitle {
    margin: 0 20px 40px 20px;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.4px;
  }
  #productlist {
    margin: 0 10px 100px 10px;
  }
  #productlist li a img {
    width: calc(50% - 20px);
    margin: 0 10px 68px 10px;
  }
  #productlist li a .productinfo {
    width: calc(50% - 15px);
    margin: 0 0 20px calc(-50% + 10px);
  }
  .productinfo {
    top: 12px;
  }
  .productbuybutton {
    width: 26px;
  }
  .featuredproduct {
    width: calc(100% - 40px);
  }
  .featuredimg {
    width: 40%;
  }
  .featuredtext {
    width: calc(60% - 40px);
  }
  .featuredtext h2 {
    margin: 0 0 2px 0;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.4px;
  }
  .introtext {
    width: calc(50% - 20px);
    margin: 40px 0 40px 20px;
  }
  .introimg {
    position: relative;
    right: 0;
    width: calc(50% - 20px);
    margin:  20px;
  }
  .aboutbutton {
    left: 0;
    right: auto;
    margin: 20px auto 0 0;
    width: 88px;
  }
  .sectiona a {
    display: block;
  }
  .sectionc {
    margin: 0 auto 80px 0;
  }
  #productlisttitle {
    margin: 64px 20px 40px 20px;
  }
  select#productcategory, select#productselect {
    padding: 1px 4px 1px 4px;
  }
  select#productcategory {
    margin: 60px 20px 0 15px;
  }
  #productslideshow {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin: 45px 20px 32px 20px;
    float: none;
  }
  #productdesc {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin: 0 20px 120px 20px;
    float: none;
  }
  #productactions {
    text-align: center;
  }
  #productrelatedtitle {
    margin: 0 20px 40px 20px;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.4px;
  }
  #mission {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.6px;
  }
  #centertext h1 {
    font-size: 18px;
    line-height: 18px;
    letter-spacing: -0.4px;
  }
  .infobuttonlrg {
    top: 9px;
    padding: 3px 6px 3px 6px;
  }
}