@charset "UTF-8";


html,
body {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	;
	width: auto;
	height: 100%;
	font-size: 12px;
}

a,
img {
	text-decoration: none;
	outline: none;
	border: none;
	padding: 0;
	margin: 0;
}

a,
a:hover,
a:visited,
a:active {
	color: #000;
}

.clearFix {
	float: none;
	clear: both;
}

.hide_mobile {
	display: none;
}

.showPhone {
	display: block;
}

p {}

.specialChar {
	// font-family: Arial black, Helvetica Bold, Sans-serif;
	// font-size: 16px;
}

/*HEAD TAGS*/
h1,
h2,
h3 {
	display: block;
	margin: 0;
	padding: 8px 0 4px;
	font-family: "Roboto Slab", Tahoma, Sans-serif;
	font-weight: normal;
	color: #4B8AC0;
}

h1 {

	font-weight: normal;
	font-size: 3.8em;
}

h2 {

	font-weight: normal;
	font-size: 1.4em;
	line-height: 1em;
}

h3 {

	font-weight: normal;
	font-size: 1.2em;
	line-height: 1em;
}

article p,
article ul {
	margin: 0 0 6px;
	padding: 0;
}

p,
li {
	/*font-family: 'FranklinGothicW01-No-2R', Georgia,Times,"Times New Roman",serif;*/
	font-family: "Roboto Slab", Tahoma, Sans-serif;
	font-weight: light;
	font-size: 1.1em;
	line-height: 1.5;
	color: #666;
	margin: 4px 10px 0;
	padding: 0;
}

strong {
	color: #4B8AC0;
}

.textCallout {
	font-style: italic;
	font-weight: bold;
	color: #444;
}

.specialChar {
	font-family: "Roboto Slab", Tahoma, Sans-serif;
	font-weight: bold;
}

.intro {
	position: relative;
	display: block;
	font-family: "Roboto Slab", Tahoma, Sans-serif;
	font-size: 1.5em;
	line-height: 1.5;
	padding: 0 0 .5em;
}
.intro.smaller {
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 0 1em;
	column-count: 2;
	column-gap: .2em;
}

.textCallout {
	font-weight: bold;
	/*font-style: italic;*/
	color: #333;
}

.col {
	margin: 20px 0 0;
}

.boldFont {
	font-family: "Roboto Slab", Tahoma, Sans-serif;
	font-weight: normal;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:hover,
a:active,
a:focus {
	/* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/*END OF RESUME SPECIFIC*/
.flex1 {
	display: flex;
	column-gap: 2em;
	flex-wrap: wrap;
	padding: 2em;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	margin: 20px 0;
}

.flexcol {
	display: flex;
	flex: 1;
	min-width: 200px;
	color: #ddd;
}

.flexcol:nth-child(3) {
	color: #FEF37F;
}

/* --- PRELOADER ---- */
#preloader {
	position: absolute;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #4B8AC0;
	text-align: center;
	top: 50%;
	left: 50%;
	margin: -40px 0 0 -40px;
	z-index: 300;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
#wrapper {
	position: relative;
	display: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	left: 0;
	right: 0;
	background: #fff;
	overflow: auto;
}

.content {
	position: relative;
	width: 90%;
	height: auto;
	max-width: 600px;
	// min-width: 300px;
	margin: 0 auto;
}

.pageFooter .content {
	height: 42px;
	overflow: hidden;
	background-color: #999;
}

/*---------HEADER STYLING------------*/
#workHeader {
	position: absolute;
	z-index: 1;
	height: auto;
	width: 100%;
	bottom: 0;
	right: 0px;
	clear: both;
}

#nameTag {
	position: fixed;
	display: block;
	width: 100%;
	padding: 30px 0 0;
	right: 0;
	top: 0;
	z-index: 250;
	background-color: #4B8AC0;
	border-bottom: 1px solid white;
}

#nameTag h1 {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	color: #fff;
	font: 38px/.5em 'ChunkFiveRegular', "Arial Black", Helvetica;
	font-weight: normal;
	text-align: right;
}

#nameTag h1 #firstName {
	font-family: 'TeXGyreAdventor', Arial, Helvetica;
}

#workHeader h2 {
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	left: 0;
	bottom: 70px;
	line-height: .5em;
	color: #666;
}

/*---------HEADER STYLING------------*/
#pageHead {
	position: fixed;
	display: none;
	background-color: rgba(240, 240, 240, .85);
	width: 100%;
	height: 80px;
	/*15% of window height using jquery*/
	top: 0px;
	z-index: 50;
}

.topper {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0px 0;
	height: 30%;
	background-image: url("../IMG/BG/BoyCanShout.png");
	background-repeat: no-repeat;
	background-size: 50%;
	background-color: rgba(79, 136, 189, 1.0);		
	background-position: 55% bottom;
}
.topper .columns {
	flex-wrap: nowrap;
	padding: 30px 0;
	box-sizing: border-box;
}

/*IMAGE AND TAGLINE*/

#titleBlock {
	display:flex;
	color: #fff;
	column-gap: 1em;
	align-content: flex-start;
}
#titleBlock > .col {
	flex: 1;

}

#tagline {
	position: relative;	
	display: inline-flex;
	padding: 0;
	margin: 0;
	left: 0px;
	color: #fff;
}
#tagline.col {
	justify-content: flex-end;

}

#tagline h2 {
	display: none;
	color: #fff;
	font: 2rem/1.0 'TeXGyreAdventor', Arial, Helvetica;
	text-align: right;
}
#tag2 {
	display: none;
	font: 1.0em/ 1.0 'TeXGyreAdventor', Arial, Helvetica;
	margin: 10px 0 0;
	// padding: 10px 0 4px;
}
/*END IMAGE AND TAGLINE*/
/*----------NAV CONTENTS GO HERE--------------*/
#mainNav {
	position: relative;
	display: none;
	height: 100%;
	width: 100%;
}

#mainNav ul {
	position: absolute;
	display: block;
	padding: 0;
	margin: 0;
	left: 0;
	bottom: 0;
	height: auto;
}

#mainNav ul li {
	font: 2em/1em 'ChunkFiveRegular', Georgia, Times, "Times New Roman", serif;
	font-weight: normal;
	text-decoration: none;
	position: relative;
	display: inline-block;
	list-style: none;
	padding: 0;
	width: auto;
	float: left;
	color: #000;
}

#mainNav ul li:hover {
	color: #777;
}

/* ----ACTIVE NAV STATE ------ */
/* #mainNav ul li.navActive, #myWork .subNav ul li.navActive {
 	color: #4B8AC0;
 	}*/
 	#mainNav ul li.navActive,
 	#mainNav ul li:first-child {
 		color: #4B8AC0;
 	}

 	/*----------end NAV CONTENTS-------------*/

 	/*  MINI-SHOWCASE  */
 	#galBtn {
 		position: absolute;
 		display: none;
 		left: 30px;
 		top: 48px;
 		padding: 10px;
 		background-color: red;
 		border-radius: 10% 10% 0 0;
 		z-index: 100;
 		font: 1em/.8em 'TeXGyreAdventor', Arial, Helvetica;
 		color: #fff;
 		cursor: pointer;
 	}

 	/*MINI SHOW*/


 	#miniShow {
 		position: absolute;
 		display: none;
 		width: auto;
 		padding: 20px;
 		margin: 0;
 		top: 100px;
 		left: 20px;
 		right: 20px;
 		bottom: 60px;
 		background-color: rgba(0, 0, 0, .7);
 		z-index: 20;
 		-webkit-box-sizing: border-box;
 		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 	}

 	#miniShow .intro {
 		position: relative;
 		display: block;
 		color: #fff;
 		margin: 0;

 	}

 	#miniShow p,
 	#miniShow a {
 		color: #fff;
 		margin: 0 0 10px;
 	}

 	#miniShow p a {
 		display: inline-block;
 		padding: 2px 6px;
 		/*border: 1px;*/
 		color: #fff;
 		background-color: red;
 	}

 	#miniShow ul {
 		position: relative;
 		-moz-display: flex;
 		-webkit-display: flex;
 		display: flex;
 		height: 220px;
 		-moz-flex-direction: row;
 		-webkit-flex-direction: row;
 		flex-direction: row;
 		justify-content: space-between;
 		flex-wrap: wrap;
 		flex-width: 45%;
 		height: auto;
 		width: 100%;
 		padding: 0;
 		margin: 0;
 		/*background-color: #fff;*/
 		overflow: hidden;
 	}

 	#miniShow ul li {
 		list-style: none;
 		position: relative;
 		flex-direction: row;
 		flex-wrap: wrap;
 		width: 47%;
 		align-items: center;
 		margin: 0 2px;
 	}

 	#miniShow ul li a {
 		position: relative;
 		display: block;
 		height: inherit;
 		text-align: center;
 		overflow: hidden;
 		color: red;
 		padding: 0;
 		background-color: transparent;

 	}

 	#miniShow ul li a img,
 	#miniShow ul li a img a {
 		width: 100%;
 		height: auto;
 		background-color: #fff;
 	}
 	.closer {
 		position: absolute;
 		display: inline-block;
 		text-align: center;
 		color: #fff;
 		font: 1.4em/.8em sans-serif;
 		zoom: 1;
 		/* Fix for IE7 */
 		*display: inline;
 		/* Fix for IE7 */
 		top: 6px;
 		right: 6px;
 		padding: 6px;
 		border-radius: 50%;
 		background-color: #4B8AC0;
 	}
 	#miniShow .scrollbox {
 		position: relative;
 		flex: 0 1 auto;
 		-webkit-flex: 0 1 auto;
 		-moz-flex: 0 1 auto;
 		-ms-flex: 0 1 auto;
 		align-self: flex-end;
 		overflow-y: scroll;
 		height: 100%;
 	}
 	.scrollbox .intro p {
 		color: #F2EFEF;
 	}
 	#logos {
 		display: none;
 	}


 	/*END MINI SHOW*/

 	section {
 		position: fixed;
 		display: block;
 		height: auto;
 		right: 0;
 		left: 0;
 		top: 50px;
 		bottom: 70px;
 		overflow: auto;
 		padding: 0;
 	}
 	article.content {
 		position: relative;
 		color: #CCC;
 		display: block;
 		height: auto;
 		width: 85%;
 		padding: 30px 0 0;
 		margin: 0 auto;
 	}
 	.main {

 	}

 	article.content ul {
 		padding: 0 0 0 18px;
 	}
 	/*article ul li::marker {

 	}*/

 	article.content ul li {
 		padding: 0 0 0 0;
 		margin-left: 24px;
 		list-style-image: url('../IMG/ICONS/listIcon1.svg');
 	}

 	/*ul li::marker {
 		font-family: "Font Awesome 5 Free"; 
 		font-weight: 900; 
 		content: "\f067";
 		color: #4B8AC0;
 		font-size: .8rem;
 	}*/

 	h4.refBtn {
 		display: block;
 	}

 	/*BELOW STRICTLY FOR RESUME*/
 	h4.refBtn a {
 		display: inline-block;
 		border: 1px solid #999;
 		color: #4B8AC0;
 		font-family: 'TeXGyreAdventor', Arial, Helvetica;
 		font-size: 1.3em;
 		line-height: 1.5;
 		text-align: center;
 		padding: 12px 20px;
 		width: 100%;
 		box-sizing: border-box;
 	}

 	h4.refBtn:hover a {
 		color: #FFF;
 		background-color: #ccc;
 	}

 	.columns {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
 		padding: 0 0;
 	}
 	.col {
 		// min-width: 200px;
 		flex-grow: 1;
 	}

 	.rightAlign {
 		text-align: right;
 	}

 	/*END OF RESUME SPECIFIC*/
 	.flex1 {
 		display: flex;
 		column-gap: 2em;
 		padding: 2em;
 		background-color: rgba(0,0,0,0.8);
 		color: #fff;
 	}
 	.flexcol {
 		display: inline-flex;
 		flex-grow: 1;
 		color: #999;
 	} 
 	.flexcol:nth-child(3) {
 		color: #FEF37F;
 	}


 	/*SUBNAVIGATION IN ARTICLE MAIN --  DISABLED*/
 	section#myWork .subNav {
 		position: relative;
 		display: none;
 		width: 100%;
 		color: #999;
 		float: right;
 		margin: 30px 0px;
 	}

 	/*ASIDE CONTENT*/
 	aside {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		position: relative;
 		padding: 20px;
 		background-color: rgba(75, 138, 192, .5);
 	}

 	aside h4 {
 		display: flex;
 		flex-wrap: wrap;
 		padding: 0 2px;
 	}

 	#appleId {
 		display: flex;
 		flex-grow: 2;
 		padding: 0 2px;
 	}

 	aside h4 {
 		color: #fff !important;
 	}

 	/*END:SUBNAVIGATION IN ARTICLE MAIN*/
 	section#myWork aside,
 	section#myWork .thumbPanel {
 		margin: 10px auto;
 		clear: both;
 	}

 	section#myWork .thumbPanel {
 		position: absolute;
 		height: 74%;
 		top: 20px;
 		left: 10%;
 		right: 10%;
 		overflow: auto;
 	}




 	.thumbPanel ul#displayBoxes {
 		position: relative;
 		padding: 0;
 		margin: 0;
 		overflow: auto;
 	}

 	.thumbPanel ul#displayBoxes li,
 	.thumbPanel ul#displayBoxes li a {
 		position: relative;
 		display: inline-block;
 		vertical-align: top;
 		float: right;
 		text-align: right;
 		font-size: .5em;
 		color: #cfa624;
 		background-color: #239aff;
 	}

 	.thumbPanel ul#displayBoxes li a {
 		height: 100%;
 	}

 	.thumbPanel ul#displayBoxes li {
 		width: 49%;
 		margin: 0 0 4px 4px;
 		overflow: hidden;
 	}

 	.thumbPanel ul#displayBoxes li:nth-child(3n) {
 		margin: 0 0 4px 0;
 	}

 	.thumbPanel ul#displayBoxes li:last-of-type {
 		clear: both;
 	}

 	.thumbPanel ul#displayBoxes li img {
 		width: 100%;
 	}

 	/*end display boxes*/

 	section#myWork aside {
 		display: none;
 		padding: 25px 35px;
 		width: 240px;
 		height: 240px;
 		background: url(../IMG/BG/BRACKETStop.png) 0 0 no-repeat, url(../IMG/BG/BRACKETSBottom.png) no-repeat 0 bottom;
 		background-size: 100% auto;
 	}

 	.infoText h3 {
 		color: #4B8AC0;
 	}

 	/*CONTACT BOX IS SUPPRESSED*/
 	section#contactForm {
 		display: none;
 	}

 	/* ------------ GOOD PEOPLE SECTION ------------- */
 	#myPeeps {}

 	#myPeeps #peepsContent {
 		position: absolute;
 		width: 80%;
 		height: 100%;
 		margin: 20px 10% 0px;
 		padding: 0;
 	}

 	#myPeeps h2 {}

 	#myPeeps h3 {}

 	#peepWindow {
 		position: relative;
 		display: block;
 		background-color: #000;
 		width: 100%;
 		height: 72%;
 		overflow: auto;
 		margin: 12px auto 0;
 	}

 	#peepWindow ul {
 		padding: 0;
 		margin: 0;
 	}

 	#peepWindow ul#peepBoxes li {
 		position: relative;
 		display: inline-block;
 		list-style: none;
 		padding: 0;
 		margin: 0 0 1% 1%;
 		width: 49%;
 		height: ;
 		/*see js rule*/
 		background-color: #4B8AC0;
 		float: left;
 		font: .8em/1em 'TeXGyreAdventor', Arial, Helvetica;
 		font-weight: bold;
 		color: #fff;
 		text-align: center;
 		overflow: hidden;
 	}

 	#peepWindow ul#peepBoxes li .capText a {
 		position: relative;
 		display: block;
 		width: 100%;
 		height: inherit;
 		vertical-align: middle;
 		margin: 0;
 		padding-top: 40%;
 		background: rgba(81, 191, 237, .85);
 		color: #fff;
 	}

 	#peepWindow ul#peepBoxes li:hover .capText a {
 		opacity: 0;
 	}

 	#peepWindow ul#peepBoxes li:nth-child(2n+1) {
 		margin-left: 0;
 		font-family: Arial, Helvetica, sans-serif;
 	}

 	/*ICONS----*/

 	//#peepWindow ul li {
 		// 	background-repeat: no-repeat;
 		// 	background-size: 100% auto;
 		// }

 		// #peepWindow ul li#cardComm {

 			// 	background-image: url('../IMG/GOODPEEPSorg/CARDINAL.jpg');
 			// }
 			// #peepWindow ul li#NYhist {
 				// 	background-image: url('../IMG/GOODPEEPSorg/nyhs_logo.jpg');
 				// }
 				// #peepWindow ul li#bikeStation {
 					// 	background-image: url('../IMG/GOODPEEPSorg/BIKE-STATION.jpg');
 					// }
 					// #peepWindow ul li#greenMachine {
 						// 	background-image: url('../IMG/GOODPEEPSorg/GREEN-MACHINE.jpg');
 						// }
 						// #peepWindow ul li#MADmuseum {
 							// 	background-image: url('../IMG/GOODPEEPSorg/MADmuseum.jpg');
 							// }
 							// #peepWindow ul li#Ferate {
 								// 	background-image: url('../IMG/GOODPEEPSorg/FERATE.jpg');
 								// }
 								// #peepWindow ul li#MSF {
 									// 	background-image: url('../IMG/GOODPEEPSorg/MSForg.jpg');
 									// }
 									// #peepWindow ul li#opSmile {
 										// 	background-image: url('../IMG/GOODPEEPSorg/OP-SMILE.jpg');
 										// }
 										// #peepWindow ul li#WISH {
 											// 	background-image: url('../IMG/GOODPEEPSorg/MAKE-A-WISH.jpg');
 											// }
 											// #peepWindow ul li#rocketDog {
 												// 	background-image: url('../IMG/GOODPEEPSorg/ROCKET-DOG.jpg');
 												// }

 												/* --------SOCIAL POP-UP -------------- */
 												#socIcons {
 													display: none;
 													position: fixed;
 													height: 80px;
 													width: 80%;
 													bottom: 100px;
 													left: 10%;
 													border-radius: 20px;
 													background-color: rgba(101, 183, 217, 1);
 													background-clip: content-box;
 													border: 4px solid rgba(30, 30, 30, .3);
 													z-index: 200;
 												}

 												#socIcons ul {
 													position: relative;
 													/*height: 30%;*/
 													width: 80%;
 													margin: 22px auto 0;
 													padding: 0;
 												}

 												#socIcons ul li {
 													position: relative;
 													list-style: none;
 													color: #fff;
 													float: left;
 													width: 20%;
 													margin: 0;
 													padding: 0;
 													/*background-color: #4E90AB;*/
 													text-align: center;
 												}

 												#socIcons ul li img {
 													width: 30px;
 													height: 30px;
 													margin: 2px;
 												}

 												#socIcons ul li a {}

 												/*PAGE FOOTER ITEMS ---------------------*/
 												.pageFooter {
 													position: fixed;
 													display: block;
 													height: 42px;
 													/*width: 96%;*/
 													left: 3%;
 													right: 3%;
 													bottom: 10px;
 													clear: both;
 													z-index: 5;
 													/*background-color: #4B8AC0;*/
 												}

 												#aboutUs {
 													/*HIDDEN IN THE MOBILE VERSION*/
 													display: none;
 													visibility: hidden;
 												}

 												#contactUs {
 													position: relative;
 													display: block;
 													padding: 0;
 													margin: 0;
 													height: inherit;
 												}

 												#contactUs .UIitems {
 													position: relative;
 													display: block;
 													height: inherit;
 													margin: 0;
 													padding: 0;
 													list-style: none;
 												}

 												#contactUs .UIitems li {
 													position: relative;
 													list-style-type: none;
 													padding: 0;
 													margin: 0;
 													border-right: 1px solid #C2E4F4;
 													height: inherit;
 													width: 49%;
 													float: left;
 													font: 400 normal 16px/44px 'TeXGyreAdventor', Arial, Helvetica;
 													text-align: center;
 													color: #ffffff;
 													background-color: #4B8AC0;
 												}

 												ul.UIitems li::marker {
 													font-family: "Font Awesome 5 Free"; 
 													font-weight: 900; 
 													content: none;
 													color: #4B8AC0;
 													font-size: .8rem;
 												} 

 												#contactUs .UIitems li a {
 													display: block;
 													height: inherit;
 													color: #ffffff;
 												}

 												.pageFooter #contactUs .UIitems li:last-of-type {
 													border-right: 0;
 												}

 												.pageFooter #contactUs .UIitems li:hover,
 												.pageFooter #contactUs .UIitems li a:hover,
 												.pageFooter #contactUs .UIitems li:focus,
 												.pageFooter #contactUs .UIitems li a:focus {
 													background-color: #4B8AC0;
 													color: #fff;
 												}

 												/* ------CONTACT FORM ---------- */
 												/