@charset "utf-8";
/* --- basic styling ---*/
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body {
	background-color: #FFFFFF; 
	background:url(images/tt_background_1500x2000_v3.png) repeat fixed top ;
	background-size: cover;
	font-family: 'Quattrocento', Arial, "Times New Roman", Times, serif; 
        color:#021D26;
        text-align: center;
}
#clear {
	clear: both;
}
@keyframes fade-in {
    from {opacity:0.05; filter: alpha(opacity=05);}
    to {opacity:1.0; filter: alpha(opacity=100);}
}
#wrapper {
	width:100%;
	max-width:1200px;
	margin: 0 auto;
}	
header {	
	width:100%;
	margin-top: 50px;
}
header img {
	width:100%;
}
header h1{
	font-size:51px;
	margin: 20px 0;
}	
nav {
	line-height: 1.8em;
	margin-bottom: 20px;
}
nav a:link {
	color: #FFFFFF;	
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}
nav a:visited {
	color: #FFFFFF;	
	text-decoration:none;
}
nav a:hover {
	color: #63F;
	text-shadow:none;
}
nav a#current {
	color: #333333; 
	text-decoration:none;
	padding-top: 10px;
	text-shadow:none;
}
#content p, #content li {
	max-width: 700px;
	margin: 0 auto;
	padding-bottom: 1em;
}
#content img {
	box-shadow: 5px 5px 5px #888;
	border: 2px solid transparent;
	/*-webkit-border-image: url(images/image-border.png) 2 2 2 2 repeat;
	  -moz-border-image: url(images/image-border.png) 2 2 2 2 repeat;
	  -o-border-image: url(images/image-border.png) 2 2 2 2 repeat; */
	border-image: url(images/image-border.png) 2 2 2 2 repeat;
}
#content img.no-decor {
	border:none;
	box-shadow: none;
}
#content #social {
	margin: 0 auto;
	max-width: 700px;
}
#content #social img {
    margin: 0 15px 1em 0;
}
#content #ob_side {
	display: block;
}
#content #ob_side section {
	margin-bottom: 20px;
}
#content a:link {
	color: #021D26;	
	text-decoration:none;
}
#content a:visited {
	color: #021D26;		
	text-decoration:none;
}
#content a:hover {
	color: #63F;	
}
#compatible {
	color: red;
	text-align: center;
}
#home_page #content img {
	width:100%;
	max-width:700px;
	margin: 20px auto 0 auto;
	display: block;	
	animation: fade-in 10s ease 1;
}
#portfolio_page #content {
	width: 100%;
	max-width:700px;
	margin: 0 auto;
}
#portfolio_page hr {
	margin: 10px auto;
	width: 90%;
	float:left;
	clear: left;
}
#portfolio_page #content a { 
	margin: 0 auto;
	float:left;
	clear: left;
}
#portfolio_page #content img {
	width: 100%;
	max-width: 700px;
	box-shadow: 5px 5px 5px #888;
	border: 2px solid transparent;
	/*-webkit-border-image: url(images/image-border.png) 2 2 2 2 repeat;
	  -moz-border-image: url(images/image-border.png) 2 2 2 2 repeat;
	  -o-border-image: url(images/image-border.png) 2 2 2 2 repeat; */
	border-image: url(images/image-border.png) 2 2 2 2 repeat;
}
[id^="portfolio_page_"] #content #comp_verb {
    display: block;
}
[id^="portfolio_page_"] #content #comp_verb #g_components{
	display: block;
	text-align: center;
}
[id^="portfolio_page_"] #content #comp_verb img {
    margin: 0 0 10px 0;
    max-width: 100%;
}
footer {
	width:100%;
	max-width: 1200px;
	color:#021D26;
	font-size:12px;
	margin: 20px 0;	
}
.slogan {
	font-size:30px;
}
/*--- rollovers need to be in the order of link, visited, hover, active ---*/	
footer a:link {	
	color:#021D26;
	text-decoration:none;
}
footer a:visited {	
	color:#021D26;
	text-decoration:none;
}
footer a:hover {
	color: #63F;	
}

/* --- Code for responsive design --------------------------------------------- */
@supports (grid-area: auto) and (display: flex) {

/* hide html5 css3 incompatibility error message */
#compatible {
	display: none;
} 	

#portfolio_page #content {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width:600px) {
body {
	text-align: left;
}
#wrapper {
	display: grid;
	grid-template-columns: 1% 130px auto 1%;
	grid-template-rows: 1fr auto 1fr;
	grid-gap: 1em 1em;
	grid-template-areas: 
		"header header header header" 
		". nav content ." 
		"footer footer footer footer";
}
header {	
	grid-area: header;
	text-align: center;
}
nav {
	grid-area: nav;
}
#content { 
	grid-area: content;
	padding: 0em 1em 1em 1em;
}
#content #ob_side {
	display: flex;
}
#content #ob_side section {
    	margin: 0 auto;
}
#content #comp_verb {
	display: flex;
}
#content #comp_verb #g_components {
	flex-basis: 50%;
}
#content #comp_verb #g_components img {
	width:100%;
	max-width: 400px;
}
#content #comp_verb #g_components img:nth-child(3n) {
	width:100%;
	max-width: 200px;
}
#content #comp_verb #verbiage {
	margin: 0 0 0 20px;
	flex-basis: 50%;
}
[id^="portfolio_page_"] #content #comp_verb {
    	display: flex;
}
/* [id^="portfolio_page_"] #content #comp_verb img {
    	margin: 0 0 10px 0;
    	max-width: 100%;
}*/
footer {
	grid-area: footer;
}
} 
@media screen and (min-width:900px) {
#wrapper {
	display: grid;
	grid-template-columns: 4% 130px auto 130px 4%;
	grid-template-rows: 1fr auto 1fr;
	grid-gap: 1em 1em;
	grid-template-areas: 
		"header header header header header" 
		". nav content . ." 
		"footer footer footer footer footer";
}
}
}