@charset "UTF-8";
/* CSS Document */




a:link {
	text-decoration: none;
	color: #000;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: underline;
	color: #999;
}
a:active {
	text-decoration: none;
	color: #000;
}

#altMenuColor:hover {
	color: #E7E7E7;
}

	



/* The following margin and padding values of 0, in the html and body tags, will eliminate the space at the top of the page and the images and div will now align properly to the top of the page -    
There is some default padding/margin on the html and body tag. The amount varies by browser.
*/
html,body {
    padding: 0px;
    
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    
    background-color:;
    
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -.15rem;
    color: #000000;
}

.main_content_area {
    z-index: 4;
    position: relative;
    width: 850px;
    height: 20px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    
	background-color:;
}   
    
.menu {
    font-weight: bold;
    font-size:33px; 
    letter-spacing: -.15rem;
    z-index: ;
}
    
.heading {
        font-size:72px; 
        letter-spacing: -.15rem;
}
	
.heading_title {
	color: #000000;
	font-size: 28px;
}

.project_titles {
    font-size: 47px; 
    font-weight: ;
    color: #000000; 
    letter-spacing: -.03rem; 
    line-height: 1.2;
    z-index: 1
    }


.copyright {
	font-size: 48px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
    opacity: 0;
}


	

/* title and description pages */

.title_pages_title {
    font-size:72px; 
    letter-spacing: -.15rem;
    font-weight: bold;
}

.title_pages_description {
    font-size:33px; 
    letter-spacing: -.04rem;
    font-style: italic;
    font-weight: ;
}
	
	







/* for image-fade example 1*/


#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}


/* for image-fade example 2*/


	#cf2 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#cf2 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
	















<!------------------------------------------------------------------------>



.example1 a{position:relative;}/* set stacking context -*/
/* Note that opera has a nasty bug and requires the anchor to be display block and could make things awkward hence the opera hack below*/
/* opera also required that the span be hidden with display:none and not visibility hidden otherwise the active area of the link is too big*/
@media all and (min-width: 0px){
 .example1 a,.example2 a {
	display:block;
  }
.example1 a span,.example2 a span{display:none;}
.example1 a:hover span,.example2 a:hover span{display:block;}
}
.example1 a span{
	visibility:hidden;/* hide message initially*/
	position:absolute;
	top:66px;
	left:-70px;
	width:250px;
	padding:5px;
	background:#829900;
	color:#fff;
	border:2px inset green;
	text-decoration:none;
}
.example1 a:hover{visibility:visible}/* ie bug needed to make span show*/
.example1 a:hover span{visibility:visible;}/* show image on hover*/
/* ... example2 ....*/
a img{border:none;}


.example2 a{position:relative;}/* set stacking context*/
.example2 a span{
	position:absolute;
	left:0;top:0;	
	visibility:hidden;/* hide message initially*/
	text-decoration:none;
}


.example2 a em{
	position:absolute;
	top:-30px;
	left:60px;
	width:350px;
	padding:5px;
	background:#829900;
	color:#fff;
	border:2px inset green;
	font-size:200%;
}   

 
 
 
/*position of exhibition documentation photo, each is -56px lower for the top value than the previous, at this scale*/ 
.example2 a img#message0{
	position:absolute;
	top:-20px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
    
}     


/*position of Space Between A Truck photo*/  
.example2 a img#message1{
	position:absolute;
	top:-76px;
	left:0px;
    opacity: 0.3;
    z-index: -1;
}


/*position of Spain photo*/ 
.example2 a img#message2{
	position:absolute;
	top:-132px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
}


/*position of Nashville photo*/ 
.example2 a img#message3{
	position:absolute;
	top:-188px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
}


/*position of BRIEF photo*/ 
.example2 a img#message4{
	position:absolute;
	top:-244px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
}


/*position of HighRise photo*/
.example2 a img#message5{
	position:absolute;
	top:-300px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
}
                                  
								  
/*position of Paradise Gardens photo*/
.example2 a img#message6{
	position:absolute;
	top:-356px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
}


/*position of Instagram photo*/
.example2 a img#message7{
	position:absolute;
	top:-412px;
	left:0px;
    opacity: 0.25;
    z-index: -1;
}

/*All of The Work photo*/
.example2 a img#message8{
	position:absolute;
	top:-468px;
    left:0px;
    opacity: 0.25;
    z-index: -1;
}

.example2 a:hover{visibility:visible}/* ie bug needed to make span show*/
.example2 a:hover span{visibility:visible;}
       
       
       
       <!-------------------------------------------------------------------------------->
       
/* this css was designed to work with file version works-2018_03_22 - new design */