* {
     margin: 0;
     padding: 0;
     /*border: 1px solid cyan;*/
}
 body {
     text-align: left;
     font-size: 18px;
     color: #000000;
	 background-color: #ECE7E7;
}
 .container {
     max-width: 450px;
     margin: 0 auto;
}
 h3 {
     color: #fff;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
}
 h4 {
     text-transform: uppercase;
	 font-family: 'Inter Tight', sans-serif;
}

 .disabled h3 {
     color: #F7A41B;
     cursor: not-allowed;
}
 .button-active {
     color: #F7A41B;
     background-color: #d3d3d3;
}
 nav {
     background-color: #F7A41B;
     color: #251605;
}
 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;
	 font-family: 'Righteous', cursive;
}
 .nav-menu {
     background-color: #d3d3d3;
     color: #000;
     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: #171717;
     color: #F7A41B;
}

 .nav-menu .container ul li:first-child {
     text-transform: uppercase;
     color: #F7A41B;
     letter-spacing: 0.05em;
	 font-weight: bold;
}
 .hide {
     display: none;
}
 .login-form {
     background-color: #d3d3d3;
     padding: 1em 0 0;
     color: #251605;
     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: #F7A41B;
     color: #000;
     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: #d3d3d3;
     padding: 1em 0 0;
     color: #251605;
     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: #F7A41B;
     color: #000;
     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;
}
 .product-card {
     margin: 1em 0;
}
/* Change these class names */
 .product-card .Lambs, .product-card .Fisher-King, .product-card .Funny-Games, .product-card .Rushmore, .product-card .Shaft, .product-card .War-Worlds {
     background-size: 15em 28em;
     background-position: center;
     background-repeat: no-repeat;
     height: 28em;
     transition: 0.2s;
}
 .product-card .Fisher-King {
     background-image: url("../imgs/Fisher.jpg");
}
 .product-card .Funny-Games {
     background-image: url("../imgs/FunnyGames.jpg");
}
 .product-card .Lambs {
     background-image: url("../imgs/Lambs.jpg");
}
.product-card .Rushmore {
	 background-image: url("../imgs/Rushmore.jpg");
}
.product-card .Shaft {
	 background-image: url("../imgs/Shaft.jpg");
}
.product-card .War-Worlds {
	 background-image: url("../imgs/War.jpg");
}
 .product-card .photo-active {
     background-size: 16.5em 30.8em;
     transition: 0.2s;
}
 .product-card .product-details {
     margin-top: -5px;
     background-color: #F7A41B;
     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: #2E2E2E;
     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: #d3d3d3;
     color: #251605;
}
 .product-card .purchase-details .active {
     background-color: #F7A41B;
     color: #000;
}
 .product-card .format, .product-card p {
     padding: 1em 1.25em;
}
 .product-card .format ul, .product-card p ul {
     list-style: none;
     display: flex;
     justify-content: space-around;
     margin-top: 1em;
}
 .product-card .format ul li, .product-card p ul li {
     padding: 0.5em;
     background-color: #FFF;
     width: 100%;
     text-align: center;
     margin-right: 2px;
     cursor: pointer;
}
 .product-card .buy-now-button {
     height: 30px;
     background-color: #F7A41B;
     text-align: center;
     padding: 0.75em;
     cursor: pointer;
     display: none;
}
 .shopping-cart {
     background-color: #171717;
     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;
}
 .shopping-cart .container .cart {
     display: flex;
}
 .shopping-cart .container .cart object, .shopping-cart .container .cart h3 {
     margin-right: 20px;
     max-height: 20px;
     padding: 0;
}
 footer {
     color: #251605;
     background-color: #F7A41B;
     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;
  }
  .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 .Lambs, .product-card .Fisher-King, .product-card .Funny-Games, .product-card .Rushmore, .product-card .Shaft, .product-card .War-Worlds {
     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 .Lambs, .product-card .Fisher-King, .product-card .Funny-Games, .product-card .Rushmore, .product-card .Shaft, .product-card .War-Worlds {
     background-size: 110%;
     background-position: center;
     height: 20em;
     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) */
@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 .Lambs, .product-card .Fisher-King, .product-card .Funny-Games, .product-card .Rushmore, .product-card .Shaft, .product-card .War-Worlds {
     background-size: cover;
     background-position: center;
     height: 650px;
     transition: 0.2s;
  }
 .product-card .photo-active {
     background-size: 200%;
     transition: 0.2s;
  }
  .product-card .product-details img {
    max-height: 20px;
  }
  footer {
    margin-top: 2em;
    width: 100%;
    position: relative;
    bottom: 0;
  }
  
}