/* GENERAL */


*, 
*:before, 
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	overflow: auto;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background-color: #F8F8F8;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div, 
p, 
a, 
span, 
h1, 
h2, 
h3, 
ul, 
table, 
tr, 
td, 
input, 
label, 
textarea, 
button {
	font-family: 'Gotham-Book', 'Helvetica';
	font-weight: normal;
	font-style: normal;
	font-size: 0.75rem;
	color: #AAA;
}

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

.clear {
	clear: both;
}

.hidden {
	visibility: hidden;
}


/* FONTS */


@font-face {
	font-family: 'Gotham-Book';
	src: url('../fonts/gotham-book.eot') format('embedded-opentype'),
		 url('../fonts/gotham-book.woff') format('woff'),
		 url('../fonts/gotham-book.ttf') format('truetype'),
		 url('../fonts/gotham-book.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ATSackersGothicMedium';
	src: url('../fonts/at_sackers_gothic_medium-webfont.eot');
	src: url('../fonts/at_sackers_gothic_medium-webfont.eot?#iefix') format('eot'),
		 url('../fonts/at_sackers_gothic_medium-webfont.woff') format('woff'),
		 url('../fonts/at_sackers_gothic_medium-webfont.ttf') format('truetype'),
		 url('../fonts/at_sackers_gothic_medium-webfont.svg#webfontUtVGW83e') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* TEXT */


a {
	color: inherit;
	text-decoration: none;
	outline: none;
	border: 0;
	cursor: pointer;
}

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

strong {
	font-weight: normal;
}

p {
	margin: 0 0 1.25rem;
	padding: 0;
	line-height: 1.5rem;
}

h1,
h2,
h3 {
	font-family: 'ATSackersGothicMedium';
	text-transform: uppercase;
	font-weight: normal;
}

h1 {
	font-size: 0.75rem;
	letter-spacing: 1px;
	margin-top: 0;
}

h2 {
	display: inline-block;
	font-size: 0.625rem;
	letter-spacing: 1px;
	margin: 0;
}

h3 {
	font-size: 0.625rem;
	letter-spacing: 1px;
	margin: -1rem 0 1.25rem 0;
}

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


/* TRANSITIONS */


a, 
button, 
.label {
	transition: color 250ms;
}

.header, 
.controls, 
.footer {
	user-select: none;
}

.mobile-menu, 
.controls a {
	transition: opacity 250ms ease;
}


/* CONTENT */


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

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


/* HEADER */


.header,
.footer {
	position: relative;
	background-color: #F8F8F8;
	width: 100%;
}

.header {
	height: 5rem;
	z-index: 100;
}

.header .title {
	width: calc(100% - 4.25rem);
	height: 100%;
	margin: 0;
	text-align: left;
	overflow: hidden;
}

.header .title a {
	position: absolute;
	display: inline-block;
	width: auto;
	height: 100%;
	padding-left: 1.275rem;
	overflow: hidden;
}

.header .title svg {
	width: 13.375rem;
	height: 1.75rem;
	margin-top: 1.625rem;
	fill: #AAA;
}

.header .menu {
	padding-right: 1.125rem;
}

.header .menu .instagram-btn {
	margin-left: -0.125rem;
}

.header .menu .instagram-btn svg {
	vertical-align: -0.375rem;
}


/* FOOTER */


.footer {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0.5rem 1.25rem 0rem 1.25rem;
	text-align: center;
	letter-spacing: 1px;
	font-size: 0.625rem;
	line-height: 1.5625rem;
}

.footer .title, 
.footer .instagram-link, 
.footer a.back-btn {
	font-family: 'ATSackersGothicMedium';
	font-size: 0.6875rem;
	text-transform: uppercase;
}

.footer .title {
	line-height: 2.5rem;
}

.footer p {
	font-family: 'Gotham-Book';
	margin: 0;
	line-height: 1.25rem;
}

.footer p:last-of-type {
	padding-bottom: 1.25rem;
}

.footer .instagram-link {
	display: inline-block;
}

.footer .instagram-link:hover {
	color: inherit;
}

.footer .instagram {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.375rem auto 0;
}

.footer a.back-btn {
	margin: 0 0.375rem;
	padding: 0;
	line-height: 3.125rem;
	letter-spacing: 1px;
}


/* MENU */


.header .menu {
	display: none;
	top: 0;
	right: 0;
}
	
.header .home-btn {
	display: none;
}

.menu ul li a {
	font-family: 'ATSackersGothicMedium';
	font-size: 0.6875rem;
	text-transform: uppercase;
}

.menu ul {
	font-size: 0;
}

.menu ul li {
	display: inline-block;
	text-transform: uppercase;
}

.menu ul li a {
	display: block;
	letter-spacing: 1px;
	padding: 0.625rem;
}


/* MOBILE MENU */


.menu-btn {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	width: 4.25rem;
	height: 5rem;
	font-size: 0;
	text-indent: -10000rem;
	background-color: transparent;
	overflow: hidden;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	z-index: 250;
}

.menu-btn:focus {
	outline: none;
}

.menu-btn span {
	top: 50%;
	left: 1.25rem;
	right: 1.25rem;
	height: 1px;
}

.menu-btn span::before,
.menu-btn span::after {
	content: '';
	left: 0;
	width: 100%;
	height: 1px;
}

.menu-btn span, 
.menu-btn span::before,
.menu-btn span::after {
	position: absolute;
	display: block;
	background: #AAA;
}

.menu-btn span::before {
	top: -7px;
}

.menu-btn span::after {
	bottom: -7px;
}

.menu-btn span {
	-webkit-transition: background 0 100ms;
	transition: background 0 100ms;
}

.menu-btn span::before,
.menu-btn span::after {
	-webkit-transition-duration: 200ms, 200ms;
	transition-duration: 200ms, 200ms;
	-webkit-transition-delay: 200ms, 0;
	transition-delay: 200ms, 0;
}

.menu-btn span::before {
	-webkit-transition-property: all, -webkit-transform;
	transition-property: all, transform;
}

.menu-btn span::after {
	-webkit-transition-property: all, -webkit-transform;
	transition-property: all, transform;
}

.menu-active .menu-btn span {
	background: none;
}

.menu-active .menu-btn span::before {
	top: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.menu-active .menu-btn span::after {
	bottom: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.menu-active .menu-btn span::before,
.menu-active .menu-btn span::after {
	-webkit-transition-delay: 0, 200ms;
	transition-delay: 0, 200ms;
}

.mobile-menu {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #F8F8F8;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
}

.menu-active .mobile-menu {
	opacity: 1.0;
	pointer-events: all;
}

.mobile-menu .menu {
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.mobile-menu .menu ul li {
	display: block;
}

.mobile-menu .menu li a {
	padding: 0.5rem 0;
	line-height: 2rem;
}

.mobile-menu .menu .instagram-btn {
	display: none;
}


/* HOME */


.home .content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.home .content .image {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.home .footer {
	position: absolute;
	height: auto;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: 0;
	padding: 1rem 0 0.625rem;
	z-index: 0;
}


/* TEXT PAGES */


.profile .content, 
.outside, 
.text, 
.text .table div {
	width: 100%;
}

.outside {
	display: inline-block;
	height: 98%;
}

.text {
	display: table;
	height: 100%;
}

.text .table {
	display: table-cell;
	vertical-align: middle;
	line-height: 1.25rem;
}

.text .table div {
	display: inline-block;
	padding: 0 1.25rem 1.25rem;
	line-height: 1.5rem;
}

.profile .content, 
.contact .content, 
.contact .text .table div {
	text-align: center;
}

.profile .text .table div {
	max-width: 840px;
	text-align: left;
}

.profile .content, 
.contact .content {
	height: calc(100% - 5rem);
}

.profile-image {
	width: 100%;
	height: auto;
	padding: 0 0 1rem 0;
}


/* SOCIAL ICONS */


.social-icon {
	position: relative;
	display: inline-block;
	margin: 0 6px;
}

.instagram-link:hover > .social-icon > svg, 
.social-icon:hover > svg {
	fill: currentColor;
}


/* THUMBNAILS */


.thumbnails, 
.thumbnails .item, 
.thumbnails .item img {
	width: 100%;
	height: auto;
}

.thumbnails {
	font-size: 0;
	text-align: center;
}
.thumbnails .item {
	display: inline-block;
	vertical-align: top;
}

.thumbnails .item a {
	display: block;
}

.thumbnails .label {
	display: block;
	width: 100%;
	line-height: 1.25rem;
	margin: 1rem 0;
	font-family: 'ATSackersGothicMedium';
	font-size: 0.625rem;
	color: #AAA;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

.thumbnails .item:hover .label {
	color: #777;
}


/* PROJECT */


.project .container {
	height: auto;
}

.project .content .images, 
.project .content .images .item, 
.project .content .images .item img {
	width: 100%;
	height: auto;
}

.project .content .images .item {
	margin-bottom: 1rem;
}

.project .content .images .item:last-child {
	margin: 0;
}

.project .title {
	color: #777;
}

.controls, 
.back-btn {
	display: none;
}


/* UPGRADE */


.upgrade {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: none;
	text-align: center;
	background-color: #FFFFFF;
	z-index: 1000;
	display: none;
}

.no-js .upgrade, 
.no-opacity .upgrade, 
.no-csstransforms .upgrade, 
.no-svg .upgrade {
	display: table;
}

.no-js .content, 
.no-js .header, 
.no-js .footer, 
.no-js .mobile-menu, 
.no-opacity .content, 
.no-opacity .header, 
.no-opacity .footer, 
.no-opacity .mobile-menu, 
.no-csstransforms .content, 
.no-csstransforms .header, 
.no-csstransforms .footer, 
.no-csstransforms .mobile-menu, 
.no-svg .content, 
.no-svg .header, 
.no-svg .footer, 
.no-svg .mobile-menu {
	display: none;
}

.no-js .logo, 
.no-opacity .logo, 
.no-csstransforms .logo, 
.no-svg .logo {
	background-image: url(../content/upgrade/upgrade-logo.png);
}

.no-js .safari, 
.no-opacity .safari, 
.no-csstransforms .safari, 
.no-svg .safari {
	background-image: url(../content/upgrade/safari.png);
}

.no-js .chrome, 
.no-opacity .chrome, 
.no-csstransforms .chrome, 
.no-svg .chrome {
	background-image: url(../content/upgrade/chrome.png);
}

.no-js .firefox, 
.no-opacity .firefox, 
.no-csstransforms .firefox, 
.no-svg .firefox {
	background-image: url(../content/upgrade/firefox.png);
}

.upgrade .center {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0 20px;
	overflow: hidden;
}

.upgrade .logo {
	position: relative;
	display: block;
	width: 100%;
	height: 45px;
	margin: 0 auto 25px auto;
	padding: 0;
	background-repeat: no-repeat;
	background-size: 375px auto;
	background-position: center;
}

.upgrade a, 
.upgrade p {
	margin: 0;
	line-height: 200%;
}

.upgrade a.browser {
	position: relative;
	display: inline-block;
	width: 75px;
	height: 75px;
	margin: 15px 5px 0 5px;
	padding: 0;
	text-decoration: none;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 42px 42px;
	background-position: center;
}

.upgrade a.browser span {
	display: block;
	text-align: center;
	width: 75px;
	margin-top: 70px;
}


/* ALL MOBILE */


@media only screen 
and (max-width : 1024px) 
and (orientation : landscape) {
	
	.hide-on-mobile {
		display: none;
	}
	
	.header, 
	.menu-btn {
		height: 4.5rem;
	}
	
	.header .title svg {
		margin-top: 1.125rem;
	}
	
	.mobile-menu .menu {
		padding-top: 2rem;
	}
	
	.home .footer {
		display: none;
	}
	
	.home .content {
		padding-top: 4.5rem;
	}
	
	.home .content .image {
		background-size: cover;
		background-position: 50% 60%;
	}
	
}


/* MOBILE */


@media only screen 
and (min-width : 376px) {
	
	.header, 
	.menu-btn {
		height: 4.5rem;
	}
	
	.header .title svg {
		width: 15.25rem;
		height: 2rem;
		margin-top: 1.25rem;
	}
	
}

@media only screen 
and (min-width : 576px) {
	
	.header .title {
		width: auto;
		padding: 0;
	}
	
	.container {
		padding: 0 0.625rem;
	}
	
	.header .title a {
		padding-left: 0.625rem;
	}
	
	.header .menu {
		padding-right: 0.625rem;
	}
	
	.menu-btn {
		margin-right: -0.5rem;
	}
	
	.thumbnails .item {
		width: 33.333%;
		padding: 0 0.625rem;
	}
	
	.thumbnails .label {
		margin: 0.625rem 0 1.5rem;
	}
    
    .project .content {
		padding: 0 0.5rem;
	}
    
    /*
    
    .project .content .images {
		font-size: 0;
	}
    
    .project .content .images .item {
        width: 50%;
        display: inline-block;
        vertical-align: top;
        padding: 0 0.5rem;
    }
	
    */
    
	.profile-image {
		float: left;
		max-width: 18rem;
		padding: 0.325rem 1rem 0 0;
	}
	
}


/* TABLET */


@media only screen 
and (min-width : 768px) {
	
	.thumbnails .item {
		width: 25%;
	}
	
	.profile .content, 
	.contact .content {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		padding-top: 4rem;
	}
	
}

@media only screen 
and (min-width : 576px)
and (max-width : 768px) {
	
    /*
    
	.project .content {
		padding: 0 0.5rem;
	}
    
    .project .content .images .item {
        width: 100%;
        display: block;
        padding: 0;
    }
    
    */
	
}


/* DESKTOP */


@media only screen 
and (min-width : 1025px) {
	
	.hide-on-desktop {
		display: none;
	}
	
	.menu-btn, 
	.mobile-menu {
		display: none;
	}
    
    .header {
        height: 7rem;
    }
    
    .home .content, 
    .project .content {
        padding: 7rem 0 7.125rem;
	}
	
	.home .footer {
		padding-bottom: 0.75rem;
	}
	
	.header .menu {
		position: absolute;
		display: block;
	}
	
	.header .title {
		width: 100%;
        height: auto;
		text-align: center;
	}
	
	.header .title a {
		position: relative;
        height: auto;
        padding: 0.4375rem 0;
	}
	
	.header .menu {
		position: relative;
		width: 100%;
		text-align: center;
	}
	
	.header .menu ul li a {
		height: 2rem;
		line-height: 2rem;
        padding-top: 0;
	}
	
	.header .menu .instagram-btn {
		display: none;
	}
    
    .thumbnails .item {
		width: 20%;
	}
	
	.project .container, 
	.project .content {
		height: 100%;
	}
	
	.project .content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	
	.project .content .images {
		position: relative;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.project .content .images .item {
		position: absolute;
		display: none;
		width: 100%;
		height: 100%;
		margin: 0;
		text-align: center;
		font-size: 0;
	}
	
	.project .content .images .item.active {
		display: block;
	}
	
	.project .content .images .item img {
		position: absolute;
		width: auto;
		max-height: 100%;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	.project .content .images .item img.landscape {
		height: auto;
		max-width: 100%;
	}
	
	.project .footer {
		position: absolute;
		bottom: 0rem;
		left: 0;
	}
	
	.project .footer p {
		font-size: 0.6875rem;
	}
	
	.controls {
		display: block;
	}
	
	.controls a {
		position: absolute;
		display: block;
		top: 50%;
		height: 6rem;
		padding: 1rem;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-radius: 1px;
		background-color: rgba(248, 248, 248, 0.75);
	}
	
	.controls a svg {
		width: auto;
		height: 100%;
	}
	
	.controls .disabled {
		opacity: 0;
		pointer-events: none;
	}
	
	.controls .prev {
		left: 0rem;
	}
	
	.controls .next {
		right: 0rem;
	}
	
	.controls a:hover {
		opacity: 1.0;
	}
	
}


/* MAX DESKTOP */


@media only screen 
and (min-width : 1367px) {
	
    .thumbnails .item {
		width: 14.2857142857%;
	}
    
    /*
    
	.project .footer p:last-of-type {
		padding-bottom: 2rem;
	}
	
    */
    
	.controls .prev {
		left: 1rem;
	}
	
	.controls .next {
		right: 1rem;
	}
	
}