/* container for page section */
.flex-container-4 { 
  display:flex;
  justify-content: center;
  /* flex-direction: column; */
  flex-wrap: wrap;
  width:100%;
}

/* container for page section */
/* used to maintain single column */
/* required to fix layout issue on ART/NEWS pages for non-retina displays */
.flex-container-5 { 
  display:flex;
  justify-content: center;
/*  flex-direction: column; */
  flex-wrap: wrap;
  width:100%; 
  max-width:1200px;
  margin:auto;
}

/* single column container */
.news-container {
  display:block;
  width:100%;
  max-width:720px;	
  margin:auto;
}

/* adds side margins when used with another class */
/* used for secondary image within a larger section */
.margin-left-right {
  margin:0px 30px 0px 30px;
}

/* adds side margins when used with another class */
/* used for secondary image within a larger section */
.padding-left-right {
  width:660px;
  margin:0px 30px 0px 30px;
}

/* container box for image */
.image-area {
  display:flex;
  flex-direction:column;
  width:100%;    /* ----------------------------------------- */
}

/* container box for thumbnail images on ART page */
.thumbnail-image-area {
  display:flex;
  flex-direction:column;
  width:100%;    /* ----------------------------------------- */
  flex-direction: row; 
  flex-wrap:wrap; 
  justify-content:center;
}

.product-category-block {
  display:block;
  margin-bottom:20px;
}

.product-category-text-area {
  width:100%;     /* ----------------------------------------- */
  margin:0;
  padding:0px 30px 0px 30px;
}

/* USED FOR ZAZZLE PRODUCTS ---------------------------------------*/

/* product info container */
.product-block {
  border: solid 1px #000;
  margin: 20px;
  padding: 20px;
  width: 25%;
  min-width: 250px;
}

/* product image with caption */
.product-image-with-caption {
  display:block;
  width:100%;
  margin-bottom: 0px;
}

/* container box for image */
.product-image-area {
  display:flex;
  flex-direction:column;
  width:100%;    
}

.product-title {
  display:block;
  text-align:center;
  font-size: 0.875rem;       /* 14px */  
  font-family: 'Montserrat', sans-serif;
  font-style:italic;
  font-weight:400;
  line-height: 1.2rem;      /* 16px */
  margin-top:0px;        
}

.product-title h2 {
  font-size: 1.25rem;        /* 20px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  margin-top:0px; 
  margin-bottom:1.0rem;    /* 16px */
}

p.product-subcategory {
  padding-top:0.625rem;   /* 10px */
}

/* END ZAZZLE PRODUCTS ---------------------------------------*/





  
/* STYLES FOR IMAGE SELECTOR  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.image-selector-row {
  display:flex;
/*  flex-direction:column;*/
  width:100%;    /* ----------------------------------------- */
  flex-direction: row; 
  flex-wrap:nowrap; 
  justify-content:center;

/*  height:calc(25% * width);*/
  margin-top:10px;
  margin-bottom: 30px;;
}


/* Selector box - clicking on this displays an image in the larger field */
.image-selector-box {
  display:block;
 /* float: left;*/
/*  width: 25%; */  /* change percentage to reflect number of images */
  padding: 4px;
}

/* The image contained in the selector box */
.image-selector-box img {
  display:block;
  width:100%;
  border:1px solid white;
/*  overflow:hidden; */ /* keeps image within bounds when scaled ... see .thumbnail-image img:hover */
  opacity: 1;
  
  height: 100px; /* IN WORK */
}

.image-selector-box img:hover {
  opacity: 0.8;
}

.selected-image-container {
  display: block;
  height: 370px;
  max-height: 370px;
}

.selected-image-container img {
  display: block;
/*  vertical-align: middle;*/
/*	width: 100%;*/
  max-width:100%;
  max-height: 370px;
  object-fit: contain;
	/* Center vertically */
  margin: 0;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* END STYLES FOR IMAGE SELECTOR  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */






#image-area-product-images {
  /* width:auto; */
  flex-direction:row; 
  flex-wrap:wrap;
  justify-content: center;
  align-items:center;
}

/* main image with caption */
.image-with-caption {
  display:block;
  width:100%;
  margin-bottom: 30px;
}

/* thumbnail image */

.thumbnail-image {
  display:block;
  width:100%;
  border:1px solid white;
  overflow:hidden; /* keeps image within bounds when scaled ... see .thumbnail-image img:hover */
}

/* 
breakpoints with 30 px margin
1 columns (max-width: 539px)
2 columns (max-width: 540px)and (max-width: 779px)
3 columns (mix-width: 780px)
*/

.thumbnail-image img {
 /*smooth return to normal scale */ 
  -webkit-transform: scale(1.0);
  transform: scale(1.0); 
  transition: transform 0.2s linear; 
}

.thumbnail-image img:hover {
  /*smooth scale larger */ 
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  transition: transform 0.2s linear; 
}

.art-image {
  display:block;
  width:100%;
  margin-top: 24px;
  margin-bottom: 24px;
}

.image-overlay {
  opacity:0;
  display: block;
  float:left;
  height: 0;
  /* image-overlay inline style for padding-top on each art page (HTML) */
  /* padding-top forces the element to take up vertical space           */
  /* set percentage equal to the height-to-width ratio of the image     */
  background-image: url(../_images/10x10-trans.png);
  background-color: transparent;
  background-size: cover; 
  width:calc(100% - 200px); /* subtract twice width of PREV/NEXT overlay */
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0);
  }
  
/* initial appearance then fade out for PREV/NEXT buttons */
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
} 

.nav-overlay-prev {
  opacity:0;
  transition: opacity 0.2s linear;
  
  /* initial appearance then fade out */
  -webkit-animation: fadeout 1.7s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadeout 1.7s; /* Firefox < 16 */
      -ms-animation: fadeout 1.7s; /* Internet Explorer */
       -o-animation: fadeout 1.7s; /* Opera < 12.1 */
          animation: fadeout 1.7s; 
	
  display: block;  
  float:left;
  height: 0;
  /* image-overlay inline style for padding-top on each art page (HTML) */
  /* padding-top forces the element to take up vertical space           */
  /* set percentage equal to the height-to-width ratio of the image     */
  background-image: url(../_images/nav-PREV_247x70.jpg);
  background-color: transparent;
  background-size: 100px; /* if this is changed, also change .image-overlay width equation */
  width:100px;
  background-repeat: no-repeat;
  background-position: left;
  background-color: rgba(255, 255, 255, 0.4);
  }
 
.nav-overlay-next {
  opacity:0;
  transition: opacity 0.2s linear;
  
  /* initial appearance then fade out */
  -webkit-animation: fadeout 1.7s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadeout 1.7s; /* Firefox < 16 */
      -ms-animation: fadeout 1.7s; /* Internet Explorer */
       -o-animation: fadeout 1.7s; /* Opera < 12.1 */
          animation: fadeout 1.7s; 
	
  display: block;
  float:right;
  height: 0;
  /* image-overlay inline style for padding-top on each art page (HTML) */
  /* padding-top forces the element to take up vertical space           */
  /* set percentage equal to the height-to-width ratio of the image     */
  background-image: url(../_images/nav-NEXT_247x70.jpg);
  background-color: transparent;
  background-size: 100px;
  width:100px; /* if this is changed, also change .image-overlay width equation */
  background-repeat: no-repeat;
  background-position: right;
  background-color: rgba(255, 255, 255, 0.4);
  }
  
/* hover_effect: Enable hover behavior on touch devices */
.nav-overlay-prev:hover, .nav-overlay-prev.hover_effect {
  opacity:1; 
  transition: opacity 0.2s linear;
  }
  
/* hover_effect: Enable hover behavior on touch devices */
.nav-overlay-next:hover,.nav-overlay-next.hover_effect {
  opacity:1;
  transition: opacity 0.2s linear;
  }
  
/* prevent the browser from asking you to copy/save/select the image */
.hover {
  -webkit-user-select: none;
  -webkit-touch-callout: none;        
  }

.figure {
  display:block;
}

.figcaption {
  display:block;
  text-align:center;
  font-size: 0.875rem;       /* 14px */  
  font-family: 'Montserrat', sans-serif;
  font-style:italic;
  font-weight:400;
  line-height: 1.0rem;      /* 16px */
  margin-top:0.5rem;         /* 8px */
}

.figcaption h2 {
  font-size: 1.25rem;        /* 20px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  margin-top:0.625rem;       /* 10px */
  margin-bottom:0.375rem;    /* 6px */
}

.figure img {
  display: block;
  width:100%;
  margin:auto;
}

.figure audio {
  display: block;
  width:100%;
  margin:auto;
}

.art-title {
  display:block;
  text-align: left;
  width:100%;
  margin-bottom:24px;
}

.art-title h1 {
  font-size: 2.0rem;        /* 32px */ 
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  margin-bottom: 0.25rem;        /* 4px */
}

.art-info {
  font-size: 0.875rem;        /* 14px */
  font-family: 'Montserrat', sans-serif;
  font-style:italic;
  font-weight:400;
  padding-bottom:0px;
}

/* container box for text */
.text-area {
  display:flex;
  flex-direction:column;
  width:100%;     /* ----------------------------------------- */
  margin:0px 30px 0px 30px;
}

/* featured text */
.text-featured {
  display:block;
  text-align: left;
  width:100%;
}

.text-featured p {
  font-size: 1.375rem;       /* 22px */ 
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  line-height: 1.625rem;     /* 26px */ 
  margin-bottom: 1.625rem;   /* 26px */ 
}

/* main text */
.text-main {
  display:block;
  text-align: left;
  width:100%;
  /* margin:0px 0px 0px 0px; */
}

.text-main p {
  font-size: 1.0rem;         /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  line-height: 1.4rem;       /* 22.4px */
  margin-bottom: 1.5rem;     /* 24px */
}

.text-main ol {
  font-size: 1.0rem;         /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  line-height: 1.4rem;       /* 22.4px */
  margin-bottom: 1.5rem;     /* 24px */
  list-style-position: outside;
  padding-left: 1.0em;
}

.text-main ol li { 
  list-style-type: decimal; 
  margin-left: 30px;  /* gives 'room' for the numbers to appear in */
  padding-left: 0.3rem;  /* sets gutter width between list numbers and text */
}

.text-main ul {
  font-size: 1.0rem;         /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  line-height: 1.4rem;       /* 22.4px */
  margin-bottom: 1.5rem;     /* 24px */
  list-style-position: outside;
  padding-left: 1.0em;
}

.text-main ul li { 
  list-style-type: disc; 
  margin-left: 30px;  /* gives 'room' for the numbers to appear in */
  padding-left: 0.3rem;  /* sets gutter width between list numbers and text */
}

ul.footnote {
  font-size: 0.625em;       /* 10px */
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight:400;
  line-height: 0.875rem;    /* 14px */
  margin-bottom: 1.5rem;     /* 24px */
  list-style-position: outside;
  padding-left: 1.0em;
}

ul.footnote li {
  list-style-type: disc; 
  margin-left: 30px;  /* gives 'room' for the numbers to appear in */
  padding-left: 0.3rem;  /* sets gutter width between list numbers and text */
}

/* prevent from wrapping */
.no-wrap-container {
  width:100%;
}

.aside {
  color:#EEE;
  background-color:#666;	
  margin-left:auto;  /* required to center on page */
  margin-right:auto; /* required to center on page */
  margin-top:30px;
  margin-bottom:30px;
  padding:30px;
}

.aside p {
  font-size: 1.0rem;       /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  line-height: 1.4rem;    /* 22.4px */
  margin-bottom: 1.5rem;  /* 24px */
}

/*
.aside p:last-of-type {
  margin-bottom: 0rem;
}
*/

p.italic {
  font-style:italic;	
}

p.error-box {
  border:#F00 solid 2px; 
  max-width:450px; 
  margin-left:auto; 
  margin-right:auto;
}

blockquote {
  font-size: 0.875rem;      /* 14px */
  font-style: italic;
  font-weight:400;
  line-height: 1.25rem;     /* 20px */
  /* 0px space above border block ... this is usually placed after a paragraph break */
  margin: 0px 30px 30px 30px; 
}

p.footnote {
  font-size: 0.625em;       /* 10px */
  font-style: italic;
  font-weight:400;
  line-height: 0.875rem;    /* 14px */
}

.text-main .list-normal {
  font-size: 1.0rem;         /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  line-height: 1.4rem;       /* 22.4px */
  margin-bottom: 1.5rem;     /* 24px */
}

.text-main .list-bold {
  font-size: 1.0rem;         /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  line-height: 1.4rem;       /* 22.4px */
  margin-bottom: 1.5rem;     /* 24px */
}

.text-main ol.no-bullet {
  list-style:none;	
}

.text-main .list-normal li {
  margin-bottom: 1.5rem;
}

.text-main .list-bold li {
  margin-bottom: 1.5rem;
}

.margin-left-40 {
  margin-left:40px;
}

.margin-left-60 {
  margin-left:60px;
}

h1 {
  font-size: 2.0rem;        /* 32px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  margin-bottom:1.25rem;    /* 20px */
}

h2 {
  font-size: 1.5rem;        /* 24px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  margin-bottom:1.0rem;    /* 16px */
}

h2.light {
  font-weight:400;
}

h3 {
  font-size: 1.25rem;        /* 20px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
  margin-bottom:1.0rem;     /* 16px */
}

.news-date {
  font-size: 1.0rem;        /* 16px */
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:400;
  margin-bottom:0px;
}

a:link, a:visited {
  color: #0CF;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
}

/* give keyboard navigation the same hover experience as using a mouse. */
a:hover, a:active, a:focus { 
  color: #0FF;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-style:normal;
  font-weight:600;
}

.link-box:link, .link-box:visited {
	display:block;
    width:100%;
    height:auto; /* 54px; */
    border:none;
	font-size: 1.25rem;        /* 1.25rem = 20px */
	text-align:center; 
	color:#FFF; /* text label color */
/*	background:url(_images/LAUNCH_CYAN_252x54_2x.jpg); */
	background-color:#00AEEF;
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
	overflow:hidden;
/*    text-indent:-9999px;  *//* hide default text by offsetting beyond button boundaries */
	opacity: 1.0;
	margin:0px 0px 0px 0px;
	padding:16px;
    cursor:pointer;
  }

.link-box:hover, .link-box:focus {
	color:#FFF; /* text label color */
/*	background:url(_images/LAUNCH_GRAY_252x54_2x.jpg);*/
	background-color:#FC0;                 /*  gray  #B3B3B3;  */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
    }

.link-box:active {
	color:#00AEEF; /* text label color */
/*	background:url(_images/LAUNCH_WHITE_252x54_2x.jpg);*/
	background-color:#FFF;
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
  }
  
  
.link-box.link-box-small:link, .link-box.link-box-small:visited, 
.link-box.link-box-small:hover, .link-box.link-box-small:focus,
.link-box.link-box-small:active  {
	font-size: 0.8rem;        /* 1.0rem = 16px  */
	width:auto;
    margin:4px; 	/* margin-top:4px; */
	padding:4px;
  }
  
  
.link-box.link-box-large:link, .link-box.link-box-large:visited, 
.link-box.link-box-large:hover, .link-box.link-box-large:focus,
.link-box.link-box-large:active  {
	font-size: 2.25rem;        /* 1.0rem = 16px  */
	width:auto;
    margin:4px; 	/* margin-top:4px; */
	padding:14px;
  }
  
.link-box.link-box-large.reversed-colors:link, .link-box.link-box-large.reversed-colors:visited {
	background-color:#FC0;
}

.link-box.link-box-large.reversed-colors:hover, .link-box.link-box-large.reversed-colors:focus {
	background-color:#00AEEF;
}  

.link-box.link-box-large.reversed-colors:active {
	color:#00AEEF; /* text label color */
	background-color:#FFF;
}
  
  
.flex-link-box-container {
	display:flex; 
	flex-wrap:wrap; 
	flex-direction:row; 
	justify-content: center;'
}

.flex-link-box {
	flex:0 0 50%;
}
    
   
   
   
.table-type-a {
/*	display:block;*/
    text-align:center;
    font-size: 1.0rem;       /* 16px */  
    font-family: 'Montserrat', sans-serif;
/*    font-style:italic;*/
    font-weight:bold;
    line-height: 1.0rem;      /* 16px */
	border-collapse: collapse;
    margin-top:0.5rem;         /* 8px */
	margin-bottom:0.5rem;         /* 8px */
	width: 100%;
}

.table-type-a td, .table-type-a th {
    border: 1px solid #ddd;
    padding: 8px;
}

.table-type-a th {
	font-weight:bold;
	background-color: #f2f2f2;
}

.table-type-a td:nth-child(1){
	font-weight:bold;
	background-color: #f2f2f2;
	white-space: nowrap;
}


   

.white-border {
  border:#FFF solid 8px; 
}

.shadow {
  /* shadow parameters: none | h-offset v-offset blur spread color | inset| initial| inherit; */
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);'
}

.badge-type-a {
	display:inline-block;
    width:8rem;
    height:auto; /* 54px; */
    border:none;
	font-size: 0.75rem;        /* 12px */
	font-weight:600;
	text-align:center; 
	color:#FFF; /* text color */
/*	background:url(_images/LAUNCH_CYAN_252x54_2x.jpg); */
	background-color: #999; /*  --- bright orange #FC7E01       bright purple #8D11FD    dark blue #014FAD;  medium blue #0020FF;  cyan #0080FF; */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
	overflow:hidden;
/*    text-indent:-9999px;  *//* hide default text by offsetting beyond button boundaries */
	opacity: 1.0;
	margin:0px 0px 10px 0px;
	padding:6px;
}

.badge-type-b {
	display:inline-block;
    width:100%;
    height:auto; /* 54px; */
    border:solid 1px #999;  /* #999; */
	font-size: 1.0rem;        /* 16px */
	font-weight:600;
	text-align:center; 
	color:#999; /* text color #999 */
/*	background:url(_images/LAUNCH_CYAN_252x54_2x.jpg); */
	background-color: #FFF; /*  --- bright orange #FC7E01       bright purple #8D11FD    dark blue #014FAD;  medium blue #0020FF;  cyan #0080FF; */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
	overflow:hidden;
/*    text-indent:-9999px;  *//* hide default text by offsetting beyond button boundaries */
	opacity: 1.0;
	margin:0px 0px 10px 0px;
	padding:6px;
}

.badge-type-c {
	display:inline-block;
    width:100%;
    height:auto; /* 54px; */
    border:solid 2px #00AEEF;  /* #999; */
	font-size: 1.0rem;        /* 16px */
	font-weight:600;
	text-align:center; 
	color:#00AEEF; /* text color #999 */
/*	background:url(_images/LAUNCH_CYAN_252x54_2x.jpg); */
	background-color: #FFF; /*  --- bright orange #FC7E01       bright purple #8D11FD    dark blue #014FAD;  medium blue #0020FF;  cyan #0080FF; */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
	overflow:hidden;
/*    text-indent:-9999px;  *//* hide default text by offsetting beyond button boundaries */
	opacity: 1.0;
	margin:0px 0px 24px 0px;
	padding:6px;
}





/* SPECIAL MESSAGE BANNER ... eg. SALE */


.special-message-banner {
/*	background-color:#00618B; 
	border:10px solid #00618B; 
	text-align:center;
	width:100%;
	max-width:720px;
	padding:10px; 
	margin-left:30px; 
	margin-right:30px;
	margin-bottom:24px; */
}

.special-message-banner-wide {
/*	margin-left:0px;
	margin-right:0px;*/
}

.special-message-banner h1 {
    font-size: 3rem;
    letter-spacing: 0.2rem;
}
  
.special-message-banner h2 {
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
}






/* superscript */
.sup { 
    font-size: .7rem;
	font-weight:normal;
    vertical-align: super;
}


.separator-news {
  width:66%;
  height:4px;
  margin:0px auto 30px auto; /* use auto for left and right margins to center the element */
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background: -webkit-linear-gradient(90deg, #FFF, #0CF 50%, #FFF);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(90deg, #FFF, #0CF 50%, #FFF);
  /* Opera 11.1 - 12 */
  background: -o-linear-gradient(90deg, #FFF, #0CF 50%, #FFF);
  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background: linear-gradient(90deg, #FFF, #0CF 50%, #FFF); /* must be listed last */
} 







  /*  LIGHTBOX CSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /*  borrowed from https://www.w3schools.com/howto/howto_css_modal_images.asp - - - - - - - - - - - - -  */
  /*  and from https://www.w3schools.com/howto/howto_js_lightbox.asp - - - - - - - - - - - - - - - - - -  */
  
  /*  LIGHTBOX STYLES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


  /* image on main page that is eligable for lightbox ... make cursor into click pointer  */
  .lightbox-image {
	cursor:pointer;
  }
  
  /* lightbox background */
  .lightbox {
	display:none; /* hidden by default */  
	position:fixed; /* Stay in place */
	left: 0;
    top: 0;
	z-index:1; /* on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* container for image in lightbox */
  .lightbox-img-container {
	display:block;
/*	width=100%;     */
	max-width:800px;  
/*	max-height:720px; */ /* seems to have no effect */
   	margin:auto;
	padding-bottom:100px; /* Add space below image */
  }

  /* image in lightbox */
  .lightbox-img {
	display:block;
	
	/* remove width atribute to limit image height for tall images */
	/* Add width:100% to 800 wide media query for narrow windows */
/*    width:100%; */  

/*	object-fit:contain; */ /* seems to have no effect */
   	margin:auto;
  }
  
/* Add width:100% to 800 wide media query for narrow windows */
/*    width:100%; */  
/* 100% image width on narrow ncreens */
@media only screen and (max-width: 800px){
  .lightbox-img {
    width: 100%;
  }
}
 
   /* lightbox title */
  .lightbox-title {
	display:block;
	width:80%;
	max-width:1000px; 
	margin:auto;
	text-align:center;
	color:#FFF;
	padding: 14px 0;
	margin-top: 20px; /* apply margin to the top element */ 
  }
  
  /* The close button "X" */
  .close-lightbox {
    position:sticky; /* absolute; */
    top: 0px;
	float: right;
	margin-right:1rem;
    color: #FFF;
    font-size:4rem;
    font-weight:bold;
/*    transition: 0.3s;*/
  }

  .close-lightbox:hover,
  .close-lightbox:focus {
    color:#bbb;
    text-decoration:none;
    cursor:pointer;
  }
  
  /* Add animation */
  .lightbox-img, #lightbox-title {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0.7)} 
    to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
    from {transform:scale(0.7)} 
    to {transform:scale(1)}
  }
  
  /* END LIGHTBOX STYLES  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - -   */
  
  
  /* SHOPIFY STYLES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* Customize Buy Button */
  /*.shopify-buy__btn-wrapper {
	margin-top:0px;
  }*/
  
  /* END SHOPIFY STYLES  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - -   */
  
  
/* end ----------------------------------------------------------- */







/* MEDIA QUERIES ------------------------------------------------- */

/* 
art thumbnail breakpoints
1 columns (max-width: 500px)                         ...thumbnail width  up to 499
2 columns (max-width: 500px) and (max-width: 900px)  ...thumbnail width 250 to 448
3 columns (mix-width: 900px) and (max-width: 1200px) ...thumbnail width 298 to 398
4 columns (max-width: 1200px)                        ...thumbnail width 298 to 378 (max screen)
*/
/* was @media only screen and (max-width: 500px) */
@media only screen and (min-width: 1px) {
  /* One column */
  .thumbnail-image {
    width:100%;
	border-left:none;
	border-right:none;
  }
  
  .text-main ol {
    padding-left: 0em;
  }
  
  .link-box:link, .link-box:visited, .link-box:hover, .link-box:active, .link-box:focus {
	font-size: 1.0rem;        /* 16px */
  }
  
  .link-box:link, .link-box:visited, .link-box:hover, .link-box:active, .link-box:focus {
	font-size: 1.25rem;        /* 20px */
	/*font-size: 1.0rem;*/        /* 16px */
  }
  
  .link-box.link-box-large:link, .link-box.link-box-large:visited, 
  .link-box.link-box-large:hover, .link-box.link-box-large:focus,
  .link-box.link-box-large:active  {
	font-size: 1.5rem;        /* 1.0rem = 16px  */
	padding:14px;
  }
  
  .special-message-banner h1 {
	  font-size: 1.5rem;
	  letter-spacing: 0.14rem;
  }
  
  .special-message-banner h2 {
	  font-size: 1rem;
	  letter-spacing: 0.12rem;
  }
}

/* was @media only screen and (min-width: 500px) and (max-width: 900px) */
@media only screen and (min-width: 500px) {
  /* Two columns */
  .thumbnail-image {
    width:50%;
	border:1px solid white;
  }
  
  .text-main ol {
    padding-left: 0em;
  }
  
  .link-box.link-box-large:link, .link-box.link-box-large:visited, 
  .link-box.link-box-large:hover, .link-box.link-box-large:focus,
  .link-box.link-box-large:active  {
	font-size: 1.5rem;        /* 1.0rem = 16px  */
	padding:14px;
  }
  
  .special-message-banner h1 {
	  font-size: 3rem;
	  letter-spacing: 0.2rem;
  }
  
  .special-message-banner h2 {
	  font-size: 1.5rem;
	  letter-spacing: 0.12rem;
  }
}

/* was @media only screen and (min-width: 900px) and (max-width: 1200px) */
@media only screen and (min-width: 900px) {
  /* Three columns */
  .thumbnail-image {
    width:33.3333%;
	border:1px solid white;
  }
}

@media only screen and (min-width: 1200px) {
  /* Four columns */
  .thumbnail-image {
    width:25%;
	border:1px solid white;
  }
}

/* Medium width (Tablet) Styles */
/* was @media only screen and (min-width: 800px) and (max-width: 1200px) */
@media only screen and (min-width: 800px) {
  /* container box for image */
  .image-area {
    max-width:720px;
	/* margin:0em 1em 0em 1em; */
  }

  /* container box for text */
  .text-area {
    max-width:720px;
	/* margin:0em 1em 0em 1em; */
  }	
  
  .product-category-text-area {
    max-width:720px;
	margin:0px;
    padding:0px;
  }
  
  .link-box:link, .link-box:visited, .link-box:hover, .link-box:active, .link-box:focus {
	font-size: 1.25rem;        /* 20px */
  }
  
  .text-main ol {
    padding-left: 1.0em;
  }
  
  .single-column {
	width:720px;
	margin:0px 30px 0px 30px;
  }
  
  .aside {
    max-width: 720px;
    }
	
  #pixelsshoppingcartiframe {
	max-width: 720px;
	margin-left:auto;  /* required to center on page */
    margin-right:auto; /* required to center on page */
	height:auto;       /* For larger viewports, height=auto ... eliminates iframe scrollbar */
  }
  
  #BayPhotoMetalExhibitMount, 
  #BayPhotoAcrylicFaceMount
  {
    display: inline-block; 
	max-width: 720px; /* set equal to image-area+text-area+ center gutter width */
	width: 100%; 
    height:8000px;       /* For larger viewports, height=auto ... eliminates iframe scrollbar */
    margin-left:auto;  /* required to center on page */
    margin-right:auto; /* required to center on page */
    border: none; 
    overflow: hidden;
  }
  
  .link-box.link-box-large:link, .link-box.link-box-large:visited, 
  .link-box.link-box-large:hover, .link-box.link-box-large:focus,
  .link-box.link-box-large:active  {
	font-size: 1.5rem;        /* 1.0rem = 16px  */
	padding:14px;
  }
}

/* Wide (Desktop) Styles */
@media only screen and (min-width: 1200px) {
  /* container box for image */
  .image-area {
	width:520px;
    margin:0px 30px 0px 30px;
  }
  
  .image-area-wide {
	width:1100px;
    margin:0px 30px 0px 30px;
  }
  
  #image-area-product-images {
    width:720px;
  }
  
  /* prevent image from changing with normal image-area width */
  #image-area-celestial-sphere {
	width:720px;
	margin:0px;
  }

/* container box for text */
  .text-area {
	width:520px;
    margin:0px 30px 0px 30px;
  }	
  
  .product-category-text-area {
    width:520px;
    margin:0px 30px 0px 30px;
    padding:0px;
  }
  
  .width-720 {
	width:720px;
	/* margin:0px 30px 0px 30px; */
  }
  
/* NOT USED */
/*  #decorate-your-space {*/
/*    width: 720px;*/ /* 1100px; */ /* set equal to shopping cart width */
/*  }*/
  
  .aside {
	max-width: 720px;
  }

/* NOT USED */  
/*  #shop-for-items {*/
/*    max-width: 1100px;*/ /* set equal to shopping cart width */
/*  }*/
  
  #pixelsshoppingcartiframe {
	max-width: 1100px; /* set equal to image-area+text-area+ center gutter width */
	margin-left:auto;  /* required to center on page */
    margin-right:auto; /* required to center on page */
	height:auto;       /* For larger viewports, height=auto ... eliminates iframe scrollbar */
  }
  
  #BayPhotoMetalExhibitMount, 
  #BayPhotoAcrylicFaceMount
  {
	display: inline-block; 
	max-width: 1100px; /* set equal to image-area+text-area+ center gutter width */
	width: 100%; 
    height:8000px;       /* For larger viewports, height=auto ... eliminates iframe scrollbar */
    margin-left:auto;  /* required to center on page */
    margin-right:auto; /* required to center on page */
    border: none; 
    overflow: hidden;
  }
  
  .link-box.link-box-large:link, .link-box.link-box-large:visited, 
  .link-box.link-box-large:hover, .link-box.link-box-large:focus,
  .link-box.link-box-large:active  {
	font-size: 2.25rem;        /* 1.0rem = 16px  */
	padding:14px;
  }
}