video { /* override other styles to make responsive */ width: 100% !important; height: auto !important; margin-bottom: 3.125vw; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; margin-bottom: 3.125vw; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-bottom: 3.125vw; } @media (max-width: 440px) { body {background: #0013ff; animation: _bgcolorchange 50s; -webkit-animation: _bgcolorchange 50s; margin:0; padding:0; animation-iteration-count:infinite;} #preloader {display:none; opacity:0; width:0; height:0; overflow:hidden; position:fixed; top:0; left:0;} #preloader-curtain {display:block; background: #fff; width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:9999999999999999998;} #preloader-curtain.fadeaway {animation: fadeaway 1000ms; animation-fill-mode: forwards; animation-delay: 2500ms;} #loading-black {position: fixed; top: calc(50% - 40px); left: calc(50% - 40px); width:80px; height:80px; border-radius:100%; background: rgba(0,0,0,0); display:block;} #loading-white {width:80px; height:80px; background: url('/images/loader.png') center center no-repeat; background-size: contain; display:block; border-radius:100%;} #main .col1 {padding-left: 5vw; top:0; width: 95vw; height: auto; display: block; position: static; z-index:4;} #main .col2 {right: 6.25vw; top:0; width: 56.25vw; height: 100vh; display: none; position: fixed; animation-iteration-count:infinite;} #main .col2.pause {animation-play-state: paused;} #main .col3 {padding-left: 5vw; top:0; width: 95vw; height: auto; display: block; position: static; overflow: visible; z-index:6;} #main .col3::-webkit-scrollbar { display: none;} #main .col3 { -ms-overflow-style: none;} #hamburger-menu {width:44px; height: 44px; background: #ffef00; border-radius: 100%; display: block; position: fixed; right: 5vw; bottom: 5vw; z-index: 999;} .menu-overlay { display:none; background: white; width: 100vw; height: 100vh; position: fixed; } .menu-overlay a {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #fff; font-size: 18.25vw; position: static; text-decoration: none; border-bottom: 0px solid #000; transition: .3s ease-in; transition-property: border-bottom, color; margin-right:7.5vw; -webkit-text-stroke-width: 1.25px; -webkit-text-stroke-color: #0115ff; display: block;padding-left: 5vw;margin: 9vw 0vw;} .menu-overlay a:hover {color: #0115ff;} .hidden {display:none;} .cursor {display: none;} .more { display: none; position: fixed; bottom: 5vw; left: 5vw; } .stalking-title {display: none !important; width: 0px !important; height: 0px !important; padding: 0px!important; margin: 0px !important;} #main .col4 {left: 6.25vw; top:0; width: 56.25vw; height: 100vh;position: absolute; overflow: hidden; z-index:3; will-change: z-index; display: none !important; z-index: 1 !important;} #loader {height: 0vh; width: 100vw; position: fixed; top: 0px; left: 0px; display:block; z-index:99; opacity: 1; transition: all .75s ease-out; background: #fff;} #loader.active {height: 100vh; opacity: 1; background: #fff;} #loader.active.blue {height: 100vh; opacity: 1; background: blue;} #projects .content-overlay {display: none; opacijty: 0; width: 100vw; min-height: 100vh; color: #000; z-index: 999; position: absolute; top: 0; left:0; padding-bottom: 10vw;} #projects .content-overlay img {width: calc(100% - 0px); margin-bottom: 5vw; margin-top: 0px; min-height:150px; display:inline-block; background: url('/images/loader.png') center center no-repeat; background-size: 30px 30px;} #projects .content-overlay img.half-left {widtfh: calc(50% - (2.5vw/2)); float:none; display: inline-block} #projects .content-overlay img.half-right {widfth: calc(50% - (2.5vw/2)); float:none; display: inline-block} #projects #web img, #projects #prints img, #projects #paprika img {border:1px solid #ebebeb;} #projects #web.content-overlay .col1 .project-description a {font-family: 'Cinetype-Regular', Helvetica, Arial !important;} #projects .content-overlay img.bbar {margin-bottom:0px !important; height: auto !important; min-height: 0px !important; display: block !important;} #projects .content-overlay .col1 {padding: 10vw 5vw 10vw 5vw; width: 90vw; display: block; z-index:4;} #projects .content-overlay .col2 {padding: 0 5vw 0vw 5vw; width: 90vw; display: block;} #projects .content-overlay .content {width: 100vw; display: block;} #projects .content-overlay .col1 .project-title {display:block; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #0013ff; font-size: 9.25vw; padding-top: 0vw; line-heihght: 1.25; letter-spacing: .15px; overflow: hidden; width: 95vw;} #projects .content-overlay .col1 .project-description {display:block; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; font-style: normal; color: #0013ff; font-size: 4.25vw; padding-top: 7.55vw; line-height: 1.45; letter-spacing: .15px; width: calc(100% - 3.175vw);} #projects .content-overlay .col1 .project-description em {font-style: normal !important;} #projects .content-overlay .col1 .project-description a {color: #0013ff; text-decoration: underline; font-style: normal; border-bottom: 0px solid white;} #projects .content-overlay .col1 .field-of-work {display:block; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: 500; color: #0013ff; font-size: 4.25vw; padding-top: 7.5vw; line-height: 1.25; letter-spacing: .15px; text-transform: uppercase;} #projects .content-overlay .close .close-button {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: 500; color: #fff; font-size: 4.25vw; text-decoration: none; border-bottom: 0px solid #fff; transition: 1.35s ease-in; transition-property: border-bottom, color; cursor: pointer; z-index:99999;} #projects .content-overlay .close {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: 500; color: #fff; font-size: 4.25vw; position: fixed; left: 0vw; bottom: 0vw; text-decoration: none; transition: 1.35s ease-in; transition-property: border-bottom, color; cursor: pointer; z-index:99999; padding: 2.5vw 5vw 2.5vw 5vw; background: #0013ff;} #projects .content-overlay .col2 .images {margin-top:0vw; padding-bottom: 5vw; padding-top:5vw !important;} #projects .content-overlay iframe {width: calc(100% - 0px); margin-bottom:0px; margin-top: 0px; background: white; margin-bottom: 3.125vw;} #projects .content-overlay .divider {padding-top: 5vw; border-top:2px solid #0013ff;} #projects .content-overlay .divider2 {padding-top: 5vw; border-top:2px solid #0013ff;} #projects .content-overlay .hidden {display: none;} #projects #about img {width: calc(70% - 0px); margin-bottom: 0vw !important; margin-top: 0px; min-height:150px; display:inline-block; background: rgba(0,0,0,0); background-size: 30px 30px;} #projects #about .col2 .images {margin-top:0vw !important; text-align: center; display: table-cell; vertical-align: middle; max-height: 90vh;} #projects #about .col2 .images img {max-height: 90vh; width: auto !important;} #projects #about .col2 {display: none; min-height: 100vh;} #projects #about .col1 .project-description {display:block; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; font-style: normal !important; color: #0013ff; font-size: 4.25vw; padding-top: 0vw; line-height: 1.35; letter-spacing: .15px; width: calc(100% - 3.175vw);} #projects #about .col1 .project-description strong {font-weight: 500; font-family: 'Cinetype-Regular', Helvetica, Arial;} #projects #about .col1 .project-description em {font-style: normal !important;} #projects #about .col1 .project-description span.hex {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; padding-bottom: 1vw; display: block;} #projects #about .col1 .project-description p {padding-top:5vw;} #projects #about .col1 .project-description {max-height: 85vh; overflow: visible;} #projects #about .col1 .project-description ul {list-style-type: none; padding: 0 0 15vw 0; margin-top:0;} #projects #about .col1 .project-description ul li {padding-top:5vw; line-height: 1.35; letter-spacing: .15px; padding-bottom: 5vw;} #projects #about .col1 .project-description ul li.intro {padding-top:0vw; padding-bottom: 5vw;} #projects #about .col1 .project-description::-webkit-scrollbar { display: none;} #projects #about .col1 .project-description {-ms-overflow-style: none;} #projects #about .col1 .project-description ul li a:hover {border-bottom: 0px solid black;} #projects .content-overlay#about {background:#fff !important;} #projects #about .duplicate4largescreens {display: none;} #projects .content-overlay .col1 .project-description a:hover {border-bottom: 1px solid white;} #projects .content-overlay.blue {background: blue;} #projects .content-overlay.red {background: red;} #projects .content-overlay.purple {background: purple;} #projects .content-overlay.green {background: green;} #projects .content-overlay.orange {background: orange;} /* #projects .content-overlay.orange .close .close-button, #projects #favs.content-overlay .close .close-button, #projects #north.content-overlay .close .close-button, #projects #posters.content-overlay .close .close-button {color: black !important; border-bottom: 1px solid black !important;}*/ #projects .content-overlay.brown {background: brown;} #projects .content-overlay.black {background: #fff;} #project-preview {display: none !important; z-index: 1 !important;} .relative {position: relative; } .col4.show {z-index:5 !important;} #project-preview .project-name {height: 100vh; width: 56.25vw; transition: opacity .0s ease-in; opacity: 0;position: absolute; top: 0; left: 0; will-change: opacity;} #project-preview .project-name.show {opacity:1;} #main .col1 .intro {display:none; font-family: 'hvex', Helvetica, Arial; font-weight: 500; color: #000; font-size: 4.25vw; padding-top: 10vw; line-height: 1.25; letter-spacing: .15px; transition: line-height 5.35s ease-out; padding-bottom: 5vw;} #main .col1 .intro.active:hover {line-height: 1.25; } #main .col1 .more a {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #fff; font-size: 4.25vw; position: static; text-decoration: underline; border-bottom: 0px solid #000; transition: .3s ease-in; transition-property: border-bottom, color; margin-right:7.5vw;} #main .col1 .more a:hover {border-bottom: 0px solid #fff; color: #fff; transition: .5s ease-in; transition-property: border-bottom, color; text-decoration: none !important;} #main .col3 ul {list-style-type: none; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #fff; font-size: 8.5vw; padding: 0; margin: 0; padding-top:10vw; padding-bottom: 15vw; line-height: 1.5;} #main .col3 ul li {display: block; overflow: hidden; width:95vw; line-break: anywhere; } #main .col3 ul li a {text-decoration: none; color: #fff; transition: color .25s linear; padding: 0vw; transition: padding .25s ease-in; will-change: padding; transform: translateZ(0);} #main .col3 ul li a::after {text-decoration: none; color: #000; content:","; transition: color .15s linear;} #main .col3 ul li a:hover {color: #000; padding: 0 0 0 5vw;} #main .col3 ul li a:hover::after {color: #fff;} .clear {clear:both;} @keyframes bgcolorchange { 0% {background: blue;} 25% {background: green;} 50% {background: red;} 75% {background: purple;} 100% {background: blue;} } @-webkit-keyframes bgcolorchange /* Safari and Chrome - necessary duplicate */ { 0% {background: blue;} 25% {background: green;} 50% {background: red;} 75% {background: purple;} 100% {background: blue;} } @keyframes introintro { 100% {line-height: 1.25;} 0% {line-height: 500;} } @-webkit-keyframes introintro /* Safari and Chrome - necessary duplicate */ { 100% {line-height: 1.25;} 0% {line-height: 500;} } @keyframes loading { 100% {height:100vh; opacity:1;} 0% {height:0vh; opacity:0;} } @-webkit-keyframes loading /* Safari and Chrome - necessary duplicate */ { 100% {height:100vh; opacity:1;} 0% {height:0vh; opacity:0;} } @keyframes btw { 0% {background: blue;} 25% {background: green;} 50% {background: red;} 75% {background: purple;} 100% {background: blue;} } @keyframes fadeaway { 0% { opacity:1; } 99% { opacity: 0; } 100% { visibility: hidden; height: 0 px !important; opacity: 0; } } } @media (min-width: 441px) { body {background: #0013ff; animation: _bgcolorchange 50s; margin:0; padding:0; cursor: none !important; width:100vw; height: 100vh;} /* body.locked {overflow: hidden;}*/ body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 999000; } body .cursor__ball circle { fill: #ff0; } .none {display: none !important;} a:hover {cursor: none !important} #moving_div {display: block; width: 40vw; height: 40vw; background: red; position: absolute; opacity: 0; transition: all .15s ease-in; transform: scale(0.6)} #moving_div.show {display: block; width: 40vw; height: 40vw; background: red; position: absolute; opacity: 1; transition: all .15s ease-out; transform: scale(1.0)} #moving_div2 {display: block; width: 40vw; height: 40vw; background: red; position: absolute; opacity: 1; transition: all .15s ease-out; transform: scale(1.0); background: green !important; z-index:9999;} .stalking-title {mix-blend-mode: difference !important; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #0013ff; font-size: 17.25vw; padding-top: 4vw; line-heihght: 1.25; letter-spacing: .15px; z-index: -2 !important; position: fixed; width: 80vw !important; height: 90vh !important;} #cursor { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } #cursor circle { fill: #ff0; } .menu-overlay, #hamburger-menu {display: none;} #moving_div.hoverable.magveto {background: url('/preview/magveto.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.stalker {background: url('/preview/stalker.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.magveto {background: url('/preview/magveto.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.fekete-zaj {background: url('/preview/zaj.gif') no-repeat center center; background-size: cover;} #moving_div.hoverable.feketezaj2022 {background: url('/preview/zaj.gif') no-repeat center center; background-size: cover;} #moving_div.hoverable.audio {background: url('/preview/audio.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.posters {background: url('/preview/posters.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.accidental-cliches {background: url('/preview/cliches.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.geometric-studies {background: url('/preview/geometric.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.sony-one {background: url('/preview/sony1.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.paraphrase {background: url('/preview/paraphrase.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.north {background: url('/preview/68n.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.favs {background: url('/preview/favs.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.web {background: url('/preview/web.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.polszter {background: url('/preview/polszter.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.paprika {background: url('/preview/paprika.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.prints {background: url('/preview/print.jpg') no-repeat center center; background-size: cover;} #moving_div.hoverable.corner {background: url('/preview/corner_preview.jpg') no-repeat center center; background-size: cover;} #projects .content-overlay#about .col1 { margin-left: 5vw; top: 0; width: 42.5vw; display: block; z-index: 1; height: auto; float: left; } #projects .content-overlay#about .col2 { padding-left: 0vw; padding-right: 5vw; top: 0; width: 45vw; display: table; z-index: 1; float: right; } #preloader {display:none; opacity:0; width:0; height:0; overflow:hidden; position:fixed; top:0; left:0;} #preloader-curtain {display:block; background: #fff; width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:9999999999999999998;} #preloader-curtain.fadeaway {animation: fadeaway 1000ms; animation-fill-mode: forwards; animation-delay: 2500ms;} #loading-black {position: fixed; top: calc(50% - 40px); left: calc(50% - 40px); width:80px; height:80px; border-radius:100%; background: rgba(0,0,0,0); display:block;} #loading-white {width:80px; height:80px; background: url('/images/loader.png') center center no-repeat; background-size: contain; animation-fill-mode: forwards; display:block; border-radius:100%;} #main .col1 {left: 6.25vw; top:0; width: 25vw; height: 100vh; display: block; position: fixed; z-index:4;} #main .col2 {right: 6.25vw; top:0; width: 56.25vw; height: 100vh; animation: _bgcolorchange 50s; -webkit-animation: _bgcolorchange 50s; display: block; position: fixed; animation-iteration-count:infinite;} #main .col2.pause {animation-play-state: paused;} #main .col3 {left: 4vw; top:0; width: 90vw; height: 100vh; display: block; position: absolute; overflow-y: scroll; z-index:6;} #main .col3::-webkit-scrollbar { display: none;} #main .col3 { -ms-overflow-style: none;} #main .col4 {left: 6.25vw; top:0; width: 56.25vw; height: 100vh;position: absolute; overflow: hidden; z-index:3; will-change: z-index;} #loader {height: 0vh; width: 100vw; position: fixed; top: 0px; left: 0px; display:block; z-index:99; opacity: 1; transition: all .75s ease-out; background: #fff;} #loader.active {height: 100vh; opacity: 1; background: #fff;} #loader.active.blue {height: 100vh; opacity: 1; background: blue;} /* #projects .content-overlay {display: none; opacijty: 0; width: 100vw; color: #0013ff; z-index: 9999; position: absolute; top: 0; left:0; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch;}*/ #projects .content-overlay {display: none; opacijty: 0; width: 100vw; color: #0013ff; z-index: 9999; position: absolute; top: 0; left:0; min-height: 100vh;} #projects .content-overlay .images {text-align: center; padding-top: 46vh; z-index: 999999 !important;} /* #projects .content-overlay img {width: auto; margin-bottom: 3.125vw; margin-top: 0px; min-height:150px; display:inline-block; background: rgba(0,0,0,0); background-size: 30px 30px; max-height: 97.5vh; max-width: 100%;}*/ #projects .content-overlay img {width: 100%; margin-bottom: 3.125vw; margin-top: 0px; min-height:250px; display:inline-block; background: url('/images/loader.png') center center no-repeat; background-size: 80px 80px; z-index: 99999999999999;} #projects #web img, #projects #prints img, #projects #paprika img {border:1px solid #ebebeb;} #projects #web.content-overlay .col1 .project-description a {font-family: 'Cinetype-Regular', Helvetica, Arial !important;} #projects .content-overlay img.bbar {margin-bottom:0px !important; height: auto !important; min-height: 0px !important; display: block !important;} #projects .content-overlay img.half-left {width: calc(50% - (1.5625vw/2)); float:left; display: inline-block} #projects .content-overlay img.half-right {width: calc(50% - (1.5625vw/2)); float:right; display: inline-block} #projects .content-overlay .col1 {margin-left: 5vw; top:0; width: 25vw; display: block; z-index: 1; height: auto; float: left;} #projects .content-overlay .col2 {padding-left: 0vw; padding-right: 5vw; top:0; width: 45vw; display: block; z-index: 1; float: right;} #projects .content-overlay .content {width: 100vw; display: block;} #projects .content-overlay .col1 .project-title {display:none; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #0013ff; font-size: 17.25vw; padding-top: 4vw; line-heihght: 1.25; letter-spacing: .15px; z-index: 99999 !important;} #projects .content-overlay .col1 .project-description {display:block; font-family: 'Cinetype-Bold', Helvetica, Arial; font-weight: normal; font-style: normal; color: #0013ff; font-size: 0.75vw; padding-top: 5vw; line-height: 1.25; letter-spacing: .15px; width: calc(100% - 3.175vw); z-index: 99999999999999;} #projects .content-overlay .col1 .project-description em {font-style: normal !important; font-family: 'Cinetype-Italic', Helvetica, Arial !important; font-weight: normal;} #projects .content-overlay .col1 .project-description a {color: #0013ff; text-decoration: underline; font-family: 'Cinetype-Bold', Helvetica, Arial !important; border-bottom: 0px solid #0013ff;} #projects .content-overlay .col1 .field-of-work {display:block; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: 500; color: #0013ff; font-size: 0.75vw; padding-top: 2vw; line-height: 1.25; letter-spacing: .15px; text-transform: uppercase;} #projects .content-overlay .col1 .project-description a:hover {text-decoration: none!important;} #projects .content-overlay .close {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: 500; color: #000; font-size: 0.75vw; position: fixed; left: 5vw; bottom: 5vw; text-decoration: none; border-bottom: 0px solid #fff; transition: .15s ease-in; transition-property: border-bottom, color; cursor: none;text-transform: uppercase; z-index: 2;} #projects .content-overlay .close:hover {text-decoration: underline !important; color:#0013ff;} #projects .content-overlay .col2 .images {margin-top:4vw;} #projects .content-overlay iframe {width: calc(100% - 0px); margin-bottom:0px; margin-top: 0px; background: white; margin-bottom: 3.125vw;} #projects .content-overlay .divider {padding-top: 3.125vw; border-top:2px solid #0013ff; clear: both;} #projects .content-overlay .divider2 {padding-top: 3.125vw; border-top:2px solid #0013ff; clear: both;} #projects .content-overlay .hidden {display: none;} #projects .content-overlay .toppad {padding-top:5vw;} .section-divider {margin: 10vw 5vw 0vw 5vw; width: 90vw; height:2px; display: block; background: #0013ff; clear: both;} #projects .content-overlay section {margin-bottom: 0vh; z-index: 99999 !important; clear: both;} #projects #about img {width: calc(70% - 0px); margin-bottom: 0vw !important; margin-top: 0px; min-height:150px; display:inline-block; background: rgba(0,0,0,0); background-size: 30px 30px;} #projects #about .col2 .images {margin-top:0vw !important; text-align: right; display: table-cell; vertical-align: middle; max-height: 90vh; padding-top: 0!important;} #projects #about .col2 .images img {max-height: 90vh; width: auto !important;} #projects #about .col2 {display: table; min-height: 100vh;} #projects #about .col1 .project-description {display:block; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; font-style: normal !important; color: #0013ff; font-size: 0.75vw; padding-top: 0vw; line-height: 1.25; letter-spacing: .15px; width: calc(100% - 3.175vw);} #projects #about .col1 .project-description strong {font-family: 'Cinetype-Regular', Helvetica, Arial;} #projects #about .col1 .project-description em {font-style: normal !important;} #projects #about .col1 .project-description span.hex {font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; padding-bottom: 1vw; display: block;} #projects #about .col1 .project-description p {padding-top:2vw;} #projects #about .col1 .project-description {max-height: 85vh; overflow: scroll;} #projects #about .col1 .project-description ul {list-style-type: none; padding: 0 0 0 0; margin-top:0;} #projects #about .col1 .project-description ul li {padding-top:2vw; line-height: 1.25; letter-spacing: .15px;} #projects #about .col1 .project-description ul li.intro {padding-top:6vw; padding-bottom: 0vw !important;} #projects #about .col1 .project-description::-webkit-scrollbar { display: none;} #projects #about .col1 .project-description {-ms-overflow-style: none;} #projects #about .col1 .project-description ul li a:hover {text-decoration: none !important;} #projects #about.content-overlay .col1 .project-description a {color: #0013ff; text-decoration: underline; font-family: 'Cinetype-Regular', Helvetica, Arial !important; border-bottom: 0px solid #0013ff;} .embed-container {padding-bottom: 3.125vw !important;} .clear {clear: both;} /*#projects .content-overlay .col1 .project-description a:hover {border-bottom: 1px solid white;} #projects .content-overlay.blue .col2 {background: blue;} #projects .content-overlay.blue .col1 .project-description a {border-bottom: 1px solid blue;} #projects .content-overlay.rbed .col2 {background: red;} #projects .content-overlay.red .col1 .project-description a {border-bottom: 1px solid red;} #projects .content-overlay.purple .col2 {background: purple;} #projects .content-overlay.purple .col1 .project-description a {border-bottom: 1px solid purple;} #projects .content-overlay.green .col2 {background: green;} #projects .content-overlay.green .col1 .project-description a {border-bottom: 1px solid green;} #projects .content-overlay.orange .col2 {background: orange;} #projects .content-overlay.orange .col1 .project-description a {border-bottom: 1px solid orange;} #projects .content-overlay.brown .col2 {background: brown;} #projects .content-overlay.brown .col1 .project-description a {border-bottom: 1px solid brown;} #projects .content-overlay.black .col2 {background: black;} #projects .content-overlay.black .col1 .project-description a {border-bottom: 1px solid white;}*/ #projects .content-overlay .col1 .project-description a:hover {border-bottom: 1px solid white;} #projects .content-overlay.blue {background: blue;} #projects .content-overlay.blue .col1 .project-description a {border-bottom: 1px solid blue;} #projects .content-overlay.black {background: #0013ff;} #projects .content-overlay.black .col1 .project-description a {border-bottom: 1px solid blue;} #projects .content-overlay.rbed {background: red;} #projects .content-overlay.red .col1 .project-description a {border-bottom: 1px solid red;} #projects .content-overlay.purple {background: purple;} #projects .content-overlay.purple .col1 .project-description a {border-bottom: 1px solid purple;} #projects .content-overlay.green {background: green;} #projects .content-overlay.green .col1 .project-description a {border-bottom: 1px solid green;} #projects .content-overlay.orange {background: orange;} #projects .content-overlay.orange .col1 .project-description a {border-bottom: 1px solid orange;} #projects .content-overlay.brown {background: brown;} #projects .content-overlay.brown .col1 .project-description a {border-bottom: 1px solid brown;} #projects .content-overlay.black {background: #fff; padding-bottom: 1.75vw;} #projects .content-overlay.black .col1 .project-description a {border-bottom: 1px solid white;} .relative {position: relative; } .col4.show {z-index:5 !important;} /* #project-preview .project-name {height: 100vh; width: 56.25vw; transition: opacity .0s ease-in; opacity: 0;position: absolute; top: 0; left: 0; will-change: opacity;} #project-preview .project-name.stalker {background: url('/preview/stalker.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.magveto {background: url('/preview/magveto.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.fekete-zaj {background: url('/preview/zaj.gif') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.audio {background: url('/preview/audio.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.posters {background: url('/preview/posters.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.accidental-cliches {background: url('/preview/cliches.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.geometric-studies {background: url('/preview/geometric.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.paraphrase {background: url('/preview/paraphrase.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.north {background: url('/preview/68n.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.favs {background: url('/preview/favs.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.web {background: url('/preview/web.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity;} #project-preview .project-name.show {opacity:1;} */ #main .col1 .intro {display:none; font-family: 'hvex', Helvetica, Arial; font-weight: 500; color: #fff; font-size: 1.25vw; padding-top: 2vw; line-height: 1.25; letter-spacing: .15px; transition: line-height 5.35s ease-out;} #main .col1 .intro.active:hover {line-height: 500; letter-spacidng: 1500px; } #main .col1 .more li {list-style-type: none; padding: 0 0vw 0 0vw; display: -webkit-inline-box; margin: 0 !important;} #main .col1 .more a {padding: 0 1.5vw 0 1.5vw; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #fff; font-size: 1vw; text-decoration: underline; border-bottom:0px solid #fff; transition: all 0.0s ease-in;} #main .col1 .more { position: fixed; right: -31.5vh; top: calc(50vh - 15px); text-align: center; transform: rotate(-90deg); transform-origin: 50% 50%; width: 75vh;} #main .col1 .more a:hover {text-decoration: none!important; color:#fff !important;} #main .col3 ul {list-style-type: none; font-family: 'Cinetype-Regular', Helvetica, Arial; font-weight: normal; color: #fff; font-size: 6.5vw; padding: 0; margin: 0; margin-left: 0.5vw;} #main .col3 ul li {display: block; overflow: hidden; width:100vw; line-break: anywhere; } #main .col3 ul li a {text-decoration: none; color: #fff; transition: color .25s linear; padding: 0vw; transition: padding .25s ease-in; will-change: padding; transform: translateZ(0);} #main .col3 ul li a::after {text-decoration: none; color: #000; content:","; transition: color .15s linear;} #main .col3 ul li a:hover {color: #0013ff; padding: 0 0 0 12.75vw; cursor: none;} #main .col3 ul li a:hover::after {color: #0013ff;} .clear {clear:both;} /* @keyframes bgcolorchange { 0% {background: blue;} 25% {background: green;} 50% {background: red;} 75% {background: purple;} 100% {background: blue;} } @-webkit-keyframes bgcolorchange Safari and Chrome - necessary duplicate { 0% {background: blue;} 25% {background: green;} 50% {background: red;} 75% {background: purple;} 100% {background: blue;} } */ @keyframes introintro { 100% {line-height: 1.25;} 0% {line-height: 500;} } @-webkit-keyframes introintro /* Safari and Chrome - necessary duplicate */ { 100% {line-height: 1.25;} 0% {line-height: 500;} } @keyframes loading { 100% {height:100vh; opacity:1;} 0% {height:0vh; opacity:0;} } @-webkit-keyframes loading /* Safari and Chrome - necessary duplicate */ { 100% {height:100vh; opacity:1;} 0% {height:0vh; opacity:0;} } @keyframes btw { 0% {background: blue;} 25% {background: green;} 50% {background: red;} 75% {background: purple;} 100% {background: blue;} } @keyframes fadeaway { 0% { opacity:1; } 99% { opacity: 0; } 100% { visibility: hidden; height: 0 px !important; opacity: 0; } } }