*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
  font-family: YuMincho;
  src: url(../fonts/YuMincho.otf);
}

body {
	font-family: YuMincho, serif;
	background-color: #111111;
	color: #f6f6f6;
	cursor: default;
	font-size: 12.5px;
}

::-webkit-scrollbar {
  width: 0px;
}
::selection {
  background: none;
  color: #666666
}
::-moz-selection {
  background: none;
  color: #666666
}

header {
	position: fixed;
	background-color: #111111;
	right: 0; 
    top: 0;
    width: 100%;
    padding: 18px 18px 0 18px;
}

nav{
	float: left;
	line-height: 1.3em;
	letter-spacing: .01em;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

li {
	float: left;
	padding-right: 4px;
}

li a {
	text-decoration: none;
	display: block;
	color: #f6f6f6;
}

li a:hover {
	color: #666666;
}

li.current {
	font-style: italic;
}

.current a{
	color: #666666;
}

.zero{
	padding: 35px 18px 0 18px;
}

.one{
	padding-top: 18px;
}

a,{
	color: #f6f6f6;
	text-decoration: none;
}

a:hover{
	color: #666666;
	text-decoration: none;
}

/* collapse from here */

.collapsible, .list {
  background-color: transparent;
  color: #f6f6f6;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: YuMincho, serif;
}

.list{
	position: fixed;
	height: 30px;
	z-index: -2;
}

.collapsible:hover {
	color: #666666;
}
.active:hover {
	color: #666666;
}

.collapsible:after {
  float: right;
}

.content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #111111;
}

.text {
	display: inline-block;
	width: calc(100% - 32px);
	margin-left: 47px;
	box-shadow: 0 0.3px 0 white;
	margin-bottom: 6px;
}

.text p{
	line-height: 1.25em;
	word-spacing: -.07em;
	letter-spacing: .01em;
	padding-bottom: 4px;
}

.text a{
	color: #666666;
	text-decoration: none;
}

.text a:hover{
	color: #f6f6f6;
	text-decoration: none;
}

p.left, p.right, p.credit-left, p.credit-right {
	display: inline-block;
}
p.left {
	width: calc(35% + 30px);
	vertical-align: top;
}
p.credit-left{
	width: calc(35% + 42px);
	padding-top: 4px;
}
p.right, p.credit-right{
	width: calc(35% + 30px);
	vertical-align: top;
}

.credit {
	display: inline-block;
	width: calc(100% - 32px);
	color: #666666;
	font-size: 11.5px;
}

.credit p{
	line-height: 1.2em;
	letter-spacing: .025em;
	padding-bottom: 4px;
}

.credit a,
p.credit-left a,
p.caption a{
	color: #f6f6f6;
	text-decoration: none;
}

.credit a:hover,
p.caption a:hover{
	color: #666666;
	text-decoration: none;
}

/* for goat editorial titles */

p.caption{
	width: 85%;
	font-size: 11px;
	line-height: 1.25em;
	word-spacing: -.07em;
	letter-spacing: .01em;
	padding-bottom: 5px;
	font-style: italic;
	text-align: right;
}

/* collapse ends here */


.row {
	content: "";
  	clear: both;
  	display: table;
}

.project {
	box-shadow: 0 -0.3px 0 white;
	width: 100%;
	padding-top: 4px;
	font-size: 12.5px;
	line-height: 1.25em;
	word-spacing: -.07em;
	letter-spacing: .01em;
}

.list .project {
	box-shadow: none;
	padding-top: 0;
}

.title, .list_title {
	width: calc(20% + 5px);
	font-style: italic;
	float: left;
	margin-left: 47px;
}

.list_title {
	margin-left: 0;
	width: calc(20% + 32px);
}

.year {
	width: 15%;
	float: left;
	padding-left: 18px;
}
.list .year{
	padding-left: 0px;
}
.number {
	width: 10%;
	float: left;
	padding-left: 6.84px;
}
.list .number{
	padding-left: 0px;
}

.category{
	/*width: 30%;*/
	display: inline-block;
	padding-left: 51px;
}

.category p{
	padding-bottom: 2px;
}

.list .category{
	padding-left: 0px;
}

.image, .vt {
	width: 100%;
	padding-left: 47px;
	padding-bottom: 0px;
	display: block;
}

.vt-33{
	width: calc(33.3% - 3px);
	display: inline-block;
	margin-right: -.3px;
	margin-bottom: -6px;
}

.image img, video {
	width: calc(84% - -10.5px);
	display: block;
	padding-bottom: 5px;
}

.vt img {
	width: calc(84% / 2 + 3px);
	display: inline-block;
}

.vt-33 img {
	width: 100%;
}

/* Videos start*/

.desktop  video{
	width: calc(84% - -10.5px);
	display: block;
	padding-bottom: 5px;
}
.tablet video{
	width: 45%;
	display: block;
	padding-bottom: 9px;
}
.mobile video, .mobile img{
	width: calc(84.15% / 3);
	display: inline-block;
    padding-bottom: 0;
}

.vt video {
	width: 40%;
	display: block;
	padding-bottom: 18px;
}

/* Videos end*/


.list_mobile, .label_mobile{
	display: none;
}



@media (max-width: 768px) {

	.image, .vt-33 {
		width: 100%;
		float: left;
	}

	.image img, video, .vt img, .vt-33 img {
		width: 100%;
	}

	.desktop video{
		width: 100%;
	}

	nav, .text p {
		font-size: 13.5px;
	}

	.credit p{
		width: 100%;
		font-size: 13.5px;
	}

	.project {
		font-size: 13.5px;
	}
}

@media (max-width: 640px) {

	header {
		padding: 9px 9px 0 9px;
	}
	.zero{
	padding: 26px 9px 0 9px;
	}
	.list_title {
		display: none;
	}
	.year {
		display: none;
	}
	.number {
		display: none;
	}
	.category{
		display: none;
	}
	.list_mobile, .label_mobile{
		display: block;
		padding-bottom: 8px;
		border-bottom: 0.5px solid #f6f6f6
	}
	.content{
		padding-top: 4px;
	}
	.list_mobile{
		border-bottom: none;
	}
	.text{
		box-shadow: none;
	}
	.title{
		display: none;
		margin-left: 0;
	}
	.project{
		padding-bottom: 0;
		width: 100%;
		background-color: #111111;
		box-shadow: none;
	}
	.text{
		margin-left: 0;
		width: 100%;
	}
	p.left, p.right, p.credit-left, p.credit-right, p.caption{
		width: 100%;
	}
	.image{
		width: 100%;
	}
	.image img, video, .vt img, .vt-33 img {
		width: 100%;
		padding-right: 0;
	}
	.image, .vt, .vt-33 {
	padding-left: 0px;
	}

	.desktop video{
		width: 100%;
		display: block;
		padding-bottom: 9px;
	}
	.tablet video{
		width: 100%;
		display: block;
		padding-bottom: 9px;
	}
	.mobile video{
		width: 100%;
	}
	.vt-33{
		padding-bottom: 5px;
	}
}