.hamburger {display: none; position: absolute; top: 30px;}
.cart-mobile {display: none}

@media screen and (max-width:1550px) {
  .wrapper {width:95%;} 
  header nav > ul > li > a {margin:0 5px;}
  header nav > ul > li {font-size: 13px;}
  .product-boxes.alt {max-width: 95%; margin:0 auto;}
  .product-boxes.alt .item figure img {max-height: 250px; top: 60%}
  .product-boxes .item article {width: auto}
  .product-boxes.alt .item, .product-boxes.alt .item figure {min-height: 300px; height: 300px;}
  .colour-1, .colour-2, .colour-3, .colour-4 {height: 350px;}
  .boxes article {padding: 0px 40px 0 35px;}
  .boxes article p {top: 80%}
  .boxes article p::before {width: 50px;}
  .item {min-height: 360px;max-height: 360px;}
  .item figure img {max-height: 300px;}
  .buy {left: 15px;}
  .feature-item img {height: 360px; width: auto}
 .slider-row figure img {max-width: 350px;}
}

@media screen and (max-width:1366px) {

.slider-row figure img {max-width: 270px;}
.slider-row p .button {font-size: 15px; padding: 10px 15px;}
.slider-row p {font-size: 14px; line-height: 20px;}
.slider-row p br {display: none}
.content .home {padding: 70px 0}
.product-slider .slick-next {right: -55px;}
.product-slider .slick-prev {left: -55px;}
.boxes article {max-width: 80%}
.boxes article p::before {width: 40px;}
.social {width: 200px; margin-right: 0}
.social h4 {width: 100%; margin-right: 0}
.social a {margin:0;}
.product-slider {margin: 0 auto 3.5rem;}
.category-header h1 {font-size: 40px; margin-bottom: 10px;}
.category-header p {font-size: 12px; line-height: 21px;}
.category-header article {padding:0;}
.cat-quote {max-height: 359px; overflow: hidden;}
.cat-quote img {}
.item figure {height: 360px;}
.item article {width: 90% !important}
.product-boxes .static.item article {width: auto !important}
.testimonial h4 {font-size: 60px; line-height: 45px;}
.m-b-7 {margin-bottom: 40px;}
.boxes article h3 {font-size: 21px; max-width: 90%;}
.buy, .buy a.button {font-size: 12px;}
.boxes {margin-bottom: 30px;}
.boxes.icons img {max-height: 120px}
.product-boxes.alt {margin:0 auto 40px;}
.item h2 strong {display: block;}
.repeat-checkbox label, .cc-checkbox label {font-size: 16px;}
.pay-bx a {padding-left: 10px; font-size: 16px;}
header nav ul li:hover .container {width: 135%}
.content-mini {max-width: 80%}
.heading {background-position: center;}
.heading p {font-size: 30px;}
header nav {width: 40%}
.content-blog > div.blog-content {width: 70%}
.content-blog > div.sidebar {width: 30%}
.content-blog p.text-large {font-size: 18px;}
.blog-content > h3 {max-width: 90%}

}
  
  
@media screen and (max-width:1280px) {
  .logo img {width: 130px; margin-top: 10px;}
  .signup-sidebar form {width: 200px !important}
  .wrapper {width:90%;}
  .product-slider .slick-prev, .product-slider .slick-next {display: none}
  .signup {width: 25%}
  .cat-quote {max-height: 318px;}
  .cat-quote img {}
  .category-header article {width: 80%}
  .item {min-height: 320px; max-height: 320px;}
  .item figure {height: 320px;}
  .item.static h2 {font-size: 21px;}
  .item.static p {font-size: 15px;}
  .testimonial h4 {font-size: 50px;line-height: 38px;}
  .item.featured_square img {height: 320px;}
  .heading article {max-width: 55%}
  .wrapper-header {max-width: 95%}
  header nav > ul > li > a {margin: 0 5px;}
}

@media screen and (max-width:1200px) {

.hamburger {display: block; left: 20px; top: 35px;}
header nav {display: none}
header .side-menu nav {display: block;}
header .side-menu {position: absolute; right: 0; top: 0;}

}


@media screen and (max-width:900px) {
  .content-blog > div.sidebar {display: none}
  .content-blog > div.blog-content {width: 100%}
  .NewsSummary {width: 100%}
.mobile-menu {display: block;}
.slider-row p {text-align: center; font-size: 13px;}
  .slider-row > div {width: 100%}
  .slider-row > article {width: 100%; padding: 40px 0 60px 0;}
  .content h1 {max-width: 90%; margin:0 auto; font-size: 23px; line-height: 36px;}
  .product-slider .slide-row > div {width: 100%; margin-top: 10px;}
  .tag-top {left: 0; width: 100%; text-align: center;}
  .boxes > div {width: 50%}
  .boxes article {padding: 0}
  .boxes article h3 {margin-top: 20px; font-size: 21px; letter-spacing: normal;}
  .boxes article p {display: none}
  .product-slider {margin: 0 auto 10px;}
  .boxes {margin-bottom: 0px;}
  .social { width: 90%; margin: 0 auto; float: none; text-align: left}
  .social h4 {}
.footer-nav {width: 90%; margin: 0 auto;}
.signup {display: none}
.footer-text {padding-top: 20px; width: 100%; padding-bottom: 20px;}
footer .logo-f {margin-bottom: 25px;width: 90px;}
.copyright, .divider a {width: 100%; text-align: center; line-height: 24px; display: block;}
.copyright a {display: block; margin:0;}
.divider div {width: 100%}
.logo {width: 100px; left: 39%; top: 35px;}
.logo img {width: 100%}
header .side-menu nav {display: none}
.cart-mobile {
    display: block;
    position: absolute;
    right: 0;
    width: 95px;
    top: 45px;
}

.item.featured_rectangle {
    width: 100%;
    height: auto;
    min-height: auto;
}

.mp-menu ul li > a {font-size: 16px;}
.mp-menu {width: 250px;}
.cat-text, .cat-image {width: 100%}
.cat-quote {display: none}
.item {width: 100%}
.item.static {width: 100%; height:auto; min-height: auto}
.item.static article {padding:0 20px;}
 .heading article h1 {font-size: 21px; line-height: 30px}
 .heading p {font-size: 16px; line-height: 24px;}
 .content-mini {max-width: 100%;}
 #accordion h3 {font-size: 18px;}
.content-mini h4 {font-size: 40px; line-height: 40px;}
.content-mini h2 {font-size: 21px; line-height: 30px;}
.team > figure {width: 100%}
.team {display: block;}
#emma article, #helen article, #board article {width: 100%;padding: 0;}
.heading article {max-width: 80%;}
.product-desc {width: 100%}
.product p {max-width: 100%}
.product h1 {font-size: 45px;}
.product h2 {font-size: 24px;}
.main-img { width: 100%;margin-top: 30px;}
.thumbs {width: 33%; margin: 20px 0;}
#testimonials {margin:0 auto;}
.product .button {font-size: 16px;padding: 17px 15px;}
p.price {font-size: 21px;}
.cart-bx {width: 100%; padding: 10px 0;}
.quantity input {width: 60px;}
.cart {padding:20px 0;}
.form input[type="text"], form input[type="password"], .coupon-field input {padding:20px 0;}
.field textarea {width: 100%}
.cart-bx h3, .addresses h3 {font-size: 24px;}
.coupon-field input[type="submit"] {top: 10px;}
.repeat-checkbox label, .cc-checkbox label {font-size: 13px;}
.checkmark {width: 21px; height: 21px;}
.pay-bx a {font-size: 13px}
.heading {padding:30px 0 50px 0;}
.content-mini {padding-bottom: 5%}
.content-mini h3 {font-size: 21px;}
hr {margin:20px 0;}
.retailers li {width: 32%}
.breadcrumbs {font-size: 11px; padding: 15px 0;}
}


@media screen and (max-width:450px) {
.item.static h2 {font-size: 18px;}
.item.static p {font-size: 13px;line-height: 19px;}
.category-header article {width: 90%;text-align: center;margin: 0 auto;}
 .boxes.icons  {max-height: none}
 .colour-1, .colour-2, .colour-3, .colour-4 {height: 200px;}
 .boxes.icons img {max-height: 70px;}
 .boxes article h3 {font-size: 16px; max-width: 90%}
 .m-b-7 {margin-bottom: 10px;}
.slick-next {right: -25px !important;}
.slick-prev {left: -25px !important;}
.product-boxes.alt {max-width: 90%; margin-top: 20px;}
.content-blog .blog-item {display: block;}
.blog-item.flex-row > div.blog-image {width: 100%}
.blog-item.flex-row > div.blog-text {width: 100%; margin-top: 20px;}
.content-blog .blog-item {padding: 20px;}
.post-date {right: 30px;}
}





.hamburger {
  padding: 15px 0px;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; 
 
    z-index: 999999;
}
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #fff; 
   }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 45px;
    height: 4px;
    background-color: #978b82;
    border-radius: 0px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; left: 0px; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -15px; }
  .hamburger-inner::after {
    bottom: -15px; }



.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.mp-pushed .hamburger--arrowalt .hamburger-inner::before {
  top: 0;
  transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); 
left:-4px;

}

.mp-pushed .hamburger--arrowalt .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
left:-4px;
   }