@charset "utf-8";



/* CSS Document -------------------------------------------------- */

body,
#container,
#masthead,
#navigation,
#content,
#sidebar,

#footer
	{
	margin: 0;
	padding: 0;
	border: 0;
	}


body
	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	background-attachment: scroll;
	background-color: #000;
	font-weight: normal;
	color: #FFDDDe;
	margin-left: auto;
	margin-right: auto;
	}


h4
	{
	font-weight: 400;
	}


#container
	{
	width: 100%;
	margin-top: 4px;
	background-color: #000;

	}


#page_content
	{
	width: 80%;
	margin: auto;
	padding: 0px;
	}


/* Masthead Styles ----------------------------------------------- */
#masthead, #lowermasthead
	{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
	overflow: hidden;
	padding-top: 5px;
	padding-bottom: 5px;
	}


#masthead .title
	{
	width: 80%;
	text-align: center;
	margin: 10px auto 0 auto;
	}


#masthead .title > div
	{
	/* width: 49%; --------------------------------- */
	margin: 0 auto;
	
	/* display: inline-block; ---------------------- */
	vertical-align: text-top;
	}


#masthead h1, #masthead h5, #masthead h6
	{
	font-weight: normal;
	color: #FFF;
	margin-left: auto;
	margin-right: auto;
	}


#masthead h5, #masthead h6
	{
	/* font-style: italic; */
	display: inline;
	line-height: 1.5em;
	letter-spacing: 1.5px;
	font-size: 1em;
	}


#masthead h1
	{
	margin-top: -2px;
	}


#masthead h6
	{
	padding-left: 10px;
	font-size: 1.1em;
	}


#masthead h1 a
	{
	text-decoration:none; 
	color : #ffffff;
	}



#lowermasthead
	{
	background-color: #000;
	border-bottom: 8px solid #363636;		/* This is the gray bar at bottom of masthead ----------- */
	}


#lowermasthead h2
	{
	line-height: 14px;
	font-size: 1.1em;
	font-weight: normal;
	color: #FFF;
	background-color: #000;
    width: 80%;
    margin: 7px auto;
	}


#footer h5, #footer h6
	{
	display: inline;
	line-height: 1.5em;
	letter-spacing: 1.5px;
	font-size: 1em;
	}




/* Content Styles ------------------------------------------ */

#content
	{
	
	position: relative;
	width: 100%;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 5px;
	margin:0 auto;
	}


#content h1,h2,h3,h4,h5,h6
	{
	color: #EDEAF2;
	}


#content img
	{
	padding: 24px;
	border: 0px;
	color: #DF0471;
	}




/* -- B This is needed for the three columns on the home page ---------------------- */
/* --------------------------------------------------------------------------------- */




/* -- B This appears to be un-needed
/* ---------------------------------


.row
	{
	margin-right: -15px;
	margin-left: -15px;
	}

.row:before, .row:after
	{
	display: table;
	content: " ";
	}

.row:after
	{
	clear: both;
	}

.row:before, .row:after
	{
	display: table;
	content: " ";
	}

.row:after
	{
	clear: both;
	}

/* ------------------------------------
/* -- E This appears to be un-needed */


.col-sm-4
	{
	width: 30%;
	}

.col-sm-2
	{
	width: 30%;
	}


@media (min-width: 768px)
	{
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
		{
		float: left;
		}
	}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
	{
		
	margin-top: 20px;		
	margin-left: 10px;
	margin-right: 10px;
	position:inherit ;
	max-width: 400px;
	min-width: 300px;
	min-height: 200px;
	padding-right: 20px;
	padding-left: 30px;
		
	border-bottom-right-radius: 28px;
	border-bottom-left-radius: 28px; 
	border-top-right-radius: 28px; 
	border-top-left-radius: 28px; 
	
	background-color: #232323;
	
	}


/* --------------------------------------------------------------------------------- */
/* E This is needed for the three columns on the home page-------------------------- */








/* Footer Styles --------------------------------------------------- */

#footer
	{
	text-align: center;
	width: 100%;
	margin-right: 0px;					/* Unpredictable and wacky -------------------------------- */
	margin-left: 0px;					/* Unpredictable and wacky -------------------------------- */
	background-color: #00870;			/* Has no effect ------------------------------------------ */
	overflow: hidden;
	padding-top: 30px;					/* Padding between the top boarder and the first text ----- */
	padding-bottom: 5px;
	
	/* border-top: 8px solid #363636;	A boarder like bottom of masthead, at top of footer ------- */
	}






#footer p
	{
	font-size: 1.85em;
	color: #c4c;
	}


#footer a
	{
	color: #1988F7;
	text-decoration: underline;
	}


#footer a:hover
	{
	color: #2f4f4f;
	text-decoration: none;
	}



/* Link Styles ------------------------------------------------- */

a
	{
	color: #F9BCBD;
	text-decoration: underline;
	}


a:hover
	{
	color: #FDDBDB;
	text-decoration: underline;
	}


.no-underline,
.photo-gallery
	{
	text-decoration: none;
	}



/* General Styles ------------------------------------------------ */


.style_bold
	{
	font-weight: bold;
	}


.style_italic
	{
	font-style: italic;
	}


.auto-style1
	{
	color: #FFF;
	}


.auto-style2
	{
	text-decoration: none;
	}



/* Page-specific Styles -------------------------------------------- */

.home #content img
	{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	display: block;
	padding: 0;
	}


.home .projects
	{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	
	/* align-items: center; ----------------------------------------- */
	flex-direction: row;
	justify-content: space-around;
	}


.home .projects div
	{
	width: 45%;
	margin-bottom: 5%;
	}


.home #content .projects a img
	{
	width: 100%;
	/* min-height: 300px; */
	border: 5px solid #333333;
	display: initial;
	box-shadow: 0 0 1px 1px #ffffff9e;
	}


.project #content img
	{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: block;
	}


.contact #lowermasthead a
	{
	visibility: hidden;
	}


@media screen and (max-width: 640px)
	{
		h1
			{
			font-size: 4vw;
			}
	}


@media screen and (max-width: 480px)
	{	
	#masthead .title, #lowermasthead h2, #content {
	width: 95%;
	}
	
	#masthead .title > div
	{
		width: 100%;
	}