/* ================================================================ */
/* ==============VV Modify Bootstrap classes VV==================== */

.navbar
	{
		border: none;  
		padding-right:15px;
		margin-bottom:0;
		border-radius:0;
		background-color:#332d19;  /* 332D19 7F7040 7F6719, CCA529, FFCF33, FFE17F */ /*fff3d0*/
		color:#fff9e9;
	}
	/* =========== */

	
.navbar-default .navbar-nav>li>a 
	{
		color: #fff9e9;
	}
	
	
	@media (max-width: 767px) {.navbar-default .navbar-nav>li>a{margin:0 15px;}}
	
	
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover 
	{    
		background-color:#FFCF33; /*#FFE17F*/
	}
.navbar-default .navbar-toggle .icon-bar 
	{  /* Hamburger icon */
		background-color: #fffded;
	}
	
.navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
	{
		color:#332d19;
		background-color: #FFCF33; /*#FFE17F*/ /* #fff9e9 */
		/*font-weight:bold;*/
	}
	
.navbar-default .navbar-nav>.active>a
	{
		color:#fff9e9;
		background-color:transparent;
		font-weight:bold;
	}
	
.menuItem
	{
		color:#fff9e9;
	}
	
	
	/* ============= */
.nav
	{	
			color:#fff9e9;
	}
	@media (min-width: 768px) {.nav{ padding-top: 25px;}}
	
.navbar-collapse
	{
		padding-left:30px;
		color:#fff9e9;
	}

.container-fluid>.navbar-header, .container>.navbar-header
	{
		padding:15px 0;	
		margin-left:0;
	}
	
	
	
.navbar-toggle 
	{
		margin-top:0px;
		margin-bottom:40px; /* <!-- 40px Margin-bottom: Make the nav button as tall as the logo image so that on small screens the header text is pushed under the logo image --> */ 
		border:none;
	}

 

.nav li	
	{
		display: inline;
		position: relative;
		/*float:left;*/
		width:104px;
		text-align:center;
	}
/*@media (max-width: 768px)  Not needed: Same at larger screen sizes
	{
		.nav {margin-bottom:40px;}
		.nav li {width:108px;}  
	}
	*/
	
.nav li:hover > ul {
    display: block;
}
	
.nav ul	
	{
		position: absolute;
		padding-left:15px;
		display: none;
	}

	
	
/* ==============^^ Modify Bootstrap classes ^^==================== */
/* ================================================================ */

/* ====================================================== */
/* ==============VV Common styling VV==================== */

body 
	{
		color:#332d19;
		/*min-width:340px;  */
		/*max-width:1200px; /* limit to a reasonable viewing width */
		/*margin:0 auto;*/
		background-color:#332d19;  	 /* 7F7040 7F6719, CCA529, FFCF33, FFE17F */
		/* background-color:white;  When troubleshooting */
		/* border-radius:4px; */		
	}

.centered-fixed-width-column
	{
		min-width:340px;  
		max-width:1200px; /* limit to a reasonable viewing width */
		margin:0 auto;
		/*background-color:#332d19;*/  	 /* 7F7040 7F6719, CCA529, FFCF33, FFE17F */
		/* background-color:white;  When troubleshooting */
		/* border-radius:4px; */		
	}
img {
	max-width: 100%;  /* So that the images don't blow up to huge size.  Use on all screen sizes. */
	}


h1, h2, h3, h4 
	{
		font-family:Helvetica, Arial, 'sans-serif';
		font-weight:bold;
	}
	/* Bootstrap default heading sizes--used for larger screen sizes:
			h1 36px, h2 24px, h3 20px */

	@media only screen and (min-width: 351px) and (max-width: 767px) 
		{
			h1 {font-size:30px;}
			h2 {font-size:24px;}
			h3 {font-size:20px;}
		}
	
			h1 {font-size:24px;}
			h2 {font-size:20px;}
			h3 {font-size:16px;}
		}

dd	{padding-left:15px;}	


		
#header-logo-image 
	{
	max-height:70px;  /* The logo image is square, the max width = max height */
	padding:0 0 0 15px;
	float:left;
	}
	
#header-p 
	{
	float:left;
	margin-left:0;
	/*color:#fff3d0;*/
	color:#fff9e9;
	/*color:white;*/
	}

	


	
#about-artist-div
	{
		color: black;
		border: 1px solid black;   /* COLOR */
		border-radius:4px;
		background-color:#ffdfaf;
	}
 
.about-col
	{
		padding:0px 15px 0 15px; 
	}
.about-col-lower
	{
		padding:30px 15px 0 15px; 
	}
	@media only screen and (max-width: 768px)
		{
			.about-col-lower {padding:60px 15px 0 15px;}
		}

		
.about-box-med
	{
		/*border:1px solid #fff9e9;*/
		color:#332d19; 
		background-color:rgba(255,255,255,0.8);  /* opaque white background to show out the text */
		padding:15px;
	}

.about-box-light
	{
		/*border:1px solid #fff9e9;*/
		color:#332d19; 
		background-color:rgba(255,255,255,0.2);  /* opaque white background to show out the text */
		padding:15px;		
	}


		 
.about-content-div
	{
		padding-left:15px;
		padding-right:15px;
		font-size:120%;
	}
	@media only screen and (max-width: 399px)
		{
			#msg-links {font-size:85%;}
		}




		
.parallaxGlass h4, .parallaxSky h4, .parallaxTrees h4
	{
		text-align:center;
	}
	@media only screen and (max-width: 991px)
		{
			.parallaxGlass h4, .parallaxTrees h4
				{
					text-align:left;
				}
		}
	@media only screen and (max-width: 991px)
		{
			.parallaxSky h4
				{
					text-align:left;
				}
		}
	
.about-content-div ul
	{
		padding-left:20px;
	}
	

	
	
.page-header  /* h1  */
	{
			text-align:center;
			margin:0;
			padding:20px ;
			border:0;
			color:#332D19; 
			/*color:#fff9e9; */
			background-color:#FFCF33;		/* 332d19 7F7040 7F6719, CCA529, FFCF33, FFE17F */
			
	}
.returnToTopText  
	{
		padding:15px 30px 15px 30px;
		text-align:right;
	}
.returnToTopText a 
	{
		color:#FFF9E9;
	}
	@media only screen and (min-width: 768px) 
		{
			.visibleOnNarrowScreenOnly {display:none;}  /* On wide screens the link is not required */
		}
	
.footer 
	{
			color:#fff9e9;
			background-color:#332d19;
			padding-top:30px;
			padding-bottom:15px;
			/*border: 1px solid transparent;*/
			/*border-color: #332d19;*/
			/*border-radius: 4px;*/
	}

	
.clearfix::after 
	{
		content: "";
		clear: both;
	}	
.horizontal-padding 
	{
		padding-left:15px;
		padding-right:15px;
	}

.vertical-padding 
	{
		padding-top:15px;
		padding-bottom:15px;
	}
 

.parallaxGlass 
	{
		/*DISPLAY:NONE;  */
		/* The image used */
		background-image: url("../images/creekGlass_1200X900.jpg");
		background-color:#FFE17F;
		/* Set a specific height */
		min-height: 400px; 

		/* Create the parallax scrolling effect */
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	
	
.parallaxSky
	{
		/* The image used */
		background-image: url("../images/FOclouds2_1200X600.jpg");
		background-color:wheat;
		/* Set a specific height */
		min-height: 400px; 

		
		/*background-attachment: fixed;*/  /* No parallax scrolling effect */
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		border-top:15px solid #332d19;
		border-bottom:15px solid #332d19;
	}
	

.parallaxTrees 
	{
		/* The image used */
		background-image: url("../images/fallCreekCathedral_1200X900.jpg");
		background-color:darkseagreen;
		/* Set a specific height */
		min-height: 400px; 

		/* Create the parallax scrolling effect */
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
/* ==============^^ Common styling ^^==================== */
/* ====================================================== */

/* ====================================================== */	
/* ==============VV Illumination styling VV============== */

#illumination-row-container 
	{
		background-color:#060606; /* 7F7040 7F6719, CCA529, FFCF33, FFE17F */
	}
#illumination-row 
	{
		padding-top:30px;
		background-color: #060606;
		margin: 0 auto;
		max-width: 800px;
	}



/* ====================================================== */	
/* ==============VV Card styling VV====================== */

#gallery-card-row-container 
	{
		background-color:#7F7040; /* 7F7040 7F6719, CCA529, FFCF33, FFE17F */
	}

#gallery-card-row 
	{
		padding-top:30px;
		/* background-color: #7F7040; *//* 7F7040 7F6719, CCA529, FFCF33, FFE17F */
		margin: 0 auto;
		/*max-width: 640px;*/
	}
	@media (max-width: 512px)  {#card-row{ max-width: 233px;}}  /* 1 card per row */
	/* The break point must match the break point of the card-container */
	@media (min-width: 513px) and (max-width: 767px) {#card-row{ max-width: 466px;}}  /* 3 cards per row */
	@media (min-width: 768px) and (max-width: 990px) {#card-row{ max-width: 699px;}}  /* 4 cards per row */
	@media (min-width: 991px) and (max-width: 1199px) {#card-row{ max-width: 932px;}} /* 4 cards per row */	
	@media (min-width: 1200px) {#card-row{ max-width: 932px;}} /* Assume only 8 project cards; 2 rows of 4 at "medium" size screen covers also the "large" size screen.  If > 8 projects, increase max-width to 1120? and set col-lg-2 on all class="card-container" divs. */


.card-container {
    padding-bottom:30px;
	/*padding-left:15px;  default padding for div is 15px left and right--no explicit styling is required. */
	/*padding-right:15px;  default padding for div is 15px left and right--no explicit styling is required. */
	/*max-width:320px;*/
}
@media (max-width: 512px) {.card-container{ width: 100%;}}  /* 1 card per row at the smallest screen size */

.card-container>button
	{
		background-color: transparent;
		padding:0;
		border:none;
	}

.card 
	{
		box-shadow: 0 4px 12px 0 rgba(0,0,0,0.8);
		transition: 0.3s;
		width: 99%;  /* 99% eliminates gap on right side between image and card border) */
		/*border:solid black 1px;*/ /* Border yields intermittent (by screen size) minute gaps at card edges.  Use a darker box-shadow */
		border-radius:4px;
		/*max-width:320px;*/  /* Card width is constrained by #card-row max-width and (divided by) cards per row.  Cards per row is determined by the col-xx classes */
		margin:0 auto;
		background-color: #FFE17F;
		text-decoration:none;	
		text-align:left;
	}
	
.card:hover 
	{
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
	}
.card-image-container	
	{
		 /*background-color:white;*/  /* Not good for (the few) images that have non-white bkgrnd */
		 padding:10px;
		 background-color:white;
		 border-top-left-radius:4px;
		 border-top-right-radius:4px;		 
		 /*border-bottom: 1px solid black;*/
	}

/*.card-image*/
	{
		border-top-left-radius:4px;  /* Must match .card border-radius (top-left) */
		border-top-right-radius:4px;  /* Must match .card border-radius (top-right) */
	}
.card-text
	{
		min-height:160px;  /* 170 px if the <h4> titles set a min-height of 70px */
	}
.card-text h4 
	{
		padding:20px 10px 10px 10px;
		text-align:center;
		/*min-height:70px; */  /* Assume that some titles wrap an add'l line; this height creates the same vertical space for all titles, whether they wrap or not. */
	}
.card-text p 
	{
		padding:0 10px 10px 10px;
	}
	







/* ==============^^ Card styling ^^====================== */
/* ====================================================== */




/* ====================================================== */	
/* ==============VV Modal styling VV===================== */


.modal-header	
	{
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		text-align:center;
		margin-top:0;
		padding:20px ;
		border:0;
		background-color:#FFCF33;		/* 7F7040 7F6719, CCA529, FFCF33, FFE17F */
	}
.modal-header h2	
	{
		float:left;		
	} 
 
.modal-content	
	{
		max-width:600px;
		min-width:300px;		
	}	

.modal dl	
	{
		padding-left:10px;		
	}
.modal dt	
	{
		float:left;
	}
.modal dd	
	{
		padding-left:100px;
		padding-bottom:10px;
	}
.modal ul	
	{
		padding-left:15px;		
	}


.asset-ul	
	{
		margin-left:-5px;	
		list-style-type:none;
	}
.asset-li	
	{
		padding-bottom:10px;		
	}
.asset-image	
	{
		max-height:30px; 
		padding-right:10px;	
		/*float:left;*/
	}


/* ==============^^ Modal styling ^^===================== */
/* ====================================================== */



/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* == VV @media only screen and (max-width: 1199px) VV   == */

@media only screen and	(max-width: 1199px)
	{
	 
		
	}
	
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* == VV @media only screen and (max-width: 991px) VV   == */

@media only screen and	(max-width: 991px) 
	{

	}


	





/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* == VV @media only screen and (max-width: 767px) VV   == */




/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* == VV @media only screen and (min-width: 768px) VV   == */

@media only screen and	(min-width: 768px)