html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    margin:0;
    padding: 1rem;
    background: url(../images/2014_cornfield-by-jason-simanek_0275_crop-bkgd.jpg) repeat-x center top #b0c7e0;
    background-size: cover;
    font-family: Arial,sans-serif;
    text-align:left;
    color: #637F48;
}


/* Page Structure */
div.page {
    background-color: #fffcf3;
    box-shadow: 0 1px 4px #AAA;
}
footer {
    margin: 1em auto;
    padding: 2rem 0.5rem;
    background: none;
    border-radius: 0;
	border-top: solid 1px rgba(0,0,0,.4);
}

/* Grid Layout */
div.container {
    display: grid;
    grid-gap: 2rem;
    align-items: center;
    justify-items: center;
    justify-content: center;
}
div.container.cols1 {
    grid-template-columns: 1fr;
}
div.container.cols2 {
    grid-template-columns: 1fr 1fr;
}
div.container.cols3 {
    grid-template-columns: 1fr 1fr 1fr;
}
div.container.cols4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
div.container.cols5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
div.container.cols6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
div.container.cols3 div.colspanBox {
    background-color:#E8E4C4; 
    border-radius:20px;
}
div.container div.item {
    justify-self: center;
    align-self: start;
    width: 100%;
    margin: 0;
    text-align: center;
}
.artist-info div.container div.item {
    align-self: center;
    text-align: left;
}
div.container div.item img {
    width: 100%;
}
figcaption {
    font-style: italic;
}
div.container.header div.item {
    margin-bottom: 0;
}
div.container.above-header div.item {
    margin-bottom: 0;
}
div.container.above-header p {
    margin-bottom: 0;
}
div.container.image-gallery {
    grid-gap: 1rem;
    margin-top: 1rem;
}
nav {
    margin-top: 1rem;
    background: #f6f6f6; 
}
nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 1rem;
}
nav ul li {
    margin: 0;
}
nav ul li a {
    padding: .5rem;
    text-decoration: none;
    border-width: 0 !important;
    line-height: 100%;
}

/* Flexbox Layout */
div.container .container-flex {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.container .container-flex div.item {
    flex: 0 0 auto;
    padding: 0 15px;
}
div.container div.item .container-flex div.item {
    width: 235px;
}
.container-flex.cf1 .item {
    max-width: 100%;
    text-align:center
}

.container-flex.cf2 {
    align-items: center;
    margin:1em 0
}

.container-flex.cf2 .item {
    flex: 1 0 auto;
    width: 50%;
    min-width:300px
}

.container-flex.cf3 .item {
    width: 33.33333%;
    min-width:300px
}

form .container-flex input[type=text], 
form .container-flex input[type=password], 
form .container-flex input[type=email] {
    width: 100%;
    padding: 4px;
} 





table {
    width:100%;
    margin:0 0 20px 0;
    border-collapse:collapse;
    border-style:solid;
    border-color:#C4C1A6;
    border-width:0 0 1px 0;
}
table thead th {
    padding:4px;
    font-size:.8em;
    font-weight:normal;
    line-height:100%;
    background-color:#E8E4C4;
    border-bottom:solid 1px #C4C1A6;
}
table tbody td {
    padding:6px 6px 4px 6px;
    border-style:solid;
    border-color:#C4C1A6;
    border-width:0 0 0 1px;
    font-size:.8em;
    line-height:100%;
}
table tbody tr:first-child td {
    border-top:none;
}
table tbody tr td:first-child {
    border-left:none;
    color:#3773B7;
}
table tfoot td {
    padding:4px;
    background-color:#E8E4C4;
    border-style:solid;
    border-color:#E8E4C4;
    border-width:1px 0 0 0;
    font-size:.8em;
    line-height:120%;
    font-style:italic;
    text-align:center;
}


h1 {
    margin:0 0 10px 0;
    padding:0;
    font-weight: bold;
    font-size:54px;
    line-height:100%;
    text-align:center;
    text-transform: uppercase;
}
h2 {
    margin:2em 0 10px 0;
    padding:0;
    font-size:34px;
    line-height:130%;
    font-weight: bold;
    text-align:center;
    text-transform: uppercase;
}
h3 {
    text-align: center;
}
p, 
ul li,
ol li,
dl dt,
dl dd {
    font-size:16px;
    line-height:150%;
    color: #000;
}
ul li,
ol li,
dl dt,
dl dd {
    text-align: left;
}
p {
    margin:0 0 1.2em 0;
    padding:0;
}
p:last-child {
    margin-bottom: 0;
}
.subhead {
    display:block; 
    margin: .4em 0 0 0;
    font-size: 30px;
    line-height: 100%;
    font-weight: normal;
    color: #2699FB;
}
.block-normal, 
.block-featured {
    display: block;
    width: 100%;
}
.block-featured p {
    font-size: 140%;
    text-align: center;
}
.block-normal p {
    text-align: center;
}
p.item-title {
    margin: .2em 0;
    font-size: 26px;
    line-height: 120%;
    color: #2699FB;
}
footer p {
    font-size:1em;
    text-align:center;
    color: #000;
}
ul,
ol,
dl {
    margin:0 0 20px 0;
}
ul li,
ol li,
dl dt,
dl dd {
    margin: 0 0 .4em 0;
}
dl dd ol,
dl dd ul {
    padding-left: 0;
}
dl dt {
    font-weight:bold;
}
dl dd {
    margin-bottom:20px;
}
pre {
    overflow:auto;
    margin:0 0 20px 0;
    padding:20px;
    background-color:#F2F8FF;
    border-radius:8px;
    font-family:'Andale Mono',monospace;
    font-size:.7em;
    line-height:1.2em;
    color:#777;
}
pre i {
    font-style:normal;
    color:#777;
}
pre b {
    font-weight:normal;
    color:#777;
}
form label {
    display: block;
}
form input.formsubmit {
    display: block;
    cursor: pointer;
}
a:link,
a:visited {
    border-width:0 0 1px 0;
    border-style:dashed;
    border-color:#2699FB;
    text-decoration:none;
    color:#2699FB;
}
a:hover {
    border-style:solid;
}
a.item-link {
    display: block;
    margin: 0;
    padding:0;
    border-width: 0;
    text-decoration: none;
}
a.button, 
input.button {
    position: relative;
    display: inline-block;
    margin: 4px auto;
    padding:8px 20px;
    background-color:#2699FB;
    border: solid 1px #2699FB;
    border-radius:4px;
    font-size: 12px;
    line-height: 100%;
    text-align:center;
    text-transform: uppercase;
    color: #FFF;
    cursor: pointer;
}
a.button:hover, 
a.button:focus, 
a.button:active, 
input.button:hover, 
input.button:focus, 
input.button:active {
    border: solid 1px #1B6FB8;
}
a.button img {
    float:left; 
    margin:0;
}
a.button strong.title {
    display:block;
    margin:0 0 -16px 0;
    padding:0;
    font-family: Arial,sans-serif;
    font-size:28px;
    line-height:100%;
    text-align:center;
}
a.button span {
    display:block;
    float:right;
    width:175px;
    padding-top:20px;
    font-size:.9em;
    text-align:left;
}
a.button span strong {
    font-size:1.4em;
}

.video-container {
    position: relative;
    width: 100%;
    margin: 0 0 2em 0;
    padding: 56.25% 0 0 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#footer a:link,
#footer a:visited {

}



/* Notes */
.note {
    display: inline-block;
    margin: .25rem 0;
    padding: .5rem .8rem;
    background: rgb(255, 223, 229);
    border: 2px dashed rgb(255, 156, 156);
    border-radius: 5px;
}
.note * {
    font-style: italic;
    color: rgb(255, 64, 64);
}
.note p:last-child {
    margin-bottom: 0;
}

/* Shapes and SVG Elements */ 
.icon-wireframe {
    font-size:300%;
}
.graphic-video {
    width: 100%;
    height: auto;
    margin: 0 0 2em 0;
}
.shape-square {
    width: 100%;
    height: auto;
}


/* Media Query Adjustments */
@media screen and (min-width:1440px) {
    div.page {
        width: 1440px;
    }
    div.page {
        margin: 40px auto;
        padding: 2em 120px 3em 120px;
    }
    .artist-info div.container.cols2 {
        grid-template-columns: 3fr 1fr;
    }
}
@media screen and (max-width:1440px) {
    div.page,
    footer {
        width: 94%;
    } 
    div.page {
        margin: 20px auto;
        padding: 2%;
    } 
    div.container.cols3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .artist-info div.container.cols2 {
        grid-template-columns: 2fr 1fr;
    }
    h1 { font-size: 48px; }
}
@media screen and (max-width:768px) {
    div.page,
    footer {
        width: 100%;
    }
    div.page {
        margin: 0;
        padding: 2%;
    }
    div.container.cols2, 
    div.container.cols3,
    div.container.cols6 {
        grid-template-columns: 1fr 1fr;
    }
    .artist-info div.container.cols2 {
        grid-template-columns: 1fr;
    }
    div.container.header.cols2, 
    div.container.header.cols3 {
        grid-template-columns: 1fr;
    }
    div.container.cols4,
    div.container.cols5 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    div.container .container-flex div.item {
        width: calc(50% - 10px);
    }
    h1 { font-size: 40px; }
}
@media screen and (max-width:500px) {
    div.container .container-flex div.item {
        padding: 0;
        width: 100%;
    }
    div.container.cols2, 
    div.container.cols3 {
        grid-template-columns: 1fr;
    }
    div.container.cols2.main-product-buttons,
    div.container.cols4 {
        grid-template-columns: 1fr 1fr;
    }
    div.container.cols3.main-product-buttons {
        grid-template-columns: 1fr 1fr 1fr;
    }
    h1 { font-size: 36px; }
}