/* 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: 16px;
	font-weight:lighter;
	line-height:1.5em;
	color:#606060;
	margin:0 0 0 0;
	width:auto;

}

#main {
	width:957px;
	margin:auto;
	line-height:1.5em;
}

h5 {
	font-size:24px;
	font-weight:bold;
	letter-spacing: -0.5px;
	color:#606060;
	line-height:24px;
	margin:0 0 0 0;
}

h4 {
	font-size:24px;
	font-weight:normal;
	letter-spacing: -0.5px;
	color:#606060;
	line-height:24px;
	margin:0 0 0 0;
}

h3 {
	font-size:40px;
	font-weight:normal;
	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: -0.5px;
	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-size:30px;
	//font-weight:bold;
	letter-spacing: 0px;
	color:#606060;
	line-height:1.17em;
}

	

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

header.smaller {
    height:57px;
}
    
header.gone {
    height:0px;
}

#home-button {
	background-image: url(../images/logo_JustinLui-144x64_606060.svg);
	background-repeat: no-repeat;
	display: block;
	padding: 32px 0 0 0;
	margin: 23px 0 0 0;
	height: 0px;
	overflow: hidden;
	transition: margin 0.3s;
	//position: relative;
}

#home-button:link,
#home-button:visited {
	background-position: 0px 0px;
}

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

header.smaller #home-button {
	background-image: url(../images/logo_JustinLui-108x48_606060.svg);
	background-repeat: no-repeat;
	display: block;
	padding: 24px 0 0 0;
	margin: 4px 0 0 0;
	height: 0px;
	overflow: hidden;
} 

header.smaller #home-button:hover {
	background-position: 0 -24px;
}

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

/*#menu {
	margin: -15px 0 8px 321px;
	padding: 0 0 0 0px;
	font-family:"Helvetica", arial, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing: 0px;
} */

#menu {
	font-family: URWFranklinGothicW01-Me_927747;
	margin: -15px 52px 8px 470px;
	padding: 0 0 0 0px;
	text-align: right;
	font-size:20px;
	font-weight:bold;
	letter-spacing: 0px;
}

/*#menu li {
	display:inline;
	margin: 0 50px 0 0;
	}*/
	
#menu li {
	//font-family: URWFranklinGothicW01-Me_927747;
	display:inline;
	margin: 0 0 0 67px;
	text-align: right;
	}

#menu li a {
	//font-family: URWFranklinGothicW01-Me_927747;
	color:#606060;
	text-decoration: none;
}

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

header.smaller ul#menu {
	margin: -19px 52px 8px 321px;
}

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

/* HOMEPAGE STUFF --------------------------------------------*/
#HomepageSlideShow {
	position: absolute;
	//margin: 0 0 0 321px;
	//padding: 79px 0 0 0;
	//width: 957px;
	//width: 25%;
	//padding: 0 0 0 12.5%;
	top: 98px;
}

#HomepageDescriptionText {
	position: absolute;
	top: 110px;
	width: 957px;
	//height: 100px;
	//padding: 528px 0 0 16px;
	//padding: 528px 0 0 0;
	z-index: 50;}
	
	
/* PROJECT INDEX PAGE STUFF ----------------------------------*/
#project-menu {
	position: absolute;
	top: 273px;
	width: 965px;
	margin: 0 0 0 -4px;
	//padding: 273px 0 0 0;
}

.cell {
	float: left;
	position: relative;
	//width: 100%;
	//width: 17.1%;
	//width: 27.1%;
	//margin: 90px 10px 60px 0;
	padding: 0 0 20px 0;
	padding-bottom: 20.5%;
}

.cellInner {
	position: absolute;
	top: 0px;
	top: 10px;
	right: 4px;
	bottom: 10px;
	left: 4px;
	overflow: hidden;
}

.cellInner img {
	//width: device-width;
	width: 100%;
	padding: 0 0 4px 0;
}
/*
.cell {
	display:table-cell;
	width:315px;
	height:158px;
} */

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

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

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

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

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

@media only screen and (max-width : 1024px) 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: absolute;
	top: 1100px;
	width: 965px;
	margin: 0 0 100px -4px;
	//padding: 273px 0 0 0;
}

.cell-logo {
	float: left;
	position: relative;
	//width: 100%;
	//width: 17.1%;
	//width: 27.1%;
	//margin: 90px 10px 60px 0;
	padding: 0 0 20px 0;
	padding-bottom: 14%;
}

.cell-logoInner {
	position: absolute;
	top: 0px;
	top: 10px;
	right: 4px;
	bottom: 10px;
	left: 4px;
	overflow: hidden;
}

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

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

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

@media only screen and (max-width : 1024px) 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.3333%;
      //padding-bottom: 50%;
   }
}



/* PROJECT PAGE STUFF ----------------------------------*/
#content-description-title {
	position: absolute;
	top: 83px;
	width: 315px;
	padding: 0 0 0 0;
	text-align: left;	
}

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

#content-description-UX {
	position: relative;
	top: 190px;
	width: 305px;
	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: -140px;
	width: 315px;
	margin: 0 0 0 0;
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}

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

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

#content-description-1_column_4-3 {
	position: relative;
	top: -22px;
	width: 315px;
	margin: 0 0 0 0;
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}

.first-item {
	position: relative;
	margin: 0 0 0 321px;
	padding: 98px 0 0 0;
	width: 636px;
}

.second-item {
	position: absolute;
	top: 519px;
	margin: 0 0 0 321px;
	padding: 0 0 34px 0;
	width: 636px;
	z-index: 50;
}

.second-item-UX {
	position: relative;
	margin: -300px 0 0 321px;
	padding: 0 0 34px 0;
	width: 636px;
	z-index: 50;
}

.second-item_4-3 {
	position: absolute;
	top: 569px;
	margin: 0 0 0 321px;
	padding: 0 0 34px 0;
	width: 636px;
	z-index: 50;
}

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

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

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

#outside-site-icon-row {
	position: relative;
	width: 305px;
	padding: 0 0 12px 0;
	margin: -4px 0 0 0;
	text-align: left;
	text-decoration: none;
	color: #ffffff;	
}

img.outside-site-icon {
	position: relative;
	//right: 0px;
	//width: 36px;
	height: 24px;
	margin: -2px 18px 0 0;
	text-decoration: none;
}

#creative-commons {
	position: relative;
	bottom: 0px;
	font-size: 11px;
	line-height: 13px;
	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: 56.25%; /* 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: 74.244%; /* 4:3 */
	//padding-top: 25px;
	height: 0;
}
.videoWrapper_4-3 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.img_drop-shadow {
        filter: drop-shadow(0px 0px 7px 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: relative;
	top: 79px;
	width: 957px;
}

#NewsPhoto {
	//position: absolute;
	//top: 102px;
	margin: 0 0 0 0;
	width:315px;	
}

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

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

#News {
	position: relatve;
	//align: top;
	text-decoration: none;
	margin: 0 0 0 321px;
	color: #606060;
	height: 180px;
}

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

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


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

#AboutPhoto {
	//position: absolute;
	//top: 102px;
	margin: 0 0 0 0;
	width:315px;	
}

#About {
	position: absolute;
	//align: top;
	top: -18px;
	text-decoration: none;
	margin: 0 0 0 321px;
	color: #606060;
	//width:315px;
	//height: 180px;
}

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

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

#column1{
    position:relative;
    left:0;
    //top:300px;
    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: 616px;
	overflow: hidden;
	padding: 283px 0 0 0;
}

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


	
/* FOOTER STUFF ----------------------------------*/
footer {
	position: relative;
	margin: 0 0 0 0;
	bottom: 0;
	z-index: 99;
}

#footer-menu {
	margin: 9px 0 8px 470px;
	padding: 0 0 0 0px;
	text-align: right;
	//width: 100%;
	//width: auto;
	//width: calc(100% - 10px);
	font-family: URWFranklinGothicW01-Me_927747;
	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;
}