/* CSS Document */
#commerceModal {
  display: none; }

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6); }

/* Modal Content/Box */
.modal-content {
  background-color: #87B035;
  margin: 15% auto 0;
  padding: 20px;
  width: 80%;
  max-width: 1050px;
  border-radius: 0; }

/* The Close Button */
#commerceModal .close {
  opacity: 1;
  float: right;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
  background: url("../assets/close_white.png") 0 0 no-repeat;
  width: 51px;
  height: 51px;
  top: 15px;
  cursor: pointer; }
#commerceModal .close:hover,
#commerceModal .close:focus {
  color: black;
  text-decoration: none;
  opacity: 0.5;
  cursor: pointer; }

#modal_start {
  cursor: pointer;
  display: flex;
  flex-direction: column-reverse; }

#commerceModal .modal-content .cart_items {
  margin-left: -50px;
  margin-right: 50px; }
  #commerceModal .modal-content .cart_items > p {
    text-align: center;
    color: #FFFFFF; }
#commerceModal .item_row {
  display: flex;
  background-color: #FFFFFF;
  padding: 35px 45px;
  margin: 20px 0; }
#commerceModal p, #commerceModal form {
  color: #000000;
  font-family: "source-sans-pro-semibold";
  font-size: 19px;
  flex-grow: 1; }
  #commerceModal p span, #commerceModal form span {
    display: block;
    padding: 15px 20px;
    line-height: 23px; }
    #commerceModal p span a, #commerceModal form span a {
      color: #000000;
      font-family: "source-sans-pro-regular";
      font-size: 19px;
      text-decoration: none; }
      #commerceModal p span a:hover, #commerceModal form span a:hover {
        opacity: 0.5; }
  #commerceModal p span:first-child, #commerceModal form span:first-child {
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
    text-transform: uppercase; }
  #commerceModal p input[type=number]::-webkit-inner-spin-button,
  #commerceModal p input[type=number]::-webkit-outer-spin-button, #commerceModal form input[type=number]::-webkit-inner-spin-button,
  #commerceModal form input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  #commerceModal p input[type=number], #commerceModal form input[type=number] {
    -moz-appearance: textfield; }
  #commerceModal p input, #commerceModal form input {
    border: none;
    width: 100%; }
    #commerceModal p input:hover, #commerceModal p input:focus, #commerceModal form input:hover, #commerceModal form input:focus {
      background-color: rgba(132, 170, 63, 0.2); }
#commerceModal .cart_quantity {
  max-width: 150px; }
#commerceModal .cart_remove > span:nth-child(2) {
  padding: 15px 0; }
#commerceModal .total span:first-child {
  border-right: none; }
#commerceModal .totalAll {
  float: right; }
#commerceModal .modal_header {
  display: flex;
  padding-left: 50px; }
  #commerceModal .modal_header h1 {
    flex-grow: 1;
    font-family: "nunito-bold";
    font-size: 50px;
    color: #FFFFFF; }
#commerceModal .modal_footer {
  text-align: center; }
#commerceModal .button {
  font-family: "source-sans-pro-semibold";
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #FFFFFF;
  background-color: #87B035;
  color: #FFFFFF;
  background-image: none;
  border-radius: 0;
  padding: 5px 30px;
  cursor: pointer; }
  #commerceModal .button:hover {
    background-color: #FFFFFF;
    color: #87B035; }
  #commerceModal .button:focus {
    background-color: #FFFFFF;
    color: #87B035;
    opacity: 0.5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
#commerceModal span .button {
  padding: 3px 30px;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #000000; }
  #commerceModal span .button:hover {
    background-color: #000000;
    color: #FFFFFF; }

@media only screen and (max-width: 992px) {
  #commerceModal .modal-content {
    width: 90%; } }
@media only screen and (max-width: 768px) {
  #commerceModal .modal-content {
    width: 100%; }
    #commerceModal .modal-content > p {
      margin-left: 0px;
      margin-right: 0px; } }
@media only screen and (max-width: 767px) {
  #commerceModal .item_row {
    flex-wrap: wrap; } }