@charset "UTF-8";
/* 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/ 
*/
.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* TEXT TREATMENT GENERAL - STARTS */
a:visited { color: #000000; }

a {
	text-decoration: none;
	color: #000000;
	font-family: sans-serif;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 12pt}

a:hover {
	border-bottom: 1pt solid #000000;
	color: #000000;	
	display: inline;
	text-decoration: none;}

h2 {
	font-family: sans-serif;
	font-weight: 700;	
	font-size: 10pt;
	color: #000000;}

h5 {
	font-family: sans-serif;
	font-size: 8pt;
	line-height: 14pt;
	font-weight: 600;
	margin: 0;}

h6 {
	font-family: sans-serif;
	font-size: 10pt;
	color: #00000;}

h7 {
	font-family: sans-serif;
	color: #000000;}

h8 {
	font-family: sans-serif;
	font-size: 8pt;
	color: #00000;}
/* TEXT TREATMENT GENERAL - ENDS */


/* Mobile Layout: 480px and below. */
@media screen and (orientation:portrait) and (min-width:319px) {

.gridContainer {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;}

.name {
	position: fixed;
	width: ;
	height: 50px;
	color: #000;
	padding: 10px 10px 10px 10px;
	float: left;
	z-index: 90000000000;
	font-size: 12pt;
}
/** Top Right: Contact Button + Toggle (#upper) **/
.contactbutton {
	display: none;
	float: left;
	position: absolute;
	text-align: right;
	top: 1px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;
}

#topright {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	top: 8px;
	width: 200px;
	float:left;
	text-align: right;
	}
	
#topright a:hover + .contactbutton {
	display:block;
}

#upper {
	height: 100%;
	width: 100%;
	top: 0px;
	position: fixed;
	z-index: 1000000;
	background-color: rgba(255,255,255,0.95);
	left: 0;
	margin: 0;
	padding: 0;
	display: none;
}
.contact {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	bottom: 0;
	margin: 0;
	padding: 0 15% 0 15%;
	/*width: 70%;*/
}

.contact p{
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;
}
.contact a:hover{
	background-color: yellow;
	border-bottom: 0pt;
}
.contact a {
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;
	text-align:center;
	display: inline;
	width: 7%;}

#upper:before {
  	content: '';
  	display: inline-block;
  	height: 100%; 
  	vertical-align: middle;
  	margin-right: -0.25em;
}


/** Bottom Left: Project Index + Menu Toggle Content **/
#lower {
	height: 100%;
	width: 100%;
	bottom: 0px;
	position: fixed;
	z-index: 1000000;
	background-color: rgba(255,255,255,0.95);
	left: 0;
	margin: 0;
	padding: 0;
	display: none;
}

.panel {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	bottom: 0;
	margin: 0;
	padding: 0 15% 0 15%;
	/*width: 70%;*/
}

#lower:before {
  	content: '';
  	display: inline-block;
  	height: 100%; 
 	vertical-align: middle;
 	margin-right: -0.25em;
}

#bar {
	position: fixed;
	bottom: 0px;
	padding: 10px 10px 10px 10px;
	width: 150px;
	background-color: #;
	z-index: 10000000;}	  

#lower .panel a:hover {
	background-color: yellow;
	border-bottom: 0pt;}

#lower .panel a {
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;
	text-align:center;
	display: inline;
	width: 7%;}

#lower .panel p {
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;}

/** Bottom Right: Randomize Button **/
#icons {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	bottom: 10px;
	width: 200px;
	float:left;
	text-align: right;}

#icons a:hover + .randomize {
	display: block;}

.randomize {
	display: none;
	float:left;
	position: absolute;
	text-align: right;
	bottom: 0px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;}

}
/* Tablet Layout: 480px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (orientation:landscape) and (min-width: 480px) and (max-width: 768px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
	margin-left: 0;
}


.name {
		position: fixed;
	width: ;
	height: 30px;
	color: #000;
	padding: 10px 10px 10px 10px;
	float: left;
	z-index: 90000000000;
	font-size: 12pt;
}
/** Top Right: Contact Button + Toggle (#upper) **/
.contactbutton {
	display: none;
	float: left;
	position: absolute;
	text-align: right;
	top: 1px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;
}

#topright {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	top: 8px;
	width: 200px;
	float:left;
	text-align: right;
	}
	
#topright a:hover + .contactbutton {
	display:block;
}

#upper {
	height: 100%;
	width: 100%;
	top: 0px;
	position: fixed;
	z-index: 1000000;
	background-color: rgba(255,255,255,0.95);
	left: 0;
	margin: 0;
	padding: 0;
	display: none;
}
.contact {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	bottom: 0;
	margin: 0;
	padding: 0 15% 0 15%;
	/*width: 70%;*/
}

.contact p{
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;
}
.contact a:hover{
	background-color: yellow;
	border-bottom: 0pt;
}
.contact a {
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;
	text-align:center;
	display: inline;
	width: 7%;}

#upper:before {
  	content: '';
  	display: inline-block;
  	height: 100%; 
  	vertical-align: middle;
  	margin-right: -0.25em;
}


/** Bottom Left: Project Index + Menu Toggle Content **/
#lower {
	height: 100%;
	width: 100%;
	bottom: 0px;
	position: fixed;
	z-index: 1000000;
	background-color: rgba(255,255,255,0.95);
	left: 0;
	margin: 0;
	padding: 0;
	display: none;
}

.panel {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	bottom: 0;
	margin: 0;
	padding: 0 15% 0 15%;
	/*width: 70%;*/
}

#lower:before {
  	content: '';
  	display: inline-block;
  	height: 100%; 
 	vertical-align: middle;
 	margin-right: -0.25em;
}

#bar {
	position: fixed;
	bottom: 0px;
	padding: 10px 10px 10px 10px;
	width: 150px;
	background-color: #;
	z-index: 10000000;}	  

#lower .panel a:hover {
	background-color: yellow;
	border-bottom: 0pt;}

#lower .panel a {
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;
	text-align:center;
	display: inline;
	width: 7%;}

#lower .panel p {
	color: #000000;
	font-family: sans-serif;
	font-size: 12pt;
	font-weight: 600;
	line-height: 20pt;}

/** Bottom Right: Randomize Button **/
#icons {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	bottom: 10px;
	width: 200px;
	float:left;
	text-align: right;}

#icons a:hover + .randomize {
	display: block;}

.randomize {
	display: none;
	float:left;
	position: absolute;
	text-align: right;
	bottom: 0px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 480px) and (max-width: 768px) and (orientation:portrait) {
.gridContainer {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
}


.name {
		position: fixed;
	width: ;
	height: 50px;
	color: #000;
	padding: 10px 10px 10px 10px;
	float: left;
	z-index: 90000000000;
	font-size: 12pt;
}
/** Top Right: Contact Button + Toggle (#upper) **/
.contactbutton {
	display: none;
	float: left;
	position: absolute;
	text-align: right;
	top: 1px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;
}

#topright {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	top: 8px;
	width: 200px;
	float:left;
	text-align: right;
	}
	
#topright a:hover + .contactbutton {
	display:block;
}

#upper {
height: 100%;
width: 100%;
top: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.contact {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
padding: 0 15% 0 15%;
/*width: 70%;*/
}

.contact p {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 700;
line-height: 35pt;;
margin: 0 0% 0 0%;
}

.contact a:hover{
background-color: yellow;
border-bottom: 0pt;
}

.contact a {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 700;
line-height: 35pt;
text-align:center;
display: inline;
width: 0%;
}

#upper:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}


/** Bottom Left: Project Index + Menu Toggle Content **/
#lower {
height: 100%;
width: 100%;
bottom: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.panel {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
margin: 0;
padding: 0 15% 0 15%;
/*width: 70%;*/
}

#lower:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}

#bar {
position: fixed;
bottom: 0px;
padding: 10px 10px 10px 10px;
width: 150px;
background-color: #;
z-index: 10000000;
}  

#lower .panel a:hover {
background-color: yellow;
border-bottom: 0pt;
}

#lower .panel a {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 600;
line-height: 35pt;
text-align:center;
display: inline;
width: 7%;
}

#lower .panel p {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 400;
line-height: 35pt;
}

/* BOTTOM RIGHT */
#icons {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	bottom: 10px;
	width: 200px;
	float:left;
	text-align: right;
}

#icons a:hover + .randomize {
display: block;
}

.randomize {
	display: none;
	float:left;
	position: absolute;
	text-align: right;
	bottom: 0px;
	right: 20px;
font-family: sans-serif;
	font-weight: 600;	
	color: #000;
}


.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;}
}

@media screen and (min-width:769px) and (max-width: 1279px) {
	.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
	margin-left: 0;
}
.name {
		position: fixed;
	width: 150px;
	height: 50px;
	color: #000;
	padding: 10px 10px 10px 10px;
	float: left;
	z-index: 90000000000;
	font-size: 12pt;
}
/** Top Right: Contact Button + Toggle (#upper) **/
.contactbutton {
	display: none;
	float: left;
	position: absolute;
	text-align: right;
	top: 1px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;
}

#topright {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	top: 8px;
	width: 200px;
	float:left;
	text-align: right;
	}
	
#topright a:hover + .contactbutton {
	display:block;
}

#upper {
height: 100%;
width: 100%;
top: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.contact {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
padding: 0 20% 0 20%;
/*width: 60%;*/
}

.contact p {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 700;
line-height: 35pt;;
margin: 0 0% 0 0%;
}

.contact a:hover{
background-color: yellow;
border-bottom: 0pt;
}

.contact a {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 700;
line-height: 35pt;
text-align:center;
display: inline;
width: 0%;
}

#upper:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}


/** Bottom Left: Project Index + Menu Toggle Content **/
#lower {
height: 100%;
width: 100%;
bottom: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.panel {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
margin: 0;
padding: 0 20% 0 20%;
}

#lower:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}

#bar {
position: fixed;
bottom: 0px;
padding: 10px 10px 10px 10px;
width: 150px;
background-color: #;
z-index: 10000000;
}  

#lower .panel a:hover {
background-color: yellow;
border-bottom: 0pt;
}

#lower .panel a {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 600;
line-height: 35pt;
text-align:center;
display: inline;
width: 7%;
}

#lower .panel p {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 400;
line-height: 35pt;
}

/* BOTTOM RIGHT */
#icons {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	bottom: 10px;
	width: 200px;
	float:left;
	text-align: right;
}

#icons a:hover + .randomize {
display: block;
}

.randomize {
	display: none;
	float:left;
	position: absolute;
	text-align: right;
	bottom: 0px;
	right: 20px;
font-family: sans-serif;
	font-weight: 600;	
	color: #000;
}
}

/* Desktop Layout: 1024 to a max of 1232px.  Extreme*/
@media screen and (min-width:1024px) and (max-width: 1279px) and (orientation:landscape) {
	.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
	margin-left: 0;
}
.name {
		position: fixed;
	width: 150px ;
	height: 50px;
	color: #000;
	padding: 10px 10px 10px 10px;
	float: left;
	z-index: 90000000000;
	font-size: 12pt;
}
/** Top Right: Contact Button + Toggle (#upper) **/
.contactbutton {
	display: none;
	float: left;
	position: absolute;
	text-align: right;
	top: 1px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;
}

#topright {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	top: 8px;
	width: 200px;
	float:left;
	text-align: right;
	}
	
#topright a:hover + .contactbutton {
	display:block;
}

#upper {
height: 100%;
width: 100%;
top: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.contact {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
padding: 0 20% 0 20%;
/*width: 60%;*/
}

.contact p {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 700;
line-height: 35pt;;
margin: 0 0% 0 0%;
}

.contact a:hover{
background-color: yellow;
border-bottom: 0pt;
}

.contact a {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 700;
line-height: 35pt;
text-align:center;
display: inline;
width: 0%;
}

#upper:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}


/** Bottom Left: Project Index + Menu Toggle Content **/
#lower {
height: 100%;
width: 100%;
bottom: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.panel {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
margin: 0;
padding: 0 20% 0 20%;
}

#lower:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}

#bar {
position: fixed;
bottom: 0px;
padding: 10px 10px 10px 10px;
width: 150px;
background-color: #;
z-index: 10000000;
}  

#lower .panel a:hover {
background-color: yellow;
border-bottom: 0pt;
}

#lower .panel a {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 600;
line-height: 35pt;
text-align:center;
display: inline;
width: 7%;
}

#lower .panel p {
color: #000000;
font-family: sans-serif;
font-size: 20pt;
font-weight: 400;
line-height: 35pt;
}

/* BOTTOM RIGHT */
#icons {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	bottom: 10px;
	width: 200px;
	float:left;
	text-align: right;
}

#icons a:hover + .randomize {
display: block;
}

.randomize {
	display: none;
	float:left;
	position: absolute;
	text-align: right;
	bottom: 0px;
	right: 20px;
font-family: sans-serif;
	font-weight: 600;	
	color: #000;
}


.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;}
}

/* Desktop Layout: 1024 to a max of 1232px.  Extreme*/
@media screen and (min-width:1280px) and (orientation:landscape) {

.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	clear: none;
	float: none;
	margin-left: 0;
}

.name {
	position: fixed;
	width:150px;
	height: 50px;
	color: #000;
	padding: 10px 10px 10px 10px;
	float: left;
	z-index: 90000000000;
	font-size: 12pt;
}

/** Top Right: Contact Button + Toggle (#upper) **/
.contactbutton {
	display: none;
	float: left;
	position: absolute;
	text-align: right;
	top: 2px;
	right: 20px;
	font-family: sans-serif;
	font-weight: 600;
}

#topright {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	top: 8px;
	width: 200px;
	float:left;
	text-align: right;
}
	
#upper {
height: 100%;
width: 100%;
top: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.contact {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
padding: 0 20% 0 20%;
/*width: 60%;*/
}

.contact p {
color: #000000;
font-family: sans-serif;
font-size: 30pt;
font-weight: 700;
line-height: 45pt;;
margin: 0 0% 0 0%;
}

.contact a:hover{
background-color: yellow;
border-bottom: 0pt;
}

.contact a {
color: #000000;
font-family: sans-serif;
font-size: 30pt;
font-weight: 700;
line-height: 45pt;
text-align:center;
display: inline;
width: 0%;
}

#upper:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}


/** Bottom Left: Project Index + Menu Toggle Content **/
#lower {
height: 100%;
width: 100%;
bottom: 0px;
position: fixed;
z-index: 1000000;
background-color: rgba(255,255,255,0.95);
left: 0;
margin: 0;
padding: 0;
display: none;
}

.panel {
vertical-align: middle;
display: inline-block;
position: relative;
bottom: 0;
margin: 0;
padding: 0 20% 0 20%;
/*width: 60%;*/
}

#lower:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
}

#bar {
position: fixed;
bottom: 0px;
padding: 10px 10px 10px 10px;
width: 150px;
background-color: #;
z-index: 10000000;
}  

#lower .panel a:hover {
background-color: yellow;
border-bottom: 0pt;
}

#lower .panel a {
color: #000000;
font-family: sans-serif;
font-size: 30pt;
font-weight: 600;
line-height: 45pt;
text-align:center;
display: inline;
width: 7%;
}

#lower .panel p {
color: #000000;
font-family: sans-serif;
font-size: 30pt;
font-weight: 400;
line-height: 45pt;
}

/* BOTTOM RIGHT */
#icons {
	position: fixed;
	right: 10px;
	z-index: 3000000;
	bottom: 10px;
	width: 200px;
	float:left;
	text-align: right;
}

#icons a:hover + .randomize {
display: block;
}

.randomize {
	display: none;
	float:left;
	position: absolute;
	text-align: right;
	bottom: 0px;
	right: 20px;
font-family: sans-serif;
	font-weight: 600;	
	color: #000;
}


}