html {
    height: 100%;
}

body {
    background-image: url("images/TenBackDSP.jpg");
    background-repeat: repeat repeat;
    /*background-color: #19b0db;*/
    background-color: #e2f6fc;
    height: 100%;
}

a:focus {
    outline: 0;
}

/* w3.css for reference
h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}

.w3-container{padding:0.01em 16px}
.w3-row-padding,.w3-row-padding>.w3-half, ...all col types... .w3-col{padding:0 8px} only as child.  Below sets for all col types.

@media only screen and (min-width:601px){} medium
@media only screen and (min-width:993px){} large

*/

html, body {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

html {
    overflow-x: hidden;
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    h3 {font-size: 20px;}
    h4 {font-size: 18px;}
}

@media only screen and (max-width: 600px) {
    h3 {font-size: 14px;}
    h4 {font-size: 18px;}
}

h3 {margin: 6px 0;}
/*h6 {margin: 6px 0;}*/

.w3-border {border: 1px solid #92def4 !important;}
.w3-border-top {border-top: 1px solid #92def4 !important;}
.w3-border-bottom {border-bottom: 1px solid #92def4 !important;}
.w3-border-left {border-left: 1px solid #92def4 !important;}
.w3-border-right {border-right: 1px solid #92def4 !important;}
.w3-half {padding: 0px 8px;}
.w3-third {padding: 0px 8px;}
.w3-quarter {padding: 0px 8px;}
.w3-col {padding: 0px 8px;}
.hdr-padding {padding: 8px 0px 0px 0px;}
.pol-grp {margin: 1.2em 0 .2em 0;}
.cart-item {padding: 0 1em;}

img.kit {
    width: 99%;
    height: auto;
    margin: 4px;
}

img.logo {
    width: 90%;
    height: auto;
    margin: 4px;
}

img.swatch {
    width: 70%;
    height: auto;
    margin: 4px;
}

[data-src] {
    width: 99%;
    height: auto;
    margin: 4px;
}

@media only screen and (min-width: 601px) {
    img.logo {
        width: 55%;
        height: auto;
        margin: 4px;
    }
}

ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #e2f6fc;
}

/* Hide IE 6-9-only content for non-IE browsers  */
@media all {
 .ie-show {display: none !important}
 }

/* IE 10 and 11 don't use conditional comments so we can't use them to load ie-web.css
   instead of ten-web.css as we do for IE 9 and lower.  So IE 10 and up will load
   this css and we have to adjust for that here. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie-10up-hide {display:none !important}
.ie-10up-show {display:block !important}
}

@media all and (max-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie-10up-show-s {display:block !important}
}
@media all and (min-width:601px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie-10up-show-ml {display:block !important}
}

/*************** buttons ***************/
.btn-group a {
    background-color: #bfecf9;
    border: 1px solid;
    border-color: #92def4 #19b0db #19b0db #92def4;
    color: #12566a;
    padding: 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.4em;
}

.btn-group:after {
    content: "";
    clear: both; /* Clear floats (clearfix hack) */
    display: table;
}

.btn-group a:hover {
    background-color: #51caed;
}

/*--------------------*/
.button {
    background-color: #6dd2ef;
    border: 1px solid;
    border-color: #19b0db #12728e #12728e #19b0db;
    border-radius: 4px;
    font-size: 12px;
    display:inline-block; 
    margin: 8px 4px 0px 4px;
}

    .button:hover {
        background-color: #19b0db;
    }

/*--------------------*/
.ppalbutton {
    background: transparent;
    border: none;
    margin: 12px 4px 4px 4px;
}

/*************** overall divs ***************/

#header {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 66%;
    margin: auto;
    background-color: #e2f6fc;
    font-size: 14px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,66,140,0.2);*/
}

#maindiv {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 66%;
    /*min-height: 110%;*/ /*101%;*/
    margin: auto;
    background-color: #e2f6fc;
    font-size: 14px;
    box-shadow: 0px 8px 16px 0px rgba(0,66,140,0.2);
}

@media only screen and (min-width: 601px) and (max-width: 1300px) {
    #header {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        margin: auto;
        background-color: #e2f6fc;
        font-size: 12px;
        /*box-shadow: 0px 8px 16px 0px rgba(0,66,140,0.2);*/
    }

    #maindiv {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        min-height: 100%;
        margin: auto;
        background-color: #e2f6fc;
        font-size: 12px;
        /*box-shadow: 0px 8px 16px 0px rgba(0,66,140,0.2);*/
    }
}

@media only screen and (max-width: 600px), (max-aspect-ratio: 4/3) {
    #header {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: auto;
        background-color: #e2f6fc;
        font-size: 12px;
    }

    #maindiv {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: 100%;
        margin: auto;
        background-color: #e2f6fc;
        font-size: 12px;
    }
}

/*************** kits ***************/
.top-cell {
    /*border-width: 2px 1px 1px 1px;
    border-style: solid;
    border-color: #92def4;*/
    font-size: 14px;
}

.mid-cell {
    /*border-width: 1px;
    border-style: solid;
    border-color: #92def4;*/
    font-size: 14px;
}

.bot-cell {
    /*border-width: 1px 1px 1px 2px;
    border-style: solid;
    border-color: #92def4;*/
    font-size: 14px;
}
/* Upper of kit cell pair; lower has no special formatting */
.doubledouble-cell {
    /*border-bottom: 1px solid #92def4;
    border-right: none;
    padding-bottom: 4px;*/
}

/* min-width must match threshhold for kit-col medium */
@media only screen and (min-width: 730px) {
    .top-cell {
        /*border-width: 2px 1px 1px 1px;
        border-style: solid;
        border-color: #92def4;*/
        font-size: 12px;
    }

    .mid-cell {
        /*border-width: 1px;
        border-style: solid;
        border-color: #92def4;*/
        font-size: 12px;
    }

    .bot-cell {
        /*border-width: 1px 1px 1px 2px;
        border-style: solid;
        border-color: #92def4;*/
        font-size: 12px;
    }

    /* Left of kit cell pair; right has no special formatting */
    .double-cell {
        /*border-bottom: none;
        border-right: 1px solid #92def4;*/
    }
}

.double-cell-3div {
    display: none;
}

.double-cell-2div {
    display: block;
}

/* min-width must match threshhold for kit-col medium */
@media only screen and (min-width: 730px) and (max-width: 1100px), (max-width: 500px) {
    .double-cell-3div {
        display: block;
    }

    .double-cell-2div {
        display: none;
    }
}

.kit-col {
    padding: 0px 8px;
}

.kit-col, .kit-half, .kit-third, .kit-twothird, .kit-threequarter, .kit-quarter {
    float: left;
    width: 100%;
}

    .kit-col.s1 {width: 8.33333%;}
    .kit-col.s2 {width: 16.66666%;}
    .kit-col.s3 {width: 24.99999%;}
    .kit-col.s4 {width: 33.33333%;}
    .kit-col.s5 {width: 41.66666%;}
    .kit-col.s6 {width: 49.99999%;}
    .kit-col.s7 {width: 58.33333%;}
    .kit-col.s8 {width: 66.66666%;}
    .kit-col.s9 {width: 74.99999%;}
    .kit-col.s10 {width: 83.33333%;}
    .kit-col.s11 {width: 91.66666%;}
    .kit-col.s12, .kit-half, .kit-third, .kit-twothird, .kit-threequarter, .kit-quarter {width: 99.99999%;}

/* Medium threshold different from w3-col*/
@media only screen and (min-width:730px) {
    .kit-col.m1 {width: 8.33333%;}
    .kit-col.m2 {width: 16.66666%;}
    .kit-col.m3, .kit-quarter {width: 24.99999%;}
    .kit-col.m4, .kit-third {width: 33.33333%;}
    .kit-col.m5 {width: 41.66666%;}
    .kit-col.m6, .kit-half {width: 49.99999%;}
    .kit-col.m7 {width: 58.33333%;}
    .kit-col.m8, .kit-twothird {width: 66.66666%;}
    .kit-col.m9, .kit-threequarter {width: 74.99999%;}
    .kit-col.m10 {width: 83.33333%;}
    .kit-col.m11 {width: 91.66666%;}
    .kit-col.m12 {width: 99.99999%;}
}

@media only screen and (min-width:993px) {
    .kit-col.l1 {width: 8.33333%;}
    .kit-col.l2 {width: 16.66666%;}
    .kit-col.l3, .kit-quarter {width: 24.99999%;}
    .kit-col.l4, .kit-third {width: 33.33333%;}
    .kit-col.l5 {width: 41.66666%;}
    .kit-col.l6, .kit-half {width: 49.99999%;}
    .kit-col.l7 {width: 58.33333%;}
    .kit-col.l8, .kit-twothird {width: 66.66666%;}
    .kit-col.l9, .kit-threequarter {width: 74.99999%;}
    .kit-col.l10 {width: 83.33333%;}
    .kit-col.l11 {width: 91.66666%;}
    .kit-col.l12 {width: 99.99999%;}
}

/*************** gallery ***************/
.gal-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.gal-column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.gal-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 900px) {
  .gal-column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .gal-column {
    flex: 100%;
    max-width: 100%;
  }
}

.gal-container {
  position: relative;
}

.gal-image {
  display: block;
  width: 100%;
  height: auto;
}

.gal-overlay {
  position: absolute;
  top: 30%;
  background: rgba(18, 86, 106, 0.75);
  border-radius:6px;
  color: #ffffff; 
  width: 100%;
  transition: .3s ease;
  opacity:0;
  font-size: 16px;
  padding: 16px;
  text-align: center;
}

.gal-container:hover .gal-overlay {
  opacity: 1;
}

/*************** narrow ***************/
.narr-text {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}