@font-face { font-family: 'BellGothic-Light'; src: url('fonts/BellGotLig.eot'); } @font-face { font-family: 'BellGothic-Light'; src: url('fonts/BellGotLig.woff') format('woff'), url('fonts/BellGotLig.svg#BellGothic-Light') format('svg'); } @font-face { font-family: 'BellGothic-Bold'; src: url('fonts/BellGotBol.eot'); } @font-face { font-family: 'BellGothic-Bold'; src: url('fonts/BellGotBol.woff') format('woff'), url('fonts/BellGotBol.svg#BellGothic-Bold') format('svg'); } .loading * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; } *, *:active{ outline:0; box-sizing: border-box; } ::selection { background: #000; color:white; } ::-moz-selection { background: #000; color:white; } html,body{ width:100%; height:100%; margin:0; padding:0; box-sizing: border-box; text-rendering: optimizeLegibility; } body { background: #eee; font-family: 'BellGothic-Light'; font-size:16px; } /*! Flickity v1.0.0 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable .flickity-enabled.is-draggable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } */ /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0, 0%, 100%, 0.75); cursor: pointer; /* vertically center */ -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .desktop .flickity-prev-next-button:hover { background: white; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { filter: alpha(opacity=60); /* IE8 */ opacity: 0.6; } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button:disabled { filter: alpha(opacity=30); /* IE8 */ opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #333; } /* color & size if no SVG - IE8 and Android 2.3 */ .flickity-prev-next-button.no-svg { color: #333; font-size: 26px; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; filter: alpha(opacity=25); /* IE8 */ opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { filter: alpha(opacity=100); /* IE8 */ opacity: 1; } #scene { position: absolute; transition: 0.2s margin-left, 0.2s opacity; top: 0; left: 0; width: 100%; height: 100%; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } #scene:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; } #loader_rapper { -webkit-transition: 0.3s opacity !important; transition: 0.3s opacity !important; opacity: 1.0; } #loader_rapper.hidden { opacity: 0; } #loader_svg { position: absolute; left: 2.5%; top: 30%; height: 40%; width: 95%; } #loader_svg svg { width: 100%; height: 100%; } nav { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; z-index:6; color:black; font-size:0.8em; text-transform: uppercase; display: table; background: white; height:100vh; position: fixed; width: 160px; left:0; opacity:0.8; -moz-transform: translateX(-160px) scale(0.7, 1) skewY(-5deg); -webkit-transform: translateX(-160px) scale(0.7, 1) skewY(-5deg); transform: translateX(-160px) scale(0.7, 1) skewY(-5deg); -moz-transition: 0.2s -webkit-transform, 0.4s opacity; -webkit-transition: 0.2s -webkit-transform, 0.4s opacity; transition: 0.2s transform, 0.4s opacity; } .toplogo { width:130px; margin: 55px 7px 0px 7px; opacity: 0.8; margin-bottom: 0.6em; border-top: 1px solid #222; padding-top: 10px; } .desktop .toplogo:hover { cursor:pointer; opacity:1; } .menuActive nav { opacity:1; -moz-transform:translateX(0%)scale(1)skewY(0deg); -webkit-transform:translateX(0%)scale(1)skewY(0deg); transform:translateX(0%)scale(1)skewY(0deg); } nav .top, nav .middle, nav .bottom { display: table-row; width: 100%; overflow:hidden; } nav .top { background: ghostwhite; } nav .top .cat:first-child { margin-top:30px; } nav .middle { background: #ddd; } nav .bottom { height: 22%; width: 100%; background: #ddd; } nav a { text-decoration:none; display:inline-block; width:100%; color:black; } .contact { line-height: 14px; padding-left: 10px; padding-right: 10px; font-size: 10px; margin-top: 10px; vertical-align: bottom; } .contact a { display: inline; } .desktop nav .cat.about, .desktop nav .cat.hover, .desktop nav .cat:hover { cursor:pointer; background:#eee; } nav .cat.no-hover { opacity: 0.3; } .nav .cat.about { background: #E5E5E7; } .desktop nav a.active:hover { cursor:default; } nav .cat { padding: 3px 0 3px 10px; } nav .cat.active { cursor: default; display: inline-block; font-family: 'BellGothic-Bold'; } .desktop nav .top .cat.active:hover { background:transparent; } .middle .cat.active, .bottom .cat.active { background:#eee; width:100%; font-family: 'BellGothic-Light'; } nav .sub { display:inline; overflow:hidden; max-height:0; transition:0.7s max-height linear; width:100%; } nav .sub.active { display: inline-block; max-height: 450px; } nav .sub a { height:0; max-height:0; position:absolute; display:inline-block; overflow:hidden; width:0; opacity:0; cursor:pointer; float: left; -moz-transform:translateY(-5px)scale(0.7, 0.9)skew(30deg); -webkit-transform:translateY(-5px)scale(0.7, 0.9)skew(30deg); transform:translateY(-5px)scale(0.7, 0.9)skew(30deg); -moz-transition:0.7s -moz-transform linear, 0.2s opacity ease-in, 0.4s max-height linear; -webkit-transition:0.7s -webkit-transform linear, 0.2s opacity ease-in, 0.4s max-height linear; transition:0.7s transform linear, 0.2s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(1) { transition:0.2s transform linear, 0.2s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(2) { transition:0.4s transform linear, 0.4s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(3) { transition:0.6s transform linear, 0.6s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(4) { transition:0.8s transform linear, 0.8s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(5) { transition:1s transform linear, 1s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(6) { transition:1.1s transform linear, 1.1s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(7) { transition:1.2s transform linear, 1.2s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(8) { transition:1.3s transform linear, 1.3s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(9) { transition:1.4s transform linear, 1.4s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(10) { transition:1.5s transform linear, 1.5s opacity ease-in, 0.4s max-height linear; } nav .sub a:nth-child(11) { transition:1.6s transform linear, 1.6s opacity ease-in, 0.4s max-height linear; } nav .sub.active a { height:auto; position:relative; width:100%; max-height:70px; padding: 3px 0 5px 20px; opacity:1; -webkit-transform:translateY(0)scale(1)skew(0deg); -moz-transform:translateY(0)scale(1)skew(0deg); transform:translateY(0)scale(1)skew(0deg); } .desktop nav a.active, nav .sub a:hover { text-decoration:none; background:#eee; color:black; } .entry { color: #333; float: left; padding: 40px 20px; border-bottom: 0; margin-bottom: 2em; display: inline-block; width: 80%; width: calc(87% - 80px); margin-left: 180px; } .entry.all { /* width: 90%; */ } .entry h1{ margin-bottom: 1.2em; border-bottom: 1px solid; font-size: 0.6em; letter-spacing:0.1em; } .entry span{ float: left; width: 100%; } .postname { border-bottom: 1px solid #999; padding: 20px 0px 0.6em 2px; margin-bottom: 0.7em; font-size: 1em; text-transform: uppercase; } .galnav { display: inline-block; width: 100%; float: left; clear: both; } .galnav span{ width: 50%; background: #999; color: white; padding: 2px; font-size: 11px; transition:0.2s background; } .galnav .nextbutton{ text-align: right; background: #888; cursor:pointer; } .desktop .galnav span:hover { background:black; } .singleton .galnav { display: none } .credit { margin: 1em 0px 0px 0px; padding: 11px 0px; border-top: 1px solid; float: left; width: 100%; color: #909090; } .credit img { display:inline-block; opacity:0.9; cursor: pointer; width: 18px; } .desktop .credit img:hover { opacity:1; } .mx-object3d .image{ box-shadow:5px -10px 20px rgba(0,0,0,0.1); } .entry h1 { margin-bottom: 10px; border-bottom: 0px solid; } .entry span div.content { max-width:100%; font-size: 0.8em; line-height: 1.5em; float:left; padding-top:20px; border-top:1px solid #999; width:100%; /* -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; min-height: 130px; */ } .entry span div.content.noline { border-top: 0; padding-top: 0; } .entry span div.content div { /* min-height: 130px; */ width:50%; /* -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; */ } #scene_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #entry_container { position: absolute; top: 0; left: 0; height: 100%; overflow: auto; transition: left 0.2s linear, opacity 0.2s; width: 100%; } .entry.page img{ max-width:100%; max-height: 420px; } .gallery { width: 100%; height: 70vh; overflow: hidden; float:left; display:inline-block; cursor: url(images/next.png), auto!important; background: white; } .singleton .gallery, .singleton .cell { cursor: pointer !important; } .cell { display:inline-block; height:100%; cursor: url(images/next.png), auto!important; } .gallery.prev, .gallery.prev .cell { cursor: url(images/prev.png), auto!important; } .cell.video { width: 80%; background-size: cover; background-position: center center; } .singleton .cell.video { width: 100%; } .cell.video.playing { background: black !important; } .cell.video.playing .play { display: none; } .cell.video .play { background-image: url(images/play-button2.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; cursor: pointer !important; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100px; height: 100px; opacity: 0.7; z-index: 4; pointer-events: none; } .desktop .cell.video.is-selected .play { pointer-events: auto; } .desktop .cell.video .play:hover { opacity: 1.0; } .cell iframe { width: 100%; height: 100%; opacity:0.2; -webkit-transition:0.4s opacity ease-in; transition:0.4s opacity ease-in; pointer-events: none; /* height: 200%; -webkit-transform: translateY(-25%); transform: translateY(-25%); */ } .cell .underlay { position: absolute; top: 0; left: 0; width: 100%; height:100%; opacity:0.2; -webkit-transition:0.4s opacity ease-in; transition:0.4s opacity ease-in; pointer-events: none; background-size: cover; background-position: center center; } .fullscreen { text-align: right; } :-webkit-full-screen #okgallery { width: 100%; height: 100%; } .gallery:fullscreen, *:-webkit-full-screen .gallery, *:fullscreen .gallery { width: 100%; height: 100%; } :-webkit-full-screen #okgallery { width: 100%; height: 100%; } .full-screen #okgallery { width: 100%; height: 100%; } :-webkit-full-screen .cell.video, .full-screen .cell.video { width: 100%; } .caption { background: rgb(223, 223, 223); text-transform: uppercase; float: left; clear: both; width: 100%; padding: 2px; font-size: 0.77em; margin-bottom: 10px; } .caption:after { content:"VIEW IN FULLSCREEN"; text-align: left; float: left; opacity: 1.0; cursor:pointer; } .msie .entry .caption { display: none; } .desktop .caption:hover { background:#222; color:#222; cursor:pointer; } .desktop .caption:hover::after { color:white; opacity:1; } .cell img { height:100%; opacity:0.0; transition:0.4s opacity ease-in; } .cell img.loading { opacity: 0.0 !important; } .cell img.loaded { opacity: 0.2; } .cell.is-selected .underlay, .cell.is-selected img.loaded, .cell.is-selected iframe { opacity:1; pointer-events: auto; } .cell .underlay { z-index: 2; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .cell.loaded .underlay { background-image: none !important; } .cell.playing .underlay { pointer-events: none; opacity: 0; } .logo { position: fixed; right: 2%; bottom: 10px; width: 6%; max-width:120px; min-width: 45px; } .logo img { width:100%; } .loading .logo, .loading .toggleRapper { display: none; } .toggleRapper { width: 50px; position: fixed; top: 0; left: 0; padding: 25px 4px; z-index: 5555; cursor: pointer; height: 20px; } .menuToggle { display:block; height:3px; width:30px; background:black; position:relative; cursor: pointer; transition:all 0.2s; } .menuToggle:before { content:''; position:absolute; top:-10px; width:30px; height:3px; background:#000; transition:all 0.2s; } .menuToggle:after { content:''; position:absolute; top:10px; width:30px; height:3px; background:#000; transition:all 0.2s; } .menuActive .menuToggle { background:transparent; } .menuActive .menuToggle:before { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); top:0; } .menuActive .menuToggle:after { -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); top:0; } .entry .brady { width: 72vw; } .brady { display: block; } .brady > a { width: 18vw; height: 18vw; background-size: cover; background-position: center center; position: relative; display: block; float: left; } .brady div { width: 100%; position: relative; display: block; float: left; padding: 1em 0.5em 1em 0vw; font-size: 0.8em; line-height: 1.5em; border-bottom: 1px solid black; margin: 1em 0; font-family: 'BellGothic-Bold'; } .brady div.aboutcontent { border: 0; } .aboutcontenttext { display: none } .brady div.collabscontent { border-top: 1px solid black; } .brady div.contactcontent { margin-top: 0; padding-top: 0; } .all .contactcontent { width: 100%; clear: both; position: relative; top: 1em; margin-left: 10px; padding: 1em 0; font-size: 0.8em; line-height: 1.5em; border-bottom: 1px solid black; border-top: 1px solid black; } .desktop .brady > a:hover:after { content: 'SAY HELLO!'; position: absolute; top: 40%; left: 0; text-decoration: underline; text-align: center; font-size: 22px; width: 100%; } .brady span { position: absolute; bottom: 0; left: 0; background: white; opacity: 0; color: black; margin-top: -4px; font-size: 0.8em; line-height: 1.5em; padding: 2px 0 1px 2px; transition: 0.1s opacity ease-in; display: block; text-overflow: ellipsis; text-transform: uppercase; } .desktop .brady > a:hover span { opacity: 1; } .project { float: left; width: 25%; width: 19vw; height: 200px; height: 12.3vw; padding: 10px 0px 0 10px; cursor: pointer; opacity: 0.0; font-size: 0.8em; transition: 0.1s opacity ease-in; transition-delay:0.4s; } .desktop .ready .project:hover { opacity: 1.0; } .msie .project { opacity: 1.0 !important; } .entry.hover .project { opacity: 0.5 } .entry.hover .project.hover { opacity: 1.0 } .project img { width: 100%; } .ready .project { opacity: 0.8; } .ready .project { -webkit-transition-delay: 0s !important; transition-delay: 0s !important; } .project span { position: relative; top: -19px; background: white; opacity: 0; transition: 0.1s opacity ease-in; display: block; text-overflow: ellipsis; text-transform: uppercase; } .mobile .project span, .desktop .project:hover span, .msie .project span { opacity: 1; } .undone .project:nth-child(1) { transition-delay:0.05s; } .undone .project:nth-child(2) { transition-delay:0.1s; } .undone .project:nth-child(3) { transition-delay:0.15s; } .undone .project:nth-child(4) { transition-delay:0.2s; } .undone .project:nth-child(5) { transition-delay:0.25s; } .undone .project:nth-child(6) { transition-delay:0.3s; } .undone .project:nth-child(7) { transition-delay:0.35s; } .undone .project:nth-child(8) { transition-delay:0.4s; } .undone .project:nth-child(9) { transition-delay:0.45s; } .undone .project:nth-child(10) { transition-delay:0.5s; } .undone .project:nth-child(11) { transition-delay:0.55s; } .undone .project:nth-child(12) { transition-delay:0.6s; } .undone .project:nth-child(13) { transition-delay:0.65s; } .undone .project:nth-child(14) { transition-delay:0.7s; } .undone .project:nth-child(15) { transition-delay:0.75s; } .undone .project:nth-child(16) { transition-delay:0.8s; } .undone .project:nth-child(17) { transition-delay:0.85s; } .undone .project:nth-child(18) { transition-delay:0.9s; } .undone .project:nth-child(19) { transition-delay:0.95s; } .undone .project:nth-child(20) { transition-delay:1.00s; } .undone .project:nth-child(21) { transition-delay:1.05s; } .undone .project:nth-child(22) { transition-delay:1.1s; } .undone .project:nth-child(23) { transition-delay:1.15s; } .undone .project:nth-child(24) { transition-delay:1.2s; } .undone .project:nth-child(25) { transition-delay:1.25s; } .undone .project:nth-child(26) { transition-delay:1.3s; } .undone .project:nth-child(27) { transition-delay:1.35s; } .undone .project:nth-child(28) { transition-delay:1.4s; } .undone .project:nth-child(29) { transition-delay:1.45s; } .undone .project:nth-child(30) { transition-delay:1.50s; } #entry_container.visible { top: 0%; } .postname, .gallery, .mainimg, .caption, .content, .credit { -webkit-transform-origin: 100% 10%; transform-origin: 100% 10%; -webkit-transform: rotateY(90deg) ; transform: rotateY(90deg); } .ready .postname, .ready .gallery, .ready .mainimg, .ready .caption, .ready .content, .ready .credit { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .postname { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-delay: 0.0s; transition-delay: 0.0s; } .gallery, .mainimg { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .caption { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .content { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .credit { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } @media (max-width:1200px) { .project { width:33.3333%; height: 16.6vw; } .brady > a { width: 24vw; height: 24vw; } .brady > a:nth-child(3) { margin-right: 0vw; } } @media (max-width:900px) { .project { width:50%; height: 23vw; } } @media (max-width:600px) { .entry span div.content { /* -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; */ } #entry_container .entry { width:100%; margin-left:0; } .flickity-viewport { height: 37vh; } .logo img { width:50px; } .gallery{ height:37vh; } .caption:after { content:""; } .project { width: 100%; padding: 0 0 0 25px; height: 55vw; } .menuActive #entry_container { left:120px; } #scene { -webkit-transition: left 0.2s; transition: left 0.2s; } .menuActive #scene { left:160px; } body { font-size: 18px; } nav { font-size: 0.6em; width: 120px; } nav .bottom { height: 27%; } nav .sub.active a { padding: 2px 0 4px 20px; } nav .cat { padding: 2px 0 2px 10px; } .contact { margin-top: 6px; } .menuActive #entry_container .entry.all { width:65%; } .menuActive .project { height: 36vw; text-transform: uppercase; font-size:0.6em; } .menuActive .project span { top: -18px; } .brady > a { display: none; width: 35vw; height: 35vw; } .brady { width: 100%; } .brady span { font-size: 13px !important; } .brady div { width: 100%; border: 0; margin: 0.5em; margin-left: 2em; padding: 0; font-size: 13px !important; } .brady > a:nth-child(3) { margin-right: 0vw; } .brady span.aboutcontenttext { position: static; bottom: auto; left: auto; opacity: 1; background: transparent; } .aboutcontent { display: block } .aboutcontenttext { display: inline } .aboutcontent img { display: none } } .mobile .cell iframe { width: 100%; opacity: 0.0!important; transition:0.4s opacity ease-in; z-index: 100; height: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); } .mobile .play { pointer-events: none; opacity: 1; }