/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/


/* Mobile Layout: 480px and below. */
@media only screen and (max-width: 480px) {
body {
	margin-top: 0 !important;
}
	
.gridContainer, .gridContainer_portfolio, .gridContainer_info {
	margin-top: 0 !important;
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}


#outer_wrapper, #outer_wrapper2 {
	margin-top: 0 !important;
	clear: both;
	margin: 0 auto;
	width: 80%;
	display: block;
}

header {
	background: rgba(0, 0, 0, .5);
	width: 100%;
	padding: 0;
	margin: 0 auto;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

header h1 {
	width: 140px;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
	padding-bottom: .2em;
}

#logo img {
	width: 140px;
	display: block;
	/*float: left;
	margin-left: 1.3em;
	margin-top: 0;
	margin-bottom: 0;*/
	margin: 0 auto 0 1.3em;
	padding-top: .2em;
}

#tagline {	
	clear: both;
	width: auto; 
	margin-top: 0;
	margin-right: 2em;
	margin-left: 2em;
	/*margin-bottom: -10em !important;
	padding-top: 5em;*/
	padding-bottom: .3em;
	color: #e4e4e4;
	font: normal .7em "Roboto-MediumItalic";
}

/* hamburger menu >> */
#cssmenu {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	margin: auto;
}


#portfolio_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	clear: both;
	margin-top: 65px;
	padding-bottom: 5px;
}

#info_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	clear: both;
	margin-top: 30px;
	padding-bottom: 5px;
}

#portfolio_sections a {
  	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #209190;
}

#info_sections a {
	font-family: "Roboto-MediumItalic" !important;
	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #046d6c !important;
}

#portfolio_sections a:hover, #info_sections a:hover {
	text-decoration: underline;
 	color: #ddd;
}

#infoImage {
	margin: auto auto .5em auto;
	width: inherit;
}

#contactImage {
	margin: 1.2em auto .2em auto;
	width: inherit;
	/* margin: 1.2em auto .2em auto; 
	width: 80%;
	float: none;  << (but remember that paragraphs by default will always be aligned left!!!!!) */
}

#thumb_box {
	clear: both;
	float: none;
	margin: 0 auto;
	width: 90%;
	padding: 2.2em .75em .75em.75em;
	display: block;	/* pretty good fix for centering the block!!!!! */		
}

.home_img {
	margin: 0 auto;
	width: 100%;
	padding-top: 1.5em;
	/*padding-bottom: .2em;*/
	display: block;	/* pretty good fix for centering the block!!!!! */	
	float: none;
	clear: both;	
}

#info_box {
	margin: -.3em auto 0 auto;
	width: 90%;
	padding: .5em .75em .75em .75em;  
	display: block;	
	background: rgba(252, 245, 244, .3);
}

/*
#info_box {
	margin: .5em auto 0 auto;
	width: 97%;
	padding: .3em .75em .75em .75em;  
	display: block;	
	background: rgba(252, 245, 244, .3);
}
*/

h2 {
	font-family: "Roboto-Medium";
	font-weight: normal;
	font-size: 1.1em;
	clear: both;
	float: none;
	color: #ddd;
}

/*
h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color: #ddd;
}
*/


/*.image_row {	
	padding-bottom: 1.5em;
}*/


.thumbnail {
	padding: .5em;
	float: none;
	width: 95%;
 	display: block;
	margin: 0 auto;
}

.infoCat h2{
	font: normal normal 1.2em "Roboto-Bold";
	color: #1d807f;
}

}

/* Tablet Layout (Portrait) or maybe Mobile Landscape: 481px to 768px. Inherits styles from: Mobile Layout. */
/* *** Make sure to have this be only 1 column ...it's the hamburger menu ! */
/* *** This will be 2nd small-screen Menu!!!! */
@media only screen and (min-width: 481px) {
.gridContainer, .gridContainer_portfolio, .gridContainer_info {
	margin-top: 0 !important;
	margin-left: auto;
	margin-right: auto;
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}

#outer_wrapper, #outer_wrapper2 {
	/* clear: both; ?? */
	margin: 0 auto;
	width: 80%;
	/*padding-left: 0.75%;
	padding-right: 0.75%;*/
	display: block;
}

header {
	/*width: 100%;
	padding: 0 .75% .75% .75%;
	margin: auto;*/
	background: rgba(0, 0, 0, .5);
	width: 100%;
	padding: 0;
	margin: 0 auto;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

#logo img {
	width: 150px;
	display: block;
	margin-top: 0;
	margin-left: .5em;
	padding-top: 0;
}

header h1 {
	width: 32%;
	float: left;
	margin-top: 0;
	padding-top: .3em;
	margin-left: 0;	
}

#tagline {	
	text-align: right;
	float: right;
	width: 65%; 
	/*margin-top: .75em;*/
	margin-right: .7em;
	/*margin-bottom: 1em !important;
	margin-left: 1em !important;*/
	padding-bottom: .5em;
	color: #e4e4e4;
	font: normal .75em "Roboto-MediumItalic";
}

/* THis Medium size hamburger menu looked really narrow!!! so ....
 >>> I fixed in menu_bar.css from 63% to 73% ...line #124 */


/* bigger small-screen hamburger menu >> (like tablet portrait) */
#cssmenu {
	clear: both;
	/*margin-left: 0;*/
	width: 100%;
	display: block;
	margin: auto;
}

#portfolio_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	clear: both;
	margin-top: 65px;
	padding-bottom: 5px;
}

#info_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	clear: both;
	margin-top: 30px;
	padding-bottom: 5px;
}

#portfolio_sections a {
  	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #209190;
}

#info_sections a {
	font-family: "Roboto-MediumItalic" !important;
	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #046d6c !important;
}
#portfolio_sections a:hover, #info_sections a:hover {
	text-decoration: underline;
 	color: #ddd;
}

#infoImage {
	margin: auto auto 1em .2em; 
	width: 100%;
	float: none;  /* << (but remember that paragraphs by default will always be aligned left!!!!!) */
}

#contactImage {
	margin: 1.2em auto .2em auto; 
	width: 80%;
	float: none;  /* << (but remember that paragraphs by default will always be aligned left!!!!!) */
}

#thumb_box {
	clear: both;
	float: none;
	margin: 0 auto;
	width: 90%;
	padding: 1.7em .75em .75em.75em;
	display: block;	/* pretty good fix for centering the block!!!!! */		
}

.home_img {
	margin: 0 auto;
	width: 100%;
	padding-top: 2em;
	padding-bottom: .3em;
	display: block;	/* pretty good fix for centering the block!!!!! */	
	float: none;
	clear: both;	
}

#info_box {
	margin: .5em auto 0 auto;
	width: 94%;
	padding: .3em .75em .75em .75em;  
	display: block;	
	background: rgba(252, 245, 244, .3);
}

h2 {
	font-family: "Roboto-Medium";
	font-weight: normal;
	font-size: 1.1em;
	clear: both;
	float: none;
	color: #ddd;
}

/*
h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color: #ddd;
}
*/

/*
.image_row {	
	padding-bottom: 1em;
}*/


.thumbnail {
	padding: .75em;
	float: none;
	width: 95%;
 	display: block;
	margin: 0 auto;
}

.infoCat h2{
	font: normal normal 1.2em "Roboto-Bold";
	color: #1d807f;
}

}


/* Tablet Layout (Landscape): 769px to a max of 899px.  Inherits styles from: Mobile Layout and Tablet Portrait Layout. */

@media only screen and (min-width: 769px) {
.gridContainer, .gridContainer_portfolio, .gridContainer_info {
	width: 88.2%;
	max-width: 850px; /* ?? */
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}

#outer_wrapper, #outer_wrapper2 {
	/* clear: both; ?? */
	margin: 0 auto;
	width: 80%;
	/*padding-left: 0.75%;
	padding-right: 0.75%;*/
	display: block;
}

header {
	/*background: rgba(80, 80, 80, .5);*/
	background: rgba(0, 0, 0, .5);
	width: 100%;
	padding: 0;
	margin: 0 auto;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

header h1 {
	width: 25%;
	float: left;
	margin-top: 0;
	padding-top: .3em;
	margin-left: 0;	
}

#logo img {
	width: 155px;
	display: block;
	float: left;
	margin-left: .75em;
}

#tagline {
	float: right;
	width: 67%;
	text-align: right;
	margin-top: 1em;
	margin-right: 1.2em !important;
	/*margin-bottom: .5em !important;*/
	color: #e4e4e4;
	font: normal .8em "Roboto-MediumItalic";
}

#cssmenu {
	float: right;
	width: 100%;
	display: block;
	margin-top: -1em !important;
	margin-right: .75em !important;
}


#portfolio_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	float: left;
	width: auto;
	margin-top: 10px;
	padding-bottom: 5px;
}

#info_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	float: left;
	width: auto;
	margin-top: 10px;
	padding-bottom: 5px;
}


#portfolio_sections a {
  	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #209190;
}

#info_sections a {
	font-family: "Roboto-MediumItalic" !important;
	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #065352 !important;
}

#portfolio_sections a:hover, #info_sections a:hover {
	text-decoration: underline;
 	color: #ddd;
}

#infoImage {
	float: left;
	margin: 0 2em 1em 0;
	width: inherit;
}

#contactImage {
	float: right;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: -9em;
	margin-right: .7em;
	width: 55%;
}	

#thumb_box {
	margin: 0 auto;
	width: 95%;
	padding: .75em 1.1em .75em .4em;  
	display: block;	/* pretty good fix for centering the block!!!!! */		
}


.home_img {
	margin: 0 auto;
	width: 100%;
	padding-bottom: .75em;
	display: block;	/* pretty good fix for centering the block!!!!! */	
	float: none;
	clear: both;	
}


#info_box {
	margin: .5em auto 0 auto;
	width: 96%;
	padding: .3em .75em .75em .75em;  
	display: block;	
	background: rgba(252, 245, 244, .3);
}

h2 {
	font-family: "Roboto-Medium";
	font-weight: normal;
	font-size: 1.1em;
	clear: both;
	float: none;
	color: #ddd;
}

/*
h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color: #ddd;
}
*/

.image_row {	
	padding-bottom: 1em;
}


.thumbnail {
	padding: .75em;
	width: 44%;
	float: left;
	display: block;	
}

.infoCat h2{
	font: normal normal 1.2em "Roboto-Bold";
	color: #1d807f;
}

}


/* Small Desktop Layout: 900px to a max of 1199px.  Inherits styles from: Mobile Layout and Tablet Layouts. */

@media only screen and (min-width: 900px) {
.gridContainer, .gridContainer_portfolio, .gridContainer_info {
	width: 92%;
	max-width: 1000px; /* ?? */
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}

#outer_wrapper, #outer_wrapper2 {
	/* clear: both; ?? */
	margin: 0 auto;
	width: 80%;
	/*padding-left: 0.75%;
	padding-right: 0.75%;*/
	display: block;
}

header {
	/*background: rgba(80, 80, 80, .5);*/
	background: rgba(0, 0, 0, .5);
	width: 100%;
	padding: 0;
	margin: 0 auto;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

#header_BG {
	background: rgba(0, 0, 0, .5);
}

header h1 {
	width: 30%; 
	float: left;
	margin-top: 0;
	padding-top: .3em;
	margin-left: 0;
}
#logo img {
	width: 180px;
	display: block;
	margin-left: .75em;
}

#header_right {
	float: right;
	width: 65%;
	margin-right: .8em;
	/*margin-right: 1.5em;*/
}

#tagline {
	float: right;
	width: 100%;
	text-align: right;
	margin-top: 1em;
	margin-right: 1.2em !important;
	margin-bottom: 1.75em !important;
	color: #e4e4e4;
	font: normal .8em "Roboto-MediumItalic";
}

#cssmenu {
	float: right;
	width: auto;
	display: block;
	margin-right: 1.2em !important;
}

#portfolio_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	float: left;
	width: auto;
	margin-top: 10px;
	padding-bottom: 5px;
}

#info_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	float: left;
	width: auto;
	margin-top: 10px;
	padding-bottom: 5px;
}

#portfolio_sections a {
  	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #209190;
}

#info_sections a {
	font-family: "Roboto-MediumItalic" !important;	
	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #065352 !important;
}

#portfolio_sections a:hover, #info_sections a:hover {
	text-decoration: underline;
 	color: #ddd;
}


#infoImage {
	float: left;
	margin: 0 2em 1em 0;
	width: inherit;
}

#contactImage {
	float: right;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: -10em;
	margin-right: .8em;
	/* width: inherit;  ??? */
}


#thumb_box {
	margin: -2em auto 0 auto !important;
	width: 95%;
	padding: .3em 1.5em 2em .3em; 
	display: block;	/* pretty good fix for centering the block!!!!! */		
}

.home_img {
	margin: -3em auto -1.5em auto !important;
	width: 100%;
	/*padding-bottom: 0 !important;*/
	display: block;	/* pretty good fix for centering the block!!!!! */	
	float: none;
	clear: both;	
}

div#info_box {
	margin: .5em auto 0 auto;
	width: 97%;
	padding: .3em .75em .75em .75em;  
	display: block;	
	background: rgba(252, 245, 244, .3);
}


h2 {
	font-family: "Roboto-Medium";
	font-weight: normal;
	font-size: 1.1em;
	clear: both;
	float: none;
	color: #ddd;
}

/*
h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color: #ddd;
}
*/

.image_row {	
	padding-bottom: 1.5em;
}

.thumbnail {
	padding: .75em;
	width: 29%;
	float: left;
	display: block;
}

#catagories {
	columns: 28% 3;
}

/*** ^^ Yay!!!! vv */

.infoCat {
	padding: 1em;
	width: 28%;
	float: left;
}


.infoCat h2{
	font: normal normal 1.2em "Roboto-Bold";
	color: #1d807f;
}



}


/* BIG Desktop Layout: 1200px & up!!!  Inherits styles from: Mobile Layout and Tablet Layouts & Desktop Layout */

@media only screen and (min-width: 1200px) {
.gridContainer, .gridContainer_portfolio, .gridContainer_info {
	width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}

#outer_wrapper, #outer_wrapper2 {
	clear: both;
	margin: 0 auto;
	width: 80%;
	display: block;
}


header {
	background: rgba(0, 0, 0, .5);
	width: 100%;
	padding: 0;
	margin: 0 auto;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

/*#header_BG {
	background: #000;
	height: 6em;
	psition: relative;
	top: 0;
}*/
	

header h1 {
	width: 35%; 
	float: left;
	margin-top: 0;
	padding-top: .3em;
	margin-left: 0;
}

#logo img {
	width: 194px;
	display: block;
}

#header_right {
	float: right;
	width: 60%;
	margin-right: 1em;
}

#tagline {
	float: right;
	width: 110%;  /* safari needs it wider than 100% on big desktop */ 
	text-align: right;
	margin-top: 1em;
	margin-right: 2em !important;
	margin-bottom: 1.75em !important;
	color: #e4e4e4;
	font: normal .85em "Roboto-MediumItalic";
}

#cssmenu {
	float: right;
	width: auto;
	display: block;
	margin-right: 2em !important;
}

#portfolio_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	float: left;
	width: auto;
	margin-top: 2px;
	padding-bottom: 5px;
}

#info_sections {
	font-family: "Roboto-MediumItalic" !important;
  	font-size: 14px;
	float: left;
	width: auto;
	margin-top: 2px;
	padding-bottom: 5px;
}

#portfolio_sections a {
  	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #209190;
}

#info_sections a {
	font-family: "Roboto-MediumItalic" !important;	
	padding: 6px 25px 10px 25px;
  	text-decoration: underline;
 	color: #065352 !important;
}

#portfolio_sections a:hover, #info_sections a:hover {
	text-decoration: underline;
 	color: #ddd;
}


#infoImage {
	float: left;
	margin: 0 2em 1em 0;
	width: inherit;
}

#contactImage {
	float: right;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: -10em;
	margin-right: 1em;
	/* width: inherit;  ??? */
}

#thumb_box {
	margin: 0 auto;
	width: 92%;
	padding: .3em .75em .75em .75em;  
	display: block;	/* pretty good fix for centering the block!!!!! */	
}

.home_img {
	margin: 0 auto;
	width: 100%;
	padding-top: .5em;
	padding-bottom: 1.5em;
	display: block;	/* pretty good fix for centering the block!!!!! */	
	float: none;
	clear: both;	
}

div#info_box {
	margin: .5em auto 0 auto;
	width: 97%;
	padding: .3em .75em .75em .75em;  
	display: block;	
	background: rgba(252, 245, 244, .3);
}

/*#fdf9fb; f8f5f4  #f8eeeb  rgba(248, 228, 239, .9) 248, 238, 235, .8
252 245 244*/
h2 {
	font-family: "Roboto-Medium";
	font-weight: normal;
	font-size: 1.1em;
	clear: both;
	float: none;
	color: #ddd;
}


/*
h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color: #ddd;
}
*/

.image_row {	
	padding-bottom: 1.5em;
}


/*** image_rowLast wasn't doing doing anything excepte screwing it up at some sizes  ***/

/*.image_rowLast {
	margin-right: auto; 
	margin-left: auto; 
	width: 100%;
	padding-bottom: 1.5em;
	display: block;
	text-align: center;

}*/

.thumbnail {
	padding: 1em;
	width: 28%;
	float: left;
}

#catagories {
	columns: 29% 3;
}

/*** ^^ Yay!!!! vv */

.infoCat {
	padding: 1em;
	width: 29%;
	float: left;
}


.infoCat h2{
	font: normal normal 1.2em "Roboto-Bold";
	color: #1d807f;
}


/*.thumbnail_bigScreen {
	padding: 1em;
	width: 28%;
	text-align: center;
	float: left;
	float: none;	
}*/

/*** thumbnail_bigScreen wasn't doing doing anything excepte screwing it up at some sizes  ***/

/*.thumbnail_bigScreen {      
	padding: .1em;
	width: 28%;;
	text-align: center;
	float: left;*/
	
	/*text-align: center;
	float: none;
}*/

}