@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; }