/* JUSTIN'S CSS
--------------------------------------------------*/

@font-face {
     font-family: URWFranklinGothicW01-Bo_927744;
     src: url("../fonts/927744/92fde49b-44fa-441b-9633-c66f9d78a9b4.woff") format("woff");
}

@font-face {
	 font-family: URWFranklinGothicW01-Me_927747;
     //font-family: URWFranklinGothicW01-De_927750;
     src: url("../fonts/927747/a533f589-966b-46d4-9bc2-654f1bcb669e.woff") format("woff");
     //src: url("../fonts/927750/361020a1-32d2-4c5a-a8ab-57c6181a4ae9.woff") format("woff");
     //font-weight: bold;
}

* {
   font-family: URWFranklinGothicW01-Bo_927744;
}


body {
	background-color:#FFFFFF;
	font-size: 20px;
	font-weight:lighter;
	line-height:1.5em;
	color:#606060;
	margin:0 10px 10px 10px;
	width:auto;
}

#main {
	line-height:auto;
	width:auto;
}

h5 {
	font-family: URWFranklinGothicW01-Bo_927744;
	font-size:15px;
	font-weight:bold;
	letter-spacing: -0.5px;
	color:#606060;
	line-height:1.5em;
	margin:0 0 0 0;
}

h4 {
	font-family: URWFranklinGothicW01-Bo_927744;
	font-size:15px;
	font-weight:normal;
	letter-spacing: -0.5px;
	color:#606060;
	line-height:1.5em;
	margin:0 0 0 0;
}

h3 {
	font-family: URWFranklinGothicW01-Bo_927744;
	font-size:30px;
	font-weight:bold;
	letter-spacing: 0px;
	color:#7777777;
	line-height:1.17em;
	margin:0 0 0 0;
}

h2 {
	font-family: URWFranklinGothicW01-Me_927747;
	font-size:24px;
	font-weight:lighter;
	letter-spacing: 0px;
	color:#606060;
	line-height:1.17em;
	margin:0 0 0 0;
}

h1 {
	font-family: URWFranklinGothicW01-Me_927747;
	font-size:40px;
	font-weight:lighter;
	letter-spacing: 0px;
	color:#606060;
	line-height:1.17em;
	margin:0 0 0 0;
	padding:3px 0 0 0;
}

h0 {
	font-family: URWFranklinGothicW01-Bo_927744;
	font-size:30px;
	//font-weight:bold;
	letter-spacing: 0px;
	color:#606060;
	line-height:1.17em;
}

	

/* HEADER STUFF ----------------------------------*/
header {
	background-color:#FFFFFF;
	position:fixed;
	height:97px;
	//width:auto;
	width:100%;
	margin:0 0 0 0;
	padding:0 10px 0 0;
	z-index:99;
	transition: height 0.3s;
}

header.smaller {
    height:60px;
}

#home-button {
	background-image: url(../images/logo_JustinLui-126x56_606060.svg);
	background-repeat: no-repeat;
	display: block;
	padding: 28px 0 0px 0;
	margin: 10px 0 16px 0;
	margin-right: 0px;
	height: 0px;
	//width: 144px;
	overflow: hidden;
	transition: margin 0.3s;
}

#home-button:link,
#home-button:visited {

	background-position: 0px 0px;
}

#home-button:hover {
	background-position: 0 -28px;
}

header.smaller #home-button {
	margin: -27px 0 16px 0;
} 

ul {
	//list-style: none;
	padding:0 0 0 0;
	margin:0 0 2px 0;
}

#menu {
	margin: -6px 0 3px 0;
	padding: 0 0 0 0px;
	//width: 100%;
	//width: auto;
	//width: calc(100% - 10px);
	font-size:20px;
	font-weight:bold;
	letter-spacing: 0px;
	color:#606060;
}

#menu li {
	display:inline;
	//margin: 0 9.75% 0 0;
	margin: 0 36px 0 0;
	//text-align: right;
	//padding: 0 0 20px 0;
}

#menu li a {
	color:#606060;
	text-decoration: none;
}

#menu li a:hover {
	color: #ff6c00;
}

.dividerBar {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../../images/lines-diagonal_orange7.svg) no-repeat;
  //width: 100%; /* Width of new image */
  width: calc(100% - 20px);
  height: 6px; /* Height of new image */
  padding-left: calc(100% - 20px); /* Equal to width of new image */
}

/* HOMEPAGE STUFF --------------------------------------------*/
#HomepageSlideShow {
	position:relative;
	top: 92px;
	//width: device-width;
	//width: calc(100% - 10px);
	width: calc(100%);
	padding: 0 0 0 0;
}

#HomepageDescriptionText {
	position:relative;
	top: 90px;
	//width: device-width;
	//width: calc(100% - 10px);
	width: calc(100%);
}

/* PROJECT INDEX PAGE STUFF ----------------------------------*/
#project-menu {
	//position: absolute;
	//top: 103px;
	//width: device-width;
	overflow: hidden;
	margin: 0 0 0 -3.5px;
	padding: 88px 0 0 0;
}

.cell {
	float: left;
	position: relative;
	//width: 100%;
	//width: 47.1%;
	//width: 27.1%;
	//height: 50%;
	//margin: 90px 10px 60px 0;
	//padding: 0 0 150px 0;
	padding-bottom: 42%;
}

.cellInner {
	position: absolute;
	//top: 0px;
	top: 5px;
	right: 3.5px;
	bottom: 10px;
	left: 3.5px;
	overflow: hidden;
	//above 'overflow: hidden' needs to be off in order for photo to scale properly??
}

.cellInner img {
	//width: device-width;
	width: 100%;
	padding: 0 0 4px 0;
}	

.cell a {
	color: #606060;
	text-decoration: none;
	left: 0px;
	line-height: 1.17em;
}

.cell a:hover {
	color: #ff6c00;
}

.cellLabel {
	//margin: -5px 0 0 6px;
	margin: -1px 0 0 0;
}

//Here are our media queries to "snap" the number of project tiles per row:

@media only screen and (min-width : 1024px) {
   /* desktop 4 tiles */
   .cell {
      width: 25%;
      padding-bottom: 25%;
   }
}

@media only screen and (max-width : 1023px) and (min-width : 667px) {
   /* Tablet view: 3 tiles */
   .cell {
      width: 33.3333%;
      //padding-bottom: 33.3333%;
   }
}

@media only screen and (max-width : 666px) {
   /* Smartphone view: 2 tile */
   .cell {
      width: 50%;
      //padding-bottom: 50%;
   }
}

#logo-menu {
	//position: relative;
	//width: 968px;
	//overflow: hidden;
	//top: 180px;
	//margin-left: auto;
	//margin-right: auto;
	//padding-bottom: 75px;
	overflow: hidden;
	margin: 0 0 40px -3.5px;
	padding: 0 0 0 0;
}

.cell-logo {
	float: left;
	position: relative;
	//width: 24.3%;
	//height: 24.3%;
	//padding: 0 6px 60px 0;
	padding-bottom: 9%;
}

cell-logoInner {
	position: absolute;
	top: 0px;
}

.cell-logoInner img {
	width: 100%;
	padding: 0 0 4px 0;
}	


//Here are our media queries to "snap" the number of logos per row:

@media only screen and (min-width : 1024px) {
   /* desktop 4 tiles */
   .cell-logo {
      width: 20%;
      padding-bottom: 20%;
   }
}

@media only screen and (max-width : 1023px) and (min-width : 667px) {
   /* Tablet view: 3 tiles */
   .cell-logo {
      width: 25%;
      //padding-bottom: 33.3333%;
   }
}

@media only screen and (max-width : 666px) {
   /* Smartphone view: 2 tile */
   .cell-logo {
      width: 33.333333%;
      //padding-bottom: 50%;
   }
}



/* PROJECT PAGE STUFF ----------------------------------*/
#content-description-title {
	position: relative;
	top: 10px;
	//width: 800px;
	//width: 957px;
	text-align: left;
}

#content-description-UX {
	position: relative;
	top: 32px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	//-webkit-column-count: 1; /* Chrome, Safari, Opera */
    //-moz-column-count: 1; /* Firefox */
    //column-count: 1;
}

#content-description a {
	color: #dea982;
	text-decoration: none;
}	

#content-description a:hover {
	color: #ff6c00;
	text-decoration: none;
}	

#content-description-1_column {
	position: relative;
	top: 42px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

#content-description-1_column_4-3 {
	position: relative;
	top: 42px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

#outside-site-icon-row {
	position: relative;
	//top: 900px:
 	left: 0px;
	text-decoration: none;
	color: #FFFFFF;
}

img.outside-site-icon {
	position: relative;
	//right: 0px;
	//width: 36px;
	height: 28px;
	margin: -3px 18px 0 0;
}

#creative-commons {
	position: relative;
	//bottom: -20px;
	font-size: 16.25px;
	line-height: 1.5em;
	text-align: left;
}

#creative-commons a {
	color: #ff6c00;
}

#creative-commons a:hover {
	color: #ffffff;
	background-color: #ff6c00;
}

/*Below '.videoWrapper' and '.videoWrapper iframe' taken from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
.videoWrapper {
	position: relative;
	padding-bottom: 52%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoWrapper_4-3 {
	position: relative;
	padding-bottom: 70.5%; /* 4:3 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper_4-3 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
.first-item {
	position: relative;
	padding: 92px 0 0 0;
	//margin: 0 0 0 0;
	width: device-width;
} */

.first-item {
	position: relative;
	margin: 0 0 0 0;
	padding: 97px 0 0 0;
	width: 92.5215%;
}

.second-item {
	position: relative;
	//top: 954px;
	//margin: 0 0 0 0;
	padding: 40px 0 0 0;
	width: device-width;
}

.second-item-UX {
	position: relative;
	//top: 954px;
	//margin: 0 0 0 0;
	padding: 40px 0 0 0;
	width: device-width;
}


.second-item_4-3 {
	position: relative;
	//top: 954px;
	//margin: 0 0 0 0;
	padding: 40px 0 0 0;
	width: device-width;
}

.headline {
	position: relative;
	text-align: left;
	padding: 20px 0 20px 0;
}

#content a {
	//color: #949494;
	color:#ff6c00;
	text-decoration: none;
}

#content a:hover {
	color: #ffffff;
	background-color: #ff6c00;
	text-decoration: none;
}

.img_drop-shadow {
        filter: drop-shadow(0px 0px 4px rgba(0,0,0,.08));
        }
        
span {
	border: 1px solid;
	border-color: #bababa;
	padding: 1px 3px 1px 3px;
	line-height:1.75em;
}

/* NEWS STUFF ------------------------------------*/
#content-news {
	position: absolute;
	top: 81px;
	//width: device-width;
	width: auto;
}

#NewsPhoto {
	//margin: 0 0 0 0;
	position: relative;
	width: calc(100% - 10px);
	float: left;
	//padding: 0 0 141px 0;
}

#NewsPhoto a {
	//border: 4px solid #ff6c00;//not working
}

#NewsPhoto a:hover {
	//border: 4px solid #ff6c00;//not working
}

#News {
	position: static;
	//align: top;
	width: calc(100% - 7px);
	text-decoration: none;
	padding: 212px 0 19px 0;
	color: #606060;
}

#News a{
	text-decoration: none;
	color: #ffffff;
}

#News a:hover {
	color: #ff6c00;
}

/* ABOUT STUFF ------------------------------------*/
#content-about {
	position: absolute;
	top: 99px;
	width: auto;
}

#AboutPhoto {
	position: relative;
	width: calc(100% - 10px);
	float: left;
	padding: 0 0 20px 0;
	//margin: 0 0 0 0;
	//padding: 6px 0 0 0;
}

#About {
	position: relative;
	//align: top;
	width: calc(100% - 7px);
	text-decoration: none;
	padding: 262px 0 0 0;
	color: #606060;
}

#About a{
	text-decoration: none;
	color: #ff6c00;
}

#About a:hover {
	color: #ff6c00;
}

#column1{
    position:relative;
    left:0;
    height:100%;
    width:315px;
}
#column2{
    position:relative;
    left:318px;
    top:-304px;
    height:100%;
    width:315px;
}


	
/* PASSWORD LOGIN PAGE STUFF ----------------------------------*/
.psw-container {
	// margin: auto;
	text-align: center;
	width: 316px;
	overflow: hidden;
	padding: 233px 0 0 0;
	margin-left:auto;
	margin-right:auto;
}

.psw-button psw-button-default {
	font-family:"Helvetica", arial, sans-serif;
	font-size:24px;
	font-weight:normal;
	letter-spacing: 0px;
	line-height:1.17em;
	margin:0 0 0 0;
	//same specs as H3 text
}



/* FOOTER STUFF ----------------------------------*/
#footer {
	position:absolute;
	margin:0 0 0 0;
}

#footer-menu {
	margin: 5px 0 3px 0;
	padding: 0 0 0 0px;
	//width: 100%;
	//width: auto;
	//width: calc(100% - 10px);
	font-size:20px;
	font-weight:bold;
	letter-spacing: 0px;
	color:#606060;
}

#footer-menu li a {
	color:#606060;
	text-decoration: none;
}

#footer-menu li a:hover {
	color: #ff6c00;
}

#footer-homepage {
	position:absolute;
	margin:-9px 0 0 0;
}