@charset "UTF-8";
/* CSS Document 
	Muiz Customizations for Bootstrap 4.1.3
*/

/*@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&family=Open+Sans+Condensed&family=Raleway&family=Poiret+One&display=swap');*/

/* @import url('https://fonts.googleapis.com/css2?family=Elsie&family=Merriweather:ital,wght@1,300;1,400&family=Open+Sans+Condensed:ital,wght@0,300;1,300&family=Oswald:wght@300;400&family=Playfair+Display:ital@1&family=Poiret+One&family=Raleway&display=swap');

font-family: Elsie, Merriweather, Oswald, "Playfair Display", "Open Sans Condensed", "Times New Roman", serif; */

/* Adobe Fonts */
	.tk-gautreaux-bold { 
		font-family: "gautreaux",sans-serif; 
		font-style: normal;
		font-weight: 700;
	}
	.tk-gizmo-normal-reg { 
		font-family: "gizmo",sans-serif; 
		font-style: normal;
		font-weight: 400;
	}
	.tk-merriweather-ital-reg { 
		font-family: "merriweather",serif; 
		font-style: italic;
		font-weight: 400;
	}
	.tk-merriweather-ital-bold { 
		font-family: "merriweather",serif; 
		font-style: italic;
		font-weight: 700;
	}
	.tk-pinot-grigio-modern-lite { 
		font-family: "pinot-grigio-modern",sans-serif; 
		font-style: normal;
		font-weight: 300;
	}
	.tk-pinot-grigio-modern-med { 
		font-family: "pinot-grigio-modern",sans-serif; 
		font-style: normal;
		font-weight: 500;
	}
	.tk-pinot-grigio-modern-bold { 
		font-family: "pinot-grigio-modern",sans-serif; 
		font-style: normal;
		font-weight: 700;
	}
	.tk-pinot-grigio-modern-ital-lite { 
		font-family: "pinot-grigio-modern",sans-serif; 
		font-style: italic;
		font-weight: 300;
	}
	.tk-pinot-grigio-modern-ital-med { 
		font-family: "pinot-grigio-modern",sans-serif; 
		font-style: italic;
		font-weight: 500;
	}
	.tk-pinot-grigio-modern-ital-bold { 
		font-family: "pinot-grigio-modern",sans-serif; 
		font-style: italic;
		font-weight: 700;
	}
	.tk-poiret-one-reg { 
		font-family: "poiret-one",sans-serif; 
		font-style: normal;
		font-weight: 400;
	}
	.tk-raleway-lite { 
		font-family: "raleway",sans-serif; 
		font-style: normal;
		font-weight: 300;
	}
	.tk-raleway-reg { 
		font-family: "raleway",sans-serif; 
		font-style: normal;
		font-weight: 400;
	}
	.tk-raleway-med { 
		font-family: "raleway",sans-serif; 
		font-style: normal;
		font-weight: 500;
	}
	.tk-raleway-semibold { 
		font-family: "raleway",sans-serif; 
		font-style: normal;
		font-weight: 600;
	}
	.tk-raleway-bold { 
		font-family: "raleway",sans-serif; 
		font-style: normal;
		font-weight: 700;
	}
	.tk-raleway-ital-lite { 
		font-family: "raleway",sans-serif; 
		font-style: italic;
		font-weight: 300;
	}
	.tk-raleway-ital-reg { 
		font-family: "raleway",sans-serif; 
		font-style: italic;
		font-weight: 400;
	}
	.tk-raleway-ital-med { 
		font-family: "raleway",sans-serif; 
		font-style: italic;
		font-weight: 500;
	}
	.tk-raleway-ital-semibold { 
		font-family: "raleway",sans-serif; 
		font-style: italic;
		font-weight: 600;
	}
	.tk-raleway-ital-bold { 
		font-family: "raleway",sans-serif; 
		font-style: italic;
		font-weight: 700;
	}
	.tk-merriweather-reg { 
		font-family: "merriweather",serif; 
		font-style: normal;
		font-weight: 400;
	}
	.tk-merriweather-bold { 
		font-family: "merriweather",serif; 
		font-style: normal;
		font-weight: 700;
	}
	.tk-merriweather-ital-reg { 
		font-family: "merriweather",serif; 
		font-style: italic;
		font-weight: 400;
	}

/*
@font-face {
    font-family: ExistenceLight;
    src: url('webfonts/Existence-Light-webfont.eot');
    src: url('webfonts/Existence-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Existence-Light-webfont.woff') format('woff'),
         url('webfonts/Existence-Light-webfont.ttf') format('truetype'),
         url('webfonts/Existence-Light-webfont.svg#existencelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: ExistenceUnicaseLight;
    src: url('webfonts/Existence-UnicaseLight-webfont.eot');
    src: url('webfonts/Existence-UnicaseLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Existence-UnicaseLight-webfont.woff') format('woff'),
         url('webfonts/Existence-UnicaseLight-webfont.ttf') format('truetype'),
         url('webfonts/Existence-UnicaseLight-webfont.svg#existenceunicase_light') format('svg');
    font-weight: normal;
    font-style: normal;
} */

@font-face {
    font-family: Bruney;
    src: url('webfonts/Bruney.eot');
    src: url('webfonts/Bruney.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Bruney.woff') format('woff'),
         url('webfonts/Bruney.ttf') format('truetype'),
         url('webfonts/Bruney.svg#bruney') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Glamy-Regular;
    src: url('webfonts/Glamy-Regular.eot');
    src: url('webfonts/Glamy-Regular.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Glamy-Regular.woff') format('woff'),
         url('webfonts/Glamy-Regular.ttf') format('truetype'),
         url('webfonts/Glamy-Regular.svg#glamyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*@font-face {
	font-family: poiret-one;
	src: url('webfonts/poiret-one-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}*/


/*	@font-face { /* Josefin Sans Light put through FontSquirrel's Webfont Generator*/ 
/*		font-family: WebJsfnSans_light;
		src: url('webfonts/WebJSFNSans-light-webfont.eot');
		src: url('webfonts/WebJSFNSans-light-webfont.eot?#iefix') format('embedded-opentype'),
			 url('webfonts/WebJSFNSans-light-webfont.woff') format('woff'),
			 url('webfonts/WebJSFNSans-light-webfont.ttf') format('truetype'),
			 url('webfonts/WebJSFNSans-light-webfont.svg#WebJsfnSans_light') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face { /* Josefin Sans Regular put through FontSquirrel's Webfont Generator*/ 
/*		font-family: WebJsfnSans_regular;
		src: url('webfonts/WebJSFNSans-regular-webfont.eot');
		src: url('webfonts/WebJSFNSans-regular-webfont.eot?#iefix') format('embedded-opentype'),
			 url('webfonts/WebJSFNSans-regular-webfont.woff') format('woff'),
			 url('webfonts/WebJSFNSans-regular-webfont.ttf') format('truetype'),
			 url('webfonts/WebJSFNSans-regular-webfont.svg#WebJsfnSans_regular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: WebJsfnSans_italic;
		src: url('webfonts/WebJSFNSans-italic-webfont.eot');
		src: url('webfonts/WebJSFNSans-italic-webfont.eot?#iefix') format('embedded-opentype'),
			 url('webfonts/WebJSFNSans-italic-webfont.woff') format('woff'),
			 url('webfonts/WebJSFNSans-italic-webfont.ttf') format('truetype'),
			 url('webfonts/WebJSFNSans-italic-webfont.svg#WebJsfnSans_italic') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: DroidSansRegular; /* from FontSquirrel Webfont Kit */
/*		src: url('webfonts/DroidSans-webfont.eot');
		src: local('☺'),
			url('webfonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
			url('webfonts/DroidSans-webfont.woff') format('woff'),
			url('webfonts/DroidSans-webfont.ttf') format('truetype'),
			url('webfonts/DroidSans-webfont.svg#droid_sansregular') format('svg');
		font-weight: normal;
		font-style: normal;

	}

	@font-face {
		font-family: DroidSansBold; /* from FontSquirrel Webfont Kit */
/*		src: url('webfonts/DroidSans-Bold-webfont.eot');
		src: url('webfonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
			 url('webfonts/DroidSans-Bold-webfont.woff') format('woff'),
			 url('webfonts/DroidSans-Bold-webfont.ttf') format('truetype'),
			 url('webfonts/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
		font-weight: normal;
		font-style: normal;
	}*/

	@font-face {
		font-family: WebBSCregular; /* Bilbo Swash Caps put through FontSquirrel's Webfont Generator*/ 
		src: url('webfonts/WebBSC-regular-webfont.eot');
		src: local('☺'),
			url('webfonts/WebBSC-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('webfonts/WebBSC-regular-webfont.woff') format('woff'),
			url('webfonts/WebBSC-regular-webfont.ttf') format('truetype'),
			url('webfonts/WebBSC-regular-webfont.svg#WebBSCregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

/*	@font-face {
		font-family: DobkinPlain; /* webfont license from FontSquirrel*/
/*		src: url('webfonts/DobkinPlain-webfont.eot');
		src: local('☺'), 
			url('webfonts/DobkinPlain-webfont.eot?#iefix') format('embedded-opentype'),
			 url('webfonts/DobkinPlain-webfont.woff') format('woff'),
			 url('webfonts/DobkinPlain-webfont.ttf') format('truetype'),
			 url('webfonts/DobkinPlain-webfont.svg#dobkinplain') format('svg');
		font-weight: normal;
		font-style: normal;

	}*/

	html {
	/* explicitly define a starting font size of 16px as the different browsers don't seem to be consistent
			for default size of 16px like they used to be.

			then reduce "default" of 16px to 10 (16 x 62.5% =10)
									to make calculations of other sizes using ems 
									easier to figure in my head without needing a calculator
		*/

	/* [disabled]font-size: 62.5% !important; */
	/* [disabled]font-size: 1.2rem !important; */
	/* [disabled]font-size: 1.2rem; */
	}

/*
	body.Pixel #headerMain {
		margin-top: 45px;
	}
*/	

	body {
		background-color: #000;
		color: #FFF;
		font-family: "Gill Sans", Raleway, sans-serif;
		/*font-family: ExistenceLight, DroidSansRegular, Ayuthaya, 'Century Gothic', Corbel, Geneva, sans-serif; */
		font-weight: 300;
		font-size: 16px !important;
		font-size: 62.5% !important;
		font-size: 1rem !important;
		text-align: left;
		overflow: scroll;
	} 

body.modal-open {
	position: fixed; /* prevent body from scrolling under the open modal window */
}

/*h1, h2, h3, h4, h5, h6 {
	font-family: poiret-one-Regular, ExistenceUnicaseLight, sans-serif !important;
	font-weight: normal !important;
}*/

h1, h2, h3, h4, h5, h6 {
	font-family: pinot-grigio-modern, Raleway, sans-serif !important;
	font-weight: 400 !important;
	font-style: italic;
}

p, dt, dd, ul, ol, li, blockquote {
	font-size: 0.9rem !important;
	margin-bottom: 0.75em;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

p.tip {
	margin-top: -5px;
	margin-bottom: 10px;
	font-size: 0.7rem !important;
}

a, a:link {
	color: #fff;
	font-weight: bold;
	padding: 1px 3px;
}

a:visited {
	color: #ccc; 
	/* [disabled]color: #ced4da; bootstrap $gray-400 */
}

a:hover, a:active, a:focus {
	text-decoration: underline; /* bootstrap $gray-400 */
}

q {
	margin: 0;
	padding: 0;
}

ul, ol, li {
	list-style-position: outside;
	margin: 0;
	padding-left: 7px !important;
	text-align: left;
	font-style: normal;
}

ul.modal-list,
ul.modal-list ul,
ul.modal-list ul ul, 
ul.modal-list ul ul ul,
ul.modal-list ul ul ul ul {
	list-style-position: inside;
	padding-left: 11px !important;
	list-style-type: disc;
}

ol.card-list,
ol.card-list ol,
ol.card-list ol ol, 
ol.card-list ol ol ol,
ol.card-list ol ol ol ol {
	list-style-position: inside;
	padding-left: 11px !important;
	list-style-type: upper-roman;
}

ul.modal-list li,
ol.card-list li {
	font-size: 0.7rem !important;
	padding-left:  0 !important;
	margin-bottom: 5px;
}


ul.modal-list li ul,
ul.modal-list li ul li ul,
ul.modal-list li ul li ul li ul,
ul.modal-list li ul li ul li ul li ul,
ol.card-list li ol,
ol.card-list li ol li ol,
ol.card-list li ol li ol li ol,
ol.card-list li ol li ol li ol li ol {
	margin-top: 5px;
}

ul.modal-list li ul li,
ul.modal-list li ul li ul li,
ul.modal-list li ul li ul li ul li,
ol.card-list li,
ol.card-list li ol li,
ol.card-list li ol li ol li,
ol.card-list li ol li ol li ol li {
	/*margin-bottom: 5px;*/
	font-size: inherit;
}



ul.noBullets li {
	list-style-type: none;
	padding-left: 11px;
}

ol {
	list-style-type: upper-roman;
}

ol ol {
	list-style-type: upper-alpha;
}

ol ol ol {
	list-style-type: decimal;
}

ol ol ol ol {
	list-style-type: lower-alpha;
}

ol ol ol ol ol {
	list-style-type: lower-roman;
}

ol ol ol ol ol ol {
	list-style-type: lower-greek;
}

ol ol ol ol ol ol ol {
	list-style-type: decimal;
}

ul li ul li,
body.Google.Chrome.Pixel ul li ul li,
ol li ol li {
	font-size: inherit !important;
}

ul li ul li ul li, 
body.Google.Chrome.Pixel ul li ul li ul li,
ol li ol li ol li {
	font-size: inherit !important;
}

ul li ul li ul li ul li, 
body.Google.Chrome.Pixel ul li ul li ul li ul li,
ol li ol li ol li ol li {
	font-size: inherit !important;
}

ul li ul li ul li ul li ul li, 
body.Google.Chrome.Pixel ul li ul li ul li ul li ul li,
ul li ol li ol li ol li ol li {
	font-size: inherit !important;
}

dl {
	margin: 15px;
}

dt {
	margin-top: 20px;
	font-weight: bold;
	text-align: right;
	font-size: 2em;
	font-family: "Minion Pro", "Lucida Bright", serif;
}

dd {
	text-align: right;
	font-size: 1.7em;
	font-style: italic;
	font-family: "Minion Pro", "Lucida Bright", serif;
	margin-right: 0px;
	list-style-type: decimal;
}

br.showHide {
	display: inline;
}

/*	br.phoneBr { /* remove <br> for devices larger than phones */
/*			display: none; 
	}

	body.Google.Chrome.Pixel br.phoneBr { /* show br for phones */
/*		display: inline;
	}
*/	
img.emoticon {
	width: 15px !important; 
	height: 15px !important;
	box-shadow: none !important;
}


/*	=======================
		Free Floating Classes 
	====================== */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.alignleft {
	text-align: left !important;
}

.alignCenter {
	text-align: center !important;
}

.alignRight {
	text-align: right !important;
}

.alignJustify {
	text-align: justify !important;
}



.clearBoth {
	clear: both;
}

.card blockquote {
  margin: 0 0 1rem 1.5rem;
  border-left: 3px #aaa solid;
  padding: 1rem;
  font-family: Meriweather, serif;
  background-color: #eee;
}

.card blockquote p {
	margin-bottom: 15px !important;
}

.card blockquote p:last-of-type {
	margin-bottom: 0 !important;
}

.fancyAmp  {
   font-family:poiret-one, Baskerville,"Goudy Old Style",Palatino,"Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

.floatRight {
	float: right !important;
}

.floatleft {
	float: left !important;
}

.floatNone {
	float: none !important;
}

.frameInset-img {
	background-color: #000 !important;
	color: #fff !important;
	box-shadow: inset 0px 0px 8px 3px #fff;
	text-align: center;
}

.hellip::after {
	content: "\2026";
	font-family: sans-serif;
	font-weight: normal;
	line-height: 0.1;
}

.hide {
	opacity:0;
	left:-100%;
}

.more-less {
	display: none;
}

.pullOutTopLeft {
	margin: -1.5rem 1.2rem 1rem -1.5rem;
}

.pullOutLeft {
	float: left;
	margin: 1.1rem 1.2rem 0 -5rem;
}

.pullOutTopRight {
	float: right;
	margin: -2rem -3.5rem 1rem 1.2rem;
}
.pullOutRight {
	float: right;
	margin: 1.1rem -2rem 0 1.1rem;
}

.readMoreButton  { /* to open modal popup
	other possibility is readmore/readless which expands the card */
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-color: #444; /* aqua= mid 49afcd; lower 2f96b4, higher 5bc0de*/
	background-image: -moz-linear-gradient(top, #aaa, #444);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#aaa), to(#444));
	background-image: -webkit-linear-gradient(top, #aaa, #444);
	background-image: -o-linear-gradient(top, #aaa, #444);
	background-image: linear-gradient(to bottom, #aaa, #444);
	background-repeat: repeat-x;
	padding: 1px 10px 5px !important;
	font-size: 0.7rem;
	box-shadow: 0 0 3px 1px #666;
	border-radius: 10px;
	display: inline-block;
	margin-top: 7px;
	float: right;
}

/*Floating Back-To-Top Button with hide/show on scroll 100px */
.topBtn {
	position: fixed;
	bottom: 10px;
	/*float: right; */
	right: 18px;
	width: 30px;
	height: 38.5px;
	font-size: 0.7rem;
	border-color: rgba(85, 85, 85, 0.2);
	color: #ccc;
	background-color: rgb(100,100,100);
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
	vertical-align: top;
	font-weight: normal !important;
}

.topBtn:visited {
	color: #ccc;
}

.topBtn:hover,
.topBtn:active,
.topBtn:focus {
	color: #444;
	background-color: rgb(200,200,200);
	text-decoration: none;
}

.show {
	opacity:1;
}

.smaller {
	font-size: 0.65rem !important;
}

.smallerRight {
    float: right;
    font-size: 0.6em;
    margin-top: -35px;}


/* Accordion Dropdowns Customization */
.fa-plus::before {
	content: "\2b";
	font-weight: normal;
}

.fa-minus::before {
	content: "\2212";
	font-weight: normal;
}
/* END Accordion Dropdowns Customization */


/*	=========================
		END Free Floating Classes
	========================= */

#wrapper {
	position: relative;
	width: 95%;
}

#wrapper.container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#wrapper p[class^="viewport-"] {
	text-align: left;
	font-size: 0.5rem !important;
}

		
/* ============ BOOTSTRAP NAVBAR Customization ========= */
/* ###################################################### */
/* ==================== */
.navbar-dark button.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-dark button.navbar-toggler:hover,
.navbar-dark button.navbar-toggler:active,
.navbar-dark button.navbar-toggler:focus {
    background-color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-toggler-icon:hover,
.navbar-dark .navbar-toggler-icon:active,
.navbar-dark .navbar-toggler-icon:focus {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(52, 58, 64, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-toggler {
	font-size: 1.2rem;
	padding: 0rem 0.2rem 0.23rem;
}

.navbar-toggler-icon {
	height: 1.0rem;
	width: 1.0rem;
	padding: 0.2rem 0.5rem;
}

	.navbar-dark .navbar-nav,
	.navbar-dark .navbar-nav .nav-item {
		margin-left: 10px;
		font-family: pinot-grigio-modern, Poiret-one, "Gill Sans", sans-serif;
	}
	
.navbar-dark .navbar-nav .nav-link,
.navbar .dropdown-toggle, .navbar .dropdown-menu a {
	font-weight: 300;
}
	.navbar-dark .navbar-nav .nav-link:hover,
	.navbar-dark .navbar-nav .nav-link:active,
	.navbar-dark .navbar-nav .nav-link:focus {
 		color: rgba(255, 255, 255, 1) !important;
	}

.sr-only { /* hide except from screen-readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.dropdown-menu {
	background-color: #666;
}

.dropdown-item .nav-link {
	color: rgba(255, 255, 255, 0.8) !important;	
}

/* producing dark background on dropdown nav items hover/focus */
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: #444;
}

.dropdown-item .nav-link:hover {
	color: rgba(255, 255, 255, 0.8);	
}

/* Navbar Dropdowns */
.scrollable {
	height: 50vh;
	width: auto;
	overflow-x: hidden;
	overflow-y: auto;
}

.show .scrollable {
	position: relative;
	top: 5px !important;
	left: 5px !important;
	width: auto;
	overflow-x: hidden;
}


/*  END Bootstrap NAV customization */
/* ============================================*/
/* ###################################################### */


/* ============== BEGIN Page Header Styles =========== */

#headerMain {
	margin-top: 50px;
	/* Move page header below the fixed-top navbar */
}

body.Pixel #headerMain {
	margin-top: 55px !important;
	margin-bottom: -5px !important;
}

#headerSub {
	width: 100%;
	margin: 20px 0 0;
	padding: 0 0 7px;
}

body.Pixel #headerSub {
	margin-top: 25px;
	margin-bottom: 18px;
	padding-bottom: 33px !important;
}

#headerMain, 
#headerSub {
	text-align: right;
	margin-bottom: 10px;
}

#headerMain #logoImage {
	margin-bottom: 0;
}

/* Make header logo image responsive */
#headerMain div#logoImage img,
#headerSub div#logoImage img {
	width: 100%;
	max-width: 400px;
	margin-top: 0.5rem;
}

body.Mozilla.Firefox.Unknown #headerSub div#logoImage img,
body.Google.Chrome.Pixel #headerSub div#logoImage img,
body.Mozilla.Firefox.mac #headerSub div#logoImage img {
	margin-top: 0.25rem;
	margin-right: 0;
}


/* The following #headerSub h1-h4 styles are for screen readers only */
#headerSub h1 {
	/*   logo graphic now contains h1 text, leave h1 text in html for search engines and screen readers */
	margin-bottom: -0.07em;
	font-size: 2.05em;
	font-weight: normal;
	text-align: left;
	letter-spacing: 0.06em;
	font-family: "WebBSCregular", "Blue Island Std", 
						"Chancery Cursive - DGL Italic", ChocolateBox, cursive;	
}

#headerSub h1 sup {
	font-size: 0.7em;
}

#headerSub h2 {
	font-size: 1.15em;
	font-weight: normal;
	letter-spacing: 0.05em;
	font-style: normal;
	text-align: left;
	margin-bottom: -0.7em;
}

#headerSub h3 {
	font-family: 'WebJsfnSans_italic', "DroidSansRegular", Verdana, Geneva, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 0.87em;
	letter-spacing: 0.06em;
	margin-bottom: 1em;
	text-align: left;
}

/* ============== BEGIN Page Content Styles =========== */
/* #contentMain & #contentSub styles */

/* CUSTOMIZE responsiveSlides.css styles for Home Page Slideshow*/
#contentMain .rslides {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;	
	box-shadow: none;
}

#contentMain .rslides li { /* responsive slideshow on home page*/
	margin: 0;
}
/*  END responsiveSlides.css customization */

/* ============================================*/

/* ========= BEGIN #contentSub styles */
#contentSub { 
	width: 100%;
	margin-top: 0.5rem;
	letter-spacing: 0.04em;
}

#contentSub header h3 {
	font-size: 2em;
	text-align: left;
	margin-bottom: 0.25em;
	margin-top: 1.25rem;}

#contentSub header h4 {
	font-size: 1.1rem;
	font-style: normal;
	font-weight: normal;
	text-align: right;
	margin-top: 0.3rem;
}

body.Pixel #contentSub header h4 {
	font-size: 1.2rem !important;
}

#contentSub header h5 {
	font-family: poiret-one, Raleway, sans-serif !important;
	text-align: right;
	margin-top: -10px;
	/*margin-bottom: 25px;*/
}

body.Pixel #contentSub header h5 {
	font-size: 1rem !important;
}

/* ======= END #contentSub header styles ====== */
/* ============================================*/
/* ======== BEGIN main content styles followed by page specific styles ======== */
	/* Jumbotron */
.jumbotron {
	background-color: transparent;
	padding: 0;
	margin-bottom: 1rem;
}

#contentSub.jumbotron {
	border-top: 1px solid #999;
	margin-bottom: 1rem; /* override Bootstrap 2rem */
	border-top-left-radius: unset;
	border-top-right-radius: unset;
	margin-top: -0.55rem !important;
}


#contentSub.jumbotron header h4[class^="gallery-"] {
	font-style: normal;
	text-align: right;
	padding-top: 5px;
	margin-bottom: 0 !important;
	font-size: 1.1rem;
}

#contentSub header .matFrameButtons {
	margin-top: 0.1rem;
	margin-bottom: 0.3rem;
	font-size: 0.7rem !important;
	text-align: center;
	line-height: 1.15;
	/*color: pink !important;*/
}

body.Pixel #contentSub header .matFrameButtons {
	font-size: 0.5rem !important;
}

#contentSub header .matFrameButtons span {
	display: none;
}

#contentSub header .matFrameButtons br {
	display: inline;
}

#contentSub header .matFrameButtons .btn-group {
	/* margin-top: -0.2rem; for 450 wide */
    margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

#contentSub header div.btn-group .buttonMatFrame {
	display: inline-block;
	color: #ffffff;
	text-align: center;
	letter-spacing: 1.5px;
	white-space: nowrap;
	vertical-align: middle;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
	background-color: #343739 !important;
	padding: 0.5px 6px 0.5px !important;
	/* font-size: 0.6rem; for 450 wide */
	font-size: 0.48rem;
	font-style: normal;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#contentSub header div.btn-group .buttonMatFrame:hover,
#contentSub header div.btn-group .buttonMatFrame:active,
#contentSub header div.btn-group .buttonMatFrame:focus,	#contentSub header div.btn-group .buttonMatFrame.chosen {
	background-color: #ccc !important;
	color: #000;
	/* override Bootstrap btn btn-secondary color */
}

#contentSub header .matFrameButtons + h4 {
	clear: both;
	font-size: 1.2rem;
}

/* --------- BEGIN .card and .modal styles ------- */
#contentSub.jumbotron .card,
#contentSub.jumbotron .card .card-header,
#contentSub.jumbotron .card .card-body,
#contentSub.jumbotron .card .list-group-item,
#contentSub.jumbotron .modal .list-group-item {
	background-color: transparent;
}

#contentSub.jumbotron .card {
	background-color: #aaa;
	padding: 0;
}

#contentSub.jumbotron .card .card-header,
#contentSub.jumbotron .modal .modal-title {
	font-size: 0.9rem;
	text-align: right;
	border-bottom: 0; /*rgba(0, 0, 0, 0.125);*/
	color: #000;
	padding: 0.5rem 0.7rem 0.5rem 0.5rem !important;
}

#contentSub.jumbotron .card .card-header {
	font-size: 0.85rem; /* to make longest title fit in card header */
}

#contentSub.jumbotron .modal .modal-title {
	padding-right: 0 !important;	
}

#contentSub.jumbotron .card .card-body .list-group,
#contentSub.jumbotron .modal .modal-body .list-group {
	margin-left: 0.3rem;
	margin-bottom: 0.5rem;
	padding-left: 11px !important;
}

#contentSub.jumbotron .card .list-group-item,
#contentSub.jumbotron .card .card-body .list-group-item,
#contentSub.jumbotron .modal .modal-body .list-group-item {
	border: none;
	line-height: 1.2;
	padding: 0;
	margin: 0 0 7px;
	font-size: 0.7rem !important;
}

body.Google.Chrome.Pixel #contentSub.jumbotron .card .list-group-item 
	.list-group-item,
body.Google.Chrome.Pixel #contentSub.jumbotron .card .card-body .list-group-item 
	.list-group-item,
body.Google.Chrome.Pixel #contentSub.jumbotron .modal .modal-body .listgroup-item 
	.list-group-item {
	font-size: 1.1762rem !important; /* to reverse .85rem of .85rem ??*/
}

body.Google.Chrome.Pixel #contentSub.jumbotron .card .list-group-item 
	.list-group-item .list-group-item,
body.Google.Chrome.Pixel #contentSub.jumbotron .card .card-body .list-group-item 
	.list-group-item .list-group-item,
body.Google.Chrome.Pixel #contentSub.jumbotron .modal .modal-body .listgroup-item 
	.list-group-item .list-group-item {
	font-size: 1.38412rem !important; /* to reverse .85rem of .85rem of .85rem ??*/
}
			


#contentSub.jumbotron .modal .modal-body.frameInset-wht .quotations {
	border-left: 2px #999 solid;
	padding: 7px;
	margin-left: 5px;
	background-color: #eee;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .quotations p {
	margin-bottom: 2px;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .quotations q {
	font-family: Merriweather, serif;
	font-weight: 700;
	font-size: 0.6rem;
	text-align: left !important;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .attribution {
	text-align: right;
	float: right;
	margin-bottom: 12px !important;
	/* font-size: 0.7rem; */
	/* for wider screens 
		width: 50%, and then 30%, then 25%
		float: right	
	*/
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .attribution:last-of-type {
	margin-bottom: 5px !important;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .attribution + p {
	clear: both;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup {
	float: right;
	margin-left: 0.5rem;
	width: 40%;
	text-align: right;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup img {
	width: 100%;
	height: auto;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup .caption {
	margin-top: -15px;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup .galleryThumb {
	margin-bottom: 25px !important;
}

#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup .galleryThumb:last-child {
	margin-bottom: 10px !important;
}

#contentSub.jumbotron .gallery-cosmogenesis div[class*="col-sm-3 card"] {
    margin: 0.4rem;
}




/* =========== ABOUT page styles ============ */
/* ####################################### */
/*#contentSub.jumbotron.about #elevSpeech {
	margin-bottom: 10px;
	font-size: 0.8rem;
} 

#contentSub.jumbotron.about #elevSpeech h6 {
	font-size: 0.7rem;
	text-align: justify;
	margin-bottom: 0;
}

body.Google.Chrome.Pixel #contentSub.jumbotron.about header#elevSpeech h6 {
	font-size: 0.6rem;
}*/

#contentSub.jumbotron.about .row {
	justify-content: center; /* to center child cards */
}

#contentSub.jumbotron div[class*="col-sm-3 card"] h1.card-header, 
#contentSub.jumbotron div[class*="col-sm-3 card"] h2.card-header, 
#contentSub.jumbotron div[class*="col-sm-3 card"] h3.card-header, 
#contentSub.jumbotron div[class*="col-sm-3 card"] h4.card-header, 
#contentSub.jumbotron div[class*="col-sm-3 card"] h5.card-header, 
#contentSub.jumbotron div[class*="col-sm-3 card"] h6.card-header {
	font-family: pinot-grigio-modern, peignot, sans-serif !important;
/*	font-weight: normal !important;*/
	font-weight: 400 !important;
}

#contentSub .jumbotron.about .row {
	justify-content: center; /* to center child cards */
}

#contentSub div[class*="col-sm-3 card"] { /* aboutDefinition, aboutProject, etc*/
	/* margins for Spotlight cards */
	margin: 0 1% 15px;
}

#contentSub div[class*="col-sm-3 card synchronistic"] { 
	/* since normal header for synchronistic isn't diplayed*/
	margin-top: 40px;
}

#contentSub .aboutDefinition .card-body h4,
#openModal_definition .modal-body h4 {
	margin-bottom: 0;
	font-size: 1.2rem;
	margin-top: 0.4rem;
}

#contentSub .aboutDefinition .card-body h5,
#openModal_definition .modal-body h5 {
	margin-bottom: 3px;
	font-size: 0.9rem;
}


#contentSub .aboutDefinition .card-body h5 span,
#openModal_definition .modal-body h5 span {
	font-size: 0.8rem;
	font-weight: normal;
}

#contentSub .aboutDefinition .card-body h5,
#openModal_definition .modal-body h5 {
	font-size: 0.8rem;
}

#contentSub .aboutJourney .card-header h5 + h6,
#contentSub #openModal_aboutJourney .modal-header h5 + h6 {
	margin-top: -0.5rem !important;
	font-size: 1rem !important;
	margin-bottom: 0.5rem !important;
	text-align: right !important;
}

.modal-footer {
	border-top: none;
	padding: 0 0.5rem 0.5rem;
}

.modal-footer button[data-dismiss="modal"] {
	font-size: 0.7em;
	padding: 3px 5px;
	font-family: Raleway, GurmukhiMN;
}



/* ============ END About Page Styles ======== */


#contentSub blockquote p {
	font-style: italic;	
	margin-bottom: 0.2em;
}

#contentSub blockquote p.attribution {
	font-size: 0.8em;
	text-align: right;
	margin-bottom: 1em;
}

#contentSub article {
	background-color: #666;
	line-height: 1.4;
	padding: 1rem 1.2rem 0.5rem;
	clear: both;
}

#contentSub article a:hover {
	color: #333;
}

#contentSub article a:visited {
	/* [disabled]color: #fff; */
	color: #ced4da; /* bootstrap $gray-400 */
}

#contentSub article section {
	padding: 0;
}

#contentSub article section header {
	border-bottom: 1px solid #fff;
	margin-bottom: 1rem;
	margin-top: -0.5rem;
}

#contentSub article section h3,
#contentSub article section h4,
#contentSub article section h5,
#contentSub article section h6 {
	text-align: left;
	font-weight: normal;
}

#contentSub article section header h5 {
	font-size: 2.5em;
	text-align: right;
	letter-spacing: 3px;
	font-family: 'WebBSCregular',"Kaushan Script", "Monotype Corsiva", cursive;
}

#contentSub article section header h6, 
#contentSub article section h6 {
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	font-variant: small-caps;
}

#contentSub article section h6.contactLink {
	margin-bottom: 20px;
	font-size: 1.3em;
	font-variant: normal;
	text-align: center;
}

#contentSub article p.smaller {
	font-size: 0.8em !important;
	font-style: italic;
}

#contentSub header h6.smaller {
	font-size: 0.7em !important;
	font-style: italic;
	line-height: 1.5;
}

#contentSub article p.infoClick {
	font-size: 0.6em;
	font-style: italic;
	text-align: right;
	margin-top: -25px;
}
	
#contentSub header h4#gallery {
	font-family:  ExistenceUnicaseLight, 'WebJsfnSans_italic', 
					"Droid Sans Regular", Verdana, Geneva, sans-serif;
	font-size: 1.3rem;
	font-style: normal;
	font-weight: normal;
	text-align: left;
}

#contentSub #gallery {
	clear: both;
}

#contentSub article section .frameOutset {
	margin: 1em 0.75em ;
	padding: 1.25em 2.25em;
	background-color: #999;
	box-shadow: 0px 0px 7px 6px #333;
	text-indent:  0;
}

#contentSub article section .frameInset-wht,
#contentSub article section.frameInset-wht {
	margin: 1em 0.25em;
	padding: 1.2rem 1.5rem;
	background-color: #999;
	box-shadow: inset 0px 0px 7px 6px #333;
	text-indent: 0;
	letter-spacing: 0.09rem;
}


#contentSub .card .card-body.frameInset-wht,
#contentSub .modal .modal-body.frameInset-wht {
	margin: 0 0.5rem 0.5rem;
	padding: 1rem 0.8rem;
	background-color: #fff;
	color: #000;
	box-shadow: inset 0px 0px 7px 3px #666;
	text-indent: 0;
	line-height: 1.2;
	text-align: justify;
}

#contentSub article section .frameInset-wht,
#contentSub article section.frameInset-wht {
	margin: 1em 0.25em;
	padding: 1.2rem 1.5rem;
	background-color: #999;
	box-shadow: inset 0px 0px 7px 6px #333;
	text-indent: 0;
	letter-spacing: 0.09rem;
}

#contentSub article section .frameInset-wht .lightBoxSet {
	text-align: center;
}

#contentSub article section .frameInset-wht .lightBoxSet figure {
	width: 30%;
	display: inline-block;
	margin-bottom: 0.5rem;
}

#contentSub article section .frameInset-wht .lightBoxSet figure:first-of-type {
	margin-right: 0.3rem;
}

#contentSub article section .frameInset-wht .lightBoxSet figure:last-of-type {
	margin-left: 0.3rem;
}

#contentSub .modal .modal-header button[data-dismiss="modal"],
#contentSub .modal .modal-footer button[data-dismiss="modal"] {
	font-size: 0.5rem;
	font-family: Raleway, san-serif;
	font-weight: 600;
	color: #000;
	text-shadow: none;
	border: 1px solid #aaa;
	border-radius: 0.25rem;
	background-color: #fff;
	padding: 3px 5px;
	opacity: 1;
}

#contentSub .modal .modal-header button[data-dismiss="modal"] {
	margin-left: 6px;
	margin-top: 6.5px;
	float: left;
}

#contentSub .modal .modal-footer button[data-dismiss="modal"]{
	margin-right: 0;
	margin-bottom: -1px;
	float: right;
}

#contentSub .modal .modal-body.frameInset-wht .beforeAferTip {
	text-align: center;
	font-size: 0.6rem;
}

#contentSub .card .card-body.frameInset-wht .headerImg,
#contentSub .modal .modal-body.frameInset-wht .headerImg {
	text-align: center;
	width: 98%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 10px;
}

#contentSub .card .card-body.frameInset-wht .headerImg img,
#contentSub .modal .modal-body.frameInset-wht .headerImg img {
	height: auto;
	width: 95%;
	margin: 0 0 0 0.05rem;
}

#contentSub .card .card-body.frameInset-wht .headerImg .caption,
#contentSub .modal .moday-body.frameInset-wht .headerImg .caption{
	font-size: 0.6rem;
	font-style: italic;
	margin-top: -15px;
}

#contentSub .modal .modal-body.frameInset-wht .cocoen-container .caption {
	font-size: 0.6rem !important;
	font-style: italic;
	margin-top: 5px;
} 

#contentSub .card .card-body.frameInset-wht h6,
#contentSub .modal .modal-body.frameInset-wht h6 {
	text-align: left;
	font-size: 0.8rem;
	font-weight: bold;
}

#contentSub .card .card-body.frameInset-wht p,
#contentSub .modal .modal-body.frameInset-wht p {
	font-size: 0.7rem !important;
}

#contentSub .card .card-body.frameInset-wht a,
#contentSub .card .card-body.frameInset-wht a:link,
#contentSub .modal .modal-body.frameInset-wht a,
#contentSub .modal .modal-body.frameInset-wht a:link {
	color: #0000ff !important;
	text-decoration: underline !important;
	font-weight: normal;
}

#contentSub .card .card-body.frameInset-wht a.readMoreButton,
#contentSub .card .card-body.frameInset-wht a:link.readMoreButton,
#contentSub .card .card-body.frameInset-wht a:visited.readMoreButton{
	color: #fff !important;
	text-decoration: none !important;
}

#contentSub .card .card-body.frameInset-wht a:hover.readMoreButton,
#contentSub .card .card-body.frameInset-wht a:active.readMoreButton,
#contentSub .card .card-body.frameInset-wht a:focus.readMoreButton {
	color: #00f !important;
	background-color: #aaa; /* aqua= mid 49afcd; lower 2f96b4, higher 5bc0de*/
	background-image: -moz-linear-gradient(top, #666, #aaa);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#aaa));
	background-image: -webkit-linear-gradient(top, #666, #aaa);
	background-image: -o-linear-gradient(top, #666, #aaa);
	background-image: linear-gradient(to bottom, #666, #aaa);
	text-decoration: underline !important;
	padding: 3px 10px 3px !important;
}

#contentSub .modal-body.frameInset-wht .headerImg .galleryThumb.landscape {
	width: 250px; /* this set of styles may not be used ?? */
	height: auto;
	display: inline-table;
	margin: 10px; 
}

#contentSub .modal-body.frameInset-wht .headerImg .galleryThumb.landscape img {
	float: none;
	width: 100%;
	margin: 0;
}

#contentSub .card-body.frameInset-wht .mainImg .caption,
#contentSub .modal-body.frameInset-wht .headerImg .caption,
#contentSub .card-body.frameInset-wht .galleryThumb .caption,
#contentSub .modal-body.frameInset-wht .galleryThumb .caption {
	font-size: 0.6rem !important;
	text-align: center;
	margin-top: -10px;
	padding: 0 2px;
	color: #000;
	hyphens: none;
}

#contentSub .aboutCameras .modal .modal-body.frameInset-wht .camerasGroup {
	float: right;
	margin-left: 1.2rem;
	width: 40%;
	text-align: right;
}

#contentSub .aboutCameras .modal .modal-body.frameInset-wht .camerasGroup img {
	width: 100%;
	height: auto;
}

#contentSub .aboutCameras .modal .modal-body.frameInset-wht .camerasGroup caption {
	text-align: center;
	font-weight: bold;
	font-size: 0.45rem;
	margin-top: -0.8rem;
	margin-bottom: 0.8rem;
}

#contentSub article figure.pullOutLeft,
#contentSub article div.pullOutLeft {
	float: left;
	margin: 1.1em 1.2em 0 -5em;
}

#contentSub article#synchronisitic figure#synchronisitic.pullOutRight {
	float: right;
	margin: 0 -4.5em 0 1.2em;
}


#contentSub article figure.pullOutRight.muizHeadshot,
#contentSub article div.pullOutRight.muizHeadshot {
	float: right;
	width: 35%;
	margin: -2.5rem -2em 0 1.1em;
	/*margin: -5.5em 1.2em 1rem -2.5em;*/

}

#contentSub article figure.pullOutLeftTop,
#contentSub article div.pullOutLeftTop {
	float: left;
	width: 32%;
	margin: -1.5em 1.2em 1rem -1.5em;
}

#contentSub article figure.pullOutRightTop,
#contentSub article div.pullOutRightTop {
	float: right;
	margin: -2.4em -3.9em 1em 1.2em;
}

#contentSub article section figure img,
#contentSub article section div img,
#contentSub section div img,
#contentSub section div.card-body .headerImg img[src*=".jpg"],
#contentSub section div.card-body .headerImg img[src*=".png"] {
	box-shadow:  0px 0px 4px 3px #999;
	width: 100%;
	height: auto;
}

#contentSub section.card-body li.withImg-float-right div.galleryThumb {
	max-width: 210px; /* restrict size of cosmogenesis img in list item */
	float: right;
	margin-right: 7px;
}

#contentSub section div.card .card-header {
	color: #000;
	font-size: 1.1rem;
}

#contentSub figure img.treeBarkFace {
	/* [disabled]width: 330px; */
	/* [disabled]height: 100%; */
}


/*
#contentSub article section .aboutOverview li::before,
.card .card-body .list-group-item::before,
.modal .modal-body .list-group-item::before {
	content: "\2600";
	color: #000 !important;
	/* 0027A3 right arrow, 
	☀ 2600 = black sun+rays
	☼ 263C = open sun+rays
	♦ 2666 = black diamond
	★ 2605 = black star
	📷 = 1F4F7*/
/*	margin-top: -20px;
	font-size: 0.9rem;
	margin-right: 5px;
}

#contentSub article section .aboutOverview li li::before,
.card .card-body .list-group-item .list-group-item::before,
.modal .modal-body .list-group-item .list-group-item::before {
	content: "\263C";
	color: #000 !important;
	/* 0027A3 right arrow, 
	☀ 2600 = black sun+rays
	♦ 2666 = black diamond
	★ 2605 = black star
	📷 = 1F4F7*/
/*	margin-top: -20px;
	font-size: 0.8rem;
	margin-right: 5px;
	margin-left: 15px;
}

#contentSub article section .aboutOverview li li li::before,
.card .card-body .list-group-item .list-group-item .list-group-item::before,
.modal .modal-body .list-group-item .list-group-item .list-group-item::before {
	content: "\2605";
	color: #000 !important;
	/* 0027A3 right arrow, 
	☀ 2600 = black sun+rays
	♦ 2666 = black diamond
	★ 2605 = black star
	📷 = 1F4F7*/
/*	margin-top: -20px;
	font-size: 0.9rem;
	margin-right: 5px;
}
*/
#contentSub article section .aboutOverview li input {
	margin-top: -25px;
	margin-left: 5px;
	padding-left: 25px;
}

#contentSub article section .aboutOverview li a,
#contentSub article section .aboutOverview li a:link,
#contentSub article section .aboutOverview li a:visited,
#contentSub article section .aboutOverview li input {
	color: #fff;	
}

#contentSub article section .aboutOverview li a:hover,
#contentSub article section .aboutOverview li a:active,
#contentSub article section .aboutOverview li a:focus,
#contentSub article section .aboutOverview li input:hover {
	text-decoration: underline;
}

#contentSub article section .aboutDefinition h4 {
	float: right;
	font-size: 1.9rem;
	font-weight: bold;
	margin-bottom: 0.1em;
	text-align: right;
}

#contentSub article section .aboutDefinition h5 {
	margin-bottom: 0;
	font-size: 1.2em;
	font-weight: normal;
	text-align: right;
}

#contentSub article section .aboutDefinition h6 {
	font-size: 0.9rem;
	font-weight: bold;
	font-variant: normal;
	line-height: 1.6rem;
	margin-bottom: 0.5em;
	text-align: right;
	/* [disabled]color: #333; */
}

#contentSub article section .aboutDefinition ul {
	margin: 2.5rem 0 0;
	padding: 0;
	background-color: inherit;
	clear: both;
}

#contentSub article section ul li {
	list-style-position: outside;
	list-style-type: disc;
	text-align: left;
	font-size: 0.95rem;
	margin-right: 0;
	margin-bottom: 0.4em;
	word-spacing: 0.05em;
	line-height: 1.4rem;
}

#contentSub article section .aboutDefinition ul li span.bullet,
#contentSub article section .aboutDefinition ul li ul li span.bullet {
	font-size: 0.5rem;
}

#contentSub article p {
	margin-bottom: 0.7em;
	text-align: justify;
	font-size: .75em;
	text-indent: 0;
}

.dropCap::first-letter {
	float: left;
	font-size: 2.8em;
	text-transform: capitalize;
	line-height: 25px;
	padding-top: 6px;
	padding-right: 3px;
	padding-left: 0;
	margin-left: -3px;
}

.Mozilla.Firefox.mac .dropCap:first-letter {
	font-size: 3.9em;
	margin-top: 0;	
}

#contentSub article p.indent {
	margin-left: 2.5em;
	margin-right: 2.5em;
	background-color: #666;
	padding: 1em 1.5em;
	font-style: italic;
	font-size: 0.9em;
}

#contentSub article .backToTop a:visited {
	color: #fff;
}

#contentSub article .backToTop a:hover,
#contentSub article .backToTop a:active {
	color: #999;
}

#contentSub article section p+ul {
	margin-top: 1rem;
}


#contentSub article section ul li ul {
	margin: 0.5em 0 0.5em 1em;
    padding: 0;	
	background-color: inherit;
}

#contentSub article section ul li span.bullet,
#contentSub article section ul li ul li span.bullet {
	font-size: 0.8em;
}


#contentSub article section ul li ul li {
	list-style-image: url(../grafix/listStar.gif);
/*	list-style-image: url(../grafix/bulletFilmRoll.png);*/
	font-size: inherit;
	margin-right: 0;
}

#contentSub #slideShow { /* is this EVER applied?? */
	opacity: .67;
	filter:alpha(opacity=67);
	position: absolute;
	z-index: -10;
	top: 9em;
	left: 17em;
}

ul#slideshow,
ul#slideshow li {
	padding-left: 0 !important;
}

#slideshow p.caption {
	font-size: 0.6rem !important; 
	font-weight: normal;
	background: rgba(150,150,150, .7) !important;
}

/*===== BEGIN GALLERY Styles ======*/

#gallery {
	width: 100%;
	text-align: center;
}

#gallery section {
	margin-bottom: 30px;
}

#gallery h6 {
	margin-bottom: 10px;
	text-align: left;
	border-bottom: 1px solid #999;
}

#gallery h6:first-child {
	margin-top: 0;
}

#gallery .galleryThumb, /* a, */
#subGallery .galleryThumb { /*a */
	display: inline-block;
	text-decoration: none;
	margin: 12px; /* increased from 10px */
}

#gallery.image-row .folder a {
/*	margin: 0; */
}

/* ~~~~~~~~~~~~~~ for all normal image galleries */
/* ==figure #gallery figure.galleryThumb {*/
#gallery .galleryThumb { 
	/* for all normal image galleries */
	display: inline-table; 
	/* normally use display inline-block with text-align center in 
				parent element to center divs, but lose control over 
				amount of space on right side, if layout is right aligned
				AND for images with multi-line captions, vertical alignment is 
				is along caption bottom for "inline-block", 
				"inline-table" aligns them along image top */
	vertical-align: top;
	/* box-sizing: border-box forces padding/margin to be included within width/height */
	-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
     box-sizing: border-box;	
}

body.Mozilla.Firefox.mac #gallery .galleryThumb {
	/* [disabled]margin-left: 4px; */
	/* [disabled]margin-right: 4px; */
}

#gallery .galleryThumb.portrait,
#contentSub .modal-body .galleryThumb.portrait {
	width: 90px; /* 33px; 43px;  */
	height: 135px; /* 50px;  65px;  */
}

#gallery .galleryThumb.landscape { 
	width: 135px; /* 33px; 43px;  */
	height: 90px; /* 50px;  65px;  */
}

#gallery .galleryThumb.landscape.gallery-cosmogenesis {
    width: 135px;
    height: 55px;
    float: right;
    line-height: 0.5;
    margin: 5px 6px 5px 7px;
}

body.Google.Chrome.Pixel #gallery .galleryThumb.portrait {
	width: 80px; /* 90px 33px; 43px;  */
	height: 120px; /*135px 50px;  65px;  */
}

body.Google.Chrome.Pixel #gallery .galleryThumb.landscape {
	width: 120px; /*135px 33px; 43px;  */
	height: 80px; /*90px 50px;  65px;  */
}

body.Google.Chrome.Pixel #contentSub #gallery.gallery-cosmogenesis .colPhotosCosmogenesis {
	margin-bottom: 0.25px;
}

#gallery .galleryThumb .caption {
	font-size: 0.7rem !important; /* increased from 0.6rem */
	text-align: center;
	padding: 0 2px;
	margin-top: -21px;
	color: #fff;
	hyphens: none;
}

body.Apple.Safari.mac #gallery .galleryThumb .caption,
body.Google.Chrome.mac #gallery .galleryThumb .caption {
	margin-top: 7px;
}

body.Google.Chrome.Pixel #gallery .galleryThumb .caption {
	margin-top: 7px;
}

#gallery .galleryThumb.folder .caption {
	margin-top: 15px;
}


/* ******************************************** */
/* ----- BEGIN Individual Gallery Styles -----  */
/* ******************************************** */

/* ******************************************** */
/* ----- BEGIN Galleries Overiew pages with folder graphics */
/* ******************************************** */
#gallery .galleryThumb.folder {
	background: url(../grafix/folderGray75.png) 0 0 no-repeat;
	background-size: 100%;
	width: 135px; /* 50px;  65px; 95px; */
	height: 90px; /* 33px; 43px; 63px; */
	margin: 5px 10px 10px;
	padding: 18px 5px 0;  /* center image within the folder */
}

#gallery .galleryThumb.folder img {
	width: 117px; /* 107px; */
	height: 78px; /* 83px; */
	box-shadow: 0 0 4px 3px #555;
}

body.Google.Chrome.Pixel #gallery .galleryThumb.folder {
	width: 120px;
	height: 80px;
	margin: 5px 8px 12px;
	padding: 16px 1px 4px; /* center img within the folder */		
}

body.Google.Chrome.Pixel #gallery .galleryThumb.folder img {
	width: 102px;
	height: 68px;
}

body.Google.Chrome.Pixel #gallery .galleryThumb.folder .caption {
	font-size: 0.7rem;
}

#contentSub.jumbotron .card.single-card.exhib .card-body.frameInset-wht p.nb,
#contentSub.jumbotron .card.single-card.exhib .card-body.frameInset-wht p.nbLinks {
	font-size: 0.7rem !important;
	font-style: italic;
	margin: 0 auto 0.5rem;
	width: 90%;
	border-top: 0.5px solid #aaa;
	padding: 0.1rem 0;
}

#contentSub.jumbotron .card.single-card.exhib .card-body.frameInset-wht p.nbLinks {
	text-align: center;
	margin-top: -0.2rem;
	padding-bottom: 0.2rem;
	border-top: none;
	border-bottom: 0.5px solid #aaa;
}

/* ******************************************** */
/* ----- END Galleries Overiew pages with folder graphics */
/* ******************************************** */


/* ******************************************** */
/* ----- BEGIN 5x7 Cards & FlipCard Popup Styles ----- */
/* ******************************************** */
/*  This is the nested elements in a modal pop up
1	.modal
	.modal-backdrop
	2	.bootstrap-dialog
	3		.modal-dialog
	4			.modal-content
	5				.modal-header
	6					.bootstrap-dialog-header
	7						.bootstrap-dialog-title
	8						.bootstrap-dialog-close-button
	9						button.close
	10				.modal-body
	11					.bootstrap-dialog-body
	12						#modalCard.container-fluid ... binding ID for jQuery
	13							.row
	14								.col-sm-3 .col-xs-6
	15									.flip-card
	16											.front.front-side
	17											img
	18										.back.back-side
	19											img
	20				.modal-footer
						
*/

/*1 .modal-open*/
	body.modal-open {
		padding-right: 0;
	}
/*2 .modal */
	.modal {
		/* [disabled]max-width: 450px; */
		top: 60px;
		left: 15px;
		right: 15px;
		padding: 0;
		color: #fff;
		text-align: left;
	}

body.modal-open #openModal_cameras.modal {
		;
}
	
/*2*/
	.modal bootstrap-dialog {
		padding: 0;	
	}
	
/*3*/
	.modal-dialog {
		bXXox-shadow: 0 0 5px 1px #ccc;
	}
	
/*4*/
/*	.modal-content {
		background-color: #aaa !important;
	} */
	
/*5*/
	.modal-header {
		padding: 1.05rem 0.7rem 0 0;
		border-bottom: none;
		display: block;
	}
	
	.bootstrap-dialog.type-primary .modal-header {
    	background-color: transparent !important;
	}
	
/*7*/
	.bootstrap-dialog .bootstrap-dialog-title {
		display: none !important;
	}
	
/*8*/

	.bootstrap-dialog .bootstrap-dialog-close-button .close {
		border-radius: 50%;
		width: 34px;
		height: 34px;
		padding: 9.5px 0 17px 2px !important;
		background: #000;
		border: 1px solid #fff;
		color: #444;
		text-align: center;
		font-size: 32px;
		line-height: 0;
		opacity: 1;
		margin-top: -25px;	}
			
/*10*/
	.modal-body {
		padding: 1rem 0 0;
	}
	
/*12*/
	#modalCard.container-fluid {
		padding: 0;
	}
		
/*14*/
	.col-sm-3 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100% !important;
	}	
	
/*15*/
	.flip-card {
		width: 100% !important;
		height: auto !important;	
		text-align: center;
	}

/*16*/
	.front.front-side img,
	.back.back-side img {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		border: 1px transparent solid;
	}
	
/*17*/
	.modal-body img.portrait,
	.modal-body img.landscape {
		width: 100%;
		height: auto;
	/* [disabled]max-width: 450px; */
	}
		
/* ******************************************** */
/* ----- END FlipCard 5x7 Cards Popup Customized Styles -----*/
/* ******************************************** */


/* ------ BEGIN Gallery Cosmogenesis Styles -------- */
#contentSub.jumbotron #gallery.gallery-cosmogenesis .card .card-header,
#contentSub.jumbotron #gallery.gallery-cosmogenesis .card .card-subHeader {
    padding: 0.75rem;
    margin-bottom: 0;
}

#contentSub.jumbotron #gallery.gallery-cosmogenesis .card .card-header {
	font-size: 0.85rem;
}

body.Pixel #contentSub.jumbotron #gallery.gallery-cosmogenesis .card .card-header {
	font-size: 0.85rem;
}

#contentSub.jumbotron #gallery.gallery-cosmogenesis .card .card-subHeader {
	font-family: gautreaux, cursive;
	font-size: 0.85rem;
	margin-top: -0.5rem;
	padding-top: 0.2rem;
	text-align: right;
	padding-right: 0;
	padding-l: 0;
	border-bottom: none;
	padding-bottom: 0.4rem;
}

body.Pixel #contentSub.jumbotron #gallery.gallery-cosmogenesis .card .card-subHeader {
	font-size: 0.62rem;
}

#contentSub #gallery.gallery-cosmogenesis section h5 {
	font-variant: small-caps;
}

#contentSub #gallery.gallery-cosmogenesis section h6 {
	font-size: 0.8rem;
	font-style: italic;
}

#contentSub #gallery.gallery-cosmogenesis .frameInset-wht a,
#contentSub #gallery.gallery-cosmogenesis .frameInset-wht a:link,
#contentSub #gallery.gallery-cosmogenesis .frameInset-wht a:visited,
#contentSub #gallery.gallery-synchronistic .frameInset-wht a,
#contentSub #gallery.gallery-synchronistic .frameInset-wht a:link,
#contentSub #gallery.gallery-synchronistic .frameInset-wht a:visited {
	color: #0000ff;
	text-decoration: underline;
}

#contentSub  #gallery.gallery-cosmogenesis h4,
#contentSub  #gallery.gallery-cosmogenesis h6 {
	text-align: right;
}

#contentSub  #gallery.gallery-cosmogenesis h4 {
	font-size: 1.3rem;
}

#contentSub  #gallery.gallery-cosmogenesis .simpleLightbox2 p {
	clear: both;
}

#contentSub  #gallery.gallery-cosmogenesis .simpleLightbox2 p:last-of-type {
	margin-bottom: 0.95rem;
}
/* ------ END Gallery Cosmogenesis Styles -------- */

/* ------ BEGIN Gallery Synchronistic Styles -------- */
#contentSub #gallery.gallery-synchronistic .simpleLightbox2,
#contentSub div.aboutCameras #colPhotosCameras .simpleLightbox2 {
	text-align: center;
}

#contentSub #gallery.gallery-synchronistic .frameInset-wht img,
#contentSub div.aboutCameras #colPhotosCameras .simpleLightbox2 img {
	width: 100%;
	margin-right: 5px;
	margin-bottom: 20px;
	vertical-align: middle; /* remove huge space below the nested image 
		along w figure.pullOurtRight line-height */
}

#contentSub #gallery.gallery-cosmogenesis section blockquote {
	/*padding: 1.2rem 0.9rem 1.2rem 1.2rem;*/
	padding: 1rem 0.5rem .5rem .6rem;
	background-color: #eee;
	color: #000;
	margin-right: -40px;
	margin-top: 25px;
	box-shadow: 0px 0px 7px 6px #333;
}

#contentSub #gallery.gallery-cosmogenesis section blockquote ol {
	margin: 5px 3px 5px 10px;
}

#contentSub #gallery.gallery-cosmogenesis section blockquote li {
	margin: 0 5px 7px;
	text-align: justify;
	font-size: 0.7rem;
}

#contentSub #gallery.gallery-cosmogenesis .colPhotosCosmogenesis p.caption,
#contentSub #gallery.gallery-synchronistic .frameInset-wht p.caption {
	width: 100%;
	text-align: center;
	margin: -5px 0 -8px;
	padding: 0 3px 12px;
	font-style: italic;
}

#contentSub #gallery.gallery-cosmogenesis .colPhotosCosmogenesis {
	width: 40%;
	max-width: 135px;
	float: left;
	text-align: center; /* #gallery's text-align: center pushes figures right a bit ??? */
	background-color: #000;
	box-shadow: 0px 0px 7px 6px #333;
	padding: 0;
	margin: 0.5rem 1rem 0 -2rem;
}

#contentSub #gallery.gallery-cosmogenesis .colPhotosCosmogenesis div {
	padding: 0 4px 0 0;
}



#contentSub #gallery.gallery-synchronistic {
	padding: 0.5em;
}

#contentSub #gallery.gallery-cosmogenesis div img,
#contentSub #gallery.gallery-synchronistic div img,
#contentSub #gallery.photoCameras div img {
	width: 100%;
	height: auto;
}

#contentSub article #gallery.photoCameras {
	width: 25%;
	float: left;
	/* [disabled]margin-top: -50px; */
	margin-left: -4.5em;
	background-color: #000;
	margin-right: 2em;
	padding: 0.5em;
	box-shadow: 0px 0px 7px 6px #333;
}

#contentSub article #gallery.photoCameras figure img {
	box-shadow: none;
	width: 125px;
	height: 100%;
}

#contentSub article #gallery.photoCameras figcaption {
	font-size: 0.7em;
	text-align: center;
	padding-bottom: 0.5em;
}

.galleryThumbSide { 
	padding-top: 5px;
	display: inline-block;
}

#gallery.image-row.cards.druk.simpleLightbox2 h5 {
	margin-top: 1.5rem !important;
	border-bottom: 0.5px solid;
	padding-bottom: 5px;
}

#gallery.image-row.cards.druk.simpleLightbox2 .row {
	justify-content: center !important;
}

/* ==figure #gallery figure:hover figcaption { */
#gallery .galleryThumb:hover .caption {
	visibility: visible;
}


.invisible {
	display: none;
}

.visible {
	display: block;
}

/* ===== SimpleLighroom2 override styles */

body.whiteMat .sl-wrapper .sl-image img,
body.whiteMat .fancybox-image {
	width: 100% !important; /*90% !important; */
	height: auto;
	display: block;
	margin: 1rem auto;
	padding: 7% ; /* padding sets overall width of matting */
	background-color: #ccc; /* color of mat */
	border: 6px double #000 !important; /* frame style */
	box-shadow: 
		/* offset-x | offset-y | blur-radius | spread-radius | color */
		/* frame inner drop shadow*/
		0 0 1px 1px rgba(0, 0, 0, 0.8) inset,
		/* top mat white*/
		0 0 0 60px rgb(255, 255, 255) inset, 
		/* line btwn top mat & white bkgrd, simulate edge btwn two mats */
		0 0 0 27px rgb(120, 120, 120) inset,
		/* frame black */
		0 0 0 5px rgb(10, 10, 10), 
		/* frame outer drop shadow */
		0 0 15px 10px rgb(40, 40, 40);	
}

.fancybox-image {
	top: 35px !important;
	border: 0.5px #999 solid !important;
}

body.blackMat .sl-wrapper .sl-image img,
body.blackMat .fancybox-image {
	width: 100% !important; 
	height: auto;
	display: block;
	margin: 1rem auto;
	padding: 7%; /* padding sets overall width of matting */
	background-color: #fff;
	border: 6px double #000 !important;
	box-shadow:
		/* offset-x | offset-y | blur-radius | spread-radius | color */
		/* frame inner drop shadow*/
		0 0 1px 1px rgba(250, 250, 250, 0.8) inset,
		/* top mat black*/
		0 0 0 61px rgb(10, 10, 10) inset, 
		/* line btwn top mat & white bkgrd, simulate edge btwn two mats */
		0 0 0 27px rgb(255, 255, 255) inset,
		/* frame light gray */
		0 0 0 5px rgb(150, 150, 150), 
		/* frame outer drop shadow */
		0 0 15px 10px rgb(40, 40, 40);	
}

.fancybox-caption {
	font-size: 0.55rem !important;
	font-weight: 300 !important;
	bottom: -15px !important;
}

.sl-wrapper .sl-image .sl-caption {
	background-color: rgb(100, 100, 100) !important;
	font-size: 0.55rem !important;
	padding: 3px 4px 4px !important;
	text-align: center;
	/*display: none !important;*/ /* hides caption till hovered over */
}

.sl-wrapper .sl-image:hover .sl-caption {
	display: none !important;
	/*border-top: 1px solid #ccc !important;*/
}

body.whiteMat .sl-wrapper .sl-image .sl-caption,
body.blackMat .sl-wrapper .sl-image .sl-caption{
	/* bottom: -4.1rem; for a wider breakpoint 
	border: 0.5px solid #999;*/
}

/*.sl-wrapper .sl-image:hover .sl-caption {
	width: 87.5% !important;
	left: 50% !important;
	transform: translateX(-50%);
} this was old way, to display caption on hover over
	now hover over hides the caption */


.sl-overlay {
	background: #666 !important;
	opacity: 0.97 !important;
}

.sl-wrapper .sl-close {
	color: #ccc !important;
	font-size: 1.1rem !important;
/*	top: 36px !important;
	right: 24px !important; */
	font-weight: normal !important;
}

.sl-wrapper .sl-close {
	color: #ccc !important;
}


.sl-wrapper .sl-counter {
	color: #fff !important;
	/*font-weight: bold; */
	font-size: 0.65rem !important;
/*	top: 35px !important; */
	left: 12px !important; 
}

.sl-wrapper .sl-navigation button {
	color: #ccc !important;
}

.sl-spinner {
	border: 5px solid #ccc !important;
}

/* ******************************************** */
/* ----- END SimpleLightroom override styles ----- */
/* ******************************************** */

	/* ****** BEGIN Lightbox 2 Lohesh Dhakar style ***** */
	.lb-data .lb-details {
		width: 100% !important;
		float: none !important;
		text-align: center !important;
		line-height: 1 !important;
		padding: 0 5px !important;
	}
	
	.lb-data .lb-caption {
    	font-size: 0.6rem !important;
    	font-weight: normal !important;
    	line-height: 0;
		margin-bottom: 5px !important;
	}
	
	.lb-data .lb-number {
		padding-top: 5px !important;
	}
/* ----- BEGIN Modal Popup Customized Styles ----- */
/* ******************************************** */

/*
1	.modal-backdrop
2	.bootstrap-dialog
3		.modal-dialog
4			.modal-content
5				.modal-header
6					.bootstrap-dialog-header
7						.bootstrap-dialog-title
8						.bootstrap-dialog-close-button
9						button.close
10				.modal-body
11					.bootstrap-dialog-body
12						#modalCard.container-fluid ... binding ID for jQuery
13							.row
14								.col-sm-3 .col-xs-6
15									.flip-card
16											.front.front-side
17											img
18										.back.back-side
19											img
20				.modal-footer
						
*/

/*1 .modal-open*/
	body.model-open {
		padding-right: 0;
	}
/*2 .modal */
	.modal {
		/* [disabled]max-width: 450px; */
		top: 60px;
		left: -5px;
		right: 10px;
		padding: 0;
		color: #fff;
		text-align: left;
	}
	
/*2*/
	.modal bootstrap-dialog {
		padding: 0;	
	}
	
/*3*/
	.modal-dialog {
		max-width: 600px !important;
		margin: 0 -15px 0 5px !important;
	}

	.modal.fade.show[aria-labelledby$="_title"] .modal-dialog {
		left: 50% !important;
		transform: translateX(-50%) !important;
		top: 2rem;
		width: 90% !important;
	}

/*4*/
	.modal-content {
		background-color: #aaa !important;
		width: 98%;
		left: 5px;
	}
	
/*5*/
	.modal-header {
		padding: 0 0.7rem 0 0;
		border-bottom: none;
		display: block;
	}
	
	.bootstrap-dialog.type-primary .modal-header {
    	background-color: transparent !important;
	}
	
/*7*/
	.bootstrap-dialog .bootstrap-dialog-title {
		display: none !important;
	}
	
/*8*/

	.bootstrap-dialog .bootstrap-dialog-close-button .close {
/*		padding: 0;
		margin: -0.9rem 0 -1.9rem 0;
		color: #fff; */
/*		border-radius: 50%;
		width: 36px;
		height: 36px;
		padding: 8px !important;
		background: #000;
		border: 1px solid #fff;
		color: #444;
		text-align: center;
		font-size: 32px;
		line-height: 0;*/
		border-radius: 50%;
		width: 34px;
		height: 34px;
		padding: 9.5px 2px 10px 2px !important;
		background: #000;
		border: 1px solid #fff;
		color: #444;
		text-align: center;
		font-size: 32px;
		line-height: 0;
		opacity: 1;
		margin-top: -25px;	
	}

	.modal.fade.show[aria-labelledby$="_title"] .bootstrap-dialog-close-button .close {
		width: 25px;
		height: 25px;
		margin-top: -9px;
		font-size: 1.1rem !important;
	}

/*10*/
	.modal-body {
		padding: 1rem 0 0;
	}
	
/*12*/
	#modalCard.container-fluid {
		padding: 0;
	}
		
/*14*/
	.col-sm-3 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100% !important;
	}	
	
/*15*/
	.flip-card {
		width: 100% !important;
		height: auto !important;	
		text-align: center;
	}

/*16*/
	.front.front-side img,
	.back.back-side img {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		border: 1px transparent solid;
	}
	
/*17*/
	.modal-body img.portrait {
		wXXidth: 325px;
		width: 100%;
		height: auto;
	/* [disabled]max-width: 450px; */
	}
	
	.modal-body img.landscape {
		wXXidth: 325px;
		width: 100%;
		height: auto;
	/* [disabled]max-width: 450px; */
	}
	
/* ******************************************** */
/* ----- End Modal Popup Customized Styles -----*/
/* ----- END Gallery styles ----- */
/* ******************************************** */

/* ******************************************** */
/* ---- Contact Page Styles ----- */	

#contentSub .card-body.frameInset-wht .contactLink img.emailIcon {
	width: 30px;
	height: 35px;
}
/* ---- END Contact Page Styles ----- */	
/* ******************************************** */



/* ******************************************** */
/* ---- Footer Styles ----- */	
/* ******************************************** */
	#textNav {
		width: 100%;
		float: left;
		text-align: center;
		padding: 5px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		margin-bottom: 10px;
		margin-top: 0;
		font-size: 0.7rem;
	}
	
	/* these 3 .flex-list styles insert separators between items except at end of wrapped line */
/*	#textNav.flex-list {
		position: relative;
		margin: 1em;
		overflow: hidden;
	}
	#textNav.flex-list ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: -1px;
		list-style-type: none;
	}
	#textNav.flex-list li {
		flex-grow: 1;
		flex-basis: auto;
		margin: .25em 0;
		padding: 0 1em;
		text-align: center;
		border-left: 1px solid #ccc;
		background-color: transparent;
	}
*/	
	#textNav.flex-list input {
		color: #ccc;
	}
		
	#pageFooter.container {
		text-align: center;
		margin-bottom: 20px;
		clear: both;
	}

	#pageFooter.container p {
		font-size: 0.55rem !important;
		margin-bottom: 0;
	}

	#pageFooter.container p a,
	#textNav a,
	#textNav div .hyperlinkSubmitButton {
		padding: 0;
		font-weight: normal;
		color: #ccc;
/*		text-decoration: underline;
		text-decoration-color: #ccc;
		text-decoration-thickness: 1px;
		text-decoration-style: solid;
		text-underline-offset: 2px; */
		border-bottom: 0.02rem solid #ccc;
		margin: 0.03rem 0.2rem;
	}
	
	#textNav div {
		display: inline-block;
	}

/*
#textNav .hyperlinkSubmitButton {
    border-bottom: 1px solid white;
    padding: 0;
    margin: 0.05rem 0.25rem;
}*/
	#pageFooter.container p a:hover,
	#pageFooter.container p a:active,
	#pageFooter.container p a:focus,
	#textNav a:hover,
	#textNav a:active,
	#textNav a:focus,
	#textNav .hyperlinkSubmitButton:hover,
	#textNav .hyperlinkSubmitButton:active,
	#textNav .hyperlinkSubmitButton:focus {		
		color: #fff;
		/*font-weight: bold;*/
	}
	
	#textNav .hyperlinkSubmitButton:active,
	#textNav .hyperlinkSubmitButton:focus {		
		color: #000;
		background-color: #ccc;
		border: none !important;
	}
	
	#pageFooter.container p.email a:hover,
	#pageFooter.container p.email a:focus,
	#pageFooter.container p.email a:active {
		font-weight: bold;
	}
	
	#pageFooter.container p.thanks {
		border-top: 0.3px solid #fff;
		margin-top: 5px !important;
		padding-top: 3px;
		width: 95%;
		text-align: justify;
		margin: 0 auto;
	}

/* ***************************
*
------------ MODIFICATION STYLE for Cocoen Container */
.cocoen-container {
	position: relative;
	margin: auto;
	max-width: 700px;
	text-align: center;
	margin-bottom: 15px;
}
.cocoen-containter .cocoen img.before-after {
  width: 200px; 
}

img[slot="before"] {
/* necessary to make 'before' image the same size as 'after' image
	and behave correctly with the slider. 
	this is probably because of my styles for header images
	inside Bootstrap cards overriding cocoen's styles
*/
	width: unset !important;
}

.cocoen-container .beforeFlag,
.cocoen-container .afterFlag {
	color: #ddd;
	position: absolute;
	top: 50%;
	z-index: 1000;
	padding: 5px;
	background-color: rgba(75, 75, 75, 0.9);
	font-size: 0.8rem;
}

.cocoen-container .beforeFlag {
	left: 0;
}

.cocoen-container .afterFlag {
	right: 0;
}

/* ******* Cocoen END Modification ----------- */


/* ******************************************** */
/* ---------- BEGIN @media Breakpoint Styles --------- */
/* ******************************************** */

@media only screen and (min-width: 240px) { /* 240x240 */
/*	#contentSub.jumbotron.container {
		margin-top: -0.55rem !important;
	}
	
	#contentSub header h4[class^="gallery-"] {
		font-size: 0.8rem;
		margin-bottom: 0.5rem;
	}
	
	#contentSub header .matFrameButtons .btn-group {
    	margin-top: 0.25rem;
	}

	#contentSub header div.btn-group .buttonMatFrame {
		font-size: 0.48rem
	}
	
	#contentSub header .matFrameButtons br:first-of-type {
		display: inline;
	} */
}

@media only screen and (min-width: 320px) { /* 320x480 PORTRAIT */
	#contentSub.jumbotron.container {
		margin-top: -0.55rem !important;
	}
	
	.modal-dialog {
		margin: 0 -1px 0 5px !important;	
	}

	#contentSub.jumbotron .card .card-header,
	#contentSub.jumbotron .modal .modal-title {
		font-size: 1.1rem;
	}

	#contentSub.jumbotron .card .card-body.frameInset-wht p, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht p,
	ul.card-list li,
	ul.modal-list li,
	ol.card-list li {
    	font-size: 0.8rem !important;
	}
	
	#contentSub.jumbotron .card .card-body.frameInset-wht p.tip-beforeAfter,
	#contentSub.jumbotron .modal .modal-body.frameInset-wht p.tip-beforeAfter {
		font-size: 0.7rem !important;
	}

	#contentSub header h4[class^="gallery-"] {
		/*font-size: 1rem !important;*/
	}

	#contentSub header .matFrameButtons .btn-group {
    	margin-top: 0.25rem;
		text-align: right;
	}

	#contentSub header div.btn-group .buttonMatFrame {
		font-size: 0.48rem
	}
	
	#contentSub header .matFrameButtons br:first-of-type {
		display: inline;
	}
	
	/* simpleLightbox Andre Rinas */
	.sl-wrapper .sl-counter {
		font-size: 0.8rem !important;
		top: 24px !important;
		left: 25px !important;
	}
	
	.sl-wrapper .sl-close {
		font-size: 1.4rem !important;
		right: 37px !important;
		top: 28px !important;
	}
	
	.sl-wrapper .sl-image .sl-caption {
		font-size: 0.6rem !important;
		padding: 5px !important;
	}
	
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .attribution {
		width: 90%;
	}
}

@media only screen and (min-width: 375px) { /* 375x667 PORTRAIT */
	#contentSub header .matFrameButtons {
		text-align: right;
	}
	
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .attribution {
		width: 80%;
	}
	
	ul.modal-list li,
	ol.card-list li,
	#contentSub.jumbotron .card .card-body.frameInset-wht p,
	#contentSub.jumbotron .modal .modal-body.frameInset-wht p,
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .quotations q {
		font-size: 0.73rem !important;
	}
}

@media only screen and (min-width: 412px) { /* my pixel-1 412x604 PORTRAIT) */
	body.Pixel #headerSub {
		margin-bottom: 0 !important;
	}
	
	 body.Pixel #contentSub.jumbotron.container {
		margin-top: -1.3rem !important;
	}
	
	body.Pixel #contentSub header h4[class^="gallery-"] {
		font-size: 1.3rem !important;
		padding-top: 7px;
		margin-bottom: 0.5rem;
	}
	
	#contentSub.jumbotron .card .card-body.frameInset-wht p, 
	#contentSub.jumbotron .card .card-body.frameInset-wht ol.card-list li, 
	#contentSub.jumbotron .card .card-body.frameInset-wht ul.card-list li, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht p, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht ol.modal-list li, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht ul.modal-list li, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .quotations q {
		font-size: 0.9rem !important;
	}

	#contentSub.jumbotron .card .card-body.frameInset-wht p.tip-beforeAfter,
	#contentSub.jumbotron .modal .modal-body.frameInset-wht p.tip-beforeAfter {
		font-size: 0.7rem !important;
}
	
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup {
		margin-left: 0.75rem !important;	
	}

	#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup .galleryThumb {
		margin-bottom: 25px !important;
	}
	
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup .caption {
		margin-top: 5px;
	}
	
	body.Pixel .sl-wrapper .sl-image:focus .sl-caption,
	body.Pixel .sl-wrapper .sl-image:active .sl-caption {
		display: block !important;
	}
}

@media only screen and (min-width: 414px) { /* 414x736 */
	#contentSub header h4 {
		font-size: 1.3rem !important;
		}
	
	#contentSub.jumbotron .card .card-header,
	#contentSub.jumbotron .modal .modal-title {
		font-size: 1.2rem !important;
	}

/*	#contentSub.jumbotron .card .card-body.frameInset-wht p, 
	#contentSub.jumbotron .card .card-body.frameInset-wht ol.card-list li, 
	#contentSub.jumbotron .card .card-body.frameInset-wht ul.card-list li, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht p, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht ol.modal-list li, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht ul.modal-list li, 
	#contentSub.jumbotron .modal .modal-body.frameInset-wht .quotations q {
		font-size: 0.78rem !important;
	} */
	
/*	#contentSub.jumbotron .modal .modal-body.frameInset-wht .camerasGroup {
		margin-left: 0.75rem !important;	
	} */
}

/******* FOR WIDER SCREEN, bigger header image, float right
/*#contentSub .card .card-body.frameInset-wht figure.headerImg img,
#contentSub .modal .modal-body.frameInset-wht figure.headerImg img {
	/*height: auto;*/
/*	width: 150px;
	float: right;
	margin: 0.5rem 0 0.4rem 0.5rem;
}*/


@media only screen and (min-width: 450px) {
	sl.wrapper .sl-image .sl-caption {
		font-size: 0.8rem !important;
	}
}

@media only screen and (min-width: 470px) {
	#contentSub article#cosmogenesis .colPhotosCosmogenesis .simpleLightbox2 img {
		width: 125px;
	}
}

@media only screen and (min-width: 480px) { /* 480x800 */
	#contentSub header h4[class^="gallery-"] {
		font-size: 1.3rem !important;
	}
}

@media only screen and (min-width: 500px) {
	#contentSub .jumbotron header#elevSpeech h6 {
		font-size: 0.8rem;
	}

	div[class*="col-sm-3 card"] {
		max-width: 80% !important;
		min-width: 275px;
		-ms-flex: 0 0 80%; /*(grow, shrink, auto size)*/
		flex: 0 0 80%; /*(grow, shrink, auto size)*/
		margin: 0 auto 15px !important;
	}	
	
	div.col-sm-3.card.single-card {
		max-width: 600px !important;
		min-width: 275px !important;
		top: 0.3rem;
		left: 50% !important;
		transform: translateX(-50%) !important;
		flex: unset;
	}	
	
	#contentSub .modal-body.frameInset-wht .headerImg .galleryThumb.landscape {
		width: 300px;
	}
	
	#slideshow p.caption {
		font-size: 0.75rem !important;
	}
}

@media only screen and (min-width: 525px) {
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 45%;
	}

	#contentSub article#cosmogenesis .colPhotosCosmogenesis .simpleLightbox2 img {
		width: 135px;
		margin: 5px;
	}
}

@media only screen and (min-width: 540px) { /* 540x960 */
	/* no corrections at this width, so far*/
}

@media only screen and (min-width: 561px) {
	div[class*="col-sm-3 card"] {
		max-width: 90% !important;
	}
}

@media only screen and (min-width: 575px) {
	#contentSub section div.card .card-header {
		font-size: 1.08rem; 
	}
}
		
@media only screen and (min-width: 576px) {
	#wrapper.container {
		/* [disabled]max-width: 690px; */
		max-width: 1000px; /*max-width: 800px;*/
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;	
	}
	
	.container {
    	max-width: none;
	}
	
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 40%;
	}
	
	#contentSub .modal-body.frameInset-wht .headerImg .galleryThumb.landscape {
		width: 375px;
	}
}

@media only screen and (min-width: 600px) { /* 600x1024 */
	.modal-dialog {
		margin: 0!important;
		left: 50% !important;
		transform: translateX(-50%) !important;			
	}
}
	
@media only screen and (min-width: 651px) { /* 600x1024 */
	div[class*="col-sm-3 card"] {
		max-width: 800px !important;
/*		min-width: 275px;
		-ms-flex: 0 0 25%; /*(grow, shrink, auto size)*/
/*		flex: 0 0 25%; /*(grow, shrink, auto size)*/
	}
}

@media only screen and (min-width: 625px) {
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 35%;
	}
}

@media only screen and (min-width: 640px) { /* 640x960 */
	/* no corrections at this width, so far*/
}


@media only screen and (min-width: 675px) {
	article#cosmogenesis .colPhotosCosmogenesis {
		width: 34%;
	}
}

@media only screen and (min-width: 681px) {
	#contentSub article #gallery.gallery-cosmogenesis {
		margin: 0 1.5rem 0 -3.5rem;
		width: 60%;
	}
	
	#contentSub article #gallery.gallery-cosmogenesis .caption,
	#contentSub article #gallery.gallery-synchronistic .caption,
	#contentSub article #gallery.photoCameras .caption {
		width: 170px;
	}
}

@media only screen and (min-width: 720px) { /* 720x1280 */
	/* no corrections at this width, so far*/
}


@media only screen and (min-width: 768px) {
	.container {
    	max-width: none;
	}
	
	#headerMain div#logoImage,
	#headerSub div#logoImage {
		text-align: right;	
	}
	
	#contentSub header h4[class^="gallery-"] {
		font-size: 1.4rem !important;
	}
	
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 28%;
	}
}

@media only screen and (min-width: 800px) { /* 800x1280 */
	/* no corrections at this width, so far*/
}

@media only screen and (min-width: 815px) {
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 50%;
	}
}

@media only screen and (min-width: 992px) {
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 40%;
	}
	
	#contentSub #gallery.gallery-synchronistic figure.mainImg {
		float: right;
		margin: 5px 5px 0 15px;
	}
}

@media only screen and (min-width: 1024px) { /* 1024x1366 */
	/* no corrections at this width, so far*/
}

@media only screen and (min-width: 1050px) {
	#contentSub article#cosmogenesis .colPhotosCosmogenesis {
		width: 38%;
	}
}

@media only screen and (min-width: 1065px) {
	article#cosmogenesis .colPhotosCosmogenesis {
		width: 37%;
	}
}