@font-face {
	font-family: 'ayuthaya';
	src: url('fonts/ayuthaya-webfont.eot');
	src: local('☺'), url('fonts/ayuthaya-webfont.woff') format('woff'), url('fonts/ayuthaya-webfont.ttf') format('truetype'), url('fonts/ayuthaya-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
body, img, a, p, span, div, strong, em, ul, ol, li, label, input, textarea, form, fieldset, table, tr, th, td, h1, h2, h3, h4, h5, h6, hr, iframe, embed, object {
	list-style-type: none;
	text-decoration: none;
	outline: none;
	border: 0;
	margin: 0;
	padding: 0;
}
textarea,
body {
	color: #000;
	font-family: Arial, Verdana, Sans-serif;
	font-size: 12px;
	line-height: 17px;
}
table, td, tr, th {
	border-spacing: 0;
	vertical-align: middle;
	border-collapse: collapse;
}
label {
	display: block;
}
html {
	overflow-y: scroll;
}
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-table;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;

}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.loadable {
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}
sup {
	valign: super;
	font-size: 70%;
	line-height: 80%;
}
a {
	color: #8c8c8c;
}
video {
	background: #000;
}


/* layout */
body {
	font-family: 'ayuthaya';
    background: #fff;
}
#logo {
	font-size: 22px;
	line-height: 50px;
	color: #8c8c8c;
	text-transform: uppercase;
	letter-spacing: 1px;
	
}
#container {
}
#header {
	height: 50px;
	position: relative;
	padding: 0 15px;
}
#btn_menu {
    display: none;
    float: right;
    margin-top: 21px;
    width: 34px;
    height: 34px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    pointer-events: auto;
}
.menu-line {
    width: 34px;
    height: 2px;
    background: #8c8c8c;
    transition: transform 0.3s ease;
}
#btn_menu.close .menu-line:nth-of-type(1) {
    transform: rotate(45deg) translate(8px, 8px);
    transition: transform 0.3s ease;
}
#btn_menu.close .menu-line:nth-of-type(2) {
    opacity: 0;
    transition: all 0.3s ease;
}
#btn_menu.close .menu-line:nth-of-type(3) {
    transform: rotate(-45deg) translate(8px, -8px);
    transition: transform 0.3s ease;
}
#menu {
	position: absolute;
	right: 15px;
	top: 0;
}
#menu li {
	font-size: 14px;
	line-height: 50px;
	color: #8c8c8c;
	display: inline-block;
	text-transform: uppercase;
	margin-left: 10px;
}
#menu li a:hover,
#menu li.filter.active a {
	color: #000;
}
#menu li.selected a {
	color: #000;
}
#menu li.cancel {
	display: none;
}
#content {
}
#html {
	padding: 0 15px;
	width: 50%;
	box-sizing: border-box;
}
#html h1 {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 50px;
	height: 50px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-weight: normal;
	color: #000;
}
#html div {
	display: block;
	width: 100%;
	padding: 20px 0;
	font-size: 0.93vw;
	line-height: 1.4em;
	color: #000;
}
#html div h2 {
	text-transform: uppercase;
	font-weight: normal;
	font-size: 15px;
}
#html div ul {
	margin: 20px 0;
	padding: 20px 0;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}
#html div ul li {
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}
#html div ul li a {
	display: block;
	width: 35px;
	height: 35px;
}
#html div ul li:first-child a {
	background: url("../img/vimeo.svg") no-repeat;
}
#html div ul li:nth-child(2) a {
	background: url("../img/tumblr.svg") no-repeat;
}
#html div ul li:last-child a {
	width: 85px;
	background: url("../img/cargo.jpg") no-repeat;
	background-size: cover;
}
#html .text {
	border-bottom: 1px solid #000;
}
#html .contact {
	border-bottom: 1px solid #000;
}
#html #contact_email {
	border-bottom: 1px solid #000;
}
#html .photo {
	padding-bottom: 0;
}
/* Works */
#works article {
	float: left;
	overflow: hidden;
	position: relative;
	width: 24.99%;
}
#works article.large {
	width: 49.99%;
}
#works article .thumbnail,
#work .medias article .thumbnail {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}
#works article .thumbnail .image_hover {
	display: none;
}
#works article .thumbnail:hover .image_1 {
	display: none;
}
#works article .thumbnail:hover .image_hover {
	display: block;
}
#works article .description,
#work header .description {
	position: absolute;
	background: #fff;
	top: 0; left: 0; right: 0; bottom: 0;
	padding: 0 15px;
	font-size: 0.93vw;
	line-height: 1.4em;
	display: none;
	color: #000;
}

#works article.large .description {
	top: 50%;
	left: 50%;
}

#works article:hover .description {
	display: block;
}
#works article .description h2,
#work header h1 {
	text-transform: uppercase;
	font-size: 20px;
	line-height: 2em;
	height: 50px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
	font-weight: normal;
	color: #000;
}
#works article .description a {
	color: #000;
}

/* Fancybox */
.fancybox-caption {
	border: none;
}

/* Work */
#work header {
	position: absolute;
	left: 0;
	top: 50px;
	width: 33.31%;
	box-sizing: border-box;
	padding: 0 15px;
}
#work header h1 {
	border-top: 1px solid #000;
	line-height: 50px;
	height: 50px;
	margin-bottom: 0;
}
#work .medias {
	margin-left: 33.31%;
}
#work .medias article {
	float: left;
	overflow: hidden;
	position: relative;
	width: 49.98%;
}
#work .medias article .description {
	display: none;
	position: absolute;
	bottom: 0;
	background-color: white;
	width: 100%;
	padding: 10px 0;
}
#work .medias article:hover .description {
	display: block;
}

#work .medias article.large {
	width: 100%;
}
#work header .description {
	position: static;
	display: block;
	padding: 20px 0;
	border-bottom: 1px solid #000;
}
#work header .details {
	position: static;
	display: block;
	padding: 20px 0;
	font-size: 0.93vw;
	line-height: 1.4em;
}