/* General */


*, 
*:before, 
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html,
body {
	margin: 0;
	border: none;
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: none;
}

html {
	font-size: 62.5%;
}

body,
p,
table,
input,
textarea {
	font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
	font-weight: 300;
	font-size: 11px;
	line-height: 14px;
	color: #000;
}

img {
	outline: none;
	border: none;
	display: block;
	color: #FFF;
}

.hidden {
	opacity: 0;
}

.hide-on-desktop {
	display: none !important;
}


/* Fonts */


@font-face {
  font-family: 'Made by Cohen';
  src: url('/fonts/made-by-cohen.eot?63585064');
  src: url('/fonts/made-by-cohen.eot?63585064#iefix') format('embedded-opentype'),
	   url('/fonts/made-by-cohen.woff?63585064') format('woff'),
	   url('/fonts/made-by-cohen.ttf?63585064') format('truetype'),
	   url('/fonts/made-by-cohen.svg?63585064#made-by-cohen') format('svg');
  font-weight: normal;
  font-style: normal;
}


/* Text */


a {
	color: #000;
	text-decoration: none;
	outline: none;
	border: none;
	cursor: pointer;
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	 -o-transition: all 250ms;
	-ms-transition: all 250ms;
	transition: all 250ms;
}

a:hover,
.selected,
strong {
	color: #D2232A;
}

p,
a,
h1,
h2,
h3 {
	margin-top: 0;
	margin-bottom: 20px;
	padding: 0;
}

h1,
h2,
h3 {
	font-weight: normal;
}

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

strong {
	font-weight: normal;
}


/* Content */


.outer {
	position: absolute;
	display: table;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 10px;
	overflow: hidden;
}

.inner {
	position: relative;
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

.content {
	position: relative;
	width: 100%;
	max-width: 920px;
	height: 642px;
	margin: 0 auto;
	z-index: 10;
}


/* Background */


.background, 
.slick {
	background-image: url(/content/made-by-cohen/made-by-cohen-background.png);
}

.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 615px;
	overflow: hidden;
	background-size: 22px 630px;
	background-repeat: repeat-x;
	z-index: 0;
}

.slick {
	background-size: 22px 630px;
	background-position: 1px 0px;
	background-repeat: repeat-x;
}

.logo {
	position: absolute;
	top: 3px;
	left: 7px;
	width: 138px;
	height: 116px;
	overflow: hidden;
	background-image: url(/content/made-by-cohen/made-by-cohen-logo.svg);
	background-size: 138px 116px;
	background-repeat: no-repeat;
	z-index: 0;
}

.no-svg .logo {
	background-image: url(/content/made-by-cohen/made-by-cohen-logo.png);
}

.dot {
	fill: #BCBEC0;
}

.grey {
	fill: #626366;
}

.red {
	fill: #D2232A;
}

.menu-dot {
	display: none;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 

	.background, 
	.slick {
		background-image: url(/content/made-by-cohen/made-by-cohen-background-retina.png);
	}

	.no-svg .logo {
		background-image: url(/content/made-by-cohen/made-by-cohen-logo-retina.png);
	}

}


/* Menu */


.menu {
	position: absolute;
	left: 9px;
	top: 150px;
	text-align: left;
	z-index: 10;
}

.menu ul li {
	position: relative;
	height: 20px;
	margin: 0 0 24px;
}

.menu ul li:after {
	position: absolute;
	top: 8px;
	left: 0;
	width: 3px;
	height: 3px;
	background-color: #D2232A;
	border-radius: 3px;
	content: '';
	opacity: 0;
}

.menu ul li a {
	display: inline-block;
	height: 20px;
	font-weight: 300;
	color: #D2232A;
}

.by-line {
	position: absolute;
	top: 615px;
	left: -1px;
	width: 921px;
	height: 50px;
	text-align: left;
	background-color: #FFF;
	z-index: 10;
}

.by-line, 
.by-line h1 {
	font-size: 11px;
	line-height: 30px;
	font-weight: 300;
	display: inline;
	color: #D2232A;
}

.by-line h1 {
	font-weight: 600;
}

.controls {
	position: absolute;
	right: 1px;
	bottom: 0;
	height: 20px;
	text-align: right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 25;
}

.controls .previous, 
.controls .next {
	position: relative;
	display: inline-block;
	cursor: pointer;
	width: 20px;
	height: 12px;
	margin-left: 3px;
	color: #626366;
	-webkit-transition: 250ms;
	-moz-transition: 250ms;
	 -o-transition: 250ms;
	-ms-transition: 250ms;
}

.controls .previous:hover, 
.controls .next:hover {
	color: #000;
}

.controls .previous:before, 
.controls .next:before {
	font-family: 'Made by Cohen';
	font-size: 10px;
}

.controls .previous:before {
	content: '\E801';
}

.controls .next:before {
	content: '\E800';
}

.description {
	position: absolute;
	width: 410px;
	top: 623px;
	right: 0;
	text-align: left;
	font-weight: 300;
	color: #626366;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 25;
}

.description span {
	-webkit-transition: opacity 250ms;
	-moz-transition: opacity 250ms;
	 -o-transition: opacity 250ms;
	-ms-transition: opacity 250ms;
	transition: opacity 250ms;
}

.description a {
	color: inherit;
}

.description em, 
.description em a {
	font-style: normal;
	color: inherit;	
}

.projects-dot, 
.about-dot, 
.awards-dot, 
.publications-dot, 
.contact-dot {
	position: absolute;
	top: 8px;
	left: 0;
	width: 3px;
	height: 3px;
	background-color: #D2232A;
	border-radius: 3px;
}

.awards-dot, 
.mobile .about-dot {
	top: 52px;	
}

.publications-dot, 
.mobile .awards-dot {
	top: 96px;	
}

.contact-dot, 
.mobile .publications-dot {
	top: 140px;	
}

.mobile .contact-dot {
	top: 188px;	
}


/* Info */


.info {
	position: absolute;
	top: 0;
	left: 245px;
	width: 258px;
	height: 598px;
	padding: 7px 45px 7px 14px;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: 250ms;
	-moz-transition: 250ms;
	 -o-transition: 250ms;
	-ms-transition: 250ms;
	transition: 250ms;
	overflow: hidden;
	z-index: 10;
}

.info.active {
	opacity: 1.0;
	pointer-events: auto;
}

.info .content {
	width: 100%;
	height: auto;
}

.info h1, 
.info h2 {
	font-size: 11px;
	line-height: 15px;
	font-weight: 600;
	margin: 0 0 12px;
}

.info p {
	font-size: 11px;
	line-height: 14px;
}

.close {
	position: absolute;
	display: block;
	top: 10px;
	left: 0;
	width: 10px;
	height: 10px;
	cursor: pointer;
	overflow: hidden;
	opacity: 0;
}

.close.active {
	opacity: 1.0;
}

.close:before {
	position: absolute;
	top: 0;
	line-height: 10px;
	content: '\00D7';
	color: #D2232A;
	font-size: 19px;
	font-weight: 300;
}


/* Images */


.images {
	position: absolute;
	width: 420px;
	height: 615px;
	top: 0;
	right: 0;
	padding-left: 10px;
	background-color: #FFF;
	overflow: hidden;
	z-index: 10;
}

.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;
}

.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.slick-track:before,
.slick-track:after {
	display: table;
	content: '';
}

.slick-track:after {
	clear: both;
}

.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}

.slick-slide img {
	display: block;
	width: 100%;
	height: auto;
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-slide.dragging img {
	pointer-events: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-loading .slick-slide {
	visibility: hidden;
}

.slick-vertical .slick-slide {
	display: block;
	width: 410px;
	height: 615px;
}

.slick-arrow.slick-hidden {
	display: none;
}


/* Cover */


.cover {
	display: none;
}


/* Mobile */


@media only screen 
and (max-width : 940px) {

	.info {
		left: auto;
		right: 0;
		width: 410px;
		height: 615px;
		padding-left: 25px;
		background-color: rgba(255, 255, 255, 0.95);
	}

	.info .close {
		left: 8px;
	}

}

@media only screen 
and (max-width : 640px) {


	/* General */


	.hide-on-desktop {
		display: block !important;
	}

	.hide-on-mobile, 
	.desktop-only {
		display: none !important;
	}


	/* Content */


	.outer {
		position: absolute;
		width: 100%;
		height: 100%;
		min-height: 540px;
		top: 0;
		left: 0;
		padding: 20px;
	}

	.inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		vertical-align: auto;
		text-align: left;
	}

	.content {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
	}


	/* Background */


	.background {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 400px;
		margin-bottom: 65px;
		overflow: hidden;
		z-index: 0;
	}

	.projects-active .background {
		margin-bottom: 0;
	}


	/* Gallery */


	.by-line {
		position: absolute;
		top: 402px;
		left: 9px;
		width: 100%;
		height: 20px;
		background-color: transparent;
	}


	/* Info */


	.info {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		text-align: left;
		background-image: url(/content/made-by-cohen/made-by-cohen-background.png);
		background-size: 22px 630px;
		background-repeat: repeat-x;
		overflow: hidden;
		z-index: 15;
	}

	.info .content {
		padding: 16px 10px 0 9px;
	}

	.info .content h1 {
		font-size: 12px;
		margin-bottom: 30px;
		font-weight: 300;
		color: #D2232A;
	}

	.info .close {
		position: absolute;
		display: block;
		top: 8px;
		left: auto;
		right: 11px;
		width: 20px;
		height: 20px;
		overflow: hidden;
		z-index: 25;
	}

	.close:before {
		position: absolute;
		top: 0;
		line-height: 20px;
		font-family: 'Made by Cohen';
		content: '\E802';
		color: #D2232A;
		font-size: 20px;
	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-device-pixel-ratio: 2),
	only screen and (min-resolution: 192dpi),
	only screen and (min-resolution: 2dppx) { 

		.info {
			background-image: url(/content/made-by-cohen/made-by-cohen-background-retina.png);
		}

	}


	/* Images */


	.slick {
		background-image: none;
	}

	.images {
		position: absolute;
		top: 0;
		left: 0;
		right: auto;
		width: 100%;
		height: 100%;
		padding: 0;
		overflow: hidden;
		background-image: none;
		background-color: #FFF;
		visibility: hidden;
		z-index: 15;
	}

	.images, 
	.controls, 
	.description, 
	.projects.close {
		visibility: hidden;
		pointer-events: none;
	}

	.projects-active .images, 
	.projects-active .controls, 
	.projects-active .description, 
	.projects-active .projects.close {
		visibility: visible;
		pointer-events: auto;
	}

	.description {
		position: absolute;
        top: auto;
        bottom: -20px;
		left: auto;
		right: auto;
		width: 100%;
        height: 42px;
        line-height: 41px;
        background-color: #FFF;
		z-index: 25;
	}


	/* Controls */


	.controls {
		position: absolute;
		top: calc((100vw - 44px) * (1230/820) + 17px);
		width: 42px;
		text-align: center;
		z-index: 20;
        display: none;
	}

	.controls.previous, 
	.controls.next {
		cursor: pointer;
	}

	.controls.previous {
		left: -15px;
	}

	.controls.next {
		right: -15px;
	}

	.controls.previous:before, 
	.controls.next:before {
		position: relative;
		height: 100%;
		top: 40%;
		font-family: 'Made by Cohen';
		font-size: 22px;
	}

	.controls.previous:before {
		content: '\E803';
	}

	.controls.next:before {
		content: '\E804';
	}

	.projects.close {
		position: absolute;
		display: block;
		top: auto;
        bottom: -8px;
		left: auto;
		right: 0;
		width: 20px;
		height: 20px;
		overflow: hidden;
		z-index: 25;
	}

}


/* Desktop */


@media only screen 
and (min-width : 641px) {
	
	
	/* Menu */


	.menu ul li.invisible:after, 
	.menu.active ul li:after, 
	.menu.active ul li.selected a, 
	.menu.active ul li:hover a {
		opacity: 1.0;
	}

	.menu.active ul li a, 
	.menu.active ul li.selected:after, 
	.menu.active ul li:hover:after {
		opacity: 0;
	}

	.menu ul li.invisible a {
		opacity: 0;
	}
	

}