/* ============================== */ /* ! Layout for desktop version */ /* ============================== */ /*global styles*/ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f5f5f5; overflow-y: scroll; padding-bottom: 50px; } .clear { clear: both; } h1, h2, .number-block span.sup { font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; font-style: italic; } h1 { font-size: 24px; margin: 0 0 30px 0; line-height: 1.3; } p { font-size: 11px; line-height: 1.5; color: #404040; margin: 0 0 30px 0; } .fright { float: right; } .fleft { float: left; } #intro h1, #intro p { padding: 0 0 0 6px; } /*main navigation*/ #nav-contain { width: 100%; z-index:100; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; position: relative; } #nav-contain.project-view { margin-top: -50px; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #nav-contain.projec-view.fixed { position: fixed; top: 0; } #nav-contain.project-view.expand { margin-top: 0; width: 100%; z-index:100; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #navigation { background-color: #000; padding: 10px 0 0 0; position: relative; overflow: hidden; } #navigation a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; } #navigation a:hover { text-decoration: underline; } #navigation .home-link a { font-size: 18px; } #navigation #home-link { font-size: 18px; } #navigation select { display: none; } #links { float: right; text-align: right; width: 45%; } #navigation ul { display: block; } #navigation ul li { display: inline; list-style-type: none; margin-right: 9.8%; } #navigation ul li.social { text-indent: -9999px; text-align: left; margin-right: 0; } #navigation ul li span { display: inline-block; background: url(../img/social-micro-sprite.gif) no-repeat 0 -2px; width: 17px; height: 14px; } #navigation ul li span.twitter { background-position: 0 -2px; } #navigation ul li span.dribbble { background-position: -18px -2px; } #navigation ul li span.twitter:hover { background-position: 0 -23px; } #navigation ul li span.dribbble:hover { background-position: -18px -23px; } #navigation select { display: none; } .arrow { font-size: 16px; color: #fff; font-weight: bold; text-align: center; padding: 4px; height: 0px; transition-property: height; transition-duration: .15s; transition-timing-function: ease-out; /* Firefox 4 */ -moz-transition-property:height, padding; -moz-transition-duration: .15s; -moz-transition-timing-function:ease-out; /* Safari and Chrome */ -webkit-transition-property:height, padding; -webkit-transition-duration: .15s; -webkit-transition-timing-function:ease-out; /* Opera */ -o-transition-property:height, padding; -o-transition-duration: .15s; -o-transition-timing-function:ease-out; } .arrow span, .project-view .arrow span { display: block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .project-view .arrow { padding: 15px 0 0 0; height: 20px; transition-property: height, padding; transition-duration: .15s; transition-timing-function: ease-out; /* Firefox 4 */ -moz-transition-property:height, padding; -moz-transition-duration: .15s; -moz-transition-timing-function:ease-out; /* Safari and Chrome */ -webkit-transition-property:height, padding; -webkit-transition-duration: .15s; -webkit-transition-timing-function:ease-out; /* Opera */ -o-transition-property:height; -o-transition-duration:.15s; -o-transition-timing-function:ease-out; } .project-view .arrow.expand { padding: 15px 0 0 0; height: 20px; transition-property: height, padding; transition-duration: .15s; transition-timing-function: ease-out; /* Firefox 4 */ -moz-transition-property:height, padding; -moz-transition-duration: .15s; -moz-transition-timing-function:ease-out; /* Safari and Chrome */ -webkit-transition-property:height, padding; -webkit-transition-duration: .15s; -webkit-transition-timing-function:ease-out; /* Opera */ -o-transition-property:height; -o-transition-duration:.15s; -o-transition-timing-function:ease-out; } .project-view .arrow.subtract { padding: 4px; height: 0px; transition-property: height, padding; transition-duration: .15s; transition-timing-function: ease-out; /* Firefox 4 */ -moz-transition-property:height, padding; -moz-transition-duration: .15s; -moz-transition-timing-function:ease-out; /* Safari and Chrome */ -webkit-transition-property:height, padding; -webkit-transition-duration: .15s; -webkit-transition-timing-function:ease-out; /* Opera */ -o-transition-property:height; -o-transition-duration:.15s; -o-transition-timing-function:ease-out; } /*sub navigation*/ .sub-nav { opacity: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; font-style: italic; font-weight: bold; color: #000; text-decoration: none; } .sub-nav span { font-size: 24px; } .project-view .sub-nav { opacity: 1; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #work{ margin-left: auto; opacity: 1; -webkit-transition: margin-left 1s ease-in-out; } /*project navigation*/ #project-navigation { border-bottom: 1px solid #e2e2e2; margin-bottom: 50px; background: #fff; } #project-navigation .container { overflow: hidden; } #project-navigation .row { height: 63px; padding: 34px 0 0 0; position: relative; } #logo { position: absolute; top: 10px; left: 3.5087719298245614035087719298246% /* 40px / 1140px */; opacity: 1; width: 77px; height: 77px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #logo span { position: absolute; display: block; } #logo #static { background: url('../img/ls-logo.svg') no-repeat; width: 100%; height: 100%; } #logo #loader { } .project-view #project-navigation #logo { left: 50%; margin-left: -37.5px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #nav-contain.project-view { position: fixed; top: 0; } #back-home { float: left; } #next-project { float: right; } /*project thumb styles*/ .project-wide, .project { float: left; height: 355px; position: relative; cursor: pointer; overflow: hidden; color: #fff; text-decoration: none; } .project-wide { width: 64.958283671036948748510131108462%; /*545px / 839px*/ float: left; -webkit-transition: all .10s ease-in-out; transition: all .10s ease-in-out; } .project { width: 35.041716328963051251489868891538%; /*294px / 839px*/ float: left; -webkit-transition: all .10s ease-in-out; transition: all .10s ease-in-out;} /*project .darken normal state*/ .project-wide .darken, .project .darken { background-color: rgba(0,0,0,.0); display: block; width:100%; height: 100%; -moz-box-shadow: inset 0px 0px 0px 0px; -webkit-box-shadow: inset 0px 0px 0px 0px; box-shadow: inset 0px 0px 0px 0px; -webkit-transition: all .10s ease-in-out; transition: all .10s ease-in-out; } /*project .darken hover state*/ .project-wide:hover .darken, .project:hover .darken { background-color: rgba(0,0,0,.8); -moz-box-shadow: inset 0px 0px 0px 15px;-webkit-box-shadow: inset 0px 0px 0px 15px; box-shadow: inset 0px 0px 0px 15px; } /*project normal state*/ .number-block { width: 150px; height: 150px; background-color: black; color: white; position: absolute; display: block; left: -150px; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out;} .number-block .number { font-weight: bold; font-size: 30px; position: absolute; bottom: 10px; right: 10px; } .number-block span.sup{ font-weight: normal; font-size: 12px; position: absolute; top: 5px; right: 35px; } .project-wide .description, .project .description { font-weight: normal; color: #fff; font-size: 24px; position: absolute; bottom: 20px; right: 20px; text-align: right; opacity: 0; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .project-wide .description span, .project .description span { font-size: 11px; display: block; font-family: font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out;} .project-wide:hover .description, .project:hover .description { opacity: 1; } .project-wide:hover .description span, .project:hover .description span { opacity: 1; } /*project hover state*/ .project-wide:hover .number-block, .project:hover .number-block { left: 0; } /*project thumb customization */ #traditiona { background: url(../img/traditiona-thumb.jpg) no-repeat; background-size: cover; } #traditiona .darken { color: #5f5f5f; } #traditiona .number-block { background-color: #5f5f5f; } #sedmak-wedding { background: url(../img/sedmakwedding-thumb.jpg) no-repeat; background-size: cover; } #sedmak-wedding .darken { color: #8ce7d0; } #sedmak-wedding .number-block { background-color: #8ce7d0; } #cloak-dagger { background: url(../img/cloakdagger-thumb.jpg) no-repeat; background-size: cover; } #cloak-dagger .darken{ color: #aea77d; } #cloak-dagger .number-block{ background-color: #aea77d; } #i-wireless { background: url(../img/i-wireless-thumb-small.jpg) no-repeat; background-size: cover; } #i-wireless .darken{ color: #bec200; } #i-wireless .number-block{ background-color: #bec200; } #cincinnati-bell { background: url(../img/cb-thumb.jpg) no-repeat; background-size: cover; } #cincinnati-bell .darken{ color: #00c0ff; } #cincinnati-bell .number-block{ background-color: #00c0ff; } #sitbow { background: url(../img/sitbow-thumb.jpg) no-repeat; background-size: cover; } #sitbow .darken { color: #ff6000;} #sitbow .number-block { background-color: #ff6000;} #project-8451 { background: url(../img/8451-thumb.jpg) no-repeat; background-size: cover; } #project-8451 .darken { color: #da47b4; } #project-8451 .number-block { background-color: #da47b4; } #north680 { background: url(../img/north680-thumb.jpg) no-repeat; background-size: cover; } #north680 .darken { color: #3f4d55; } #north680 .number-block { background-color: #3f4d55; } #bar-and-vine { background: url(../img/bv-thumb.jpg) no-repeat; background-size: cover; } #bar-and-vine .darken { color: #6f8fb2; } #bar-and-vine .number-block { background-color: #6f8fb2; } #seven-at-broadway { background: url(../img/seven-thumb.jpg) no-repeat; background-size: cover; } #seven-at-broadway .darken { color: #65d7d5; } #seven-at-broadway .number-block { background-color: #65d7d5; } #endurance-ind { background: url(../img/endurance-thumb.jpg) no-repeat; background-size: cover; } #endurance-ind .darken { color: #1c7eba; } #endurance-ind .number-block { background-color: #1c7eba; } /* project pages */ .project-description h1 { margin: 0 } .project-description h2 { font-size: 13px; font-weight: bold; margin: 0 0 30px 0; } .container.project-work { padding-top: 150px; } .project-work img { margin: 0 0 30px 0; } .web-link, .top-link { font-size: 13px; margin: 0 0 15px 0; background-color: #ededed; padding: 13px 0; text-align: center; font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; font-style: italic; text-decoration: none; width: 100%; display: block; cursor: pointer; } .web-link:hover, .top-link:hover { background-color: #e5e5e5; } /*project page load animation*/ .project-description { position: fixed; top: 150px; width: 250px; margin: 0 0 0 -30px; opacity: 0; -webkit-transition-property: margin, opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: margin, opacity; transition-duration: 1s; transition-timing-function: ease-in-out; } .current .project-description { margin: 0; opacity: 1; -webkit-transition-property: margin, opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: margin, opacity; transition-duration: 1s; transition-timing-function: ease-in-out; } /*About Page*/ .about-img { margin-bottom: 40px; } .row.skills-chart {background: url('../img/chart.jpg') no-repeat; height: 1500px; max-width: 100%; margin 0 auto; } .loaded-item a { color: #404040; } #footer { font-size: .675em; border-top: 1px solid #e2e2e2; padding: 10px 0 25px 0; margin-top: 50px; } /* ============================= */ /* ! Layout for mobile version */ /* ============================= */ @media screen and (max-width: 993px) { .current .project-description { width: 175px; } } @media screen and (max-width: 838px) { #navigation select { display: block; width: 100%; margin-right: 20px; } #navigation ul { display: none; width: 50px; height: 50px; } .current .project-description { position: relative; width: auto; top: 0; margin-top: 30px; } } @media screen and (max-width: 771px) { .project-wide, .project { display: block; overflow: none; width: 48%; margin: 5px 5px 25px 5px; } .project-wide:hover .darken, .project:hover .darken { display: block; } .project-wide .description, .project-wide .description span, .project .description, .project .description span { opacity: 1; } .project-wide .description, .project .description { bottom: 0; right: 0; padding: 10px 10px 10px 0; background: #fff; color: #000; width: 100%; } .number-block { left: 0; display: block; } } @media screen and (max-width: 544px) { .project-wide, .project { display: block; overflow: none; width: 100%; margin: 0 0 25px 0; } .sub-nav { font-size: 11px; } } /* ========================================== */ /* ! Provide higher res assets for iPhone 4 */ /* ========================================== */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* .logo { background: url(logo2x.jpg) no-repeat; background-size: 212px 303px; }*/ }