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

  .wrapper {max-width: 1200px;}

  .home-banner article {top: 45%;}
  .home-banner .background::before {left: calc(-11vw + 1px); width: 11vw;}

  .bubble {grid-template-columns: 120px 1fr 10px; padding: 30px 100px 30px 40px}

  .shop-grid .grid-3 {grid-template-columns: repeat(2,1fr);}

  .tile article {padding: 30px;}
  .tile article p {max-width: 300px;}
  .tile article .swiper-slide p {max-width: 335px;}

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

  .home-banner .background::before, .home-banner .background {height: 15vh;}
  .home-banner article, .home-banner .button-row {left: 4vw;}

  .inner-banner .background {width: 45vw;}
  .inside-content .inner-banner article {max-width: 40vw;}

  .product-banner {border-radius: 25px;}

  .intro {margin: -6vw 0 5vw 30px;}

  .inside-content .content p {max-width: 450px;}

  .tile article .swiper-slide p {max-width: 300px;}
  .tile figure {margin-bottom: 15px;}

  footer .wrapper-lrg .footer-inner .flex-row:first-of-type {margin-bottom: 2vw;}

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

  :root {
    --border: 15px;
    --border-2: 10px;
    --p: 13px;
  }

  .button {padding: 20px 35px; font-size: 15px;}

  header .header-left .menu-wrapper {padding: 0;}
  header .wrapper-lrg a, header .header-left .menu-wrapper span {font-size: 15px;}
  header .nav > ul li a {margin: 47px 25px 42px;}

  .menu-drop {top: 109px; border-radius: 10px;}
  .menu-drop ul li:first-child a {font-size: 17px;}
  .menu-drop ul li a {font-size: 15px;}
  .menu-drop .lists {padding: 30px 80px 10px 30px; gap: 70px;}
  .menu-drop > a {margin-bottom: 30px;}

  .home-banner article h1 {margin-left: -15px;}
  .home-banner h1 span {margin-left: 15px;}

  .intro .grid {grid-template-columns: 2fr 3fr;}
  .intro .grid > article {max-width: 365px;}
  .intro .grid > article p {font-size: 15px;}
  .intro .grid > div h5 {font-size: 20px; padding: 15px 25px;}
  .intro .grid > div .swiper-slide:hover .category-description p {top: 70px;}
  .intro .grid > div .swiper-slide::before {top: 35px; right: 15px;}
  .intro .grid > div .category-description p {padding: 10px; font-size: 13px;}

  .product-tile article {padding: 30px 25px 25px;}
  .product-tile article h3 {font-size: 20px;}

  .product-tile .flex-row:first-of-type {margin-top: 20px;}
  .product-tile .button-row {margin-top: 25px;}

  .home-banner {height: 68dvh;}
  .home-banner .button-row {left: 2vw; bottom: 3vw; gap: 20px;}

  .hire-tile article h4 {font-size: 35px;}
  .hire-tile article:first-child p {font-size: 20px;}
  .hire-tile .grid {grid-template-columns: 200px 1fr;}

  .bubble {padding: 25px 85px 25px 35px;}
  .bubble::before {width: 40px; height: 40px;}
  .bubble::after {height: 15px; width: 20px; right: 35px;}

  .tile {padding: 15px;}
  .tile article h4 {max-width: 100%; margin-bottom: 15px;}
  .tile article p {line-height: 1.5; max-width: 265px; font-size: 15px;}

  .choice .grid {max-width: 1100px;}

  .content p:first-child em {font-size: 15px;}

  .shop-grid {grid-template-columns: 250px 1fr; grid-gap: 30px;}
  .filter-block {padding: 40px 30px;}
  .filter-block span {font-size: 11px;}
  .filter-block ul li {font-size: 13px;}

  footer .wrapper-lrg .footer-inner article p {font-size: 15px; margin-bottom: 20px;}
  footer .wrapper-lrg .footer-inner ul li a {font-size: 16px;}
  footer .wrapper-lrg .footer-inner .flex-row:first-of-type {margin-bottom: 3vw;}
  footer .wrapper-lrg .footer-inner .copyright {padding: 30px 0 35px;}
  footer .wrapper-lrg .footer-inner .copyright p, footer .wrapper-lrg .footer-inner .copyright a {font-size: 11px;}

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

  header .logo {width: 175px;}
  header .nav > ul li a {margin: 42px 19px 37px;}
  .menu-drop {top: 99px;}

  .button.small {padding: 12px 20px 10px; font-size: var(--p);}

  .intro {margin: -8vw 0 5vw 30px;}
  .intro .grid {grid-template-columns: 1fr 1fr;}

  .home-banner .background {width: 47vw;}

  .hire-tile .grid {grid-template-columns: 170px 1fr;}
  .hire-tile article h4 {font-size: 30px;}
  .hire-tile article:first-child p {font-size: 17px;}

  .choice .grid {max-width: 900px; grid-gap: 50px;}

  .bubble {padding: 15px 65px 15px 25px; grid-template-columns: 85px 1fr 20px;}
  .bubble::before {right: 20px;}
  .bubble::after {right: 30px;}

  .tile article {padding: 15px 20px;}
  .tile article h4 {font-size: 20px;}
  .tile article p {max-width: 225px; font-size: 13px;}
  .tile .custom-navigation {right: 20px; bottom: 20px;}
  .custom-navigation .custom-next, .custom-navigation .custom-prev {width: 35px; height: 35px;}
  .custom-navigation .custom-next::after, .custom-navigation .custom-prev::after {width: 12px;height: 15px;}

  .product-tile .button-row {flex-direction: column; justify-content: center; max-width: 200px; margin: 25px auto 0;}
  .product-tile .button-row .trademe-button-large, .product-tile .button-row .button.outline {width: 100%; text-align: center;}

  footer .wrapper-lrg .footer-inner {padding: 30px 30px 0;}
  footer .wrapper-lrg .footer-inner .flex-row:first-of-type {margin-bottom: 30px;}
  footer .wrapper-lrg .footer-inner h3 {font-size: 40px; max-width: 500px;}
  footer .wrapper-lrg .footer-inner article {max-width: 275px;}
  footer .wrapper-lrg .footer-inner article p {font-size: 13px;margin-bottom: 15px;}
  footer .wrapper-lrg .footer-inner .copyright {padding: 20px 0 20px; margin-top: 30px;}

}

@media screen and (max-width: 1100px) {
  .button {padding: 15px 25px;}
  .home-banner .button-row a {font-size: var(--p);}
  .home-banner .background::before, .home-banner .background {height: 12vh;}
  header .logo {width: 150px;}
  header .wrapper-lrg a, header .header-left .menu-wrapper span {font-size: var(--p);}

  .content p {line-height: 1.6;}

}

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

  :root {
    --h2: 30px;
    --h3: 25px;
    --p-large: 15px;
  }

  .hamburger {display: flex;}

  header .logo {margin-bottom: 5px;}
  header .nav, header .header-left .menu-wrapper {display: none;}
  header .button-circle.trademe {display: none;}
  header .header-right .button.arrow {display: none;}

  .padding {padding: 30px 0;}

  .content {margin: 30px 0;}

  .wrapper-med, .wrapper-x-small {max-width: none; width: 85%;}
  .wrapper-lrg {margin: 0 15px;}

  .button.outline {font-size: var(--p)}

  .home-banner {margin: 0 15px; height: 60dvh;}
  .home-banner figure {border-radius: 15px 15px 15px 0;}
  .home-banner article {top: 40%;}
  .home-banner article, .home-banner .button-row {left: 30px;}
  .home-banner article h1 {max-width: 75vw; font-size: 35px;}
  .home-banner article h1 span {margin-left: 10px;}
  .home-banner .button-row {top: 70%; bottom: auto; transition: 1s ease; opacity: 0;}
  .home-banner.loaded .button-row {top: 60%; opacity: 1; transition-delay: 0.2s;}
  .home-banner .background {right: auto; left: 0px; transform: scaleX(-1); width: 100%; height: auto; background: none;}
  .home-banner .background::before {display: none;}
  .home-banner .background::after {top: -15px; height: 15px; width: 15px;}

  .inner-banner {height: 40dvh;}
  .inner-banner figure {border-radius: 15px 15px 15px 0;}
  .inner-banner .background {right: auto; left: 0px; transform: scaleX(-1); width: 100%; height: auto; background: none;}
  .inner-banner .background::before {display: none;}
  .inner-banner .background::after {top: -15px; height: 15px; width: 15px;}
  .inner-banner > h1 {font-size: 40px; max-width: 90vw;}
  .inner-banner.loaded > h1 {top: 37%;}
  .inner-banner article {max-width: 100vw; position: relative; transform: scaleX(-1); top: auto; left: auto;}
  .inner-banner article h2 {font-size: 11px; display: inline-block; background: #fff; padding: 12px 15px 2px 0; margin: 0; position: relative; border-radius: 0 15px 0 0;}
  .inner-banner article h2::after {content: ''; display: block; position: absolute; right: -18px; bottom: 0; background: #fff; mask-image: url('/img/corner-shape.svg'); height: 20px; mask-size: contain; mask-repeat: no-repeat; width: 20px; mask-position: right; transform: rotate(90deg);}
  .inner-banner article p {font-size: var(--p); background: #fff; padding: 5px 5px 0 0; position: relative; box-sizing: border-box;}
  .inner-banner article p::after {content: ''; display: block; position: absolute; right: 0px; top: -15px; background: #fff; mask-image: url('/img/corner-shape.svg'); height: 15px; mask-size: contain; mask-repeat: no-repeat; width: 15px; mask-position: right;}

  .inner-banner.small {height: auto; margin: 0 15px;}
  .inner-banner.small article {transform: none; text-align: center; max-width: 100%; padding: 30px 15px; box-sizing: border-box;}

  .inner-banner .button-row {top: 60%; opacity: 0; transition: 0.5s ease;}
  .inner-banner.loaded .button-row {top: 50%; transition-delay: 0.2s;}

  .breadcrumbs {top: 15px; left: 15px;}

  .grid {grid-template-columns: 1fr; margin: 0 15px; grid-gap: 30px;}

  .intro {position: relative; margin: -85px 0 30px 0px;}
  .intro .grid {grid-template-columns: 1fr; margin: 0 15px; grid-gap: 15px;}
  .intro .grid > article {max-width: 100%; width: 100%;}
  .intro .grid > article h2 {font-size: 11px; display: inline-block; background: #fff; padding: 12px 15px 1px 0; margin: 0; position: relative; border-radius: 0 15px 0 0;}
  .intro .grid > article h2::before {content: ''; display: block; position: absolute; left: 0; top: -20px; background: #fff; mask-image: url('/img/corner-shape.svg'); height: 20px; mask-size: contain; mask-repeat: no-repeat; width: 20px; mask-position: right; transform: rotate(90deg);}
  .intro .grid > article h2::after {content: ''; display: block; position: absolute; right: -18px; bottom: 0; background: #fff; mask-image: url('/img/corner-shape.svg'); height: 20px; mask-size: contain; mask-repeat: no-repeat; width: 20px; mask-position: right; transform: rotate(90deg);}
  .intro .grid > article p {font-size: var(--p); background: #fff; padding: 5px 10px 0 0; position: relative; max-width: 100%; width: 100%; box-sizing: border-box;}
  .intro .grid > article p::after {content: ''; display: block; position: absolute; right: 0px; top: -15px; background: #fff; mask-image: url('/img/corner-shape.svg'); height: 15px; mask-size: contain; mask-repeat: no-repeat; width: 15px; mask-position: right;}
  .intro .grid > div h5 {font-size: 30px; padding: 30px 25px; top: 80%;}
  .intro .grid > div .swiper-slide:hover h5 {top: -8px;}
  .intro .grid > div .category-description p:first-child {border-radius: 15px 15px 0 0;}
  .intro .grid > div .category-description p::before, .intro .grid > div .category-description p::after {width: 16px; height:16px; top: -16px; right: 0;}
  .intro .grid > div .category-description p::before {left: 0px;}

  .overflow .productSwiper {margin-left: 0;}

  .product-tile img {border-radius: 10px 10px 0 0!important}

  .content .padding > .flex-row {padding: 0 30px; margin-bottom: 30px; flex-direction: column; align-items: flex-start; align-content: flex-start;}
  .content .padding > .flex-row h2 {margin-bottom: 10px;}

  .content h3 {max-width: none; margin-bottom: 15px;}

  .wrapper-lrg.padding.grey-bg {margin: 0;}

  .wrapper h2 {max-width: none}

  .swiper .swiper-scrollbar {margin: 30px 15px 0;}

  .hire-tile .grid {grid-template-columns: 1fr;}

  .choice .grid {grid-gap: 30px;}

  .grid-3, .grid-4 {grid-template-columns: 1fr;}

  .category-tile p:first-child {padding-bottom: 100%;}

  .shop-grid {grid-template-columns: 1fr; grid-gap: 30px;}
  .shop-grid .grid-3 {grid-template-columns: 1fr;}

  .filter-container {margin-bottom: 30px;}

  .filter-button {font-size: 13px; min-width: 150px;}
  .filter-dropdown {min-width: 150px;}
  .filter-dropdown div {font-size: 13px;}

  .bubble {padding: 15px 55px 15px 25px; grid-template-columns: 80px 1fr 20px;}
  .bubble::before {width: 30px; height: 30px;}
  .bubble::after {height: 10px; width: 15px; right: 26px;}

  .tile .custom-navigation {right: 15px; bottom: 15px;}
  .tile article p {max-width: 195px;}
  .tile article .swiper-slide p {max-width: none; padding-bottom: 45px;}

  .product-banner {border-radius: var(--border); margin: 0 15px;}

  .product-content h2 {font-size: 30px; margin-bottom: 20px;}
  .product-content h5 {font-size: 16px; margin-bottom: 15px; line-height: 1.5;}
  .product-content h6 {font-size: 11px; margin-bottom: 15px;}
  .product-content .button-row {margin-bottom: 30px;}
  .product-content .button-row .button {border-radius: 5px;}
  .product-content p {font-size: var(--p); margin-bottom: 5px;}

  .banner-wrapper {grid-template-columns: 1fr; width: 100%; max-width: none; box-sizing: border-box; padding: 10px; margin: 0; gap: 10px;}
  .banner-wrapper .swiper {height: auto;}
  .banner-wrapper .swiper .swiper-slide {height: 0; padding-bottom: 75%; position: relative;}
  .banner-wrapper .swiper .swiper-slide img {position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
  .banner-wrapper .swiper.insideproduct {order: 2;}
  .banner-wrapper .swiper.insideproduct .swiper-slide {padding-bottom: 50%;}
  .banner-wrapper .custom-navigation {bottom: 10px; right: 10px;}

  .breadcrumbs {top: 20px; left: 20px; border-radius: 5px; padding: 5px 10px;}
  .breadcrumbs a, .breadcrumbs span {font-size: 10px;}
  .breadcrumbs a::after {top: 40%; width: 18px; height: 8px;}

  .product-wrapper {width: auto; margin: 30px 15px; grid-template-columns: 1fr; max-width: none; grid-gap: 30px;}

  .enquire-pop {max-width: 95%; width: 100%;}
  .enquire-pop article .flex-row {padding: 20px;}
  .enquire-pop h2 {max-width: 80%; font-size: 25px;}
  .enquire-pop article {height: 100%; overflow: scroll;}
  .enquire-pop article .flex-row p {line-height: 1.5;}
  .enquire-pop .product-row {margin: 20px; grid-template-columns: 1fr;}
  .enquire-pop.active {height: 90vh;}

  .inside-content .inner-banner {margin: 0 15px 30px;}
  .inside-content .inner-banner article {max-width: 100vw; width: 100%;}
  .inside-content .inner-banner.loaded > h1 {top: 30%;}

  .filter-block ul li {margin-bottom: 15px;}

  footer .wrapper-lrg {padding: 150px 15px 15px; margin: 15px;}
  footer .wrapper-lrg .footer-inner {padding: 30px 25px 0;}
  footer .wrapper-lrg .footer-inner h3 {font-size: 25px;}
  footer .wrapper-lrg .footer-inner article {max-width: none!important; margin-top: 15px;margin-bottom: 0px!important;}
  footer .wrapper-lrg .footer-inner ul {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; width: 100%;}
  footer .wrapper-lrg .footer-inner ul li:nth-child(2n+2){text-align: right;}
  footer .wrapper-lrg .footer-inner ul li a {font-size: var(--p)}
  footer .wrapper-lrg .footer-inner .copyright {gap: 15px; margin-top: 20px;}
  footer .wrapper-lrg .footer-inner .logo {margin: 30px auto 0;}

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

  .home-banner article h1 {max-width: 85vw;}
  .home-banner article, .home-banner .button-row {left: 25px;}

  .inner-banner > h1 {font-size: 35px;}

  .product-wrapper .sticky {max-width: 100%;}

  .product-tile .button-row {flex-direction: column; justify-content: center; max-width: 200px; margin: 25px auto 0;}
  .product-tile .button-row .trademe-button-large, .product-tile .button-row .button.outline {width: 100%; text-align: center;}

  .bubble {padding: 15px 70px 15px 15px;grid-template-columns: 1fr 1fr;border-radius: var(--border-2);}
  .bubble p:nth-child(2) {grid-column: span 2;}

  footer .wrapper-lrg .footer-inner h3 {font-size: 20px;}


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

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

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

}