@charset "UTF-8";
:root {
    --widthMin: 800;
    --width1: 1200;
}
body {
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    padding:0;
    margin:0;
}
#introBody {
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    padding:0;
    margin:0;
    background-image: linear-gradient(rgba(90,90,90), rgba(10,10,10) );
    background-size: cover;
}
#cardsBody {
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    padding:0;
    margin:0;
    background-image: url(../images/backgroundstarry.jpg);
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-size: cover;
    background-position: center;
}
h1, h2, h3, h4, h5, h6 { color: whitesmoke; }
h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 2.8em;
}
h2 { font-size: 1.9em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.3em; }
p, li, ul {
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    line-height: 1.4;
}
a { font-size: 2.0em; }
.fullWide {
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
}
.subtitlebox {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.subtitlebox img {
    vertical-align: text-bottom;
}
footer {
    background-color: rgba(120,120,120,0.9);
    margin: 0 auto;
    padding: 0.1em 0em;
    border: 0;
    text-align: center;
}
footer p,a {
    font-family: Arial, Sans-serif;
    color: rgb(200,200,200);
    line-height: 1em;
}
.divider {
    width: 100%;
    height: 1.9em;
    background-color: rgb(245,245,245);
    border-radius: 0.5em;
    border-style: solid;
    border-width: 0.1em;
    border-color: lightgrey;
}
.menuBar {
    display: block;
    margin: auto;
    height: 2.3em;
    padding: 0;
    padding-right: 0em;
    border: 0;
    background-color: rgba(50,50,50,0.9);
}
.menuBar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.8em;
}
.menuBar li {
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.3em;
}
.menuBar li a {
    display: block;
    margin: 0;
    padding: 0;
    padding: 0.7em 1.5em;
    border: 0;
    color: rgb(170,170,255);
    text-decoration: none;
}
.menuBar li a:hover {
    background-color: rgba(120, 0, 0, 0.7);
    color: whitesmoke;
}
.menubarSel {
    background-color: rgba(90,70,70,0.9);
}
#cart { padding-right: 0.8em; }
.menuBar form {
    float: right;
    height: 2.3em;
    padding: .6em 0;
}
.topBannerBack {
    width: 100%;
    margin: 0;
    border: 0;
}
#introBannerBack {
    /* background-image: linear-gradient(170deg, rgb(125,30,50), rgb(200,90,110), rgb(125,30,50)); */
    background: url("../images/BannerIntro.jpg") no-repeat center top;
}
#cardsBannerBack {
    background: #000000 url("../images/bannerimage.jpg") no-repeat center top;
}
.topBanner { margin: auto; }
.topBannerInfo {
    margin: auto;
    padding: 0 5%;
    margin-bottom: 0px;
    font-weight: normal;
    text-align: left;
}
.topBannerInfo h1 {
    font-size: 3.8em; font-weight: normal;
    color: rgb(200,200,200);
    font-weight: bold;
}
.topBannerInfo p { font-size: 1.3em; font-weight: normal; }
.donation {
    color: rgb(200,200,200);
}
.mainPage {
    margin: auto;
    border: 0;
    padding: 40px 0 0 0;
}
    .bannerHeading {
        background-color: rgba(150, 0, 0, 0.7);
        width: 98%;
        margin: 10px auto 20px;
        padding: 0.01em 0;
        border-radius: 1.0em;
        text-align: center;
        font-family: Arial, sans-serif;
    }
.bannerHeading h2 {
    font-size: 1.7em;
    font-weight: normal;
}
.instructions {
    width: 98%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    margin: 0em auto 20px;
    padding: 0.4em 0;
    text-align: center;
    p {
        font-size: 1.2em;
    }
    a { color: rgb(255,210,0); }
}
.postage {
    background-color: rgba(0, 0, 0, 0.6);
    width: 98%;
    max-width: 800px;
    margin: 0em auto 20px;
    padding: 0.4em 0;
    border-radius: 1.0em;
    text-align: center;
    font-family: Arial, sans-serif;
}
.postageInfo {
    display: inline-block;
    vertical-align: bottom;
    width: 40%;
}
.postage h2 {
    font-size: 1.1em;
    margin: 0.2em;
}
.postage p {
    font-size: 1.1em;
    color: rgb(200,200,200);
    margin: 0;
}
.mainSectionIntro {
    display: inline-block;
    vertical-align: top;
    padding: 0 3%;
    border-radius: 1.5em;
    border: 0;
}
.mainSectionIntro h1 {
    font-family: Arial, sans-serif;
    font-size: 2.2em;
}
.mainSectionIntro h6 {
    font-size: 1.2em;
    margin-top: -1em;
    margin-bottom: 0.8em;
    font-weight: normal;
}
.mainSectionIntro p {
    text-align: center;
}
/* NOT USED - Background for intro block headings.
.introHeading {
    width: 107%;
    margin-left: -7%;
    padding: 0.02em 0em 0.02em 7%;
    background: white;
} */
#introCards {
    background-image: url(../images/backgroundstarry.jpg);
    background-size: cover;
    background-position: center;
}
#introCards h1 { color: rgb(0,130,255); }
#introCards h6 { color: rgb(90,170,255); }
#introBanners h6 { color: rgb(255,190,80); }
#introBanners {
    background-image: url(../images/BannersBackground.jpg);
    background-size: cover;
    background-position: center;
}
#introBanners h1 { color: rgb(255,160,25); }
#introBanners h6 { color: rgb(255,200,85); }
#introBanners p { color: darkgrey; }
#CardsIntroPic {
    width: 99%;
    padding: 0.3%;
    margin-left: auto;
    margin-right: auto;
}
#CardsIntroPic:hover {
    width: 100%;
    padding: 0%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 0 8px white);
}
#BannersIntroPic {
    width: 99%;
    padding: 0.3%;
    margin-left: auto;
    margin-right: auto;
}
#BannersIntroPic:hover {
    width: 100%;
    padding: 0%;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 0 8px rgba(0,0,255,0.6));
}
#newItem {
    width: 85%;
    margin: auto;
    background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.5) );
    padding: 10px 5%;
    margin-bottom: 20px;
    border-radius: 0.5em;
    overflow: auto;
}
#newItem img {
    max-width: 40%;
    margin: 1em 2% 1em 0;
    float: left;
}
#newItem h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.8em;
}
#newItem h2 {
    font-size: 1.4em;
    font-weight: normal;
    font-style: italic;
}
#newItem p {
    font-size: 1.2em;
}
.productInfo {
    display: inline-block;
    vertical-align: top;
    padding: 10px 0;
    line-height: 1.0;
    text-align: center;
}
.productInfo img {
    width: 96%;
    margin: auto;
}
.productInfo h3 {
    font-size: 1.6em;
    font-weight: normal;
    color: rgb(255,185,71)
}
.price {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.2em;
    color: rgb(200,200,0);
    margin: 0;
}
.productContent {
    font-family: "Times New Roman", Times, serif;
    color: whitesmoke;
    font-size: 1.2em;
    margin: 0;
}
/* For very small screens */
@media only screen and (max-width: 500px) {
    .topBannerInfo h1 { font-size: 2.4em; }
    .topBannerInfo p { font-size: 1.0em; }
    .bannerHeading { padding: 0.002em; }
    .bannerHeading h2 { font-size: 1.2em; }
    .footer { width: 98; }
    .footer p,a { font-size: 0.8em; }
    .menuBar { width: 100%; }
    .menuBar ul { display: none; }
    .topBanner { width: 100; padding: 10px 0; }
    .mainPage { width: 100%; }
    .postage h2 { font-size: 0.8em; }
    .postage p { font-size: 0.8em; }
    .productInfo {
        width: 48%;
        padding: 0px 0;
        margin: 0 1%;
    }
    #newItem {
        h1 { font-size: 1.2em; }
        h2 { font-size: 1.0em; }
        p { font-size: 0.9em; }
        img {
            max-width: 100%;
            width: 100%;
        }
    }
    .price { font-size: 1.0em; }
    #payments { transform: scale(80%); }
}

/* For small screens */
@media only screen and (min-width: 501px) and (max-width: 800px) {
    footer { width: 100%; }
    footer p,a { font-size: 0.95em; }
    .menuBar { width: 100%; }
    .menuBar ul { display: none; }
    .topBanner { width: 100; padding: 10px 0; }
    .mainPage { width: 100%; }
    .productInfo {
        width: 48%;
        margin: 20px 1%;
    }
    .mainSectionIntro {
        width: 88%;
        margin: 20px 3%;
    }
    #newItem {
        h1 { font-size: 1.3em; }
        h2 { font-size: 1.1em; }
        p { font-size: 1.0em; }
        img { max-width: 60%; }
    }
}

/* For medium screens */
@media only screen and (min-width: 801px) and (max-width: 1100px) {
    footer {
        width: 100%;
    }
    footer p,a { font-size: 0.95em; }
    .menuBar {
        width: 100%;
    }
    .topBanner {
        width: 100%;
        padding: 10px 0;
    }
    .mainPage {
        width: 100%;
    }
    .productInfo {
        width: 31%;
        margin: 20px 1%;
    }
    .mainSectionIntro { width: 39%; }
    #introBanners { margin: 10px 2% 10px 3%; }
    #introCards { margin: 10px 3% 10px 2%; }
    #newItem {
        img { max-width: 50%; }
    }
}

/* For large screens */
@media only screen and (min-width: 1101px) {
    footer {
        max-width: 1400px;
    }
    footer p,a { font-size: 0.95em; }
    .menuBar {
        max-width: 1400px;
    }
    .topBanner {
        max-width: 1400px;
        padding: 10px 0;
    }
    .mainPage {
        max-width: 1400px;
    }
    .mainSectionIntro { width: 39%; }
    #introBanners { margin: 10px 2% 10px 3%; }
    #introCards { margin: 10px 3% 10px 2%; }
    .productInfo {
        width: 23%;
        margin: 20px 1%;
    }
}