/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .viewport:after {
    content: "SM, 576px and above";
  }

  .detail .option-panel .qty .plusminus {
    width: auto;
  }

  .sidemenu .content-wrap {
    width: 50%;
  }

  .six-digits input[type="number"] {
    height: 60px;
    width: 100%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /*Added by Nauman*/
  .pop-promo .boxwrap {
    width: 50%;
  }

  .viewport:after {
    content: "MD, 768px and above";
  }

  .carousel .slick-slide img {
    height: 50vw;
  }

  .topmenu {
    padding-bottom: 30px;
  }

  .minicarousel .product {
    padding: 0 10px;
  }

  /*.topmenu .logo {
    width: 100%;
    }*/
  .topmenu nav {
    text-align: center;
    margin-top: 15px;
    width: 100%;
  }

  .topmenu li input[type="text"] {
    width: 300px;
    font-size: 0.8em;
    border-radius: 8px;
  }

  .content {
    padding: 44px 44px 0 44px;
  }

  .featured {
    justify-content: space-between;
  }

  .category-hero {
    margin-top: 20px;
  }

  .category-hero .thumb {
    width: 54%;
    margin-bottom: 0;
  }

  .category-hero .text {
    width: 46%;
  }

  .products .item,
  .products i {
    width: 32%;
    margin-right: 2%;
  }

  .products .item:nth-of-type(2n),
  .products i:nth-of-type(2n) {
    margin-right: 2%;
  }

  .products .item:nth-of-type(3n),
  .products i:nth-of-type(3n) {
    margin-right: 0;
  }

  .products.full .item {
    width: 24%;
    margin-right: 1.33%;
  }

  .products.full .item:nth-of-type(4n) {
    margin-right: 0;
  }

  .product-listing {
    display: block;
  }

  .product-listing .sub-categories.mobile-only {
    display: none !important;
  }

  .product-listing .filter {
    display: flex;
    width: 100%;
    border: 0;
    margin-bottom: 25px;
    padding: 0;
    border-radius: 10px;
    font-weight: 500;
    pointer-events: unset;
  }

  .product-listing .filter select {
    width: auto;
    border: 1px solid #ccc;
    margin-left: 10px;
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
    padding: 5px 30px 5px 10px;
    font-weight: 500;
  }

  .product-listing .filter .text {
    text-transform: none;
    margin-bottom: 0;
    font-size: 14px;
  }

  .product-listing .sub-categories {
    width: 25%;
  }

  .product-listing .products {
    width: 75%;
  }

  .product-listing .products.full {
    width: 100%;
  }

  .product-listing .two-columns {
    margin-top: 0;
  }

  .breadcrumb {
    display: block;
    margin-bottom: 30px;
  }

  .category-hero .text .title {
    margin-bottom: 15px;
  }

  .category-hero .text .sub {
    display: block;
  }

  .product-listing .sub-categories {
    display: block;
  }

  .category-hero .text .overlay {
    display: none;
  }

  .category-hero .text .title {
    color: #000;
  }

  .category-hero .text {
    position: unset;
    color: #666;
  }

  .category-hero {
    margin-left: 0;
    margin-right: 0;
  }

  .product-listing.no-categories .products .item,
  .product-listing.no-categories .products i {
    width: 23%;
  }

  .detail .thumb {
    width: 40%;
    margin-right: 10%;
    margin-bottom: 0;
  }

  .detail .option-panel {
    width: 50%;
  }

  .sizing-guide {
    width: auto;
  }

  .checkout .left-column {
    width: 50%;
  }

  .checkout .right-column {
    width: 40%;
  }

  .carousel {
    margin-bottom: 0;
  }

  .brands .alphabets {
    display: flex;
  }

  .topmenu .search {
    position: relative;
  }

  .breadcrumb-back {
    margin-bottom: 0;
  }

  .getapp {
    display: none;
  }

  .top.offset {
    top: 0;
  }

  .pop-promo .boxwrap {
    width: 50%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .viewport:after {
    content: "LG, 992px and above";
  }

  .topmenu .cart:hover .cart-preview {
    opacity: 1;
    display: block;
    /*top:40%;*/
    height: auto;
    visibility: visible;
    transition-delay: 0.2s;
  }

  .topmenu .cart:hover .cart-preview.hide-temp {
    opacity: 0;
    height: 0;
    visibility: hidden;
  }

  .topmenu .cart .cart-preview {
    left: -135px;
    width: 300px;
    position: absolute;
    top: 55px;
  }

  .cart-preview .continue-shopping {
    display: none;
  }

  .cart-preview .continue-shopping.blackbutton {
    display: block;
    font-weight: 600;
  }

  .topmenu .cart .cart-preview.added {
    top: 55px;
  }

  .topmenu .cart .cart-preview::before {
    left: calc(50% - 15px);
    display: block;
  }

  .carousel .slick-slide img {
    height: 45vw;
  }

  .mainmenu-wrap {
    display: block;
  }

  .shoutouts .ad {
    width: 50%;
    padding: 5px;
  }

  .mobile-only {
    display: none !important;
  }

  .mobile-flex {
    display: none !important;
  }

  .desktop-only {
    display: block;
  }

  .desktop-flex {
    display: flex;
  }

  .desktop-inline {
    display: inline-block;
  }

  .topmenu .logo-hamburger {
    width: 33%;
    text-align: left;
  }

  .topmenu .search-wrap {
    display: flex;
    width: 44%;
    margin-top: 0;
    position: relative;
  }

  .topmenu .search {
    padding: 5px 10px;
    width: 100%;
    display: flex;
    background-color: #fff;
    border: 1px solid rgba(129, 121, 121, 0.75);
  }

  .topmenu .icons {
    width: 22%;
    margin-left: 1%;
    justify-content: flex-end;
  }

  .topmenu .search-wrap .search a {
    display: block;
  }

  .info2,
  .info1.editor,
  .featured {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background-color: transparent;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .info1 {
    padding-top: 0;
  }

  .info1 .callaction {
    width: 35%;
    margin-right: 5%;
    margin-bottom: 0;
  }

  .info2 .example {
    width: 50%;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }

  .info2 .example img {
    display: block;
  }

  .info2 .example1 {
    width: 50%;
  }

  .info2 .example1 .callaction {
    width: 75%;
  }

  .info2 .description {
    /*margin-left: 110px;*/
    width: 40%;
  }

  .info2 .callaction {
    padding-left: 10px;
  }

  .info2 .callaction .text {
    margin-bottom: 15px;
  }

  .minicarousel.three {
    width: 60%;
  }

  .info2 .minicarousel {
    margin-top: 0;
  }

  .info2 .blackbutton {
    margin-top: 30px;
  }

  .double-highlights .promo {
    width: 48%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .double-highlights .promo:first-of-type {
    margin-bottom: 0;
  }

  .double-highlights .promo .callaction {
    margin-top: 15px;
  }

  .double-highlights .promo .text {
    padding-bottom: 30px;
  }

  .footer .left-column {
    width: 30%;
    text-align: left;
    padding-left: 120px;
  }

  .footer .right-column {
    width: 70%;
    display: block;
  }

  .copyright {
    /*margin-top: 40px;*/
    font-size: 12px;
  }

  .copyright .text span {
    display: unset;
  }

  .copyright .links {
    margin-top: 0px;
  }

  .footer .footer-2 a {
    display: block;
  }

  .footer .left-column .text {
    display: block;
  }

  .footer .footer-heading .logo {
    margin-bottom: 40px;
  }

  .double-highlights {
    justify-content: space-between;
  }

  .featured {
    margin-bottom: 30px;
  }

  .featured .brand {
    width: 32%;
    text-align: left;
    margin-bottom: 30px;
  }

  .banner {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 50px;
  }

  .hamburger {
    display: none;
  }

  .copyright .text {
    width: auto;
  }

  .footer-container {
    padding-left: 0;
    padding-right: 0;
  }

  .banner img {
    height: auto;
  }

  .brands section a {
    width: 33%;
  }

  .info1 .callaction,
  .info2 .callaction {
    text-align: left;
  }

  .shoutouts .ad {
    height: auto;
  }

  .search-tags {
    position: absolute;
    background-color: #fff;
    padding: 15px;
    z-index: 3;
    top: 30px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 21%);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
  }

  .search-tags.active {
    opacity: 1;
    visibility: visible;
    top: 35px;
  }

  .account:hover .account-preview {
    opacity: 1;
    display: block;
    /*top:40%;*/
    height: auto;
    visibility: visible;
    transition-delay: 0.2s;
  }

  .account .account-preview {
    left: -135px;
    width: 300px;
    position: absolute;
    top: 55px;
  }

  .account .account-preview::before {
    display: block;
    left: 50%;
  }

  .login {
    margin-left: auto;
    margin-right: auto;
  }

  .category-hero .thumb .overlay {
    display: none;
  }

  .product-listing .filter.full {
    width: auto;
    margin-top: 0;
  }

  .cookiejar {
    width: 1200px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .cookiejar.active {
    visibility: hidden;
  }

  .cookiejar .message {
    width: 300px;
    bottom: -200px;
    position: absolute;
    left: 40px;
    right: auto;
  }

  .cookiejar .overlay {
    display: none;
  }

  .pop-promo {
    position: fixed;
    width: 1200px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 0;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .pop-promo .thumb img {
    border-radius: 0;
  }

  .pop-promo.active {
    visibility: hidden;
  }

  .pop-promo.active .boxwrap {
    visibility: visible;
  }

  .pop-promo .thumb {
    width: 50%;
  }

  .pop-promo .details {
    width: 50%;
  }

  .pop-promo .overlay {
    display: none;
  }

  .pop-promo .boxwrap {
    width: 500px;
    position: absolute;
    right: 12%;
    left: unset;
    align-items: center;
    text-align: left;
  }

  .empty-cart {
    padding-top: 0;
  }

  .search-filter-wrap {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }

  .search-results {
    margin-bottom: 0;
    text-align: left;
  }

  .search-filter-wrap .filter {
    margin-bottom: 0;
  }

  .search-filter-wrap .search-results {
    margin-bottom: 0;
  }

  .search-advice {
    margin-top: -10px;
  }

  .search-advice span {
    margin-top: 25px;
  }

  .account-page .left-panel {
    width: 25%;
    border-bottom: 0;
    padding-bottom: 0;
    display: block;
  }

  .account-page .right-panel {
    width: 75%;
  }

  .block-listing .item .thumb {
    width: 25%;
    margin-right: 5%;
    margin-bottom: 0;
    margin-top: 0;
  }

  .block-listing .item .details {
    width: 50%;
    margin-bottom: 0;
    font-size: 14px;
  }

  .block-listing .item .blackbutton {
    width: 20%;
    align-self: center;
  }

  .order-detail .detail {
    width: 65%;
  }

  .order-detail .qr-code-wrap {
    width: 25%;
  }

  .detail-list .item .property {
    width: 200px;
  }

  .order-detail .qr-code {
    margin-top: 0;
  }

  .order-detail .thumb-info-wrap .thumb {
    width: 200px;
    margin-right: 30px;
    margin-bottom: 0;
  }

  .order-detail .thumb-info-wrap .info {
    width: 50%;
    font-size: unset;
  }

  .order-detail .order-listing .product-name {
    margin-bottom: 10px;
  }

  .order-detail .order-listing .detail-list .item {
    margin-bottom: 5px;
  }

  .order-detail .order-listing .detail-list .item .property {
    width: 180px;
    margin-bottom: unset;
  }

  .order-detail .order-listing .thumb-info-wrap .detail-list .item {
    justify-content: flex-start;
  }

  .account-page .no-order {
    text-align: left;
  }

  .account-page .no-order .related .title {
    text-align: left;
  }

  .topmenu .cart-preview .continue-shopping {
    display: none;
  }

  .empty-cart {
    text-align: left;
  }

  .block-listing > .item {
    align-items: center;
  }

  .block-listing .item .details .item span {
    display: inline-block;
    margin-bottom: 0;
  }

  .block-listing .item .blackbutton {
    display: block;
  }

  .block-listing .item .details .item span.status {
    margin-left: 0;
  }

  .order-detail .order-listing .price {
    margin-bottom: 10px;
  }

  .related .title.capitalize {
    text-align: unset;
  }

  .address-book .blackbutton {
    width: auto;
  }

  .add-address fieldset a {
    width: auto;
    text-align: left;
    margin-left: 10px;
    display: inline-block;
  }

  .address-list .entry {
    justify-content: flex-end;
  }

  .address-list .entry .info {
    width: auto;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
  }

  .account-page .no-order .appdownload {
    margin-left: 0;
  }

  .carousel .slick-arrow {
    opacity: 1;
  }

  .outofstock {
    width: 1200px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .outofstock.active {
    /*visibility:hidden;*/
  }

  .outofstock .message {
    width: 300px;
    position: absolute;
    left: 0;
    right: 0;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .viewport:after {
    content: "XL, 1200px and above";
  }

  .carousel .slick-slide img {
    height: 40vw;
  }

  .pop-promo .boxwrap {
    right: 40px;
  }
}

@media (max-width: 992px) {
  .shoutouts .ad.brown {
    padding: 3px !important;
  }
}

@media (max-width: 768px) {
  .topmenu {
    margin-top: 20px !important;
  }
}