.subhead{
margin: 1vmin;
background-color: #eeedea;
font-style: italic;
padding: 1vh 1vw;
text-align: center;
border-radius: 2ex;
font-size: 3vmin;
}
#photos ol,#photos ul {
margin: 0 16vw;
}
p>a,li>a{
color:red;
}
#info {
text-align: center;
}
#info picture, #info img {
border-radius:3ex;
max-width: 80vw;
max-height: 80vh;
}
#cards {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: baseline;
background-color: #eeedea;
font-size: 3vmin;
}
#cards a {
border-right: 1px solid white;
margin: 0;
text-align: center;
place-self: start;
border-top: 1px solid white;
padding: 4ex 1em 1ex 1em;
}
#cards img {
max-width: 40vw;
border-radius: 2ex;
max-height: 60vh;
margin: 1vh 1vw;
}
#cards h3 {
font-size: 4vmin;
}
body{
margin:0;
padding:0;
}
section{
border-bottom: 1px solid #d4d2ce;
padding-top: 11vh;
margin: 4vh 2vw 0 2vw;
}
#photos {
padding-top: 0;
margin-top: 0;
text-align: center;
}
picture {
display: block;
margin: auto;
text-align: center;
}
picture img {
max-width: 100vw;
max-height: 100vh;
}
a {
text-decoration: none;
color: black;
}
.totop {
margin: 7vh auto 0 auto !important;
text-align: center;
background-color: #eeede9;
width: 16ex;
padding: 1vmin 0;
border-radius: 10ex 10ex 0 0;
border: 1px solid floralwhite;
}
#order {
background-color: #eeede9;
margin: 0;
}
#order div {
text-align: center;
}
#order span::before {
content: '$';
}
#prcng {
width: 12em;
padding: 0 4em 0 0;
margin: 2ex auto;
}
#prcng div {
text-align: right;
}
.product {
width: 10em;
padding: 0 3em 0 0;
margin: 2ex auto;
}
.product div {
text-align: right;
}
#sale {
font-weight: bold;
}
#regPrice {
color: darkgray;
}
#savings {
color: crimson;
}
#salePrice {
color: black;
font-weight: bold;
}
#order-button {
text-align: center;
background-color: #eede5d;
width: 14em !important;
padding: 1ex;
border-radius: 2em;
margin: 1vh 2vw;
font-weight: bold;
border: 2px solid #ebbb00;
display: inline-block;
}
#shippingpolicy {
color: #635468;
font-weight: bold;
}
#footerlinks {
text-align: center;
background-color: #a5b3bf;
padding: 3vh 0 2vh 0;
}
#footerlinks a {
margin: 1ex 1em;
display: inline-block;
background-color: #eeedea;
padding: 1ex 1em;
border-radius: 10ex;
vertical-align: middle;
}
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
z-index: 0;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}
@media only screen and (max-device-width : 767px){
#logo {
width: 44vw;
height: auto;
max-height: 12vh;
}
#amz{
display:none;
}
#topnav {
overflow: hidden;
position: relative;
background-color: #396d7f;
color: black;
font-weight:bold;
text-align: center;
z-index: 5;
}
#topnav a {
padding: 0;
font-size: 5vmin;
display: block;
}
#topnav a.menubars {
display: block;
}
#topnav svg {
width: 10vw;
height: 10vw;
position: absolute;
top: 2vmin;
left: 5px;
max-height: 10vh;
}
#mtopLinks {
display: none;
background: #134054;
}
#topnav #mtopLinks a {
color: white;
padding: 1vh 0;
}
#subnav {
position: -webkit-sticky;
position: sticky;
top:0px;
background-color: black;
color: white;
font-weight:bold;
text-align: center;
z-index: 5;
}
#subnav a {
color: white;
}
#subnav span {
padding: 1.5vh 0;
text-decoration: none;
font-size: 5vmin;
display: block;
}
#subnav a.menubars {
display: block;
text-decoration: none;
}
#subnav svg {
width: 10vw;
height: 10vw;
position: absolute;
top: 1.5vmin;
right: 2vw;
max-height: 10vh;
}
#subnav #msubLinks {
display: none;
background: #0f3c50;
}
#subnav #msubLinks a {
color: white;
padding: 1vh 0;
text-decoration: none;
font-size: 5vmin;
display: block;
}
#credits {
background: #134054;
color: white;
text-align: center;
padding: 2vmin;
}
}
@media only screen and (min-device-width: 768px){
#topnav {
overflow: hidden;
position: relative;
background-color: #396d7f;
color: black;
font-weight: bold;
text-align: left;
z-index: 5;
}
#topnav a {
padding: 0;
text-decoration: none;
font-size: 3vw;
color: black;
}
#logo {
width: 20vw;
height: auto;
max-width: 200px;
}
#amz{
display: inline-block;
font-size: 1.7vw;
color: #ffe835;
text-align: center;
width: 50%;
vertical-align: text-top;
font-style: oblique;
margin: 0 7%;
}
#topnav svg {
display: none;
}
#mtopLinks {
background: #134054;
padding: 1ex 0;
font-size: 1em;
text-align: center;
}
#mtopLinks a {
color: white;
padding: 0 0.5em 0 0.5em;
font-size: 1em;
}
#subnav {
position: -webkit-sticky;
position: sticky;
top:0px;
background-color: black;
color: white;
font-weight:bold;
text-align: center;
max-height: 500px;
z-index: 5;
}
#subnav a {
color: white;
text-decoration: none;
}
#subnav span {
padding: 1ex;
font-size: 1.5em;
display: block;
max-height: 500px;
}
#subnav a.menubars {
display: block;
text-decoration: none;
}
#subnav svg {
display: none;
}
#subnav #msubLinks {
padding: 1ex 0;
background: #0f3c50;
}
#subnav #msubLinks a {
color: white;
text-decoration: none;
padding: 0 0.5em 0 0.5em;
font-size: 1em;
}
section {
font-size: 1.5em;
}
section p {
margin: 2vh 10vw;
}
#credits {
background: #134054;
color: white;
text-align: center;
padding: 2vmin;
}
}