- ,
- after,
- before {
margin: 0; padding: 0; box-sizing: inherit }
html { box-sizing: border-box }
html body { background-color: #332F2F; font-family: "Futura", "sans-serif" }
html a { text-decoration: none; color: #000 }
html ul, html ol { list-style: none }
@font-face { font-family: "Futura"; src: url("../fonts/FuturaPTMedium.woff") format("woff") }
.logo { position: absolute; top: 6vh; left: 5vw; z-index: 10000 }
.logo .logo__image { width: 10em; z-index: 10000; height: auto }
.skip { position: absolute; top: 6vh; right: 5vw }
.skip .skip__image { width: 4em; height: auto }
.container { width: 100vw; height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #332F2F; }
.media { min-width: 0; text-align: center }
.pulsing-logo { display: flex; flex-wrap: wrap; justify-content: center; transition: all 1s ease-in }
.pulsing-logo .pulsing-logo__project-text { flex: 100%; width: 100%; display: none; text-align: center; padding: 2em 2em 0em 2em }
.pulsing-logo .pulsing-logo__image { width: 15%; max-width: 100%; transition: display 1s ease-in }
.canals { position: absolute; top: 0; left: 0; height: 50vh; height: 90vh }
.canals .canals__image { display: none; width: 100vw; margin-top: -3%; height: 90vh }
.canals .canals__lipid-image, .canals .canals__water-image, .canals .canals__oil-image { position: absolute; margin-top: -3%; display: none; width: 100vw; height: 90vh }
.canals .canals__water-image { z-index: 1 }
.canals .canals__oil-image { z-index: 2 }
.canals .canals__lipid-image { z-index: 3 }
.buttons { position: absolute; display: none; right: 10vw; top: 50vh; z-index: 3 }
.buttons .off-button { display: flex; align-items: center; flex-wrap: wrap; flex: 1 }
.buttons .button-anchor { display: flex; flex: 1; align-items: center }
.buttons .button-anchor img { width: 40% }
.buttons .button-text { color: white; font-size: 1.1em }
.liposomes { position: absolute; z-index: -1; height: 95vh; width: 100vw; top: -12vh }
.liposomes video { position: absolute; z-index: -1; width: 100vw }
@media only screen and (max-width: 1200px) { .liposomes { top: 30vh } }
@media only screen and (min-width: 120px) and (max-width: 450px) { .canals .canals__lipid-image, .canals .canals__oil-image, .canals .canals__water-image { height: auto; margin-top: 15vh } .canals .canals__image { height: auto; margin-top: 15vh } .pulsing-logo .pulsing-logo__image { width: 35% } }