/*
Theme Name: Celis MKIII
Author: Celis Design
Author URI: http://www.celisdesign.com/
*/


*{
margin:0;
padding:0;
}

html {
	height:100%;
}

body {
	width:100%;
	height:100%;
	font-family: Helvetica,sans-serif;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	text-align:center;
	font-weight:100;
	background:#5c6167;
	color:#fff;
}


/* ----- MAIN STRUCTURE COLORS -----*/ 


body.dark, 
body.dark .back_default {
/* 
	background:#262c35;
 */
 	background:rgba(38,44,53, 1); 
}

body.light, 
body.light .back_default {
	background:#aeb5bb; /*holding grey*/
	color:white;
}

.back_trans {
	background:rgba(38,44,53, 0.95); 
	background:rgba(92, 97, 103, 0.95); 

/* 
	background:rgba(48,69,82, 0.95); 
 */
}

.back_dark,
.tint,  
#page-arrows {
	background:#191d24;
	background:#23282d;
}

ul.tags li a {
	background: rgba(25,29,36, 0.6);
	background: rgba(255, 255, 255, 0.075);
}
 
body.light ul.tags li a {
/* 
	background:#aeb5bb; 
 */
	/*holding grey*/
	color:#111;
	background:none;
}

.dark, 
span.dark {
	color:#191d24;
}

.back_eee {
	background-color:#eeeeee !important;
}


/*---------------------------------*/

.backstretch {
	overflow:hidden; 	
	max-width:100%;
}

img,
.cycle-slideshow div {
	width: 100%;
	max-width: 100%;
	height:auto !important;
	display:block;
}

/*Inserts*/
p img, img.auto-width {
	width:auto;
}

img.loader {
	width:16px !important;
	height:16px !important;
}

.fixed {
	position:fixed;
}

.fixed_section, .fixed_form {
	position:fixed !important;
	width:100%;
	z-index:1200 !important;
	top:72px;
	margin-top:0 !important;
}

.relative {
	position:relative;
}

.full {
	width:100%;
}

.clear {
	clear:both;
}

.left {
	float:left;
}

.right {
	float:right;
}	

.text_left {
	text-align:left;
}

.text_center {
	text-align:center;
}

.text_right {
	text-align:right;
}

iframe {
	z-index:2000;
	max-width:100%;
}

.hidden, 
.mobile_only, 
img.mobile_only {
	display:none;
}

.visible {
	visibility:visible; 
}

.overflow_hidden {
	overflow:hidden !important;
}

.tint {
	position:fixed;
	width:100%;
	height:100%;
	opacity:0.4;
	filter: alpha(opacity=40);
	z-index:-5;
}

.z-1 {
	z-index:1 !important;
}

.z-200 {
	z-index:200 !important;
}

.circle {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#canvas-loader-wrap {
	text-align:center;	
	position:absolute;
	width:100%;
	padding-top:400px;
}

/*--------------------------------------------

STRUCTURE [GRID ESTABLISHED IN CSS DIRECTORY]

---------------------------------------------*/

/*wraps the grid*/
#wrap {
	position:relative;
	min-width:100%;
	min-height:100%;
	text-align:left;
}	

.main-grid {
	padding-bottom:10px;
}

.main-grid .col {
	margin-bottom:50px;
}
 
.main-grid div.continue {
	margin-top:35px;
}

.inner,
.col .inner {
	padding:16px;
}


/*-------------------------

FONTS / TYPE

--------------------------*/

ul {
	list-style:none;
}

li.spaced {
	padding-top:20px;
}

@font-face {
    font-family: 'FG';
    src: url('fonts/FG-Regular.eot');
    src: url('fonts/FG-Regular.eot?iefix') format('eot'),
         url('fonts/FG-Regular.woff') format('woff'),
/* 
         url('fonts/sailec.woff') format('woff'),
 */
         url('') format('truetype'),
         url('') format('svg');        
    font-weight: normal;
    font-style: normal;
}

/*-------P--------*/

p, ul.project-detail-trigger {
	font-family: 'FG', Helvetica, sans-serif;	
/* 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: 'Crimson Text', serif;
 */
	
	font-weight:normal;
	-text-rendering: optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	font-size:17px;
	line-height:21px;	
}

p,  
.muted, 
span.muted, 
a.muted,
a:hover, 
.landing ul li a, 
.quote_source, 
nav ul li a {
	color:#6a707b;
	color:rgba(255, 255, 255, 0.5); 
}

body.light .muted,
body.light p {
	color:rgba(0, 0, 0, 0.5);
}

.highlight, 
span.highlight {
	color:white;
}

.landing ul li a:hover {
	color:white;
}

span.underline {
	border-bottom:solid 1px #666;
	padding:2px 2px 2px 2px;
}

.black span.underline {
	border-bottom:solid 1px #bbb;
}

/*-------HEADINGS--------*/

h1, h2, h3, h4, h4 a, h5, h5 a, 
.landing span.teletype-text {
	font-family: 'FG', Helvetica, sans-serif;	
	font-weight:normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:none;
	display:inline-block;
}

/*-------H1--------*/

h1 {
	font-size:28px;
	line-height:32px;

	font-size:29px;
	line-heigh:33px;

}

.landing h1 {
	font-size:29px;
	line-heigh:33px;
}

.tag-heading p {
	color:white !important;
	max-width:97% !important;
}

/*-------H2--------*/

h2 {
	font-size: 28px;	
	line-height:29px;
	text-transform: none;
}

/*-------H3--------*/

h3 {
	font-size:27px;
	line-height:27px;
}

.project-content h3, 
.back_eee h3, .back_eee h2 {
	color:#686d71;
}

h3 span.quote_source {
	font-size:18px !important;
}

/*-------H4--------*/

h4 {
	font-size:23px;
	margin:0 0 3px 0;
}

/*-------H5--------*/

h5 {
	font-size:20px;
}

/*-------H6--------*/

h6 {
	font-size:17px;
	letter-spacing:0px;
}

#post-siblings .overlay h6, 
#post-siblings .media-title h6 {
	font-size:20px;
}

/*-------------------------

LINKS

--------------------------*/

a { 
/* 
	color:#cae6e2;
 */
	color:rgb(106, 112, 123); 
	color:rgba(255, 255, 255, 0.3); 
	text-decoration:none;
}

a:hover {
/* 
	color:#686d71;
 */
}

/*Used in Progress*/
a.btn_arrow_down {
	display:inline-block;
	width:25px;
	height:15px;
	background:url('img/arrow_down_x.png') 0 0 no-repeat; 
}

a.btn_x {
	display:inline-block;
	width:23px;
	height:23px;
	background:url('img/arrow_down_x.png') 0 -16px no-repeat; 
}

/*---------------------------


HEADER: Logo & Nav


--------------------------*/

#header {
	text-align:left;
	position:fixed;
	top:0;
	width:100%;
	padding:20px 0;
	z-index:2000 !important;
}

#logo-wrap {
	position:relative;
	padding: 4px 0px 6px 0px;
}

#logo-back {
	position:absolute;
	z-index:2;
	display:inline-block;
	width:85px;
	height:85px;
	background:#000;
}

a#logo {
	position:absolute;
	z-index:3 !important;
	display:inline-block;
	width:82px;
	height:88px;
	background:url('img/celis_logo_grotesk.png') 0px 10px no-repeat;
	top:25px;
	left:11px;

/* 
	top:30px;
	left:12px;
	color:white;
	font-size:31px;
	font-weight:normal;
	-text-rendering: optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
 */


}

/*-------NAV-------*/

nav {
	position:relative;
	padding-top:35px;
	float:right;
	margin-right:15px;
	z-index:10 !important;
}
	
nav ul li {
	display:inline;
	margin:0 0 0 35px; 
}

nav ul li a {
	font-size:17px;
	letter-spacing:0.5px;
	display:inline-block;
	font-weight:normal;	
}

body.light nav ul li a {

}	

#header.back_trans nav ul li a {

/* 
	color:#f7f7f7 !important;
 */
/* 
	color:rgba(255, 255, 255, 0.3) !important;
 */
}

#header.back_trans, nav ul li a:hover {
	color:#f2f2f2; 
}	

/*-------ICONS-------*/

a.twitter_sm {
	position:absolute;
	width:16px;
	height:17px;
	background:url("img/icons/icon_twitter_sm.png") center 1px no-repeat;
}

a.arrow_round_down {
	display:inline-block;
	width:40px;
	height:20px;
	background:url("img/arrows_round.png") center 0 no-repeat;
}

a.arrow_round_up {
	display:inline-block;
	width:40px;
	height:20px;
	background:url("img/arrows_round.png") center -20px no-repeat;
}	
	
/*---------------------------


LANDING


--------------------------*/

.landing {
	padding:15% 0 10%;
}


.landing-interior {
	height:18%;
	padding:14% 0 7%;
}


.landing .copy {
	margin:30px 0;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition:  opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition:  opacity 0.5s ease;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation: come-in 1.5s cubic-bezier(.09,.76,.29,1)forwards;
	animation: come-in 1.5s cubic-bezier(.09,.76,.29,1)forwards;
}

.landing {
	opacity:0;
}

.landing .col {
/* 
	margin-left:29% !important;
 */
	margin-left:10% !important;
}

.landing span.stroke {
	display:block;
	width:10px;
	height:1px;
	background:#4b5054;
	margin:3px 0 0;
/* 
	display:none;
 */
}

.landing p {
	max-width:75%;
/* 
	padding:6px 0 30px 0;
 */
	margin:0 auto;
	display:inline-block;
}

.landing-interior .copy p,
.landing-interior span.teletype-text {
	color:white;
	font-size:25px;
	line-height:30px;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust:100%;	
	font-weight:normal;
}

body.light .landing-interior .copy p,
body.light .landing-interior span.teletype-text {
	color:#000;
/* 
	color:#020202 !important;
	font-size:22px !important;
	line-height:26px;
 */
}


.landing ul {
	font-size:16px;
}

/*----------------------------

ENTRIES, MEDIA & THUMBS

-----------------------------*/

div.entry-title {
	padding:0 0 10px 15px;
}

/*specify col here, timeline also has media class*/
.col .media {
	/*float:left;*/
	position:relative;
	width:100%;
	max-height:100%;
	height:auto;
	text-align:center;	
}

.col .media, .col .media.tinted img, 
ul.tags li a: {
	-webkit-transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
	-moz-transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
	-ms-transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
	-o-transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
}


/*-----TITLES------*/

div.media-title a, 
div.overlay a {
    border-bottom:solid 1px #eee;
    padding-bottom:3px; 
	color:#fff !important;    
	font-weight:100 !important;
	letter-spacing:1px;
	font-weight:normal;	
}

/*-----OVERLAYS & TITLES------*/

div.media .media-thumb .overlay, 
div.media .media-thumb .overlay-pagination, 
div.media .media-thumb .media-title {
	position:absolute;
	width:100%;
	top:50%;
	margin-top:-12px;
	z-index:90;				
	text-align:center !important; 
	letter-spacing:1px !important;
	line-height:20px !important;	
	opacity:0;
	filter: alpha(opacity=0);	
	display:none;
}

div.media .media-thumb .media-title {
	opacity:1; 
	filter: alpha(opacity=100);
	display:block;
}

div.media.single-landing .media-thumb .media-title {
	text-align:left !important;
}

/*-----HOVER------*/

.col .media:hover, 
.col .tinted {
	background:#0a021a /*purple*/ !important;
}

.col .media:hover img {
	opacity:0.1;
	filter: alpha(opacity=10);
}

.col .media.tinted:hover img {
	opacity:1;
	filter: alpha(opacity=100);
}

.col .media:hover .media-title {  
	opacity:0;
	filter: alpha(opacity=0);
	display:none;
}

.col .media:hover .overlay {
	opacity:1; 
	filter: alpha(opacity=100);
	display:block;
}


/*-----EXCERPTS------*/


ul li.excerpt p {
	font-size:18px;
	line-height:20px;
/* 
	font-size:19px;
	line-height:22px;
 */
	max-width:95%;
	margin:0px 0 10px 0px;
}

/*------TAGS------*/

ul.tags {
	padding-top:20px;
}

ul.tags li {
	display:inline;
	margin:0 1px 0 0;
}

ul.tags li a {
	font-size:11px;
/* 
	font-size:13px;
 */
	padding:5px;
/* 
	font-family:Arial, sans-serif;
 */
	color:#e6e6e6;
	color:#d7d7d7;
	color:rgba(255, 255, 255, 0.5); 
	
/* 
	color:rgba(0, 0, 0, 0.7);
 */
/* 
	letter-spacing:1px;
	-webkit-font-smoothing: subpixel-antialiased;
 */
/* 
	background:none !important;
 */
}

ul.tags li a:hover {
/* 
	background:#000 !important;
 */
	background:none;
	color:#d7d7d7;
} 

/*---------------------------

SINGLE PROJECT

--------------------------*/

.project-header {
    width: 100%;
	margin-top:170px;
/* 
	background:rgba(38,44,53, 0.95); 
 */
    z-index:1200;
}

.project-header_fixed {
	position:fixed;
	top:-54px;
	top:-57px;
	width:100%;
    transition: top 0.3s ease-in-out;
/* 
	background:rgba(38,44,53, 0.95); 
 */
    z-index:1200;
}

.project-header_fixed .center {
/* 
	border-top:rgba(255, 255, 255, 0.08) solid 1px;
 */
}

.project-header_fixed .inner {
	padding-top:4px;
}

.project-header.fixed_section entry {
	display:none;
}

.nav-up {
    top: -57px;
}

.nav-down {
	top:57px;
}

.project-header p {
	font-size:19px;
	line-height:21px;
	width:33%;
	margin-top:5px;
}


ul.project-detail-trigger {
	position:absolute;
	right:12px;
	bottom:15px; /*account for inner*/
}


ul.project-detail-trigger li {
	display:inline;
	font-size:18px;
}

ul.project-detail-trigger li.teaser {
	float:left;
	margin:1px 3px 0 0;
}

a.trigger {
	display:inline-block;
	width:24px;
	height:24px;
	color:white;
	background:transparent url('img/plus.png') center center no-repeat; 
	background-size:13px;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
  	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;	
}

a.trigger.active {
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.project-detail {
	display:none;
}


.project-detail .center {
/* 
	border-top:dotted 1px rgba(255, 255, 255, 0.2);
 */
}

.project-detail .text-section {
	padding:0px 0 30px 0;
}

.project-detail .text-section h5 {
	width:60%;
	margin:10%;
}

.project-detail .text-section p {
	width:90%;
	padding:30px 0 15px;	
	font-size:20px;
	line-height:27px;
	color:#eee;
	color:rgba(255, 255, 255, 0.66); 
}


/*----------------------*/

.project-content {
	padding:120px 0;
	padding:30px 0;
}

/*-----------------------


GALLERY


------------------------*/

#gallery div.image-container:hover {
	cursor:pointer;
}
#gallery div.image-container.disable_zoom:hover {
	cursor:default;
}

#gallery-cycle-wrap {
	position:fixed;
	width:100%;
	height:100%;
	background:#eee;
	top:0; 
	left:0;
	display:none;
	z-index:3000;
	overflow-y:auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch !important;	
}


#gallery-cycle {
	width:85%;
	margin:100px auto;
	min-height:100%;
}

#gallery-cycle-wrap.active {
	display:inline-block;
}

#gallery-cycle-wrap a.cycle-prev {
	position:fixed; 
	left:50px;
	top:45%;
	z-index:2000;
}

#gallery-cycle-wrap a.cycle-next {
	position:fixed; 
	right:50px;
	top:45%;
	z-index:2000;
}

#gallery-cycle-wrap #counter {
	position:fixed;
	top:50px;
	left:50px;
	font-size:17px;
}	

#gallery-cycle-wrap a.btn_x {
	position:fixed; 
	top:50px;
	right:50px;
}

#gallery-cycle-wrap a.cycle-next {
	position:fixed; 
	right:30px;
	top:45%;
}


#gallery-cycle-wrap device.scaled {
/* 
	-webkit-transform: scale(1) !important;
 */
}



#gallery-cycle-wrap img.scaled {
	margin: 0 auto;
	display:block;
}


.cycle-slideshow div.device-wrap {
	overflow:hidden !important;
}

.cycle-slideshow div.marvel-device {
/* 
	max-width:30%;
 */
	margin:0 auto;
	overflow:hidden; 
}

.project-content {
	background:#eee;
 	color:black;
}

#gallery-header, .project-content .content-header {
	padding:0 0 60px 0;
}

#gallery .col, 
#gallery .section, 
#gallery .solo, 
#gallery .continue {
	text-align:center;
	position:relative;
}

#gallery div .zoom {
	position:absolute; 
	top:30px;
	right:30px;
	opacity:0; 
	font-size:40px;
}

#gallery div:hover>.zoom {
	opacity:1;
}

/*For divs that continue a column*/
#gallery .col div.continue {
	float:left;
	width:100%;
}

img.scaled {
	margin:0 auto; 
}

.cycle-pager {
	float:right;
	margin-right:2.7%;
}

.cycle-pager a {
	font-size:35px;
	display:inline-block;
	width:30px;
	height:2px;
	margin:20px 0 0 5px;
	background:#616772; /* less than muted*/
}

.cycle-pager a.cycle-pager-active, 
.cycle-pager a:hover {
	background:#f7f7f7;
}

/*--------DEVICES----------*/

#gallery {
	overflow:hidden;
}

#gallery .section {
	position:relative;
}

.browser .screen img, 
img.browser {
	border-top:solid 13px #262c35 !important;
  	border-radius: 8px 8px 0 0;
}	

.col_device.solo.scaled {
/* 
	clear:both;
 */
}		

.device-wrap {
	text-align:center;
	position:relative;
	-webkit-transition: all 1s;
}	
	
#gallery div.framed .device-wrap img {
	width:100%;
	height:auto;
	padding:0;
}

.iphone5s img {
	margin:0;
}

.device.scaled {
/* 
	-ms-transform-origin: center 0%;
 */
	 /* IE 9 */
/* 
	 -webkit-transform-origin: center 0%;
 */
/* 
	transform-origin: center 0%;
 */
}

.device.black .screen {
	-webkit-box-shadow: 0 0 0 3px #030303;
	box-shadow: 0 0 0 3px #030303;
}	

.device.silver .screen {
	-webkit-box-shadow: 0 0 0 3px #ccc;
	box-shadow: 0 0 0 3px #ccc;
}

.marvel-device.ipad .home {
	bottom:15px;
}

.device.black::before, 
.marvel-device.device .volume, .marvel-device.device .volume {
	background:#020202;
}

.marvel-device.iphone5s .home {
	-webkit-box-shadow: inset 0 0 0 4px #111;
	box-shadow: inset 0 0 0 4px #111;
}
	
.laptop {
	width:80%;
	padding:0px 10%;
}

.laptop img {
	width:100%;
	height:100%;
	border-top: 12px solid #272727;
	border-left: 12px solid #272727;
	border-right: 12px solid #272727;
  	border-radius: 10px 10px 0 0;
  	margin-left:-12px;
}

.span_1_of_3 .laptop img {
	border-top: 9px solid #272727;
	border-left: 9px solid #272727;
	border-right: 9px solid #272727;
  	border-radius: 8px 8px 0 0;
}

.btm {
  width: 120%;
  height: 10px;
  left: 50%;
  margin-left: -10%;
  border-radius: 0 0 20px 20px;
  background: #272727;
  z-index: 1;
}

.span_1_of_3 .btm {
 height:8px;
 border-radius: 0 0 17px 17px;
}


/*--------------

NOTES

---------------*/

.note {
	padding:40px;
	text-align:left;
	position:relative;
	font-size:17px;
	line-height:26px;
}

.note.relative {
	position:relative !important;
}

.note.top-left {
	position:absolute;
	top:16px;
	left:16px;	
}

.note.bottom-left{
	position:absolute;
	bottom:16px;
	left:16px;		
}

.note.top-right {
	position:absolute;
	top:16px;
	right:16px;	
}

.note.bottom-right {
	position:absolute;
	bottom:16px;
	right:16px;	
}

.note.note_centered {
	float:none;
	margin:0 auto; 
	text-align:center !important;
	max-width:50%;
}

.note.large {
	font-size:22px;
	line-height:26px;
}

.note.caption {
	font-size:15px;
	color:#6a707b;
}


/*--------LINKS & MORE WORK----------*/

#project-links {
	padding:60px 0;
}

#more-work {
	padding:100px 0;
}

#project-links ul, #more-work ul {
	margin-top:20px;
}

#project-links ul li, #more-work ul li {
	font-size:15px;
	line-height:22px;
}

#project-links ul li a {
	color:#191d24;
}

#project-links ul li a:hover {
	color:#666;
}

#further-links  li a {
	color:#6a707b;
}

#further-links li a:hover {
	color:#eee !important;
}

/*--------------

SINGLE LAYOUTS

---------------*/

body.grid .main-grid {
	margin-top:150px;
}
/*---------------------------


Page Footer


--------------------------*/

.page-footer {
	padding:2% 0 2% 0;
	height:580px;
}

.back_holding {
	background:#aeb5bb; /*holding*/
	color:white;
}

.page-footer h2 {
	color:black;
	display:inline-block;
	padding-bottom:6px;
	border-bottom:solid 1px #111;
}

.page-footer ul {
	margin-bottom:70px;
	color:black;
}

.page-footer ul li {
	line-height:22px;
	font-size:17px;
}

.page-footer ul li a:hover {
	color:#000;
}

.page-footer h3 a {
	color:black;
	border-bottom:1px solid black
}

.page-footer h3 a:hover {
	border-bottom:none;
}

/*----------------------------

PAGE ARROWS

-----------------------------*/

#page-arrows {
	position:fixed;
	width:100%;
	height:10px;
	padding:25px 0 25px;
	z-index:3000;
	bottom:0;
}

#page-arrows ul li#up {
	display:none;
}

#page-arrows a {
	-webkit-transition: opacity 0.5s ease;
	-moz-transition:  opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition:  opacity 0.5s ease;
}	

#page-arrows a:hover {
	opacity:0.3;
	filter: alpha(opacity=30);	
}

/*----------

LIFT EFFECT 

------------*/


.lift {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 150px, 0px);
  -webkit-transform: translate3d(0px, 150px, 0px);
  -o-transform: translate(0px, 150px);
  -ms-transform: translate(0px, 150px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* 
.lift {
    -webkit-transform: translateY(-50px);    
}	
 */


.lift.no_fade {
	opacity:1;
}

.lift.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*----------------------

MEDIA QUERIES

----------------------*/

@media only screen and (max-width: 1430px) {
		
	#gallery img.framed { 
		padding:80px;
	}

}

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


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


	
}

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


	
	/*---NAV---*/
	/*
	#nav-toggle {
		display:inline-block;
		top:18px;
		right:18px;
	}

	nav {
		float:left;
		padding-left:6%;
	}
	
	nav.expanded {
		padding-top:45px;
	}
	
	nav ul li {
		float:left;
		text-align:left;
		display:none;
		width:26%;
		padding:8px 0;
	}
	
	nav.expanded ul li {
		display:inline-block;
	}
	
	nav ul li.social {
		display:none;
	}
	*/

}


@media only screen and (max-width: 1200px) {
	
	#gallery div.framed img { 
 		width:100%;
		padding:0;
 		margin:0;
	 }

}


/*--------------

TABLET: Portrait

--------------*/

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

	/*----MAIN---*/

	.mobile_only, 
	img.mobile_only {
		display:inline-block !important;
	}
	
	.mobile_hide, 
	img.mobile_hide {
		display:none !important;
	}

	div.main-grid, 
	div.section,
	.landing .copy,
	.guttered .col, 
	.guttered_deep .col,
	 .col {
	 	display:block;
		width:100% !important;
		max-width:100 !important%;
		margin-left:0 !important; 
	}	
	
	.gallery .col,	
	#more-work .col {
		float:left !important;
		width:100% !important;
	}
	
	ul li.excerpt p {
		height:auto;
	}


	.project-header p {
		width:100%;
	}



	.project-header_fixed .inner {
		padding-top:0;
		padding-bottom:12px;
	}
	
	.project-header_fixed ul.project-detail-trigger {
		position:relative;
		left:auto;
		right:auto;
		bottom:auto;
		top:auto;
	}	
	
	.project-header_fixed.active {
	  	overflow:auto;	
		height: 100%; /*must be this to get background*/
	}
	
	.project-header_fixed.active .project-header-content {
/* 
		overflow-y:scroll;
	    height: 100%;
 */
	}
	
	.project-header_fixed.active .project-detail-wrap {
		position:fixed; 
		top:112px;
		height:100%; /*must be this to get scroll*/
		overflow:scroll;
	}

	.project-header_fixed.active .project-detail {
		  z-index:2200 !important;	
		  min-height: 100%;
		  padding-bottom:130px;
		  overflow: scroll !important;
		  /* smooth scrolling on touch devices */
		  -webkit-overflow-scrolling: touch !important;
	}
				
	.project-detail .text-section p {
		padding-top:13px;
	}
		
			
/* 
	div.device-wrap {
		-webkit-transform: scale(0.5) !important; 
		-ms-transform: scale(0.5) !important;
		transform: scale(0.5) !important;
		-webkit-transform-origin-x: 50%;
		-webkit-transform-origin-y: 50%;
		-webkit-transform-origin-z: initial;
	}	
	
 */

	.device.fit {
		/*display:none;*/
	}
	
	
		
	.marvel-device.iphone5s::before {
		-webkit-border-radius: 230px !important;
		border-radius:20px !important;
	}
	
	.iphone5s {
		width:160px !important;
/* 
		height:284px !important;
 */
		height:auto !important;
		padding:52px 16px !important;
		-webkit-border-radius: 25px !important;
		border-radius:25px !important;
	}
	
	.iphone5s .screen {
		width:100%;
		height: auto; 
	}
	
	.iphone5s.fit {
		width:160px !important;
		height:auto !important;
	}
	
	.iphone5s.black {
		background:#020202 !important;		
	}
	
		
	.marvel-device.iphone5s .home {
		-moz-border-radius: 18px;
		-webkit-border-radius: 18px;
		border-radius: 18px;
		width: 34px;
		-webkit-box-shadow: inset 0 0 0 2px #111;
		box-shadow: inset 0 0 0 2px #111;
		height: 34px;
		position: absolute;
		left: 50%;
		margin-left: -17px;
		bottom: 9px;
		z-index: 3;
	}
	
	 .marvel-device.iPhone5s .top-bar,
	 .marvel-device.iPhone5s .camera, 
	 .marvel-device.iPhone5s .sensor, 
	 .marvel-device.iPhone5s .speaker, 
	 .marvel-device.iPhone5s .volume, 	
	 .marvel-device.iPhone5s .sleep {
/* 
		display:none !important;
 */
	} 

	
	.marvel-device.ipad::before {
		-webkit-border-radius: 20px !important;
		border-radius:20px !important;
	}
	
	.ipad {
		width:288px !important;
		height:384px !important;
		padding:45px 12px !important;
		-webkit-border-radius: 22px !important;
		border-radius:22px !important;
	}
	
	.marvel-device.ipad .home {
		display:none;	
	}
	
	
	
	div.image-container.col_device {

	}
	
}


/*--------------

PHONE

--------------*/


@media only screen and (max-width: 700px) {
	
	.landing .col {
		margin-left:0 !important;
	}
	
	.landing h1 {
		font-size:28px;
	}	
	
}