/* Minification failed. Returning unminified contents.
(3659,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3660,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3661,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3662,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3663,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3664,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3665,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3666,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3667,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3668,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3679,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-white'
(3685,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-gray'
(3691,15): run-time error CSS1039: Token not allowed after unary operator: '-dark-neutral-black'
(3696,15): run-time error CSS1039: Token not allowed after unary operator: '-neutral-gray'
(3702,15): run-time error CSS1039: Token not allowed after unary operator: '-magtek-red'
(3705,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-gray'
(3710,20): run-time error CSS1039: Token not allowed after unary operator: '-light-neutral-blue'
(3712,15): run-time error CSS1039: Token not allowed after unary operator: '-dark-neutral-blue'
(3719,15): run-time error CSS1039: Token not allowed after unary operator: '-neutral-gray'
(3720,20): run-time error CSS1039: Token not allowed after unary operator: '-light-neutral-gray'
(3721,26): run-time error CSS1039: Token not allowed after unary operator: '-medium-neutral-gray'
(3730,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-gray'
(3731,15): run-time error CSS1039: Token not allowed after unary operator: '-magtek-red'
(3732,22): run-time error CSS1039: Token not allowed after unary operator: '-magtek-red'
(3753,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-white'
(3754,26): run-time error CSS1039: Token not allowed after unary operator: '-medium-neutral-gray'
(3769,22): run-time error CSS1039: Token not allowed after unary operator: '-magtek-red'
(3770,20): run-time error CSS1039: Token not allowed after unary operator: '-light-neutral-gray'
(3777,22): run-time error CSS1039: Token not allowed after unary operator: '-magtek-red'
(3784,15): run-time error CSS1039: Token not allowed after unary operator: '-dark-neutral-black'
(3794,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-gray'
(3807,15): run-time error CSS1039: Token not allowed after unary operator: '-neutral-gray'
(3811,15): run-time error CSS1039: Token not allowed after unary operator: '-neutral-gray'
(3816,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-gray'
(3822,30): run-time error CSS1039: Token not allowed after unary operator: '-medium-neutral-gray'
(3845,20): run-time error CSS1039: Token not allowed after unary operator: '-magtek-gray'
(3886,15): run-time error CSS1039: Token not allowed after unary operator: '-neutral-gray'
 */
@charset "UTF-8";
/* CSS Document */

/* lino type font face btn-commerce styles .sale-banner top-nav shadow cart-confirmation product-q   product-card  font-weight: 100; url 12.114130434782608vw -70vw; 9.179vw 6.039vw; max-width:previewCheckoutButtons 80px;  btn-commerce*/
/* Base styles for the section twitter .cleaning-cards-section .cleaning-cards-section-title-container

.cart-table tr .col-prod-qty input.product-q, .prod-PN::before.product-q
*/

/* .cart-table tr .col-prod-qty card-title sale-banner input.product-q.magtek-logo, 737.navbar-toggle .cart-list .top-nav.product-q width:     height: 15vw; .navbar-brand49% top-nav ul.shop-nav left: -77vw;li.cart-box .cart-list */

/* Style the column container .page-container    border-top: 1px solid #ccc;.sale-banner */
html {
  scroll-behavior: smooth;
}

.out-of-stock {
  background-color: rgb(148, 148, 148);
  color: white;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  margin-top: 20px;
  opacity: 0.5;
  cursor: not-allowed !important;
}

.featured-container .thumbnail img {
  height: 200px; /* Set a fixed height for all images */
  object-fit: contain; /* Ensure the aspect ratio is maintained */
}

.featured-container .thumbnail:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(
    15,
    44,
    68,
    0.043
  ); /* Adjust the overlay color and opacity */
  transition: all 0.3s ease; /* Add a smooth transition effect */
  border-radius: 30px;
}

/* Add a subtle zoom effect on hover */
.featured-container .thumbnail {
  transition: all 0.3s ease;
}

.alert-banner {
  background-color: #d21242; /* MagTek Red */
  color: #ffffff; /* White */
  border-color: #d21242; /* MagTek Red */
  text-align: center;
  padding: 15px;
  margin-top: 15px;
  border-radius: 15px;
}

.alert-banner strong {
  font-weight: bold;
}

.featured-container svg {
  display: none;
}

.magtek-logo {
  max-width: 251px;
  max-height: 70px;
  margin-top: 5px;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #d21242 !important;
}
.navbar-default .navbar-toggle {
  border-color: none !important;
  border: none !important;
}
.nav-text {
  color: #231f20 !important;
}
.nav-text:hover {
  color: #000000 !important;
}
.navbar {
  margin-bottom: unset;
}
.top-nav {
  all: unset !important;
}
.shop-nav {
  all: unset !important;
}
.navbar-collapse.in {
  overflow-y: unset;
}
@media (min-width: 1000px) {
  .magtek-logo {
    margin-left: 70px;
  }
  .carouselCaptionInner {
    margin-left: 60px;
  }
  .last-item-nav {
    margin-right: 60px;
  }
}
@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.sale-tag {
  /* animation: shake .5s ease-in-out infinite; */
  transform: rotate(-30deg) translateY(30px);
  z-index: 100;
}
.featured-container {
  margin-bottom: 30px;
}
.featured-container .thumbnail {
  border: none;
  margin: 20px;
  padding: 20px;
}
.subscribe-banner {
  background-color: #d21242;
  color: #fff;
  padding: 35px 0;
  text-align: center;
}

.subscribe-content {
  display: inline-block;
  text-align: left;
  color: #fff;
}

.subscribe-content p {
  color: white;
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

.sale-banner {
  background-color: #d21242; /* Red background color */
  color: #fff; /* White text color */
  font-size: 16px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 15px;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.slash {
  position: relative;
  color: black !important;
}
.new-price {
  transform: translate(20px, 0px);
}

.slash::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-bottom: 5px solid #ff0000; /* You can adjust the color as needed */
  transform: rotate(-11deg);
  transform-origin: center;
  border-radius: 2px; /* Add border-radius for rounded ends */
  box-shadow: 0 0 2px rgba(255, 0, 0, 0.5); /* Add shadow for depth */
}
/* Custom styles for the hero section */
.hero-section-container {
  z-index: 9;
  position: relative;
}

.hero-section .btn-commerce-red {
  margin-top: 10px;
}

.hero-section h1 {
  font-size: 2.6em;
  margin-bottom: 20px;
  z-index: 5;
}

.hero-section p {
  font-size: 1.5em;
  max-width: 600px; /* Set the maximum width for the paragraph */
  margin: 0 auto; /* Center the paragraph horizontally */
  z-index: 5;
}
.hero-section h1 span {
  font-weight: bold; /* Make the text within the span bold */
}

/* Custom styles for the hero section */

.hero-section-featured .btn-commerce-red {
  margin-top: 10px;
}

.hero-section-featured h1 {
  font-size: 2.6em;
  margin-bottom: 20px;
  z-index: 5;
}

.hero-section-featured p {
  font-size: 1.5em;
  max-width: 600px; /* Set the maximum width for the paragraph */
  margin: 0 auto; /* Center the paragraph horizontally */
  z-index: 5;
}
body {
  background-color: #ffffff;
}
.order-process {
  background-color: rgb(250, 250, 250);
  padding: 30px 0;
}
.order-process .card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.071);
  background-color: #ffffff;
  transition: all 0.3s;
  margin-bottom: 20px !important;
  height: 100%;
}
.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

.row-eq-height [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.order-process .card:hover {
  transform: scale(1.01);
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.083);
}

.order-process .card-title {
  color: #d21242;
  font-size: 1.6em;
}
.font-weight-bold {
  font-weight: bold;
}

.order-process .list-group-item {
  border: none;
  padding: 10px;
}

.order-process .list-group-item p {
  margin-bottom: 0;
  font-size: 1.3em;
  color: #666;
}

.order-process .contact-link {
  color: #d21242;
  text-decoration: none;
  font-weight: bold;
  font-size: inherit;
}

.order-process .contact-link:hover {
  text-decoration: underline;
}
.section-header {
  font-size: 2.6em;
  color: #333; /* Set your desired text color */
  margin-bottom: 10px;
}

.section-subheader {
  font-size: 1.3em;
  color: #666; /* Set your desired text color */
  margin-bottom: 30px;
}
.hero-section {
  position: relative;
  background-image: url("../Content/images/online-shop-hero.png");
  background-size: cover;
  color: #d21242;
  text-align: center;
  padding: 70px 0; /* Adjust the padding as needed */
}

.hero-section-featured {
  position: relative;
  background-image: url("../Content/images/online-shop-hero-featured.png");
  background-size: cover;
  color: #d21242;
  text-align: center;
  padding: 70px 0; /* Adjust the padding as needed */
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(
    255,
    255,
    255,
    0.453
  ); /* Adjust the background color and opacity as needed */
}
.hero-section-featured::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(
    255,
    255,
    255,
    0.453
  ); /* Adjust the background color and opacity as needed */
}
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
  margin: 8px;
  border: 1px solid #fefefe;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
  cursor: pointer;
}

.product-card:hover {
  border: 1px solid #e8e8e8;
  box-shadow: 0 4px 6px rgba(80, 80, 80, 0.1);
}

.product-card .product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-details {
  flex-grow: 1;
}

.product-name {
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  color: black;
  font-size: 24px;
  font-family: "LinotypeUniversW02-Medi_726166", "Helvetica Neue", Helvetica,
    Century Gothic, Gotham;
}
.product-description {
  font-size: 16px;
  color: black;
}

.magtek-home-button:hover {
  background: #d21242;
  color: white;
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.product-card:hover .magtek-home-button {
  background: #d21242;
  color: white;
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cleaning-cards-section .button-and-input {
  display: flex;
  align-items: center;
  justify-content: center; /* Horizontally center the content */
}
html,
body {
  overflow-x: hidden !important;
  width: 100vw !important;
}
/* Style the form container */
.cleaning-cards-section .add-to-cart-form {
  text-align: center; /* Center the content inside the form */
}
.top-nav
  ul.shop-nav
  li.cart-box
  .cart-list
  ul.cart-items
  li.cart-item
  img.item-preview {
  object-fit: contain;
}
/* Style the input and container */
.cleaning-cards-section .input-button-container {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center;
  justify-content: center;
}

/* Style for the title container */
.cleaning-cards-section .cleaning-cards-section-title-container {
  position: relative;
  display: inline-block;
  border: 1px solid rgb(167, 167, 167);
  border-radius: 10px;
  padding: 0 20px;
  background-color: white;
}

.cleaning-cards-section .cleaning-cards-section-title-container h2 {
  margin: 20px 0; /* Adjusted margin for better spacing */
  font-size: 1.5em; /* Adjust the font size to make it smaller */
  color: #333; /* Text color */
}

.cleaning-cards-section .cleaning-cards-section-row {
  display: flex;
  align-items: center;
}
.cleaning-cards-section .btn-commerce {
  margin-top: 10px;
}
/* Style for the input with class "product-q" */
.cart-table tr .col-prod-qty input.product-q,
.product-q {
  padding: 10px !important; /* Adjust padding for better spacing */
  border: 1px solid #ccc !important; /* Add a border */
  border-radius: 5px !important; /* Rounded corners */
  font-size: 20px !important; /* Set the font size */
  width: 60px !important; /* Set the width */
  color: #333 !important; /* Text color */
  transition: 0.3s;
  text-align: center !important;
}

/* Adjust the appearance of the input when it's in focus */
.cart-table tr .col-prod-qty input.product-q:focus,
.product-q:focus {
  outline: none; /* Remove the default focus outline */
  border-color: #d11242; /* Change border color on focus */
  box-shadow: 0 0 1px #d2d2d2; /* Add a subtle box shadow on focus */
  color: #000000 !important;
}

.cart-table tr .col-prod-qty input.product-q:hover,
.product-q:hover {
  color: #222222 !important;
  border-color: #d11242 !important; /* Change border color on focus */
  box-shadow: 0 0 1px #d2d2d2; /* Add a subtle box shadow on focus */
}

.cart-table tr .col-prod-qty input.quantity-disabled:hover,
.quantity-disabled:hover {
  color: unset !important;
  border: 1px solid #ccc !important; /* Add a border */
  box-shadow: unset !important; /* Add a subtle box shadow on focus */
}

/* Media queries for responsiveness */

/* Mobile styles */
@media screen and (max-width: 576px) {
  .cleaning-cards-section .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .cleaning-cards-section .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cleaning-cards-section .col-md-3.button-and-input {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cleaning-cards-section .add-to-cart-form {
    text-align: center;
  }
}

/* Tablet styles */
@media screen and (max-width: 768px) {
  .cleaning-cards-section .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .cleaning-cards-section .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cleaning-cards-section .col-md-3.button-and-input {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cleaning-cards-section .add-to-cart-form {
    text-align: center;
  }
}
.navbar-default {
  background-color: white !important;
  border-color: #ffffff !important;
  border-bottom: 0.5px solid rgb(231, 231, 231) !important;
}
/* Default styles for larger screens */
@media screen and (min-width: 769px) {
  /* You can leave the default styles here or make further adjustments */
}

@media screen and (max-width: 768px) {
  .top-nav {
    flex-direction: column; /* Stack items vertically on smaller screens */
  }

  .navbtns {
    flex-direction: column; /* Stack navigation buttons vertically on smaller screens */
    align-items: center;
  }

  .nav-btn {
    padding: 5px 10px; /* Adjust padding for better spacing on smaller screens */
  }

  .top-nav-link {
    margin: 5px 0; /* Adjust margins for better spacing on smaller screens */
  }

  .cart-list {
    display: none; /* Hide the cart list on smaller screens */
  }
}
/* Mobile-specific styles for screens under 500 pixels */
@media screen and (max-width: 500px) {
  .navbar-default .navbar-nav li a {
    text-align: center;
  }
  .action-btns a:first-of-type {
    margin-right: unset !important;
  }
  .cart-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-nav {
    flex-direction: column; /* Stack items vertically on smaller screens */
    padding: 10px; /* Add some padding for better spacing */
  }
  .top-nav ul.shop-nav li.cart-box .cart-btn {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .navbtns {
    flex-direction: column; /* Stack navigation buttons vertically on smaller screens */
    align-items: center;
  }

  .nav-btn {
    padding: 10px; /* Increase padding for touch-friendly buttons */
    margin: 5px 0; /* Adjust margins for better spacing on smaller screens */
  }

  .top-nav-link {
    margin: 5px 0; /* Adjust margins for better spacing on smaller screens */
  }

  .shop-title {
    font-size: 18px; /* Adjust the font size for the title */
    margin: 10px 0; /* Add spacing below the title */
  }

  .cart-box {
    margin-top: 10px; /* Add some spacing above the cart icon */
  }

  .cart-btn {
    padding: 10px;
  }

  .item-count {
    font-size: 14px; /* Adjust font size for the item count in the cart */
  }

  .cart-list {
    display: none; /* Hide the cart list on smaller screens */
  }

  #previewCheckoutButtons {
    text-align: center; /* Center the checkout buttons on mobile */
    display: flex;
  }

  .btn-commerce {
    display: block; /* Display the buttons as blocks for better spacing */
    margin: 10px 0; /* Add margin between buttons */
    padding: 10px 20px; /* Adjust button padding */
  }
}
/* Media query for screens under 600 pixels */
@media screen and (max-width: 769px) {
  .navbar-default .navbar-toggle {
    margin-top: 15px;
    margin-right: 25px;
  }
}
@media screen and (max-width: 600px) {
  .mobile-menu {
    display: block !important; /* Show the mobile menu */
  }
}
/* Show the mobile menu when the class "show-mobile-nav" is applied */
.mobile-nav.show-mobile-nav {
  display: block;
  position: absolute;
  top: 60px; /* Adjust the top position based on your design */
  right: 0;
  background-color: #fff;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid #d4d4d4;
}

.mobile-nav.show-mobile-nav li {
  margin: 10px 0;
}

/* Add transitions for smoother animation */
.mobile-nav {
  transition: transform 0.3s;
  transform: translateY(-100%);
}

.mobile-nav.show-mobile-nav {
  transform: translateY(0);
}

/* Mobile menu styles */
.mobile-menu {
  display: none;
}

.hamburger-menu {
  cursor: pointer;
  padding: 10px;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #000;
  margin: 6px 0;
}

.top-nav {
  display: flex;
  align-items: center; /* Center vertically within .top-nav */
  justify-content: center; /* Center horizontally within .top-nav */
  height: 100%; /* Ensure .top-nav has a height for centering to work */
  border-bottom: 0.5px solid #d4d4d4;
}

.navbtns {
  display: flex;
  align-items: center; /* Center vertically within .navbtns */
  justify-content: flex-end;
}
.nav-btn {
  padding: 0px 20px;
  border-radius: 10px;
}
.top-nav-link {
  margin: 10px 0; /* Add spacing both on top and bottom of the buttons */
}
.top-nav ul {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  justify-content: space-between;
}
.cart-list ul {
  display: unset !important;
}
@media screen and (max-width: 992px) {
  .cleaning-cards-section-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cleaning-cards-section .img-responsive {
    max-width: 50%;
  }
}

@font-face {
  font-family: "LinotypeUniversW02-Thin_726097";
  src: url("../fonts/726097/eeb9e0c3-a2c7-4efd-8178-ae741e6ef8c6.eot?#iefix");
  src: url("../fonts/726097/eeb9e0c3-a2c7-4efd-8178-ae741e6ef8c6.eot?#iefix")
      format("eot"),
    url("../fonts/726097/03334b95-b1c9-404d-9fc3-11d9dbe424c4.woff2")
      format("woff2"),
    url("../fonts/726097/4bf0434d-b039-4d43-a244-82064817bc6f.woff")
      format("woff"),
    url("../fonts/726097/56030916-76ef-45b9-bc4a-4428a7da4ead.ttf")
      format("truetype"),
    url("../fonts/726097/cb0f5b92-49ed-44f8-a654-54a4f968ac53.svg#cb0f5b92-49ed-44f8-a654-54a4f968ac53")
      format("svg");
}

@font-face {
  font-family: "LinotypeUniversW02-Thin_726100";
  src: url("../fonts/726100/b6769e22-7009-4809-945b-524119030973.eot?#iefix");
  src: url("../fonts/726100/b6769e22-7009-4809-945b-524119030973.eot?#iefix")
      format("eot"),
    url("../fonts/726100/520186ae-1014-431e-a941-0b75026c2bde.woff2")
      format("woff2"),
    url("../fonts/726100/559f2d90-a9c0-4feb-afba-fdb34ca27bf4.woff")
      format("woff"),
    url("../fonts/726100/2e633b10-aa7c-486c-b4a0-badbb7d7a7d3.ttf")
      format("truetype"),
    url("../fonts/726100/ee97c9a2-a889-41cc-8185-f273d937d67a.svg#ee97c9a2-a889-41cc-8185-f273d937d67a")
      format("svg");
}

@font-face {
  font-family: "LinotypeUniversW02-Medi_726166";
  src: url("../fonts/726166/7183d5a8-44ab-4de4-bb63-2aabb2cd9984.eot?#iefix");
  src: url("../fonts/726166/7183d5a8-44ab-4de4-bb63-2aabb2cd9984.eot?#iefix")
      format("eot"),
    url("../fonts/726166/6d30a2e4-3f71-4d44-976a-69e81aa12b92.woff2")
      format("woff2"),
    url("../fonts/726166/6e308d7a-13f1-4edf-ad47-d1fff389315a.woff")
      format("woff"),
    url("../fonts/726166/c36e33c5-466c-4d0c-b387-3082121b9333.ttf")
      format("truetype"),
    url("../fonts/726166/10395798-2e85-499a-921d-f0028c6afe84.svg#10395798-2e85-499a-921d-f0028c6afe84")
      format("svg");
}

/*
	This CSS resource incorporates links to font software which is the valuable copyrighted
	property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
	redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
	Imaging with any questions regarding Web Fonts:  http://webfonts.fonts.com
	*/

/* Apply the global style to all elements */
* {
  padding: 0;
  margin: 0;
}

/* Apply font-family only to elements without the .glyphicon class */
*:not(.glyphicon) {
  font-family: "Helvetica", "Helvetica Neue", Helvetica, "Century Gothic",
    Gotham !important;
}

h1 {
  font-size: 60px;
}

ul li {
  list-style-type: none;
}

a {
  color: #48b2e2;
  text-decoration: none;
  font-size: 21px;
}

a:focus,
a:hover {
  text-decoration: none;
}

p {
  color: black;
  font-size: 22px;
  margin: 0px;
  padding: 0px;
}

p.part-number {
  font-size: 21px !important;
  font-weight: 500;
  margin-top: 10px;
}
p.part-number:before {
  content: "Part Number: ";
}

p.product-description {
  font-size: 18px;
  line-height: 30px;
}

p.product-description strong,
.product-info p strong {
  font-family: "LinotypeUniversW02-Medi_726166", bold !important;
  display: block;
  color: black;
}

.product-info {
  margin: 15px;
}

.product-info p {
  font-size: 16px;
  line-height: 28px;
}

@media (max-width: 480px) {
  .product-info p {
    font-size: 14px;
    line-height: 23px;
  }
}

ul.prod-desc-points {
  margin: 20px auto;
  width: 75%;
}

ul.prod-desc-points li {
  list-style-type: disc;
  font-size: 16px;
  line-height: 21px;
  text-align: left;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  ul.prod-desc-points {
    width: 60vw;
    margin: 20px auto;
  }

  ul.prod-desc-points li {
    font-size: 14px;
    line-height: 18px;
  }
}

p.product-description-2 {
  height: auto;
  margin-bottom: 10px;
}

.col-1 {
  width: 100%;
  padding: 0px 20px;
  margin: 0px auto;
  max-width: 640px;
}

.top-header.col-1 {
  max-width: 80%;
}

@media (max-width: 480px) {
  .top-header.col-1 {
    max-width: 90%;
  }
}

.col-2 {
  width: 50%;
  float: left;
  padding: 0px 20px;
}

.col-3 {
  width: 33.33%;
  float: left;
  padding: 0px 20px;
}

.col-4 {
  width: 25%;
  float: left;
  padding: 0px 20px;
}

/* .magtek-home-button */

.btn.btn-commerce {
  border-radius: 15px;
  color: #d21242;
  font-size: 20px;
  background: #fff;
  padding: 10px 20px;
  border: 2px solid #d21242;
  text-decoration: none;
  transition: 0.3s;
}

.btn.btn-commerce-red {
  border-radius: 15px;
  color: #ffffff;
  font-size: 20px;
  background: #d21242;
  padding: 10px 20px;
  border: 2px solid #d21242;
  text-decoration: none;
  transition: 0.3s;
}
.btn.btn-commerce-red:hover {
  background: #ffffff;
  color: #d21242;
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn.btn-commerce:hover {
  background: #d21242;
  color: white;
  text-decoration: none;
  border: 2px solid white;
  transform: scale(1.02);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.product-link:hover .btn.btn-commerce {
  background-color: white;
  border-color: #d11242;
  color: #d11242;
}

.product-link:hover .product-image {
  border: 1px solid #ccc;
}
.sub-section-container {
  background-color: #f0f2f3;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 30px;
}

.sub-section-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.see-more-link {
  color: #d21242;
  text-decoration: none;
  font-weight: bold;
  font-size: 2.3rem;
  position: relative;
  animation: all 0.3s;
}

.see-more-link:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background-color: #d21242;
  animation: underline 0.3s forwards;
}
.see-more-link:hover {
  color: #d21242;
}

@keyframes underline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.see-more-text {
  text-align: center;
  margin: 20px;
}

.see-more-text svg {
  margin-left: 5px;
  transform: translate(0px, 4px);
}
.container.shop-nav {
  position: relative;
}

#ProgressSpinner {
  color: #d11242;
  text-align: right;
  display: none;
}

.page-container {
  max-width: 1400px;
  width: 100%;
  padding: 0px 20px 0px;
  margin: 0px auto 100px;
  position: relative;
}

.product-notes {
  background-image: url(../content/images/icon-tag.svg);
  background-repeat: no-repeat;
  background-position: 77px 50px;
  background-size: 50px 50px;
  width: 100%;
  margin: 5px auto 50px;
  padding: 30px 30px 30px 175px;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.1);
}

.product-notes li {
  list-style-type: disc;
  margin: 5px 0px;
  font-size: 16px;
}

/* BEGIN responsive views for universal elements */
/*BEGIN desktop to tablet*/
@media (max-width: 1280px) {
  a {
    font-size: 1.64vw;
  }

  .h1,
  .h2,
  .h3,
  h1,
  h2,
  h3 {
    margin-top: 1.5625vw;
    margin-bottom: 0.78vw;
  }

  h1 {
    font-size: 4.6875vw;
  }

  p {
    font-size: 1.71875vw;
  }

  p.product-description {
    font-size: 1.41vw;
    line-height: 2.343vw;
  }

  p.part-number {
    font-size: 16px !important;
  }

  .page-container {
    padding: 0vw 2.5vw 0px;
    margin: 0px auto 0.78vw;
  }

  .main-body .top-header p {
    font-size: 2.1875vw;
  }

  .main-body .main-content {
    margin: 5.85vw auto;
  }

  .col-1,
  .col-2,
  .col-3,
  .col-4 {
    padding: 0px 1.5625vw;
  }
}
/*END desktop to tablet*/

/*BEGIN smartphone portrait and landscaipe*/
@media (max-width: 736px) {
  a {
    font-size: 2.64vw;
  }

  h1 {
    font-size: 6vw;
  }

  p {
    font-size: 2vw;
    line-height: 3vw;
  }
}

/*smartphone portrait*/

@media (max-width: 480px) {
  .page-container {
    padding: 0vw 2vw 0px;
    margin: 0px auto 0.78vw;
  }

  a {
    font-size: 5vw;
  }

  h1 {
    font-size: 10vw;
  }

  p {
    font-size: 5vw;
  }

  p.product-description {
    height: auto;
    font-size: 3.75vw;
    line-height: 6.25vw;
  }

  .col-1,
  .col-2,
  .col-3,
  .col-4 {
    width: 100%;
  }

  .product-notes {
    background-position: 24px 50px;
    padding-left: 115px;
  }

  .product-notes li {
    list-style-type: disc;
    margin: 5px 0px;
  }
}
/* END responsive views for universal elements */

/* top nav styles */

.top-nav {
  height: 57px;
  width: 100%;
}

.top-nav a,
.top-nav a:hover {
  color: black;
}

.top-nav .home-magtek {
  width: 70px;
  height: 57px;
  border-right: 1px solid #95989a;
  border-left: 1px solid #95989a;
}

.top-nav .home-magtek .home-link {
  background-image: url("../content/images/home-icon.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 42px;
  height: 42px;
  margin: 10px auto;
}

.top-nav ul.shop-nav li {
  float: left;
}

.top-nav ul.shop-nav li.shop-home {
  padding: 10px 0px;
  /* position: absolute; */
  /* left: 37%; */
}

.top-nav ul.shop-nav li.shop-home .logo-and-header {
  height: 35px;
  width: 365px;
}

.top-nav ul.shop-nav li.shop-home img.magtek-logo {
  float: left;
  width: 200px;
  height: 35px;
  margin-right: 10px;
}

.top-nav ul.shop-nav li.shop-home header.shop-title {
  float: left;
  font-size: 28px;
}

.top-nav ul.shop-nav li.login-box {
  font-size: 18px;
  padding: 18px 0px 0px;
  height: 57px;
  float: right;
}

.top-nav ul.shop-nav li.login-box a {
  margin: 0px 10px;
}

.top-nav ul.shop-nav li.cart-box {
  float: right;
  height: 57px;
  position: relative;
  cursor: pointer;
  z-index: 2;
}

.top-nav ul.shop-nav li.cart-box .cart-btn {
  width: 45px;
  height: 57px;
  background-image: url("../content/images/icon-cart.png");
  background-size: 38px 25px;
  background-repeat: no-repeat;
  background-position: 1px 16px;
}

.top-nav ul.shop-nav li.cart-box .cart-btn .item-count {
  color: #d11242;
  font-family: "LinotypeUniversW02-Medi_726166" !important;
  font-size: 14px;
  line-height: 45px;
  text-align: center;
}

/*.top-nav ul.shop-nav li.cart-box:focus {
    /* clicking on label should toggle the menu 
    pointer-events: none;
    outline:0;
    background-color:white;
    box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,.2)
}

.top-nav ul.shop-nav li.cart-box:focus .cart-list {
    /*  opacity is 1 in opened state (see below) /
    opacity: 1;
    visibility: visible;

    /* don't let pointer-events affect descendant elements /
    pointer-events: auto;
    
    max-height:410px;
    overflow:hidden;
    
}*/

.top-nav ul.shop-nav li.cart-box .cart-list {
  position: absolute;
  border-bottom: 1px solid whitesmoke;
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  background-color: white;
  width: 300px;
  left: -255px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.43);
  padding: 20px;
  z-index: 1;
  display: none;
  /* use opacity to fake immediate toggle */
  /*opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;*/
}

.top-nav ul.shop-nav li.cart-box .cart-list.open-cart {
  display: block;
}

.top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items {
  border-bottom: 1px solid whitesmoke;
  margin-bottom: 20px;
  min-height: 101%;
  max-height: 300px;
  overflow-y: scroll;
}

.top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items li.cart-item {
  float: none;
  margin-bottom: 20px;
  height: 50px;
  overflow: hidden;
}

.top-nav
  ul.shop-nav
  li.cart-box
  .cart-list
  ul.cart-items
  li.cart-item
  img.item-preview {
  width: 50px;
  float: left;
  vertical-align: middle;
}

.top-nav
  ul.shop-nav
  li.cart-box
  .cart-list
  ul.cart-items
  li.cart-item
  .item-name {
  float: left;
  width: 150px;
  margin: 0px 10px;
  font-size: 16px;
}

.top-nav
  ul.shop-nav
  li.cart-box
  .cart-list
  ul.cart-items
  li.cart-item
  .item-quantity {
  text-align: right;
  line-height: 50px;
}

.top-nav ul.shop-nav li.cart-box .cart-list .btn.btn-commerce {
  font-size: 16px;
}

/* BEGIN responsive views for top nav*/
/*desktop to tablet*/
@media (min-width: 737px) and (max-width: 1280px) {
  .btn.btn-commerce {
    height: 4.45vw;
    font-size: 1.4vw;
    padding: 0px 1.95vw;
    line-height: 4.47vw;
  }

  .top-nav {
    height: 4.45vw;
  }

  .top-nav ul.shop-nav li.shop-home {
    padding: 0.78vw 0px;
  }

  /* .top-nav ul.shop-nav li.shop-home img.magtek-logo {
                width: 15.63vw;
                height: 2.73vw;
                margin-right: .78vw;
            }

            .top-nav ul.shop-nav li.shop-home header.shop-title {
                font-size: 2.1875vw;
            } */

  .top-nav .home-magtek {
    width: 5.4vw;
    height: 4.45vw;
  }

  .top-nav .home-magtek .home-link {
    width: 3.281vw;
    height: 3.281vw;
    margin: 0.78vw auto;
  }

  .top-nav ul.shop-nav li.login-box {
    font-size: 1.4vw;
    padding: 1.4vw 0px 0px;
    height: 4.45vw;
  }

  .top-nav ul.shop-nav li.login-box a {
    margin: 0px 0.78vw;
    font-size: 1.64vw;
  }

  .top-nav ul.shop-nav li.cart-box {
    height: 4.45vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-btn {
    width: 3.5vw;
    height: 4.45vw;
    background-size: 2.9vw 1.9vw;
    background-position: 0.07vw 1.25vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-btn .item-count {
    font-size: 1.09vw;
    line-height: 3.5vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list {
    width: 23.437vw;
    left: -19.53vw;
    padding: 1.56vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items {
    margin-bottom: 1.56vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items li.cart-item {
    margin-bottom: 1.56vw;
    height: 3.9vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    img.item-preview {
    width: 3.9vw;
    height: 3.9vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    .item-name {
    width: 11.71vw;
    margin: 0px 0.78vw;
    font-size: 1.25vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    .item-quantity {
    line-height: 3.9vw;
    font-size: 1.64vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list .btn.btn-commerce {
    padding: 0px;
    width: 48%;
  }
}
/* END desktop to tablet */

/*BEGIN smartphone portrait and landscape views*/
@media (max-width: 736px) {
  .magtek-logo {
    margin-left: 20px;
  }
  .container {
    padding-left: 0px;
    padding-right: 0px;
  }

  .top-nav {
    height: 7.745vw;
  }

  .top-nav .home-magtek {
    border-left: 0px;
    width: 9.510869565217392vw;
    height: 7.744565217391304vw;
  }

  .top-nav .home-magtek .home-link {
    width: 5.706521739130435vw;
    height: 5.706521739130435vw;
    margin: 1.358695652173913vw auto;
  }

  .top-nav ul.shop-nav li.shop-home {
    padding: 1.358695652173913vw 0px;
    left: 25%;
  }

  .top-nav ul.shop-nav li.shop-home .logo-and-header {
    height: 4.755434782608696vw;
    width: 49.59239130434783vw;
  }

  .top-nav ul.shop-nav li.shop-home img.magtek-logo {
    width: 27.173913043478258vw;
    height: 4.755434782608696vw;
    margin-right: 1.358695652173913vw;
  }

  .top-nav ul.shop-nav li.shop-home header.shop-title {
    font-size: 3.804347826086957vw;
  }

  .top-nav ul.shop-nav li.cart-box {
    height: 7.744565217391304vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-btn {
    width: 6.114130434782608vw;
    height: 7.744565217391304vw;
    background-size: 5.163043478260869vw 3.3967391304347823vw;
    background-position: 0.1358695652173913vw 2.1739130434782608vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-btn .item-count {
    font-size: 1.9021739130434785vw;
    line-height: 6.114130434782608vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list {
    width: 40.761vw;
    left: -34.647vw;
    padding: 2.717vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items {
    margin-bottom: 2.717vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items li.cart-item {
    margin-bottom: 2.717vw;
    height: 6.793vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    img.item-preview {
    width: 6.793vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    .item-name {
    width: 20.38vw;
    margin: 0px 1.359vw;
    font-size: 2.174vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    .item-quantity {
    line-height: 6.793vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list .btn.btn-commerce {
    width: 48%;
    height: 7.745vw;
    padding: 0px 1.397vw;
    line-height: 7.745vw;
    font-size: 2.446vw;
  }

  .top-nav ul.shop-nav li.login-box {
    font-size: 2.446vw;
    padding: 2.446vw 3vw 0px;
    height: 7.745vw;
  }

  .top-nav ul.shop-nav li.login-box a {
    margin: 0px 0.2vw;
  }
}
/*END smartphone portrait and landscape views*/

/*BEGIN smartphone portrait only views */
@media (max-width: 480px) {
  .top-nav {
    height: 15vw;
  }

  .top-nav .home-magtek {
    border-left: 0px;
    width: 15vw;
    height: 15vw;
  }

  .top-nav .home-magtek .home-link {
    width: 10vw;
    height: 10vw;
    margin: 2.358695652173913vw auto;
  }

  .top-nav ul.shop-nav li.shop-home {
    padding: 2.358695652173913vw 0px;
    left: 17%;
  }

  .top-nav ul.shop-nav li.shop-home img.magtek-logo {
    float: none;
    display: block;
    width: 34.167vw;
    height: 5.833vw;
    margin-right: 0px;
  }

  .top-nav ul.shop-nav li.shop-home header.shop-title {
    font-size: 4vw;
    margin-left: 1vw;
  }

  .top-nav ul.shop-nav li.login-box a {
    display: block;
    text-align: right;
    font-size: 3.5vw;
  }

  .top-nav ul.shop-nav li.cart-box {
    height: 15vw;
    width: 15vw;
    padding-right: 105vw;
    margin-top: -10px;
  }

  .top-nav ul.shop-nav li.cart-box .cart-btn {
    width: 15vw;
    height: 15vw;
    background-size: 9.179vw 6.039vw;
    background-position: 2.3vw 5.333vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-btn .item-count {
    font-size: 3.5vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list {
    width: 85vw;
    left: 10vw;
    padding: 2.717vw;
    top: 16vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    img.item-preview {
    width: 15vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    .item-name {
    width: 50vw;
    margin: 0px 1.359vw;
    font-size: 4vw;
  }

  .top-nav
    ul.shop-nav
    li.cart-box
    .cart-list
    ul.cart-items
    li.cart-item
    .item-quantity {
    font-size: 4vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list ul.cart-items li.cart-item {
    margin-bottom: 1.717vw;
    height: 13vw;
  }

  .top-nav ul.shop-nav li.cart-box .cart-list .btn.btn-commerce {
    height: 11.875vw;
    padding: 0px;
    line-height: 11.875vw;
    font-size: 4vw;
  }
}

/* END responsive views for top nav*/

.main-body .top-header {
  text-align: center;
}

.main-body .top-header p {
  font-size: 28px;
  margin: 0px;
}

.main-body .top-header p.overview {
  font-size: 18px;
  margin-top: 20px;
}

.main-body .main-content {
  margin: 75px auto;
  max-width: 1280px;
  width: 100%;
}

.main-body.product-page {
  position: relative;
}

.product-box {
  text-align: center;
  /*padding-bottom:80px;*/
}

.product-box .product-image {
  width: 75%;
  margin: 0px auto;
  background-color: whitesmoke;
  border: 1px solid white;
}

.product-box .product-details {
  border-right: 1px solid #95989a;
  padding: 30px 20px 50px;
  margin-top: 20px;
}

.product-row {
  border-bottom: 1px solid #95989a;
  margin-bottom: 50px;
}

.product-row:last-of-type {
  border-bottom: 0px;
}

.product-row .product-box:last-of-type .product-details {
  border-right: 0px;
}

.product-box.col-3,
.product-box.col-4 {
  padding: 0px;
}

.product-box .product-details h2.product-name {
  font-size: 36px;
  color: black;
}

.product-box .product-details h3.product-subhead {
  font-size: 21px;
  line-height: 28px;
}

.product-box .add-to-cart-form {
  margin: 50px auto 0px;
  width: 75%;
  max-width: 289px;
}

.product-box.col-4 .add-to-cart-form {
  width: 95%;
}

.product-box .add-to-cart-form input.product-q {
  height: 55px;
  float: left;
  padding: 5px;
  width: 80px;
  text-align: center;
  font-size: 21px;
}

.product-box .add-to-cart-form input.product-q.smallDigits {
  font-size: 14px;
}

.product-box .add-to-cart-form .product-p {
  float: right;
  color: #d11242;
  font-size: 40px;
}

.product-box.col-4 .add-to-cart-form .product-p {
  font-size: 30px;
  line-height: 50px;
}

@media (max-width: 1024px) and (min-width: 737px) {
  .product-box.col-4 .add-to-cart-form .product-p {
    font-size: 2.5vw;
    line-height: 4.1vw;
  }
}

.product-box .add-to-cart-form .btn.btn-add-to-cart {
  margin-top: 30px;
}

.cart-confirmation {
  width: 100vw;
  height: 80px;
  background-color: #d11242;
  overflow: hidden;
  padding-top: 10px;
  position: absolute;
  z-index: 100;
  display: none;
}

.magtek-home-button:hover {
  background: #d21242;
  color: white;
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cart-confirmation .confirmation-message {
  width: 720px;
  margin: 0px auto;
}

.cart-confirmation p {
  float: left;
  color: white;
  line-height: 60px;
}

.cart-confirmation .btn.btn-commerce {
  border: 1px solid white;
  margin: 0px 40px;
  float: left;
  cursor: pointer;
}

/* BEGIN product page template responsive styles */
/*desktop to table*/
@media (max-width: 1280px) {
  .product-box .product-details {
    padding: 2.34vw 1.5625vw 3.9vw;
    margin-top: 1.5625vw;
  }

  .product-box .product-details h2.product-name {
    font-size: 2.891vw;
  }

  .product-box .product-details h3.product-subhead {
    font-size: 1.64vw;
    line-height: 2.1vw;
  }

  .cart-confirmation {
    height: 6.25vw;
    padding-top: 0.78vw;
  }

  .cart-confirmation .confirmation-message {
    width: 56.25vw;
  }

  .cart-confirmation p {
    line-height: 4.68vw;
    font-size: 2.1875vw;
  }

  .cart-confirmation .btn.btn-commerce {
    margin: 0px 3.125vw;
  }

  .product-box .add-to-cart-form {
    margin: 3.9vw auto 0px;
  }

  .product-box .add-to-cart-form input.product-q {
    height: 4.2vw;
    padding: 0.39vw;
    width: 6.25vw;
    font-size: 1.64vw;
  }

  .product-box .add-to-cart-form .product-p {
    font-size: 3.125vw;
  }

  .product-box .add-to-cart-form .btn.btn-add-to-cart {
    margin-top: 2.34vw;
  }
}

/*smartphone portrait and landscape*/
@media (max-width: 736px) {
  .main-body .main-content {
    margin: 2.19vw auto;
  }

  .cart-confirmation {
    height: 9.25vw;
  }

  .cart-confirmation .confirmation-message {
    width: 78.25vw;
  }

  .cart-confirmation p {
    line-height: 8.68vw;
    font-size: 2.466vw;
  }

  .btn.btn-commerce {
    height: 7.745vw;
    font-size: 2.446vw;
    padding: 0px 3.397vw;
    line-height: 7.745vw;
  }

  .main-body .top-header p {
    font-size: 3.804vw;
    line-height: 6vw;
  }

  .main-body .top-header p.overview {
    font-size: 2.45vw;
    line-height: 4vw;
  }

  .product-box.col-4 {
    width: 100%;
  }

  .product-box.col-4 .product-details {
    border-right: 0px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
  }
}

/*smartphone portrait*/

@media (max-width: 480px) {
  .main-body .main-content {
    margin: 2.19vw auto;
  }

  .cart-confirmation {
    height: 9.25vw;
  }

  .cart-confirmation .confirmation-message {
    width: 78.25vw;
  }

  .cart-confirmation p {
    line-height: 8.68vw;
    font-size: 2.466vw;
  }

  .btn.btn-commerce {
    height: 11.875vw;
    padding: 0px 4vw;
    line-height: 11.875vw;
    font-size: 4vw;
    margin-top: 7vw;
  }

  .main-body .top-header p {
    font-size: 5vw;
    width: 80%;
    margin: 2vw auto;
    line-height: 7vw;
  }

  .main-body .top-header p.overview {
    font-size: 3.75vw;
    line-height: 6vw;
  }

  p {
    line-height: 10vw;
  }

  .cart-confirmation {
    height: 20vw;
    padding-top: 4vw;
  }

  .cart-confirmation .confirmation-message {
    width: 100%;
  }

  .cart-confirmation .btn.btn-commerce {
    height: 11.875vw;
    padding: 0px 3vw;
    line-height: 11.875vw;
    font-size: 3.5vw;
  }

  .cart-confirmation p {
    line-height: 11.875vw;
    font-size: 4vw;
  }

  .product-box {
    border-bottom: 1px solid #ccc;
  }

  .product-box.col-4 {
    border-bottom: 0px;
  }

  .product-box.col-4 .add-to-cart-form {
    width: 90%;
    max-width: 220px;
  }

  .product-row:last-of-type .product-box:last-of-type {
    border-bottom: none;
  }

  .product-box.col-3 {
    width: 80%;
    margin: 0px auto;
    float: none;
    padding: 15vw 0px;
  }

  .product-row {
    border-bottom: 0px;
  }

  .product-box .product-details {
    border-right: 0px;
    padding-bottom: 10vw;
  }

  .product-box .product-details h2.product-name {
    font-size: 9vw;
    margin-bottom: 2vw;
  }

  .product-box .product-details h3.product-subhead {
    font-size: 4.3vw;
    line-height: 5.8vw;
  }

  .product-box .add-to-cart-form input.product-q {
    height: 11.458vw;
    padding: 1.042vw;
    width: 16.667vw;
    font-size: 4.375vw;
  }

  .product-box .add-to-cart-form .product-p {
    font-size: 8vw;
  }

  .product-box .add-to-cart-form .btn.btn-add-to-cart {
    height: 11.875vw;
    padding: 0px 4vw;
    line-height: 11.875vw;
    font-size: 4vw;
    margin-top: 7vw;
  }
}

/* END product page template responsive styles */

.cart-table {
  font-size: 21px;
}

.table.cart-table.confirm {
  width: 95%;
  margin: 0px auto;
}

.cart-table tr .col-delete-prod {
  width: 5%;
  text-align: center;
  vertical-align: middle;
}

.cart-table tr .col-prod-img {
  width: 15%;
  padding: 30px;
  vertical-align: middle;
}

.cart-table tr .col-prod-desc {
  width: 40%;
  padding: 30px;
  vertical-align: middle;
}

.cart-table tr .col-prod-price {
  width: 13.333%;
  text-align: right;
  vertical-align: middle;
}

.cart-table tr .col-delete-prod .delete-prod {
  width: 20px;
  height: 24px;
  background-image: url("../content/images/icon-delete.svg");
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

.cart-table tr .col-delete-prod .delete-prod:hover {
  background-image: url("../content/images/icon-delete-hover.svg");
}

.cart-table tr .col-prod-price .prod-price:before,
.cart-table tr .col-prod-amount .prod-amount:before,
.cart-table tr .col-prod-amount .subtotal:before,
.cart-table tr .col-prod-amount .shipping-amount:before,
.cart-table tr .col-prod-amount .total-amount:before {
  content: "$";
}

.cart-table tr .col-prod-qty {
  width: 13.333%;
  text-align: right;
  vertical-align: middle;
}

.cart-table tr .col-prod-qty input.product-q {
  height: 55px;
  font-size: 28px;
  width: 80px;
  padding: 5px;
  text-align: right;
}

.cart-table tr .col-prod-qty input.product-q.smallDigits {
  font-size: 14px;
}

.cart-table tr .col-prod-amount {
  width: 13.333%;
  text-align: right;
  vertical-align: middle;
}

.cart-table tr .col-prod-img img {
  width: 100%;
  background-color: whitesmoke;
}

@media (max-width: 768px) {
  .cart-table tr .col-prod-img img {
    width: 10vw;
  }
}

.cart-table thead,
.cart-table thead tr {
  border-bottom: 0px transparent;
}

.cart-table thead tr th {
  text-align: center;
  border-bottom: 0px;
}

.cart-table tbody tr td {
  border-top: 0px;
  border-bottom: 1px solid whitesmoke;
  padding: 20px 0px;
}

/* BEGIN responsive views for cart tables */
/*desktop to tablet*/
@media (max-width: 1280px) {
  .review-cart {
    width: 95%;
    margin: 0px auto;
  }

  .cart-table {
    font-size: 1.64vw;
  }

  .cart-table tr .col-prod-qty input.product-q {
    height: 4.29vw;
    font-size: 2.1875vw;
    width: 6.25vw;
    padding: 0.39vw;
  }

  .cart-table tr .col-prod-desc {
    padding: 2.34vw;
  }
}
/*smartphone portrait and landscape*/
@media (max-width: 736px) {
  .review-cart {
    border: 0px;
  }

  .cart-table {
    font-size: 2.3vw;
  }
}
/*smartphone portrait*/
@media (max-width: 480px) {
  .cart-table {
    font-size: 3.5vw;
  }

  .cart-table tr .col-prod-qty input.product-q {
    height: 11.458vw;
    font-size: 3.5vw;
    width: 85%;
    padding: 1vw;
    border: 1px solid black;
  }

  .cart-table tbody tr td {
    padding: 15vw 0px;
  }

  .cart-table tbody tr.subtotal-row td {
    padding: 10vw 0px;
  }
}

/* END responsive views for cart tables */

.cart-table tbody tr.subtotal-row td {
  border-bottom: 0px;
}

.cart-table tbody tr.shipping-row td,
.cart-table tbody tr.tax-row td,
.cart-table tbody tr.total-row td {
  padding: 5px 0px;
  border-bottom: 0px;
}

.cart-table tbody tr.total-row td.col-prod-qty,
.cart-table tbody tr.total-row td.col-prod-amount .total-amount {
  font-family: "LinotypeUniversW02-Medi_726166";
}

.action-btns {
  text-align: right;
  margin-top: 30px;
}

.action-btns a:first-of-type {
  margin-right: 20px;
}

ul.checkout-breadcrumbs {
  width: 100%;
  margin: 0px auto 80px;
}

ul.checkout-breadcrumbs li.step {
  float: left;
  width: 20%;
  text-align: center;
  font-size: 21px;
  color: #a0a0a0;
}

ul.checkout-breadcrumbs li.step.active {
  font-family: "LinotypeUniversW02-Medi_726166";
  background-image: url("../content/images/icon-cart.png");
  background-size: 38px 25px;
  background-repeat: no-repeat;
}

ul.checkout-breadcrumbs li.step.signIn.active {
  background-position: 15% 0px;
}

ul.checkout-breadcrumbs li.step.shipping.active {
  background-position: 35px 0px;
}

ul.checkout-breadcrumbs li.step.shipping-method.active {
  background-position: 0px 0px;
}

ul.checkout-breadcrumbs li.step.billing.active {
  background-position: 0px 0px;
}

ul.checkout-breadcrumbs li.step.confirm.active {
  background-position: 10px 0px;
}

ul.checkout-breadcrumbs li.step.sent.active {
  background-position: 30px 0px;
}

.login-options .account-login,
.login-options .guest-checkout {
  width: 100%;
  max-width: 420px;
  margin: 0px auto;
}

.login-options .col-2:first-of-type {
  border-right: 1px solid #95989a;
}

.checkout h2 {
  font-size: 36px;
  color: black;
  text-align: center;
  margin: 0px 0px 40px;
}

.form-container input.checkout-field {
  height: 46px;
  font-size: 21px;
  text-align: left;
  padding-left: 10px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 45px;
}

.btn.btn-sign-in {
  float: right;
  margin-bottom: 33px;
}

a.password-recovery-link {
  float: right;
}

.account-sign-up {
  text-align: center;
  border-top: 1px solid #95989a;
  margin-top: 35px;
  padding-top: 30px;
}

.account-sign-up p {
  font-size: 21px;
}

.btn.btn-guest {
  width: 135px;
  margin: 0px auto;
  display: block;
}

.form-container.error {
  color: #d11242;
}

.form-container.error input.checkout-field {
  margin-bottom: 0px;
  /*border-color:#d11242;*/
  border: 1px solid #a9a9a9;
}

.form-container.error select.state-menu {
  width: 95%;
}

.form-container .error-msg {
  display: none;
}

.form-container.error .error-msg {
  font-size: 18px;
  margin: 10px 0px;
  padding-left: 10px;
  display: block;
}

.user-fields {
  float: left;
  width: 70%;
  border-right: 1px solid #95989a;
  padding-right: 30px;
  position: relative;
}

.user-fields h2,
.cart-widget h2 {
  text-align: left;
}

.user-fields .user-form .form-container {
  width: 50%;
  float: left;
}

.user-fields .user-form .form-container.full-width {
  width: 100%;
}

.user-fields .user-form .form-container.half-width {
  width: 24.3%;
}

.disabled-cover {
  background-color: transparent;
  position: absolute;
  top: 0px;
  opacity: 0.8;
  height: 100%;
  width: 100%;
  display: none;
}

.user-fields .user-form .form-container input {
  /*max-width:350px;*/
  width: 95%;
}

.user-fields .user-form .form-container.full-width input {
  width: 97.5%;
}

.cart-widget {
  width: 30%;
  float: left;
  padding: 0px 30px;
}

.cart-widget .cart-items-preview {
  width: 100%;
  font-size: 16px;
}

.cart-widget .cart-items-preview tr.cart-item-row td {
  padding: 30px 0px;
}

.cart-widget .cart-items-preview tr.cart-item-row td:nth-child(1) {
  width: 20%;
}

.cart-widget .cart-items-preview tr.cart-item-row td:nth-child(2) {
  width: 50%;
  padding: 0px 20px;
}

.cart-widget .cart-items-preview tr.cart-item-row td:nth-child(3) {
  width: 30%;
  text-align: right;
}

.cart-widget .cart-items-preview tr.cart-item-row td .prod-prev {
  width: 100%;
}

.cart-widget .cart-items-preview tr.cart-item-row td .prod-qty:before {
  content: "Qty. ";
}

.cart-widget .cart-items-preview tr.cart-item-row td .prod-price:before {
  content: "$";
}

.cart-widget .cart-items-preview tr.subtotal-row {
  border-top: 1px solid #95989a;
}

.cart-widget .cart-items-preview tr.subtotal-row td {
  padding: 30px 0px;
}

.cart-widget .cart-items-preview tr.subtotal-row td:nth-child(2) {
  text-align: right;
  padding-right: 20px;
  text-transform: uppercase;
}

.cart-widget .cart-items-preview tr.subtotal-row .subtotal-amount {
  text-align: right;
}

.cart-widget .cart-items-preview tr.subtotal-row .subtotal-amount:before {
  content: "$";
}

.form-container select {
  height: 46px;
  font-size: 21px;
  text-align: left;
  padding-left: 10px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 45px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white;
}

.form-container select.card-type-menu {
  width: 91%;
}

.form-container.error select {
  margin-bottom: 0px;
  border: 1px solid #a9a9a9;
}

.user-fields .user-form .form-container.shipping-container {
  padding-right: 20px;
  width: 100%;
}

.cvc-note {
  color: #48b2e2;
  cursor: pointer;
  font-size: 16px;
}

.cvc-note:hover {
  color: #23527c;
}

.btn.btn-commerce.btn-next {
  float: right;
  margin-right: 20px;
}

.user-fields .user-form .form-container.title {
  width: 20%;
  padding-right: 20px;
}

.user-fields .user-form .form-container.expiration-date {
  width: 55%;
  margin-right: 20px;
}

.user-fields .user-form .form-container.expiration-date label {
  float: left;
  line-height: 46px;
  margin-right: 10px;
  font-size: 14px;
}

.user-fields .user-form .form-container.expiration-date select.month-menu {
  width: 46%;
  margin-right: 10px;
  float: left;
}

.user-fields .user-form .form-container.expiration-date select.year-menu {
  width: 22%;
}

.form-container.expiration-date.error .error-msg {
  margin-left: 60px;
}

.user-fields .user-form .form-container.cardholder-name {
  width: 60%;
}

.user-fields .user-form .form-container.card-type {
  width: 30%;
}

.user-fields .user-form .form-container.card-number {
  width: 49.5%;
}

.user-fields .user-form .form-container.cvc {
  width: 20%;
}

.user-fields .user-form .form-container.cvc input {
  display: inline;
  width: 37%;
  margin-right: 20px;
}

.checkout-summary h2 {
  text-align: left;
}

.checkout-summary p {
  font-size: 21px;
}

.terms {
  padding: 50px 0px;
  text-align: right;
  width: 96%;
  margin: 0px auto;
}

.terms input {
  margin-right: 10px;
}

.action-btns.confirm {
  width: 96%;
  margin: 0px auto;
}

.action-btns.confirm a:first-of-type {
  margin-right: 0px;
}

.order-sent-confirmation {
  margin: 0px auto;
  width: 95%;
  text-align: center;
}

.order-sent-confirmation p a {
  font-size: 28px;
}

.point-to-guest {
  display: none;
}

/* footer styles */
footer {
  background-color: #807f7f;
  border-bottom: 1px solid #ccc;
  padding: 20px 0px 40px;
}

footer p {
  color: white;
  text-align: center;
  font-size: 18px;
}

footer .home-footer {
  width: 100%;
  max-width: 943px;
  margin: 0px auto 20px;
  text-align: center;
}

.home-footer a {
  float: left;
  line-height: 40px;
  color: white;
  margin: 10px 23px;
}

.home-footer a:hover {
  color: #ccc;
}

@media (max-width: 1280px) {
  footer {
    padding: 1.5vw 0px 3.125vw;
  }

  footer p {
    font-size: 1.4vw;
  }

  footer .home-footer {
    max-width: 75vw;
    margin: 0px auto 3.9vw;
  }

  .home-footer a {
    line-height: 3.125vw;
    margin: 0.78vw 1.9vw;
  }
}

@media (max-width: 736px) {
  footer .home-footer {
    max-width: 81vw;
  }

  .home-footer a {
    margin: 0.78vw 1.5vw;
    font-size: 2vw;
  }
}

@media (max-width: 480px) {
  .home-footer a {
    margin: 2vw;
    font-size: 5vw;
    float: none;
    display: block;
    line-height: 8vw;
  }

  footer p {
    font-size: 4vw;
  }
}

/* BEGIN social media icons on footer*/

footer .social-media-icons {
  width: 100%;
  max-width: 310px;
  margin: 0px auto 30px;
}

.social-media-icons .social-media {
  width: 14%;
  margin: 0% 1%;
  max-width: 50px;
  min-height: 50px;
  float: left;
  background-size: 100%;
  background-repeat: no-repeat;
}

.social-media-icons .social-media.facebook {
  background-image: url("images/connect-facebook-default.png");
}

.social-media-icons .social-media.facebook:hover {
  background-image: url("images/connect-facebook-hover.png");
}

.social-media-icons .social-media.instagram {
  background-image: url("images/connect-instagram-default.png");
}

.social-media-icons .social-media.instagram:hover {
  background-image: url("images/connect-instagram-hover.png");
}

.social-media-icons .social-media.vimeo {
  background-image: url("images/connect-vimeo-default.png");
}

.social-media-icons .social-media.vimeo:hover {
  background-image: url("images/connect-vimeo-hover.png");
}

.social-media-icons .social-media.twitter {
  background-image: url("images/connect-twitter-default.png");
}

.social-media-icons .social-media.twitter:hover {
  background-image: url("images/connect-twitter-hover.png");
}

.social-media-icons .social-media.linked {
  background-image: url("images/connect-linked-default.png");
}

.social-media-icons .social-media.linked:hover {
  background-image: url("images/connect-linked-hover.png");
}

.social-media-icons .social-media.youtube {
  background-image: url("images/connect-youtube-default.png");
}

.social-media-icons .social-media.youtube:hover {
  background-image: url("images/connect-youtube-hover.png");
}

/* END social media icons on footer*/

.modal-content {
  border-radius: 0px;
}

.modal-body p,
.modal-body p a,
.modal-body ul li a {
  font-size: 14px;
  line-height: 20px;
  margin: 20px 0px;
}

.modal-body p strong {
  font-family: "LinotypeUniversW02-Medi_726166" !important;
}

.modal-body h5 {
  margin: 10px 0px;
}

.modal-body ul li {
  list-style-type: disc;
  margin-left: 20px;
  font-size: 14px;
  line-height: 20px;
}

/*Begin Validation*/
.input-validation-error {
  border: 3px solid #d11242 !important;
}

.field-validation-error {
  color: red;
}
/*End Validation*/

p.form-instructions {
  font-size: 18px;
  line-height: auto;
  margin: 30px 0px;
}

/*BEGIN checkout pages responsive views */
@media (max-width: 1280px) {
  .checkout h2 {
    font-size: 2.7vw;
    margin: 0px 0px 3.125vw;
  }

  .form-container input.checkout-field {
    height: 3.59vw;
    font-size: 1.64vw;
    padding-left: 0.78vw;
    margin-bottom: 3.5vw;
  }

  .form-container.error .error-msg {
    font-size: 1.4vw;
    margin: 0.78vw 0px;
    padding-left: 0.78vw;
  }

  .btn.btn-sign-in {
    margin-bottom: 2.578vw;
  }

  .btn.btn-guest {
    width: 10.54vw;
  }

  .login-options .account-login,
  .login-options .guest-checkout {
    max-width: 32.8125vw;
  }

  .account-sign-up {
    margin-top: 2.7vw;
    padding-top: 2.34vw;
  }

  .account-sign-up p {
    font-size: 1.64vw;
  }

  ul.checkout-breadcrumbs {
    margin: 0px auto 6.25vw;
  }

  ul.checkout-breadcrumbs li.step {
    font-size: 1.640625vw;
  }

  ul.checkout-breadcrumbs li.step.active {
    background-size: 2.96875vw 1.953125vw;
  }

  ul.checkout-breadcrumbs li.step.shipping.active {
    background-position: 2.5vw 0px;
  }

  ul.checkout-breadcrumbs li.step.billing.active {
    background-position: 0px 0px;
  }

  ul.checkout-breadcrumbs li.step.confirm.active {
    background-position: 0.5vw 0px;
  }

  ul.checkout-breadcrumbs li.step.sent.active {
    background-position: 2vw 0px;
  }

  .user-fields .user-form .form-container.shipping-container {
    padding-right: 1.5625vw;
  }

  .form-container select.shipping-menu {
    height: 3.5937499999999996vw;
    font-size: 1.640625vw;
    padding-left: 0.78125vw;
    margin-bottom: 3.515625vw;
  }

  .cart-widget {
    padding: 0px 2.34375vw;
  }

  .cart-widget .cart-items-preview {
    width: 100%;
    font-size: 1.25vw;
  }

  .cart-widget .cart-items-preview tr.cart-item-row td {
    padding: 1.25vw 0px;
  }

  .cart-widget .cart-items-preview tr.cart-item-row td:nth-child(2) {
    padding: 0px 1.5625vw;
  }

  .cart-widget .cart-items-preview tr.subtotal-row td {
    padding: 2.34375vw 0px;
  }

  .cart-widget .cart-items-preview tr.subtotal-row td:nth-child(2) {
    padding-right: 1.5625vw;
  }

  .user-fields .user-form .form-container.title {
    padding-right: 1.5625vw;
  }

  .user-fields .user-form .form-container.expiration-date label {
    line-height: 3.594vw;
    margin-right: 0.781vw;
    font-size: 1.094vw;
  }

  .form-container select {
    height: 3.5937499999999996vw;
    font-size: 1.640625vw;
    padding-left: 0.78125vw;
  }

  .user-fields .user-form .form-container.expiration-date select.month-menu {
    margin-right: 0.78125vw;
  }

  .form-container.expiration-date.error .error-msg {
    margin-left: 4.688vw;
  }

  .user-fields .user-form .form-container.cvc input {
    margin-right: 1vw;
  }

  .cvc-note {
    font-size: 1.25vw;
  }

  .checkout-summary p {
    font-size: 1.640625vw;
  }

  .cart-table tr .col-prod-img {
    padding: 2.34375vw;
  }

  .cart-table tr .col-prod-desc {
    padding: 2.34375vw;
  }

  .order-sent-confirmation p a {
    font-size: 2.1875vw;
  }
}

/*smartphone portrait and landscape*/
@media (max-width: 736px) {
  .form-container.error .error-msg {
    font-size: 2.853vw;
  }

  .form-container input.checkout-field,
  .form-container select.shipping-menu {
    height: 8.099vw;
    font-size: 2.853vw;
    padding-left: 1.359vw;
    margin-bottom: 6.114vw;
  }

  .form-container select {
    height: 8.099vw;
    font-size: 2.853vw;
    padding-left: 1.359vw;
  }

  .cvc-note {
    font-size: 1.853vw;
  }

  .cart-widget {
    display: none;
  }

  .user-fields {
    float: none;
    width: 100%;
    border-right: 0px;
    padding-right: 0px;
  }

  ul.checkout-breadcrumbs li.step {
    display: none;
    width: 100%;
    font-size: 3vw;
  }

  ul.checkout-breadcrumbs li.step.active {
    display: block;
    background-size: 5vw 3vw;
  }

  ul.checkout-breadcrumbs li.step.shipping.active {
    background-position: 34vw;
  }

  ul.checkout-breadcrumbs li.step.shipping-method.active {
    background-position: 30vw;
  }

  ul.checkout-breadcrumbs li.step.billing.active {
    background-position: 28vw;
  }

  ul.checkout-breadcrumbs li.step.confirm.active {
    background-position: 30vw;
  }

  ul.checkout-breadcrumbs li.step.sent.active {
    background-position: 32vw;
  }

  .table-responsive {
    border: 0px;
  }

  .checkout-summary .col-4 {
    width: 50%;
    margin-bottom: 7vw;
  }

  .checkout-summary p {
    font-size: 2.853vw;
  }

  .cart-table tr .col-prod-img {
    padding: 1vw;
  }

  .order-sent-confirmation p a {
    font-size: 3.3vw;
  }

  .btn.btn-commerce.btn-next {
    margin-right: 2vw;
  }

  .user-fields .user-form .form-container.expiration-date label {
    line-height: 8.25vw;
    margin-right: 1.359vw;
    font-size: 1.902vw;
  }

  .form-container.expiration-date.error .error-msg {
    margin-left: 8.832vw;
  }
}
/*smartphone portrait*/
@media (max-width: 480px) {
  .checkout h2 {
    font-size: 7vw;
    margin: 5vw 0px 10vw;
  }

  .cart-table tr .col-delete-prod {
    width: 0%;
  }

  .cart-table tr .col-prod-img {
    padding: 0px;
    width: 0%;
  }

  .table-responsive > .table > tbody > tr > td.col-prod-desc {
    width: 62.5vw;
    padding: 0px 3vw;
    white-space: normal;
  }

  .cart-table tr .col-prod-price,
  .cart-table tr .col-prod-qty,
  .cart-table tr .col-prod-amount {
    width: 0%;
  }

  .cart-table tr .col-delete-prod .delete-prod {
    width: 4.167vw;
    height: 5vw;
  }

  .cart-table tr .col-prod-img img {
    width: 17.188vw;
  }

  .action-btns {
    margin-top: 0px;
  }

  .login-options .col-2:first-of-type {
    border-right: 0px;
    padding-bottom: 10vw;
  }

  .login-options .account-login,
  .login-options .guest-checkout {
    max-width: 90%;
  }

  .login-options .guest-checkout {
    padding-top: 10vw;
  }

  .login-options .guest-checkout h2 {
    margin-bottom: 5vw;
  }

  .form-container input.checkout-field,
  .form-container select.shipping-menu {
    height: 12.583vw;
    font-size: 5.375vw;
    padding-left: 2.083vw;
  }

  .user-fields .user-form .form-container.full-width input {
    width: 95.5%;
  }

  .user-fields .user-form .form-container.half-width {
    width: 100%;
  }

  .user-fields .user-form .form-container.card-type {
    width: 100%;
  }

  .form-container select {
    height: 12.583vw;
    font-size: 5.375vw;
    padding-left: 2.083vw;
    width: 95%;
  }

  .form-container.error .error-msg {
    height: 12.583vw;
    font-size: 4vw;
    padding-left: 2.083vw;
  }

  .form-container select.card-type-menu {
    width: 95%;
  }

  .btn.btn-sign-in {
    width: 30.54vw;
  }

  .btn.btn-guest {
    width: 30.54vw;
  }

  .account-sign-up {
    margin-top: 10vw;
    padding: 5vw;
    background-color: whitesmoke;
    border-top: 0px;
  }

  .account-sign-up p {
    font-size: 5vw;
    width: 70%;
    margin: 0px auto;
  }

  .point-to-guest {
    font-size: 4vw;
    line-height: 8vw;
    display: block;
  }

  .user-fields {
    width: 88%;
    margin: 0px auto;
  }

  .user-fields .user-form .form-container {
    width: 100%;
    float: none;
  }

  .user-fields .user-form .form-container.expiration-date label {
    line-height: 12.583vw;
    margin-right: 2.083vw;
    font-size: 2.917vw;
  }

  .user-fields .user-form .form-container.expiration-date select.month-menu {
    width: 54%;
  }

  .form-container.expiration-date.error .error-msg {
    margin-left: 12.5vw;
  }

  .user-fields .user-form .form-container.card-number {
    width: 100%;
  }

  .user-fields .user-form .form-container.cardholder-name {
    width: 100%;
  }

  .user-fields .user-form .form-container.expiration-date {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 7vw;
  }

  .user-fields .user-form .form-container.cvc {
    width: 100%;
  }

  .user-fields .user-form .form-container.cvc input {
    width: 50%;
    margin-right: 5vw;
    float: left;
  }

  .cvc-note {
    font-size: 5vw;
    line-height: 14vw;
  }

  ul.checkout-breadcrumbs li.step {
    font-size: 5vw;
  }

  ul.checkout-breadcrumbs li.step.shipping.active {
    background-position: 30vw;
  }

  ul.checkout-breadcrumbs li.step.shipping-method.active {
    background-position: 20vw;
  }

  ul.checkout-breadcrumbs li.step.billing.active {
    background-position: 20vw;
  }

  ul.checkout-breadcrumbs li.step.confirm.active {
    background-position: 24vw;
  }

  ul.checkout-breadcrumbs li.step.sent.active {
    background-position: 28vw;
  }

  .checkout-summary .col-4 {
    width: 90%;
    margin: 0px auto 10vw;
    float: none;
  }

  .checkout-summary p {
    font-size: 5vw;
  }

  .order-sent-confirmation {
    width: 80%;
  }

  .order-sent-confirmation p a {
    font-size: 5vw;
  }

  .terms a {
    font-size: 4vw;
  }
}

/* copy shipping button checkbox */

.copy-shipping-box {
  font-size: 18px;
  margin-bottom: 20px;
}

.user-fields .user-form .form-container .option-container {
  padding: 5px 0px;
}

.user-fields .user-form .form-container .option-container input.radio {
  width: 15px;
  float: left;
  margin-top: 6px;
}

.user-fields .user-form .form-container .option-container label {
  font-size: 21px;
  color: #333;
  margin-left: 20px;
}

.shipping-cost-est {
  color: green;
}

.shipping-cost-est:before {
  content: "- ($";
}

.shipping-cost-est:after {
  content: ")";
}

/*BEGIN checkout pages responsive views */
@media (max-width: 1280px) {
  .user-fields .user-form .form-container .option-container {
    padding: 0.391vw 0px;
  }

  .user-fields .user-form .form-container .option-container input.radio {
    width: 0.781vw;
    margin-top: 0.469vw;
  }

  .user-fields .user-form .form-container .option-container label {
    font-size: 1.641vw;
    margin-left: 1.562vw;
  }
}

/*smartphone portrait and landscape*/
@media (max-width: 736px) {
  .user-fields .user-form .form-container .option-container {
    padding: 0.679vw 0px;
  }

  .user-fields .user-form .form-container .option-container input.radio {
    width: 1.359vw;
    margin-top: 0.815vw;
  }

  .user-fields .user-form .form-container .option-container label {
    font-size: 2.853vw;
    margin-left: 2.717vw;
  }
}
/*smartphone portrait*/
@media (max-width: 480px) {
  .user-fields .user-form .form-container .option-container {
    padding: 1.042vw 0px;
  }

  .user-fields .user-form .form-container .option-container input.radio {
    width: 4.083vw;
    margin-top: 1.25vw;
  }

  .user-fields .user-form .form-container .option-container label {
    font-size: 4.375vw;
    margin-left: 4.167vw;
  }
}

/*card brands styles on billing page */

.brands {
  margin-bottom: 20px;
}

.brands.security {
  margin-top: 50px;
}

.brands p {
  font-size: 18px;
}

.brands img {
  margin-bottom: 10px;
}

.card-brand {
  width: 100%;
  max-width: 222px;
  max-height: 75px;
}

.security-brand {
  width: 100%;
  max-width: 450px;
  max-height: 75px;
}

/* tax-exempt field styles*/

.tax-exempt-input {
  display: none;
}

.confirm table {
  padding: 20px;
}

/* Style for the Learn More button */
.learn-more {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #ffffff54;
  color: rgb(0, 0, 0);
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.018);
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  z-index: 9999; /* Ensure button appears above other content */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .learn-more {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
  }
}

.learn-more:hover {
  background-color: #ffffff;
  transform: scale(1.02);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.device-section table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

.device-section th,
.device-section td {
  padding: 12px;
  text-align: left;
  font-size: larger;
  text-align: center !important;
  vertical-align: middle !important;
}
.device-section td {
  font-size: 1.5em;
}
.device-section thead {
  background-color: #343a40;
  color: #fff;
}

.device-section tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
/* .main-body .top-header p */
.device-photo {
  max-width: 200px;
  object-fit: cover;
  height: auto;
}

.image-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.image-container .hero-img {
  border-radius: 5px;
  max-width: 80%;
  height: auto;
}
.image-container img {
  border-radius: 5px;
  max-width: 95%;
  height: auto;
}
td {
  position: relative;
}

.price {
  font-size: 1.2em;
  font-weight: bold;
}

.btn-container {
  margin-bottom: 5px; /* Adjust as needed for spacing img-fluid */
}

.magtek-home-button {
  border-radius: 15px;
  color: #d21242;
  font-size: 20px;
  background: #fff;
  padding: 10px 20px;
  border: solid #d21242 2px;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  margin-left: 30px;
  margin-right: 30px;
  cursor: pointer;
  font-weight: normal;
}
.features-list li {
  margin-bottom: 15px;
  font-size: 1.4em;
}
.main-body .top-header p {
  font-size: 1.4em !important;
}
.main-body .top-header .quick-description {
  font-size: 1.6em !important;
}
.main-body .top-header .feature-title {
  text-align: left;
  font-weight: 900;
}
@media (max-width: 600px) {
  .table th:first-child,
  .table td:first-child {
    display: none !important;
  }

  .image-container img {
    max-width: 100%;
  }
  .main-body .top-header p {
    width: 100%;
  }
  .magtek-home-button {
    font-size: 16px;
    padding: 6px 12px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Disabled quantity input styling for cable items */
.quantity-disabled {
  background-color: #e9ecef !important;
  color: #6c757d !important;
  cursor: not-allowed !important;
  border: 1px solid #ced4da !important;
}

.quantity-disabled:hover {
  cursor: not-allowed !important;
  border: unset !important;
  border-color: unset !important;
}

.quantity-disabled:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Enhanced part number styling */
.prod-PN {
  color: #007bff;
  font-size: 0.85em;
  font-weight: 500;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
  margin-top: 5px;
  font-family: "Courier New", monospace;
  letter-spacing: 0.5px;
}

.prod-PN::before {
  content: "PN: ";
  color: #6c757d;
  font-weight: normal;
  font-family: inherit;
}

:root {
  --magtek-red: #d21242;
  --magtek-gray: #f8f9fa;
  --magtek-white: #ffffff;
  --light-neutral-gray: #f4f5f5;
  --medium-neutral-gray: #dbdbdb;
  --neutral-gray: #555454;
  --dark-neutral-black: #333132;
  --light-neutral-blue: #ced7df;
  --dark-neutral-blue: #263c50;
  --text-color: #333;
}

/* Modern Cable Modal Styles (shared for all Dyna device modals) */
.modal-lg {
  max-width: 540px;
}
#cableModal .modal-content {
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  border: none;
  background: var(--magtek-white);
  overflow: hidden;
}
#cableModal .modal-header {
  border-bottom: none;
  padding-bottom: 0.5rem;
  background: var(--magtek-gray);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
#cableModal .modal-title {
  font-weight: 700;
  color: var(--dark-neutral-black);
  font-size: 1.35rem;
}
#cableModal .close {
  font-size: 2rem;
  color: var(--neutral-gray);
  opacity: 1;
  transition: color 0.2s;
  margin-top: -26px;
}
#cableModal .close:hover {
  color: var(--magtek-red);
}
#cableModal .modal-body {
  background: var(--magtek-gray);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
#cableModal .alert-info {
  background: var(--light-neutral-blue);
  border: none;
  color: var(--dark-neutral-blue);
  font-size: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
#cableModal .skip-cable-btn {
  color: var(--neutral-gray);
  background: var(--light-neutral-gray);
  border: 1px solid var(--medium-neutral-gray);
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 18px;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
#cableModal .skip-cable-btn:hover {
  background: var(--magtek-gray);
  color: var(--magtek-red);
  border-color: var(--magtek-red);
}
#cableModal .skip-cable-btn i {
  margin-right: 8px;
  font-size: 1.1em;
}
#cableOptionsContainer {
  gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#cableOptionsContainer .col-md-6 {
  flex: 1 1 220px;
  max-width: 260px;
  min-width: 180px;
  padding: 0 8px;
  margin-bottom: 1.5rem;
  display: flex;
}
.product-box.cable-option {
  background: var(--magtek-white);
  border: 2px solid var(--medium-neutral-gray);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 18px 16px 12px 16px;
  margin: 0;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-height: 260px;
  width: 100%;
}
.product-box.cable-option.selected,
.product-box.cable-option:hover {
  border-color: var(--magtek-red);
  background: var(--light-neutral-gray);
  box-shadow: 0 4px 16px rgba(210, 18, 66, 0.1);
}
.cable-radio {
  z-index: 2;
}
.cable-radio input[type="radio"] {
  accent-color: var(--magtek-red);
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.cable-radio label {
  font-weight: 600;
  color: var(--dark-neutral-black);
  margin: 0;
  margin-top: 20px;
}
.product-image {
  max-width: 90%;
  height: 90px;
  object-fit: contain;
  margin: 24px 0 10px 0;
  border-radius: 6px;
  background: var(--magtek-gray);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.product-details {
  padding: 0;
  width: 100%;
}
.product-info {
  margin-bottom: 0;
  text-align: center;
}
.product-info p {
  font-size: 0.98em;
  color: var(--neutral-gray);
  margin-bottom: 0.2em;
}
.part-number {
  color: var(--neutral-gray);
  font-size: 0.92em;
  margin-top: 8px;
}
#cableModal .modal-footer {
  background: var(--magtek-gray);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  justify-content: center;
  padding: 1.5rem 1rem;
  margin-top: unset;
  border-top: 1px solid var(--medium-neutral-gray) !important;
}
#cableModal .modal-footer .add-to-cart-form {
  margin: 0;
  width: 100%;
  min-width: 180px;
}
#cableModal .modal-footer .btn-add-to-cart {
  width: 100%;
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 12px 0;
  box-shadow: 0 2px 8px rgba(210, 18, 66, 0.1);
}

#cableModal .product-box .product-details {
  border-right: unset !important;
  display: none !important;
}
#cableModal .product-box .product-image {
  all: unset;
  border-radius: 0;
  background: var(--magtek-gray);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
@media (max-width: 600px) {
  .modal-lg {
    max-width: 98vw;
  }
  #cableOptionsContainer {
    flex-direction: column;
    gap: 0.5rem;
  }
  #cableOptionsContainer .col-md-6 {
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }
  .product-box.cable-option {
    min-height: 180px;
    padding: 12px 8px 8px 8px;
  }
  .product-image {
    height: 60px;
    margin: 12px 0 8px 0;
  }
  #cableModal .modal-header,
  #cableModal .modal-footer {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}

/* Cable name styling within combined device names */
.cable-name {
  color: var(--neutral-gray);
  font-size: 0.85em;
  font-style: italic;
  position: relative;
  padding-left: 16px;
}

/* home page styles product-name .also-bought */
.top-header.home {
    max-width:100vw;
    margin:0px auto 30px;
    border-bottom: 1px solid gray;
    background-image: url("/content/images/home-bckg-retail-store.jpg");
    background-position-y: -250px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
}

    /* styles.css */
    .white-text {
        color: #ffffff;
        font-size: 19px;
        margin-bottom: 40px;
    }

    .white-link {
        color: #ffffff;
        text-decoration: none;
    }

    .white-link:hover {
        text-decoration: underline;
    }

    /* styles.css */
    .magtek-home-button {
        border-radius: 15px;
        color: #D21242;
        font-size: 20px;
        background: #ffffff;
        padding: 10px 20px;
        border: 2px solid #D21242;
        text-decoration: none;
        transition: 0.3s;
    }

    .magtek-home-button:hover {
        background: #D21242;
        color: white;
        text-decoration: none;
        transform: scale(1.05);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .carouselCaptionInner {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 80%;
        transform: translate(-50%, -50%);
    }

    .fs-video-hero {
        overflow: hidden;
        width: 100vw;
        height: 650px;
        background-size: cover;
        position: relative;
    }

    #my-video {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
    }

    .bg-overlay {
        position: absolute;
        z-index: 10;
        background: rgba(17, 17, 17, 0.687);
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }
@media (max-width: 768px) {
    .fs-video-hero {
        height: 760px;
    }
    .carouselCaptionInner {
        min-width: 90% !important;
        padding: 20px;
    }

    h1 {
        font-size: 30px;
    }

    .white-text,
    .white-link {
        font-size: 16px !important;
        margin-bottom: 20px;
    line-height: 1.3;
    }
}

@media (max-width: 1312px) {
    .top-header.home {
        background-position-y: -150px;
     }   
}

@media (max-width: 1161px) {
    .top-header.home {
        background-position-y: -20px;
     }   
}

@media (max-width: 1036px) {
    .top-header.home {
        background-position-y: 0px;
        background-size: 130vw;
        background-position-x: center;
    }
       
}

@media (max-width: 875px) {
    .top-header.home {
        background-position-y: 0px;
        background-size: 160vw;
    }
       
}

@media (max-width: 736px) {
    .top-header.home {
        background-size: 200vw;
    }
       
}

@media (max-width: 612px) {
    .top-header.home {

        background-size: 250vw;
    }
       
}

@media (max-width: 540px) {
    .top-header.home {
        background-position-x: -19vw;
        background-size: 300vw;
    }
       
}

@media (max-width: 480px) {
    .top-header.home {
        background-position-x: -19vw;
        background-size: 360vw;
        background-position: -5vw;
    }

    .top-header.home .header-text {
        padding: 7vw 5vw !important;
    }

    .top-header.home .header-text h1 {
        font-size:28px !important;
    }
}

@media (max-width: 410px) {
    .top-header.home {
        background-position-x: -19vw;
        background-size: 370vw;
    }

    
       
}

@media (max-width: 401px) {
    .top-header.home {
        background-position-x: -19vw;
        background-size: 500vw;
    }
       
}

.top-header.home .header-text {
    margin: 0px auto 100px;
    background-color: rgba(0,0,0,.75);
    padding: 50px;
    width: 80vw;
    max-width: 930px;
    text-align: center;
    
}

.top-header.home .header-text h1 {
    font-size:40px;
    color: white;
}



.top-header.home .header-text p, .top-header.home .header-text a {
    font-size:16px;
    margin:30px auto;
    color: white;
}

.top-header.home .header-text p.subtext {
    font-size:18px;   
    color: white;
}

.home.product-box {
    margin:50px 0px;
}



.home.product-box .product-details {
    border-right:none;   

}

.home.product-box .product-details p {
    width:90%;   
    margin:0px auto;
    font-size: 16px;
    color: black;
}

.home.product-box .product-details .btn.btn-commerce {
    margin-top: 20px;
}

.col-2-container {
    width:100%;
    max-width:854px;
    margin:0px auto;
    float:none;
}

.col-2-container .home.product-box .product-details .btn.btn-commerce {
    left:75px;
}

@media (max-width:1280px) {

    
    .top-header.home h1 {
        font-size:3.125vw;
    }

    .top-header.home p, .top-header.home a {
        font-size:1.64vw;
        margin:2.34vw auto;

    }
    
    .top-header.home p.subtext {
        font-size:1.4vw;   
    }
    
    .home.product-box {
        margin:3.906vw  0px;
    }



    .home.product-box .product-details {
        height:27.484vw;
    }

    .home.product-box .product-details p {
        font-size: 1.25vw;
    }

    .home.product-box .product-details .btn.btn-commerce {
        left:7.422vw ;
    }

    .col-2-container {
        max-width:66.719vw;
    }

    .col-2-container .home.product-box .product-details .btn.btn-commerce {
        left:5.859vw ;
    }
}

@media (max-width:736px) {

    
    .top-header.home h1 {
        font-size:4vw;
    }

    .top-header.home p, .top-header.home a {
        font-size: 2.2vw;
        margin: 2.34vw auto;
        line-height: 4vw;
    }
    
    .top-header.home p.subtext {
        font-size:2.4vw;   
    }
    
    .home.product-box .product-details {
        height:32.484vw;
    }

    .home.product-box .product-details p {
        font-size: 1.5vw;
        line-height: 2vw;
    }
    
    .home.product-box .product-details .btn.btn-commerce {
        left: 1vw;
        font-size: 1.7vw;
        height: 5vw;
        line-height: 5vw;
    }
    
    .col-2-container .home.product-box .product-details .btn.btn-commerce {
        left:0px ;
    }
}

@media (max-width:480px) {
    .top-header.home {
        padding-top: 50px !important;
    }
    
    .top-header.home h1 {
        font-size: 10vw;
    }

    .top-header.home p, .top-header.home a {
            font-size: 4vw;
            margin: 8.34vw auto;
            line-height: 6vw;
    }
    
    .top-header.home p.subtext {
        font-size:3.75vw;   
    }
    
    .home.product-box {
        margin:3.906vw  auto;
        padding-bottom:10vw;
    }
    
    .home.product-box:last-of-type {
        border-bottom:1px solid white;
    }
    
    .home.product-box .product-details {
        height:73vw;
    }
    
    .home.product-box .product-details p {
        font-size: 4vw;
        line-height: 7vw;
    }

    .home.product-box .product-details .btn.btn-commerce {
        left: 10vw;
        font-size: 4vw;
        height: 14vw;
        line-height: 14vw;
    }
    
    .col-2-container {
        max-width:77vw;
    }
    
    .col-2-container .home.product-box .product-details .btn.btn-commerce {
        left:10vw;
        font-size:5vw;   
    }
    
    .col-2-container .product-box:last-of-type {
        border-bottom:1px solid #ccc;
    }
}

.notice {
    border-bottom:1px solid gray;
    width:100%; 
    padding:15px 100px;   

}



.inner-box {
   width:90%;
   max-width:698px;
   margin:0px auto; 
   background-image:url(images/icon-notice.svg);
   background-repeat:no-repeat;
   background-position:10px 10px;
   padding-left:75px;

}

.notice h3 {
    color:#596B9D;
    font-size:21px;
    font-weight:600;
}

.notice p {
    font-size:19px;
    margin:10px 0px;
}

.notice a{
    font-size:21px;
}

.notice p strong {
    color:#d11242;   
}

@media (max-width:768px) {
    .notice {
        padding:10px;   
    }
    
    .inner-box {
        max-width:90vw;   
    }

    .notice p, .notice a {
        font-size:14px;
        margin:5px 0px;
        line-height:21px;
    }    
    
}





    .slash {
        position: relative;
        color: black !important;
    }
.new-price {
    transform: translate(20px, 0px);
}

    .slash::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-bottom: 5px solid #ff0000; /* You can adjust the color as needed */
        transform: rotate(-11deg);
        transform-origin: center;
        border-radius: 2px; /* Add border-radius for rounded ends */
        box-shadow: 0 0 3px rgba(255, 0, 0, 0.5); /* Add shadow for depth */
    }
