body,div,ul,li,h1,h2,textarea,title{margin:0;padding:0}
	body{background-color:#fff;color:#000; /*BG#232323; color:#969696 background-color:#222;color:#fff*/   /* COLOR_SWAP 01/08/24 - #fff */
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering: optimizelegibility;
    font-weight:300;line-height:1.8em;overflow:auto;font-size:.9em;}
	img{border:solid 0px}
/*-------------------------------------------------------------------------------------------------------------------- TYPE */
	p{margin:.1em 0 0 0}
	a{color:#fff;opacity:1;text-decoration:none;outline:0}   /* COLOR_SWAP 01/08/24 - #fff */
	
	#sj a{color:#fff;opacity:1;text-decoration:none;outline:0;margin:0; text-align:center;}  /* COLOR_SWAP 01/08/24 - #000 */
	
	.media {color:#000;opacity:1;text-decoration:none;outline:0}  /* COLOR_SWAP 10/12/22 - #000 */
		
	.mL{opacity: .7}

	#hcard-Sherman-Johnson{position:absolute; top:-500px;width:320px;height:25px;overflow:hidden}
	#title{position:relative;top:0px;width:320px;height:20px;margin:0 auto;text-align:center;overflow:hidden;z-index:0}
	#sherman{position:relative;top:0px;width:320px;height:20px;margin:0 auto;text-align:center;overflow:hidden;z-index:0}
	
	h1{color:#999;font-weight:400;font-size:2em;line-height:2em;letter-spacing:.1em;margin:25px 0 2px 0}
	h2{color:#999;font-weight:200;font-size:1.2em;line-height:2em;letter-spacing:.2em;margin:15px 0 7px 0}				 /* COLOR_SWAP 01/08/24 - #999 */
	h3{color:#222;font-weight:200;font-size:.9em;line-height:1.8em;letter-spacing:.2em;margin:15px 0 2px 0} /* COLOR_SWAP 10/12/22 - #fff    COLOR_SWAP 01/08/24 - #cecece */
  
/*-------------------------------------------------------------------------------------------------------------------- HEADER */
	#header{position:relative;top:0;left:0;width:100%;overflow:hidden;z-index:40;}
	#headerContent{position:relative;width:1546px; margin:0 auto} /*was 1006 */
	#headerMargin{position:relative;
		transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out ;
	}

  	.headerMargin{margin-top:20px;margin-bottom:20px}
  
 	#sj{position:relative;margin:0 0 0 10px; overflow:hidden;font-size:2em;font-weight:200;line-height:1.5em;letter-spacing:.05em;opacity:1; 
		transition: all 0.2s ease-in-out;
  		-webkit-transition: all 0.2s ease-in-out;
  		-moz-transition: all 0.2s ease-in-out ;
		  text-align: center;
	}
	
	
	#dp {font-weight:100;display:inline;display:block;font-size:70%;margin-top:-.8em;}
	
	
	.shrink{ margin-top:10px;margin-bottom:10px }
  
		
/*-------------------------------------------------------------------------------------------------------------------- MENU */
	#menu{position:relative;left:-4px;text-align:center;padding:0;font-size:.9em;letter-spacing:.1em;overflow:hidden;text-transform: uppercase;}
	#menu a {opacity: .58}
	#menu ul{float:left;display:none}
	#menu ul li{display:inline;list-style:none;padding:15px 15px 15px 15px}
	
	#subsections{margin-top:100px}
	
	#contact {float:right}
	
	#mobileMenuContainer{position:relative;width:100%;height:0;overflow:hidden;text-transform: uppercase; overflow:hidden;}
	#mobileMenuContainer a{color: #fff}
	
	#mobileMenuContainer ul{display:block}
	#mobileMenuContainer ul li{display:block;list-style:none;text-align:center}
	#menuToggle{position:absolute;top:.5em;left:15px;top:7px; overflow:hidden;display:none}
	#menuToggle img{border:solid 0;}
	
	#openMenu{display:block; padding: 0 2em 2 em 0; opacity: .56}
	#archive{position:relative;margin:1em 1em 3.5em 0;float:right;text-align:right;padding:0;font-size:1.1em;letter-spacing:.1em;overflow:hidden;text-transform: uppercase;}
	
	#special{position:relative;margin:0em 1em 1em 6px;text-align:left;padding:0;font-size:1.1em;letter-spacing:.1em;overflow:hidden;/*text-transform: uppercase;*/}
	
	#plus{font-size:1.3em;}
	.line-break {width: 160px;height: 1px; margin: 0 auto 5px auto;background-color: #666;}
	.pad {padding:8px 10px 5px 15px;}
	.hide {padding:0px 0px 0px 0px; display: none}
	

/*-------------------------------------------------------------------------------------------------------------------- LAYOUT */	
	#site{position:fixed;top:0px;left:0;height:100%;width:100%;margin:0;padding:0;overflow:hidden;	background-color: #222;color: #fff}
	
	#content{position:relative;left:0;width:100%;-webkit-overflow-scrolling:touch;display:block;overflow-x:hidden;overflow-y:hidden;height:auto;}
	#content{-ms-overflow-style:auto}
		
	#page{position:relative; width:1394px; padding:0 4px 4px 4px;overflow:hidden} 
	.page{overflow: auto} /* was in individual pages */
	
	#footer{position:absolute; left:0; text-align:center; font-size:.8em;height:10px; bottom:0;width:100%;background-color:#fff;z-index:110;}
			
	#footer ul{display:inline}
	#footer ul li{display:inline;list-style:none;padding:15px 15px 15px 15px}		
/*-------------------------------------------------------------------------------------------------------------------- SPOTS */
	.th{position:relative;display:inline;float:left;display:inline;overflow:hidden;border:0px solid #000}
	.white{position:absolute;background-color: #222;float:left;display:block;overflow:hidden;border:0px solid #000;z-index: 100}

	.details{position:relative;float:left;bottom:0px; padding:5px;display:inline; text-indent:0em;}
	
/*------------------------------------------------------------- HAMBURGER */

.hamburger {
  padding: 10px 0px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }

.hamburger-box {
  width: 30px;
  height: 18px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #000;
    border-radius: 3px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
	background-color: #fff;}
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }
	
  .hamburger-inner.changed, .hamburger-inner.changed:after, .hamburger-inner.changed:before {background-color: #fff;opacity:1}
	
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: .15s;
  transition-delay: 0;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.15s 0.08s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.06s 0.10s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.06s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	
.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.15s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  
  .hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.1s linear; }
	
  .hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s .1s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*-------------------------------------------------------------------------------------------------------------------- ROLLOVER */
	.rO{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;overflow:hidden;display:none;z-index: 50}
	
	.rC{position:absolute;color:#fff;top:0;font-weight:300; letter-spacing:.5em; left:0;width:100%;height:100%;margin:auto 0;display: table; opacity:0;zindex:200;}
	
	.rCtext{position:relative; height:7em; display: table-cell;vertical-align: middle;font-size:2em;line-height:1.5em;text-align:center;letter-spacing:.1em;/*text-transform: uppercase*/z-index: 100}
	
	.rCtextTitle{vertical-align: inherit;font-size:50%;line-height:1em;text-align:center;letter-spacing:.1em;}
	.rCtextType{vertical-align: inherit;font-size:50%;line-height:1em;text-align:center;letter-spacing:.1em;font-style:italic}

	/*.rCtextType{font-size:.35em;letter-spacing:0em;font-style:italic;text-transform:none} Borrowed from .sub */
	
		
	.transition{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}
	
	.zM{-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;-ms-transition:all 200ms ease-in-out}
	#thGIF{position:absolute;z-index: 10}
	#thJPEG{position:absolute;z-index: 1}

/*-------------------------------------------------------------------------------------------------------------------- ABOUT */
	#about{position:relative;max-width:900px;margin:0 auto;padding:10px 10px 0 10px}
	#about img{margin:15px 0 10px 40px;}
	#about ul{float:left;display:inline; }
	#about ul li{display:inline;list-style:none;margin:0 6px 8px 0;white-space: nowrap;}
	.wrap {display:block}
	.space{padding-left:5px}
	.sub{font-size:.35em;letter-spacing:0em;font-style:italic;text-transform:none}

/*-------------------------------------------------------------------------------------------------------------------- CONNECT */
	#connect{position:relative;max-width:670px;margin:0 auto;padding:30px 10px 0 10px}
	#message{position:relative;width:400px;float:left;margin:0 0 20px 0;display:inline}
	
	/* --- INFO --- */
	
	#info{position:relative;float:left;margin:0 0 35px 0;display:inline}
	#connectInfo{line-height:1.8em;letter-spacing:.2em; font-size:1.2em; margin:3px 0 40px 0}
	#connectInfo a{color:#fff;opacity:1}
	#email{opacity:1;}
	.social{width:25px;height:25px;margin:10px 10px 0 10px;float:left}
	.social img{width:25px;height:25px;border:solid 0}
	
/*-------------------------------------------------------------------------------------------------------------------- MEDIA PLAYER */ 
	#mediaPlayer{position:relative; width:1200px; padding:0 0px; margin:0 auto;
		overflow:visible;height:auto}
		
	#mediaWin {position:relative; display:block; float:left; padding:0;}
	#mediaInfo{position:relative;float:left;display:block;text-align:left;margin-top:10px;white-space:nowrap;overflow:hidden}
	
	
	#mainInfo{position:relative;min-width:50%;float:left;margin-bottom:10px;text-align:left;white-space:nowrap;}
	
	#awards{position:relative;float:right;display:inline;text-align:right;white-space:nowrap;}
	
	#height{position:fixed;width:640px;margin-top:10px;text-align:left;bottom:-20em;overflow:hidden;z-index:-150;color:#232323} /* STILL NEEDED??? */
	
	#fullDetails{position:relative;float:left; width:100%; margin-top:15px; white-space:normal;display:block; text-indent:0em;}
	
	.tech{position:absolute;float:left;top:100%; padding:5px;display:block; text-indent:0em}
	
	#mediaInfo ul{display:block}
	#mediaInfo ul li{display:block;list-style:none}

/*------------------------------------------------------------------------------------------------------------- BACKGROUND SLIDES */ 
	
	#myslidesContainer{position:relative;top:0;height:100%;margin:0;padding:0 10px;overflow:hidden;opacity:1;z-index:100}
		
	#myslides{position:relative;top:0;width:100%;min-width:100%;height:100%;margin-left:auto;margin-right:auto;overflow:hidden;z-index:-100}
		
	.bg{position:fixed;width:100%;min-width:100%;min-height:100%;height:auto;overflow:hidden;background-repeat:no-repeat;background-position:top center;-webkit-background-size:cover;background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:none}
	
	.bgLink{position:fixed;width:100%;min-width:100%;min-height:100%;height:auto;overflow:hidden;}
	

	
@media only screen and (max-width:1600px){
		#headerContent{width: 100%; margin: .5em auto;}
		
		#page{width:100%; padding:0 4px 4px 4px}

		#myslidesContainer{ padding:0 10px}
		#footer{ height:10px}
	
		/* #menu{display:block}
		#menuToggle{display:none} */
		#menuToggle{left:32px; top:7px}
}	
	
@media only screen and (max-width:900px){	
	#headerContent{width: 100%; margin: 0 0px;}
		#dp {display:block;font-size:70%;margin-top:-.8em;}
				
		
		/*#menu {left:0} */
		
		#menuToggle{left:32px; top:7px}
		
		#menu ul {float:none}
		#awards{float:right;width:auto;text-align:right}
}
	
@media only screen and (max-width:760px){
	
		.rCtext{font-size:2em;}
	
		#page{width:100%; padding:0 4px 4px 4px}
		
		#myslidesContainer{ padding:0 5px}
		#footer{ height:5px}
		
		#mediaInfo{white-space: nowrap}
		
		#menu{display:none}
		#menuToggle{left:32px;  top:7px} /* left was 8 */

		#about img{display:inline}
		
		#connect{position:relative;max-width:370px;margin:0 auto;padding:0 10px 0 10px}
		
		#awards{float:left;width:100%;text-align:left}	
		
}

@media only screen and (max-width:500px){
		#content{overflow-y:overlay;}
		#sj {font-size:1.5em}
	
		.rCtext{font-size:1.8em;}

		#menu{bottom:0px;right:0;display:none}
		#menuToggle{left:8px; display:block ;top:7px}
		
		#page{width:100%; padding:0 4px 4px 4px}
		
		

		#mediaInfo{white-space:normal}
	
		#myslidesContainer{ padding:0 5px}
		#footer{ height:5px}
		#about{font-size: .8em}
		
}