@font-face {font-family: 'CenturyStd-BookItalic';src: url('font/2FD263_0_0.eot');src: url('font/2FD263_0_0.eot?#iefix') format('embedded-opentype'),url('font/2FD263_0_0.woff2') format('woff2'),url('font/2FD263_0_0.woff') format('woff'),url('font/2FD263_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'CenturyStd-Book';src: url('font/2FD263_1_0.eot');src: url('font/2FD263_1_0.eot?#iefix') format('embedded-opentype'),url('font/2FD263_1_0.woff2') format('woff2'),url('font/2FD263_1_0.woff') format('woff'),url('font/2FD263_1_0.ttf') format('truetype');}
 
html { } 

body {color:white; background:black; margin:0;;padding:0;font-family: 'CenturyStd-Book';font-size:18pt;line-height:27pt;letter-spacing:.5pt}

nav {position:fixed;top:24px;left:20px;z-index:5}

nav .logo {width:120px;height:120px;background-color:white;color:black;text-align:center;display: table-cell;
    vertical-align: middle;cursor:pointer;overflow:hidden;line-height:normal}

nav .logo h3 {font-weight:normal}
	
.subnav	{position:fixed;top:24px;left:20px;z-index:4;background-color:white;overflow:hidden;}
.subnav .subnav-close {position:absolute;top:38px;right:47px;color:black;display:none;cursor:pointer}
.subnav .subnav-close:hover {color:#00FF00}
.subnav .links {position:absolute;left:40px;top:150px;display:none}
.subnav .links a {display:block;color:black;text-decoration:none}
.subnav .links a:hover {color:#00FF00}
	
nav .logo div {display:inline-block}	
nav .logo .center {position:relative;}
nav .logo .center span {position:absolute;top:2px;left:0px;width:100%;height:100%;text-align:center}
nav	.logo:hover span {color:#00FF00}

em {font-family: 'CenturyStd-BookItalic';}

.logo-title {text-align:right;margin-right:48px;margin-top:38px;}

.content {max-width:1200px;margin-left:auto;margin-right:auto;margin-top:120px}

.content h1 {text-align:center;margin: 1.12em 0;font-weight:normal}

h3.archives {font-weight:normal;text-align:center;line-height:0px;padding-top:76px;padding-bottom:40px}
.project-list {margin:0;padding:0;border:0px solid white;width:100%}
.project-list tr td {border:20px solid white;line-height:72px;width:100%}

.project-list tr td a {display:block;width:1200px;margin-left:auto;margin-right:auto;cursor:pointer;font-family: 'CenturyStd-BookItalic';}
.project-list tr td a:hover{color:#00FF00}

.curtain {background-color:black;position:absolute;z-index:10000;width:100%;height:100%;top:0%;left: 0%;}

.padding-img {clear:both;overflow:hidden;}

.left-image {width:48%;float:left;}
.right-image {width:48%;float:right;}
.left-image img,
.right-image img {width:100%;height:auto;float:left}

.left-image .text,
.right-image .text {font-size:15pt;line-height:22pt;letter-spacing:.5pt}
.left-image .text p,
.right-image .text p {margin:0;padding-top: 20px;padding-bottom: 10px}

.full-image {width:100%}
.full-image img {width:100%;height:auto}

.caption {width:100%}
.caption img {width:100%;height:auto;}
.caption .text {font-size:15pt;line-height:22pt:none;letter-spacing:.5pt}
.caption .text p {margin:0;padding-top: 20px;padding-bottom: 10px}

.content a {border-bottom:1px solid #00FF00;color:white;text-decoration:none}
.content a:hover {border-bottom:0px;color:#00FF00}

.play-button {position:fixed;top:24px;right:20px;width:120px;height:120px;z-index:3;overflow:hidden;cursor:pointer}
.play-button .label {position:absolute;top:0px;left:19px;width:100%;height:100%;color:black;line-height:120px;z-index:5}
.play-button .label:hover,
.play-button .label span {color:#00FF00}
.play-button .icon {position:absolute;top:0px;right:0px;width:inherit;height:inherit}

.video-button {position:fixed;top:24px;right:20px;width:169px;height:120px;z-index:3;overflow:hidden;cursor:pointer}
.video-button .icon {position:absolute;top:0px;right:0px;width:inherit;height:inherit}
.video-button .label {position:absolute;top:0px;left:29px;width:100%;height:100%;color:black;line-height:120px;color:white;z-index:5}
.video-button .label:hover {color:#00FF00}

.control {position:fixed;top:38px;width:100%;height:100%;left:0px;color:black;z-index:6;display:none}
.control .col {width:20%;text-align:center;float:left;}
.control .col:nth-child(3),
.control .col:nth-child(2) {width:30%}
.control #close-btn {float:right;text-align:right;}
.control #close-btn span {padding-right:47px}

.control #pause-btn:hover,
.control #replay-btn:hover,
.control #close-btn:hover {color:#00FF00}

.control .playlist {position:absolute;width:100%;z-index:5;text-align:center}
.control .playlist a {display:block;color:black;cursor:pointer}
.control .playlist a:hover,
.control .playlist a.active {color:#00FF00}
.control .progress {position:absolute;bottom:0px;left:0px;width:100%;height:124px;}
.control .progress .padding {position:relative;margin-left:20px;margin-right:20px;height:100%}
.control .progress .padding .white-bar {position:absolute;top:0px;left:0px;color:black;width:100%;height:100%}
.control .progress .padding .white-bar .cur-time {line-height:105px;position:absolute;top:0px;left:20px;}
.control .progress .padding .white-bar .remaining {line-height:105px;position:absolute;top:0px;right:20px;}

.control .progress .padding .black-bar {position:absolute;top:0px;left:0px;color:white;background-color:black;width:0%;height:100%;z-index:5;overflow:hidden}
.control .progress .padding .black-bar .cur-time {line-height:105px;position:absolute;top:0px;left:20px;}
.control .progress .padding .black-bar .remaining {line-height:105px;position:absolute;top:0px;left:20px;text-align:right}

.video-container {position:fixed;z-index:6;width:100%;display:none}


#pause-btn, #replay-btn, #close-btn {cursor:pointer}


@media only screen and (max-width: 1200px) {
	.project-list tr td a {width:100%;margin-left:20px;margin-right:20px}
	.content {width:auto;margin-left:20px;margin-right:20px}

}

@media only screen and (max-width: 768px) {
	body {font-size:15pt;line-height:22pt}
}

@media only screen and (max-width: 414px) {
	.play-button,
	nav .logo {width:50px;height:50px;font-size:15pt;}

	.content {margin-top:50px}	
	#detail-page {margin-top:120px}

	
	.logo-title {text-align:right;margin-top:35px;}

	.right-image,
	.left-image {width:100%;float:left;clear:both}
	.left-image {padding-bottom:20px}
	
	.project-list tr td {line-height:normal;padding:20px}
	.video-button {width:63px;height:45px}
	
	.play-button .label,
	.video-button .label,
	nav .logo h3 {display:none}
	.subnav .links {left:23px;top:90px;}
		

	.control .col {width:20%}
	.control .col:nth-child(3),
	.control .col:nth-child(2) {width:28%}	
	
	
	.control .progress,
	.control .col {font-size:15pt}
}