@font-face {
    font-family: 'Anurati';
    src: url('../font/ANURATI/anurati-regular-webfont.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: 'Major Mono Display';
    src: url('../font/MajorMonoDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@media (orientation: landscape) {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body > .app {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: rgba(230,230,230,1);
        color: rgba(255,255,255,1);
        font-weight: 100;
        font-family: 'Roboto', sans-serif;
        -webkit-user-select: none;
        cursor: default;
        z-index: 1;
    }
    body > .app > .master {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        width: calc(100% - 1vw);
        height: 6vw;
        background: rgba(0,0,0,1);
        z-index: 1;
        transition: top 0.2s ease;
    }
    body > .app > .master.hide {
        top: -6vw;
        transition: top 0.8s ease;
    }
    body > .app > .master > .brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        height: 100%;
        padding: 0 1vw;
    }
    body > .app > .master > .brand.active {
        cursor: pointer;
    }
    body > .app > .master > .brand.active:hover {
        background: rgba(255,255,255,0.1);
    }
    body > .app > .master > .brand.active:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .master > .brand > .row {
        display: flex;
    }
    body > .app > .master > .brand > .row > .icon {
        width: 2.5vw;
    }
    body > .app > .master > .brand > .row > .name {
        display: flex;
        margin: 0 0 0 1vw;
        font-size: 3vw;
        font-weight: 600;
    }
    body > .app > .master > .brand > .slogan {
        display: flex;
        font-size: 1.2vw;
        font-weight: 300;
        white-space: nowrap;
    }
    body > .app > .master > .actions {
        display: flex;
        margin: 0 1vw 0 auto;
    }
    body > .app > .master > .actions.hide {
        display: none;
    }
    body > .app > .master > .actions > .action {
        display: flex;
        margin: 0 0 0 1vw;
        padding: 1vw 2vw;
        font-size: 1.2vw;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
    }
    body > .app > .master > .actions > .action:hover {
        background: rgba(255,255,255,0.1);
    }
    body > .app > .master > .actions > .action:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .master > .actions > .action.connect {
        border-radius: 5vw;
        background: rgba(255,255,255,1);
        color: rgba(0,0,0,1);
    }
    body > .app > .master > .actions > .action.connect:hover {
        box-shadow: 0 0 0 0.5vw rgba(255,255,255,0.1);
    }
    body > .app > .master > .actions > .action.hide {
        display: none;
    }
    body > .app > .master > .user {
        position: relative;
        display: none;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0;
        width: 5vw;
        height: 100%;
        padding: 0 1.5vw 0 0;
        cursor: pointer;
    }
   /* @media (hover: hover) {
        body > .app > .master > .user:hover {
            background: rgba(255,255,255,0.2);
        }
    }*/
    body > .app > .master > .user.touch {
        background: rgba(255,255,255,0.2);
    }
    body > .app > .master > .user.active {
        display: flex;
    }
    body > .app > .master > .user > .avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
        background: rgba(0,255,255,0.5);
        font-size: 1.8vw;
        font-weight: 300;
    }
    /*@media (hover: hover) {
        body > .app > .master > .user:hover > .avatar {
            background: rgba(0,255,255,0.7);
        }
    }*/
    body > .app > .master > .user.touch > .avatar {
        background: rgba(0,255,255,0.7);
    }
    body > .app > .master > .user > .items {
        box-sizing: border-box;
        position: absolute;
        top: 100%;
        right: 0;
        display: none;
        flex-direction: column;
        padding: 0.2vw 0.2vw 0 0.2vw;
        background: rgba(255,255,255,0.2);
    }
    /*@media (hover: hover) {
        body > .app > .master > .user:hover > .items {
            display: flex;
        }
    }*/
    body > .app > .master > .user.touch > .items {
        display: flex;
    }
    body > .app > .master > .user > .items > .item {
        position: relative;
        display: flex;
        justify-content: flex-end;
        margin: 0 0 0.2vw 0;
        padding: 0.5vw 1vw;
        background: rgba(0,0,0,0.2);
        color: rgba(255,255,255,0.7);
        font-size: 1vw;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
    }
    body > .app > .master > .user > .items > .item:hover {
        background: rgba(0,255,255,0.7);
        color: rgba(255,255,255,1);
    }
    body > .app > .master > .user > .items > .item:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .master > .user > .items > .item:after {
        content: '';
        position: absolute;
        top: 0;
        left: -0.5vw;
        width: 0.2vw;
        height: 100%;
    }
    body > .app > .master > .user > .items > .item:hover:after {
        background: rgba(0,255,255,0.7);
    }
    body > .app > .master > .user > .items > .item:not(:hover):after {
        transition: all 1s ease;
    }
    body > .app > .view {
        position: relative;
        display: none;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body > .app > .view.active {
        display: flex;
    }
    body > .app > .view.landing {
        overflow: auto;
    }
    body > .app > .view.landing > .section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }
    body > .app > .view.landing > .section.header > .banner {
        position: absolute;
        z-index: -1;
        inset: 0px;
        overflow: hidden;
        background-size: cover;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-image: url(../img/solidintel_header.png);
    }
    body > .app > .view.landing > .section.header > .taglines {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 50%;
    }
    body > .app > .view.landing > .section.header > .taglines > .tagline.landscape {
        display: flex;
        font-size: 5vw;
        font-weight: 600;
        white-space: nowrap;
    }
    body > .app > .view.landing > .section.header > .taglines > .tagline.portrait {
        display: none;
    }
    body > .app > .view.landing > .section.header > .next {
        position: absolute;
        left: calc(50% - 2.5vw);
        bottom: 5vw;
        height: 6vw;
        width: 6vw;
        background: rgba(255,255,255,0.3) url('../img/skinny_arrow_down.svg') no-repeat 0.5vw / 5vw;
        box-shadow: 0 0 1vw 1vw rgb(255 255 255 / 30%);
        border-radius: 50%;
        cursor: pointer;
        animation: fade-in 0.2s ease forwards;
    }
    body > .app > .view.landing > .section.header > .next:hover {
        opacity: 0.5!important;
    }
    body > .app > .view.landing > .section.header > .next.hide {
        animation: fade-out 0.8s ease forwards;
    }
    @keyframes fade-in {
        0% {opacity:0;}
        100% {opacity:0.3;}
    }
    @keyframes fade-out {
        0% {opacity:0.3;}
        99% {opacity:0;}
        100% {visibility:hidden;opacity:0;}
    }
    body > .app > .view.landing > .section.features {
        flex-direction: row;
        justify-content: space-evenly;
        height: auto;
        background: rgba(0,0,0,1);
    }
    body > .app > .view.landing > .section.features > .block {
        display: flex;
        flex-direction: column;
        width: 17vw;
        margin: 10vw 0;
    }
    body > .app > .view.landing > .section.features > .block > .header {
        display: flex;
        margin: 0 0 1vw 0;
        font-size: 1.5vw;
        font-weight: 400;
    }
    body > .app > .view.landing > .section.features > .block > .content {
        display: flex;
        font-size: 1.5vw;
    }
    body > .app > .view.landing > .section.team {
        display: none;
    }
    body > .app > .view > .section.footer {
        height: auto !important;
        background: rgba(38,49,57,1);
    }
    body > .app > .view > .section.footer > .connect {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        padding: 3vw 5vw 3vw 5vw;
    }
    body > .app > .view > .section.footer > .connect > .column {
        display: flex;
        flex-direction: column;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .label {
        display: flex;
        font-size: 1.2vw;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap {
        position: relative;
        display: flex;
        padding: 0 0 0.5vw 0;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.3vw;
        background: rgba(255,255,255,1);
        transition: width 0.2s ease;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap:hover:after {
        width: 50%;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap > .link {
        display: flex;
        font-size: 4vw;
        font-weight: 500;
        color: rgba(255,255,255,1);
        text-decoration: none;
    }
    body > .app > .view > .section.footer > .connect > .column.socials {
        align-items: flex-end;
        width: 100%;
        margin: 0 2vw 0 0;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .label {
        display: flex;
        margin: 0.2vw 0;
        font-size: 1.2vw;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link {
        position: relative;
        display: flex;
        margin: 0.2vw 0;
        font-size: 1.5vw;
        font-weight: 400;
        color: rgba(255,255,255,1);
        text-decoration: none;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link:after {
        content: '';
        position: absolute;
        top: 0;
        right: -0.5vw;
        width: 0.2vw;
        height: 100%;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link:hover:after {
        background: rgba(255,255,255,1);
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link:not(:hover):after {
        transition: all 1s ease;
    }
    body > .app > .view > .section.footer > .legal {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        padding: 0 5vw 3vw 5vw;
    }
    body > .app > .view > .section.footer > .legal > .copyright {
        display: flex;
        align-items: center;
        font-size: 1.2vw;
        white-space: nowrap;
    }
    body > .app > .view > .section.footer > .legal > .links {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    body > .app > .view > .section.footer > .legal > .links > .link {
        display: flex;
        padding: 1vw 2vw;
        font-size: 1.2vw;
        white-space: nowrap;
        cursor: pointer;
    }
    body > .app > .view > .section.footer > .legal > .links > .link:hover {
        background: rgba(255,255,255,0.1);
    }
    body > .app > .view > .section.footer > .legal > .links > .link:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .view.team {
        background: rgba(38,49,57,1);
        overflow: auto;
    }
    body > .app > .view.team > .section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }
    body > .app > .view.team > .section.profiles {
        box-sizing: content-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 5vw;
        column-gap: 5vw;
        width: auto;
        height: auto;
        padding: 10vw 0 5vw 5vw;
        background: rgba(78,84,91,1);
    }
    body > .app > .view.team > .section.profiles > .profile {
        display: flex;
        width: 45%;
    }
    body > .app > .view.team > .section.profiles > .profile > .avatar {
        display: flex;
        flex-shrink: 0;
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        box-shadow: 0 0 0.5vw 0 rgb(0 0 0), 0 0 0 0.8vw rgb(255 255 255);
    }
    body > .app > .view.team > .section.profiles > .profile > .content {
        display: flex;
        flex-direction: column;
        Justify-content: center;
        margin: 0 1vw 0 3vw;
    }
    body > .app > .view.team > .section.profiles > .profile > .content > .name {
        display: flex;
        font-size: 2vw;
        font-weight: 500;
    }
    body > .app > .view.team > .section.profiles > .profile > .content > .position {
        display: flex;
        font-size: 1.5vw;
    }
    body > .app > .view.team > .section.profiles > .profile > .content > .vita {
        display: flex;
        margin: 1vw 0 0 0;
        font-size: 1.2vw;
        font-style: italic;
    }
    body > .app > .view.login {
        justify-content: center;
        align-items: center;
        background: rgba(38,49,57,1);
    }
    body > .app > .view.login > .panel {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    body > .app > .view.login > .panel.static {
        transition: all 1s ease;
    }
    body > .app > .view.login > .panel > .label {
        display: flex;
        padding: 1vw 2vw 0 2vw;
        width: 26vw;
        background: rgba(255, 255, 255, 0.1);
        font-size: 2vw;
        font-weight: 300;
    }
    body > .app > .view.login > .panel > .helper {
        display: flex;
        padding: 1vw 2vw;
        width: 26vw;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255,255,255,0.5);
    }
    body > .app > .view.login > .panel > .qr {
        display: flex;
        width: 30vw;
        height: 12vw;
        background-repeat: no-repeat;
        background-size: 10vw;
        background-position: center;
        background-color: rgba(255, 255, 255, 0.1);
    }
    body > .app > .view.login > .panel > .wrap {
        display: flex;
        padding: 2vw 2vw 0 2vw;
        overflow: hidden;
    }
    body > .app > .view.login > .panel > .wrap:nth-child(2) {
        padding: 1vw 2vw 0 2vw;
    }
    body > .app > .view.login > .panel > .wrap > .wrap {
        position: relative;
        display: flex;
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input {
        box-sizing: border-box;
        display: flex;
        text-align: center;
        padding: 0.5vw 1vw;
        width: 26vw;
        border: none;
        border-radius: 0;
        outline: none;
        background: transparent;
        color: rgba(255,255,255,1);
        text-shadow: 0 0 0.2vw rgba(255, 255, 255, 1);
        font-family: 'Roboto', sans-serif;
        font-size: 2vw;
        font-weight: 300;
        cursor: text;
        -webkit-appearance: none;
        caret-color: rgba(255,255,255,1);
        caret-shape: underscore;
        box-shadow: 0 0 0 10vw rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: 0 0 0 10vw rgba(255, 255, 255, 0.3);
        -moz-box-shadow: 0 0 0 10vw rgba(255, 255, 255, 0.3);
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input:focus {
        outline: 0;
    }
    body > .app > .view.login > .panel > .wrap > .wrap:focus-within::before {
        content:'';
        position: absolute;
        top: 0.2vw;
        left: 0.2vw;
        bottom: 0.2vw;
        border-left: 5px solid rgba(0,255,255,1);
    }
    body > .app > .view.login > .panel > .wrap > .wrap:focus-within::after {
        content:'';
        position: absolute;
        top: 0.2vw;
        right: 0.2vw;
        bottom: 0.2vw;
        border-right: 5px solid rgba(0,255,255,1);
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input::placeholder,
    body > .app > .view.login > .panel > .wrap > .wrap > input::-webkit-input-placeholder {
        color: rgba(255,255,255,0.5);
        font-weight: 300;
        text-shadow: none;
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input:focus::placeholder,
    body > .app > .view.login > .panel > .wrap > .wrap > input:focus::-webkit-input-placeholder {
        color: rgba(255,255,255,0.7);
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input::selection {
        background: rgba(0,0,0,0.1);
    }
    body > .app > .view.login > .panel > .status {
        display: flex;
        align-items: flex-end;
        padding: 0 2vw 0.5vw 2vw;
        height: 1.5vw;
        background: rgba(255,255,255,0.3);
    }
    body > .app > .view.login > .panel > .status > .time {
        display: flex;
        color: rgba(255,255,255,1);
        white-space: nowrap;
        font-size: 1vw;
    }
    body > .app > .view.login > .panel > .status > .text {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        color: rgba(255,255,255,1);
        font-size: 1vw;
    }
    body > .app > .view.login > .panel > .action {
        position: absolute;
        display: flex;
        left: 100%;
        bottom: 2.2vw;
        width: 10vw;
        height: 3vw;
        overflow: hidden;
        pointer-events: none;
    }
    body > .app > .view.login > .panel > .action.active {
        box-shadow: inset 0.7vw 0 0.5vw -0.5vw rgb(0 0 0);
        -webkit-box-shadow: inset 0.7vw 0 0.5vw -0.5vw rgb(0 0 0);
        -moz-box-shadow: inset 0.7vw 0 0.5vw -0.5vw rgb(0 0 0);
        pointer-events: auto;
    }
    body > .app > .view.login > .panel > .action > .label {
        position: absolute;
        left: -10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 7vw;
        height: 3vw;
        padding: 0.01vw 0 0 0;
        background: rgba(0,255,255,0.5);
        color: rgba(255,255,255,1);
        text-shadow: 0 0 1px rgb(255 255 255);
        font-weight: 300;
        font-size: 1.5vw;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    body > .app > .view.login > .panel > .action.active > .label {
        left: 0;
    }
    body > .app > .view.login > .panel > .action.active > .label:hover {
        padding: 0 0 0 0.8vw;
    }
    body > .app > .view.login > .panel > .action.active > .label:hover:after {
        content: '';
        position: absolute;
        left: calc(100% + 0.3vw);
        width: 0.5vw;
        height: 100%;
        background: rgba(0,255,255,0.2);
    }
    body > .app > .view.login > .legal {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        width: 100%;
        padding: 0 5vw 3vw 5vw;
    }
    body > .app > .view.login > .legal > .copyright {
        display: flex;
        align-items: center;
        font-size: 1.2vw;
        white-space: nowrap;
    }
    body > .app > .view.login > .legal > .links {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    body > .app > .view.login > .legal > .links > .link {
        display: flex;
        padding: 1vw 2vw;
        font-size: 1.2vw;
        white-space: nowrap;
        cursor: pointer;
    }
    body > .app > .view.login > .legal > .links > .link:hover {
        background: rgba(255,255,255,0.1);
    }
    body > .app > .view.login > .legal > .links > .link:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .view.legal {
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,0.8) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P//vxQjI+MzBjTAiC4A4xMngWwscTqQ7QMAO4gIB01r2oEAAAAASUVORK5CYII=) repeat;
    }
    body > .status {
        display: none;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 0px;
        bottom: 0px;
        right: 0px;
        padding: 20px 0px;
        background: rgba(255,255,255,0.5);
        color: rgba(100,100,100,1);
        font-size: 2vw;
        font-weight: 100;
        font-family: 'Roboto', sans-serif;
        cursor: pointer;
        z-index: 3;
    }
    body > .status:hover {
        background: rgba(255,255,255,0.3);
    }
    body > .status.active {
        display: flex;
    }
}
@media (orientation: portrait) {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body > .app {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: rgba(230,230,230,1);
        color: rgba(255,255,255,1);
        font-weight: 100;
        font-family: 'Roboto', sans-serif;
        -webkit-user-select: none;
        cursor: default;
        z-index: 1;
    }
    body > .app > .master {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        width: calc(100% - 1vw);
        height: 15vw;
        background: rgba(0,0,0,1);
        z-index: 1;
        transition: top 0.2s ease;
    }
    body > .app > .master.hide {
        top: -15vw;
        transition: top 0.8s ease;
    }
    body > .app > .master > .brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        height: 100%;
        padding: 0 1vw;
    }
    body > .app > .master > .brand.active {
        cursor: pointer;
    }
    body > .app > .master > .brand.active:hover {
        background: rgba(255,255,255,0.1);
    }
    body > .app > .master > .brand.active:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .master > .brand > .row {
        display: flex;
    }
    body > .app > .master > .brand > .row > .icon {
        width: 5vw;
    }
    body > .app > .master > .brand > .row > .name {
        display: flex;
        margin: 0 0 0 1vw;
        font-size: 6vw;
        font-weight: 600;
    }
    body > .app > .master > .brand > .slogan {
        display: flex;
        font-size: 2.4vw;
        font-weight: 300;
        white-space: nowrap;
    }
    body > .app > .master > .actions {
        display: flex;
        margin: 0 1vw 0 auto;
    }
    body > .app > .master > .actions.hide {
        display: none;
    }
    body > .app > .master > .actions > .action {
        display: flex;
        margin: 0 0 0 1vw;
        padding: 2.5vw 5vw;
        font-size: 4vw;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
    }
    body > .app > .master > .actions > .action:hover {
        background: rgba(255,255,255,0.1);
    }
    body > .app > .master > .actions > .action:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .master > .actions > .action.connect {
        border-radius: 5vw;
        background: rgba(255,255,255,1);
        color: rgba(0,0,0,1);
    }
    body > .app > .master > .actions > .action.team {
        display: none;
        box-shadow: 0 1px 0 0 rgba(255,255,255,1);
    }
    body > .app > .master > .actions > .action.hide {
        display: none;
    }
    body > .app > .master > .user {
        position: relative;
        display: none;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        width: 15vw;
        height: 100%;
        padding: 0 2vw 0 0;
        cursor: pointer;
    }
    /*@media (hover: hover) {
        body > .app > .master > .user:hover {
            background: rgba(255,255,255,0.2);
        }
    }*/
    body > .app > .master > .user.touch {
        background: rgba(255,255,255,0.2);
    }
    body > .app > .master > .user.active {
        display: flex;
    }
    body > .app > .master > .user > .avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        background: rgba(0,255,255,0.5);
        font-size: 5vw;
        font-weight: 300;
    }
    /*@media (hover: hover) {
        body > .app > .master > .user:hover > .avatar {
            background: rgba(0,255,255,0.7);
        }
    }*/
    body > .app > .master > .user.touch > .avatar {
        background: rgba(0,255,255,0.7);
    }
    body > .app > .master > .user > .items {
        box-sizing: border-box;
        position: absolute;
        top: 100%;
        right: 0;
        display: none;
        flex-direction: column;
        padding: 0.5vw 0.5vw 0 0.5vw;
        background: rgba(255,255,255,0.2);
    }
    /*@media (hover: hover) {
        body > .app > .master > .user:hover > .items {
            display: flex;
        }
    }*/
    body > .app > .master > .user.touch > .items {
        display: flex;
    }
    body > .app > .master > .user > .items > .item {
        position: relative;
        display: flex;
        justify-content: flex-end;
        margin: 0 0 0.2vw 0;
        padding: 0.5vw 1vw;
        background: rgba(0,0,0,0.2);
        color: rgba(255,255,255,0.7);
        font-size: 4vw;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
    }
    body > .app > .master > .user > .items > .item:hover {
        background: rgba(0,255,255,0.7);
        color: rgba(255,255,255,1);
    }
    body > .app > .master > .user > .items > .item:not(:hover) {
        transition: all 1s ease;
    }
    body > .app > .master > .user > .items > .item:after {
        content: '';
        position: absolute;
        top: 0;
        left: -0.5vw;
        width: 0.2vw;
        height: 100%;
    }
    body > .app > .master > .user > .items > .item:hover:after {
        background: rgba(0,255,255,0.7);
    }
    body > .app > .master > .user > .items > .item:not(:hover):after {
        transition: all 1s ease;
    }
    body > .app > .view {
        position: relative;
        display: none;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body > .app > .view.active {
        display: flex;
    }
    body > .app > .view.landing {
        overflow: auto;
    }
    body > .app > .view.landing > .section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }
    body > .app > .view.landing > .section.header > .banner {
        position: absolute;
        z-index: -1;
        inset: 0px;
        overflow: hidden;
        background-size: cover;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-image: url(../img/solidintel_header.png);
    }
    body > .app > .view.landing > .section.header > .taglines {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 50%;
        margin: 0 12.5vw;
    }
    body > .app > .view.landing > .section.header > .taglines > .tagline.landscape {
        display: none;
    }
    body > .app > .view.landing > .section.header > .taglines > .tagline.portrait {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 9vw;
        font-weight: 600;
    }
    body > .app > .view.landing > .section.header > .taglines > .tagline.portrait > .item:nth-child(1) {
        transform: translateX(-5vw);
        white-space: nowrap;
    }
    body > .app > .view.landing > .section.header > .taglines > .tagline.portrait > .item:nth-child(2) {
        transform: translateX(5vw);
        white-space: nowrap;
    }
    body > .app > .view.landing > .section.header > .next {
        position: absolute;
        left: calc(50% - 8vw);
        bottom: 5vw;
        height: 18vw;
        width: 18vw;
        background: rgba(255,255,255,0.3) url('../img/skinny_arrow_down.svg') no-repeat center / 16vw;
        box-shadow: 0 0 3vw 3vw rgb(255 255 255 / 30%);
        border-radius: 50%;
        cursor: pointer;
        animation: fade-in 0.2s ease forwards;
    }
    body > .app > .view.landing > .section.header > .next:hover {
        opacity: 0.5!important;
    }
    body > .app > .view.landing > .section.header > .next.hide {
        animation: fade-out 0.8s ease forwards;
    }
    @keyframes fade-in {
        0% {opacity:0;}
        100% {opacity:0.3;}
    }
    @keyframes fade-out {
        0% {opacity:0.3;}
        99% {opacity:0;}
        100% {visibility:hidden;opacity:0;}
    }
    body > .app > .view.landing > .section.features {
        align-items: center;
        row-gap: 15vw;
        height: auto;
        padding: 15vw 0;
        background: rgba(0,0,0,1);
    }
    body > .app > .view.landing > .section.features > .block {
        display: flex;
        flex-direction: column;
        width: 60vw;
    }
    body > .app > .view.landing > .section.features > .block > .header {
        display: flex;
        margin: 0 0 1vw 0;
        font-size: 5vw;
        font-weight: 400;
    }
    body > .app > .view.landing > .section.features > .block > .content {
        display: flex;
        font-size: 5vw;
    }
    body > .app > .view.landing > .section.team {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 10vw 0;
        color: rgba(0,0,0,1);
        font-size: 5vw;
        font-weight: 300;
    }
    body > .app > .view.landing > .section.team > i {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 7vw;
        height: 7vw;
        margin: 0 0 0 3vw;
        border-radius: 50%;
        background: rgba(38,49,57,1);
        color: rgba(255,255,255,1);
    }
    body > .app > .view > .section.footer {
        height: auto !important;
        background: rgba(38,49,57,1);
    }
    body > .app > .view > .section.footer > .connect {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 3vw 5vw 3vw 5vw;
    }
    body > .app > .view > .section.footer > .connect > .column {
        display: flex;
        flex-direction: column;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .label {
        display: flex;
        font-size: 3.5vw;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap {
        position: relative;
        display: flex;
        padding: 0 0 1vw 0;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.6vw;
        background: rgba(255,255,255,1);
        transition: width 0.2s ease;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap:hover:after {
        width: 50%;
    }
    body > .app > .view > .section.footer > .connect > .column.email > .wrap > .link {
        display: flex;
        font-size: 8vw;
        font-weight: 500;
        color: rgba(255,255,255,1);
        text-decoration: none;
    }
    body > .app > .view > .section.footer > .connect > .column.socials {
        align-items: flex-start;
        margin: 5vw 2vw 2vw 0;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .label {
        display: flex;
        margin: 0.2vw 0;
        font-size: 3.5vw;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link {
        position: relative;
        display: flex;
        margin: 0.2vw 0;
        font-size: 4vw;
        font-weight: 400;
        color: rgba(255,255,255,1);
        text-decoration: none;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link:after {
        content: '';
        position: absolute;
        top: 0;
        right: -0.5vw;
        width: 0.2vw;
        height: 100%;
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link:hover:after {
        background: rgba(255,255,255,1);
    }
    body > .app > .view > .section.footer > .connect > .column.socials > .link:not(:hover):after {
        transition: all 1s ease;
    }
    body > .app > .view > .section.footer > .legal {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        padding: 0 5vw 3vw 5vw;
    }
    body > .app > .view > .section.footer > .legal > .copyright {
        display: flex;
        align-items: center;
        font-size: 3vw;
        white-space: nowrap;
    }
    body > .app > .view.team {
        overflow: auto;
    }
    body > .app > .view.team > .section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }
    body > .app > .view.team > .section.profiles {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 22vw 0 0 10vw;
        background: rgba(78,84,91,1);
    }
    body > .app > .view.team > .section.profiles > .profile {
        display: flex;
        margin: 0 0 10vw 0;
    }
    body > .app > .view.team > .section.profiles > .profile > .avatar {
        display: flex;
        flex-shrink: 0;
        width: 30vw;
        height: 30vw;
        border-radius: 50%;
        box-shadow: 0 0 1vw 0 rgb(0 0 0), 0 0 0 1.6vw rgb(255 255 255);
    }
    body > .app > .view.team > .section.profiles > .profile > .content {
        display: flex;
        flex-direction: column;
        Justify-content: center;
        margin: 0 2vw 0 6vw;
    }
    body > .app > .view.team > .section.profiles > .profile > .content > .name {
        display: flex;
        font-size: 5vw;
        font-weight: 500;
    }
    body > .app > .view.team > .section.profiles > .profile > .content > .position {
        display: flex;
        font-size: 4vw;
    }
    body > .app > .view.team > .section.profiles > .profile > .content > .vita {
        display: flex;
        margin: 2vw 0 0 0;
        font-size: 3vw;
        font-style: italic;
    }
    body > .app > .view.login {
        justify-content: center;
        align-items: center;
        background: rgba(38,49,57,1);
    }
    body > .app > .view.login > .panel {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    body > .app > .view.login > .panel.static {
        transition: all 1s ease;
    }
    body > .app > .view.login > .panel > .wrap {
        display: flex;
        padding: 4vw 4vw 0 4vw;
        overflow: hidden;
    }
    body > .app > .view.login > .panel > .wrap:nth-child(2) {
        padding: 1vw 4vw 0 4vw;
    }
    body > .app > .view.login > .panel > .wrap > .wrap {
        position: relative;
        display: flex;
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input {
        box-sizing: border-box;
        display: flex;
        text-align: center;
        padding: 0.5vw 1vw;
        border: none;
        border-radius: 0;
        outline: none;
        background: transparent;
        color: rgba(255,255,255,1);
        text-shadow: 0 0 0.2vw rgba(255, 255, 255, 1);
        font-family: 'Roboto', sans-serif;
        font-size: 4vw;
        font-weight: 300;
        cursor: text;
        -webkit-appearance: none;
        caret-color: rgba(255,255,255,1);
        caret-shape: underscore;
        box-shadow: 0 0 0 10vw rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: 0 0 0 10vw rgba(255, 255, 255, 0.3);
        -moz-box-shadow: 0 0 0 10vw rgba(255, 255, 255, 0.3);
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input:focus {
        outline: 0;
    }
    body > .app > .view.login > .panel > .wrap > .wrap:focus-within::before {
        content:'';
        position: absolute;
        top: 0.2vw;
        left: 0.2vw;
        bottom: 0.2vw;
        border-left: 5px solid rgba(0,255,255,1);
    }
    body > .app > .view.login > .panel > .wrap > .wrap:focus-within::after {
        content:'';
        position: absolute;
        top: 0.2vw;
        right: 0.2vw;
        bottom: 0.2vw;
        border-right: 5px solid rgba(0,255,255,1);
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input::placeholder,
    body > .app > .view.login > .panel > .wrap > .wrap > input::-webkit-input-placeholder {
        color: rgba(255,255,255,0.5);
        font-weight: 300;
        text-shadow: none;
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input:focus::placeholder,
    body > .app > .view.login > .panel > .wrap > .wrap > input:focus::-webkit-input-placeholder {
        color: rgba(255,255,255,0.7);
    }
    body > .app > .view.login > .panel > .wrap > .wrap > input::selection {
        background: rgba(0,0,0,0.1);
    }
    body > .app > .view.login > .panel > .status {
        display: flex;
        align-items: flex-end;
        padding: 0 2vw 0.5vw 2vw;
        height: 3.5vw;
        background: rgba(255,255,255,0.3);
    }
    body > .app > .view.login > .panel > .status > .time {
        display: flex;
        color: rgba(255,255,255,1);
        white-space: nowrap;
        font-size: 3vw;
    }
    body > .app > .view.login > .panel > .status > .text {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        color: rgba(255,255,255,1);
        font-size: 3vw;
    }
    body > .app > .view.login > .panel > .action {
        position: absolute;
        display: flex;
        left: 100%;
        bottom: 4vw;
        width: 13vw;
        height: 5.5vw;
        overflow: hidden;
        pointer-events: none;
    }
    body > .app > .view.login > .panel > .action.active {
        box-shadow: inset 0.7vw 0 0.5vw -0.5vw rgb(0 0 0);
        -webkit-box-shadow: inset 0.7vw 0 0.5vw -0.5vw rgb(0 0 0);
        -moz-box-shadow: inset 0.7vw 0 0.5vw -0.5vw rgb(0 0 0);
        pointer-events: auto;
    }
    body > .app > .view.login > .panel > .action > .label {
        position: absolute;
        left: -13vw;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 13vw;
        height: 6vw;
        padding: 0.01vw 0 0 0;
        background: rgba(0,255,255,0.5);
        color: rgba(255,255,255,1);
        text-shadow: 0 0 1px rgb(255 255 255);
        font-weight: 300;
        font-size: 3vw;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    body > .app > .view.login > .panel > .action.active > .label {
        left: 0;
    }
    body > .app > .view.login > .panel > .action.active > .label:hover {
        padding: 0 0 0 0.8vw;
    }
    body > .app > .view.login > .panel > .action.active > .label:hover:after {
        content: '';
        position: absolute;
        left: calc(100% + 0.3vw);
        width: 0.5vw;
        height: 100%;
        background: rgba(0,255,255,0.2);
    }
    body > .app > .view.login > .legal {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        width: 100%;
        padding: 0 5vw 3vw 5vw;
    }
    body > .app > .view.login > .legal > .copyright {
        display: flex;
        align-items: center;
        font-size: 3vw;
        white-space: nowrap;
    }
    body > .status {
        display: none;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 0px;
        bottom: 0px;
        right: 0px;
        padding: 20px 0px;
        background: rgba(255,255,255,0.5);
        color: rgba(100,100,100,1);
        font-size: 2vw;
        font-weight: 100;
        font-family: 'Roboto', sans-serif;
        cursor: pointer;
        z-index: 3;
    }
    body > .status:hover {
        background: rgba(255,255,255,0.3);
    }
    body > .status.active {
        display: flex;
    }
}