@keyframes drop-in {
     from {
         transform: rotate(-360deg) translateY(-100%);
         opacity: 0;
    }
     to {
         transform: rotate(0deg) translateY(0%);
         opacity: 1;
    }
}
 .box {
     animation: drop-in 1000ms;
}

 @keyframes slideInFromLeft {
     0% {
         transform: translateX(-100%);
    }
     100% {
         transform: translateX(0);
    }
}
 @keyframes slideInFromRight {
     100% {
         transform: translateX(0);
    }
     0% {
         transform: translateX(100%);
    }
}
 @keyframes slideInFromTop {
     0% {
         transform: translatey(-100%);
    }
     100% {
         transform: translatey(0);
    }
}




    a:link {
      color: #996600
    }
    
    /* visited link */
    a:visited {
      color: #996600
    }
    
    /* mouse over link */
    a:hover {
      color: #996600
    }
 input{
     font-size : 16px;
}
 input[type=text], select, textarea {
     width: 100%;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
     resize: vertical;
}
 label {
     padding: 12px 12px 12px 0;
     display: inline-block;
}
 input[type=submit] {
     background-color: #9ed2ff;
     color: white;
     padding: 8px 14px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     float: left;
}
 input[type=submit]:hover {
     background-color: #9ed2ff;
}
 .container {
     border-radius: 5px;
     padding: 10px;
}
 .col-25 {
     float: left;
     width: 25%;
     margin-top: 6px;
}
 .col-75 {
     float: left;
     width: 75%;
     margin-top: 6px;
     padding: 8px;
}
/* Clear floats after the columns */
 .row:after {
     content: "";
     display: table;
     clear: both;
}
/* 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) {
     .col-25, .col-75, input[type=submit] {
         width: 100%;
         margin-top: 0;
    }
}

    h1, h2 {
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-weight: 500;
      line-height: 1.1;
      color: #996600;
      display: block;
        
      margin-top: 6px;
      margin-bottom: 7px;
      margin-left: 0;
      margin-right: 0;
    }


 div {
     margin-bottom: 10px;
}
 label {
     display: inline-block;
     width: 150px;
     text-align: right;
}
 html, body {
     margin: 0;
     height: 100%;
}

 .top-nav {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     background-color: #f79621;
         background : linear-gradient(to bottom, #f79621 0%, #f9c667 99%);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     color: #FFF;
     height: 70px;
     padding: 1em;
     font-weight: bold;
     font-size : 22px;
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    /*position: fixed;
     width:100%;
    */
}
 .menu {
     
     display: flex;
     flex-direction: row;
     list-style-type: none;
     margin: 0;
     padding: 0;
}
 .menu > li {
     margin: 0 1rem;
     overflow: hidden;
     float : left;
     font-weight: bold;
     font-size : 22px;
     padding-top: 5px;
     padding-right: 3px;
     padding-bottom: 5px;
     padding-left: 5px;
}
 .menu li:hover {
     background-color: #f9c667;
     border-radius: 10px;
     padding-top: 5px;
     padding-right: 3px;
     padding-bottom: 5px;
     padding-left: 5px;
}
 .menu-button-container {
     display: none;
     height: 100%;
     width: 30px;
     cursor: pointer;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 #menu-toggle {
     display: none;
}
 .menu-button, .menu-button::before, .menu-button::after {
     display: block;
     background-color: #fff;
     position: absolute;
     height: 4px;
     width: 30px;
}
 .menu-button::before {
     content: '';
     margin-top: -8px;
}
 .menu-button::after {
     content: '';
     margin-top: 8px;
}
 #menu-toggle:checked + .menu-button-container .menu-button::before {
     margin-top: 0px;
     transform: rotate(405deg);
}
 #menu-toggle:checked + .menu-button-container .menu-button {
     background: rgba(255, 255, 255, 0);
}
 #menu-toggle:checked + .menu-button-container .menu-button::after {
     margin-top: 0px;
     transform: rotate(-405deg);
}
 @media (max-width: 700px) {
     .hidden-mobile {
         display: none;
    }
     .menu-button-container {
         display: flex;
    }
     .menu {
         position: absolute;
         top: 0;
         margin-top: 50px;
         left: 0;
         flex-direction: column;
         width: 100%;
         justify-content: center;
         align-items: center;
         z-index: 1;
    }
     #menu-toggle ~ .menu li {
         height: 0;
         margin: 0;
         padding: 0;
         border: 0;
         transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    }
     #menu-toggle:checked ~ .menu li {
         border: 1px solid #333;
         height: 2.5em;
         padding: 0.5em;
         transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    }
     .menu > li {
         display: flex;
         justify-content: center;
         margin: 0;
         padding: 0.5em 0;
         width: 100%;
         color: white;
         background-color: #f7c221;
         font-weight: bold;
         font-size : 22px;
    }
     .menu > li:not(:last-child) {
         border-bottom: 1px solid #444;
    }
}
 #floatbox{
     animation: .2s ease-out 0s 1 slideInFromTop;
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
     margin: 0px 5px 5px 5px;
     height: 130px;
     border-radius: 1rem;
     background-color: #faeed4;
     padding-top: 15px;
     padding-right: 15px;
     padding-bottom: 15px;
     padding-left: 15px;
     /*position: fixed;*/
}
 #searchbox{
     animation: .1s ease-out 0s 1 slideInFromLeft;
     padding: 30px;
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
     border-radius: 1rem;
     background-color: #faeed4;
     padding-top: 15px;
     padding-right: 15px;
     padding-bottom: 15px;
     padding-left: 15px;
}


 #blog {
    margin : auto;
    border : 5px;
    padding : 3px;
    font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height : 1.6;
    color : #333;
    max-width: 900px;
}


 #cart {
     font-family:futura-pt,sans-serif!important;
     border-collapse: collapse;
     width: 100%;
}
 #cart td, #cart th {
     border: 1px solid #ddd;
     padding: 8px;
}
 #cart tr:nth-child(even){
    background-color: #f0f8fc;
}
 #cart tr:hover {
    background-color: #c1e5f7;
}
 #cart th {
     padding-top: 12px;
     padding-bottom: 12px;
     text-align: left;
     background-color: #04AA6D;
     color: white;
}
/* The Modal (background) */
 .modal {
     display: none;
    /* Hidden by default */
     position: fixed;
    /* Stay in place */
     z-index: 1;
    /* Sit on top */
     padding-top: 100px;
    /* Location of the box */
     left: 0;
     top: 0;
     width: 100%;
    /* Full width */
     height: 100%;
    /* Full height */
     overflow: auto;
    /* Enable scroll if needed */
     background-color: rgb(0,0,0);
    /* Fallback color */
     background-color: rgba(0,0,0,0.4);
    /* Black w/ opacity */
}
/* Modal Content */
 .modal-content {
     width: 340px;
     height: 170px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 2em;
     background: white;
     border-radius: 1rem;
}
    img {
    
        max-width: 90%;
    
        height: auto;
    
        class="img-responsive";
    
    }
    
    blockquote {
        font-size: 14px;
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}