#about {
    position: relative;
    margin: 28rem auto 0
}

#about .mobile {
    display: none
}

@media screen and (max-width:500px) {
    #about {
        margin-top: 20rem
    }
    #about .desktop {
        display: none
    }
    #about .mobile {
        display: block
    }
}

.about-header {
    padding: 0;
    margin: 0 0 0 3rem;
    color: #f5f5f5;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 6.1vw;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 80%;
    text-transform: uppercase
}

.about-header .lionel {
    display: inline-block;
    margin-left: 7rem
}

@media screen and (max-width:500px) {
    .about-header .lionel {
        margin-left: 3rem
    }
}

.about-header .line {
    position: relative;
    display: inline-block
}

@media screen and (max-width:500px) {
    .about-header {
        margin-left: 1rem
    }
}

.about-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.about-block-part--left {
    width: 55%
}

@media screen and (max-width:500px) {
    .about-block-part--left {
        width: 20%
    }
}

.about-block-part--right {
    position: relative;
    width: 40%;
    padding-right: 6rem
}

@media screen and (max-width:500px) {
    .about-block-part--right {
        padding-right: 3rem;
        width: 65%
    }
    .about-block-part--right span {
        display: inline-block;
        padding-bottom: .75rem
    }
}

.about-block-part--separator:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 1px;
    background-color: #f5f5f5
}

.about-content {
    margin: 0 auto;
    padding-left: 3rem;
    width: 100%;
    color: #f5f5f5;
    max-width: 165rem;
    font-family: Neue Montreal, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.about-content a {
    color: #f5f5f5
}

@media screen and (max-width:500px) {
    .about-content {
        font-size: 1.7rem;
        padding-left: 1rem
    }
}

.about-desc {
    margin-bottom: 22rem
}

@media screen and (max-width:500px) {
    .about-desc {
        padding-left: 0
    }
    .about-desc .about-block-part--left {
        display: none
    }
    .about-desc .about-block-part--right {
        width: 100%
    }
}

.about-desc-current {
    width: 80%;
    margin-bottom: 5.5rem;
    line-height: 100%
}

@media screen and (max-width:500px) {
    .about-desc-current {
        line-height: 110%;
        margin-top: 4.5rem;
        margin-bottom: 3rem
    }
}

.about-desc-past {
    position: relative;
    font-size: 1.6rem;
    line-height: 120%
}

@media screen and (max-width:500px) {
    .about-desc-past {
        font-size: 1.5rem
    }
}

.about-desc-past-start {
    width: 40%
}

@media screen and (max-width:500px) {
    .about-desc-past-start {
        width: 45%
    }
}

.about-desc-past-companies {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    font-size: 2rem;
    line-height: 100%
}

@media screen and (max-width:500px) {
    .about-desc-past-companies {
        font-size: 1.7rem;
        line-height: 110%
    }
}

.about-cv h4 {
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 100%
}

@media screen and (max-width:500px) {
    .about-cv h4 {
        font-size: 2.4rem
    }
}

.about-block-titles {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.about-block-list_item .about-block-part {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.about-block-list_item .about-block-part--left {
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

@media screen and (max-width:500px) {
    .about-block-list_item .about-block-part--left {
        font-size: 1rem
    }
}

.about-block-list_item .about-block-part--right {
    font-size: 1.4rem;
    line-height: 180%
}

@media screen and (max-width:500px) {
    .about-block-list_item .about-block-part--right {
        font-size: 1rem;
        line-height: 120%
    }
}

.about-signature {
    position: relative;
    width: 100%;
    height: 100vh
}

@media screen and (max-width:500px) {
    .about-signature {
        height: 80vh
    }
}

.about-signature-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 27rem;
    line-height: 98%;
    color: #222
}

.about-signature-content,
.about-signature-content .phi {
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.about-signature-content .phi {
    position: relative;
    top: -2rem;
    font-size: 29rem;
    margin-left: 5.5rem
}

@media screen and (max-width:500px) {
    .about-signature-content {
        font-size: 17rem
    }
    .about-signature-content .phi {
        font-size: 19rem
    }
}

.about-credits {
    position: absolute;
    display: inline-block;
    color: #fff;
    font-family: Neue Montreal, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    left: 0;
    bottom: 3rem
}

.about-credits a {
    color: #fff
}

@media screen and (max-width:500px) {
    .about-credits {
        font-size: 1.25rem;
        bottom: 4rem
    }
}

.about-copyright {
    position: fixed;
    left: 3rem;
    bottom: 2.4rem;
    color: #f5f5f5;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

@media screen and (max-width:500px) {
    .about-copyright {
        display: none;
        font-size: 1rem;
        left: 2rem;
        bottom: 2rem
    }
}

#home {
    height: 100%
}

#home,
.home-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.home-bg {
    height: 120%;
    background-color: #4d4d4d;
    border-bottom-left-radius: 35% 15%;
    border-bottom-right-radius: 35% 15%;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    display: none
}

.home-title {
    position: absolute;
    width: 100%;
    top: -2.5rem;
    color: #f5f5f5;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17.5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media (max-width:1300px) {
    .home-title {
        font-size: 12vw;
        top: 2vw
    }
}

.home-title-holder {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.home-3dportal {
    position: fixed;
    right: 31.5rem;
    bottom: 20rem;
    padding: 5rem;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.home-3dportal .home-3dportal-icon {
    will-change: transform;
    -webkit-transition: -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1), -webkit-transform .4s cubic-bezier(.165, .84, .44, 1)
}

.home-3dportal:hover .home-3dportal-icon {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

@media screen and (max-width:500px) {
    .home-3dportal {
        right: 50%;
        bottom: 25rem
    }
    .home-3dportal svg {
        width: 4.5rem;
        height: 4.5rem
    }
}

.home-3dportal-cnt {
    -webkit-transform-origin: 50% 70%;
    transform-origin: 50% 70%
}

.home-3dportal-icon {
    position: relative
}

.home-3dportal-icon,
.home-webportal {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.home-webportal {
    position: fixed;
    right: 15rem;
    bottom: 15rem;
    padding: 4rem;
    mix-blend-mode: difference;
    background-color: #fff;
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    border-radius: 10rem
}

@media screen and (max-width:500px) {
    .home-webportal {
        bottom: 5rem
    }
}

.home-webportal-title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.home-desc {
    position: fixed;
    right: 3rem;
    bottom: 2.5rem;
    font-family: Neue Montreal, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    width: 36rem;
    z-index: 10
}

.home-desc,
.home-desc a {
    color: #f5f5f5
}

.home-desc span {
    position: relative;
    display: inline-block
}

.home-desc .home-desc-mobile {
    display: none
}

@media screen and (max-width:500px) {
    .home-desc {
        font-size: 1.5rem;
        right: 2rem;
        width: 25rem;
        bottom: 9rem
    }
    .home-desc .home-desc-desktop {
        display: none
    }
    .home-desc .home-desc-mobile {
        display: block
    }
}

.home-bird-desc {
    position: fixed;
    right: 5rem;
    bottom: 2.5rem;
    color: #111;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    width: 36rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.home-bird-desc span {
    position: relative;
    display: inline-block
}

@media screen and (max-width:500px) {
    .home-bird-desc {
        right: -.5rem;
        bottom: 10rem
    }
}

.home-copyright {
    position: fixed;
    left: 3rem;
    bottom: 2.4rem;
    color: #f5f5f5;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

@media screen and (max-width:500px) {
    .home-copyright {
        font-size: 1rem;
        left: 2rem;
        bottom: 2rem
    }
}

#cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference
}

#cursor-cnt {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

#cursor-coconut {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 99999
}

#cursor-coconut-cnt {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

#selected_projects {
    position: absolute;
    width: 100%;
    margin-top: 18rem
}

#selected_projects a,
#selected_projects canvas,
#selected_projects span {
    padding: 0;
    margin: 0;
    display: block
}

@media screen and (max-width:500px) {
    #selected_projects {
        margin-top: 6rem
    }
}

.selected_projects-list {
    position: relative;
    width: 100%;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0
}

.selected_projects-list-item {
    position: relative;
    width: 100%;
    height: 150px
}

.selected_projects-list-item.visible {
    background-position: 0 0
}

.selected_projects-list-item:last-child {
    padding-bottom: 0;
    background: transparent
}

.selected_projects-list-item:hover {
    font-size: 5rem;
    color: #f5f5f5
}

.selected_projects-list-item:hover .selected_projects-list-item-padding--top {
    height: 6.5rem
}

.selected_projects-list-item:hover .selected_projects-list-item-padding--bottom {
    height: 2rem
}

@media screen and (max-width:500px) {
    .selected_projects-list-item {
        height: 7.5rem
    }
}

.selected_projects-list-item--empty {
    height: 100px
}

@media screen and (max-width:500px) {
    .selected_projects-list-item--empty {
        height: 50px
    }
}

.selected_projects-list-item-container {
    position: absolute;
    width: 100%;
    height: 100%
}

.selected_projects-list-item-holder {
    position: relative;
    width: 100%;
    left: -1px;
    height: 100%;
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 7rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    -webkit-transition: color .8s cubic-bezier(.23, 1, .32, 1), font-size .8s cubic-bezier(.23, 1, .32, 1);
    transition: color .8s cubic-bezier(.23, 1, .32, 1), font-size .8s cubic-bezier(.23, 1, .32, 1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

@media screen and (max-width:500px) {
    .selected_projects-list-item-holder {
        font-size: 2rem
    }
}

.selected_projects-list-item-title_content {
    position: absolute;
    display: block;
    top: 50%;
    width: 100%;
    height: 95px;
    margin-top: -47px !important
}

@media screen and (max-width:500px) {
    .selected_projects-list-item-title_content {
        height: 7.5rem;
        margin-top: -1.5rem !important
    }
}

.selected_projects-list-item-icon {
    position: absolute;
    display: block;
    top: 50%;
    right: 12.2rem;
    width: 3rem;
    height: 3rem;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: .8rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 3rem;
    border: 1.5px solid #292929;
    border-radius: 3rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (max-width:500px) {
    .selected_projects-list-item-icon {
        right: 2rem;
        top: 15%
    }
}

.selected_projects-list-item-icon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #292929;
    border-radius: 3rem;
    z-index: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.selected_projects-list-item-icon-id {
    position: relative;
    z-index: 1
}

.selected_projects-list-item-title {
    position: relative;
    display: block;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.selected_projects-list-item-padding {
    position: relative;
    width: 100%;
    height: 0;
    display: block;
    background-color: #f5f5f5
}

.selected_projects-list-item-padding--top {
    height: 4.5rem
}

.selected-projects-list-item-radius_top {
    position: absolute;
    top: -50px
}

.selected-projects-list-item-radius_bottom-stroke {
    position: absolute;
    bottom: 0;
    z-index: 99
}

#project {
    position: relative
}

.project-entry {
    position: absolute;
    width: 100%
}

.project-header {
    position: relative;
    width: 100%;
    height: 100vh
}

@media screen and (max-width:500px) {
    .project-header {
        height: auto
    }
}

.project-header-desc {
    position: absolute;
    left: 2rem;
    bottom: 15rem;
    width: 48rem;
    color: #fff;
    font-family: Neue Montreal, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 120%;
    mix-blend-mode: difference;
    pointer-events: none
}

@media screen and (max-width:500px) {
    .project-header-desc {
        position: relative;
        font-size: 1.7rem;
        width: 90%;
        left: 1rem;
        bottom: auto;
        margin-top: 50vh;
        color: #292929
    }
}

.project-header-credits {
    position: absolute;
    right: 10%;
    bottom: 16rem;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none
}

.project-header-credits p {
    font-family: Neue Montreal, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: .8rem
}

.project-header-credits h4,
.project-header-credits p {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.project-header-credits h4 {
    text-decoration: underline;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 1.2rem
}

@media screen and (max-width:500px) {
    .project-header-credits {
        right: auto;
        left: 1rem;
        bottom: auto;
        position: relative;
        color: #292929;
        padding-bottom: 10rem
    }
}

.project-slide {
    position: relative;
    width: 100%;
    margin-bottom: 10rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (max-width:500px) {
    .project-slide {
        margin-bottom: 0
    }
}

.project-slide-image {
    position: relative;
    width: 90%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.project-slide-image img,
.project-slide-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.project-slide-image-cnt2 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden
}

.project-slide-desc {
    position: relative;
    margin-left: 5%;
    width: 50rem;
    color: #292929;
    font-family: Neue Montreal, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 120%;
    margin-top: 9rem
}

@media screen and (max-width:500px) {
    .project-slide-desc {
        font-size: 1.5rem;
        width: 90%;
        padding-bottom: 5rem
    }
}

.project-preview {
    position: relative;
    width: 100%;
    height: 100vh
}

@media screen and (min-width:1350px) {
    .project-preview {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden
    }
}

.project-preview-image img,
.project-preview-image video {
    position: absolute;
    width: auto;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (min-width:1350px) {
    .project-preview-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: none;
        transform: none
    }
}

.project_bar_current {
    position: fixed;
    left: 0;
    bottom: 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 7.4rem;
    border-top: 1px solid #ddd;
    mix-blend-mode: difference;
    display: none
}

.project_bar_current.activate {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.project_bar_current circle,
.project_bar_current path,
.project_bar_current svg {
    stroke: #ddd
}

.project_bar-bt_external {
    position: relative;
    margin-left: 25px
}

.project_bar-bt_external .circle-bg {
    fill: transparent;
    -webkit-transition: fill .4s cubic-bezier(.165, .84, .44, 1);
    transition: fill .4s cubic-bezier(.165, .84, .44, 1)
}

.project_bar-bt_external .icon {
    stroke: #f5f5f5;
    -webkit-transition: stroke .4s cubic-bezier(.165, .84, .44, 1);
    transition: stroke .4s cubic-bezier(.165, .84, .44, 1)
}

.project_bar-bt_external:hover .circle-bg {
    fill: #f5f5f5
}

.project_bar-bt_external:hover .icon {
    stroke: #292929
}

.project_bar-title {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #ddd;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    mix-blend-mode: difference
}

@media screen and (max-width:500px) {
    .project_bar-title {
        font-size: 1.2rem
    }
}

.project_bar-bt_close {
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: 25px
}

.project_bar-bt_close-progress {
    position: absolute
}

.project_bar-bt_close-progress svg {
    width: 44px;
    height: 44px
}

.project_bar-bt_close-progress .progress-bg {
    position: absolute;
    width: 44px;
    height: 44px
}

.project_bar-bt_close-progress .progress-bg circle {
    stroke: #222
}

.project_bar-bt_close-progress .progress-bar {
    position: absolute;
    width: 44px;
    height: 44px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.project_bar-bt_close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px
}

.project_bar-bt_close-icon .bg,
.project_bar-bt_close-icon .icon {
    position: absolute
}

.project_bar-bt_close-icon .icon {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.project_bar-bt_close-icon circle {
    fill: #f5f5f5;
    stroke: transparent;
    -webkit-transition: fill .4s cubic-bezier(.165, .84, .44, 1);
    transition: fill .4s cubic-bezier(.165, .84, .44, 1)
}

.project_bar-bt_close-icon rect {
    stroke: #292929;
    -webkit-transition: stroke .4s cubic-bezier(.165, .84, .44, 1);
    transition: stroke .4s cubic-bezier(.165, .84, .44, 1)
}

.project_bar-bt_close-icon:hover circle {
    fill: #292929
}

.project_bar-bt_close-icon:hover rect {
    stroke: #f5f5f5
}

.project_bar_next {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7.4rem
}

.project_bar_next a {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #111;
    color: #f5f5f5;
    text-decoration: none
}

.project_bar_next span {
    display: block
}

.project_bar_cta {
    padding-left: 3rem
}

.project_bar_next .project_bar-title {
    color: #f5f5f5
}

.project_bar-list-item-icon {
    position: relative;
    margin-right: 3rem;
    display: block;
    width: 3rem;
    height: 3rem;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: .8rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 3rem;
    border: 2px solid #f5f5f5;
    border-radius: 3rem
}

.project_bar-list-item-icon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111;
    border-radius: 3rem;
    z-index: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.project_bar-list-item-icon-id {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    color: #f5f5f5
}

#archives {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.archive-entry-holder,
.archive-entry-holder img,
.archives-image-entry,
.archives-instructions,
.archives-signature {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-touch-callout: none
}

.archives-infos {
    position: absolute;
    bottom: 2.5rem;
    left: 3rem;
    width: 23.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #292929;
    mix-blend-mode: difference
}

@media screen and (max-width:500px) {
    .archives-infos {
        left: 11rem
    }
}

.archive-entry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.archives-title {
    font-weight: 700;
    font-size: 2rem;
    line-height: 120%
}

.archives-category,
.archives-title {
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.archives-category {
    font-weight: 900;
    font-size: .8rem;
    -webkit-text-decoration: uppercase;
    text-decoration: uppercase;
    margin-top: 10rem;
    margin-bottom: 10rem
}

@media screen and (max-width:500px) {
    .archives-category {
        margin-top: 5rem;
        margin-bottom: 7rem
    }
}

.archives-signature {
    position: absolute;
    left: 3rem;
    bottom: 2.4rem;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

@media screen and (max-width:500px) {
    .archives-signature {
        left: 11rem
    }
}

.archives-image-holder {
    position: absolute;
    top: 53%;
    left: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

@media screen and (max-width:500px) {
    .archives-image-holder {
        top: 46%
    }
}

.archives-image-holder-cnt {
    position: absolute
}

.archives-image-entry {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.archives-image-entry img {
    position: relative;
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 4rem
}

.archives-image-entry-anim {
    position: relative
}

.archives-instructions {
    position: absolute;
    bottom: 3rem;
    right: 20%;
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 2rem;
    z-index: 999;
    mix-blend-mode: difference;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (max-width:500px) {
    .archives-instructions {
        right: 10%;
        font-size: 1.5rem
    }
}

.archives-image-counter {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 43px;
    height: 43px
}

.archives-image-counter span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: .9rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #292929
}

.archive-image-counter-idx-current {
    top: -8px !important
}

.archive-image-counter-idx-total {
    top: 8px !important
}

.archive-image-counter-idx-separation {
    position: absolute;
    width: 16px;
    height: 1.5px;
    display: block;
    background-color: #292929;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translate(-50%, -50%) rotate(-15deg) !important;
    transform: translate(-50%, -50%) rotate(-15deg) !important;
    top: 2px !important
}

#menu {
    position: fixed;
    top: 0;
    right: 5rem;
    z-index: 1000;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

@media screen and (max-width:500px) {
    #menu {
        right: 2rem
    }
}

#menu .count {
    color: #505050;
    margin-left: .5rem;
    -webkit-transition: color .78s cubic-bezier(.86, 0, .07, 1);
    transition: color .78s cubic-bezier(.86, 0, .07, 1)
}

#menu .count,
#menu .menu-nav-item_title span,
#menu .text span {
    position: relative;
    display: inline-block
}

#menu .menu-nav-item_title span:after,
#menu .text span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition: -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1), -webkit-transform .4s cubic-bezier(.165, .84, .44, 1)
}

#menu .menu-nav-item_title:hover span:after,
#menu .text:hover span:after {
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
}

#menu .menu-nav-group {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 34rem;
    height: 8.55rem;
    z-index: 1
}

@media screen and (max-width:500px) {
    #menu .menu-nav-group {
        width: 25rem
    }
}

#menu .menu-nav-group--second {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    z-index: 0
}

#menu .menu-nav-item {
    display: block;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    list-style: none;
    width: 11rem;
    color: #f5f5f5;
    text-decoration: none;
    -webkit-transition: color .78s cubic-bezier(.86, 0, .07, 1);
    transition: color .78s cubic-bezier(.86, 0, .07, 1)
}

#menu.dark .count,
#menu.dark .menu-nav-item {
    color: #292929
}

#menu.dark .menu-nav-item span:after {
    background-color: #292929
}

.socials {
    position: fixed;
    display: none;
    left: 3rem;
    bottom: 13.1rem;
    mix-blend-mode: difference
}

.socials a {
    text-decoration: none
}

.socials a .shape {
    fill: transparent
}

.socials a .shape,
.socials a .text {
    -webkit-transition: fill .4s cubic-bezier(.165, .84, .44, 1);
    transition: fill .4s cubic-bezier(.165, .84, .44, 1)
}

.socials a .text,
.socials a:hover .shape {
    fill: #f5f5f5
}

.socials a:hover .text {
    fill: #292929
}

.socials.visible {
    display: block
}

@media screen and (max-width:500px) {
    .socials {
        left: 2rem;
        bottom: 8rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
    .socials.visible {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
    .socials svg {
        width: 4.5rem;
        height: 4.5rem
    }
    .socials a {
        padding-top: .5rem;
        padding-bottom: .5rem
    }
}

#topbar {
    position: fixed;
    top: -18rem;
    left: 0;
    width: 100%;
    height: 18rem;
    background-color: #fff;
    z-index: 900
}

@media screen and (max-width:500px) {
    #topbar {
        height: 7rem
    }
}

.topbar-title {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 2.5rem;
    padding: 0;
    margin: 0;
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17.5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    height: 17.5rem
}

.topbar-title span {
    position: absolute;
    display: block;
    top: 0;
    left: 0
}

@media screen and (max-width:500px) {
    .topbar-title {
        height: 16rem
    }
}

.topbar-title-mask {
    position: relative;
    width: 29rem;
    height: 100%;
    overflow: hidden
}

.topbar-subtitle,
.topbar-subtitle-mobile {
    position: absolute;
    top: 2.5rem;
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-decoration: none
}

.topbar-subtitle span {
    position: relative;
    display: inline-block
}

.topbar-subtitle span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #292929;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition: -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1), -webkit-transform .4s cubic-bezier(.165, .84, .44, 1);
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
}

.topbar-subtitle:hover span:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.topbar-subtitle-mobile {
    display: none
}

@media screen and (max-width:500px) {
    .topbar-subtitle-mobile {
        display: block;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 1.2rem
    }
}

#music {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference
}

#music-cnt {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

#menumobile {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none
}

#menumobile .count {
    position: relative;
    display: inline-block;
    color: #bcbcbc;
    margin-left: .5rem;
    -webkit-transition: color .78s cubic-bezier(.86, 0, .07, 1);
    transition: color .78s cubic-bezier(.86, 0, .07, 1)
}

#menumobile .menumobile-nav-item_title,
#menumobile .text {
    text-decoration: underline
}

#menumobile.dark .count,
#menumobile.dark .menumobile-nav-item {
    color: #292929
}

.menumobile-bg {
    left: 0;
    height: 100%;
    background-color: #fff
}

.menumobile-bg,
.menumobile-title {
    position: absolute;
    top: 0;
    width: 100%
}

.menumobile-title {
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.menumobile-title-holder {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    top: -2.3rem;
    width: 100%;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.menumobile-title-letter-first {
    font-size: 17rem;
    top: -1rem;
    display: inline-block;
    position: relative
}

.menumobile-nav-holder {
    position: absolute;
    bottom: 5rem;
    right: 2rem
}

.menumobile-nav-group {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 34rem;
    height: 8.55rem;
    z-index: 1;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

@media screen and (max-width:500px) {
    .menumobile-nav-group {
        width: 25rem
    }
}

.menumobile-nav-group--second {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    z-index: 0
}

.menumobile-nav-item {
    display: block;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    list-style: none;
    width: 11rem;
    color: #292929;
    text-decoration: none;
    -webkit-transition: color .78s cubic-bezier(.86, 0, .07, 1);
    transition: color .78s cubic-bezier(.86, 0, .07, 1)
}

.menumobile-socials {
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    mix-blend-mode: difference;
    left: 1.85rem;
    bottom: 15rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    display: flex
}

.menumobile-socials svg {
    width: 4.5rem;
    height: 4.5rem
}

.menumobile-socials a {
    text-decoration: none;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.menumobile-copyright {
    position: fixed;
    left: 2rem;
    bottom: 2rem;
    color: #292929;
    font-family: Lyyra Extended, Helvetica, Arial, sans-serif;
    font-weight: 700;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem
}

.menumobile-bt {
    position: fixed;
    bottom: .5rem;
    left: .5rem;
    width: 7.5rem;
    height: 7.5rem;
    z-index: 10000
}

.menumobile-bt-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #292929;
    border-radius: 100%
}

.menumobile-bt-line-holder {
    position: absolute;
    width: 3rem;
    height: 6px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.menumobile-bt-line {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

#rotate {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #292929;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 99999
}

@media screen and (orientation:landscape) {
    #rotate {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

#resize {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #292929;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 99999
}

#resize.visible {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@font-face {
    font-family: Lyyra Extended;
    src: url(/fonts/LyyraExtended-Bold.woff2) format("woff2"), url(/fonts/LyyraExtended-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lyyra Extended;
    src: url(/fonts/LyyraExtended-Medium.woff2) format("woff2"), url(/fonts/LyyraExtended-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lyyra Extended;
    src: url(/fonts/LyyraExtended-Black.woff2) format("woff2"), url(/fonts/LyyraExtended-Black.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lyyra Extended;
    src: url(/fonts/LyyraExtended-Light.woff2) format("woff2"), url(/fonts/LyyraExtended-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lyyra Extended;
    src: url(/fonts/LyyraExtended-Regular.woff2) format("woff2"), url(/fonts/LyyraExtended-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Montreal;
    src: url(/fonts/NeueMontreal-Light.woff2) format("woff2"), url(/fonts/NeueMontreal-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Montreal;
    src: url(/fonts/NeueMontreal-Regular.woff2) format("woff2"), url(/fonts/NeueMontreal-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Montreal;
    src: url(/fonts/NeueMontreal-Italic.woff2) format("woff2"), url(/fonts/NeueMontreal-Italic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Montreal;
    src: url(/fonts/NeueMontreal-BoldItalic.woff2) format("woff2"), url(/fonts/NeueMontreal-BoldItalic.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Montreal;
    src: url(/fonts/NeueMontreal-Bold.woff2) format("woff2"), url(/fonts/NeueMontreal-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Montreal;
    src: url(/fonts/NeueMontreal-LightItalic.woff2) format("woff2"), url(/fonts/NeueMontreal-LightItalic.woff) format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

html {
    font-size: 62.5%
}

body,
html {
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #111
}

body,
body a,
html,
html a {
    cursor: none !important
}

@media screen and (max-width:500px) {
    body a,
    html a {
        cursor: auto !important
    }
}

#app {
    position: relative;
    height: 100%
}

#app-gl {
    position: fixed
}

#app-container,
#app-gl {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#app-container {
    position: absolute;
    margin: 0 auto
}

::-moz-selection {
    color: #111;
    background: #4d4d4d
}

::selection {
    color: #111;
    background: #4d4d4d
}

.dg {
    display: none
}

#loader-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #292929;
    z-index: 9998
}

#loader-ui .horizon-line {
    stroke-dasharray: 77;
    stroke-dashoffset: 77
}

#loader-ui .white-bar {
    stroke-dasharray: 173;
    stroke-dashoffset: 173
}

#loader-ui .bird-top {
    stroke-dasharray: 16;
    stroke-dashoffset: 16
}

#loader-ui .bird-bottom {
    stroke-dasharray: 12;
    stroke-dashoffset: 12
}

.loader-ui-3dportal {
    position: fixed;
    right: 31.5rem;
    bottom: 20rem;
    padding: 5rem;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

@media screen and (max-width:500px) {
    .loader-ui-3dportal {
        right: 50%;
        bottom: 25rem
    }
    .loader-ui-3dportal svg {
        width: 4.5rem;
        height: 4.5rem
    }
}

.loader-ui-3dportal-cnt {
    -webkit-transform-origin: 50% 70%;
    transform-origin: 50% 70%
}

.loader-ui-3dportal-icon {
    position: relative;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}