oy_style.css

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    font-family: geo_light, Fallback, sans-serif;
    color: #2a2a2a;
}

@font-face {
    font-family: 'geo_med';
    src: url('geo_med.ttf') format('truetype');
}

@font-face {
    font-family: 'geo_light';
    src: url('geo_light.ttf') format('truetype');
}

.slide {
    position: relative;
    top: 0;
    width: 100%;
    height: 85%;
    overflow: hidden;
}

a {
    color:black;
}

.protocol_link:hover {
    cursor: pointer;
}

.hidden {
    display:none;
    opacity:0;
}

.hide_generic {
    visibility: hidden;
    opacity: 0;
    transition: all .7s ease-out;
    transition-delay: 0.2s;
}
.hide_final {
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-out;
    transition-delay: 2.4s;
}
.show_generic {
    visibility: visible;
    opacity: 1;
}
.hide_fixed {
    visibility: hidden;
    opacity: 0;
    transition: all .6s ease-out;
}
.hide {
    transform: translateY(30%);
    visibility: hidden;
    opacity: 0;
    transition: all .6s ease-out;
}
.show {
    transform: none;
    visibility: visible;
    opacity: 1;
}

@media screen and (orientation: landscape) {

    .shell_img {
        position: relative;
        width: auto;
        height: auto;
        max-height: 28vh;
        max-width: 35vh;
        top: -1vh;
        left: 0;
        animation: bounce 8s ease-in-out infinite;
        animation-delay: 0.1s;
        z-index: 100;
    }

    .shell_cont_img {
        position: absolute;
        top: 6vh;
        left: 50%;
        height: 35vh;
        transform: translateX(-50%);
    }

    .shadow {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6.5vh;
        animation: expand 4s ease-in-out infinite;
        animation-direction: alternate;
        animation-delay: 0.1s;
    }

    .logo_text {
        position: absolute;
        left: 50%;
        top: 8.5vh;
        transform: translateX(-50%) translateY(-25%) translateY(32vh);
        background-color: rgba(255, 32, 38, 0.1)
    }

    .logo_text_sub {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        max-height: 6vh;
        max-width: 50vh;
    }

    .front_video {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top:47vh;
        width: 80vh;
        height: 0;
        padding-bottom: 45vh;
        z-index: 10000;
    }

    .front_text {
        position: absolute;
        top:64vh;
        left:50%;
        width:80vh;
        transform: translateX(-50%);
        font-size: 2.5vh;
        text-align: center;
    }

    .front_extra {
        position:absolute;
        bottom:1vh;
        left:1vh;
        padding:1vh;
        font-size:1.5vh;
        border: 0.5vh solid rgba(71, 71, 71, 0.98);
        text-align: center;
    }

    .front_nav {
        position:absolute;
        bottom:6.5vh;
        right:1vh;
        width: 30vh;
        height:12vh;
        padding:1vh;
        font-size:1.8vh;
        color: #131313;
        text-align: right;
    }

    .description {
        position: absolute;
        top:50%;
        left:40vh;
        transform: translateY(-50%);
        font-size: 2.5vh;
        text-align: left;
        width: calc(50% - 10vh);
    }

    .pop_up {
        position: absolute;
        left:50%;
        transform: translate(-75%, -50%) scale(0.5);
        width: 85vh;
        height: 25vh;
        z-index: 620;
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-out;
        transition-delay: 0.4s;
    }

    .fade_up {
        position: absolute;
        left:50%;
        transform: translate(-50%, -65%) scale(0.995);
        width: 85vh;
        height: 25vh;
        z-index: 620;
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-out;
        transition-delay: 0.1s;
    }

    .feature_slide {
        height:225vh;
    }

    .feature {
        position: absolute;
        left:50%;
        transform: translate(-50%, -30%);
        width: 85vh;
        height: 25vh;
        z-index: 620;
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-out;
    }

    .feature_title {
        position: fixed;
        top: 0;
        left: 14.5vh;
        width: 100%;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 4vh;
        text-align: left;
    }

    .feature_content {
        position: fixed;
        top: 5vh;
        left: 14.5vh;
        width: calc(100% - 16vh);
        font-family: geo_light, Fallback, sans-serif;
        font-size: 2.5vh;
        text-align: left;
    }

    .feature_cont_img {
        position: fixed;
        top: 0;
        left: 0;
        width: 12vh;
        height: 100%;
    }

    .feature_img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: auto;
        height: auto;
        max-height: 12vh;
        max-width: 12vh;
    }

    .oy_problem_pos {
        top:46%;
        left:calc(50% + 14vh);
    }

    .feature_cont_img.oy_problem {
        left:-15vh;
        height:23vh;
    }

    .feature_img.oy_problem {
        max-height: 40vh;
        max-width: 40vh;
    }

    .oy_solution_pos {
        top:40%;
        left:calc(50% + 14vh);
    }

    .feature_cont_img.oy_solution {
        left:-10vh;
        top:-7vh;
    }

    .oy_project_pos {
        top:40%;
        left:calc(50% + 14vh);
    }

    .feature_cont_img.oy_project {
        left:-15vh;
        height:30vh;
    }

    .feature_img.oy_project {
        max-height: 40vh;
        max-width: 40vh;
    }

    .press {
        position:absolute;
        bottom:0.5vh;
        left:50%;
        transform:translateX(-50%)
    }

    .press_lead {
        font-size:1.6vh;
        font-family: geo_med, Fallback, sans-serif;
        text-align: center;
    }

    .press_img {
        width: auto;
        height: 2.5vh;
        filter:grayscale(100%);
        opacity:0.6;
        transition-duration: 0.5s;
    }

    .press_img:hover {
        filter:none;
        opacity:1;
    }

    .exchange_img {
        width: auto;
        height: 5vh;
        filter:grayscale(100%);
        transform:translateX(100%);
        opacity:0.6;
        transition-duration: 0.5s;
    }

    .exchange_img:hover {
        filter:none;
        opacity:1;
    }

    .core_team {
        position:absolute;
        top:10%;
        width:120vh;
        height:80vh;
        color:#2a2a2a;
    }

    .core_team_lead {
        font-size:3vh;
        font-family: geo_med, Fallback, sans-serif;
    }

    .core_team_unit {
        position:absolute;
        width:40%;
        height:50%;
        font-size:2vh;
        text-align: center;
    }

    .core_team_name {
        position:absolute;
        top:0;
        left:0;
        text-align:right;
        transform:translateY(-100%);
        font-size:3vh;
        width:49%;
        font-weight: bold;
    }

    .core_team_contact {
        transform:translateY(-100%);
        position:absolute;
        right:0;
        top:0;
        width:49%;
        text-align:left;
        font-size:1.5vh;
    }

    .core_team_text {
        font-size:1.6vh;
        text-align: left;
        color: #4b4b4b;
    }

    .el_logo {
        max-width:9vh;
        max-height:9vh;
    }

    .el_container {
        position:absolute;
        top:70%;
        left:55%;
        transform: translateX(-50%);
        width:85vh;
    }

    .el_discussion {
        position:absolute;
        top:0;
        left:0;
        width:20vh;
        font-size:3vh;
        font-weight:bold;
        color:#FFF;
    }

    .el_whitepaper {
        position:absolute;
        top:0;
        left:50%;
        width:20vh;
        transform: translateX(-55%);
        font-size:3vh;
        font-weight:bold;
        color:#FFF;
    }

    .el_team {
        position:absolute;
        top:0;
        right:0;
        width:20vh;
        font-size:3vh;
        font-weight:bold;
        color:#FFF;
    }

    .protocol_cont_img {
        position: absolute;
        top: 2vh;
        left: 0;
        width: 22%;
        height: 8vh;
        display:none;
    }

    .protocol_img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-height: 12vh;
        max-width: 12vh;
    }

    .protocol_box {
        position: absolute;
        top:calc(3% + 16vh);
        left:50%;
        transform: translateX(-50%);
        width: 85vh;
        visibility: hidden;
        opacity: 0;
        transition: all .4s ease-out;
        border-radius:1vh;
    }

    .protocol_box_first {
        position: absolute;
        top:calc(3% + 16vh);
        left:50%;
        transform: translateX(-50%);
        width: 85vh;
        visibility: hidden;
        opacity: 0;
        transition: all .4s ease-out;
        border-radius:1vh;
    }

    .protocol_overview {
        position:absolute;
        top:3%;
        left:50%;
        transform:translateX(-50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:4vh;
    }

    .protocol_nav {
        position:absolute;
        top:calc(3% + 5.5vh);
        left:50%;
        transform:translateX(-50%);
        text-align:center;
        font-size:3vh;
        font-weight:bold;
        border: solid 0.3vh rgba(42, 42, 42, 0.87);
        padding:1.2vh;
    }

    .protocol_title {
        position: absolute;
        top: 1vh;
        left:0;
        width: 100%;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 4vh;
        text-align: center;
    }

    .protocol_caption {
        position: relative;
        top: 0;
        font-family: geo_light, Fallback, sans-serif;
        font-size: 3vh;
    }

    .protocol_head {
        position: relative;
        top: 0;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 2.6vh;
    }

    .protocol_content {
        position: absolute;
        bottom: 1.5vh;
        left: 50%;
        transform:translateX(-45%);
        width: calc(100% - 3vh);
        font-family: geo_light, Fallback, sans-serif;
        font-size: 2.4vh;
        text-align: left;
    }

    .pr1_height {
        height:52vh;
    }

    .pr2_height {
        height:58vh;
    }

    .pr3_height {
        height:61vh;
    }

    .pr4_height {
        height:31vh;
    }

    .pr5_height {
        height:37vh;
    }

    .pr6_height {
        height:31vh;
    }

    .iphone_text {
        position: absolute;
        top: 50%;
        right: 2vh;
        transform: translateY(-35%);
        width:40vh;
        font-size: 2.4vh;
        visibility: hidden;
        opacity: 0;
        transition: all 1.2s ease-out;
    }

    .iphone_title {
        font-family: geo_med, Fallback, sans-serif;
        font-size:4vh;
    }

    .iphone_img {
        position: absolute;
        top: 50%;
        left: 2vh;
        transform: translateY(-60%);
        width: auto;
        height: auto;
        max-height: 70vh;
        max-width: 70vh;
        visibility: hidden;
        opacity: 0;
        transition: all 1.2s ease-out;
    }

    .code_demo {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Courier new', monospace;
        font-size: 1.3vh;
        font-weight: bold;
        padding: 0.8vh;
        border-radius: 1vh;
        background-color: #2e2e2e;
        text-align: center;
    }

    .countdown_major {
        position:absolute;
        left:50%;
        top: calc(30% - 10vh);
        width:40vh;
        height:5vh;
        transform: translate(-50%, -50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:3vh;
        text-align: center;
    }

    .countdown_minor {
        position:absolute;
        left:50%;
        top:2.7vh;
        width:12vh;
        height:5vh;
        transform: translateX(-50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:1.8vh;
        text-align: center;
    }

    .countdown_inner {
        position:absolute;
        transform: translateX(-50%);
    }

    .countdown_major_label {
        position:relative;
        top:-1.8vh;
        left:0;
        font-family: geo_light, Fallback, sans-serif;
        font-size:2vh;
    }

    .countdown_minor_label {
        position:relative;
        top:-1vh;
        left:0;
        font-family: geo_light, Fallback, sans-serif;
        font-size:1vh;
    }

    .countdown_extra_label {
        position:relative;
        top:-5vh;
        left:0;
        font-family: geo_light, Fallback, sans-serif;
        font-size:4vh;
    }

    .market_cmc {
        position:absolute;
        top: calc(20% + 11.5vh);
        left: 50%;
        transform:translateX(-50%);
        width:50vh;
        height:40vh;
    }

    .market_exchanges {
        position:absolute;
        top: calc(30% + 31.5vh);
        left: 50%;
        transform:translateX(-50%);
        width:80vh;
        height:40vh;
        pointer-events: none;
    }

    .market_exchanges a {
        pointer-events: all;
    }

    .launch_title {
        position: absolute;
        top: calc(30% - 16vh);
        left:0;
        width: 100%;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 3vh;
        text-align: center;
    }

    .launch_title_intro {
        position: absolute;
        top: 75vh;
        left:0;
        width: 100%;
        font-weight:bold;
        font-size: 2vh;
        text-align: center;
    }

    .launch_address {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top: calc(20% + 4vh);
        font-size:3.1vh;
        font-family: geo_med, Fallback, sans-serif;
        background-color: rgba(82, 82, 82, 0.99);
        border-radius:1vh;
        color: #0a0a0a;
        padding:0.5vh 1vh;
    }

    .launch_container {
        position:absolute;
        top: calc(30% + 11.5vh);
        left: 50%;
        transform: translateX(-50%);
        width:80vh;
        height:40vh;
        font-size:4vh;
    }

    .launch_info {
        font-size:3.1vh;
    }

    .launch_details {
        font-size:1.8vh;
    }

    .launch_details2 {
        top:22vh;
        font-size:1.1vh;
    }

    .launch_details3 {
        right:0;
        width:10vh;
        font-size:1.1vh;
    }

    .launch_chart_img {
        position: absolute;
        top: 43%;
        right: -39%;
        transform: translateX(-50%) translateY(-50%);
        width: auto;
        height: auto;
        max-height: 28vh;
        max-width: 28vh;
    }

    .launch_lead {
        position:absolute;
        top: calc(30% - 26vh);
        left: 50%;
        transform: translateX(-50%);
        width:95%;
        font-family: geo_med, Fallback, sans-serif;
        font-size:2.5vh;
        text-align: center;
    }

    .launch_text {
        position:absolute;
        top: calc(30% - 22.5vh);
        left: 50%;
        transform: translateX(-50%);
        width:65vh;
        height:40vh;
        font-size:2.2vh;
        text-align: center;
    }

    .launch_directory {
        position:absolute;
        bottom: 9vh;
        left: 50%;
        transform: translateX(-50%);
        width:50%;
        height:16vh;
    }

    .launch_directory a {
        font-size:2.4vh;
        color:#2F5CA9;
        text-decoration: none;
    }

    .launch_img {
        position: absolute;
        top: -8vh;
        right: 2vh;
        width: 12vh;
        height: 100%;
        transform:scale(0.5);
    }

    .launch_checksum {
        position:absolute;
        bottom:0;
        left:50%;
        transform:translate(-50%, 110%);
        width: auto;
        height: auto;
        max-height: 5vh;
        max-width: 5vh;
        z-index: 1000;
    }

    .scroll_text {
        font-size:2vh;
    }

    .access_go {
        background-color: #14a2cc;
        padding:0.6vh;
        font-size:1vh;
        display:inline-block;
        transition: all 0.3s linear;
    }

    .access_go:hover {
        cursor: pointer;
    }

    .extra_top {
        position:absolute;
        width:100%;
        height:20%;
        top:0;
        background-color: #46599A;
        color:#FFF;
    }

    .extra_top_left {
        position:absolute;
        width:50%;
        height:100%;
        top:10%;
        left:-1.5vh;
        text-align:right;
        font-size:4vh;
    }

    .extra_top_right {
        position:absolute;
        width:50%;
        height:100%;
        top:15%;
        right:-1.5vh;
        text-align:left;
    }

    .extra_top_intro {
        position:absolute;
        left:0;
        top:0;
        width:25vh;
        font-size:1.8vh;
    }

    .extra_expire {
        position:absolute;
        bottom:-3vh;
        left:50%;
        font-size:2vh;
        font-weight:bold;
        transform: translateX(-50%);
        color:#558AEA;
    }

    .extra_notice {
        position:absolute;
        top: calc(20% + 1.8vh);
        left:50%;
        transform:translate(-50%, -50%);
        width: 70vh;
        background-color: rgba(82, 82, 82, 0.99);
        font-style: italic;
        font-weight:bold;
        font-size:1.75vh;
    }

    .extra_title_lead {
        font-family: geo_med, Fallback, sans-serif;
        font-size:6vh;
    }

    .extra_head {
        font-size:2.6vh;
        color: #558AEA;
    }

    .extra_main {
        font-size:3vh;
        font-weight:bold;
        color: #46599A;
    }

    .extra_note {
        position:absolute;
        top: calc(20% - 6vh);
        left:50%;
        transform: translateX(-50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:2vh;
        padding:0.3vh;
        border-radius: 0.5vh;
        background-color: rgba(172, 78, 20, 0.57);
    }

    .extra_push {
        transform:translateX(-50%) translateY(3vh);
    }

    .extra_bottom {
        position:absolute;
        bottom:10vh;
        left:50%;
        transform:translateX(-50%);
        width:40vh;
        padding:1vh;
        font-size:1.6vh;
        font-weight:bold;
        text-align: center;
        color:#558AEA;
        border: 0.5vh solid #46599A;
    }

    .extra_directory {
        position:absolute;
        bottom:1vh;
        left:50%;
        transform:translateX(-50%);
        width:40vh;
        padding:2vh;
        font-size:1.5vh;
        text-align: center;
        color: #558AEA;
    }

    .extra_directory_lead {
        color:#46599A;
        font-size:2.2vh;
        text-decoration: none;
    }

    #github_ribbon a:hover {
        background: #14a2cc;
        color: #fff;
    }

    #github_ribbon a::before, #github_ribbon a::after {
        content: "";
        width: 100%;
        display: block;
        position: absolute;
        top: 0.1vh;
        left: 0;
        height: 0.1vh;
        background: #0f0f0f;
    }

    #github_ribbon a::after {
        bottom: 0.1vh;
        top: auto;
    }

    #github_ribbon {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        width: 20vw;
        overflow: hidden;
        height: 20vh;
        z-index: 9999;
    }

    #github_ribbon a {
        background: #000;
        color: #f7f7f7;
        text-decoration: none;
        font-family: arial, sans-serif;
        text-align: center;
        font-weight: bold;
        padding: 0.5vh 4vh;
        font-size: 1.5vh;
        line-height: 3vh;
        transition: 0.5s;
        width: 20vh;
        position: absolute;
        top: 6vh;
        right: -6vh;
        transform: rotate(45deg);
    }

    .timeline *,
    .timeline *::before,
    .timeline *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }


    /* TIMELINE
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    .timeline ul {
        padding: 5vh 0;
    }

    .timeline ul li {
        list-style-type: none;
        position: relative;
        width: 0.6vh;
        margin: 0 auto;
        padding-top: 5vh;
        background: rgba(67, 196, 240, 0.33);
    }

    .timeline ul li::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 3vh;
        height: 3vh;
        border-radius: 50%;
        background: inherit;
    }

    .timeline ul li div {
        position: relative;
        bottom: 0;
        width: 30vw;
        padding: 1.5vh;
        background: #42BDE9;
    }

    .timeline ul li div::before {
        content: '';
        position: absolute;
        bottom: 0.7vh;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .timeline ul li:nth-child(odd) div {
        left: 2.5vw;
    }

    .timeline ul li:nth-child(odd) div::before {
        left: -1.5vh;
        border-width: 0.8vh 1.6vh 0.8vh 0;
        border-color: transparent #42BDE9 transparent transparent;
    }

    .timeline ul li:nth-child(even) div {
        left: -31.9vw;
    }

    .timeline ul li:nth-child(even) div::before {
        right: -1.5vh;
        border-width: 0.8vh 0 0.8vh 1.6vh;
        border-color: transparent transparent transparent #42BDE9;
    }

    time {
        display: block;
        font-size: 2vh;
        font-weight: bold;
        margin-bottom: 0.8vh;
    }


    /* EFFECTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    .timeline ul li::after {
        transition: background .5s ease-in-out;
    }

    .timeline ul li.in-view::after {
        background: #42BDE9;
    }

    .timeline ul li div {
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-in-out;
    }

    .timeline ul li:nth-child(odd) div {
        transform: translate3d(5vh, 0, 0);
    }

    .timeline ul li:nth-child(even) div {
        transform: translate3d(-10vh, 0, 0);
    }

    .timeline ul li.in-view div {
        transform: none;
        visibility: visible;
        opacity: 1;
    }


    /* GENERAL MEDIA QUERIES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    @media screen and (max-width: 900px) {
        .timeline ul li div {
            width: 25vw;
        }
        .timeline ul li:nth-child(even) div {
            left: -28.9vw;
            /*250+45-6*/
        }
    }

    @media screen and (max-width: 600px) {
        .timeline ul li {
            margin-left: 2vh;
        }
        .timeline ul li div {
            width: 100vh
        }
        .timeline ul li:nth-child(even) div {
            left: 4.5vh;
        }
        .timeline ul li:nth-child(even) div::before {
            left: -1.5vh;
            border-width: 0.8vh 1.6vh 0.8vh 0;
            border-color: transparent #42BDE9 transparent transparent;
        }
    }
}
@media screen and (orientation: portrait) {
    .shell_img {
        position: relative;
        width: auto;
        height: auto;
        max-height: 28vw;
        max-width: 35vw;
        top: -1vw;
        left: 0;
        animation: bounce 8s ease-in-out infinite;
        animation-delay: 0.1s;
        z-index: 100;
    }

    .shell_cont_img {
        position: absolute;
        top: 12vw;
        left: 50%;
        height: 35vw;
        transform: translateX(-50%);
    }

    .shadow {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6.5vw;
        animation: expand 4s ease-in-out infinite;
        animation-direction: alternate;
        animation-delay: 0.1s;
    }

    .logo_text {
        position: absolute;
        left: 50%;
        top: 14vw;
        transform: translateX(-50%) translateY(-25%) translateY(32vw);
        background-color: rgba(255, 32, 38, 0.1)
    }

    .logo_text_sub {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        max-height: 6vw;
        max-width: 50vw;
    }

    .front_video {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top:55vw;
        width: 80vw;
        height: 0;
        padding-bottom: 45vw;
        z-index: 10000;
    }

    .front_text {
        position: absolute;
        top:64vw;
        left:50%;
        width:80vw;
        transform: translateX(-50%);
        font-size: 2.5vw;
        text-align: center;
    }

    .front_extra {
        position:absolute;
        bottom:1vw;
        left:1vw;
        padding:1vw;
        font-size:1.5vw;
        border: 0.5vh solid rgba(71, 71, 71, 0.98);
        text-align: center;
    }

    .front_nav {
        position:absolute;
        bottom:6.5vw;
        right:1vw;
        width: 30vw;
        height:12vw;
        padding:1vw;
        font-size:1.8vw;
        color: #131313;
        text-align: right;
    }

    .description {
        position: absolute;
        top:50%;
        left:40vw;
        transform: translateY(-50%);
        font-size: 2.5vw;
        text-align: left;
        width: calc(50% - 10vw);
    }

    .pop_up {
        position: absolute;
        left:50%;
        transform: translate(-75%, -50%) scale(0.5);
        width: 75vw;
        height: 25vw;
        z-index: 620;
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-out;
        transition-delay: 0.4s;
    }

    .fade_up {
        position: absolute;
        left:50%;
        transform: translate(-50%, -65%) scale(0.995);
        width: 75vw;
        height: 25vw;
        z-index: 620;
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-out;
        transition-delay: 0.1s;
    }

    .feature_slide {
        height:225vw;
    }

    .feature {
        position: absolute;
        left:50%;
        transform: translate(-50%, -30%);
        width: 75vw;
        height: 25vw;
        z-index: 620;
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-out;
    }

    .feature_title {
        position: fixed;
        top: 0;
        left: 14.5vw;
        width: 100%;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 4vw;
        text-align: left;
    }

    .feature_content {
        position: fixed;
        top: 5vw;
        left: 14.5vw;
        width: calc(100% - 16vw);
        font-family: geo_light, Fallback, sans-serif;
        font-size: 2.5vw;
        text-align: left;
    }

    .feature_cont_img {
        position: fixed;
        top: 0;
        left: 0;
        width: 12vw;
        height: 100%;
    }

    .feature_img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: auto;
        height: auto;
        max-height: 12vw;
        max-width: 12vw;
    }

    .oy_problem_pos {
        top:46%;
        left:calc(50% + 9vw);
    }

    .feature_cont_img.oy_problem {
        left:-8vw;
        height:23vw;
    }

    .feature_img.oy_problem {
        max-height: 30vw;
        max-width: 30vw;
    }

    .oy_solution_pos {
        top:40%;
        left:calc(50% + 8vw);
    }

    .feature_cont_img.oy_solution {
        left:-8vw;
        top:-8vw;
    }

    .oy_project_pos {
        top:40%;
        left:calc(50% + 8vw);
    }

    .feature_cont_img.oy_project {
        left:-8vw;
        height:30vw;
    }

    .feature_img.oy_project {
        max-height: 30vw;
        max-width: 30vw;
    }

    .press {
        position:absolute;
        bottom:0.5vw;
        left:50%;
        transform:translateX(-50%)
    }

    .press_lead {
        font-size:1.6vw;
        font-family: geo_med, Fallback, sans-serif;
        text-align: center;
    }

    .press_img {
        width: auto;
        height: 2.5vw;
        filter:grayscale(100%);
        opacity:0.6;
        transition-duration: 0.5s;
    }

    .press_img:hover {
        filter:none;
        opacity:1;
    }

    .exchange_img {
        width: auto;
        height: 5vw;
        filter:grayscale(100%);
        transform:translateX(100%);
        opacity:0.6;
        transition-duration: 0.5s;
    }

    .exchange_img:hover {
        filter:none;
        opacity:1;
    }

    .core_team {
        position:absolute;
        top:10%;
        width:95vw;
        height:110vw;
        color:#2a2a2a;
    }

    .core_team_lead {
        font-size:3vw;
        font-family: geo_med, Fallback, sans-serif;
    }

    .core_team_unit {
        position:absolute;
        width:40%;
        height:50%;
        font-size:2vw;
        text-align: center;
    }

    .core_team_name {
        position:absolute;
        top:0;
        left:0;
        text-align:right;
        transform:translateY(-100%);
        font-size:3vw;
        width:49%;
        font-weight: bold;
    }

    .core_team_contact {
        transform:translateY(-100%);
        position:absolute;
        right:0;
        top:0;
        width:49%;
        text-align:left;
        font-size:1.5vw;
    }

    .core_team_text {
        font-size:1.6vw;
        text-align: left;
        color: #4b4b4b;
    }

    .el_logo {
        max-width:9vw;
        max-height:9vw;
    }

    .el_container {
        position:absolute;
        top:70%;
        left:55%;
        transform: translateX(-50%);
        width:85vw;
    }

    .el_discussion {
        position:absolute;
        top:0;
        left:0;
        width:20vw;
        font-size:3vw;
        font-weight:bold;
        color:#FFF;
    }

    .el_whitepaper {
        position:absolute;
        top:75%;
        left:48%;
        width:20vw;
        transform: translateX(-50%);
        font-size:3vw;
        font-weight:bold;
        color:#FFF;
    }

    .el_team {
        position:absolute;
        top:0;
        right:0;
        width:20vw;
        font-size:3vw;
        font-weight:bold;
        color:#FFF;
    }

    .protocol_cont_img {
        position: absolute;
        top: 2vw;
        left: 0;
        width: 22%;
        height: 8vw;
        display:none;
    }

    .protocol_img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-height: 12vw;
        max-width: 12vw;
    }

    .protocol_box {
        position: absolute;
        top:calc(3% + 22vw);
        left:50%;
        transform: translateX(-50%);
        width: 75vw;
        visibility: hidden;
        opacity: 0;
        transition: all .4s ease-out;
        border-radius:1vw;
    }

    .protocol_box_first {
        position: absolute;
        top:calc(3% + 22vw);
        left:50%;
        transform: translateX(-50%);
        width: 75vw;
        visibility: hidden;
        opacity: 0;
        transition: all .4s ease-out;
        border-radius:1vw;
    }

    .protocol_overview {
        position:absolute;
        top:3%;
        left:50%;
        transform:translateX(-50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:4vw;
    }

    .protocol_nav {
        position:absolute;
        top:calc(3% + 5.5vw);
        left:50%;
        transform:translateX(-50%);
        text-align:center;
        font-size:3vw;
        font-weight:bold;
        border: solid 0.3vw rgba(42, 42, 42, 0.87);
        padding:1.2vw;
    }

    .protocol_title {
        position: absolute;
        top: 1vw;
        left:0;
        width: 100%;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 4vw;
        text-align: center;
    }

    .protocol_caption {
        position: relative;
        top: 0;
        font-family: geo_light, Fallback, sans-serif;
        font-size: 3vw;
    }

    .protocol_head {
        position: relative;
        top: 0;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 2.6vw;
    }

    .protocol_content {
        position: absolute;
        bottom: 1.5vw;
        left: 50%;
        transform:translateX(-45%);
        width: calc(100% + 3vw);
        font-family: geo_light, Fallback, sans-serif;
        font-size: 2.4vw;
        text-align: left;
    }

    .pr1_height {
        height:52vw;
    }

    .pr2_height {
        height:58vw;
    }

    .pr3_height {
        height:61vw;
    }

    .pr4_height {
        height:31vw;
    }

    .pr5_height {
        height:37vw;
    }

    .pr6_height {
        height:31vw;
    }

    .iphone_text {
        position: absolute;
        top: 50%;
        right: 2vw;
        transform: translateY(-35%);
        width:40vw;
        font-size: 2.4vw;
        visibility: hidden;
        opacity: 0;
        transition: all 1.2s ease-out;
    }

    .iphone_title {
        font-family: geo_med, Fallback, sans-serif;
        font-size:4vw;
    }

    .iphone_img {
        position: absolute;
        top: 50%;
        left: 2vw;
        transform: translateY(-60%);
        width: auto;
        height: auto;
        max-height: 70vw;
        max-width: 70vw;
        visibility: hidden;
        opacity: 0;
        transition: all 1.2s ease-out;
    }

    .code_demo {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Courier new', monospace;
        font-size: 1.1vw;
        font-weight: bold;
        padding: 0.5vw;
        border-radius: 1vw;
        background-color: #2e2e2e;
        text-align: center;
    }

    .countdown_major {
        position:absolute;
        left:50%;
        top: calc(34% - 10vw);
        width:40vw;
        height:5vw;
        transform: translate(-50%, -50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:3vw;
        text-align: center;
    }

    .countdown_minor {
        position:absolute;
        left:50%;
        top:2.7vw;
        width:12vw;
        height:5vw;
        transform: translateX(-50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:1.8vw;
        text-align: center;
    }

    .countdown_inner {
        position:absolute;
        transform: translateX(-50%);
    }

    .countdown_major_label {
        position:relative;
        top:-1.8vw;
        left:0;
        font-family: geo_light, Fallback, sans-serif;
        font-size:2vw;
    }

    .countdown_minor_label {
        position:relative;
        top:-1vw;
        left:0;
        font-family: geo_light, Fallback, sans-serif;
        font-size:1vw;
    }

    .countdown_extra_label {
        position:relative;
        top:-5vw;
        left:0;
        font-family: geo_light, Fallback, sans-serif;
        font-size:4vw;
    }

    .market_cmc {
        position:absolute;
        top: calc(24% + 15vw);
        left: 50%;
        transform:translateX(-50%);
        width:40vw;
        height:40vw;
    }

    .market_exchanges {
        position:absolute;
        top: calc(30% + 40vw);
        left: 50%;
        transform:translateX(-50%);
        width:80vw;
        height:40vw;
    }

    .launch_title {
        position: absolute;
        top: calc(34% - 16vw);
        left:0;
        width: 100%;
        font-family: geo_med, Fallback, sans-serif;
        font-size: 3vw;
        text-align: center;
    }

    .launch_title_intro {
        position: absolute;
        top: 75vw;
        left:0;
        width: 100%;
        font-weight:bold;
        font-size: 2vw;
        text-align: center;
    }

    .launch_address {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top: calc(24% + 7vw);
        font-size:3.2vw;
        font-family: geo_med, Fallback, sans-serif;
        background-color: rgba(82, 82, 82, 0.99);
        border-radius:1vw;
        color: #0a0a0a;
        padding:0.5vw 1vw;
    }

    .launch_container {
        position:absolute;
        top: calc(34% + 15vw);
        left: 50%;
        transform: translateX(-50%);
        width:80vw;
        height:40vw;
        font-size:4vw;
    }

    .launch_info {
        font-size:3.1vw;
    }

    .launch_details {
        font-size:1.8vw;
    }

    .launch_details2 {
        top:22vw;
        font-size:1.1vw;
    }

    .launch_details3 {
        font-size:1.1vw;
    }

    .launch_chart_img {
        position: absolute;
        top: 46%;
        right: -39%;
        transform: translateX(-50%) translateY(-50%);
        width: auto;
        height: auto;
        max-height: 28vw;
        max-width: 28vw;
    }

    .launch_lead {
        position:absolute;
        top: calc(30% - 29.5vw);
        left: 50%;
        transform: translateX(-50%);
        width:95%;
        font-family: geo_med, Fallback, sans-serif;
        font-size:2.5vw;
        font-weight:bold;
        text-align: center;
    }

    .launch_text {
        position:absolute;
        top: calc(30% - 26vw);
        left: 50%;
        transform: translateX(-50%);
        width:85vw;
        height:40vw;
        font-size:2.2vw;
        text-align: center;
    }

    .launch_directory {
        position:absolute;
        bottom: 9vh;
        left: 50%;
        transform: translateX(-50%);
        width:50%;
        height:16vw;
    }

    .launch_directory a {
        font-size:2.4vw;
        color:#2F5CA9;
        text-decoration: none;
    }

    .launch_img {
        position: absolute;
        top: -9vw;
        right: 2vw;
        width: 12vw;
        height: 100%;
        transform:scale(0.55);
    }

    .launch_checksum {
        position:absolute;
        bottom:0;
        left:50%;
        transform:translate(-50%, 120%);
        width: auto;
        height: auto;
        max-height: 5vw;
        max-width: 5vw;
        z-index: 1000;
    }

    .scroll_text {
        font-size:2vw;
    }

    .access_go {
        background-color: #14a2cc;
        padding:0.6vw;
        font-size:1vw;
        display:inline-block;
        transition: all 0.3s linear;
    }

    .access_go:hover {
        cursor: pointer;
    }

    .extra_top {
        position:absolute;
        width:100%;
        height:30vw;
        top:0;
        background-color: #46599A;
        color:#FFF;
    }

    .extra_top_left {
        position:absolute;
        width:50%;
        height:100%;
        top:10%;
        left:-1.5vw;
        text-align:right;
        font-size:4vw;
    }

    .extra_top_right {
        position:absolute;
        width:50%;
        height:100%;
        top:15%;
        right:-1.5vw;
        text-align:left;
    }

    .extra_top_intro {
        position:absolute;
        left:0;
        top:0;
        width:25vw;
        font-size:1.8vw;
    }

    .extra_expire {
        position:absolute;
        bottom:-3vw;
        left:50%;
        font-size:2vw;
        font-weight:bold;
        transform: translateX(-50%);
        color:#558AEA;
    }

    .extra_notice {
        position:absolute;
        top: calc(24% + 4.5vw);
        left:50%;
        transform:translate(-50%, -50%);
        width: 70vw;
        background-color: rgba(82, 82, 82, 0.99);
        font-style: italic;
        font-weight:bold;
        font-size:1.75vw;
    }

    .extra_title_lead {
        font-family: geo_med, Fallback, sans-serif;
        font-size:6vw;
    }

    .extra_head {
        font-size:2.6vw;
        color: #558AEA;
    }

    .extra_main {
        font-size:3vw;
        font-weight:bold;
        color: #46599A;
    }

    .extra_note {
        position:absolute;
        top: calc(20% + 1vw);
        left:50%;
        transform: translateX(-50%);
        font-family: geo_med, Fallback, sans-serif;
        font-size:2vw;
        padding:0.3vw;
        border-radius: 0.5vw;
        background-color: rgba(172, 78, 20, 0.57);
    }

    .extra_push {
        transform:translateX(-50%) translateY(3vw);
    }

    .extra_bottom {
        position:absolute;
        bottom:10vw;
        left:50%;
        transform:translateX(-50%);
        width:40vw;
        padding:1vw;
        font-size:1.6vw;
        font-weight:bold;
        text-align: center;
        color:#558AEA;
        border: 0.5vh solid #46599A;
    }

    .extra_directory {
        position:absolute;
        bottom:1vw;
        left:50%;
        transform:translateX(-50%);
        width:40vw;
        padding:2vw;
        font-size:1.5vw;
        text-align: center;
        color: #558AEA;
    }

    .extra_directory_lead {
        color:#46599A;
        font-size:2.2vw;
        text-decoration: none;
    }

    #github_ribbon a:hover {
        background: #14a2cc;
        color: #fff;
    }

    #github_ribbon a::before, #github_ribbon a::after {
        content: "";
        width: 100%;
        display: block;
        position: absolute;
        top: 0.1vw;
        left: 0;
        height: 0.1vw;
        background: #f7f7f7;
    }

    #github_ribbon a::after {
        bottom: 0.1vw;
        top: auto;
    }

    #github_ribbon {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        width: 20vw;
        overflow: hidden;
        height: 20vw;
        z-index: 9999;
    }

    #github_ribbon a {
        background: #000;
        color: #f7f7f7;
        text-decoration: none;
        font-family: arial, sans-serif;
        text-align: center;
        font-weight: bold;
        padding: 0.5vw 4vw;
        font-size: 1.5vw;
        line-height: 3vw;
        transition: 0.5s;
        width: 20vw;
        position: absolute;
        top: 6vw;
        right: -6vw;
        transform: rotate(45deg);
    }

    .timeline *,
    .timeline *::before,
    .timeline *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }


    /* TIMELINE
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    .timeline ul {
        padding: 5vw 0;
    }

    .timeline ul li {
        list-style-type: none;
        position: relative;
        width: 0.6vw;
        margin: 0 auto;
        padding-top: 5vw;
        background: rgba(67, 196, 240, 0.33);
    }

    .timeline ul li::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
        background: inherit;
    }

    .timeline ul li div {
        position: relative;
        bottom: 0;
        width: 40vw;
        padding: 1.5vw;
        background: #42BDE9;
    }

    .timeline ul li div::before {
        content: '';
        position: absolute;
        bottom: 0.7vw;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .timeline ul li:nth-child(odd) div {
        left: 4.5vw;
    }

    .timeline ul li:nth-child(odd) div::before {
        left: -1.5vw;
        border-width: 0.8vw 1.6vw 0.8vw 0;
        border-color: transparent #42BDE9 transparent transparent;
    }

    .timeline ul li:nth-child(even) div {
        left: -43.9vw;
    }

    .timeline ul li:nth-child(even) div::before {
        right: -1.5vw;
        border-width: 0.8vw 0 0.8vw 1.6vw;
        border-color: transparent transparent transparent #42BDE9;
    }

    time {
        display: block;
        font-size: 2vw;
        font-weight: bold;
        margin-bottom: 0.8vw;
    }


    /* EFFECTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    .timeline ul li::after {
        transition: background .5s ease-in-out;
    }

    .timeline ul li.in-view::after {
        background: #42BDE9;
    }

    .timeline ul li div {
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-in-out;
    }

    .timeline ul li:nth-child(odd) div {
        transform: translate3d(5vw, 0, 0);
    }

    .timeline ul li:nth-child(even) div {
        transform: translate3d(-10vw, 0, 0);
    }

    .timeline ul li.in-view div {
        transform: none;
        visibility: visible;
        opacity: 1;
    }


    /* GENERAL MEDIA QUERIES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    @media screen and (max-width: 900px) {
        .timeline ul li div {
            width: 25vw;
        }
        .timeline ul li:nth-child(even) div {
            left: -28.9vw;
            /*250+45-6*/
        }
    }

    @media screen and (max-width: 600px) {
        .timeline ul li {
            margin-left: 2vw;
        }
        .timeline ul li div {
            width: 90vw;
        }
        .timeline ul li:nth-child(even) div {
            left: 4.5vw;
        }
        .timeline ul li:nth-child(even) div::before {
            left: -1.5vw;
            border-width: 0.8vw 1.6vw 0.8vw 0;
            border-color: transparent #42BDE9 transparent transparent;
        }
    }
}

.load_view {
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    opacity: 1;
}

.load_view_semi {
    transform: translateY(-50%);
    visibility: visible;
    opacity: 1;
}

.load_view_fixed {
    visibility: visible;
    opacity: 1;
}

@-webkit-keyframes fade_in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fade_in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade_in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2vh);
    }
}

@keyframes expand {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.1);
    }
}

.center_hor {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.oy_fade {
    opacity: 0;
    opacity: 1 \9; /*just in case ie*/
    animation: fade_in ease-in 1;
    animation-fill-mode: forwards;
}

.oy_fade.one {
    animation-delay: 0.1s;
    animation-duration: 0.8s;
}

.oy_fade.two {
    animation-delay: 1s;
    animation-duration: 0.8s;
}

.oy_fade.three {
    animation-delay: 1.2s;
    animation-duration: 0.4s;
}

.oy_fade.four {
    animation-delay: 2s;
    animation-duration: 0.6s;
}

.oy_fade.five {
    animation-delay: 2.6s;
    animation-duration: 0.5s;
}