body, html {
  overflow-x: hidden;
  margin: 0;
  background-color: black;
  background-image: url("/assets/img/bean.jpg?h=74180298c688b3076a73813833829d5b");
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
  font-family: Courier;
}

.fa-shopping-cart {
  position: relative;
  float: inherit;
}

.cart {
  width: 40px;
  height: 40px;
  padding: 0;
  position: absolute;
  left: 50%;
  margin-left: 195px;
  -moz-border-radius: 9999em;
  -webkit-border-radius: 9999em;
  border-radius: 9999em;
  border: none;
  background: #e54040;
  cursor: pointer;
}

.cart:hover {
  -moz-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
}

.cart:hover .popup {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-animation-duration: 200ms;
  -webkit-animation-name: show-popup;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
  -moz-animation-duration: 200ms;
  -moz-animation-name: show-popup;
  -moz-animation-direction: normal;
  -moz-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
  -o-animation-duration: 200ms;
  -o-animation-name: show-popup;
  -o-animation-direction: normal;
  -o-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
  animation-duration: 200ms;
  animation-name: show-popup;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
}

/* popup window style */

.popup {
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  width: 250px;
  margin-left: -205px;
  margin-top: 20px;
  background: #ffffff;
  border: 1px solid #cbcbcb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
}

.popup:after {
  position: absolute;
  content: ' ';
  top: -30px;
  height: 30px;
  width: 100%;
}

.popup:before {
  position: absolute;
  content: ' ';
  left: 220px;
  top: -9px;
  width: 16px;
  height: 16px;
  border-top: 1px solid #cbcbcb;
  border-right: 1px solid #cbcbcb;
  background: #ffffff;
  -moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.cart {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAGPSURBVHjajNNNi85RGAbw3zwzI/XMmEHeFYmSvJRSYsOWfAHZ+wAWakp8AAs+A5ImKzujUfKapQnZzIaVxzCYGcMzXRbuydO/Wcxdd+ecq3Ouc67rvk9fkqcY8T8mcA3frSIGcLKBfcMaq4wWpjCNjwi2o71aggGcQT92YBybcLTIZ7ABX7G+xlF8qvWgJMs5kuRFksUkDypPJLmd5FSSW0lOJ7lT+GSSt70E7SQ38i+eJDmSZE+SA0n21bi35heTdJMstnrkzOMlfmELhnEVQxjDOlzBDxwv2c/7kvR6sh+Py8QLeFde9GMJ3arQw/JqrNUwtVMVaWMbFnC51pfwGQfrhR1MNgnm8LpuPVsNdr0236xKncdgyZ0eaBD8xhss4hyOlea1hQ1ha0mZwM8mwRKe4VVJ6K9Daj6PD9V0j7DUNBH6sLNcn8efOtytp7cxW82U3j5Yzs1J7ieZSnI3yXDho0nGC7+XZGMSKxEcSjJbDdVJsrvwww18VxKtFf7HTH2wObwvGfClgS/A3wEAjJAlBBKFdqAAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: center;
}

.checkout {
  margin-top: 10px;
  padding-left: 20px;
}

.checkout-button {
  padding: 3px 5px;
  background: #e54040;
  -moz-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid #e06b6b;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #ffffff;
}

.checkout-button:hover {
  background: #e54040;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.checkout-button:active {
  background: #e54040;
  -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.footer {
  background-color: rgba(0,0,0,0.54);
  color: #ffffff;
  text-align: center;
  margin-top: 1vw;
  padding: 1vw;
}

.store {
  background-color: rgba(241,241,241,0.65);
  border-radius: 3%;
  padding: .5%;
}

.columncart {
  float: left;
  margin: 1vw;
  width: 31.25%;
  padding: .5%;
}

.rowcart {
  text-align: center;
}

.items {
  width: 50%;
  text-align: center;
}

h1 {
  color: black;
}

.column {
  width: 50%;
  float: left;
  padding: 5vw;
  text-align: center;
}

.columnimg1 {
  margin-right: 2vw;
  margin-left: 2vw;
  width: 25%;
  float: left;
  text-align: center;
}

.columnimg2 {
  margin-right: 2vw;
  margin-left: 2vw;
  width: 12.5%;
  float: left;
  text-align: center;
}

.columnimg3 {
  margin-right: 2vw;
  margin-left: 6vw;
  width: 12.5%;
  float: left;
  text-align: center;
}

.images {
  height: 20vw;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

h2 {
  color: white;
  background-color: rgba(0,0,0,0.54);
  padding: 1vw;
  text-align: center;
}

h3 {
  color: black;
  font-size: 2vw;
}

.extra {
  text-align: right;
  color: white;
}

h4 {
  color: black;
  font-size: 1.25vw;
}

.tiramisu {
  width: 105%;
  border-radius: 5%;
}

.cups {
  width: 100%;
  border-radius: 5%;
}

.shoploc {
  width: 90%;
  padding-left: 5%;
  font-weight: bold;
}

.hours {
  background-color: rgba(241,241,241,0.65);
  border-radius: 10%;
  padding-top: 4vw;
  padding-bottom: 4vw;
  width: 75%;
  margin-left: 12.5%;
}

.column2 {
  width: 47%;
  float: left;
  padding: 1vw;
  text-align: center;
  background-color: rgba(255,255,255,0.65);
  border-radius: 5%;
  margin: 1.5%;
}

.column3 {
  width: 47%;
  float: left;
  text-align: left;
  border-radius: 5%;
  margin: 1.25%;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    float: none;
    width: 100vw;
  }
}

@media screen and (max-width: 600px) {
  .columncart {
    width: 100vw;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    margin-left: 5%;
    float: none;
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  .column3 {
    margin-left: 3%;
    float: none;
    width: 90%;
  }
}

/* Style the header with a grey background and some padding */

.topnav {
  overflow: hidden;
  background-color: rgba(241,241,241,0.65);
}

/* Style the header links */

@media screen and (max-width: 768px) {
  .topnav #myLinks {
    display: none;
  }
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */

.topnav a.logo {
  margin-left: 5vw;
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */

.topnav a:hover {
  background-color: rgba(255,255,255,0.65);
  color: black;
}

/* Style the active/current link */

.topnav a.active {
  background-color: rgb(139,69,19);
  color: rgba(255,255,255,0.35);
}

/* Float the link section to the right */

.header-right {
  margin-top: 4.5rem;
  float: right;
  margin-right: 5vw;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */

@media screen and (max-width: 768px) {
  .topnav a {
    float: none;
    display: block;
    text-align: center;
    margin-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .header-right {
    margin-top: 0;
    float: inherit;
    margin-right: 0;
  }
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

.javabeen {
  height: 10rem;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 768px) {
  .topnav a:not {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .topnav a.icon {
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 768px) {
  .topnav.responsive {
    position: relative;
  }
}

@media screen and (max-width: 768px) {
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .topnav a.logo {
    margin: 0vw;
  }
}

.pageheader {
  text-align: center;
  color: black;
  font-family: initial;
  font-size: x-large;
}

.form {
  margin-left: 1vw;
  margin-right: 1vw;
  background-color: rgba(255,255,255,0.65);
}

@media (max-width: 768px) {
  .form {
    width: 98%;
    margin-left: 1vw;
    margin-right: 1vw;
    background-color: rgba(255,255,255,0.65);
  }
}

div#main {
  width: 75rem;
  height: 650px;
  margin: 0 auto;
  font-family: 'Ubuntu',sans-serif;
}

label {
  margin-left: 25%;
  text-align: center;
}

div#form_sample {
  text-align: center;
  border: 1px solid #ccc;
  width: 75%;
  padding: 0 50px 15px;
  margin-top: 20px;
  box-shadow: 0 0 15px;
  border-radius: 6px;
  float: left;
}

#main h1 {
  margin-top: 40px;
}

hr {
  margin-top: -5px;
}

input[type="text"] {
  margin-left: 30%;
  margin-right: 30%;
  width: 40%;
  margin-top: 10px;
  height: 35px;
  margin-bottom: 25px;
  padding: 10px;
  border: 3px solid #000000;
}

@media (max-width: 768px) {
  input[type="text"] {
    margin-left: 12.5%;
    margin-right: 12.5%;
    width: 75%;
    margin-top: 10px;
    height: 35px;
    margin-bottom: 25px;
    padding: 10px;
    border: 3px solid #000000;
  }
}

input[type="email"] {
  width: 40%;
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  height: 35px;
  margin-bottom: 25px;
  padding: 10px;
  border: 3px solid #000000;
}

@media (max-width: 768px) {
  input[type="email"] {
    width: 75%;
    margin-top: 10px;
    margin-left: 12.5%;
    margin-right: 30%;
    height: 35px;
    margin-bottom: 25px;
    padding: 10px;
    border: 3px solid #000000;
  }
}

label {
  width: 50%;
}

textarea {
  width: 75%;
  border: 3px solid #000000;
  padding: 10px;
  margin-bottom: 25px;
  margin-top: 10px;
  margin-right: 12.5%;
  margin-left: 12.5%;
  height: 100px;
  resize: none;
}

input[type="submit"] {
  margin-right: 50%;
  width: 100%;
  padding: 10px 45px;
  background-color: rgb(139,69,19);
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Ubuntu',sans-serif;
}

input[type="submit'] a.hover {
  background-color: rgb(124,61,17);
}