* {
     margin: 0;
     padding: 0;
     /*border: 1px solid red;*/
}
 body {
     font-family: 'Consolas', monospace;
     text-align: left;
     font-size: 18px;
     color: #f1f1f1;
}
 .container {
     max-width: 450px;
     margin: 0 auto;
}
h1 {
     color: #964075;
}
 h3 {
     color: #ccc;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
}
 h4 {
     text-transform: uppercase;
}

 .disabled h3 {
     color: #888;
     cursor: not-allowed;
}
 .button-active {
     color: #020202;
     background-color: #ED8324;
}
 nav {
     background-color: #964075;
     padding: 18px;

}
 nav .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 nav .container object {
     width: 4.5em;
     padding: 1.2em 0.5em;
}
 nav .container .login-button, nav .container .menu-button, .contact-button {
     text-transform: uppercase;
     letter-spacing: 0.1em;
     padding: 1em 1.25em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}
 .nav-menu {
     background-color: #964075;
     display: flex;
     justify-content: center;
}
 .nav-menu .container {
     padding: 1.5em;
     display: flex;
}
 .nav-menu .container ul {
     list-style: none;
}
 .nav-menu .container ul li {
     padding: 0.25em 2em;
}

.active {
     background-color: #ED8324;
     color: #080808;
}

 .nav-menu .container ul li:first-child {
     text-transform: uppercase;
     letter-spacing: 0.05em;
}
 .hide {
     display: none;
}
 .login-form {
     background-color: #964075;
     padding: 1em 0 0;
     display: none;
}
 .login-form .container {
     padding: 0 0.5em;
}
 .login-form h4 {
     font-weight: 400;
}
 .login-form input {
     width: calc(100% - 1em);
     border: none;
     height: 2em;
     margin: 0.5em 0;
     font-size: 1em;
     padding: 0 0.5em;
}
 .login-form .sign-in-button {
     background-color: #ED8324;
     color: #ccc;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     width: 100%;
     height: 2.5em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}
 .contact-form {
     background-color: #964075;
     padding: 1em 0 0;
     display: none;
}
 .contact-form .container {
     padding: 0 0.5em;
}
 .contact-form h4 {
     font-weight: 400;
}
 .contact-form input {
     width: calc(100% - 1em);
     border: none;
     height: 2em;
     margin: 0.5em 0;
     font-size: 1em;
     padding: 0 0.5em;
}
 .contact-form .sign-in-button {
     background-color: #ED8324;
     color: #ccc;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     width: 100%;
     height: 2.5em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}

.disabled {
     cursor:not-allowed;
     opacity: 50%;
}
.company {
     text-align: center;
     display: inline-block;
     width: 100%;
}
.featured {
     text-align: center;
     background-color: #964075;
     color: #f1f1f1;

}

 .product-card {
     margin: 1em 0;
}
 .product-card .bowl, .product-card .cupb, .product-card .cupy, .product-card .platel, .product-card .plates, .product-card .utensilset1, .product-card .utensilset2 {
     background-size: 100%;
     background-position: center;
     transition: 0.2s;
}
 .product-card .cupb {
     background-image: url("../imgs/CupB.jpg");
}
.product-card .cupy {
     background-image: url("../imgs/CupB.jpg");
}
 .product-card .platel {
     background-image: url("../imgs/PlateLarge.jpg");
}
 .product-card .bowl {
     background-image: url("../imgs/Bowl.jpg");
}
.product-card .plates {
     background-image: url("../imgs/PlateSmall.jpg");
}
.product-card .utensilset1 {
     background-image: url("../imgs/Set1.jpg");
}
.product-card .utensilset2 {
     background-image: url("../imgs/Set2.jpg");
}


 .product-card .photo-active {
     background-size: 105%;
     transition: 0.2s;
}
 .product-card .product-details {
     margin-top: -5px;
     background-color: #964075;
     display: flex;
     justify-content: space-between;
}
 .product-card .product-details h4, .product-card .product-details p {
     padding: 0.7em 1.25em;
}
 .product-card .product-details div {
     display: flex;
}
 .product-card .product-details .more-details-button {
     background-color: #eee;
     padding: 0.75em 1.25em;
     cursor: pointer;
     width: 1em;
     transition: 0.1s;
}
 .product-card .product-details .more-details-button img {
     position: relative;
     left: 0.1em;
}
 .product-card .product-details .more-details-button .rotate {
     transition: 0.1s;
     transform: rotate(90deg);
}
 .product-card .purchase-details {
     display: none;
     background-color: #964075;
     color: #f1f1f1;
}
 .product-card .purchase-details .active {
     background-color: #ED8324;
     color: #f1f1f1;
}
 .product-card .product-quantity, .product-card p {
     padding: 1em 1.25em;
}
 .product-card .product-quantity ul, .product-card p ul {
     list-style: none;
     display: flex;
     justify-content: space-around;
     margin-top: 1em;
}
 .product-card .product-quantity ul li, .product-card p ul li {
     padding: 0.5em;
     background-color: #505050;
     width: 100%;
     text-align: center;
     margin-right: 2px;
     cursor: pointer;
}
 .product-card .buy-now-button {
     height: 30px;
     background-color: #ED8324;
     text-align: center;
     padding: 0.75em;
     cursor: pointer;
     display: none;
}
 .shopping-cart {
     background-color: #ED8324;
     box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.5);
     display: none;
}
 .shopping-cart .container {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 1em 1.5em;
}
 .shopping-cart .container .cart {
     display: flex;
     justify-content: space-between;
}

 .shopping-cart .container .cart object, .shopping-cart .container .cart h3 {
     margin-right: 20px;
     max-height: 20px;
     padding: 0;

}
 footer {
     color: #f1f1f1;
     background-color: #964075;
     margin-top: 0;
     padding: 1em 0.5em;
}
 footer .container {
     display: flex;
     justify-content: space-between;
}
 footer .container object {
     width: 4.5em;
}

/* Media Queries for Tablet | Laptop | Desktop */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .container {
    max-width: 88%;
    margin: 0 auto;
  }
  .product-card .product-details img {
    max-height: 20px;
  }
  .product-card .bowl, .product-card .cupb, .product-card .cupy, .product-card .platel, .product-card .plates, .product-card .utensilset1, .product-card .utensilset2 {
     background-size: 100%;
     background-position: center;
     height: 14em;
     transition: 0.2s;
  }
  .product-card .photo-active {
     background-size: 105%;
     transition: 0.2s;
  }
  .shopping-cart {
    width: 100%;
    margin-left: 0;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .container {
    max-width: 88%;
    margin: 0 auto;
  }
 .nav-menu .container ul {
    width: 100%;
  }
  .nav-menu .container ul li {
     display: inline-block;
     padding: 0.25em;
  }
  .product-card .bowl, .product-card .cupb, .product-card .cupy, .product-card .platel, .product-card .plates, .product-card .utensilset1, .product-card .utensilset2 {
     background-size: 100%;
     background-position: center;
     height: 14em;
     transition: 0.2s;
  }
  .product-card .photo-active {
     background-size: 110%;
     transition: 0.2s;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .container {
    max-width: 88%;
    margin: 0 auto;
  }
 .nav-menu .container ul {
    width: 100%;
  }
  .nav-menu .container ul li {
     display: inline-block;
     padding: 0.25em;
  }
  .product-card .bowl, .product-card .cupb, .product-card .cupy, .product-card .platel, .product-card .plates, .product-card .utensilset1, .product-card .utensilset2 {
     background-size: 100%;
     background-position: center;
     transition: 0.2s;
}

 .product-card .photo-active {
     background-size: 120%;
     transition: 0.2s;
  }
  .login-form, .contact-form {
     width: 30%;
     margin-left: 67%;
  }

}

/* Large devices (laptops/desktops, 992px and up) */
.container {
     max-width: 100%;
     margin: 0 auto;
   }
@media only screen and (min-width: 992px) {

  .nav-menu .container ul li {
     display: inline-block;
     padding: 0.25em 1em;
     text-align: center;
  }
  .product-container {
    display: inline-block;
    width: 30%;
    margin-left: 2%;
    margin-top: 20px;
  }
  .product-card .bowl, .product-card .cupb, .product-card .cupy, .product-card .platel, .product-card .plates, .product-card .utensilset1, .product-card .utensilset2 {
     background-size: 75%;
     background-repeat: no-repeat;
     background-position: center;
     height: 300px;
     transition: 0.2s;
  }
 .product-card .photo-active {
     background-size: 110%;
     transition: 0.2s;
  }
  .product-card .product-details img {
    max-height: 20px;
  }
  footer {
    position: relative;
    bottom: 0;
  }
  
}