body {
   background: #262422;
   margin:0;
   padding:0;
   position: relative;
   font-family: "Lato", lato, Roboto, Droid, "Helvetica Neue", Helvetica, Arial, sans-serif;
   box-sizing: border-box;
   overflow-x: hidden;
   
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga";
	font-feature-settings: "liga";
}
img {
   max-width:100%;
}
img.full-width-img {
	width: 100%;
}
hr {
   margin-bottom: 50px;
   border-bottom: none;
   border-top: 1px solid #666462;
   border-top: 1px solid rgba(0,0,0,0.2);
}
.not-for-mobile {
   display:none;
}
.disabled-scroll {
   max-height: 100%;
   overflow: hidden;
}
.link {
	color:#fff;
	padding-bottom: 2px;
	border-bottom: 1px dotted rgba(255,255,255,0.6);
   outline: none;
   cursor: pointer;
   background: transparent;
   background: rgba(255,,255,255,.0);
   box-shadow: 0 0 0 0 rgba(255,255,255,.0);
   
   transition: background 0.18s ease-out,
               box-shadow 0.18s ease-out,
               color 0.06s ease-out,
               transition 0.2s ease-out;
}
.link:hover,
.link:focus {
   color: #000;
   background: #fff;
   box-shadow: 0 0 0 12px rgba(255,255,255,1);
   
   -webkit-transition: background 0.12s ease-out,
               box-shadow 0.12s ease-out,
               color 0.72s ease-out,
               -webkit-transform 0.2s ease-out;
   transition: background 0.12s ease-out,
               box-shadow 0.12s ease-out,
               color 0.72s ease-out,
               -webkit-transition 0.2s ease-out;
}
.link:active {
   -webkit-transform: scale(.94);
   transform: scale(.94);
   
   -webkit-transition: -webkit-transform 0.04s ease-out;
   transition: transform 0.04s ease-out;
}
.ui-icon {
   font-size: 48px;
   color: #fff;
   position: relative;
   
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   tap-highlight-color: rgba(0,0,0,0);
   
   transition: color 0.2s ease-out, transform 0.04s ease-out;
}
.ui-icon:active, .ui-icon:focus {
   -webkit-transform: scale(.9);
   transform: scale(.9);
}

.white-ui .ui-icon {
   color: #fff;
   background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.22) 10%, rgba(0,0,0,0) 90%);
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%,rgba(0,0,0,0.22)), color-stop(90%,rgba(0,0,0,0)));
   background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.22) 10%,rgba(0,0,0,0) 90%);
   background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.22) 10%,rgba(0,0,0,0) 90%);
   background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.22) 10%,rgba(0,0,0,0) 90%);
   background: radial-gradient(ellipse at center, rgba(0,0,0,0.22) 10%,rgba(0,0,0,0) 90%);
   border-radius: 50%;
   text-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.inline-icon {
   width: 32px;
   margin-right: 24px;
   font-size: 32px;
   float: left;
}
.text-with-icon {
   margin-bottom: 32px;
}

/***** start of: TYPO *****/
a {
   outline: none;
   text-decoration: none;
   color: #1b76dc;
}
figure {
   -webkit-margin-start: 0;
   -webkit-margin-end: 0;
}
figcaption {
   font-size: 1.1em;
}
h1 {
   color: #fff;
   margin: 0 0 35px;
}
h2, h3, h4, h5, h6, p, figcaption {
   color: #f6f4f2;
   margin: 0 0 15px;
}
h1 {
   font-weight: 300;
   font-size: 4em;
}
h2 {
   font-weight: 300;
   font-size: 1.5em;
}
h3 {
   font-weight: 300;
   font-size: 1.4em;
   line-height: 1.7em;
}
p {
   font-size: 1.1em;
   line-height: 1.45em;
}
p strong {
	font-weight: 700;
    color: #fff;
    font-size: 1.05em;
    letter-spacing: 0.7px;
}
/***** end of: TYPO *****/


/***** start of: MAIN MENU *****/
.main-menu {
   opacity: 0;
   
   transition: opacity 0.18s ease-out;
}
.main-menu-on {
   opacity: 1;
}
.main-menu-switch {
   position: fixed;
   z-index: 93;
   top: 16px;
   left: 16px;
   padding: 5px;
   box-sizing: border-box;
   cursor: pointer;
   -webkit-overflow-scrolling: touch;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -moz-tap-highlight-color: rgba(0,0,0,0);
   -ms-tap-highlight-color: rgba(0,0,0,0);
   tap-highlight-color: rgba(0,0,0,0);
}

.main-menu-sneak-switch {
   display: none;
}

.main-menu-overlay {
   position: fixed;
   z-index: 96;
   top:0;
   bottom: 0;
   left:0;
   right: 0;
   width: 100%;
   height: 100%;
   background: transparent;
   background: rgba(0,0,0,0);
   pointer-events: none;
   cursor: url('img/close-cursor.svg'), url('img/close-cursor.png'), pointer;

   -webkit-transition: background 0.28s ease-out;
   transition: background 0.28s ease-out;
}
.main-menu-overlay.overlay-active {
   background: rgba(0,0,0,0.84);
   pointer-events: all;
}
.main-menu-overlay-close {
   position:absolute;
   z-index: 98;
   top: 16px;
   left: 79%;
   padding: 5px;
   opacity: 0;
   pointer-events: none;
   cursor: pointer;
   
   -webkit-transform: translate3d(-250px,0,0);
   transform: translate3d(-250px,0,0);
   
   -webkit-transition: opacity 0.2s ease-out,
                     -webkit-transform 0.3s ease-out;
   transition: opacity 0.2s ease-out,
               transform 0.3s ease-out;
}
.main-menu-overlay.overlay-active .main-menu-overlay-close {
   opacity: 1;
   pointer-events:all;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   
   -webkit-transition: opacity 0.2s ease-out 0.11s,
                     -webkit-transform 0.38s cubic-bezier(.09,0,0,.99) 0.1s;
   transition: opacity 0.2s ease-out 0.11s,
                     transform 0.38s cubic-bezier(.09,0,0,.99) 0.1s;
}

.main-menu-wrapper {
   position: fixed;
   z-index: 99;
   top:0px;
   left:0px;
   width: 75%;
   height: 100%;
   background: #fff;
   pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
   
   /*-webkit-transition: -webkit-transform 0.17s cubic-bezier(.99,0,0,.09);*/
   /*transition: transform 0.17s cubic-bezier(.99,0,0,.09);*/
   -webkit-transition: -webkit-transform 0.17s ease-out;
   transition: transform 0.17s ease-out;
}
.main-menu-wrapper.menu-active {
   pointer-events: all;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   
   /*-webkit-transition: -webkit-transform 0.30s cubic-bezier(.09,0,0,.99) -0.05s;*/
   /*transition: transform 0.30s cubic-bezier(.09,0,0,.99) -0.05s;*/
   -webkit-transition: -webkit-transform 0.30s ease-out;
   transition: transform 0.30s ease-out;
}

.main-menu-me-wrapper {
   position: relative;
   box-sizing: border-box;
}
.main-menu-me {
   padding: 25px 25px 15px;
   background: #fff;
   
   color: #464442;
   font-size: 0.8em;
   
   width: 20px;
   
   text-align: left;
   font-size: 1.4em;
   line-height:0.9em;
   text-transform: uppercase;
   font-weight: 900;
   letter-spacing: 2.5px;
   color: #464442;
   opacity: 0.8;
}
.main-menu-me-fancy {
   font-family: Georgia, serif;
   font-style: italic;
}

.main-menu-list-wrapper {
   position: relative;
   box-sizing: border-box;
}
.main-menu-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
}
.main-menu-item {
   position:relative;
   padding: 12px 25px;
   background: #fff;
   cursor: pointer;
   
   font-kerning: normal;
   text-transform: uppercase;
   color: #464442;
   font-size: 0.8em;
   font-weight: 900;
   letter-spacing: 2px;
   
   transition: color 0.22s ease-out, background 0.08s ease-out;
}
.main-menu-item:hover {
   color: #262422;
   background: #e2e2e2;
}
.main-menu-item:active, .main-menu-item:focus {
   color: #262422;
}
.main-menu-item i {
   font-family: "Lato", lato, Roboto, Droid, Helvetica, Arial, sans-serif;
}
.main-menu-item-name {
   display: inline-block;
   
   -webkit-transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
}
.main-menu-link:active .main-menu-item-name,
.main-menu-link:focus .main-menu-item-name  {
   -webkit-transform: scale(.98);
   transform: scale(.98);

   -webkit-transition: -webkit-transform 0.04s ease-out;
   transition: transform 0.04s ease-out;
}
.main-menu-item span.menu-item-ampersand {
   display: none;
}
.main-menu-item .main-menu-item-rarr {
   display:none;
   position: absolute;
   top: 14px;
   left: 50px;
   font-size: 32px;
   color: #bbb;
   opacity: 0;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   
   -webkit-transition: opacity 0.4s ease-out,
               color 0.15s ease-out,
               -webkit-transform 0.6s cubic-bezier(.99,0,.19,.09);
   transition: opacity 0.4s ease-out,
               color 0.15s ease-out,
               transform 0.6s cubic-bezier(.99,0,.19,.09);
}
.main-menu-item:hover .main-menu-item-rarr,
.main-menu-item:focus .main-menu-item-rarr,
.main-menu-item:active .main-menu-item-rarr {
   opacity: 1;
   color: #262422;
   -webkit-transform: translate3d(200px,0,0);
   transform: translate3d(200px,0,0);
   
   -webkit-transition: opacity 0.15s ease-out 0.15s,
               color 0.15s ease-out 0.25s,
               -webkit-transform 0.6s cubic-bezier(.09,.79,0,.99);
   transition: opacity 0.15s ease-out 0.15s,
               color 0.15s ease-out 0.25s,
               transform 0.6s cubic-bezier(.09,.79,0,.99);
}
.main-menu-footer-wrapper {
   box-sizing: border-box;
   display:none;
}
.main-menu-footer {
   position: absolute;
   bottom: 0;
   padding: 15px 25px;
   background: #fff;
   
   font-size: 0.72em;
   color: #a6a4a2;
   /*text-transform: uppercase;*/
   letter-spacing:1px;
}

.main-menu-sneak {
   display: none;
}

.go-back-up {
   pointer-events: all;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   position: absolute;
   bottom: 12px;
   right: 45%;
   right: calc(50% - 24px);
   z-index: 93;
}
/***** end of: MAIN MENU *****/



/***** start of: LOGO *****/
.logo-section-mobile {
   position:fixed;
   z-index: 94;
   top: 16px;
   right: 16px;
   padding: 5px;
}

.logo-section {
   display: none;
   position:relative;
   margin-left: 20px;
}
.logo-section-logo {
   margin-bottom: 20px;
   
   -webkit-transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
}
.logo-section-logo:active,
.logo-section-logo:focus {
   -webkit-transform: scale(0.97);
   transform: scale(0.97);
   
   -webkit-transition: -webkit-transform 0.04s ease-out;
   transition: transform 0.04s ease-out;
}
.logo-section-logo-bg {
   color: #fff;
   font-size: 64px;
   width: 64px;
   background-color: #969492;
   background-size: cover;
   box-shadow: inset 0px 0px 0px 1px #fff;
   overflow: hidden;
   opacity:0.8;
   
   transition: background-color 1.4s ease-out,
               opacity 0.16s ease-out,
               color 0.16s ease-out,
               border-radius 0.0s ease-out 0.15s;
   -webkit-transition: background-color 1.4s ease-out,
               opacity 0.16s ease-out,
               color 0.16s ease-out,
               border-radius 0.0s ease-out 0.15s;
}
.logo-section-logo-circle {
   position:absolute;
   left: 0px;
   top: 0px;
   color: #fff;
   font-size: 64px;
   border-radius: 50%;
   overflow: hidden;
   opacity:0.0;
   box-shadow: inset 0px 0px 0px 4px #fff,
               0px 0px 0px 2px #fff;
   
   -webkit-transition: opacity 0.04s ease-out 0.2s;
   transition: opacity 0.04s ease-out 0.2s;
}
.logo-section-logo-icon {
   position:absolute;
   left: 16px;
   top: 16px;
   color: #fff;
   font-size: 32px;
   border-radius: 50%;
   overflow: hidden;
   opacity:0.0;
   
   -webkit-transform: scale3d(1.9, 1.9, 1.9);
   transform: scale3d(1.9, 1.9, 1.9);
   
   -webkit-transition: opacity 0.16s ease-out,
                     -webkit-transform 0.4s cubic-bezier(.09,.79,0,.99) 0.2s;
   transition: opacity 0.16s ease-out,
               transform 0.4s cubic-bezier(.09,.79,0,.99) 0.2s;
}
.this-is-index .logo-section-logo-icon {
   -webkit-transform: rotate3d(0, 0, 1, -620deg);
   transform: rotate3d(0, 0, 1, -620deg);
}
.logo-section-logo-name {
   position: absolute;
   top: 17px;
   margin-left: 84px;
   width: 20px;
   
   text-align: left;
   font-size: 1.2em;
   line-height:0.9em;
   text-transform: uppercase;
   font-weight: 900;
   letter-spacing: 2.5px;
   color: #262422;
   opacity: 0.8;
   
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   
   -webkit-transition: color 0.16s ease-out,
                     -webkit-transform 1.1s cubic-bezier(.09,.79,0,.99);
   transition: color 0.16s ease-out,
               transform 1.1s cubic-bezier(.09,.79,0,.99);
}
.logo-section-logo-name:after {
   content:"BACK HOME";
   position:absolute;
   left: 0;
   top: 0;
   
   opacity: 0;
   color: #262422;
   
   -webkit-transform: translate3d(-50px, 0, 0);
   transform: translate3d(-50px, 0, 0);
   
   -webkit-transition: opacity 0.16s ease-out, -webkit-transform 1.1s cubic-bezier(.09,.79,0,.99);
   transition: opacity 0.16s ease-out, transform 1.1s cubic-bezier(.09,.79,0,.99);
}
.this-is-index .logo-section-logo-name:after {
   content: "RELOAD HOME";
}
.this-is-index .logo-section-logo:hover .logo-section-logo-bg {
	background: #262422;
}
.logo-section-logo:hover .logo-section-logo-bg {
   color: rgba(255,255,255,0);
   border-radius: 50%;
   opacity: 1;
   
   -webkit-transition: background-color 1.4s ease-out,
                     opacity 0.16s ease-out,
                     color 0.16s ease-out,
                     border-radius 0.0s ease-out;
   transition: background-color 1.4s ease-out,
               opacity 0.16s ease-out,
               color 0.16s ease-out,
               border-radius 0.0s ease-out;
}
.logo-section-logo:hover .logo-section-logo-icon {
   opacity:1;
   
   -webkit-transform: scale3d(1,1,1);
   transform: scale3d(1,1,1);
   
   -webkit-transition: opacity 0.16s ease-out,
                     -webkit-transform 2.6s cubic-bezier(.09,.79,0,.99);
   transition: opacity 0.16s ease-out,
               transform 2.6s cubic-bezier(.09,.79,0,.99);
}
.logo-section-logo:hover .logo-section-logo-name {
   color: #fff;
   -webkit-transform: translate3d(25px,0,0);
   transform: translate3d(25px,0,0);
}
.logo-section-logo:hover .logo-section-logo-name:after {
   opacity:1;
   color: #262422;
   -webkit-transform: translate3d(-25px, 0, 0);
   transform: translate3d(-25px, 0, 0);
   
   -webkit-transition: opacity 0.22s ease-out 0.04s,
                     -webkit-transform 1.1s cubic-bezier(.09,.79,0,.99);
   transition: opacity 0.22s ease-out 0.04s,
               transform 1.1s cubic-bezier(.09,.79,0,.99);
}
.logo-section-logo:hover .logo-section-logo-circle {
   opacity:1;
   
   -webkit-transition: opacity 0.04s ease-out;
   transition: opacity 0.04s ease-out;
}
/***** end of: LOGO *****/



/***** start of: CONTENT *****/
.content {
   transition: -webkit-filter 0.5s ease-out;
}
.content-grayscale {
   -webkit-filter: grayscale(100%);
}


/***** start of: COLUMNS *****/
.column {
   width: 80%;
   clear: both;
   margin: 0 auto;
   display: inherit;
   overflow:visible;
   text-align: left;
}
.section {
   width: 100%;
   display: inherit;
   margin: 0 auto 40px;
}
.section:last-child {
   margin-bottom: 10px;
}
.one-column {
   width: 100%;
   float: left;
   margin-bottom: 15px;
}
.two-columns {
   width: 100%;
   float: left;
   margin-bottom: 15px;
}
.three-columns {
   width: 100%;
   float: left;
   margin-bottom: 15px;
}
.two-third-columns {
   width: 100%;
   display: inline;
   float: left;
   margin-bottom: 15px;
}
.four-columns {
   width: 50%;
   display: inline;
   float: left;
   margin-bottom: 35px;
}
.left-column {
   margin-right: 0px;
}
/***** end of: COLUMNS *****/
/***** start of: COVERS *****/
.project-cover {
   width:100%;
   height: 66%;
   display: table;
}
.project-info-a {
   display: table-cell;
   vertical-align: middle;
   text-decoration: none;
   transition: transform 0.2s ease-out;
}
.project-info-a:hover,
.project-info-a:focus {
   -webkit-transform: scale(1.05);
   transform: scale(1.05);
   
   -webkit-transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
}
.project-info-a:active {
   -webkit-transform: scale(.98);
   transform: scale(.98);
   
   -webkit-transition: -webkit-transform 0.04s ease-out;
   transition: transform 0.04s ease-out;
}
.project-info {
   width: 85%;
   height: 260px;
   min-height: 260px;
   margin: -10px auto 0;
   display: table;
   box-sizing: border-box;

   text-align: center;
}
.project-info-text {
   display: table-cell;
   vertical-align: middle;
}
.project-info-type {
   margin: 10px 0 5px;
   padding: 0;
   
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: #fff;
   font-weight: 900;
   font-size: 0.7em;
}
.project-info-name {
   margin: 0;
   padding: 0;

   text-align: center;
   color: #fff;
   font-weight: 300;
   font-size: 2.4em;
   line-height: 1.1em;
}
.welcome-message {
   width:100%;
   padding: 90px 0 30px;
   box-sizing: border-box;
   display: table;
   background: #161412;
   
   text-align: center;
}
.welcome-message-name {
   margin: 0 0 2px 0;
   padding: 0;
   
   color: #eee;
   text-align:center;
   font-weight: normal;
   font-size: 0.9em;
   line-height: 1.1em;
}
.welcome-message-title {
   margin: 0 0 20px 0;
   padding: 0;
   
   color: #fff;
   text-align:center;
   font-weight: normal;
   font-size: 3.7em;
   line-height: 1.2em;
   font-weight: 100;
}
.welcome-message-copy {
   text-align: left;
   color: #eee;
   font-size: 1em;
   line-height: 1.25em;
}
.contact-message {
   width:100%;
   padding: 60px 0 60px;
   box-sizing: border-box;
   display: table;
   background: #000;
   
   text-align: center;
}
.contact-message-name {
   margin: 0 0 2px 0;
   padding: 0;
   
   color: #eee;
   text-align:center;
   font-weight: normal;
   font-size: 0.9em;
   line-height: 1.1em;
}
.contact-message-title {
   margin: 0 0 20px 0;
   padding: 0;
   
   color: #fff;
   text-align:center;
   font-weight: normal;
   font-size: 1.6em;
   line-height: 1.2em;
   font-weight: 300;
}
.all-my-exes-live-in-texas {
   width:100%;
   padding: 90px 0 30px;
   box-sizing: border-box;
   display: table;
   background: #1d1a18;
   
   text-align: center;
}
.all-my-exes-live-in-texas h3 {
   width:100%;
   box-sizing: border-box;
	color: #fff;
}
.all-my-exes-live-in-texas .company-logo {
   height: 60px;
}
.exes {
	text-align: center;
}
.projects-intro {
   width:100%;
   padding: 90px 0 30px;
   box-sizing: border-box;
   display: table;
   background: #262422;
   
   text-align: center;
}
.projects-intro h3 {
	color: #ddd;
}
/***** end of: COVERS *****/

/**********

start of: PROJECTS

**********/
.project-title {
   width: 85%;
   height: 260px;
   min-height: 260px;
   margin: 0 auto;
   display: table;
   box-sizing: border-box;

   text-align: center;
}
.project-high-cover .project-title {
   min-height: 400px;
}
.project-title .project-info-type {
   opacity: 1;
}
.project-controls {
   display: none;
}
.project-content {
   width:100%;
   padding: 50px 0;
   box-sizing: border-box;
   display: inline-block;

   text-align: center;
   
   transition: padding 0.8s cubic-bezier(.09,0,0,.99);;
}
.project-img {
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   margin: 40px 0;
}

.break {
   width: 100%;
   margin-bottom: -10px;
   padding: 80px 0;
   box-sizing:border-box;
   display:inline-block;
   background: #262422;
   
   text-align: center;
   
   transition: padding 0.8s cubic-bezier(.09,0,0,.99);
}
.break.removed {
   display: none;
}
.break .share-section {
   text-align: center;
}
.white-ui .break .share-section .ui-icon {
   background: none;
   width: 48px;
   margin: 0 auto;
}
.see-also-cover .project-info-text {
   margin: 0 auto;
}
/**********

end of: PROJECTS

**********/

/**********

start of: CONTACT

**********/
.contact-form {
   margin-bottom: 50px;
}
.contact-form-label {
   text-align: left;
   position: absolute;
   z-index: 3;
   padding: 20px 0 0 49px;
   left: 0;
   color: #a6a4a2;
   letter-spacing: 1px;
   pointer-events: none;
   
   transition: font-size 0.12s ease-out, padding 0.12s ease-out;
}
.label-active {
   padding: 7px 0 0 52px;
   font-size: 0.6em;
   color: #bcbcba;
}
.contact-form-input {
   display: block;
   position: relative;
   width: 100%;
   max-width: 100%;
   padding: 20px 24px 20px 54px;
   margin: 0 0 8px;
   border: none;
   border-radius:3px;
   box-sizing: border-box;
   
   font-size: 1em;
   color: #282726;
   font-family: "Lato", lato, Roboto, Droid, Helvetica, Arial, sans-serif;
}
.contact-form-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 100%;
   padding: 18px 16px;
   margin: 0 0 5px;
   background: #1b76dc;
   border: none;
   border-radius:3px;
   box-sizing: border-box;
   cursor:pointer;
   
   font-size: 0.9em;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #fff;
   
   transition: background 0.14s ease-out;
}
.contact-form-button:hover, .contact-form-button:focus, .contact-form-button:active {
   background: #1D5DA5;
}
.input-name, .input-email, .input-message {
   position: relative;
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga";
	font-feature-settings: "liga";
}
.input-name:after, .input-email:after, .input-message:after {
   position: absolute;
   z-index: 3;
   left: 10px;
   top: 12px;
  
   font-size: 40px;
   color: #aaa;
	font-family: 'folio-ico' !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	transition: color 0.4s ease-out;
}
.input-name:hover:after, .input-email:hover:after, .input-message:hover:after {
   color: #282726;
}
.input-name:after {
   content: "user";
}
.input-email:after {
   content: "mail";
}
.input-message:after {
   content: "message";
}

.invalid-input:after, .invalid-input:hover:after {
	color: #f00;
}
.invalid-input .contact-form-input {
	background: #fdd;
	border-bottom: 3px solid #f00;
}
.invalid-input .contact-form-label {
	color: #282726;
}
.invalid-input .label-active {
	color: #282726;
}
.download-button {
   width: 100%;
   padding: 18px 16px;
   margin: 0 0 5px;
   background: #1b76dc;
   border: none;
   border-radius:3px;
   box-sizing: border-box;
   cursor: pointer;
   outline: none;
   
   font-size: 0.9em;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #fff;
   
   transition: background 0.14s ease-out;
}
.download-button:hover, .download-button:focus, .download-button:active {
   background: #1D5DA5;
}
.company-logo {
   height: 60px;
   margin: 0 15px 15px 15px;
   opacity: 0.7;
   
   -webkit-transition: opacity 0.7s ease-out, -webkit-transform 0.27s ease-out, fill 1.2s ease-out;
   transition: opacity 0.7s ease-out, transform 0.27s ease-out, fill 20s ease-out;
}
.company-logo:hover {
   opacity: 1;
   -webkit-transform: scale3d(1.1,1.1,1.1);
   transform: scale3d(\\-9.1,1.1,1.1);
}
.contact-quote {
	padding: 0 30px;
   font-size: 1.2em;
   font-style: italic;
   font-weight: 300;
   text-align: left;
   color: #4c4b4a;
}
.contact-quote-author {
   font-size: 0.9em;
   text-align: center;
   color: #6c6b6a;
}
.list-of-links {
   padding: 0;
   margin: 0;
   list-style: none;
   text-align: left;
   font-size: 1.2em;
   line-height: 2em;
}
/**********

end of: CONTACT

**********/

/***** end of: CONTENT *****/


/**********

start of: DEVICE/OS SPECIFIC CHANGES

**********/
.isWindowsPhone .go-back-up {
   display: none;
}
/**********

end of: DEVICE/OS SPECIFIC CHANGES

**********/


/**********

start of: MEDIA QUERIES

**********/

/*****
start of: VERTICAL MEDIA QUERIES
*****/
@media screen and (max-height: 400px) {
.main-menu-item .main-menu-item-rarr {
   display:none !important;
}
}
@media screen and (min-height: 330px) {
.main-menu-item {
   padding: 20px 25px;
}
.project-info {
   min-height: 317px;
}
.project-title {
   min-height: 237px;
}
}
@media screen and (min-height: 400px) {
.main-menu-footer-wrapper {
   display:block;
}
.project-info {
   min-height: 384px;
}
.project-title {
   min-height: 288px;
}
}
@media screen and (min-height: 500px) {
.project-info {
   min-height: 480px;
   min-height: 360px;
}
.project-title {
   min-height: 360px;
}
.welcome-message-copy {
   line-height: 1.7em;
}
}
@media screen and (min-height: 600px) {
.main-menu-item {
   padding: 25px 25px;
}
.main-menu-item .main-menu-item-rarr {
   top: 19px;
}
.project-info {
   min-height: 576px;
   min-height: 432px;
}
.project-title {
   min-height: 432px;
}
}
@media screen and (min-height: 700px) {
.project-info {
   min-height: 672px;
   min-height: 504px;
}
.project-title {
   min-height: 504px;
}
}
@media screen and (min-height: 800px) {
.project-info {
   min-height: 768px;
   min-height: 576px;
}
.project-title {
   min-height: 576px;
}
}
@media screen and (min-height: 900px) {
.project-info {
   min-height: 864px;
   min-height: 648px;
}

.project-title {
   min-height: 648px;
}
}
@media screen and (min-height: 1000px) {
.project-info {
   min-height: 960px;
   min-height: 720px;
}
.project-title {
   min-height: 720px;
}
.project-content {
   padding: 80px 0 100px;
}
}
@media screen and (min-height: 1190px) {
.project-info {
   min-height: 1142px;
   min-height: 856px;
}

.project-title {
   min-height: 856px;
}
}
/*****
end of: VERTICAL MEDIA QUERIES
*****/
@media screen and (min-width: 450px) {
.main-menu-overlay-close {
   top: 5vw;
   left: 64%;
}
.main-menu-switch {
   top: 5vw;
   left: 5vw;
}
.logo-section-mobile {
   top: 5vw;
   right: 5vw;
}
.main-menu-wrapper {
   width: 60%;
}
}
@media screen and (min-width: 550px) {
.not-for-mobile {
   display:block;
}
.text-with-icon {
   margin-left: 56px;
}
.welcome-message {
   padding: 100px 0 50px;
}
.welcome-message-name {
   font-size: 1.3em;
}
.welcome-message-title {
   font-size: 4em;
   margin-bottom: 30px;
}
.welcome-message-copy {
   font-size: 1.15em;
    letter-spacing: 0.4px;
    color: #f0f2f4;
}
.contact-message {
   padding: 60px 0 80px;
}
.contact-message-name {
   font-size: 1.3em;
}
.contact-message-title {
   font-size: 2em;
   margin-bottom: 30px;
}
.all-my-exes-live-in-texas {
   padding: 100px 0 50px;
}
.projects-intro {
   padding: 100px 0 50px;
}
}
@media screen and (min-width: 740px) {
h1 {
   font-size: 2.4em;
}
h2 {
   font-size: 1.8em;
}

.ui-icon:after {
   content: "";
   position:absolute;
   left: -30px;
   top: -30px;
   right: -30px;
   bottom: -30px;
   border: 20px solid #eee;
   border-radius: 50%;
   
   opacity:0;
   -webkit-transform: scale(0.4);
   transform: scale(0.4);
}
.ui-icon.blipping:after {
  -webkit-animation: blip 0.6s 1 -0.15s;
  animation: blip 0.6s 1 -0.15s;
}
@-webkit-keyframes blip {
  0%   { opacity: 0.0; -webkit-transform: scale(0.4); border-width: 20px;}
  20% { opacity: 1; -webkit-transform: scale(0.5); border-width: 20px;}
  100% { opacity: 0; -webkit-transform: scale(2); border-width: 0px;}
}
@keyframes blip {
  0%   { opacity: 0.0; transform: scale(0.4); border-width: 20px;}
  20% { opacity: 1; transform: scale(0.5); border-width: 20px;}
  100% { opacity: 0; transform: scale(2); border-width: 0px;}
}

.main-menu-me-wrapper {
   display: none;
}
.logo-section {
   display: block;
}
.main-menu-wrapper {
   padding-top: 25px;
}
.main-menu-wrapper {
   -webkit-transition: -webkit-transform 0.17s cubic-bezier(.99,0,0,.09);
   transition: transform 0.17s cubic-bezier(.99,0,0,.09);
}
.main-menu-wrapper.menu-active {
   -webkit-transition: -webkit-transform 0.30s cubic-bezier(.09,0,0,.99);
   transition: transform 0.30s cubic-bezier(.09,0,0,.99);
}
.main-menu-list .main-menu-link {
   -webkit-transform: translate3d(-150px,0,0);
   transform: translate3d(-150px,0,0);
   
   -webkit-transition: -webkit-transform 0.65s cubic-bezier(.09,0,0,.99);
   transition: transform 0.65s cubic-bezier(.09,0,0,.99);
}
.main-menu-list .main-menu-link:nth-child(1) {
   transition-delay: -0.1s;
}
.main-menu-list .main-menu-link:nth-child(2) {
   transition-delay: -0.05s;
}
.main-menu-list .main-menu-link:nth-child(3) {
   transition-delay: 0.0s;
}
.main-menu-list .main-menu-link:nth-child(4) {
   transition-delay: 0.05s;
}
.menu-active .main-menu-list .main-menu-link {
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   display:block;
}
.main-menu-item i {
   display: none;
}
.main-menu-item span.menu-item-ampersand {
   display: inline;
	font-size: 18px;
	position: relative;
	height: 0.75em;
	line-height: 0.75em;
	top: 3px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.main-menu-wrapper {
   width: 40%;
}
.main-menu-footer {
   bottom: 30px;
}
.main-menu-overlay-close {
   top: 26px;
   left: 44%;
}
.project-info-name {
   font-size: 3em;
}
/***** start of: COLUMNS *****/
.column {
   width: 640px;
}
.section {
   margin: 0 auto 50px;
   display: inline-block;
}
.one-column {
   width: 640px;
}
.two-columns {
   width: 300px;
}
.three-columns {
   width: 193px;
}
.two-third-columns {
   width: 387px;
}
.four-columns {
   width: 140px;
}
.left-column {
   margin-right: 40px;
}
.two-columns.desktop-right-column {
   float: right;
   margin-right: 0;
}
.two-columns.desktop-left-column {
   float: left;
}
/***** end of: COLUMNS *****/
.two-columns .project-img {
   margin-top: -20px;
}
}
@media screen and (min-width: 900px) {
.main-menu-wrapper {
   width: 30%;
}
.main-menu-overlay-close {
   left: 34%;
}
.project-info-name {
   font-size: 3.4em;
}
}
@media screen and (min-width: 1040px) {
h1 {
   font-size: 2.6em;
}
h2 {
   font-size: 1.8em;
}
hr {
   width: 100000%;
   margin-left: -1000%;
}
.main-menu-switch {
   display: none;
}
.logo-section-mobile {
   display: none;
}
.main-menu-wrapper {
   width: 300px;
   height: 100%;
   padding-top: 25px;
   background: #fff;
   pointer-events: all;
   -webkit-transform: translate3d(-300px, 0, 0);
   transform: translate3d(-300px, 0, 0);
   
   -webkit-transition: -webkit-transform 0.7s cubic-bezier(.09,0,0,.99);
   transition: transform 0.7s cubic-bezier(.09,0,0,.99);
}
.main-menu-item {
   transition: color 0.22s ease-out, background 0.22s ease-out;
}
.main-menu-item:hover,
.main-menu-item:focus {
   background: #f2f2f2;
}
.main-menu-item .main-menu-item-rarr {
   display:block;
}
.main-menu-overlay-close {
   left: 315px;
}
.main-menu-sneak {
   display: block;
   position: fixed;
   z-index: 91;
   top:0px;
   left:0px;
   width: 140px;
   height: 100%;
   background: #fff;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.sneak-menu, .sneak-logo {
   position: fixed;
   z-index: 95;
   top: 36px;
   left: 36px;
   padding: 5px;
   box-sizing: border-box;
   cursor: pointer;
   background: none;
   -webkit-overflow-scrolling: touch;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -moz-tap-highlight-color: rgba(0,0,0,0);
   -ms-tap-highlight-color: rgba(0,0,0,0);
   tap-highlight-color: rgba(0,0,0,0);
   
   color: #262422;
   text-shadow: none;
}
.white-ui .sneak-menu, .white-ui .sneak-logo {
   color: #262422;
   background: none !important;
   text-shadow: none !important;
}
.sneak-menu:hover, .sneak-logo:hover {
   color: #262422;
}
.sneak-logo {
   top: auto;
   bottom: 46px;
   left: 46px;
   font-size: 32px;
}


.project-info {
   padding-left: 240px;
   width: 620px;
   margin: -10px 0 0;

   text-align: left;
}
.welcome-message {
   padding-top: 80px;
   padding-left: 220px;
   background-attachment: fixed !important;

   text-align: left;
}
.welcome-message-name {
   text-align: left;
   font-size: 1.1em;
}
.welcome-message-title {
   text-align:left;
   font-size: 4.6em;
   margin-bottom: 100px;
}
.contact-message {
   padding-left: 220px;

   text-align: left;
}
.contact-message-name {
   text-align: left;
   font-size: 1.1em;
}
.contact-message-title {
   text-align: left;
   font-size: 2.1em;
   font-weight: 300;
}
.all-my-exes-live-in-texas {
	padding-left: 220px;
}

.exes {
	text-align: left;
}
.company-logo {
   margin: 0 30px 15px 0;
}

.projects-intro {
	padding-left: 220px;
	text-align: left;
}
.project-info-type {
   text-align: left;
   width:620px;
   
   transition: transform 1.1s cubic-bezier(.09,0,0,.99);
}

.project-info-a:hover,
.project-info-a:focus {
   -webkit-transform: scale(1);
   transform: scale(1);
   
   -webkit-transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
}
.project-info-a:active {
   -webkit-transform: scale(.97);
   transform: scale(.97);
   
   -webkit-transition: -webkit-transform 0.02s ease-out;
   transition: transform 0.02s ease-out;
}
.project-info-a:hover .project-info-type,
.project-info-a:focus .project-info-type {
   -webkit-transform: translate3d(30px,0,0);
   transform: translate3d(30px,0,0);
   
   -webkit-transition: -webkit-transform 0.85s cubic-bezier(.09,0,0,.99) 0.15s;
   transition: transform 0.85s cubic-bezier(.09,0,0,.99) 0.15s;
}
.project-info-name {
   position: relative;
   font-size: 3.4em;
   text-align: left;
   margin-left: -2px;
   width:620px;
   
   transition: all 0.5s cubic-bezier(.09,0,0,.99);
}
.project-info-a:hover .project-info-name,
.project-info-a:focus .project-info-name {
   -webkit-transform: translate3d(30px,0,0);
   transform: translate3d(30px,0,0);
   
   -webkit-transition: -webkit-transform 0.55s cubic-bezier(.09,0,0,.99) 0.15s;
   transition: transform 0.55s cubic-bezier(.09,0,0,.99) 0.15s;
}
.project-info-name:after {
   content:"rarr";
   position: absolute;
   margin-top: 7px;

   opacity: 0;
   
   font-size: 48px;
   color: #fff;
   
	font-family: 'folio-ico' !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
   
   -webkit-transition: opacity 0.4s ease-out,
               -webkit-transform 0.9s cubic-bezier(.09,0,0,.99);
   transition: opacity 0.4s ease-out,
               transform 0.9s cubic-bezier(.09,0,0,.99);
}
.project-info-a:focus .project-info-name:after,
.project-info-a:hover .project-info-name:after {
   opacity: 1;
   -webkit-transform: translate3d(25px,0,0);
   transform: translate3d(25px,0,0);
   
   -webkit-transition: opacity 0.15s ease-out 0.1s,
               -webkit-transform 2.6s cubic-bezier(.09,.79,0,.99);
   transition: opacity 0.15s ease-out 0.1s,
               transform 2.6s cubic-bezier(.09,.79,0,.99);
}
.column {
   float: left;
   margin-left: 30px;
}
.project-title {
   padding-left: 230px;
   margin: 0 0 0 50px;

   text-align: left;
}
.project-controls {
   display: block;
   position: absolute;
   top: 48px;
   left: 280px;
   width: 600px;
}
.project-control {
   text-decoration: none;
   color: #fff;
   font-size: 0.8em;
   letter-spacing: 2px;
   font-weight:900;
}
.previous-project-control {
   float: left;
}
.next-project-control {
   float: right;
}
.project-content {
   padding-left: 240px;

   text-align: left;
}
.break {
   padding-left: 245px;
}
.go-back-up {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 91;
   opacity: 0;
   -webkit-transform: translate3d(0, 30px, 0);
   transform: translate3d(0, 30px, 0);
   
   -webkit-transition: opacity 0.2s ease-out,
               -webkit-transform 1.2s cubic-bezier(.09,0,0,.99);
   transition: opacity 0.2s ease-out,
               transform 1.2s cubic-bezier(.09,0,0,.99);
}
.go-back-up-visible {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
}
@media screen and (min-width: 1200px) {
.disabled-scroll {
   max-height: auto;
   overflow: auto;
}
.content-grayscale {
   -webkit-filter: grayscale(0%);
}
.main-menu-overlay {
   display: none;
}
.main-menu-overlay-close {
   display: none;
}
.main-menu-wrapper {
   width: 300px;
   height: 100%;
   padding-top: 25px;
   background: #fff;
   pointer-events: all;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   
   -webkit-transition: -webkit-transform 0.7s cubic-bezier(.09,0,0,.99);
   transition: transform 0.7s cubic-bezier(.09,0,0,.99);
}
.project-info {
   padding-left: 380px;
   width: 620px;
   margin: -10px 0 0;

   text-align: left;
}
.welcome-message {
   padding-top: 80px;
   padding-left: 350px;

   text-align: left;
}
.welcome-message-name {
   text-align: left;
   font-size: 1.2em;
}
.welcome-message-title {
   text-align: left;
   font-size: 5.4em;
   
}
.contact-message {
   padding-left: 350px;

   text-align: left;
}
.contact-message-name {
   text-align: left;
   font-size: 1.2em;
}
.contact-message-title {
   text-align: left;
   font-size: 2.3em;
   font-weight: 300;
}

.all-my-exes-live-in-texas {
	   padding-left: 350px;
}
.projects-intro {
	padding-left: 350px;
}
.project-info-type {
   text-align: left;
   width:620px;
   
   transition: all 1.1s cubic-bezier(.09,0,0,.99);
}
.see-also-cover {
   background-attachment: fixed !important;
}
.project-title {
   padding-left: 330px;
   margin: 0 0 0 50px;

   text-align: left;
}
.project-controls {
   left: 380px;
   width: 620px;
}
.project-content {
   padding-left: 345px;

   text-align: left;
}
.break {
   padding-left: 345px;
}
}
@media screen and (min-width: 1300px) {
.project-controls {
   left: 395px;
}
.project-title {
   padding-left: 345px;
}
.project-content {
   padding-left: 360px;
}
.project-info {
  padding-left: 440px;
}
.welcome-message {
  padding-left: 400px;
  padding-top: 100px;
}
.contact-message {
  padding-left: 400px;
}

.all-my-exes-live-in-texas {
	padding-left: 400px;
}

.projects-intro {
	padding-left: 400px;
}
}
@media screen and (min-width: 1500px) {
.column.wide-column {
   width: 900px;
}
.wide-column .one-column {
   width: 900px;
}
.wide-column .two-columns {
   width: 430px;
}
.wide-column h1,
.wide-column h2,
.wide-column h3,
.wide-column h4,
.wide-column h5,
.wide-column p,
.wide-column figcaption {
   width: 75%;
}
.wide-column .two-columns h1,
.wide-column .two-columns h2,
.wide-column .two-columns h3,
.wide-column .two-columns h4,
.wide-column .two-columns h5,
.wide-column .two-columns p,
.wide-column .two-columns figcaption {
   width: 100%;
}
}
@media screen and (min-width: 1800px) {
.column.wide-column {
   width: 1200px;
}
.wide-column .one-column {
   width: 1200px;
}
.wide-column .two-columns {
   width: 580px;
}
.wide-column h1,
.wide-column h2,
.wide-column h3,
.wide-column h4,
.wide-column h5,
.wide-column p,
.wide-column figcaption {
   width: 60%;
}
.wide-column .two-columns h1,
.wide-column .two-columns h2,
.wide-column .two-columns h3,
.wide-column .two-columns h4,
.wide-column .two-columns h5,
.wide-column .two-columns p,
.wide-column .two-columns figcaption {
   width: 100%;
}
}
/**********

end of: MEDIA QUERIES

**********/

::selection {
   background: #262424;
   color: #fff;
}
::-moz-selection {
   background: #262424;
   color: #fff;
}