@font-face {
    font-family: 'galapagos_a_trialregular';
    src: url('../fonts/galapagosatrial-regular-webfont.woff2') format('woff2'),
         url('../fonts/galapagosatrial-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT-America-Mono-Light';
    src: url('../fonts/GT-America-Mono-Light.woff2') format('woff2'),
         url('../fonts/GT-America-Mono-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'FoundersGroteskX-Condensed-Regular';
    src: url('../fonts/FoundersGroteskX-Condensed-Regular.otf') format('otf'),
         url('../fonts/FoundersGroteskXCond-Reg.woff2') format('woff2'),
         url('../fonts/FoundersGroteskXCond-Reg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Terminal Grotesque';
    src: url('../fonts/Terminal-Grotesque.woff2') format('woff2'),
        url('../fonts/Terminal-Grotesque.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Terminal Grotesque Open';
    src: url('../fonts/Terminal-Grotesque-open.woff2') format('woff2'),
        url('../fonts/Terminal-Grotesque-open.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TTUltraBronzo ExtBd Lite';
    src: url('../fonts/TTUltraBronzo-Lite.eot');
    src: url('../fonts/TTUltraBronzo-Lite.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TTUltraBronzo-Lite.woff2') format('woff2'),
        url('../fonts/TTUltraBronzo-Lite.woff') format('woff'),
        url('../fonts/TTUltraBronzo-Lite.svg#TTUltraBronzo-Lite') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Road-Regular';
    src: url('../fonts/Road-Regular.eot');
    src: url('../fonts/Road-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Road-Regular.woff2') format('woff2'),
        url('../fonts/Road-Regular.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

* {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    /* -webkit-tap-highlight-color: rgba(0,0,0,0); */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.off_screen {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: .5em !important;
    margin: .5em !important;
}

a {
    color: #000;
}

ol {
    padding: 0 2em;
}

ol li a {
    font-size: 25px;
    line-height: 35px;
}

header {
    overflow: hidden;
    width: 100%;
    height: 1px;
    position: fixed;
    top: 0;
    left: 0;
}

.container {
    position: relative;
    display: inline-block;
    height: 100vh;
    width: 100vw;
}

.curtain {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    display: block;
    background: transparent;
    z-index: 100001;
    cursor: pointer;
}

.curtain.active {
    display: block;
    background: white;
}

.curtain.remove {
    display: none;
}

#cloud {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 1;
}

#overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    color: white;
}

.video-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -10;
    overflow: hidden;
    background: rgb(0, 0, 0);
}

.video-wrapper svg {
    fill: rgb(255, 255, 255);
    width: 100vw;
    height: 96vh;

    z-index: 10000;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(180deg);
}

.blob-space {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4.25vh;
    width: 100vw;
    background: white;
    z-index: 10;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    object-fit: cover;
    object-position: center;
}

.vid {
    position: absolute;
    height: 100%;
    width: 100%;
}

.mobile-bkg_video {
    display: none;
}

.fullscreen-bkg_video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 10000;
    overflow: hidden;
}

.object-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.object-wrap li {
    display: inline-block   ;
    padding: 0;
    margin: 0;
    margin-right: 10px;
}

.object-item img {
    max-width: 30px;
    max-height: 50px;
    padding: 0 14px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.time {
    position: fixed;
    bottom: .875rem;
    left: .75rem;
    width: auto;
    padding: 0;
    font-size: 6vw;
    line-height: 5vw;
    color:#00ff00;
    /* font-family: 'galapagos_a_trialregular', sans-serif; */
    letter-spacing: 1px;
    z-index: 10000;
    cursor: pointer;
}

#counter {
    position: absolute;
    bottom: 0;
    right: .25em;
    width: auto;
    padding: 0;
    font-size: 6vw;
    line-height: 5vw;
    color:#00ff00;
    /* font-family: 'galapagos_a_trialregular', sans-serif; */
    letter-spacing: 1px;
    z-index: 10000;
}

#mailto {
    position: fixed;
    bottom: .875rem;
    right: .75rem;
    width: auto;
    padding: 0;
    font-size: 6vw;
    line-height: 5vw;
    color: #00ff00;
    letter-spacing: 1px;
    z-index: 10000;
    font-family: 'GT-America-Mono-Light', sans-serif;
    font-size: 4vw;
    line-height: 4.5vw;
    letter-spacing:-1px;
    text-decoration:none;
    padding: 0;
    margin: 0;
}

.credits {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: #00ff00;
    color: white;
    opacity: 0;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: .25rem .875rem;
}

.credits.active {
    opacity: 1;
    z-index: 10001;
}

.credits ul {
    margin: 0;
    padding: 0;
}

.credits ul li {
    margin: 0;
    padding: 0;
    width: auto;
    display: block;
}

.credits p {
    position: relative;
    color: white;
    display: block;
    font-family: 'GT-America-Mono-Light', sans-serif;
    font-size: 4vw;
    line-height: 4.875vw;
    margin: 0;
    padding: 0;
}

.credits .close {
    position: fixed;
    bottom: .75rem;
    left: .875rem;
    color: white;
    display: none;
    font-family: 'GT-America-Mono-Light', sans-serif;
    font-size: 4vw;
    line-height: 4.5vw;
    z-index: 10001;
    text-decoration: none;
    cursor: pointer;
    padding: 0;

    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    background: transparent;
}

.credits .close:focus {
    outline-color: transparent;
    outline: none;
    border-color: transparent;
}

.credits .close.active {
    display: block;
}

.time, #counter {
    font-family: 'GT-America-Mono-Light', sans-serif;
    font-size: 4vw;
    line-height: 4.5vw;
}

.rickism, .marquee p {
    font-family: 'FoundersGroteskX-Condensed-Regular', sans-serif !important;
    font-size: 30vw;
    line-height: 1;
    max-height: 33%;
}

.v6 .rickism, .v6 .marquee p {
    font-family: 'Terminal Grotesque', sans-serif !important;
    font-size: 30vw;
    line-height: 1;
    max-height: 320px;
}

.v7 .rickism, .v7 .marquee p, .v9 .rickism, .v9 .marquee p {
    font-family: 'TTUltraBronzo ExtBd Lite', sans-serif !important;
    letter-spacing: -12px;
    line-height: .75;
}

.v8 .rickism, .v8 .marquee p {
    font-family: 'Road-Regular', sans-serif !important;
    max-height: 360px;
    font-size: 30vw;
    line-height: 1;
}

.v9 .rickism, .v9 .marquee p {
    font-size: 22.5vw !important;
    letter-spacing: -1px;
}

.v9 .marquee p {
    opacity: 0;
}

.v9 .rickism.active p, .v9 .marquee.active p {
    opacity: 1;
}

.v8 .marquee p {
    -moz-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    -o-transform: skew(-20deg, 0deg);
    -ms-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
}

.rick-cloud {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    height: auto;
    opacity: 1;
    z-index: 100;

    display: none;
}

.v9 .rick-cloud {
    top: 48%;
    width: 95%;
}

.v9 .rick-cloud-fore {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 95%;
    height: auto;
    opacity: 1;
    z-index: 10000;
    isolation: isolate;
}

.v9 .rick-cloud-fore .cls-1{fill:#fff;}
.v9 .rick-cloud-fore .cls-2{fill:#fff;}

.big-cloud {
    display: none;
}

.v1 .rick-cloud {
    display: block;
}

.v1 .blob {
    display: none;
}

.v9 .rick-cloud {
    display: block;
}

.v9 .blob {
    display: none;
}

.cls-1{fill:#fff;}
.cls-2{fill:none;}

.rickism, .rickisms {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 100;
    /* transform: translate(100%, -50%); */
    transform: translate(0, -50%);
    color: white;
    font-size: 20vw;
    font-family: sans-serif;
    white-space: nowrap;
}

.v9 .rickism {
    top: 53.25%;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: fixed;
    cursor: pointer;
    opacity: .97;
    z-index: 10001;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-animation: breathe 5s infinite;
    animation: breathe 5s infinite;
    background: blue;
    display: block;
}

@keyframes breathe {
    0%{opacity:.97;-webkit-transform:scale(1);transform:scale(1)}
    50%{opacity:1;-webkit-transform:scale(1.15);transform:scale(1.15)}
    100%{opacity:.97;-webkit-transform:scale(1);transform:scale(1)}
}

.dot.remove {
    opacity: 0 !important;
    display: none;
}

/* .active .rickism {
    transform: translate(0, -50%);
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    transition: all 1.5s linear;
    transition-delay: 1s;
} */

.rickism__copy {
    padding: 0 100vw;
    box-sizing: border-box;
}

.marquee {
    display: block;
    width: 100vw;
    min-height: 200px;

    position: absolute;
    overflow: hidden;

}

.marquee p {
    padding: 0;
    margin: 0;
    /* transition: all 10s cubic-bezier(.42,0,.58,1); */
    /* animation: marquee 10s linear infinite; */
    width: auto;
    /* float: left; */
    white-space: nowrap;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-style: italic;
    /* width: auto; */
}

.slider {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1000;
    color: white;
    mix-blend-mode: difference;
}

.v1 .slider, .v5 .slider, .v6 .slider {
    mix-blend-mode: normal;
}

.v9 .graphic-wrap.slide-start .rick-cloud-fore .cls-1 {
    fill: black;
}

.slides {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
}

.slider div.active{
    display: inline-block;
    opacity: 1;
}

.interstitial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    opacity: 0;
    z-index: 999;
}

.interstitial.slide-start {
    opacity: 1;
}

.v5 .interstitial, .v6 .interstitial {
    opacity: 0;
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: all .25s cubic-bezier(.57,.06,.05,.95);
    transition: all .25s cubic-bezier(.57,.06,.05,.95);
}

.v5 .vid.slide-start, .v6 .vid.slide-start {
    -webkit-filter: blur(36px);
    filter: blur(36px);
    -webkit-transition: all .25s cubic-bezier(.57,.06,.05,.95);
    transition: all .25s cubic-bezier(.57,.06,.05,.95);
}

.prev, .next{
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    cursor: pointer;
    color: transparent;
}

.object-1 {
    position: absolute;
    top: 2%;
    left: 34%;
    width: 24%;
    height: auto;
    opacity: 0;
    z-index: 100;
}

.object-2 {
    position: absolute;
    top: 15%;
    left: 64%;
    width: 34%;
    height: auto;
    opacity: 0;
    z-index: 100;
}

.object-3 {
    position: absolute;
    top: 4%;
    left: 4%;
    width: 14%;
    height: auto;
    opacity: 0;
    z-index: 100;
}

.object-4 {
    position: absolute;
    top: 44%;
    left: 34%;
    width: 18%;
    height: auto;
    opacity: 0;
    z-index: 100;
}

.object-1.active, .object-2.active, .object-3.active, .object-4.active {
    opacity: 1;
}

@media (min-aspect-ratio: 16/9) {
	.fullscreen-bkg_video, .mobile-bkg_video {
	    width: 100%;
	    height: auto;
	}
}

@media (max-aspect-ratio: 16/9) {
	.fullscreen-bkg_video, .mobile-bkg_video {
	    width: auto;
	    height: 100%;
	}
}

/* -------------------------------------------- General mobile ---------------------------------------*/

@media only screen and (max-width: 767px) {
    .credits {
        padding: .5rem .875rem;
    }
    .v9 .rickism {
        top: 57.25%;
    }
    .feb .video-wrapper {
        background: blue;
    }
    .mar .video-wrapper {
        background: RGBA(202, 43, 252, 1.00);
    }
    .feb .fullscreen-bkg_video {
        display: none;
    }
    .feb .mobile-bkg_video {
        position: absolute;
        display: block;
        width: 90%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
    }
    .mar .fullscreen-bkg_video {
        position: absolute;
        display: block;
        width: 90%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
    }
}

@media only screen and (max-device-width: 678px) {
	.container {
        position: relative;
        display: inline-block;
        height: 100vh;
        width: 100vw;
    }
}

@media only screen and (max-width: 568px) and (device-aspect-ratio: 40/71) {
    .v9 .rickism {
        top: 61.25%;
    }
}