html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Roboto Slab", serif; color: #ffffff; background-color: #dadcdc; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: #1B1326; text-decoration: none; } h1 { color: #dadcdc; margin-bottom: 1em; font-size: 2.2rem; } @media only screen and (min-width: 768px) { h1 { font-size: 4.4rem; font-weight: 300; } } /* ================================================== Preloader ================================================== */ #jpreOverlay, #jSplash { background-color: #dadcdc; position: absolute; width: 100%; height: 100%; z-index: 2; } #jpreSlide { position: absolute; top: 50% !important; left: 50% !important; margin: -50px 0 0 -50px; width: 100px; height: 100px; } #jpreLoader { position: absolute !important; width: 100% !important; height: 100% !important; top: 0 !important; } #jprePercentage { width: 100px; height: 100px !important; line-height: 100px; position: absolute !important; text-align: center; left: 50%; top: 50%; margin: -50px 0 0 -50px; z-index: 10; background: url("../img/logo/cmd-logo.svg") no-repeat center center; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font-size: 24px; color: #24252D; } @media only screen and (min-width: 768px) { #jprePercentage { -webkit-animation: logo 1s infinite forwards; -moz-animation: logo 1s infinite forwards; -ms-animation: logo 1s infinite forwards; -o-animation: logo 1s infinite forwards; animation: logo 1s infinite forwards; } } /*#logo { position: absolute; top: 50%; left: 50%; z-index: 3; margin: -50px 0 0 -50px; width: 100px; height: 100px; background: url('../img/logo/cmd-logo.svg') no-repeat center center; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; opacity: 1; //filter: alpha(opacity=0); -webkit-animation: logo 1s infinite forwards; -moz-animation: logo 1s infinite forwards; -ms-animation: logo 1s infinite forwards; animation: logo 1s infinite forwards; }*/ @-webkit-keyframes logo { 0% { -webkit-transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; } 50% { -webkit-transform: rotateY(180deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes logo { 0% { -moz-transform: rotateY(0deg); } 50% { -moz-transform: rotateY(180deg); -moz-animation-timing-function: ease-out; } 100% { -moz-transform: rotateY(0deg); -moz-animation-timing-function: ease-in; } } @-ms-keyframes logo { 0% { -ms-transform: rotateY(0deg); -ms-animation-timing-function: ease-in; } 50% { -ms-transform: rotateY(180deg); -ms-animation-timing-function: ease-out; } 100% { -ms-transform: rotateY(0deg); -ms-animation-timing-function: ease-in; } } @-o-keyframes logo { 0% { -o-transform: rotateY(0deg); -o-animation-timing-function: ease-in; } 50% { -o-transform: rotateY(180deg); -o-animation-timing-function: ease-out; } 100% { -o-transform: rotateY(0deg); -o-animation-timing-function: ease-in; } } @keyframes logo { 0% { transform: rotateY(0deg); animation-timing-function: ease-in; } 50% { transform: rotateY(180deg); animation-timing-function: ease-out; } 100% { transform: rotateY(0deg); animation-timing-function: ease-in; } } /* ================================================== Page Transitions ================================================== */ .pixel-cover-layer { /* layer that covers the content when the animation is triggered */ position: fixed; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 100%; width: 100%; opacity: 0; z-index: 2; visibility: hidden; background-color: #dadcdc; -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s; -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s; transition: opacity 0.4s 0.4s, visibility 0s 0.8s; } .pixel-index .pixel-cover-layer { background-color: #dadcdc; } .pixel-reel .pixel-cover-layer { background-color: #dadcdc; } .pixel-motion .pixel-cover-layer { background-color: #dadcdc; } .pixel-ui .pixel-cover-layer { background-color: #dadcdc; } .pixel-branding .pixel-cover-layer { background-color: #dadcdc; } .page-is-changing .pixel-cover-layer { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; } @media only screen and (min-width: 768px) { .pixel-cover-layer { height: calc(100% - 20px); width: calc(100% - 20px); } } .pixel-loading-bar { /* this is the loding bar - visible while switching from one page to the following one */ position: fixed; z-index: 3; left: 50%; top: 50%; height: 2px; width: 90%; background-color: #24252D; visibility: hidden; -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in; -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in; transition: visibility 0s 0.4s, transform 0.4s 0s ease-in; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .pixel-index .pixel-loading-bar { background-color: #2B2D3D; } .pixel-index .pixel-loading-bar::before { background-color: #24252D; } .pixel-reel .pixel-loading-bar { background-color: #2B2D3D; } .pixel-reel .pixel-loading-bar::before { background-color: #24252D; } .pixel-motion .pixel-loading-bar { background-color: #2B2D3D; } .pixel-motion .pixel-loading-bar::before { background-color: #24252D; } .pixel-ui .pixel-loading-bar { background-color: #2B2D3D; } .pixel-ui .pixel-loading-bar::before { background-color: #24252D; } .pixel-branding .pixel-loading-bar { background-color: #2B2D3D; } .pixel-branding .pixel-loading-bar::before { background-color: #24252D; } .pixel-loading-bar::before { /* this is the progress bar inside the loading bar */ content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #2B2D3D; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .page-is-changing .pixel-loading-bar { visibility: visible; -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3); -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3); -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3); -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3); transform: translateX(-50%) translateY(-50%) scaleX(0.3); -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s; -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s; transition: visibility 0s 0.3s, transform 0.4s 0.4s; } .page-is-changing .pixel-loading-bar::before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); -webkit-transition: -webkit-transform 0.8s 0.8s ease-in; -moz-transition: -moz-transform 0.8s 0.8s ease-in; transition: transform 0.8s 0.8s ease-in; } @media only screen and (min-width: 768px) { .pixel-loading-bar { width: calc(100% - 40px); } } /* -------------------------------- Main Components -------------------------------- */ body::after, body::before { /* these are the 2 half blocks which cover the content once the animation is triggered */ content: ''; height: 50vh; width: 100%; position: fixed; left: 0; background-color: #dadcdc; z-index: 1; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transition: -webkit-transform 0.4s 0.4s; -moz-transition: -moz-transform 0.4s 0.4s; transition: transform 0.4s 0.4s; } body::before { top: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } body::after { bottom: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } body.page-is-changing::after, body.page-is-changing::before { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; } main { height: 100vh; text-align: center; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; /*p { width: 50%; max-width: $M; margin: 3em auto; font-size: 1.4rem; line-height: 1.6; color: $color-6; text-align: left; }*/ } main h1 { text-align: center; font-size: 2.4rem; font-weight: 300; color: #ffffff; margin: 2em auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main.nav-is-visible { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } @media only screen and (min-width: 768px) { main.nav-is-visible { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } main h1 { font-size: 3.6rem; margin: 4em auto; } } main .pixel-main-content { position: relative; height: 100%; top: 100px; /* these are the 2 gradient overlay at the top and bottom of the .pixel-main-content - to indicate that you can scroll */ /*content: ''; position: absolute; left: 0; height: 50px; width: 100%; }*/ } main .pixel-main-content > div { height: 100%; -webkit-overflow-scrolling: touch; } main .pixel-main-content::before { top: 0; } main .pixel-main-content::after { bottom: 0; } main .pixel-main-content.pixel-index { /* .pixel-main-content basic style - index page */ background-color: #24252D; /* vertically center its content */ /*display: table; width: 100%; text-align: left;*/ } main .pixel-main-content.pixel-index > div { /* vertically center the content inside the .pixel-index */ padding-top: 50px; /*display: table-cell; vertical-align: middle;*/ } main .pixel-main-content.pixel-index::after { background-color: rgba(36, 37, 45, 0); background-image: -webkit-linear-gradient(bottom, #24252d, rgba(36, 37, 45, 0)); background-image: linear-gradient(to top,#24252d, rgba(36, 37, 45, 0)); } main .pixel-main-content.pixel-index::before { background-color: rgba(36, 37, 45, 0); background-image: -webkit-linear-gradient(top, #24252d, rgba(36, 37, 45, 0)); background-image: linear-gradient(to bottom,#24252d, rgba(36, 37, 45, 0)); } main .pixel-main-content.pixel-reel { /* .pixel-main-content basic style - about page */ background-color: #2B2D3D; } main .pixel-main-content.pixel-reel > div { padding-top: 50px; } main .pixel-main-content.pixel-reel::after { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(bottom, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to top,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-reel::before { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(top, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to bottom,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-motion { /* .pixel-main-content basic style - about page */ background-color: #24252D; } main .pixel-main-content.pixel-motion > div { padding-top: 50px; } main .pixel-main-content.pixel-motion::after { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(bottom, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to top,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-motion::before { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(top, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to bottom,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-ui { /* .pixel-main-content basic style - about page */ background-color: #2B2D3D; } main .pixel-main-content.pixel-ui > div { padding-top: 50px; } main .pixel-main-content.pixel-ui::after { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(bottom, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to top,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-ui::before { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(top, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to bottom,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-branding { /* .pixel-main-content basic style - about page */ background-color: #24252D; } main .pixel-main-content.pixel-branding > div { padding-top: 50px; } main .pixel-main-content.pixel-branding::after { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(bottom, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to top,#2b2d3d, rgba(43, 45, 61, 0)); } main .pixel-main-content.pixel-branding::before { background-color: rgba(43, 45, 61, 0); background-image: -webkit-linear-gradient(top, #2b2d3d, rgba(43, 45, 61, 0)); background-image: linear-gradient(to bottom,#2b2d3d, rgba(43, 45, 61, 0)); } @media only screen and (min-width: 768px) { main .pixel-main-content { height: 100%; top: 0px; } main.pixel-index > div { padding-top: 200px; } main.pixel-index > div { padding-top: 50px; } main p { font-size: 1.3rem; line-height: 2; } } /* ================================================== Contact Section ================================================== */ #contact-form { margin-bottom: 0; } #contact-form p { margin-bottom: 1px; } #contact-form input, #contact-form textarea { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: #24252D; color: #ffffff; font-size: 16px; height: auto; padding: 15px; margin: 0; resize: none; } #contact-form input { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact-form textarea { width: 100%; resize: vertical; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact-form .submit { background: #2B2D3D; color: #24252D; cursor: pointer; display: inline-block; font-size: 18px; font-weight: 500; padding: 16px 40px; text-align: center; vertical-align: middle; width: auto; margin-top: 10px; -webkit-transition: background 0.1s linear 0s, color 0.1s linear 0s; -moz-transition: background 0.1s linear 0s, color 0.1s linear 0s; -o-transition: background 0.1s linear 0s, color 0.1s linear 0s; transition: background 0.1s linear 0s, color 0.1s linear 0s; } #contact-form .submit:hover { background: #24252D; color: #ffffff; } #response { margin-top: 20px; color: #ffffff; } /* -------------------------------- expandable Components -------------------------------- */ .projects-container { height: 100%; width: 100%; position: relative; -webkit-overflow-scrolling: touch; } .projects-container::before { /* never visible - this is used in jQuery to check the current MQ */ content: 'mobile'; display: none; } .projects-container .project-welcome { position: absolute; top: 0; left: 0; width: 100%; height: 50%; overflow: hidden; cursor: pointer; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; /* on mobile - move items outside the viewport */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .projects-container .project-welcome::after { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 50vh; width: 100%; background-image: url("../img/welcome/welcome-small.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; -webkit-transition: opacity 0.5s, height 0.4s; -moz-transition: opacity 0.5s, height 0.4s; transition: opacity 0.5s, height 0.4s; } .projects-container .project-welcome::before { /* never visible - this is used in jQuery to detect if the background image has been loaded */ content: 'img/welcome/welcome-small.jpg'; display: none; } .projects-container .project-welcome:nth-of-type(2) { top: 50vh; } .projects-container .project-welcome:nth-of-type(2)::after { background-image: url("../img/welcome/contact-small.jpg"); height: 1; } .projects-container .project-welcome:nth-of-type(2)::before { content: 'img/welcome/contact-small.jpg'; } .projects-container .project-welcome.is-loaded { /* move items in the viewport when background images have been loaded */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .projects-container .project-welcome.is-full-width { /* selected item */ top: 0; height: auto; z-index: 1; cursor: auto; -webkit-transition: z-index 0s 0s, top 0.4s 0s; -moz-transition: z-index 0s 0s, top 0.4s 0s; transition: z-index 0s 0s, top 0.4s 0s; } .projects-container .project-welcome.is-full-width::after { height: 100%; } .projects-container .project-reels { position: absolute; top: 0; left: 0; width: 100%; height: 33.3333333333%; overflow: hidden; cursor: pointer; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; /* on mobile - move items outside the viewport */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); /*&:nth-of-type(4) { top: 100vh*3/$items; &::after { background-image: url('../img/img-4-small.jpg'); } &::before { content: 'img/img-4-small.jpg'; } }*/ } .projects-container .project-reels::after { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 33.3333333333vh; width: 100%; background-image: url("../img/reels/reel2015-small.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: opacity 0.5s, height 0.4s; -moz-transition: opacity 0.5s, height 0.4s; transition: opacity 0.5s, height 0.4s; } .projects-container .project-reels::before { /* never visible - this is used in jQuery to detect if the background image has been loaded */ content: 'img/reels/reel2015-small.jpg'; display: none; } .projects-container .project-reels:nth-of-type(2) { top: 33.3333333333vh; } .projects-container .project-reels:nth-of-type(2)::after { background-image: url("../img/reels/reel2014-small.jpg"); } .projects-container .project-reels:nth-of-type(2)::before { content: 'img/reels/reel2014-small.jpg'; } .projects-container .project-reels:nth-of-type(3) { top: 66.6666666667vh; } .projects-container .project-reels:nth-of-type(3)::after { background-image: url("../img/reels/reel2013-small.jpg"); } .projects-container .project-reels:nth-of-type(3)::before { content: 'img/reels/reel2013-small.jpg'; } .projects-container .project-reels.is-loaded { /* move items in the viewport when background images have been loaded */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .projects-container .project-reels.is-full-width { /* selected item */ top: 0; height: auto; z-index: 1; cursor: auto; -webkit-transition: z-index 0s 0s, top 0.4s 0s; -moz-transition: z-index 0s 0s, top 0.4s 0s; transition: z-index 0s 0s, top 0.4s 0s; } .projects-container .project-reels.is-full-width::after { height: 65vh; } .projects-container .project-motion { position: absolute; top: 0; left: 0; width: 100%; height: 25%; overflow: hidden; cursor: pointer; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; /* on mobile - move items outside the viewport */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .projects-container .project-motion::after { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 25vh; width: 100%; background-image: url("../img/motion/project/iida-small.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: opacity 0.5s, height 0.4s; -moz-transition: opacity 0.5s, height 0.4s; transition: opacity 0.5s, height 0.4s; } .projects-container .project-motion::before { /* never visible - this is used in jQuery to detect if the background image has been loaded */ content: 'img/motion/project/iida-small.jpg'; display: none; } .projects-container .project-motion:nth-of-type(2) { top: 25vh; } .projects-container .project-motion:nth-of-type(2)::after { background-image: url("../img/motion/project/decay-small.jpg"); } .projects-container .project-motion:nth-of-type(2)::before { content: 'img/motion/project/decay-small.jpg'; } .projects-container .project-motion:nth-of-type(3) { top: 50vh; } .projects-container .project-motion:nth-of-type(3)::after { background-image: url("../img/motion/project/exposure-small.jpg"); } .projects-container .project-motion:nth-of-type(3)::before { content: 'img/motion/project/exposure-small.jpg'; } .projects-container .project-motion:nth-of-type(4) { top: 75vh; } .projects-container .project-motion:nth-of-type(4)::after { background-image: url("../img/motion/project/enerplex-small.jpg"); } .projects-container .project-motion:nth-of-type(4)::before { content: 'img/motion/project/enerplex-small.jpg'; } .projects-container .project-motion.is-loaded { /* move items in the viewport when background images have been loaded */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .projects-container .project-motion.is-full-width { /* selected item */ top: 0; height: auto; z-index: 1; cursor: auto; -webkit-transition: z-index 0s 0s, top 0.4s 0s; -moz-transition: z-index 0s 0s, top 0.4s 0s; transition: z-index 0s 0s, top 0.4s 0s; } .projects-container .project-motion.is-full-width::after { height: 50vh; } .projects-container .project-ui { position: absolute; top: 0; left: 0; width: 100%; height: 25%; overflow: hidden; cursor: pointer; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; /* on mobile - move items outside the viewport */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .projects-container .project-ui::after { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 25vh; width: 100%; background-image: url("../img/ui/project/guitar-small.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: opacity 0.5s, height 0.4s; -moz-transition: opacity 0.5s, height 0.4s; transition: opacity 0.5s, height 0.4s; } .projects-container .project-ui::before { /* never visible - this is used in jQuery to detect if the background image has been loaded */ content: 'img/ui/project/guitar-small.jpg'; display: none; } .projects-container .project-ui:nth-of-type(2) { top: 25vh; } .projects-container .project-ui:nth-of-type(2)::after { background-image: url("../img/ui/project/stortz-small.jpg"); } .projects-container .project-ui:nth-of-type(2)::before { content: 'img/ui/project/stortz-small.jpg'; } .projects-container .project-ui:nth-of-type(3) { top: 50vh; } .projects-container .project-ui:nth-of-type(3)::after { background-image: url("../img/ui/project/briarwood-small.jpg"); } .projects-container .project-ui:nth-of-type(3)::before { content: 'img/ui/project/briarwood-small.jpg'; } .projects-container .project-ui:nth-of-type(4) { top: 75vh; } .projects-container .project-ui:nth-of-type(4)::after { background-image: url("../img/ui/project/ultimus-small.jpg"); } .projects-container .project-ui:nth-of-type(4)::before { content: 'img/ui/project/ultimus-small.jpg'; } .projects-container .project-ui.is-loaded { /* move items in the viewport when background images have been loaded */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .projects-container .project-ui.is-full-width { /* selected item */ top: 0; height: auto; z-index: 1; cursor: auto; -webkit-transition: z-index 0s 0s, top 0.4s 0s; -moz-transition: z-index 0s 0s, top 0.4s 0s; transition: z-index 0s 0s, top 0.4s 0s; } .projects-container .project-ui.is-full-width::after { height: 50vh; } .projects-container .project-branding { position: absolute; top: 0; left: 0; width: 100%; height: 25%; overflow: hidden; cursor: pointer; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; /* on mobile - move items outside the viewport */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .projects-container .project-branding::after { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 25vh; width: 100%; background-image: url("../img/branding/project/sole-small.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: opacity 0.5s, height 0.4s; -moz-transition: opacity 0.5s, height 0.4s; transition: opacity 0.5s, height 0.4s; } .projects-container .project-branding::before { /* never visible - this is used in jQuery to detect if the background image has been loaded */ content: 'img/branding/project/sole-small.jpg'; display: none; } .projects-container .project-branding:nth-of-type(2) { top: 25vh; } .projects-container .project-branding:nth-of-type(2)::after { background-image: url("../img/branding/project/rise-small.jpg"); } .projects-container .project-branding:nth-of-type(2)::before { content: 'img/branding/project/rise-small.jpg'; } .projects-container .project-branding:nth-of-type(3) { top: 50vh; } .projects-container .project-branding:nth-of-type(3)::after { background-image: url("../img/branding/project/exposure-small.jpg"); } .projects-container .project-branding:nth-of-type(3)::before { content: 'img/branding/project/exposure-small.jpg'; } .projects-container .project-branding:nth-of-type(4) { top: 75vh; } .projects-container .project-branding:nth-of-type(4)::after { background-image: url("../img/branding/project/collabrate-small.jpg"); } .projects-container .project-branding:nth-of-type(4)::before { content: 'img/branding/project/collabrate-small.jpg'; } .projects-container .project-branding.is-loaded { /* move items in the viewport when background images have been loaded */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .projects-container .project-branding.is-full-width { /* selected item */ top: 0; height: auto; z-index: 1; cursor: auto; -webkit-transition: z-index 0s 0s, top 0.4s 0s; -moz-transition: z-index 0s 0s, top 0.4s 0s; transition: z-index 0s 0s, top 0.4s 0s; } .projects-container .project-branding.is-full-width::after { height: 50vh; } @media only screen and (min-width: 768px) { .projects-container::before { /* never visible - this is used in jQuery to check the current MQ */ content: 'desktop'; } .projects-container .project-welcome { width: 50vw; height: 100%; opacity: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: width 0s; -moz-transition: width 0s; transition: width 0s; } .projects-container .project-welcome:first-of-type::before { content: 'img/welcome/welcome-large.jpg'; } .projects-container .project-welcome:first-of-type::after { background-image: url("../img/welcome/welcome-large.jpg"); } .projects-container .project-welcome:nth-of-type(2) { top: 0; left: 50vw; } .projects-container .project-welcome:nth-of-type(2)::before { content: 'img/welcome/contact-large.jpg'; } .projects-container .project-welcome:nth-of-type(2)::after { background-image: url("../img/welcome/contact-large.jpg"); } .projects-container .project-welcome::after { height: 100vh; width: 100%; opacity: 0; } .projects-container .project-welcome.is-loaded { /* show items when background images have been loaded */ opacity: 1; } .projects-container .project-welcome.is-loaded::after { opacity: 1; } .projects-container .project-welcome.is-full-width { /* selected item */ left: 0vw; width: 100vw; height: 100%; -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; } .projects-container .project-welcome.is-full-width::after { height: 100vh; } .projects-container .project-reels { width: 33.3333333333vw; height: 100%; opacity: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: width 0s; -moz-transition: width 0s; transition: width 0s; /*&:nth-of-type(4) { top: 0; left: 100vw*3/$items; &::before { content: 'img/img-4-large.jpg'; } &::after { background-image: url('../img/img-4-large.jpg'); } }*/ } .projects-container .project-reels:first-of-type::before { content: 'img/reels/reel2015-large.jpg'; } .projects-container .project-reels:first-of-type::after { background-image: url("../img/reels/reel2015-large.jpg"); } .projects-container .project-reels:nth-of-type(2) { top: 0; left: 33.3333333333vw; } .projects-container .project-reels:nth-of-type(2)::before { content: 'img/reels/reel2014-large.jpg'; } .projects-container .project-reels:nth-of-type(2)::after { background-image: url("../img/reels/reel2014-large.jpg"); } .projects-container .project-reels:nth-of-type(3) { top: 0; left: 66.6666666667vw; } .projects-container .project-reels:nth-of-type(3)::before { content: 'img/reels/reel2013-large.jpg'; } .projects-container .project-reels:nth-of-type(3)::after { background-image: url("../img/reels/reel2013-large.jpg"); } .projects-container .project-reels::after { height: 100vh; width: 100%; opacity: 0; } .projects-container .project-reels.is-loaded { /* show items when background images have been loaded */ opacity: 1; } .projects-container .project-reels.is-loaded::after { opacity: 1; } .projects-container .project-reels.is-full-width { /* selected item */ left: 0vw; width: 100vw; -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; } .projects-container .project-reels.is-full-width::after { height: 70vh; } .projects-container .project-motion { width: 25vw; height: 100%; opacity: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: width 0s; -moz-transition: width 0s; transition: width 0s; } .projects-container .project-motion:first-of-type::before { content: 'img/motion/project/iida-large.jpg'; } .projects-container .project-motion:first-of-type::after { background-image: url("../img/motion/project/iida-large.jpg"); } .projects-container .project-motion:nth-of-type(2) { top: 0; left: 25vw; } .projects-container .project-motion:nth-of-type(2)::before { content: 'img/motion/project/decay-large.jpg'; } .projects-container .project-motion:nth-of-type(2)::after { background-image: url("../img/motion/project/decay-large.jpg"); } .projects-container .project-motion:nth-of-type(3) { top: 0; left: 50vw; } .projects-container .project-motion:nth-of-type(3)::before { content: 'img/motion/project/exposure-large.jpg'; } .projects-container .project-motion:nth-of-type(3)::after { background-image: url("../img/motion/project/exposure-large.jpg"); } .projects-container .project-motion:nth-of-type(4) { top: 0; left: 75vw; } .projects-container .project-motion:nth-of-type(4)::before { content: 'img/motion/project/enerplex-large.jpg'; } .projects-container .project-motion:nth-of-type(4)::after { background-image: url("../img/motion/project/enerplex-large.jpg"); } .projects-container .project-motion::after { height: 100vh; width: 100%; opacity: 0; } .projects-container .project-motion.is-loaded { /* show items when background images have been loaded */ opacity: 1; } .projects-container .project-motion.is-loaded::after { opacity: 1; } .projects-container .project-motion.is-full-width { /* selected item */ left: 0vw; width: 100vw; -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; } .projects-container .project-motion.is-full-width::after { height: 70vh; } .projects-container .project-ui { width: 25vw; height: 100%; opacity: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: width 0s; -moz-transition: width 0s; transition: width 0s; } .projects-container .project-ui:first-of-type::before { content: 'img/ui/project/guitar-large.jpg'; } .projects-container .project-ui:first-of-type::after { background-image: url("../img/ui/project/guitar-large.jpg"); } .projects-container .project-ui:nth-of-type(2) { top: 0; left: 25vw; } .projects-container .project-ui:nth-of-type(2)::before { content: 'img/ui/project/stortz-large.jpg'; } .projects-container .project-ui:nth-of-type(2)::after { background-image: url("../img/ui/project/stortz-large.jpg"); } .projects-container .project-ui:nth-of-type(3) { top: 0; left: 50vw; } .projects-container .project-ui:nth-of-type(3)::before { content: 'img/ui/project/briarwood-large.jpg'; } .projects-container .project-ui:nth-of-type(3)::after { background-image: url("../img/ui/project/briarwood-large.jpg"); } .projects-container .project-ui:nth-of-type(4) { top: 0; left: 75vw; } .projects-container .project-ui:nth-of-type(4)::before { content: 'img/ui/project/ultimus-large.jpg'; } .projects-container .project-ui:nth-of-type(4)::after { background-image: url("../img/ui/project/ultimus-large.jpg"); } .projects-container .project-ui::after { height: 100vh; width: 100%; opacity: 0; } .projects-container .project-ui.is-loaded { /* show items when background images have been loaded */ opacity: 1; } .projects-container .project-ui.is-loaded::after { opacity: 1; } .projects-container .project-ui.is-full-width { /* selected item */ left: 0vw; width: 100vw; -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; } .projects-container .project-ui.is-full-width::after { height: 70vh; } .projects-container .project-branding { width: 25vw; height: 100%; opacity: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: width 0s; -moz-transition: width 0s; transition: width 0s; } .projects-container .project-branding:first-of-type::before { content: 'img/branding/project/sole-large.jpg'; } .projects-container .project-branding:first-of-type::after { background-image: url("../img/branding/project/sole-large.jpg"); } .projects-container .project-branding:nth-of-type(2) { top: 0; left: 25vw; } .projects-container .project-branding:nth-of-type(2)::before { content: 'img/branding/project/rise-large.jpg'; } .projects-container .project-branding:nth-of-type(2)::after { background-image: url("../img/branding/project/rise-large.jpg"); } .projects-container .project-branding:nth-of-type(3) { top: 0; left: 50vw; } .projects-container .project-branding:nth-of-type(3)::before { content: 'img/branding/project/exposure-large.jpg'; } .projects-container .project-branding:nth-of-type(3)::after { background-image: url("../img/branding/project/exposure-large.jpg"); } .projects-container .project-branding:nth-of-type(4) { top: 0; left: 75vw; } .projects-container .project-branding:nth-of-type(4)::before { content: 'img/branding/project/collabrate-large.jpg'; } .projects-container .project-branding:nth-of-type(4)::after { background-image: url("../img/branding/project/collabrate-large.jpg"); } .projects-container .project-branding::after { height: 100vh; width: 100%; opacity: 0; } .projects-container .project-branding.is-loaded { /* show items when background images have been loaded */ opacity: 1; } .projects-container .project-branding.is-loaded::after { opacity: 1; } .projects-container .project-branding.is-full-width { /* selected item */ left: 0vw; width: 100vw; -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; } .projects-container .project-branding.is-full-width::after { height: 70vh; } } @media only screen and (min-width: 1170px) { .projects-container { overflow-x: hidden; } .projects-container .project-welcome::after { background-attachment: fixed; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s, opacity 0.5s; -moz-transition: -moz-transform 0.8s, opacity 0.5s; transition: transform 0.8s, opacity 0.5s; } .projects-container .project-welcome.is-full-width { /* selected item */ } .projects-container .project-welcome.is-full-width::after { height: 100vh; } .projects-container .project-welcome.is-loaded::after { opacity: 0; } .projects-container .project-reels::after { background-attachment: fixed; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s, opacity 0.5s; -moz-transition: -moz-transform 0.8s, opacity 0.5s; transition: transform 0.8s, opacity 0.5s; } .projects-container .project-reels.is-full-width { /* selected item */ } .projects-container .project-reels.is-full-width::after { height: 100vh; } .projects-container .project-reels.is-loaded::after { opacity: 0; } .projects-container .project-motion::after { background-attachment: fixed; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s, opacity 0.5s; -moz-transition: -moz-transform 0.8s, opacity 0.5s; transition: transform 0.8s, opacity 0.5s; } .projects-container .project-motion.is-full-width { /* selected item */ } .projects-container .project-motion.is-full-width::after { height: 100vh; } .projects-container .project-motion.is-loaded::after { opacity: 0; } .projects-container .project-ui::after { background-attachment: fixed; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s, opacity 0.5s; -moz-transition: -moz-transform 0.8s, opacity 0.5s; transition: transform 0.8s, opacity 0.5s; } .projects-container .project-ui.is-full-width { /* selected item */ } .projects-container .project-ui.is-full-width::after { height: 100vh; } .projects-container .project-ui.is-loaded::after { opacity: 0; } .projects-container .project-branding::after { background-attachment: fixed; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s, opacity 0.5s; -moz-transition: -moz-transform 0.8s, opacity 0.5s; transition: transform 0.8s, opacity 0.5s; } .projects-container .project-branding.is-full-width { /* selected item */ } .projects-container .project-branding.is-full-width::after { height: 100vh; } .projects-container .project-branding.is-loaded::after { opacity: 0; } .no-touch .projects-container .project-welcome:hover::after, .projects-container .project-welcome.is-full-width.is-loaded::after, .projects-container .project-reels:hover::after, .projects-container .project-reels.is-full-width.is-loaded::after, .projects-container .project-motion:hover::after, .projects-container .project-motion.is-full-width.is-loaded::after, .projects-container .project-ui:hover::after, .projects-container .project-ui.is-full-width.is-loaded::after, .projects-container .project-branding:hover::after, .projects-container .project-branding.is-full-width.is-loaded::after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .welcome-title { position: absolute; z-index: 1; left: 0; top: 25vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; } .is-full-width .welcome-title h2 { display: none; } .welcome-title > * { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .welcome-title h2 { font-size: 2.5rem; font-weight: 700; } @media only screen and (min-width: 768px) { .welcome-title { top: 50vh; width: 50vw; opacity: 0; -webkit-transform: translateY(-50%) translateX(-20px); -moz-transform: translateY(-50%) translateX(-20px); -ms-transform: translateY(-50%) translateX(-20px); -o-transform: translateY(-50%) translateX(-20px); transform: translateY(-50%) translateX(-20px); } .is-loaded .welcome-title { opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s; transition: transform 0.6s, opacity 0.6s, left 0.4s; } } @media only screen and (min-width: 1170px) { .welcome-title h2 { font-size: 3.6rem; } } .reel-title { position: absolute; z-index: 1; left: 0; top: 16.6666666667vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; } .is-full-width .reel-title { top: 33vh; -webkit-transition: opacity 0s, top 0.4s; -moz-transition: opacity 0s, top 0.4s; transition: opacity 0s, top 0.4s; } .reel-title > * { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .reel-title h2 { font-size: 2.5rem; line-height: 1.5; font-weight: 700; } .reel-title p { font-size: 1.4rem; font-family: "Open Sans", sans-serif; font-style: italic; line-height: 1.2; padding: .4em 2em; display: none; opacity: .6; } @media only screen and (min-width: 768px) { .reel-title { top: 50vh; width: 33.3333333333vw; opacity: 0; -webkit-transform: translateY(-50%) translateX(-20px); -moz-transform: translateY(-50%) translateX(-20px); -ms-transform: translateY(-50%) translateX(-20px); -o-transform: translateY(-50%) translateX(-20px); transform: translateY(-50%) translateX(-20px); } .is-loaded .reel-title { opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s; transition: transform 0.6s, opacity 0.6s, left 0.4s; } .is-loaded.is-full-width .reel-title { left: 31.746031746vw; top: 35vh; -webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s; transition: transform 0.6s, opacity 0s, left 0.4s; } .reel-title p { display: block; } } @media only screen and (min-width: 1170px) { .is-loaded.is-full-width .reel-title { top: 50vh; } .reel-title h2 { font-size: 3.6rem; } } .pixel-title { position: absolute; z-index: 1; left: 0; top: 12.5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; } .is-full-width .pixel-title { top: 25vh; -webkit-transition: opacity 0s, top 0.4s; -moz-transition: opacity 0s, top 0.4s; transition: opacity 0s, top 0.4s; } .pixel-title > * { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pixel-title h2 { font-size: 2.5rem; line-height: 1.5; font-weight: 700; } .pixel-title p { font-size: 1.4rem; font-family: "Open Sans", sans-serif; font-style: normal; line-height: 1.2; padding: .4em 2em; display: none; opacity: .6; } @media only screen and (min-width: 768px) { .pixel-title { top: 50vh; width: 25vw; opacity: 0; -webkit-transform: translateY(-50%) translateX(-20px); -moz-transform: translateY(-50%) translateX(-20px); -ms-transform: translateY(-50%) translateX(-20px); -o-transform: translateY(-50%) translateX(-20px); transform: translateY(-50%) translateX(-20px); } .is-loaded .pixel-title { opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s; transition: transform 0.6s, opacity 0.6s, left 0.4s; } .is-loaded.is-full-width .pixel-title { left: 37.5vw; top: 35vh; -webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s; transition: transform 0.6s, opacity 0s, left 0.4s; } .pixel-title p { display: block; } } @media only screen and (min-width: 1170px) { .is-loaded.is-full-width .pixel-title { top: 50vh; } .pixel-title h2 { font-size: 3.6rem; } } .welcome-content { max-width: 68em; margin-left: auto; margin-right: auto; position: relative; z-index: 1; left: 0; text-align: left; padding: 0 18px; margin: 50px 0px; } .welcome-content::after { clear: both; content: ""; display: table; } .is-full-width .welcome-content { -webkit-transition: opacity 0s, top 0.4s; -moz-transition: opacity 0s, top 0.4s; transition: opacity 0s, top 0.4s; -webkit-text-size-adjust: 100%; } .is-full-width .welcome-content h2 { display: block; text-align: left; padding: .4em 1.3em; line-height: .5; font-size: 2.1rem; font-weight: 700; } .is-full-width .welcome-content p { font-size: 1.3rem; font-family: "Open Sans", sans-serif; line-height: 1.2; padding: .4em 2em; display: block; text-align: left; } .is-full-width .welcome-content p span { opacity: .6; } .is-full-width .welcome-content p a { color: white; } .is-full-width .welcome-content h3 { text-align: left; display: block; padding: .4em 1.7em; } .is-full-width .welcome-content .names { display: block; padding: .4em 1.7em; } .is-full-width .welcome-content .names li { text-align: left; font-size: 1.4rem; font-family: "Open Sans", sans-serif; color: #dadcdc; opacity: .6; line-height: 1.2; } .welcome-content h2 { display: none; } .welcome-content h3 { display: none; } .welcome-content .names { display: none; } .welcome-content p { display: none; } @media only screen and (min-width: 768px) { .welcome-content { max-width: 68em; margin-left: auto; margin-right: auto; float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; margin-left: 25.5894128995%; top: 50vh; opacity: 0; -webkit-transform: translateY(-50%) translateX(-20px); -moz-transform: translateY(-50%) translateX(-20px); -ms-transform: translateY(-50%) translateX(-20px); -o-transform: translateY(-50%) translateX(-20px); transform: translateY(-50%) translateX(-20px); } .welcome-content::after { clear: both; content: ""; display: table; } .welcome-content:last-child { margin-right: 0; } .is-loaded .welcome-content { opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s; transition: transform 0.6s, opacity 0.6s, left 0.4s; } .is-loaded.is-full-width .welcome-content { margin-top: 0px; -webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s; transition: transform 0.6s, opacity 0s, left 0.4s; } .is-loaded.is-full-width .welcome-content h2 { padding: .4em .3em; } .is-loaded.is-full-width .welcome-content p { padding: .4em .5em; } .is-loaded.is-full-width .welcome-content h3 { padding: .4em .4em; } .is-loaded.is-full-width .welcome-content .names { padding: .4em .4em; } } .pixel-welcome-bg { clear: both; visibility: hidden; opacity: 0; margin-top: 50vh; padding: 0; cursor: auto; z-index: 1; color: #dadcdc; } .is-full-width .pixel-welcome-bg { visibility: visible; opacity: 1; } .pixel-welcome-bg p { width: 100%; max-width: 800px; margin: 0 auto; line-height: 2; text-align: left; } @media only screen and (min-width: 768px) { .pixel-welcome-bg { position: relative; z-index: 1; margin-top: 0; } } @media only screen and (min-width: 1170px) { .pixel-welcome-bg { margin-top: 0; } } .pixel-project-info { clear: both; visibility: hidden; opacity: 0; margin-top: 50vh; padding: 0; cursor: auto; background-color: #24252D; color: #dadcdc; -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s; -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s; transition: opacity 0.4s 0s, visibility 0s 0.4s; } .is-full-width .pixel-project-info { visibility: visible; opacity: 1; } .pixel-project-info p { width: 90%; max-width: 800px; margin: 0 auto; line-height: 2; text-align: left; } @media only screen and (min-width: 768px) { .pixel-project-info { position: relative; z-index: 1; margin-top: 70vh; } } @media only screen and (min-width: 1170px) { .pixel-project-info { margin-top: 100vh; } } .reel-project-info { position: relative; clear: both; visibility: hidden; opacity: 0; margin-top: 65vh; padding: 0; cursor: auto; background-color: #24252D; color: #dadcdc; -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s; -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s; transition: opacity 0.4s 0s, visibility 0s 0.4s; } .is-full-width .reel-project-info { visibility: visible; opacity: 1; } .reel-project-info p { width: 90%; max-width: 100%; margin: 25% auto; line-height: 2; text-align: center; } @media only screen and (min-width: 768px) { .reel-project-info { position: relative; z-index: 1; margin-top: 70vh; } } @media only screen and (min-width: 1170px) { .reel-project-info { margin-top: 100vh; } } .projects-container .pixel-close, .projects-container .pixel-scroll { display: block; z-index: 100; width: 44px; height: 44px; /* image replacement */ overflow: hidden; -webkit-overflow-scrolling: touch; text-indent: 100%; white-space: nowrap; visibility: hidden; -webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s; -moz-transition: -moz-transform 1s 0s, visibility 0s 1s; transition: transform 1s 0s, visibility 0s 1s; } .projects-container .pixel-close { position: fixed; top: 140px; right: 3.8%; background: url("../img/icons/pixel-icon-close-mobile.svg") no-repeat center center; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } @media only screen and (min-width: 768px) { .projects-container .pixel-close { right: 5.5%; } } @media only screen and (min-width: 1170px) { .projects-container .pixel-close { background-image: url("../img/icons/pixel-icon-close-desktop.svg"); top: 140px; right: 3.8%; } } .projects-container .pixel-scroll { position: absolute; bottom: 160px; left: 50%; display: none; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); background: url("../img/icons/pixel-icon-arrow-mobile.svg") no-repeat center center; } @media only screen and (min-width: 768px) { .projects-container .pixel-scroll { bottom: 350px; display: block; } } @media only screen and (min-width: 1170px) { .projects-container .pixel-scroll { background-image: url("../img/icons/pixel-icon-arrow-desktop.svg"); bottom: 245px; display: block; overflow: hidden; } } .project-is-open .pixel-close { visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s; -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s; transition: transform 0.4s 0s, visibility 0s 0s; } .project-is-open .pixel-scroll { visibility: visible; } @media only screen and (min-width: 1170px) { .project-is-open .pixel-scroll { visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s; -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s; transition: transform 0.4s 0s, visibility 0s 0s; } } .project-is-open .pixel-scroll { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-animation: pixel-translate 1.2s 0.4s; -moz-animation: pixel-translate 1.2s 0.4s; animation: pixel-translate 1.2s 0.4s; -webkit-animation-iteration-count: 2; -moz-animation-iteration-count: 2; animation-iteration-count: 2; } .no-touch .project-is-open .pixel-close:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .no-touch .project-is-open .pixel-scroll:hover { -webkit-transform: translateX(-50%) scale(1.2); -moz-transform: translateX(-50%) scale(1.2); -ms-transform: translateX(-50%) scale(1.2); -o-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); } @-webkit-keyframes pixel-translate { 0% { -webkit-transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); } 100% { -webkit-transform: translateX(-50%) scale(1); } } @-moz-keyframes pixel-translate { 0% { -moz-transform: translateX(-50%) scale(1); } 50% { -moz-transform: translateY(10px) translateX(-50%) scale(1); } 100% { -moz-transform: translateX(-50%) scale(1); } } @keyframes pixel-translate { 0% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); -moz-transform: translateY(10px) translateX(-50%) scale(1); -ms-transform: translateY(10px) translateX(-50%) scale(1); -o-transform: translateY(10px) translateX(-50%) scale(1); transform: translateY(10px) translateX(-50%) scale(1); } 100% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } } .pixel-header { height: auto; width: 100%; margin: 0 auto; position: fixed; z-index: 1; background-color: #2B2D3D; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pixel-header::after { clear: both; content: ""; display: table; } .pixel-header.nav-is-visible { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); overflow: hidden; } @media only screen and (min-width: 768px) { .pixel-header { position: fixed; z-index: 1; background-color: transparent; } .pixel-header.nav-is-visible { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } } .pixel-header .pixel-logo { float: left; padding: 10px 30px; } .welcome-footer { position: relative; bottom: 0px; width: 100%; height: 50px; background: #2B2D3D; text-align: center; z-index: 99; visibility: hidden; -webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s; -moz-transition: -moz-transform 1s 0s, visibility 0s 1s; transition: transform 1s 0s, visibility 0s 1s; } @media only screen and (min-width: 768px) { .welcome-footer { position: fixed; bottom: 0px; } } .projects-footer { position: relative; bottom: 0px; width: 100%; height: 50px; background: #2B2D3D; text-align: center; z-index: 99; visibility: hidden; -webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s; -moz-transition: -moz-transform 1s 0s, visibility 0s 1s; transition: transform 1s 0s, visibility 0s 1s; } footer .pixel-credits { display: block; z-index: 100; width: 100%; padding: 20px 0; font-size: x-small; } @media only screen and (min-width: 768px) { footer .pixel-credits { font-size: 1.1rem; padding: 15px 0; } } .project-is-open footer { visibility: visible; -webkit-transition: -webkit-transform 0s 0s, visibility 0s 0s; -moz-transition: -moz-transform 0s 0s, visibility 0s 0s; transition: transform 0s 0s, visibility 0s 0s; } /* -------------------------------- navigation -------------------------------- */ .pixel-3d-nav-trigger { position: relative; float: right; height: 45px; width: 45px; margin-top: 25px; padding: 0px 35px; /* replace text with background image */ overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; } @media only screen and (min-width: 768px) { .pixel-3d-nav-trigger { margin-top: 40px; padding: 0px 50px; } } .pixel-3d-nav-trigger span, .pixel-3d-nav-trigger span::before, .pixel-3d-nav-trigger span::after { /* hamburger icon in CSS */ position: absolute; width: 28px; height: 3px; background-color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pixel-3d-nav-trigger span { /* this is the central line */ top: 21px; left: 8px; -webkit-transition: background 0.2s 0.5s; -moz-transition: background 0.2s 0.5s; transition: background 0.2s 0.5s; } .pixel-3d-nav-trigger span::before, .pixel-3d-nav-trigger span:after { /* these are the upper and lower lines */ content: ''; left: 0; -webkit-transition: -webkit-transform 0.2s 0.5s; -moz-transition: -moz-transform 0.2s 0.5s; transition: transform 0.2s 0.5s; } .pixel-3d-nav-trigger span::before { bottom: 8px; } .pixel-3d-nav-trigger span::after { top: 8px; } .nav-is-visible .pixel-3d-nav-trigger span { /* hide line in the center */ background-color: rgba(218, 220, 220, 0); } .nav-is-visible .pixel-3d-nav-trigger span::before, .nav-is-visible .pixel-3d-nav-trigger span::after { /* keep visible other 2 lines */ background-color: #dadcdc; } .nav-is-visible .pixel-3d-nav-trigger span::before { -webkit-transform: translateY(8px) rotate(-45deg); -moz-transform: translateY(8px) rotate(-45deg); -ms-transform: translateY(8px) rotate(-45deg); -o-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); } .nav-is-visible .pixel-3d-nav-trigger span::after { -webkit-transform: translateY(-8px) rotate(45deg); -moz-transform: translateY(-8px) rotate(45deg); -ms-transform: translateY(-8px) rotate(45deg); -o-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); } .pixel-3d-nav-container { /* this is the 3D navigation container */ position: fixed; top: 0; left: 0; height: 80px; width: 100%; background-color: #000000; visibility: hidden; /* enable a 3D-space for children elements */ -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s; -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s; transition: transform 0.5s 0s, visibility 0s 0.5s; } .pixel-3d-nav-container.nav-is-visible { visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s; -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s; transition: transform 0.5s 0s, visibility 0.5s 0s; } @media only screen and (min-width: 768px) { .pixel-3d-nav-container { height: 170px; } } .pixel-3d-nav { /* this is the 3D rotating navigation */ position: relative; height: 100%; background-color: #131526; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } .pixel-3d-nav::after { /* menu dark cover layer - to enhance perspective effect */ content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000000; opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s; -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s; transition: opacity 0.5s 0s, visibility 0.5s 0s; } .pixel-3d-nav li { height: 100%; width: 20%; float: left; } .pixel-3d-nav li:first-of-type a::before { background-image: url(../img/icons/welcome-icon.svg); } .pixel-3d-nav li:nth-of-type(2) a::before { background-image: url(../img/icons/reel-icon.svg); } .pixel-3d-nav li:nth-of-type(3) a::before { background-image: url(../img/icons/motion-icon.svg); } .pixel-3d-nav li:nth-of-type(4) a::before { background-image: url(../img/icons/ui-icon.svg); } .pixel-3d-nav li:nth-of-type(5) a::before { background-image: url(../img/icons/brand-icon.svg); } .pixel-3d-nav a { position: relative; display: block; height: 100%; color: transparent; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .pixel-3d-nav a::before { /* navigation icons */ content: ''; height: 32px; width: 32px; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: 32px 64px; background-repeat: no-repeat; background-position: 0 0; } .no-touch .pixel-3d-nav a:hover { background-color: #0b0c15; } .pixel-3d-nav .pixel-selected a { background-color: #020204; } .no-touch .pixel-3d-nav .pixel-selected a:hover { background-color: #020204; } .pixel-3d-nav .pixel-selected a::before { background-position: 0 -32px; } .nav-is-visible .pixel-3d-nav { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .nav-is-visible .pixel-3d-nav::after { /* menu cover layer - hide it when navigation is visible */ opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s; -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s; transition: opacity 0.5s 0s, visibility 0s 0.5s; } @media only screen and (min-width: 768px) { .pixel-3d-nav a { padding: 7.6em 1em 0; color: #ffffff; font-size: 1.3rem; font-weight: 600; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* truncate text with ellipsis if too long */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pixel-3d-nav a::before { top: 4.4em; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } .pixel-marker { /* line at the bottom of nav selected item */ position: absolute; bottom: 0; left: 0; height: 3px; width: 20%; background-color: currentColor; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translateZ(0) rotateX(90deg); -moz-transform: translateZ(0) rotateX(90deg); -ms-transform: translateZ(0) rotateX(90deg); -o-transform: translateZ(0) rotateX(90deg); transform: translateZ(0) rotateX(90deg); -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; } .pixel-marker::before { /* triangle at the bottom of nav selected item */ content: ''; position: absolute; bottom: 3px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 0; width: 0; border: 10px solid transparent; border-bottom-color: inherit; } .nav-is-visible .pixel-marker { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } /* these are the colors of the markers - line + arrow */ .color-1 { color: #dadcdc; } .color-2 { color: #dadcdc; } .color-3 { color: #dadcdc; } .color-4 { color: #dadcdc; } .color-5 { color: #dadcdc; } /*----------------------- //video player -----------------------*/ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*! * lazyYT (lazy load YouTube videos) * v1.0.1 - 2014-12-30 * (CC) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. * http://creativecommons.org/licenses/by-sa/4.0/ * Contributors: https://github.com/tylerpearson/lazyYT/graphs/contributors || https://github.com/daugilas/lazyYT/graphs/contributors */ .lazyYT-container { display: block; height: 0; background-color: #000000; } .lazyYT-container iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* * Video Title (YouTube style) */ .lazyYT-container .html5-title { padding-right: 6px; padding-left: 12px; } .lazyYT-container .html5-title-text-wrapper { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; word-wrap: normal; white-space: nowrap; } .lazyYT-container .html5-title-text { width: 100%; font-size: 13px; line-height: 30px; color: #ccc; text-decoration: none; } .lazyYT-container .html5-title-text:hover { color: #fff; text-decoration: underline; } /* * Thumbnail */ .ytp-thumbnail { padding-bottom: inherit; cursor: pointer; background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* * Play button (YouTube style) */ .ytp-large-play-button { position: absolute; top: 50% !important; left: 50% !important; width: 86px !important; height: 60px !important; padding: 0 !important; margin: -29px 0 0 -42px !important; font-size: normal !important; font-weight: normal !important; line-height: 1 !important; opacity: .9; } .ytp-large-play-button-svg { opacity: .9; fill: #1f1f1f; } .lazyYT-image-loaded:hover .ytp-large-play-button-svg, .ytp-large-play-button:focus .ytp-large-play-button-svg { opacity: 1; fill: #24252D; } /*---------------- Grids ------------------*/ .grid-items-lines { position: relative; /*.grid-image { cursor: pointer; opacity: .25; &:focus, &:hover { opacity: 1; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; -o-transition: opacity .25s; transition: opacity .25s; } }*/ } .grid-items-lines::after { clear: both; content: ""; display: table; } .grid-items-lines .grid-item { width: 33.3333333333%; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: #ffffff; border-bottom: 1px solid white; border-right: 1px solid white; float: left; height: 25em; overflow: hidden; outline: none; padding: 2em; text-decoration: none; width: 100%; } @media only screen and (min-width: 768px) { .grid-items-lines .grid-item { width: 33.3333333333%; height: 25em; } } @media only screen and (min-width: 1170px) { .grid-items-lines .grid-item { width: 33.3333333333%; height: 22em; padding: 6em 4em; } } .grid-items-lines .grid-item img { display: block; height: 2.5em; margin-bottom: 1.2em; opacity: 0.2; } .grid-items-lines .grid-item h1 { color: #333; font-size: 1.5em; text-align: left; margin: 4px 0; font-family: "Open Sans", sans-serif; font-weight: 400; } @media only screen and (min-width: 768px) { .grid-items-lines .grid-item h1 { font-size: .9em; } } @media only screen and (min-width: 1170px) { .grid-items-lines .grid-item h1 { font-size: 1.3em; } } .grid-items-lines .grid-item p { color: rgba(51, 51, 51, 0.6); line-height: 1.5em; margin: 0; font-weight: 300; width: 100%; font-size: 1.4em; } @media only screen and (min-width: 768px) { .grid-items-lines .grid-item p { max-width: 100%; font-size: 1.3rem; } } @media only screen and (min-width: 1170px) { .grid-items-lines .grid-item p { font-size: 1.6rem; } } @media only screen and (min-width: 768px) { .grid-items-lines .grid-item-big { width: 66.6666666667%; } } @media only screen and (min-width: 1170px) { .grid-items-lines .grid-item-big { width: 66.6666666667%; } } @media only screen and (min-width: 768px) { .grid-items-lines .grid-item-big p { max-width: 90%; } } .grid-items-lines .bottom-cover { background: #ffffff; bottom: 0px; height: 3px; position: absolute; width: 100%; } .grid-items-lines .right-cover { background: #ffffff; height: 100%; position: absolute; right: 0px; width: 4px; } .grid-items-lines .iida-sketch:nth-of-type(2) { background: #ffffff url("../img/motion/iida/sketch/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-sketch:nth-of-type(3) { background: #ffffff url("../img/motion/iida/sketch/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(5) { background: #ffffff url("../img/motion/iida/story1/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(6) { background: #ffffff url("../img/motion/iida/story1/story2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(7) { background: #ffffff url("../img/motion/iida/story1/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(8) { background: #ffffff url("../img/motion/iida/story1/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(9) { background: #ffffff url("../img/motion/iida/story1/story5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(10) { background: #ffffff url("../img/motion/iida/story1/story6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(11) { background: #ffffff url("../img/motion/iida/story1/story7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards1:nth-of-type(12) { background: #ffffff url("../img/motion/iida/story1/story8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards2:nth-of-type(14) { background: #ffffff url("../img/motion/iida/story2/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards2:nth-of-type(15) { background: #ffffff url("../img/motion/iida/story2/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards2:nth-of-type(16) { background: #ffffff url("../img/motion/iida/story2/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards2:nth-of-type(17) { background: #ffffff url("../img/motion/iida/story2/story5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards2:nth-of-type(18) { background: #ffffff url("../img/motion/iida/story2/story6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .iida-boards2:nth-of-type(19) { background: #ffffff url("../img/motion/iida/story2/story7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(2) { background: #ffffff url("../img/motion/decay/story1/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(3) { background: #ffffff url("../img/motion/decay/story1/story2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(4) { background: #ffffff url("../img/motion/decay/story1/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(5) { background: #ffffff url("../img/motion/decay/story1/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(6) { background: #ffffff url("../img/motion/decay/story1/story5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(7) { background: #ffffff url("../img/motion/decay/story1/story6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(8) { background: #ffffff url("../img/motion/decay/story1/story7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards1:nth-of-type(9) { background: #ffffff url("../img/motion/decay/story1/story8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .shoot:nth-of-type(11) { background: #ffffff url("../img/motion/decay/shoot/shoot1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .shoot:nth-of-type(12) { background: #ffffff url("../img/motion/decay/shoot/shoot2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .shoot:nth-of-type(13) { background: #ffffff url("../img/motion/decay/shoot/shoot3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards2:nth-of-type(14) { background: #ffffff url("../img/motion/decay/story2/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards2:nth-of-type(15) { background: #ffffff url("../img/motion/decay/story2/story2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards2:nth-of-type(16) { background: #ffffff url("../img/motion/decay/story2/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .decay-boards2:nth-of-type(17) { background: #ffffff url("../img/motion/decay/story2/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(2) { background: #ffffff url("../img/motion/exposure/story1/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(3) { background: #ffffff url("../img/motion/exposure/story1/story2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(4) { background: #ffffff url("../img/motion/exposure/story1/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(5) { background: #ffffff url("../img/motion/exposure/story1/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(6) { background: #ffffff url("../img/motion/exposure/story1/story5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(7) { background: #ffffff url("../img/motion/exposure/story1/story6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(8) { background: #ffffff url("../img/motion/exposure/story1/story7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(9) { background: #ffffff url("../img/motion/exposure/story1/story8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(10) { background: #ffffff url("../img/motion/exposure/story1/story9.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(11) { background: #ffffff url("../img/motion/exposure/story1/story10.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards1:nth-of-type(12) { background: #ffffff url("../img/motion/exposure/story1/story11.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(14) { background: #ffffff url("../img/motion/exposure/story2/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(15) { background: #ffffff url("../img/motion/exposure/story2/story2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(16) { background: #ffffff url("../img/motion/exposure/story2/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(17) { background: #ffffff url("../img/motion/exposure/story2/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(18) { background: #ffffff url("../img/motion/exposure/story2/story5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(19) { background: #ffffff url("../img/motion/exposure/story2/story6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(20) { background: #ffffff url("../img/motion/exposure/story2/story7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(21) { background: #ffffff url("../img/motion/exposure/story2/story8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(22) { background: #ffffff url("../img/motion/exposure/story2/story9.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp-boards2:nth-of-type(23) { background: #ffffff url("../img/motion/exposure/story2/story10.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test1:nth-of-type(2) { background: #ffffff url("../img/motion/enerplex/test1/test1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test1:nth-of-type(3) { background: #ffffff url("../img/motion/enerplex/test1/test2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test1:nth-of-type(4) { background: #ffffff url("../img/motion/enerplex/test1/test3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test1:nth-of-type(5) { background: #ffffff url("../img/motion/enerplex/test1/test4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test1:nth-of-type(6) { background: #ffffff url("../img/motion/enerplex/test1/test5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test2:nth-of-type(8) { background: #ffffff url("../img/motion/enerplex/test2/test1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test2:nth-of-type(9) { background: #ffffff url("../img/motion/enerplex/test2/test2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test2:nth-of-type(10) { background: #ffffff url("../img/motion/enerplex/test2/test3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test2:nth-of-type(11) { background: #ffffff url("../img/motion/enerplex/test2/test4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-test2:nth-of-type(12) { background: #ffffff url("../img/motion/enerplex/test2/test5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(14) { background: #ffffff url("../img/motion/enerplex/story1/story1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(15) { background: #ffffff url("../img/motion/enerplex/story1/story2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(16) { background: #ffffff url("../img/motion/enerplex/story1/story3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(17) { background: #ffffff url("../img/motion/enerplex/story1/story4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(18) { background: #ffffff url("../img/motion/enerplex/story1/story5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(19) { background: #ffffff url("../img/motion/enerplex/story1/story6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .surfr-story1:nth-of-type(20) { background: #ffffff url("../img/motion/enerplex/story1/story7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test1:nth-of-type(2) { background: #ffffff url("../img/ui/guitar/sketch1/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test1:nth-of-type(3) { background: #ffffff url("../img/ui/guitar/sketch1/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test1:nth-of-type(4) { background: #ffffff url("../img/ui/guitar/sketch1/sketch3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test1:nth-of-type(5) { background: #ffffff url("../img/ui/guitar/test1/test3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test1:nth-of-type(6) { background: #ffffff url("../img/ui/guitar/test1/test4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(8) { background: #ffffff url("../img/ui/guitar/sketch2/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(9) { background: #ffffff url("../img/ui/guitar/sketch2/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(10) { background: #ffffff url("../img/ui/guitar/sketch2/sketch3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(11) { background: #ffffff url("../img/ui/guitar/test2/test1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(12) { background: #ffffff url("../img/ui/guitar/test2/test2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(13) { background: #ffffff url("../img/ui/guitar/test2/test3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test2:nth-of-type(14) { background: #ffffff url("../img/ui/guitar/test2/test4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test3:nth-of-type(16) { background: #ffffff url("../img/ui/guitar/sketch3/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test3:nth-of-type(17) { background: #ffffff url("../img/ui/guitar/sketch3/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test3:nth-of-type(18) { background: #ffffff url("../img/ui/guitar/sketch3/sketch3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test3:nth-of-type(19) { background: #ffffff url("../img/ui/guitar/test3/test1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test3:nth-of-type(20) { background: #ffffff url("../img/ui/guitar/test3/test2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test4:nth-of-type(22) { background: #ffffff url("../img/ui/guitar/sketch4/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test4:nth-of-type(23) { background: #ffffff url("../img/ui/guitar/sketch4/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test4:nth-of-type(24) { background: #ffffff url("../img/ui/guitar/test4/test1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test4:nth-of-type(25) { background: #ffffff url("../img/ui/guitar/test4/test2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test5:nth-of-type(27) { background: #ffffff url("../img/ui/guitar/survey/chart1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-test5:nth-of-type(28) { background: #ffffff url("../img/ui/guitar/survey/chart2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea1:nth-of-type(30) { background: #ffffff url("../img/ui/guitar/idea/ideaboard1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea1:nth-of-type(31) { background: #ffffff url("../img/ui/guitar/screens/melody1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea2:nth-of-type(33) { background: #ffffff url("../img/ui/guitar/idea/ideaboard2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea2:nth-of-type(34) { background: #ffffff url("../img/ui/guitar/screens/melody2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea2:nth-of-type(35) { background: #ffffff url("../img/ui/guitar/screens/strum1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea2:nth-of-type(36) { background: #ffffff url("../img/ui/guitar/screens/strum2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea3:nth-of-type(38) { background: #ffffff url("../img/ui/guitar/idea/ideaboard3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea3:nth-of-type(39) { background: #ffffff url("../img/ui/guitar/screens/melody3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea3:nth-of-type(40) { background: #ffffff url("../img/ui/guitar/screens/strum4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea3:nth-of-type(41) { background: #ffffff url("../img/ui/guitar/screens/strum5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea3:nth-of-type(42) { background: #ffffff url("../img/ui/guitar/screens/editing1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea4:nth-of-type(44) { background: #ffffff url("../img/ui/guitar/idea/ideaboard4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea4:nth-of-type(45) { background: #ffffff url("../img/ui/guitar/screens/melody4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea4:nth-of-type(46) { background: #ffffff url("../img/ui/guitar/screens/strum6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .guitar-idea4:nth-of-type(47) { background: #ffffff url("../img/ui/guitar/screens/editing2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-sitemap:nth-of-type(2) { background: #ffffff url("../img/ui/stortz/sitemap/sitemap1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-sitemap:nth-of-type(3) { background: #ffffff url("../img/ui/stortz/sitemap/sitemap2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-wireframes:nth-of-type(4) { background: #ffffff url("../img/ui/stortz/wireframes/wireframe1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-wireframes:nth-of-type(5) { background: #ffffff url("../img/ui/stortz/wireframes/wireframe2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-wireframes:nth-of-type(6) { background: #ffffff url("../img/ui/stortz/wireframes/wireframe3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-wireframes:nth-of-type(7) { background: #ffffff url("../img/ui/stortz/wireframes/wireframe4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-wireframes:nth-of-type(8) { background: #ffffff url("../img/ui/stortz/wireframes/wireframe5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-wireframes:nth-of-type(9) { background: #ffffff url("../img/ui/stortz/wireframes/wireframe6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-comp:nth-of-type(11) { background: #ffffff url("../img/ui/stortz/comps/comp1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-comp:nth-of-type(12) { background: #ffffff url("../img/ui/stortz/comps/comp2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-comp:nth-of-type(13) { background: #ffffff url("../img/ui/stortz/comps/comp3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-comp:nth-of-type(14) { background: #ffffff url("../img/ui/stortz/comps/comp4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-comp:nth-of-type(15) { background: #ffffff url("../img/ui/stortz/comps/comp5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-final:nth-of-type(17) { background: #ffffff url("../img/ui/stortz/final/desktop.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-final:nth-of-type(18) { background: #ffffff url("../img/ui/stortz/final/laptop.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-final:nth-of-type(19) { background: #ffffff url("../img/ui/stortz/final/tablet.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .stortz-final:nth-of-type(20) { background: #ffffff url("../img/ui/stortz/final/mobile.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-sitemap:nth-of-type(2) { background: #ffffff url("../img/ui/briarwood/sitemap/sitemap1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-sitemap:nth-of-type(3) { background: #ffffff url("../img/ui/briarwood/sitemap/sitemap2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-wireframe:nth-of-type(4) { background: #ffffff url("../img/ui/briarwood/wireframes/wireframe1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-wireframe:nth-of-type(5) { background: #ffffff url("../img/ui/briarwood/wireframes/wireframe2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-wireframe:nth-of-type(6) { background: #ffffff url("../img/ui/briarwood/wireframes/wireframe3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-wireframe:nth-of-type(7) { background: #ffffff url("../img/ui/briarwood/wireframes/wireframe4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-wireframe:nth-of-type(8) { background: #ffffff url("../img/ui/briarwood/wireframes/wireframe5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-wireframe:nth-of-type(9) { background: #ffffff url("../img/ui/briarwood/wireframes/wireframe6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(11) { background: #ffffff url("../img/ui/briarwood/comps/comp1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(12) { background: #ffffff url("../img/ui/briarwood/comps/comp2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(13) { background: #ffffff url("../img/ui/briarwood/comps/comp3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(14) { background: #ffffff url("../img/ui/briarwood/comps/comp4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(15) { background: #ffffff url("../img/ui/briarwood/comps/comp5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(16) { background: #ffffff url("../img/ui/briarwood/comps/comp6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-comp:nth-of-type(17) { background: #ffffff url("../img/ui/briarwood/comps/comp7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-final:nth-of-type(19) { background: #ffffff url("../img/ui/briarwood/final/desktop.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-final:nth-of-type(20) { background: #ffffff url("../img/ui/briarwood/final/laptop.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-final:nth-of-type(21) { background: #ffffff url("../img/ui/briarwood/final/tablet.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .bw-final:nth-of-type(22) { background: #ffffff url("../img/ui/briarwood/final/mobile.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-sitemaps:nth-of-type(2) { background: #ffffff url("../img/ui/ultimus/sitemap/sitemap1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-sitemaps:nth-of-type(3) { background: #ffffff url("../img/ui/ultimus/sitemap/sitemap2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-wireframes:nth-of-type(4) { background: #ffffff url("../img/ui/ultimus/wireframes/wireframe1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-wireframes:nth-of-type(5) { background: #ffffff url("../img/ui/ultimus/wireframes/wireframe2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-wireframes:nth-of-type(6) { background: #ffffff url("../img/ui/ultimus/wireframes/wireframe3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-wireframes:nth-of-type(7) { background: #ffffff url("../img/ui/ultimus/wireframes/wireframe4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-wireframes:nth-of-type(8) { background: #ffffff url("../img/ui/ultimus/wireframes/wireframe5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-wireframes:nth-of-type(9) { background: #ffffff url("../img/ui/ultimus/wireframes/wireframe6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(11) { background: #ffffff url("../img/ui/ultimus/comps/comp1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(12) { background: #ffffff url("../img/ui/ultimus/comps/comp2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(13) { background: #ffffff url("../img/ui/ultimus/comps/comp3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(14) { background: #ffffff url("../img/ui/ultimus/comps/comp4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(15) { background: #ffffff url("../img/ui/ultimus/comps/comp5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(16) { background: #ffffff url("../img/ui/ultimus/comps/comp6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(17) { background: #ffffff url("../img/ui/ultimus/comps/comp7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-comps:nth-of-type(18) { background: #ffffff url("../img/ui/ultimus/comps/comp8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-final:nth-of-type(20) { background: #ffffff url("../img/ui/ultimus/final/desktop.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-final:nth-of-type(21) { background: #ffffff url("../img/ui/ultimus/final/laptop.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-final:nth-of-type(22) { background: #ffffff url("../img/ui/ultimus/final/tablet.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .ultimus-final:nth-of-type(23) { background: #ffffff url("../img/ui/ultimus/final/mobile.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch1:nth-of-type(2) { background: #ffffff url("../img/branding/sole/research/brief.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch1:nth-of-type(3) { background: #ffffff url("../img/branding/sole/research/logo1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch2:nth-of-type(5) { background: #ffffff url("../img/branding/sole/research/logo2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch2:nth-of-type(6) { background: #ffffff url("../img/branding/sole/research/logo3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev1:nth-of-type(8) { background: #ffffff url("../img/branding/sole/dev1/logo1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev1:nth-of-type(9) { background: #ffffff url("../img/branding/sole/dev1/logo2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev1:nth-of-type(10) { background: #ffffff url("../img/branding/sole/dev1/logo3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev1:nth-of-type(11) { background: #ffffff url("../img/branding/sole/dev1/logo4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch3:nth-of-type(13) { background: #ffffff url("../img/branding/sole/research/logo4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch3:nth-of-type(14) { background: #ffffff url("../img/branding/sole/research/logo5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-sketch4:nth-of-type(16) { background: #ffffff url("../img/branding/sole/research/logo6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev2:nth-of-type(18) { background: #ffffff url("../img/branding/sole/dev2/logo1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev2:nth-of-type(19) { background: #ffffff url("../img/branding/sole/dev2/logo2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev2:nth-of-type(20) { background: #ffffff url("../img/branding/sole/dev2/logo3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev2:nth-of-type(21) { background: #ffffff url("../img/branding/sole/dev2/logo4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev3:nth-of-type(23) { background: #ffffff url("../img/branding/sole/dev3/logo1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev3:nth-of-type(24) { background: #ffffff url("../img/branding/sole/dev3/logo2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev3:nth-of-type(25) { background: #ffffff url("../img/branding/sole/dev3/logo3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-dev3:nth-of-type(26) { background: #ffffff url("../img/branding/sole/dev3/logo4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(28) { background: #ffffff url("../img/branding/sole/final/logo.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(29) { background: #ffffff url("../img/branding/sole/final/guide1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(30) { background: #ffffff url("../img/branding/sole/final/guide2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(31) { background: #ffffff url("../img/branding/sole/final/guide3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(32) { background: #ffffff url("../img/branding/sole/final/guide4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(33) { background: #ffffff url("../img/branding/sole/final/guide5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(34) { background: #ffffff url("../img/branding/sole/final/guide6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(35) { background: #ffffff url("../img/branding/sole/final/guide7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(36) { background: #ffffff url("../img/branding/sole/final/guide8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(37) { background: #ffffff url("../img/branding/sole/final/guide9.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(38) { background: #ffffff url("../img/branding/sole/final/guide10.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(39) { background: #ffffff url("../img/branding/sole/final/guide11.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .sole-final:nth-of-type(40) { background: #ffffff url("../img/branding/sole/final/guide12.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-sketch:nth-of-type(2) { background: #ffffff url("../img/branding/rise/sketch/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-sketch:nth-of-type(3) { background: #ffffff url("../img/branding/rise/sketch/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-dev1:nth-of-type(5) { background: #ffffff url("../img/branding/rise/dev/dev1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-dev1:nth-of-type(6) { background: #ffffff url("../img/branding/rise/dev/dev2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-dev2:nth-of-type(8) { background: #ffffff url("../img/branding/rise/dev/dev3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-dev2:nth-of-type(9) { background: #ffffff url("../img/branding/rise/dev/dev4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-dev3:nth-of-type(11) { background: #ffffff url("../img/branding/rise/dev/dev5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-dev3:nth-of-type(12) { background: #ffffff url("../img/branding/rise/dev/dev6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-logo:nth-of-type(14) { background: #ffffff url("../img/branding/rise/final/logo.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-card:nth-of-type(16) { background: #ffffff url("../img/branding/rise/final/cards1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-card:nth-of-type(17) { background: #ffffff url("../img/branding/rise/final/cards2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-card:nth-of-type(18) { background: #ffffff url("../img/branding/rise/final/letter.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-card:nth-of-type(19) { background: #ffffff url("../img/branding/rise/final/cardFront.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-card:nth-of-type(20) { background: #ffffff url("../img/branding/rise/final/cardBack.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-story:nth-of-type(22) { background: #ffffff url("../img/branding/rise/boards/board1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-story:nth-of-type(23) { background: #ffffff url("../img/branding/rise/boards/board2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-story:nth-of-type(24) { background: #ffffff url("../img/branding/rise/boards/board3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-story:nth-of-type(25) { background: #ffffff url("../img/branding/rise/boards/board4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-story:nth-of-type(26) { background: #ffffff url("../img/branding/rise/boards/board5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .rise-story:nth-of-type(27) { background: #ffffff url("../img/branding/rise/boards/board6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-sketch1:nth-of-type(2) { background: #ffffff url("../img/branding/exposure/sketch/fonts.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-sketch1:nth-of-type(3) { background: #ffffff url("../img/branding/exposure/sketch/sketch1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-sketch1:nth-of-type(4) { background: #ffffff url("../img/branding/exposure/sketch/sketch2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-sketch1:nth-of-type(5) { background: #ffffff url("../img/branding/exposure/sketch/sketch3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-sketch2:nth-of-type(7) { background: #ffffff url("../img/branding/exposure/sketch/sketch4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-sketch2:nth-of-type(8) { background: #ffffff url("../img/branding/exposure/sketch/sketch5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(10) { background: #ffffff url("../img/branding/exposure/final/poster.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(11) { background: #ffffff url("../img/branding/exposure/final/dvdFront.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(12) { background: #ffffff url("../img/branding/exposure/final/dvdBack.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(13) { background: #ffffff url("../img/branding/exposure/story/board1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(14) { background: #ffffff url("../img/branding/exposure/story/board2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(15) { background: #ffffff url("../img/branding/exposure/story/board3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(16) { background: #ffffff url("../img/branding/exposure/story/board4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .exp2-final:nth-of-type(17) { background: #ffffff url("../img/branding/exposure/story/board5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-sketch:nth-of-type(2) { background: #ffffff url("../img/branding/collabrate/sketch/sketch.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(4) { background: #ffffff url("../img/branding/collabrate/dev/board1.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(5) { background: #ffffff url("../img/branding/collabrate/dev/board2.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(6) { background: #ffffff url("../img/branding/collabrate/dev/board3.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(7) { background: #ffffff url("../img/branding/collabrate/dev/board4.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(8) { background: #ffffff url("../img/branding/collabrate/dev/board5.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(9) { background: #ffffff url("../img/branding/collabrate/dev/board6.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(10) { background: #ffffff url("../img/branding/collabrate/dev/board7.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(11) { background: #ffffff url("../img/branding/collabrate/dev/board8.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(12) { background: #ffffff url("../img/branding/collabrate/dev/board9.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(13) { background: #ffffff url("../img/branding/collabrate/dev/board10.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(14) { background: #ffffff url("../img/branding/collabrate/dev/board11.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(15) { background: #ffffff url("../img/branding/collabrate/dev/board12.jpg") no-repeat center top; background-size: cover; } .grid-items-lines .colla-dev:nth-of-type(16) { background: #ffffff url("../img/branding/collabrate/dev/board13.jpg") no-repeat center top; background-size: cover; } .notFound-container { background: url("../img/404/404-small.jpg") no-repeat center center; background-size: cover; height: 100%; width: 100%; overflow: hidden; top: 0; } @media only screen and (min-width: 768px) { .notFound-container { background: url("../img/404/404-large.jpg") no-repeat center center; } } .notFound-content { position: relative; top: 50vh; z-index: 1; padding: 0 20px; } .notFound-content h1 { font-family: "Open Sans", sans-serif; font-weight: 700; margin: 0 auto; } @media only screen and (min-width: 768px) { .notFound-content { padding: 0px; } } /*# sourceMappingURL=style.css.map */