body {
    margin: 0;
    background-color: #F9F2EB;
}

a {
    text-decoration: none;
    outline: none;
}

/*a:link {
    border: 0px;
}

a:visited {
    border: 0px;
}

a:active {
    border: 0px;
}*/

img {
    border: 0px;
}

@font-face {
    font-family: A_a_a;
    src: url('woff/a_a_a-regular-webfont.woff') format('woff');
}

@font-face {
    font-family: Journal;
    src: url('woff/journal-webfont.woff') format('woff');
}

@font-face {
    font-family: KLM;
    src: url('woff/klm-light-webfont.woff') format('woff');
}

@font-face {
    font-family: ClearSans;
    src: url('woff/ClearSans-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: ClearSans;
    src: url('woff/ClearSans-Bold-webfont.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: ClearSans;
    src: url('woff/ClearSans-Italic-webfont.woff') format('woff');
    font-style: italic;
}

header {
    margin: 0vh 0vw 6vh 0vh;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}


#content {
    display: block;
    width: 100%;
    font-family: ClearSans, sans-serif;
}

.product-title {
    position: relative;
    width: 100%;
    font-family: A_a_a, sans-serif;
    font-size: 4vh;
    text-align: center;
    margin: 2vh 0vw 4vh 0vw;
    color: #484848;
}

.generic-holder {
    width: 80%;
    text-align: center;
    color: #444444;
    margin: 4vh auto 2vh auto;
}

.top-shadow {
    position: relative;
    width: 100%;
    height: 14vh;
    box-shadow: 0px -20px 50px 10px #4E4E4E inset; 
}

.product-image {
    display: block;
    width: 100%;
    /*border-radius: 2.4vw 2.4vw 2.4vw 2.4vw;*/
    margin: 2.4vw 0vw 2.4vw 0vw;
}

.product-data {
    width: 84%;
    /*border-radius: 2.4vw 2.4vw 2.4vw 2.4vw;*/
    margin: 2.4vh auto 2.4vh auto;
    font-family: ClearSans, sans-serif;
    font-size: 2vh;
    color: #444444;
}

.product-data div {
    margin: .6vh 0vh .6vh 0vh;
}

/*Begin Main Page*/

.popular-title {
    position: relative;
    width: 100%;
    font-family: A_a_a, sans-serif;
    font-size: 4vh;
    text-align: center;
    margin: 3vh 0vw 1vh 0vw;
    color: #484848;
}

.popular-link {
    position: relative;
    /*width: 100%;*/
    font-family: A_a_a, sans-serif;
    font-size: 2vh;
    text-align: center;
    margin: 2vh 0vw 2vh 0vw;
    color: #484848;
    border: .2vh solid #484848;
    border-radius: .6vh;
    padding: .2vh 1vh .2vh 1vh;
}

.popular-holder {
    width: 100%;
    background-color: #F2E3D3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*padding: 2.8vh 0vh 2.8vh 0vh*/
}

.popular-item {
    width: 22vw;
    height: 13.6vw;
    /*background-color: #222222;*/
    margin: 3vh 2vh 3vh 2vh;
    border-radius: .6vh .6vh .6vh .6vh;
    overflow: hidden;
}

.popular-item img {
    display: block;
    width: 22vw;
    height: 13.6vw;
    /*border-radius: .6vh .6vh .6vh .6vh;*/
}

.seasonal-holder {
    width: 100%;
    /*height: 20vh;*/
    margin: 4vh 0vw 4vh 0vw;
    /*background-image: url('images/seasonal.svg');*/
    /*min-height: 500px;*/
    /*background-attachment: fixed;*/
    /*background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    background-color: #1C2044;
    padding: 1vh 0vw 1vh 0vw;
}

.seasonal-holder img {
    position: relative;
    display: block;
    margin: 1vh auto 1vh auto;
    width: 48vw;
}

/*End Main Page*/


/*Begin Browse Page*/

#category-holder {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.category-item {
    display: block;
    width: 28vw;
    margin: 2vh 2vh 2vh 2vh;
    padding: .8vh 1vh .8vh 1vh;
    border-radius: .6vh .6vh .6vh .6vh;
    background-color: #F8F8F8;
    border: 1px solid #CCCCCC;
    font-family: A_a_a, sans-serif;
    font-size: 2.8vh;
    line-height: 2.8vh;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #444444;
}

.spacer-20 {
    display: block;
    width: 100%;
    height: 20vh;
}

#subcategories {
    margin: 0vh auto 0vh auto;
}

#subcategories {
    display: block;
    /*border: 2px solid #003399;*/
    /*color: #003399;*/
    padding: 1vh 2vw 1vh 2vw;
    margin: 2vh auto 2vh auto;
    text-align: center;
    /*border-radius: .8vw .8vw .8vw .8vw;*/
    text-decoration: none;
    cursor: pointer;
    /*list-style: none;*/
}

.subcategory-holder {
    width: 100%;
    background-color: #F2E3D3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*padding: 2.8vh 0vh 2.8vh 0vh*/
}



/*End Browse Page*/


/*Begin Search Page*/

#item-holder {
    /*width: 90%;*/
    margin: 4vh auto 2vh auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*justify-content: space-around;*/
    color: #444444;
}

.item-box {
    display: block;
    width: 20vw;
    margin: 2vh 2vh 2vh 2vh;
    /*height: 30vw;*/
    border-radius: .6vh .6vh .6vh .6vh;
    background-color: #F8F8F8;
    border: 1px solid #CCCCCC;
}

.item-box-title {
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
    width: 80%;
    height: 5vw;
    margin: 0vh auto 0vh auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2vh;
    line-height: 5vw;
    color: #444444;
    text-align: center;
}

/*.item-box-title span {
    display: inline-block;
    width: 80%;
    vertical-align: middle;
    line-height: 2.5vh;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2vh;
    max-height: 5vw;
}*/

.item-box-image {
    display: block;
    width: 20vw;
    height: 20vw;
}

.item-box-price {
    width: 80%;
    height: 5vw;
    margin: 0vh auto 0vh auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2vh;
    text-align: center;
    line-height: 5vw;
    color: #444444;
    font-size: 3.6vh;
    font-family: KLM, sans-serif;
}

/*End Search Page*/



/*Begin Shopping Cart*/

#cart-holder {
    width: 80%;
    margin: 2vh auto 2vh auto;
    font-family: ClearSans, sans-serif;
    font-size: 2vh;
    color: #444444;
    text-align: center;
}

#cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0vh 0vw .6vh 0vw;
}

#cart-table td {
    border: .2vh solid #CCCCCC;
}

#cart-table thead {
    font-weight: bold;
}

.cell-holder {
    text-align: center;
    margin: 0vh auto 2vh auto;
}

.cell {
    display: inline-block;
    /*width: 320px;*/
    /*margin: 12px 12px 12px 12px;*/
    vertical-align: middle;
}

.radio {
    display: none;
}

.cell label {
    position: relative;
    display: block;
    margin: 3vh auto 3vh auto;
    border: .3vh solid #FFFFFF;
    border-radius: .8vh .8vh .8vh .8vh;
    font-size: 2vh;
    line-height: 2.8vh;
    /*width: 16vw;*/
    height: 2.8vh;
    padding: .8vh 1vw .8vh 1vw;
    text-align: center;
    font-family: ClearSans, sans-serif;
    font-weight: bold;
    box-sizing: content-box;
    cursor: pointer;
}


.radio:empty + label {
    background-color: #84A5E8;
    color: #FFFFFF;
}

input.radio:checked + label {
    background-color: #5DD060;
    /*color: #242424;*/
}

.cell .cell-button {
    position: relative;
    display: block;
    margin: 3vh auto 3vh auto;
    border: .3vh solid #FFFFFF;
    border-radius: .8vh .8vh .8vh .8vh;
    font-size: 2vh;
    line-height: 2.8vh;
    /*width: 16vw;*/
    height: 2.8vh;
    padding: .8vh 1vw .8vh 1vw;
    text-align: center;
    font-family: ClearSans, sans-serif;
    font-weight: bold;
    box-sizing: content-box;
    cursor: pointer;
    background-color: #84A5E8;
    color: #FFFFFF;
}

.cell .cell-button:active {
    background-color: #5DD060;
}

.line-holder {
    width: 80%;
    margin: 2vh auto 2vh auto;
    font-family: ClearSans, sans-serif;
    font-size: 2vh;
    /*color: #444444;*/
    /*text-align: center;*/
}

.line-holder table {
    width: 100%;
}

.line {
    margin: 1vh auto 1vh auto;
}

.element {
    display: inline-block;
    width: 40%;
}

.line-left {
}

.line-right {
    border-bottom: .2vh solid #444444;
}

.line-holder table tr td input[type='text'] {
    border: 0;
    background-color: transparent;
}

.line-holder table tr td input[type='text']:active {
    background-color: #DDDDDD;
}

#cust-info {
    display: block;
    width: 50%;
    height: 20vh;
    margin: 2vh auto 2vh auto;
    /*background-color: #DDDDDD;*/
    font-family: ClearSans, sans-serif;
    font-size: 2vh;
    color: #444444;
}

#cust-info::placeholder {
    font-size: 2vh;
    color: #444444;
}

#cust-info:focus {
    background-color: #FFFFFF
}

.cart-button {
    display: inline-block;
    font-size: 2vh;
    padding: .8vh .8vw .8vh .8vw;
}

.flex {
    display: flex;
    width: 80%;
    height: 20vh;
    justify-content: center;
    align-items: flex-start;
    color: #444444;
    margin: 4vh auto 0vh auto;
}

.cart-info-box {
    width: 40%;
    /*border: 1px solid #000000;*/
}

.cart-info-spacer {
    width: 20%;
}

#checkout-holder {
    width: 80%;
    margin: 2vh auto 2vh auto;
    font-family: ClearSans, sans-serif;
    font-size: 2vh;
    color: #444444;
    /*text-align: center;*/
}

#checkout-table {
    width: 100%;
    border-collapse: collapse;
}

#checkout-table td {
    /*border: .2vh solid #444444;*/
}

/*#checkout-table .t1 {
    width: 25%;
}

#checkout-table .t2 {
    width: 45%;
}

#checkout-table .t3 {
    width: 20%;
    text-align: right;
}

#checkout-table .t4 {
    width: 10%;
    text-align: right;
}*/

#cart-total-table {
    width: 100%;
}

#cart-total-table .t1 {
    width: 66%;
    text-align: right;
}

#cart-total-table .t2 {
    width: 34%;
    text-align: right;
}

#crypto-image {
    margin: 2vh auto 2vh auto;
}

#crypto-image img {
    display: block;
    width: 28vw;
    height: 28vw;
    margin: 0vh auto 0vh auto;
}

/*#crypto-adr {
    margin: 2vh auto 0vh auto;
    text-align: center;
    font-size: 1.6vw;
}*/



/*End Shopping Cart*/


/*Begin Portrait Mode*/

@media all and (orientation: portrait) {
    
    #page {
        position: relative;
        width: 100vw;
        margin: 0vw 0vw 20vh 0vw;
    }
    
    #logo {
        display: block;
        width: 12vh;
        position: relative;
        margin: 0vw auto 0vw auto;
    }
    
    #logo img {
        display: block;
        width: 12vh;
        /*position: relative;
        margin: 0vw auto 0vw auto;*/
    }
    
    #static-menu {
        display: block;
        position: fixed;
        bottom: 0vh;
        left: 0vw;
        width: 100vw;
        height: 20vh;
        min-height: 20vh;
        background-color: #84A5E8;
        background-image: url('images/static-bg.svg');
        background-size: auto 5.4vh;
        background-repeat: repeat;
        font-size: 0px;
        text-align: center;
        z-index: 686;
    }
    
    #search-terms {
        display: block;
        position: absolute;
        left: 4vw;
        bottom: 14vh;
        border: 0px;
        width: 29vw;
        height: 2.8vh;
        font-size: 2.2vh;
        font-family: ClearSans, sans-serif;
        padding: .8vh .8vw .8vh .8vw;
        box-sizing: content-box;
    }
    
    .static-button {
        /*position: relative;*/
        display: block;
        /*margin: .8vh .8vh .8vh .8vh;*/
        border: .2vh solid #FFFFFF;
        border-radius: .8vh .8vh .8vh .8vh;
        font-size: 2vh;
        line-height: 2.8vh;
        width: 30vw;
        height: 2.8vh;
        background-color: #84A5E8;
        color: #FFFFFF;
        padding: .8vh 0vw .8vh 0vw;
        text-align: center;
        font-family: ClearSans, sans-serif;
        font-weight: bold;
        box-sizing: content-box;
        cursor: pointer;
    }
    
    #search {
        position: absolute;
        left: 4vw;
        bottom: 8vh;
    }
    
    #browse {
        position: absolute;
        left: 4vw;
        bottom: 2vh;
    }
    
    #qty {
        position: absolute;
        right: 4vw;
        bottom: 14vh;
    }
    
    #buy-button {
        position: absolute;
        right: 4vw;
        bottom: 8vh;
        background-color: #5DD060;
    }
    
    #cart {
        position: absolute;
        right: 4vw;
        bottom: 2vh;
    }
    
    #tag-holder {
        position: relative;
        display: inline-block;
        /*margin: 4vh 0vw 3vh 0vw;*/
        width: 14vh;
        height: 20vh;
        /*background: url('images/tag.svg') no-repeat;
        background-size: contain;*/
    }
    
    #tag {
        position: absolute;
        bottom: 0vh;
        right: 0vw;
        display: block;
        /*margin: 3vh -6vw 3vh 0vw;*/
        width: 14vh;
        height: 24vh;
        background: url('images/tag-vert.svg') no-repeat;
        background-size: contain;
    }
    
    #price {
        position: absolute;
        bottom: 3vh;
        right: 1vw;
        display: block;
        width: 14vh;
        /*height: 14vw;*/
        line-height: 14vh;
        text-align: center;
        /*font-size: 5.6vw;*/
        /*font-size: 4.8vh;*/
        font-size: 4.2vh;
        /*font-family: Journal, sans-serif;*/
        font-family: KLM, sans-serif;
    }
    
    #crypto-adr {
        margin: 2vh auto 0vh auto;
        text-align: center;
        font-size: 1.6vw;
    }
    
    footer {
        width: 100%;
        /*height: 16vh;*/
        background-color: #444444;
        margin: 48vh 0vw 0vh 0vw;
        padding: 4vh 0vw 4vh 0vw;
    }
    
    #foot-hold {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .foot-item {
        display: block;
        width: 16vw;
        margin: 2vh 2vh 2vh 2vh;
        padding: .8vh 1vh .8vh 1vh;
        border-radius: .6vh .6vh .6vh .6vh;
        background-color: transparent;
        border: 1px solid #2C9FD1;
        font-family: A_a_a, sans-serif;
        font-size: 2vh;
        line-height: 2vh;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #2C9FD1;
    }
    
}

/*End Portrait Mode*/


/*Begin Landscape Mode*/

@media all and (orientation: landscape) {
    
    #page {
        position: relative;
        /*width: 80vw;*/
        margin: 0vw 20vw 0vw 0vw;
    }
    
    #logo {
        display: block;
        width: 12vh;
        position: relative;
        margin: 0vw auto 0vw auto;
    }
    
    #logo img {
        display: block;
        width: 12vh;
        /*position: relative;
        margin: 0vw auto 0vw auto;*/
    }
    
    #static-menu {
        position: fixed;
        top: 0px;
        right: 0px;
        width: 20vw;
        height: 100vh;
        background-color: #84A5E8;
        background-image: url('images/static-bg.svg');
        background-size: 2.8vw auto;
        background-repeat: repeat;
        z-index: 686;
    }
    
    #search-terms {
        border: 0px;
        width: 100%;
        /*height: 2.8vh;*/
        font-size: 2.2vh;
        font-family: ClearSans, sans-serif;
        padding: .6vh .8vw .6vh .8vw;
    }
    
    .static-button {
        position: relative;
        display: block;
        margin: 3vh auto 3vh auto;
        border: .2vh solid #FFFFFF;
        border-radius: .8vh .8vh .8vh .8vh;
        font-size: 2vh;
        line-height: 2.8vh;
        width: 16vw;
        height: 2.8vh;
        background-color: #84A5E8;
        color: #FFFFFF;
        padding: .8vh 0vw .8vh 0vw;
        text-align: center;
        font-family: ClearSans, sans-serif;
        font-weight: bold;
        box-sizing: content-box;
        cursor: pointer;
    }
    
    #buy-button {
        background-color: #5DD060;
    }
    
    /*#qty {
        position: relative;
        display: block;
        margin: 3vh auto 3vh auto;
        border: .4vh solid #FFFFFF;
        border-radius: .8vh .8vh .8vh .8vh;
        font-size: 2vh;
        line-height: 2.8vh;
        width: 16vw;
        height: 2.8vh;
        background-color: #84A5E8;
        color: #FFFFFF;
        padding: .8vh 0vw .8vh 0vw;
        text-align: center;
        font-family: sans-serif;
        box-sizing: content-box;
    }*/
    
    #tag-holder {
        position: relative;
        display: block;
        margin: 4vh 0vw 3vh 0vw;
        width: 100%;
        height: 14vw;
        /*background: url('images/tag.svg') no-repeat;
        background-size: contain;*/
    }
    
    #tag {
        position: absolute;
        top: 0vh;
        right: 0vw;
        display: block;
        /*margin: 3vh -6vw 3vh 0vw;*/
        width: 24vw;
        height: 14vw;
        background: url('images/tag.svg') no-repeat;
        background-size: contain;
    }
    
    #price {
        position: absolute;
        top: 0vh;
        right: 1.5vw;
        display: block;
        width: 17vw;
        /*height: 14vw;*/
        line-height: 14vw;
        text-align: center;
        /*font-size: 5.6vh;*/
        font-size: 4.8vw;
        font-family: KLM, sans-serif;
    }
    
    #crypto-adr {
        margin: 2vh auto 0vh auto;
        text-align: center;
        font-size: .8vw;
    }
    
    summary {
        list-style: none;
        cursor: pointer;
    }
    
    footer {
        width: 100%;
        /*height: 16vh;*/
        background-color: #444444;
        margin: 48vh 0vw 0vh 0vw;
        padding: 4vh 0vw 4vh 0vw;
    }
    
    #foot-hold {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .foot-item {
        display: block;
        width: 16vw;
        margin: 2vh 2vh 2vh 2vh;
        padding: .8vh 1vh .8vh 1vh;
        border-radius: .6vh .6vh .6vh .6vh;
        background-color: transparent;
        border: 1px solid #2C9FD1;
        font-family: A_a_a, sans-serif;
        font-size: 2vh;
        line-height: 2vh;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #2C9FD1;
    }
    
}


/*End Landscape Mode*/