/******* Screen size note: *********** 
This is a dynamic css.
**************************************/
/*-----------------------------------------------------------------*/
/* Global Styles
/*-----------------------------------------------------------------*/
@font-face {
    font-family: 'Cordia New';
    src: url('font/cordia_0.eot');
    src: url('font/cordia_0.eot?#iefix') format('embedded-opentype'),
         url('font/cordia_0.woff') format('woff'),
         url('font/cordia_0.ttf') format('truetype'),
         url('font/cordia_0.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

/** { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*/
p { color: white; font-family: 'Cordia New'; word-spacing: 3px; letter-spacing: 2.2px; font-size: 21px; }
html, body { margin:0; padding:0; height:100%; background: black;}

a:link { color: white; text-decoration:none; }      /* unvisited link */
a:visited { color: white; text-decoration:none; }  /* visited link */
a:hover { color: gray; text-decoration:none; }  /* mouse over link */
a:active { color: white; text-decoration:none; }  /* selected link */
 
#wrapper { position: relative; top: 50%; left: 50%; height: 0; width: 75%; padding-bottom: 45.8%; margin: -23% 0 0 -37.1%; }
#content { position: absolute; width: 100%; top: 16%; height: 0; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; }
#content::-webkit-scrollbar { display: none;}
#main_logo{ position: absolute; top: 29.5%; left: 28.5%; height: 0; width: 42%; padding-bottom: 20%; background:url('../images/logo_hires.png') center no-repeat; background-size: 100% auto; } 

/*-----------------------------------------------------------------*/
/* Header
/*-----------------------------------------------------------------*/
#header {position: absolute; top: 0; width: 100%; left: 0; right:0; margin-left: auto; margin-right: auto; height: 20%; }
#header_logo{ position: relative; left: 28.8%; height: 0; width: 42%; padding-bottom: 20%; background:url('../images/logo_hires.png') center 1% no-repeat; background-size: 65% auto; }

/*-----------------------------------------------------------------*/
/* Navigation
/*-----------------------------------------------------------------*/
#navigation_container {position: absolute; width: 100%; bottom: 2%; height: 7%; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.nav_col_1 { position: absolute; left: 10.2%; }
.nav_col_2 { position: absolute; left: 30.2%; }
.nav_col_3 { position: absolute; left: 58.2%; }
.nav_col_4 { position: absolute; left: 85%; }

/*-----------------------------------------------------------------*/
/* Firm
/*-----------------------------------------------------------------*/
#firm_content { position: absolute; width: 110%; color: white; font-family: 'Cordia New'; margin: 0 0 2% 0; float: left; }
#firm_content p { word-spacing: normal; letter-spacing: normal; font-size: 8px; line-height: 1.2vw; text-align: justify; }
#firm_content h1 { word-spacing: normal; letter-spacing: normal; font-size: 18px; margin: 0 0 -10px 0; text-align: center}
#firm_content h2 { word-spacing: normal; letter-spacing: normal; font-size: 18px; line-height: 1.2vw; }
.col1 { position: relative; width: 25%; height: 80%; margin: 6.1% 0 0 -1.3%; margin-right: 7%; float: left; }
.col2 { position: relative; width: 32.2%; height: 80%; margin: 6% 0 0 -1.3%; margin-right: 7%; float: left; }
.col3 { position: relative; width: 25%; height: 80%; margin: 6% 0 0 -1.3%; margin-right: 7%; float: left; }
/*.center { position: relative; width: 32%; height: 80%; margin: -51.7% 0 0 35%; background: green }*/
/*.right {  position: relative; width: 27%; height: 80%; margin: 6% 0 0 -2%; background: green }*/

/*-----------------------------------------------------------------*/
/* Selected Works
/*-----------------------------------------------------------------*/
#works_scroll_up { position: absolute; bottom: 81.5%; left: 47.1%; height: 0; width: 5%; padding-bottom: 5%; background:url('../images/icons/scroll_up_arrow.png') center no-repeat; background-size: 70% auto; }
#works_scroll_down { position: absolute; top: 82.2%; left: 47.1%; height: 0; width: 5%; padding-bottom: 5%; background:url('../images/icons/scroll_down_arrow.png') center no-repeat; background-size: 70% auto; }
#works_scroll_up:hover { background:url('../images/icons/scroll_up_arrow_hover.png') center no-repeat; background-size: 70% auto; }
#works_scroll_down:hover { background:url('../images/icons/scroll_down_arrow_hover.png') center no-repeat; background-size: 70% auto; }

.box { position: relative; float:left; width: 15.75%; height: 0; padding-bottom: 15.75%; margin: 0 5% 7.9% 4.2%; cursor: pointer; }
.box p { position: relative; margin-top: 8px; left: -5%; width: 110%; text-align: center; font-family: 'Cordia New'; word-spacing: normal; letter-spacing: normal; margin-bottom: 0; color: gray; }
.box a:link, .box a:visited, .box a:active { color: gray; text-decoration:none; }
.box:hover p { color: white; text-decoration:none; }
.box img { width: 100%; height: auto; width: auto\9; /* ie8 */ }

.box_last { position: relative; float:left; width: 15.75%; height: 0; margin: 0 5% 7.9% 4.2%; cursor: pointer; }
.box_last p { position: relative; margin-top: 8px; left: -5%; width: 110%; text-align: center; font-family: 'Cordia New'; word-spacing: normal; letter-spacing: normal; margin-bottom: 0; color: gray; }
.box_last a:link, .box a:visited, .box a:active { color: gray; text-decoration:none; }
.box_last:hover p { color: white; text-decoration:none; }
.box_last img { width: 100%; height: auto; width: auto\9; /* ie8 */ }

/*-----------------------------------------------------------------*/
/* Individual Projects
/*-----------------------------------------------------------------*/
#project_scroll_up { position: absolute; bottom: 82.5%; left: 84.5%; height: 0; width: 5%; padding-bottom: 5%; background:url('../images/icons/scroll_up_arrow.png') center no-repeat; background-size: 70% auto; }
#project_scroll_down { position: absolute; top: 84.2%; left: 84.5%; height: 0; width: 5%; padding-bottom: 5%; background:url('../images/icons/scroll_down_arrow.png') center no-repeat; background-size: 70% auto; }
#project_scroll_up:hover {background:url('../images/icons/scroll_up_arrow_hover.png') center no-repeat; background-size: 70% auto; }
#project_scroll_down:hover {background:url('../images/icons/scroll_down_arrow_hover.png') center no-repeat; background-size: 70% auto; }

#project_logo { position: absolute; width: 15.75%; height: 31%; margin: 0 0 0 4.2%; border-top: 1px white solid; }
#project_logo img { width: 100%; height: auto; margin-top: -4%; }

#project_data { position: absolute; width: 15.75%; height: 31%; margin: 13.2% 0 0 4.2%; line-height: 1.2vw; }
#project_data p { color: white; font-family: 'Cordia New'; word-spacing: .2px; letter-spacing: .1px; font-size: 16px; margin: 0 auto; text-align: center;}

#project_map { position: absolute; width: 15.75%; height: 31%; margin: 27% 0 0 4.2%; }
#project_map img { width: 100%; height: auto; }

#project_preview_window { position: absolute; width: 50%; height: 97%; margin: 0 0 0 24.5%; }
.auto_width img { position: absolute; height:100%; width:auto; left: 0; right: 0; margin-left: auto; margin-right: auto;}
.auto_height img  {position: absolute; height:auto; width:86%; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; margin-left: 6.5%}

#project_gallery { position: absolute; width: 15.75%; height: 97%; margin: 0 0 0 79%; border: 0 auto; overflow-x: hidden; overflow-y: scroll; }
#project_gallery::-webkit-scrollbar { display: none;}

.project_thumb { position: relative; float:left; width: 100%; margin: 0 0 10% 0; cursor: pointer; }
.project_thumb last { position: relative; float:left; cursor: pointer; }
.project_thumb img { width: 100%; height: auto; }
.project_thumb last img { display: block; max-width: 100%; height: auto; }

/*-----------------------------------------------------------------*/
/* Contact
/*-----------------------------------------------------------------*/
#contact_info { position: absolute; width: 79.6%; bottom: 5%; margin-left: 10%; text-align: justify; color: white; font-family: 'Cordia New'; }
#contact_info span { background-color:red; width:100%; display:inline-block; }
#contact_info p { color: white; font-family: 'Cordia New'; margin-bottom: 0; letter-spacing: 1px;}

/*-----------------------------------------------------------------*/
/* Utility
/*-----------------------------------------------------------------*/
.last {
    margin-bottom: 0 !important;
}