/* Public site only: header, hero, container, list pages, etc. Load with common.css on app layout. */
/* Consistent horizontal gutter: same value for header, hero, and main content. */
:root {
    --public-gutter: 1rem;
}

@media (min-width: 1024px) {
    :root {
        --public-gutter: var(--space-6);
    }
}

.container {
    max-width: 1200px;
/*    max-width: 920px;*/
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
}

.container--big {
    max-width: 1180px;
}

/* Public pages: gutter controlled by --public-gutter (desktop in :root above) */
@media (min-width: 1024px) {
    .container {
        padding-left: var(--public-gutter);
        padding-right: var(--public-gutter);
    }

    .container.cols {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 var(--space-12, 3rem);
    }

    .container .leftmenu {
        width: 240px;
    }

    .container .c1 {
        width: 180px;
        flex-shrink: 0;
    }
    .container .c2 {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }
    .container .c2_half {
        width: 350px;
    }
    .container .c3 {
        width: 260px;
        min-width: 220px;
        flex-shrink: 0;
    }
    .container .c2c3 {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Startups (and similar) cols: stack filters below list on narrow viewports */
@media (max-width: 960px) {
    .container.cols .c2,
    .container.cols .c3,
    .container.cols .c2c3 {
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }
    .container.cols .c3 {
        margin-top: var(--space-6, 1.5rem);
        padding-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: var(--space-4, 1rem);
    }
}

.container.cols.start {
    justify-content: flex-start;
}

/* Q&A page: no horizontal padding on main content, full-bleed within column */
.container.cols.cols-qa .c2c3 {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 1024px) {
    .container .half {
        width: 49%;
    }

    .container .left {
        width: 280px;
    }

    .container .leftmenu {
        width: 240px;
    }

    .container .right {
        width: 620px;
        /* width: 988px; */
    }

    .container .right-810 {
        width: 810px;
    }
}

.h2 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.container .left h2,
.container .right h2 {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 20px;
}

@media (min-width: 1024px) {
    .container-left {
        width: 200px;
    }

    .container-right {
        width: 830px;
    }

    .container-340 {
        width: 340px;
    }

    .container-710 {
        width: 710px;
    }
}

.header {
    background: #fff;
    /* box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px; */
    border-bottom: var(--border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.header .header-container {
    height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
}

.header .logo-container {
    display: flex;
    align-items: center;
}

.header .logo {
    display: flex;
    align-items: center;
    margin-right: 0;
    text-decoration: none;
    color: #050c26;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.header.bg .logo {
    color: #fff;
}

.header .logo span {
    display: none;
}

@media (min-width: 1024px) {
    .header .logo {
        /* margin-right: 10px; */
    }

    .header .logo span {
        display: inline;
        padding-left: 10px;
    }
}

.header .logo:hover {
    opacity: 0.9;
}

.header .logo:active {
    opacity: 0.8;
}

.header .logo img {
    display: block;
    margin-right: 0;
}

.header .header-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;
}

.header .header-user .photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: relative;
}

.header .header-user .photo:hover {
    opacity: 0.8;
}

.header .header-user .photo:active {
    opacity: 0.5;
}

.header .header-user .photo.placeholder {
    border: 1px solid #ddd;
}

.header .header-user .team {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -2px;
    right: -4px;
    box-shadow: var(--shadow);
}

.pagehead p a {
    text-decoration: none;
    color: #333;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.pagehead p a:hover {
    opacity: 0.8;
}

.pagehead p a:active {
    opacity: 0.5;
}

.pagehead p span {

}
.pagehead p span img {
    margin-right: 5px;
    vertical-align: sub;
    height: 18px;
}

.pagehead h1 {
    margin: 0 0 0 0;
    padding: 0 20px;
    color: #1c1c1c;
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    font-size: 30px;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .pagehead h1 {
        margin: 0 0 0 0;
        color: #1c1c1c;
        /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
        font-size: 40px;
        line-height: 1.2;
        /* max-width: 730px; */
        padding: 0;
    }
}

.pagehead p {
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    margin: 15px 0 0 0;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    /* max-width: 730px; */
    padding: 0 20px;
}

@media (min-width: 1024px) {
    .pagehead p {
        padding: 0;
    }
}

.pagehead {
    background: var(--warm-cream);
    border-width: 2px;
    padding: 35px 0 40px 0;
}

@media (min-width: 1024px) {
    .pagehead {
        padding: 55px 0 60px 0;
    }
}

@media (min-width: 1024px) {
    .pagehead .pagehead-container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.topmenu {
    display: flex;
}

.topmenu-new {
    text-transform: uppercase;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 5px 5px 6px;
    border-radius: 3px;
    margin-left: 3px;
    line-height: 1;
}

.beta-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--black);
    background-color: var(--teal-primary);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.2;
}

.topmenu .item {
    text-decoration: none;
    color: #000;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
    justify-content: center;
    margin-left: 2px;
    outline: none;
}

/* Mobile menu trigger – hamburger + "Menu" label */
.topmenu .item.mobile.mobile-menu-trigger {
    width: auto;
    height: 44px;
    padding: 0 12px;
    gap: 8px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
}
.topmenu .item.mobile.mobile-menu-trigger .mobile-menu-trigger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 20px;
}
.topmenu .item.mobile.mobile-menu-trigger .mobile-menu-trigger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.topmenu .item.mobile.mobile-menu-trigger[aria-expanded="true"] .mobile-menu-trigger-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.topmenu .item.mobile.mobile-menu-trigger[aria-expanded="true"] .mobile-menu-trigger-icon span:nth-child(2) {
    opacity: 0;
}
.topmenu .item.mobile.mobile-menu-trigger[aria-expanded="true"] .mobile-menu-trigger-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.topmenu .item.mobile.mobile-menu-trigger .mobile-menu-trigger-label {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}
.header.bg .topmenu .item.mobile.mobile-menu-trigger {
    color: #fff;
}

/* Mobile nav dropdown – full-width on small screens */
#header-topmenu-dropdown.mobile-nav-dropdown {
    width: 200px;
}
@media (max-width: 1023px) {
    #header-topmenu-dropdown.mobile-nav-dropdown {
        position: fixed;
        left: 0;
        right: 0;
        top: 70px;
        width: 100%;
        max-width: 320px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        border-radius: 0 0 var(--radius) 0;
        z-index: 100;
    }
    #header-topmenu-dropdown.mobile-nav-dropdown.hidden {
        display: none !important;
    }
    #header-topmenu-dropdown.mobile-nav-dropdown:not(.hidden) {
        display: block !important;
    }
}

.topmenu .item.desktop {
    display: none;
}

@media (min-width: 1024px) {
    .topmenu .item.desktop {
        display: flex;
    }
}

.topmenu a {
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #050c26;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.topmenu a:hover {
    color: var(--brand-color);
}

.topmenu a.desktop {
    display: none;
}

@media (min-width: 1024px) {
    .topmenu a.desktop {
        display: flex;
    }

    .topmenu .mobile {
        display: none;
    }
}

.header .buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

@media (min-width: 1024px) {
    .header .buttons,
    .header .logo-container {
        /* width: 250px; */
    }
}

.header .buttons .button {
    display: block;
    background-color: transparent;
    color: var(--black);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 14px;
/*    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);*/
    border: 2px solid var(--brand-color);
/*    box-shadow: var(--shadow);*/
}

.header .buttons .button.desktop {
    display: none;
}

@media (min-width: 1024px) {
    .header .buttons .button.desktop {
        display: block;
    }
}

.header.bg .buttons .button {
    border-color: var(--brand-color);
    background-color: var(--brand-color);
    color: var(--black);
}
.header.bg .buttons .button:hover {
    color: var(--black);
    opacity: 0.9;
}

.header .buttons .button:hover {
    color: var(--black);
    border-color: var(--black);
    opacity: 1;
}

.header .buttons .button:active {
    opacity: 0.8;
}

.header .buttons .button.gray {
    background: transparent;
    border-color: transparent;
    color: #333;
    box-shadow: none;
}

.header .buttons .button.gray:hover {
    background: #f1f1f1;
}

.header.bg {
    position: relative;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: rgba(255, 255, 255, 0.3) 0px 4px 16px;
}

.header.bg .buttons .button.gray {
    border-color: transparent;
    background: transparent;
    color: #f9f9f9;
}

.header.bg .buttons .button.gray:hover {
    background: #f9f9f9;
    color: #333;
}

.header.bg .topmenu a.desktop {
    color: #fff;
}

.header.bg .topmenu a:hover {
    color: var(--brand-color);
}

.filter {
    /* background-color: #fff; */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Right sidebar filter (c3) – prevent squishing, allow wrapping */
@media (min-width: 1024px) {
    .container.cols .c3 {
        padding-left: 16px;
    }
    .container.cols .c3 .filter .item {
        min-width: 0;
        font-size: 12px;
        padding: 10px 6px;
        white-space: normal;
        word-break: break-word;
    }
}

.filter .item {
    color: #000;
    font-size: 13px;
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    text-align: center;
    padding: 14px 5px;
    color: #494949;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: var(--border);
    background: #fff;
    /* box-shadow: var(--shadow); */
}

.filter .item img {
    display: block;
    height: 14px;
    margin-right: 3px;
}

.filter .item:hover {
    background: #f9f9fa;
}

.filter .item:active,
.filter .item.active {
    background: #f0f9fd;
}

.filterbtns {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.filterbtns-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .filterbtns-desktop {
        display: block;
    }
}

.filterbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #494949;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    margin-bottom: 15px;
    margin-right: 5px;
    /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px; */
    border: var(--border);
    border-radius: var(--radius);
    padding: 12px 10px;
    background: #fff;
    white-space: nowrap;
}

.filterbtn.filterbtn--brand-color {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

a.filterbtn {
    cursor: pointer;
}

a.filterbtn:hover {
    background: #F7F7F7;
    text-decoration: none;
}

a.filterbtn:active {
    opacity: 0.8;
}

.filterbtn .remove {
    width: 16px;
    margin-left: 5px;
}

.filterbtngroup {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #494949;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    margin-bottom: 15px;
    /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px; */
    border: var(--border);
    border-radius: var(--radius);
    background: #fff;
    white-space: nowrap;
}

.filterbtngroup:not(:last-child) {
    margin-right: 5px;
}

.filterbtngroup .btn {
    padding: 12px 10px;
    color: #494949;
    text-decoration: none;
    cursor: pointer;
}

.filterbtngroup .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.filterbtngroup .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.filterbtngroup .btn:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.filterbtngroup .btn:hover {
    background: #F7F7F7;
}

.filterbtngroup .btn.active {
    background: #f0f9fd;
}

.filterbtngroup .txt {
    padding: 12px 10px;
    color: #494949;
}

.filterbtngroup .txt:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.list {
    position: relative;
}

.list-cover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 320px;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.7) 30%, rgba(245, 245, 245, 0.95) 60%, rgba(245, 245, 245, 1) 85%);
}

.list-cover-title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-top: 120px;
}

.list-cover-info {
    text-align: center;
    font-size: 18px;
    color: #777;
    font-weight: normal;
    margin-top: 20px;
    line-height: 1.6;
    padding: 0 60px;
}

.list-cover-action {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.list-cover-button {
    background: var(--teal-bright);
    display: block;
    padding: 15px 30px;
    border-radius: var(--radius);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: var(--black);
    border: 2px solid var(--teal-primary);
/*    box-shadow: 1px 2px 4px rgba(0,0,0,.1);*/
}

.list-cover-button:hover {
    color: var(--black);
    background: var(--teal-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Prevent scrolling to see beyond overlay for non-premium users */
.container.cols.has-overlay,
.radar-teaser-container {
    position: relative;
    max-height: 1200px;
    overflow: hidden;
}

.container.cols.has-overlay .list-cover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 320px;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.7) 30%, rgba(245, 245, 245, 0.95) 60%, rgba(245, 245, 245, 1) 85%);
    z-index: 100;
    pointer-events: none;
}

.container.cols.has-overlay .list-cover > * {
    pointer-events: auto;
}

.list-cover-button:active {
    opacity: 0.5;
}

.list.flow {
    border-radius: 4px;
    border: var(--border);
}

.list.flow .item {
    border: none;
    margin-bottom: 0;
    border-radius: 0;
}

.list.flow .item:not(:last-child) {
    border-bottom: var(--border);
}

.jobheader-container {
    margin-top: 30px;
    margin-bottom: 30px;
}

.list .item {
    border: var(--border);
    box-shadow: var(--shadow);
    background-color: #fff;
    color: #000;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px 10px;
    margin-bottom: 10px;
    margin-left: -10px;
    margin-right: -10px;
    min-width: 0;
}

.list .item.job {
    background: lightyellow;
}

.list .item:hover {
    opacity: 0.8;
}

.list .item:active {
    opacity: 0.5;
}

.list .item .time {
    font-size: 13px;
    color: #999;
    margin-left: 5px;
}

@media (min-width: 1024px) {
    .list .item {
        border-radius: var(--radius);
        margin-bottom: 10px;
        margin-left: 0;
        margin-right: 0;
        /* box-shadow: var(--shadow); */
        border: var(--border);
        display: flex;
        align-items: center;
        padding: 17px 20px;
    }
}

.list .item .inline-contents .jobheader-container {
    display: none;
}

.list .item-maker {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-left: auto;
}

.list .item .premium {
    background: #e8e8e8;
    color: #333;
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 20px 10px;
    line-height: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-medium);
}

.list .item .premium svg {
    margin-right: 5px;
}

.list .item .top {
    display: flex;
    align-items: center;
    /* padding: 20px; */
    color: #000;
    text-decoration: none;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.list .item .top:hover {
    opacity: 0.8;
}

.list .item .top:active {
    opacity: 0.5;
}

.list .item .bottom {
    border-top: 1px solid rgb(228, 231, 240);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.list .item:first-child {
    /* border-top-left-radius: var(--radius); */
    /* border-top-right-radius: var(--radius); */
}

.list .item:last-child {
    /* border-bottom-left-radius: var(--radius); */
    /* border-bottom-right-radius: var(--radius); */
    margin-bottom: 0;
}

.list .item .contents {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.list .item .logo {
    display: block;
    width: 50px;
    margin-right: 12px;
}

.list .item .logo-placeholder {
    width: 50px;
    height: 50px;
    background: #f3f3f3;
    margin-right: 12px;
    background-size: contain;
    background-position: center;
}

/* @media (min-width: 1024px) { */
    .list .item .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
/* } */

.list .item .title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #0f1115;
}

/* Section titles: Latest startups, New members */
.container.cols .c2 > h4.mb-10,
.container.cols .c3 > h4.mb-10 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
}

/* New members list: smaller font + Instrument Sans */
.container.cols .c3 .list .item .title h2 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.list .item .title .price {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    margin-top: 5px;
}

@media (min-width: 1024px) {
    .list .item .title .price {
        margin-top: 0;
        margin-left: 5px;
    }
}

.list .item .title .price .label {
    background: #f3f3f3;
    padding: 5px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.list .item .title .price .money {
    background: var(--green);
    padding: 5px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
}

.list .item .tagline {
    font-size: 14px;
    color: var(--grey);
    /* margin-top: 10px; */
    line-height: 1.5;
    margin-top: 2px;
    font-family: var(--font-family-body);
}

.item-arr {
    line-height: 1;
    padding: 6px;
    border-radius: var(--radius);
    background: var(--green-bg);
    color: var(--green-text);
    border: 1px solid var(--green-text);
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    /* margin-left: 10px; */
}

/* Startup page header MRR: orange to match cards, smaller + Instrument Sans (30% smaller) */
/* Startup page header MRR: orange to match cards, clearly smaller than startup name */
.block .jobheader .item-arr,
.jobheader .item-arr {
    background: rgba(255, 107, 53, 0.12);
    color: var(--brand-orange-dark);
    border-color: rgba(255, 107, 53, 0.35);
    font-family: var(--font-family-body);
    font-size: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 4px;
    margin-top: 0;
    margin-left: 10px;
}

/* Override .title > div 24px so MRR stays small (title applies 24px to all direct children) */
.jobheader .contents .title .item-arr {
    font-size: 14px;
}

.list .item .info {
    display: flex;
}

/* .list .item .tags {
    margin-top: 12px;
} */

@media (min-width: 1024px) {
    .list .item .tags {
        display: flex;
    }
}

.list .item .tag {
    color: #162040;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    padding: 6px;
    margin-right: 8px;
    background: #F4F7FA;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    line-height: 1;
    border: 1px solid #162040;
}

.list .item .tag.green {
    background: var(--green-bg);
    color: var(--green-text);
    border: 1px solid var(--green-text);
}

/* MRR on list cards: softer orange to match hero badges */
.list .item .tag.tag--mrr {
    background: rgba(255, 107, 53, 0.12);
    color: var(--brand-orange-dark);
    border-color: rgba(255, 107, 53, 0.35);
}

.list .item .tag.blue {
    background: var(--brand-color);
    color: #fff;
}

@media (min-width: 1024px) {
    .list .item .tag.price {
        margin-left: auto;
        margin-right: 0;
    }
}

@media (min-width: 1024px) {
    .list .item .tag {
        display: flex;
        margin-bottom: 0;
    }
}

.list .item .tag img {
    display: block;
    height: 14px;
    margin-right: 3px;
}

.list .item .values {
    display: flex;
    margin-top: 5px;
}

.list .item .value {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    margin-right: 5px;
}

.jobheader {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    text-decoration: none;
    margin: 20px 0;
}

.jobheader .contents {
    margin-top: 20px;
}

.jobheader .contents .title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
}

.jobheader .contents .title > div {
    font-size: 24px;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .jobheader .contents .title {
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .jobheader .contents {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .jobheader {
        flex-direction: row;
        align-items: center;
        color: #000;
        text-decoration: none;
    }
}

@media (min-width: 1024px) {
    .jobheader .title {
        display: flex;
        align-items: center;
    }
}

.jobheader .verified {
    display: block;
    height: 1em;
    margin-left: 5px;
}

.jobheader .logo {
    display: block;
    width: 50px;
}

@media (min-width: 1024px) {
    .jobheader .logo {
        margin-right: 12px;
    }
}

.jobheader .logo.rounded {
    border-radius: 50%;
}

.jobheader .logo.placeholder {
    border: 1px solid #ddd;
}

.jobheader h2, .jobheader .title-name {
    margin: 0;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

@media (min-width: 1024px) {
    .jobheader h2 {
        text-align: left;
    }
}

.jobheader .tagline {
    font-size: 13px;
    color: var(--grey);
    margin-top: 4px;
    /* margin-bottom: 15px; */
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .jobheader .tagline {
        justify-content: flex-start;
    }
}

.jobheader .tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 1024px) {
    .jobheader .tags {
        justify-content: flex-start;
    }
}

.jobheader .tag {
    /* border: 1px solid #e8e8e8; */
    color: #6f6f6f;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    padding: 6px;
    margin-right: 5px;
    background-color: #e8e8e8;
    display: flex;
    margin-bottom: 10px;
}

@media (min-width: 1024px) {
    .jobheader .tag {
        margin-bottom: 0;
    }
}

.jobheader a.tag:hover {
    background: #e8e8e8;
}

.jobheader a.tag:active {
    opacity: 0.5;
}

.jobheader .tag.green {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.jobheader .tag img {
    display: block;
    height: 1em;
    margin-left: 3px;
}

.jobheader .values {
    display: flex;
}

.jobheader .value {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    margin-right: 5px;
}

.apply-btn {
    background-color: var(--brand-color);
    border-radius: 6px;
    box-shadow: var(--shadow);
    color: #111;
    padding: 10px 18px;
    line-height: 1.25;
    font-size: 15px;
    text-decoration: none;
    font-weight: 600;
    display: block;
    text-align: center;
    border: 2px solid var(--brand-color);
}

.apply-btn:hover {
    opacity: 0.92;
}

.apply-btn:active {
    opacity: 0.85;
}

.block {
    font-size: 14px;
    border: var(--border);
    border-radius: var(--radius);
    /* box-shadow: var(--shadow); */
    background-color: #fff;
}

.block p.info {
    margin: 0;
    font-size: 15px;
    color: #aaa;
    text-align: center;
    margin-top: 18px;
    margin-bottom: 3px;
    line-height: 1;
}

.block p.info a {
    border-bottom: 2px solid #e3e3e3;
    text-decoration: none;
    padding-bottom: 0;
    color: var(--brand-color);
    font-weight: 600;
}

.block h2 {
    margin: 10px 0 30px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}

.block.block-dark {
    background: #f6f6f6;
    border-color: #f6f6f6;
}

.block.block-dark p a {
    color: var(--brand-color);
}

.block .inside {
    padding: 20px;
}

.block .text p {
    line-height: 1.6;
    font-size: 14px;
    font-family: var(--font-family-body);
}

.block .text p:first-child {
    margin-top: 0;
}

.block .text p:last-child {
    margin-bottom: 0;
}

.block .row {
    margin-bottom: 20px;
    font-size: 15px;
}

/* @media (min-width: 1024px) {
    .block .row .text {
        max-width: 50%;
    }
} */

.shortcode-small .block .row .text {
    max-width: 100%;
    font-size: 1rem; /* 16px minimum */
    font-family: var(--font-family-body);
}

.shortcode-small .jobheader {
    margin-bottom: 30px;
}

.block .row:first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.block .row:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.block a.row {
    text-decoration: none;
    color: #000;
    display: block;
}

.block a.row:hover {
    background-color: #f9f9f9;
}

.block a.row:active {
    background-color: #f0f9fd;
}

.block .row:last-child {
    margin-bottom: 0;
}

.block .row.border {
    border-bottom: 1px solid #e8e8e8;
}

.block .row.border:last-child {
    border-bottom: 0;
}

.block .row.buttons {
    display: flex;
    justify-content: space-between;
}

.block ul li {
    line-height: 1.6;
}

.block ul:last-child {
    margin-bottom: 0;
}

.block .tags {
    display: flex;
    flex-flow: wrap;
    margin: -3px;
}

.block .tag {
    background: #f2f3f4;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 13px;
    padding: 8px;
    line-height: 1;
    color: #494949;
    margin: 3px;
    display: flex;
    align-items: center;
}

.block a.tag:hover {
    background-color: #e8e8e8;
}

.block .tag.blue {
    background: var(--brand-color);
    color: #fff;
}

.block .tag.blue:hover {
    background: var(--brand-color);
    opacity: 0.8;
}



.block .tag img {
    display: block;
    height: 14px;
    margin-right: 3px;
}

.gallery {
    width: 100%;
    height: 190px;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.gallery .placeholder {
    display: inline-block;
    width: 380px;
    height: 380px;
    background: #f3f3f3;
}

@media all and (min-width: 1100px) {
    .gallery {
        height: 380px;
    }
}

.gallery__item {
    display: inline-block;
    height: 190px;
}

@media all and (min-width: 1100px) {
    .gallery__item {
        height: 380px;
    }
}

.thumbnails {
    height: 50px;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: visible;
    display: flex;
}

.thumbnails .item {
    display: block;
    width: 70px;
    height: 50px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-right: 10px;
    flex: none;
}

.thumbnails .item.placeholder {
    background: #e8e8e8;
}

.thumbnails .item .delete {
    width: 20px;
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}

.thumbnails .item .delete:hover {
    opacity: 0.8;
}

.thumbnails .item .delete:active {
    opacity: 0.6;
}

.thumbnails a.item:hover {
    opacity: 0.8;
}

.thumbnails a.item:active {
    opacity: 0.6;
}

.team-map {
    background-color: #fff;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    color: #000;
    text-decoration: none;
    display: block;
}

a.team-map:hover {
    background-color: #f9f9f9;
}

a.team-map:active {
    background-color: #f0f9fd;
}

.team-map .image {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.team-map .map {
    width: 100%;
    height: 240px;
}

.team-map .map .marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: var(--shadow);
    border: 2px solid #fff;
}

.team-map .team {
    display: flex;
    align-items: center;
    padding: 20px;
}

.team-map .team .logo {
    display: block;
    width: 50px;
    margin-right: 12px;
}

.team-map .team h2 {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
}

.team-map .team .tagline {
    font-size: 14px;
    color: var(--grey);
    margin-bottom: 10px;
    margin-top: 7px;
}

.team-map .team .tags {
    display: flex;
}

.team-map .team .tag {
    border: 1px solid #e8e8e8;
    color: #6f6f6f;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    padding: 4px;
    margin-right: 5px;
    background-color: #fff;
}

.team-map .team .values {
    display: flex;
}

.team-map .team .value {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    margin-right: 5px;
}

.form .label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-family-body);
    margin-bottom: 10px;
}

.form .note {
    font-size: 13px;
    color: #aaa;
    margin-top: 5px;
}

.form .select {
    box-sizing: border-box;
    width: 100%;
}

.form .select.invalid {
    border-color: var(--red);
}

.form .field {
    font-family: var(--font-family);
    border: 1px solid #DCDCE0;
    border-radius: var(--radius);
    padding: 8px 6px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

.form textarea.field {
    line-height: 1.4;
    resize: none;
}

.form .field.invalid {
    border-color: var(--red);
}

.form .field:focus {
    border-color: var(--brand-color);
    outline: none;
}

.form .button {
    cursor: pointer;
    display: block;
    background-color: var(--brand-color);
    color: var(--black);
    border-radius: var(--radius);
    font-size: 12px;
    text-decoration: none;
    padding: 12px 14px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    border: none;
}

.submit-comment .button {
    padding: 15px 14px;
}

.form .button:hover {
    opacity: 0.9;
}

.form .button:active {
    opacity: 0.8;
}

.form .button.border {
    display: block;
    background: transparent;
    border: 1px solid var(--brand-color);
    border-color: var(--brand-color);
    color: var(--brand-color);
}

.form .button.grey {
    display: block;
    background: transparent;
    color: #000;
}

.form .button.grey:hover {
    background: #e8e8e8;
    border-color: #e8e8e8;
}

.form .upload {
    width: 80px;
    height: 80px;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    position: relative;
}

.form .upload.missing {
    border-color: var(--red);
}

.form .upload:hover {
    opacity: 0.8;
}

.form .upload:active {
    opacity: 0.5;
}

.image-upload {
    width: 80px;
    height: 80px;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.image-upload.missing {
    border-color: var(--red);
}

.image-upload.rounded {
    border-radius: 50%;
}

.image-upload .plus-container {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.image-upload .plus-container:hover {
    opacity: 0.5;
}

.image-upload .remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    cursor: pointer;
}

.image-upload.rounded .remove {
    top: 0;
    right: 0;
}

.image-upload .remove:hover {
    opacity: 0.5;
}

.image-upload .remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
}

.benefits {
    background-color: #fff;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.benefits .benefit {
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    color: #000;
    text-decoration: none;
}

.benefits .benefit.active,
.benefits .benefit.active:hover {
    background: #f0f9fd;
}

.benefits .row {
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.benefits .row:first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.benefits .row:last-child {
    border-bottom: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.benefits .benefit:hover {
    background: #f9f9fa;
}

.benefits .benefit:active {
    background: #f0f9fd;
}

.dimmer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: auto;
    z-index: 100;
}

.dimmer.light {
    background-color: rgba(255, 255, 255, 0.7);
}

.dimmer .close {
    width: 40px;
    position: absolute;
    top: 30px;
    left: 30px;
    cursor: pointer;
}

.dimmer .close:hover {
    opacity: 0.8;
}

.dimmer .close:active {
    opacity: 0.5;
}

.modal {
    background: var(--bg);
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: absolute;
    top: 100px;
    width: 100%;
}

@media (min-width: 1024px) {
    .modal {
        left: 50%;
        width: 1160px;
        box-shadow: 1px 0 6px 0 rgba(0, 0, 0, 0.3);
        margin: 0 auto 40px calc(1160px / 2 * -1);
    }
}

.header-map {
    width: 100%;
    height: 263px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #191a1a;
    margin-top: -71px;
}

.modal .header-map {
    margin-top: 0;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.seller {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

a.seller:hover {
    opacity: 0.8;
}

a.seller:active {
    opacity: 0.5;
}

.seller .photo {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 10px;
}

.seller .photo.placeholder {
    border: 1px solid #ddd;
}

.blurred {
    color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.loadtime {
    font-size: 10px;
    position: fixed;
    right: 5px;
    bottom: 5px;
}

.postauthor-container {
    display: flex;
    justify-content: flex-start;
    max-width: 650px;
    margin: 20px auto 5px auto;
}

.postauthor {
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
}

.postauthor-contents {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.postauthor img {
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.postauthor span {
    color: #777;
    font-weight: var(--font-weight-light);
    margin-left: 0;
}

@media (min-width: 1024px) {
    .postauthor-contents {
        flex-direction: row;
    }

    .postauthor span {
        margin-left: 5px;
    }
}

.postauthor div {
    color: #000;
    /* border-bottom: 2px solid #e3e3e3; */
    text-decoration: none;
    /* padding-bottom: 2px; */
    font-weight: var(--font-weight-medium);
}

.postauthor:hover {
    opacity: 0.8;
}

.postauthor:active {
    opacity: 0.5;
}

.single-post {
    /* max-width: 830px; */
    padding: 0 10px;
}

@media (min-width: 1024px) {
    .single-post {
        padding: 0;
    }
}

.post .single-post > h1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 42px;
}

.post p.single-post-intro {
    font-family: Georgia,serif;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 30px;
}

@media (min-width: 1024px) {
    .single-post > h1,
    .single-post > h2,
    .single-post > h3,
    .single-post > p,
    .single-post > ol,
    .single-post > ul,
    .single-post .content,
    .single-post > .shortcode-small {
        padding: 0 90px;
    }
    .single-post > figure,
    .single-post > table {
        padding: 0;
    }
}

.single-post > p,
.single-post > ol,
.single-post > ul,
.single-post > figure {
    font-family: Georgia,serif;
}

/* .post .table-container {
    overflow-x: auto;
}

@media (min-width: 1024px) {
    .post .table-container {
        overflow-x: visible;
    }
}

.post table {
    width: 100%;
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0;
    position: relative;
    border-collapse: collapse;
    white-space: nowrap;
}

.post table th {
    background: #ededed;
    border-bottom: 1px solid #c9c9c9;
}

@media (min-width: 1024px) {
    .post table th {
        position: sticky;
        top: 70px;
    }
}

.post table th,
.post table td {
    text-align: left;
}

.post table th,
.post table td {
    padding: 10px;
}

.post table th {
    background-color: rgb(242, 244, 247);
}

.post th {
    font-weight: var(--font-weight-bold);
} */

.post p > a,
.post figure > figcaption > a {
    color: #000;
    text-decoration: none;
    color: var(--brand-color);
    text-decoration: underline;
}

.post p > a:hover,
.post figure > figcaption > a {
    border-bottom-color: #d1d1d1;
}

.post p > a:active,
.post figure > figcaption > a {
    border-bottom-color: #d1d1d1;
}

.posts .post {
    display: flex;
    cursor: pointer;
    height: 300px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
    text-decoration: none;
    margin-bottom: 20px;
}

.posts .post:hover {
    opacity: 0.9;
}

.posts .post:active {
    opacity: 0.8;
}

.posts .post .contents {
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
    justify-content: center;
}

@media (min-width: 1024px) {
    .posts .post .image {
        display: block;
    }
}

.post .contents {
    flex: 1;
}

.posts .post a {
    text-decoration: none;
    color: #000;
}

.posts .post h2 {
    margin: 0;
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-align: center;
    line-height: 1.3;
    padding: 0 30px;
}

.posts .post p {
    color: #fff;
    font-size: 20px;
    line-height: 1.7;
    margin: 15px 0 0 0;
    font-weight: var(--font-weight-medium);
    max-width: 80%;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.post {
    /* padding-left: 20px;
    padding-right: 20px; */
}

.post figure img {
    width: 100%;
    height: auto;
    /* border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); */
}

.post figure {
    margin: 30px 0;
}

.post figure.single-post-featured-image {
    margin: 0 auto;
}

.post figure figcaption {
    text-align: center;
    line-height: 1.5;
    color: #777;
    font-size: 15px;
    margin-top: 15px;
}

.post figure .twitter-tweet {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.post p, .post ol, .post ul {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #292929;
}

/* .post p a {
    color: #000;
    border-bottom: 2px solid #e3e3e3;
    text-decoration: none;
    padding-bottom: 2px;
}

.post p a:hover {
    border-bottom-color: #d1d1d1;
}

.post p a:active {
    opacity: 0.5;
} */

.shortcode {
    padding: 40px 0;
    /* background: #f9f9f9; */
    /* border-radius: 4px; */
    /* box-shadow: var(--shadow); */
}

.post p,
.post ol,
.post ul,
.post h1,
.post h2,
.post h3,
.post figure,
.post blockquote,
.post .content,
.twitter-tweet,
.shortcode-small,
.shortcode-normal {
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
}

.block .text blockquote {
    line-height: 1.6;
}

.post blockquote {
    font-size: 24px;
    line-height: 1.4;
    border-left: 3px solid #ddd;
    padding-left: 20px;
}

.post blockquote .user {
    padding: 0;
    margin-top: 15px;
}

.shortcode-smaller {
    margin-left: auto;
    margin-right: auto;
    max-width: 830px;
}

.post h1 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
}

.post h2 {
    line-height: 1.3;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 800;
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
}

.post h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: var(--font-weight-bold);
}

.subscribe {
    max-width: 650px;
    margin: 0 auto;
    display: block;
    background: linear-gradient(135deg, #f0f9f7 0%, #e8f5f3 50%, #f0f9f7 100%);
    background-size: 200% 200%;
    animation: subtleGradient 15s ease infinite;
    padding: 20px 15px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.subscribe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(0, 191, 165, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.subscribe > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .subscribe {
        border-radius: 12px;
        padding: 24px;
    }
}

.subscribe p {
    font-size: 16px; 
    line-height: 1.4;
    margin: 0 0 10px 0;
    text-align: center;
}

.subscribe .rauno {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.subscribe .rauno .postauthor-contents {
    flex-direction: row;
}

.subscribe .rauno img {
    width: 30px;
}

.subscribe .rauno span {
    margin-left: 5px;
}

.subscribe .list .item {
    margin-left: 0;
    margin-right: 0;
}

.subscribe .inputs {
    display: flex;
}

@media (min-width: 1024px) {
    .subscribe .inputs {
/*        width: 50%;*/
    }
}

.subscribe .mc-field-group {
    margin-right: 10px;
    flex: 1;
}

@media (min-width: 1024px) {
    .subscribe .mc-field-group {
        flex: none;
    }
}

.subscribe .title {
    font-weight: var(--font-weight-medium);
}

@media (min-width: 1024px) {
    .subscribe .title {
        margin-right: 10px;
    }
}

.subscribe .field {
    font-size: 16px;
    outline: none;
    padding: 10px;
    border-radius: 4px;
    flex: 1;
    border: 2px solid #0f1115;
    margin-right: 10px;
    width: 100%;
}

.subscribe .button {
    outline: none;
    border: 2px solid #0f1115;
    border-radius: 4px;
    line-height: 1;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    color: #333;
    text-decoration: none;
}

.subscribe .button:hover {
    background: #0f1115;
    color: #fff;
}

.subscribe .button:active {
    opacity: 0.5;
}

.author {
    max-width: 710px;
    margin: 30px auto;
    display: flex;
    align-items: center;
}

.author img {
    display: block;
    width: 100px;
    margin-right: 20px;
}

.author p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.author p a {
    color: #000;
    border-bottom: 2px solid #ddd;
    text-decoration: none;
    padding-bottom: 2px;
}

.author p a:hover {
    border-bottom-color: #aaa;
}

.author p a:active {
    opacity: 0.5;
}

.intro {
    background: #fff;
    border-bottom: 1px solid rgb(228, 231, 240);
    padding: 20px 0 25px 0;
}

.intro-early {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    color: #777;
    margin-top: 10px;
}

@media (min-width: 1024px) {
    .intro {
        padding: 40px 0;
    }

    .intro .intro-container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.intro .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.intro h1 {
    margin: 0 0 0 0;
    color: #333;
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;
}

@media (min-width: 1024px) {
    .intro h1 {
        margin: 0 0 0 0;
        color: #333;
        /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
        font-size: 40px;
        font-weight: 600;
        line-height: 1.2;
        max-width: 700px;
        padding: 0;
    }
}

.intro p {
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    margin: 15px 0 0 0;
    color: #333;
    font-size: 24px;
    line-height: 1.6;
    max-width: 800px;
}

@media (min-width: 1024px) {
    .intro p {
        padding: 0;
    }
}

.intro h1 span b {
    background: var(--green);
    color: #fff;
    padding: 0 5px;
    font-weight: var(--font-weight-medium);
}

.intro .action {
    background: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    padding: 20px;
    margin-top: 25px;
    display: block;
    border: 2px solid var(--brand-color);
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 321px) {
    .intro .action {
        font-size: 20px;
        padding: 20px;
    }
}

.intro .action:hover {
    background: #fff;
    color: var(--brand-color);
}

.intro .action:active {
    opacity: 0.5;
}

.intro .action.border {
    background: #e8e8e8;
    color: #333;
    border-color: #e8e8e8;
}

.intro .action.border:hover {
    opacity: 0.8;
}

.intro img {
    display: none;
}

@media (min-width: 1024px) {
    .intro img {
        width: 400px;
        display: block;
    }
}

.letter-top {
    margin: 40px 0;
}

.letter-top a {
    color: #000;
    text-decoration: none;
}

.letter-top a:hover h1 {
    text-decoration: underline;
}

.letter-top h1 {
    text-align: center;
    font-size: 28px;
    margin: 0;
    font-weight: bold;
}

.letter-top p {
    font-size: 18px;
    color: #777;
    text-align: center;
    margin: 30px 0 35px 0;
    line-height: 1.6;
}

.letter {
    max-width: 590px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
}

.letter h1 {
    font-size: 24px;
    margin: 0 0 15px 0;
    font-weight: bold;
}

a.letter h2 {
    font-size: 18px;
}

.letter h3 {
    font-size: 16px;
    margin: 0 0 15px 0;
    font-weight: bold;
}

.letter img {
    width: 100%;
    display: block;
    margin: 0;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.letter .inside {
    padding: 20px 24px;
}

.letter .inside p {
    font-size: 14px;
    line-height: 1.6;
}

.letter .inside p:first-child {
    margin-top: 0;
}

.letter .inside p:last-child {
    margin-bottom: 0;
}

a.letter {
    display: block;
    text-decoration: none;
}

.letter .inside h2 {
    color: #000;
    margin: 0;
}

.letter p a {
    text-decoration: none;
    color: var(--link-color);
}

.letter p a:hover {
    text-decoration: underline;
}

.letter-sidebar .image {
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.letter-sidebar img {
    display: block;
    margin: 0;
    width: 100%;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.letter-sidebar .title {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 15px;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center;
    border-bottom: 1px solid rgb(228, 231, 240);
}

.letter-sidebar-subscribe p {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.letter-sidebar-subscribe {
    padding: 20px;
}

.premium-info {
    border-radius: var(--radius);
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
    padding: 10px;
    margin-bottom: 20px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    line-height: 1.4;
}

.premium-info svg {
    display: block;
    margin-bottom: 10px;
    width: 24px;
}

.premium-info:hover {
    opacity: 0.8;
}

@media (min-width: 1024px) {
    .premium-info {
        flex-direction: row;
    }

    .premium-info svg {
        margin-bottom: 0;
        margin-right: 5px;
    }
}

.menu .item {
    display: block;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #e3e3e3;
    padding: 20px;
    font-size: 14px;
}

.menu .item:hover {
    background: #f9f9fa;
}

.menu .item:active,
.menu .item.active {
    background: #f0f9fd;
}

.table .table-heading th {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 0;
}

.table {
    width: 100%;
    border-spacing: 0;
    font-size: 15px;
    background: #fff;
}

.table .seller .name {
    font-size: 15px;
}

.table-startup {
    display: block;
}

.table-startup:hover {
    opacity: 0.8;
}

.table-startup:active {
    opacity: 0.5;
}

.table th {
    text-align: left;
    padding: 10px 7px;
    color: #24292e;
    border-bottom: var(--border);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    /* background-color: var(--bg); */
}

.table tr:not(:last-child) td {
    border-bottom: var(--border);
}

.table td {
    text-align: left;
    padding: 10px 7px;
    vertical-align: middle;
    font-size: 14px;
}

.table td a,
.table th a {
    color: #000;
}

/* .post table a {
    text-decoration: none;
    color: var(--brand-color);
} */

@media all and (min-width: 1100px) {
    .os-contents {
        width: 700px;
    }
}

.dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    z-index: 10;
}

.dropdown.left {
    right: auto;
    left: 0;
    top: 60px;
}

.dropdown .link {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 12px 14px;
    border-bottom: 1px solid #e8e8e8;
}

.dropdown .link:last-child {
    border-bottom: none;
}

.dropdown .link:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.dropdown .link:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.dropdown a.link {
    color: #333;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.dropdown .link:hover {
    background: #f9f9f9;
}

.dropdown .link:active {
    background: #f0f9fd;
}

.dropdown-link-logo {
    display: block;
    width: 20px;
    margin-right: 5px;
}

.admin-menu {
    cursor: pointer;
    border-radius: var(--radius);
    padding: 5px 7px;
    margin-left: 5px;
    position: relative;
}

.admin-menu.active {
    background: var(--hover-bg-color);
}

.admin-menu:hover {
    background: #fff;
    box-shadow: var(--shadow);
}

.admin-menu:active {
    opacity: 0.5;
}

.admin-menu .dropdown {
    top: 36px;
    width: 200px;
}

.post__book {
    max-width: 710px;
    margin: 0 auto;
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    font-size: 18px;
    line-height: 1.8;
}

@media all and (min-width: 1100px) {
  .post__book {
    display: -webkit-box;
    display: flex;
  }
}

.post__book__cover {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  margin-top: 20px;
}

@media all and (min-width: 1100px) {
  .post__book__cover {
    margin-left: 20px;
    margin-top: 0;
  }
}

.post__book__image {
  display: block;
  width: 100px;
  height: auto;
}

@media all and (min-width: 1100px) {
  .post__book__fields {
    display: -webkit-box;
    display: flex;
  }
}

.post__book__field {
  font-size: 16px;
  outline: none;
  padding: 13px 10px;
  border-radius: 4px;
  -webkit-box-flex: 1;
          flex: 1;
  border: 2px solid #0f1115;
  margin-bottom: 10px;
  margin-right: 10px;
  width: 100%;
}

@media all and (min-width: 1100px) {
  .post__book__field {
    width: 200px;
    margin-bottom: 0;
  }
}

.post__book__field:focus {
  background-color: #f3f3f3;
}

.post__book__button {
  outline: none;
  border: 2px solid #0f1115;
  border-radius: 4px;
  line-height: 1.5;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

@media all and (min-width: 1100px) {
  .post__book__button {
    width: auto;
  }
}

.post__book__button:hover {
  background: #0f1115;
  color: #fff;
}

.post__book__button:active {
  opacity: 0.5;
}

@media all and (min-width: 1100px) {
  .post__book__button {
    line-height: 1;
  }
}

.post__book .tags {
    display: flex;
    flex-flow: wrap;
    margin: -3px;
}

.post__book .tag {
    background: #f2f3f4;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    padding: 6px;
    color: #494949;
    margin: 3px;
}

.post__book .tag:hover {
    background-color: #e8e8e8;
}

.post__book__examples {
    margin-top: 15px;
    font-size: 15px;
}

.post__book__text {
    width: 100%;
}

.twitter-tweet {
    margin: 30px auto !important;
}

.jobmailer {
    border-radius: var(--radius);
    background-color: #fff;
    width: 100%;
    border: var(--border);
    box-shadow: var(--shadow);
}

@media all and (min-width: 1100px) {
    .jobmailer {
        display: flex;
        justify-content: center;
    }
}

.jobmailer-title {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
}

@media all and (min-width: 1100px) {
    .jobmailer-title {
        margin-right: 15px;
        margin-bottom: 0;
        text-align: left;
    }
}

.jobmailer-content {
  color: #28313c;
  padding: 15px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}

@media all and (min-width: 1100px) {
    .jobmailer-content {
        flex-direction: row;
    }
}

.jobmailer-fields {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media all and (min-width: 1100px) {
    .jobmailer-fields {
        width: auto;
        flex-direction: row;
    }
}

.jobmailer-field {
    font-size: 16px;
    outline: none;
    padding: 10px;
    border-radius: 4px;
    flex: 1;
    border: 2px solid #0f1115;
    margin-right: 10px;
    width: 100%;
}

@media all and (min-width: 1100px) {
    .jobmailer-field {
        width: 200px;
        margin-bottom: 0;
    }
}

.jobmailer-field:focus {
    background-color: #f3f3f3;
}

.jobmailer-button {
    outline: none;
    border: 2px solid #0f1115;
    border-radius: 4px;
    line-height: 1;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    color: #333;
    text-decoration: none;
}

.jobmailer-button:hover {
    background: #0f1115;
    color: #fff;
}

.jobmailer-button:active {
    opacity: 0.5;
}

.about-title {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.about-intro {
    text-align: center;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.6;
    max-width: 500px;
    color: #777;
    margin: 0 auto 60px auto;
}

.faq {
    max-width: 660px;
    margin: 0 auto 80px auto;
}

.faq h3 {
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin: 0;
    line-height: 1.6;
}

.faq p {
    font-size: 18px;
    color: #000;
    line-height: 1.8;
}

.faq p a {
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 600;
}

.faq p a:hover {
    text-decoration: underline;
}

.faq-item {
    margin-bottom: 40px;
}

.faq-logos {
    margin-top: 100px;
    margin-bottom: 20px;
}

.joinmodal {
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px 0px; */
    /* position: fixed; */
    /* left: 0; */
    /* top: 0; */
    /* bottom: 0; */
    background: #fff;
    /* padding: 100px 10px 10px 10px; */
    /* overflow-y: auto; */
    width: 100%;
    /* -webkit-overflow-scrolling: touch; */
    margin: 60px auto;
    padding: 0 20px;
}

.joinmodal-loading {
    opacity: 0.3;
}

.joinmodal p.joinmodal-info {
    font-size: 14px;
    margin: 0 0 15px 0;
    color: #555;
    line-height: 1.4;
    text-align: center;
}

.joinmodal p.joinmodal-info a {
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid #e3e3e3;
}

.joinmodal.joinmodal--inline {
    padding: 30px 10px;
    border-radius: 0;
    position: relative;
    box-shadow: none;
    left: auto;
    max-width: 400px;
    margin: 0;
    display: flex;
    justify-content: center;
}

.joinmodal .joinmodal-left {
    margin-bottom: 30px;
}

.joinmodal.joinmodal--inline {
    padding: 30px 20px 20px 20px;
    border-radius: 4px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
    margin-top: 0;
    background: #f9f9f9;
}

@media (min-width: 1024px) {
    .joinmodal {
        padding: 0;
        width: 700px;
        /* background-color: #f3fbfa; */
        /* max-width: 900px; */
        /* width: 470px; */
        /* width: 940px; */
        /* left: 50%; */
        /* margin-left: -235px; */
        /* margin-left: -470px; */
        display: flex;
        justify-content: space-between;
        /* padding: 100px 30px 30px 30px; */
    }

    /* .joinmodal.joinmodal--inline {
        padding: 30px 20px 20px 20px;
        border-radius: 4px;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
        margin-top: 0;
        background: #f9f9f9;
    } */

    .joinmodal .joinmodal-left {
        width: 55%;
    }

    .joinmodal .joinmodal-right {
        width: 40%;
    }
}

hr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.joinmodal .joinmodal-field {
    border: 1px solid #d5d5d5;
    width: 100%;
    border-radius: 4px;
    outline: none;
    padding: 19px 13px;
    font-weight: var(--font-weight-light);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
}

.joinmodal-right {
    width: 100%;
}

.joinmodal .joinmodal-field.invalid {
    border-color: var(--red);
}

@media (min-width: 1024px) {
    .joinmodal-sticky {
        position: sticky;
        top: 100px;
    }
}

.joinmodal .joinmodal-button {
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: var(--brand-color);
    width: 100%;
    padding: 20px 10px;
    color: var(--black);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    border: 2px solid var(--brand-color);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
    font-size: 18px;
    line-height: 1.4;
    max-width: 340px;
    margin: 0 auto;
}

.joinmodal .joinmodal-button span {
    display: block;
    font-size: 14px;
    margin-top: 5px;
    color: var(--black);
}

.joinmodal .joinmodal-button:hover span {
    color: var(--black);
}

.joinmodal-subtitle {
    font-size: 20px;
    text-align: center;
    line-height: 1.4;
}

.joinmodal .joinmodal-button:hover {
    background-color: var(--brand-color);
    color: var(--black);
    border-color: var(--black);
}

.joinmodal .joinmodal-button:active {
    background-color: var(--brand-color);
    opacity: 0.5;
    color: var(--black);
}

.joinmodal .joinmodal-twitter {
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 20px 10px;
    color: #00acee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    border: 2px solid #00acee;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1;
}

.joinmodal .joinmodal-twitter:hover {
    background-color: #00acee;
    color: #fff;
}

.joinmodal .joinmodal-twitter:active {
    background-color: #00acee;
    color: #fff;
    opacity: 0.5;
}

.joinmodal-logos {
    display: flex;
    justify-content: center;
    padding-left: 10px;
    margin-bottom: 30px;
    margin-top: 25px;
}

@media (min-width: 1024px) {
    .joinmodal-logos-left {
        justify-content: flex-start;
    }
}

.joinmodal-logo {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -15px;
}

a.joinmodal-logo:hover {
    margin-top: -2px;
}

a.joinmodal-logo:active {
    margin-top: 0;
}

.joinmodal-title {
    /* font-family: 'Raleway', sans-serif; */
    font-weight: bold;
    margin-bottom: 18px;
    text-align: center;
    line-height: 1.5;
    font-size: 20px;
    color: #1c1c1c;
}

.joinmodal h2 {
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.joinmodal p {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    text-align: center;
}

@media (min-width: 1024px) {
    .joinmodal h2, .joinmodal p {
        text-align: left;
    }
    .joinmodal-title {
        font-size: 24px;
    }
}

.joinmodal p:first-child {
    margin-top: 0;
}

.joinmodal-joined {
    border-radius: 4px;
    border: 2px solid var(--brand-color);
    padding: 10px;
    margin-top: 15px;
    color: var(--brand-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.joinmodal-book {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.joinmodal-book h3 {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.joinmodal-book p {
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    color: #777;
}

.footer {
    background: #fff;
    border-top: 1px solid #e3e3e3;
    padding: 30px 0;
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .footer .container {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: flex-start;
    }
}

.footer ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.footer ul li a {
    color: #6f6f6f;
    text-decoration: none;
    font-size: 13px;
    line-height: 2;
}

.footer ul li a:hover {
    color: var(--brand-color);
    text-decoration: none;
}

.footer ul li a:active {
    color: #000;
}

.headerbg {
    /* margin-top: -90px; */
    padding: 10px 0 30px 0;
    border-bottom: var(--border);
    background: linear-gradient(135deg, var(--gray-light) 0%, #f0f9f7 35%, #e8f7f4 50%, #f0f9f7 65%, var(--gray-light) 100%);
    background-size: 200% 200%;
    animation: subtleGradient 20s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.headerbg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 120% 120% at 20% 50%, rgba(0, 191, 165, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse 100% 100% at 80% 80%, rgba(0, 230, 200, 0.05) 0%, transparent 45%);
    animation: float 25s ease-in-out infinite;
    pointer-events: none;
}

@keyframes subtleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    33% { transform: translate(15px, -10px) scale(1.02); opacity: 0.85; }
    66% { transform: translate(-10px, 10px) scale(0.98); opacity: 0.9; }
}

.headerbg .joinmodal-button {
    width: 300px;
    text-align: left;
    padding: 15px 25px;
}

.headerbg .joinmodal-button span {
    text-align: left;
}

@media (min-width: 1024px) {
    .headerbg {
        display: block;
        width: 100%;
        /* min-height: 280px; */
        /* padding: 50px 0; */
        /* margin-top: -71px; */
/*        background-color: #f3fbfa;*/
        /* border-bottom: var(--border); */
        /* background-image: url(https://images.unsplash.com/photo-1578280705875-9ed34f079e50?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2095&q=80); */
        /* background-image: url(/images/freedom2.jpg); */
        display: flex;
        /* background-image: url(/images/logos.png);
        background-size: 300px;
        background-repeat: no-repeat;
        background-position: right; */
        position: relative;
        height: 300px;
        overflow: hidden;
        padding: 20px 0;
    }
}

.headerbg-human {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    position: relative;
    flex: none;
}

.headerbg-mrr {
    background: var(--brand-orange);
    box-shadow: var(--shadow);
    line-height: 1;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    padding: 6px 10px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.headerbg-image {
    display: block;
    width: 300px;
}

.headerbg .headerbg-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 30px 0;
    grid-gap: 20px;
    overflow-x: hidden;
    height: 70px;
}

@media (min-width: 1024px) {
    .headerbg .headerbg-logos {
        overflow-x: initial;
        height: auto;
    }
}

.headerbg-logos-logo {
    display: block;
    width: 40px;
    border-radius: 4px;
    margin: 10px;
}

.headerbg-logos-photo {
    display: block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin: 10px;
    flex-shrink: 0;
    text-indent: -9999px;
}


.headerbg-logos-logo {
    display: block;
    width: 24px;
    border-radius: 4px;
    margin: 0;
    position: absolute;
    top: -5px;
    right: -5px;
    box-shadow: var(--shadow);
}

.headerbg .headerbg-container img {
    max-width: 100%;
}

/* Hero uses same horizontal gutter as header and .container */
.headerbg .headerbg-container {
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
    box-sizing: border-box;
}

/* Desktop: hero inner uses .container for alignment with header logo */
@media (min-width: 1024px) {
    .headerbg .headerbg-container.container {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
        position: relative;
        z-index: 1;
    }

    .headerbg .headerbg-logos {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 30px;
        /* position: absolute; */
        /* top: -20px; */
        /* right: 0; */
        margin: 0;
    }

    .headerbg .headerbg-logos .headerbg-logos-photo {
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 9px;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
        text-align: center;
        text-indent: 0;
    }
}

.headerbg .headerbg-container p a {
    text-decoration: none;
    color: #333;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.headerbg .headerbg-container p a:hover {
    opacity: 0.8;
}

.headerbg .headerbg-container p a:active {
    opacity: 0.5;
}

.headerbg h1 {
/*    font-family: 'Raleway', sans-serif;*/
    margin: 0 0 0 0;
    color: var(--color-text);
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    font-size: 28px;
    font-weight: bold;
    line-height: 1.15;
    position: relative;
    z-index: 1;
}

.headerbg h1 strong,
.headerbg h1 .highlight {
    color: var(--color-text);
    background: linear-gradient(180deg, transparent 60%, rgba(52, 226, 223, 0.25) 60%);
    padding: 0.05em 0.12em;
    border-radius: 2px;
}

.headerbg-text {
    padding: 0;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .headerbg h1 {
        margin: 0 0 0 0;
        color: var(--color-text);
        /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
        font-size: 42px;
        line-height: 1.15;
        max-width: 800px;
        padding: 0;
    }
    
    .headerbg h1 strong,
    .headerbg h1 .highlight {
        color: var(--color-text);
        background: linear-gradient(180deg, transparent 60%, rgba(52, 226, 223, 0.25) 60%);
        padding: 0.05em 0.12em;
        border-radius: 2px;
    }

    .headerbg-text {
        padding: 0;
        max-width: 600px;
    }
    
    .headerbg p {
        max-width: 600px;
    }
}

.headerbg p {
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    margin: 15px 0 0 0;
    color: #333;
    font-size: 20px;
    line-height: 1.7;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .headerbg p {
        padding: 0;
        font-size: 18px;
    }
}

.headerbg .dimmer {
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    width: 100%;
}

.headerbg .action {
    background: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1;
    padding: 15px 15px;
    margin-top: 25px;
    display: block;
    border: 1px solid var(--brand-color);
    margin-right: 10px;
    font-size: 14px;
}

@media (min-width: 321px) {
    .headerbg .action {
        font-size: 16px;
        padding: 15px 20px;
    }
}

.headerbg .action:hover {
    background: #fff;
    color: var(--brand-color);
}

.headerbg .action:active {
    opacity: 0.5;
}

.headerbg .action.border {
    background: #e8e8e8;
    color: #333;
    border-color: #e8e8e8;
}

.headerbg .action.border:hover {
    opacity: 0.8;
}

.headerbg-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 25px;
    margin-bottom: 5px;
}

.headerbg-photos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 35px;
    margin-top: 2px;
}

.headerbg-photos img {
    display: block;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -20px;
}

.headerbg-button {
    display: inline-block;
    background-color: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    border: 2px solid var(--brand-color);
    box-shadow: var(--shadow);
}

.headerbg-button:hover {
    opacity: 0.9;
}

.headerbg-button:active {
    opacity: 0.8;
}

@media (min-width: 1024px) {
    .headerbg-button {
        margin-left: 0;
    }
}

.user {
    display: block;
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
}

a.user:hover {
    opacity: 0.8;
}

a.user:active {
    opacity: 0.5;
}

.user .photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    flex: none;
    position: relative;
}

.user .photo .team {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -2px;
    right: -4px;
    box-shadow: var(--shadow);
}

.user .photo.placeholder {
    border: 1px solid #ddd;
}

.user .name {
    font-weight: var(--font-weight-normal);
    font-size: 14px;
    text-decoration: none;
}

.user .name span {
    color: #999;
}

.user .content .name {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .user .content .name {
        display: block;
    }
}

.bookheader {
    background: #fff;
}

@media (min-width: 1024px) {
    .bookheader {
        display: block;
        width: 100%;
        /* min-height: 280px; */
        /* padding: 50px 0; */
        /* margin-top: -71px; */
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px;
        /* background-image: url(https://images.unsplash.com/photo-1578280705875-9ed34f079e50?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2095&q=80); */
        /* background-image: url(/images/freedom2.jpg); */
        display: flex;
        /* background-image: url(/images/logos.png);
        background-size: 300px;
        background-repeat: no-repeat;
        background-position: right; */
        position: relative;
        height: 290px;
        overflow: hidden;
    }
}

.bookheader-image {
    display: block;
    width: 300px;
}

.bookheader .bookheader-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 20px 0 10px 0;
}

.bookheader .bookheader-logos .bookheader-logos-logo {
    display: block;
    width: 40px;
    border-radius: 4px;
    margin: 10px;
}

.bookheader .bookheader-logos .bookheader-logos-photo {
    display: block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin: 10px;
    flex-shrink: 0;
    text-indent: -9999px;
}

@media (min-width: 1024px) {
    .bookheader .bookheader-container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .bookheader .bookheader-logos {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 30px;
        position: absolute;
        top: -20px;
        right: -20px;
        margin: 0;
    }

    .bookheader .bookheader-logos .bookheader-logos-logo {
        display: block;
        width: 60px;
        border-radius: 4px;
        margin: 0;
    }

    .bookheader .bookheader-logos .bookheader-logos-photo {
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 9px;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
        text-align: center;
        text-indent: 0;
    }
}

.bookheader .bookheader-container p a {
    text-decoration: none;
    color: #333;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.bookheader .bookheader-container p a:hover {
    opacity: 0.8;
}

.bookheader .bookheader-container p a:active {
    opacity: 0.5;
}

.bookheader h1 {
    margin: 0 0 0 0;
    color: #333;
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.bookheader-text {
    padding: 0 20px;
}

@media (min-width: 1024px) {
    .bookheader h1 {
        margin: 0 0 0 0;
        color: #333;
        /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
        font-size: 40px;
        font-weight: 600;
        line-height: 1.2;
        max-width: 700px;
        padding: 0;
    }

    .bookheader-text {
        padding: 0;
    }
}

.bookheader p {
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    margin: 15px 0 0 0;
    color: #333;
    font-size: 24px;
    line-height: 1.6;
    max-width: 800px;
}

@media (min-width: 1024px) {
    .bookheader p {
        padding: 0;
    }
}

.bookheader .dimmer {
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    width: 100%;
}

.bookheader .action {
    background: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    padding: 20px;
    margin-top: 25px;
    display: block;
    border: 1px solid var(--brand-color);
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 321px) {
    .bookheader .action {
        font-size: 20px;
        padding: 20px;
    }
}

.bookheader .action:hover {
    background: #fff;
    color: var(--brand-color);
}

.bookheader .action:active {
    opacity: 0.5;
}

.bookheader .action.border {
    background: #e8e8e8;
    color: #333;
    border-color: #e8e8e8;
}

.bookheader .action.border:hover {
    opacity: 0.8;
}

.book-section-container {
    padding: 60px 0 70px 0;
    margin: 60px 0;
}

.book-section-container-grey {
    background: #f9f9f9;
}

.book-section-heading-p {
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto 60px auto;
    color: #aaa;
}

.book-section-heading-h2 {
    max-width: 750px;
    margin: 0 auto 10px auto;
    font-size: 30px;
    text-align: center;
    line-height: 1.4;
    font-weight: 600;
}

.book-section img {
    max-width: 100%;
}

@media (min-width: 1024px) {
    .book-section {
        display: flex;
        justify-content: space-between;
    }
}

.book-section-col {
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .book-section-col {
        width: 48%;
    }
}

.book-section-col p {
    font-size: 20px;
    line-height: 1.4;
}

.book-section-col p:first-child {
    margin-top: 0;
}

.bookfooter {
    background-color: #f9f9f9;
    padding: 50px 0;
    margin-top: 40px;
    margin-bottom: 60px;
}

.bookfooter .intro-early {
    text-align: center;
}

@media (min-width: 1024px) {
    .bookfooter {
        display: block;
        width: 100%;
        /* min-height: 280px; */
        /* padding: 50px 0; */
        /* margin-top: -71px; */
        /* box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px; */
        /* background-image: url(https://images.unsplash.com/photo-1578280705875-9ed34f079e50?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2095&q=80); */
        /* background-image: url(/images/freedom2.jpg); */
        /* display: flex; */
        /* background-image: url(/images/logos.png);
        background-size: 300px;
        background-repeat: no-repeat;
        background-position: right; */
        position: relative;
        /* height: 290px; */
        /* overflow: hidden; */
    }
}

.bookfooter .bookfooter-container p a {
    text-decoration: none;
    color: #333;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.bookfooter .bookfooter-container p a:hover {
    opacity: 0.8;
}

.bookfooter .bookfooter-container p a:active {
    opacity: 0.5;
}

.bookfooter h1 {
    margin: 0 0 0 0;
    color: #333;
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.bookfooter-text {
    padding: 0 20px;
}

@media (min-width: 1024px) {
    .bookfooter h1 {
        margin: 0 0 0 0;
        color: #333;
        /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
        font-size: 40px;
        font-weight: 600;
        line-height: 1.2;
        /* max-width: 700px; */
        padding: 0;
        text-align: center;
    }

    .bookfooter-text {
        padding: 0;
    }
}

.bookfooter p {
    /* text-shadow: 2px 2px 1px rgba(0,0,0,0.25); */
    margin: 15px 0 0 0;
    color: #333;
    font-size: 24px;
    line-height: 1.6;
    text-align: center;
}

@media (min-width: 1024px) {
    .bookfooter p {
        padding: 0;
    }
}

.bookfooter .action {
    background: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    padding: 20px;
    margin-top: 25px;
    display: block;
    border: 2px solid var(--brand-color);
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 321px) {
    .bookfooter .action {
        font-size: 20px;
        padding: 20px;
    }
}

.bookfooter .action:hover {
    background: #fff;
    color: var(--brand-color);
}

.bookfooter .action:active {
    opacity: 0.5;
}

.bookfooter .action.border {
    background: #e8e8e8;
    color: #333;
    border-color: #e8e8e8;
}

.bookfooter .action.border:hover {
    opacity: 0.8;
}

.book-h2 {
    font-size: 34px;
    max-width: 950px;
    margin: 0 auto 100px auto;
    text-align: center;
    line-height: 1.4;
    font-weight: 800;
    font-family: 'Raleway', sans-serif;
}

.vermenu.transparent a {
    border-bottom: 1px solid #e3e3e3;
}

.vermenu.transparent a:first-child {
    border-top: 1px solid #e3e3e3;
}

.vermenu.transparent a:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.vermenu.transparent a:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.vermenu.vermenu--user {
    box-shadow: var(--shadow);
    border: var(--border);
    border-radius: var(--radius);
}

.vermenu-logo {
    width: 30px;
    margin-right: 5px;
}

.vermenu .link {
    text-decoration: none;
    color: #1c1c1c;
    display: block;
    font-size: 14px;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.vermenu a:hover {
    background-color: #f9f9f9;
}

.vermenu a:active,
.vermenu a.active {
    background-color: #f0f9fd;
}

.vermenu-links {
    padding: 0;
}

.vermenu-link {
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 8px;
}

.vermenu-link iconify-icon {
    flex-shrink: 0;
}

.vermenu-link-active {
    background-color: transparent;
    font-weight: var(--font-weight-bold);
    border-left: 3px solid var(--teal-primary);
    padding-left: calc(15px - 3px);
}

.vermenu-link:hover {
    background-color: rgba(55, 53, 47, 0.08);
}

.vermenu-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--text-color);
}

.vermenu-icon a svg {
    width: 20px;
}

.vermenu-text {
    font-size: 14px;
    line-height: 1.5;
}

.vermenu-user {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(55, 53, 47, 0.08);
    padding: 15px 15px;
    text-decoration: none;
    color: var(--text-color);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.vermenu-user:hover {
    background-color: rgba(55, 53, 47, 0.04);
}

.vermenu-user-photo {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-right: 10px;
    border: var(--border);
}

.vermenu-user-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-color);
}

.vermenu-user-tagline {
    font-size: 12px;
    line-height: 16px;
    color: var(--light-text-color);
}

.profile-user {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    background: #fff;
}

.guide .single-post > h1,
.guide .single-post > h2,
.guide .single-post > h3,
.guide .single-post > p,
.guide .single-post > .shortcode-small {
    padding: 0;
}

.guide h1 {
    margin-top: 0;
}

.guide .post {
    max-width: 700px;
}

.guides-guide {
    display: flex;
    align-items: center;
    padding: 12px 0;
    color: #333;
    text-decoration: none;
}

.guides-guide:not(:last-child) {
    border-bottom: var(--border);
}

a.guides-guide:hover {
    background: #f9f9f9;
}

.guides-guide-icon {
    width: 26px;
    margin-left: 10px;
    margin-right: 10px;
}

.guides-guide-photo {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-position: center;
    border-radius: 4px;
    margin-left: 10px;
    margin-right: 10px;
}

.guides-guide-user {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 10px;
}

.guides-guide-name {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.guides-guide-name-mrr {
    color: var(--green);
    font-size: 14px;
    margin-left: 5px;
}

.guides-guide-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: #777;
}

.dashboard-h2 {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 14px;
    color: var(--text-color);
    font-weight: var(--font-weight-bold);
}

.dashboard-info {
    font-size: 14px;
    color: var(--light-text-color);
    line-height: 1.5;
}

.papers {
    display: flex;
    justify-content: space-between;
}

.papers-paper {
    background: #f9f9f9;
    border-radius: 4px;
    padding: 20px;
    box-shadow: var(--shadow);
    text-align: center;
    width: 23%;
    color: #333;
    text-decoration: none;
    display: block;
    border: 1px solid #ddd;
}

.papers-paper:hover {
    background: #f4f4f4;
}

.papers-paper-icon {
    width: 30px;
}

.papers-paper-title {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}

.papers-paper-text {
    font-size: 14px;
    line-height: 1.4;
}

.osbar {
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    padding: 10px;
    background: #fff;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
}

.osbar:hover {
    background: #EFEFEF;
}

.osbar-image {
    display: block;
    width: 100px;
    margin-right: 10px;
}

.box {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.box-info {
    font-size: 14px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.box-number {
    font-size: 20px;
}


.box-logos {
    display: flex;
    margin-left: 10px;
    margin-right: 3px;
}

.box-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    background-size: contain;
}

.by {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
}

.by:hover {
    text-decoration: none;
    opacity: 0.9;
}

.by:active {
    opacity: 0.5;
}

.by-photo {
    display: block;
    width: 40px;
    border-radius: 50%;
    margin-right: 8px;
}

.by-name {
    color: #777;
    font-size: 14px;
    margin-bottom: 3px;
}

.by-handle {
    color: var(--brand-color);
    font-size: 14px;
}

.comments {
    background-color: #fff;
    border: var(--border);
    border-radius: var(--radius);
    /* box-shadow: var(--shadow); */
    padding: 24px;
}

.comment-reply {
    display: flex;
    position: relative;
    align-items: flex-start;
}

.comment-reply.hidden {
    display: none;
}

.form .field.comment-reply-field {
    padding-left: 40px;
}

.comment-reply-photo {
    width: 29px;
    height: 29px;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 6px;
}

/* .comment-replies {
    padding-left: 15px;
    border-left: 2px solid #ebebeb;
} */

#discussion .comment-replies:not(:last-child) {
    margin-bottom: 30px;
}

.comment-replies-footer {
    margin-top: 10px;
}

.comment-replies-footer a {
    color: var(--link-color);
}

.comment .user {
    display: flex;
    align-items: flex-start;
    color: #000;
    text-decoration: none;
}

.comment .user .photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}

.comment .user .photo.placeholder {
    border: 1px solid #ddd;
}

.comment .user .name {
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-decoration: none;
}

.comment .content {
    flex: 1;
}

.comment .text {
    font-size: 1rem; /* 16px minimum */
    margin-top: 5px;
    line-height: 1.6;
    font-family: var(--font-family-body);
}

.comment .text img {
    display: inline-block;
    max-width: 100%;
    margin-top: 10px;
}

.comment .text a {
    color: var(--brand-color);
}

.comment:not(:last-child) {
    margin-bottom: 30px;
}

.comment-replies .comment {
    background: rgb(241, 241, 241);
    padding: 20px;
    border-radius: var(--radius);
}

.comment-replies .comment:not(:last-child) {
    margin-bottom: 20px;
}

.comments-empty {
    font-size: 16px;
    text-align: center;
    margin: 30px 0;
    line-height: 2;
}

.comment-join {
    position: relative;
}

.comment-join-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(249,249,249,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-join-button {
    cursor: pointer;
    display: block;
    background-color: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    padding: 12px 14px;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--brand-color);
    margin: 0;
    text-transform: uppercase;
}

.comment-join-button:hover {
    background: transparent;
    color: var(--brand-color);
}

.news {
    /* width: 100%; */
    /* display: flex; */
    /* justify-content: space-between; */
    /* overflow-x: auto; */
    /* overflow-y: hidden; */
    /* height: 74px; */
    /* align-items: flex-start; */
}

.news .more {
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 4px;
    padding: 10px 12px;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
}

.news p {
    font-size: 14px;
    line-height: 1.4;
}

/* @media (min-width: 1024px) {
    .news {
        overflow-x: visible;
    }
} */

.news .logo {
    display: block;
    width: 50px;
    margin-right: 8px;
}

.news .maker {
    display: flex;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}

a.news .maker:hover {
    opacity: 0.8;
}

a.news .maker:active {
    opacity: 0.5;
}

.news .maker .photo {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 5px;
}

.news .maker .photo.placeholder {
    border: 1px solid #ddd;
}


.news .tag {
    color: #162040;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    padding: 6px;
    margin-right: 8px;
    background: #F4F7FA;
/*    margin-bottom: 5px;*/
    display: flex;
    align-items: center;
    line-height: 1;
    border: 1px solid #162040;
}

.news .tag.green {
    background: var(--green-bg);
    color: var(--green-text);
    border: 1px solid var(--green-text);
}

.news-item {
    display: flex;
    background: #fff;
    border-radius: var(--radius);
    border: var(--border);
    text-decoration: none;
    color: #333;
    flex: none;
    width: 100%;
    margin-bottom: 15px;
}

/* @media (min-width: 1024px) {
    .news-item {
        width: 24%;
        margin-right: 0;
    }
} */

.news-item:hover {
    text-decoration: none;
    opacity: 0.8;
}

.news-item:active {
    opacity: 0.5;
}

.news-item-image {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.news-item-contents {
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    display: flex;
    align-items: center;
    flex: 1;
    line-height: 1.4;
}

.progress {
    background: #f5f5f5;
    border-radius: 4px;
    width: 100%;
}

.progress .filling {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: var(--brand-color);
    color: #fff;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.25),-1px 0 0 rgba(0,0,0,.1);
    white-space: nowrap;
}

.os-boxes {

}

@media (min-width: 1024px) {
    .os-boxes {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }
}

.os-box {
    background-color: #F4F4F6;
    border-radius: var(--radius);
    padding: 15px;
    flex: 1;
    margin-bottom: 10px;
}

@media (min-width: 1024px) {
    .os-box {
        margin-bottom: 0;
    }
}

.os-box-number {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 10px;
}

.os-box-number span {
    font-size: 14px;
    color: #3bb986;
    padding-left: 5px;
}

.os-box-info {
    color: #6f7680;
    font-size: 14px;
}

.preview {
    position: relative;
    z-index: 40;
    margin-top: -100px;
    padding-top: 100px;
    padding-bottom: 30px;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.7) 30%, rgba(245, 245, 245, 0.95) 60%, rgba(245, 245, 245, 1) 85%);
}

.preview-title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
}

.preview-info {
    text-align: center;
    font-size: 14px;
    max-width: 600px;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
    color: #777;
    font-weight: normal;
    margin-top: 20px;
}

.preview-action {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.preview-button {
    background: var(--brand-color);
    display: block;
    padding: 15px 40px;
    border-radius: var(--radius);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: 2px solid var(--brand-color);
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    line-height: 1;
}

.preview-button span {
    display: block;
    text-align: center;
    font-size: 12px;
    padding-top: 5px;
}

.preview-button:hover {
    color: var(--brand-color);
    background: transparent;
}

.preview-button:active {
    opacity: 0.5;
}

.features {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .features {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 50px;
    }
}

.features .feature {
    text-align: center;
    margin-bottom: 50px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .features .feature {
        width: 300px;
        margin-bottom: 0;
        max-width: 100%;
    }
}

.features .feature h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 10px 0;
}

.features .feature p {
    font-size: 15px;
    line-height: 1.5;
    color: #777;
    margin: 0;
}

.features .feature img {
    display: block;
    width: 200px;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
}

.os-intro {
    margin: 60px 0;
}

.os-intro-package {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.os-intro-package img {
    max-width: 100%;
}

@media (min-width: 1024px) {
    .os-intro {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 60px 0;
    }
}

.os-intro h1 {
    line-height: 1.3;
    font-weight: 600;
}

.os-intro p {
    font-size: 18px;
    color: #333;
    line-height: 1.5;
    max-width: 500px;
}

.milestones {
    border: var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.milestones-milestone:first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.milestones-milestone:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.milestones-milestone {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 15px;
}

.milestones-milestone:hover {
    background: #f9f9fa;
}

.milestones-milestone:not(:last-child) {
    border-bottom: var(--border);
}

.milestone-logo {
    display: block;
    width: 30px;
    margin-right: 10px;
}

.milestone-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.blogposts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.blogpost {
    width: 100%;
    margin-bottom: 20px;
}

.blogpost-cover {
    display: block;
    width: 100%;
    height: 160px;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
}

@media (min-width: 1024px) {
    .blogpost, blogpost-cover {
        width: 340px;
    }
}

.blogpost-title a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
    font-weight: 700;
}

.blogposts-continue {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blogposts-continue-title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}

.blogposts-continue-link {
    font-weight: 500;
    font-size: 14px;
    color: var(--link-color);
    text-decoration: none;
}

.blogposts-continue-link:hover {
    text-decoration: underline;
}

.progressbar {
    border-radius: 4px;
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.progressbar .progressbar-btn {
    display: block;
    background-color: var(--brand-color);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 14px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    border: 2px solid var(--brand-color);
    box-shadow: var(--shadow);
}

.progressbar .progressbar-btn.progressbar-btn--disabled {
    opacity: 0.2;
    pointer-events: none;
}

.progressbar .progressbar-btn:hover {
    background-color: transparent;
    color: var(--brand-color);
}

.progressbar .progressbar-btn:active {
    opacity: 0.5;
}

.boxes {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

@media (min-width: 1024px) {
    .boxes {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.box {
    background-color: #fff;
    border-radius: var(--radius);
    border: var(--border);
    padding: 30px 10px;
    flex: 1;
    text-align: center;
    box-shadow: var(--shadow);
}

.box-number {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}

.box-icon {
    display: block;
    height: 40px;
    margin: 0 auto 20px auto;
}

.box-no {
    font-weight: 600;
    font-size: 32px;
    margin-top: 20px;
    white-space: nowrap;
}

.box-no span {
    font-size: 16px;
    color: var(--green);
    padding-left: 5px;
    font-weight: 600;
}

.box-info {
    color: var(--green);
    font-size: 14px;
    font-weight: 600;
}

.box-title {
    color: #333;
    line-height: 1.4;
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}

.buttonlink {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    border-radius: var(--radius);
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 14px 14px;
    margin-bottom: 15px;
}

.buttonlink.desktop {
    display: none;
}

.buttonlink.mobile {
    display: flex;
}

@media (min-width: 1024px) {
    .buttonlink.desktop {
        display: flex;
    }

    .buttonlink.mobile {
        display: none;
    }
}

.buttonlink:hover {
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
}

.buttonlink:active {
    opacity: 0.8;
}

.buttonlink .logo {
    display: block;
    margin-right: 12px;
    filter: saturate(0%) brightness(75%) contrast(400%);
    opacity: 0.3;
    width: 34px;
}

.buttonlink .title {
    color: #000;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 8px;
}

.buttonlink .domain {
    color: #757575;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    line-height: 1;
}

.stripe-connect {
    display: inline-block;
    margin-bottom: 1px;

    background-image: -webkit-linear-gradient(#28A0E5, #015E94);
    background-image: -moz-linear-gradient(#28A0E5, #015E94);
    background-image: -ms-linear-gradient(#28A0E5, #015E94);
    background-image: linear-gradient(#28A0E5, #015E94);

    -webkit-font-smoothing: antialiased;
    border: 0;
    padding: 1px;
    height: 30px;
    text-decoration: none;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

    cursor: pointer;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .stripe-connect span {
    display: block;
    position: relative;
    padding: 0 12px 0 44px;
    height: 30px;

    background: #1275FF;
    background-image: -webkit-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
    background-image: -moz-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
    background-image: -ms-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
    background-image: linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);

    font-size: 14px;
    line-height: 30px;
    color: white;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);

    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }

  .stripe-connect span:before {
    content: '';
    display: block;
    position: absolute;
    left: 11px;
    top: 50%;
    width: 23px;
    height: 24px;
    margin-top: -12px;
    background-repeat: no-repeat;
    background-size: 23px 24px;
  }

  .stripe-connect:active {
    background: #005D93;
  }

  .stripe-connect:active span {
    color: #EEE;

    background: #008CDD;
    background-image: -webkit-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
    background-image: -moz-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
    background-image: -ms-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
    background-image: linear-gradient(#008CDD, #008CDD 85%, #239ADF);

    -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  }

  .stripe-connect:active span:before {

  }

  .stripe-connect.light-blue {
    background: #b5c3d8;
    background-image: -webkit-linear-gradient(#b5c3d8, #9cabc2);
    background-image: -moz-linear-gradient(#b5c3d8, #9cabc2);
    background-image: -ms-linear-gradient(#b5c3d8, #9cabc2);
    background-image: linear-gradient(#b5c3d8, #9cabc2);

    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }

  .stripe-connect.light-blue span {
    color: #556F88;
    text-shadow: 0 1px rgba(255, 255, 255, 0.8);

    background: #f0f5fa;
    background-image: -webkit-linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
    background-image: -moz-linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
    background-image: -ms-linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
    background-image: linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);

    -moz-box-shadow: inset 0 1px 0 #fff;
    -webkit-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;
  }

  .stripe-connect.light-blue:active {
      background: #9babc2;
  }

  .stripe-connect.light-blue:active span {
    color: #556F88;
    text-shadow: 0 1px rgba(255, 255, 255, 0.8);

    background: #d7dee8;
    background-image: -webkit-linear-gradient(#d7dee8, #e7eef6);
    background-image: -moz-linear-gradient(#d7dee8, #e7eef6);
    background-image: -ms-linear-gradient(#d7dee8, #e7eef6);
    background-image: linear-gradient(#d7dee8, #e7eef6);

    -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
  }

  .stripe-connect.dark {
    background: #252525;
    background: rgba(0,0,0,0.5) !important;
  }

  /* Images*/

  .stripe-connect span:before, .stripe-connect.blue span:before {
    background-image: url("data:image/png;base64,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");
  }

  .stripe-connect.light-blue span:before {
    background-image: url("data:image/png;base64,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");
  }

  /* Retina support */
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
         only screen and (min--moz-device-pixel-ratio: 1.5),
         only screen and (min-device-pixel-ratio: 1.5) {

    .stripe-connect span:before, .stripe-connect.blue span:before {
      background-image: url("data:image/png;base64,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");
    }

    .stripe-connect.light-blue span:before {
      background-image: url("data:image/png;base64,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");
    }
  }

  .shortcode-join {
    max-width: 710px;
    margin: 0 auto;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .shortcode-join {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.shortcode-join-button {
    display: block;
    text-decoration: none;
    text-align: center;
    outline: none;
    border: 2px solid var(--brand-color);
    border-radius: 4px;
    line-height: 1.5;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    width: 100%;
    color: var(--brand-color);
}

.shortcode-join-button:hover {
    background: var(--brand-color);
    color: #fff;
}

.shortcode-join-button:active {
    opacity: 0.5;
}

.shortcode-join-left {
    padding: 20px;
    flex: 1;
}

.shortcode-join-right {
    padding: 20px;
    background: #ddd;
    flex: 1;
}

.shortcode-join p {
    font-size: 15px;
}

.shortcode-join p:first-child {
    margin-top: 0;
}

.shortcode-join p:last-child {
    margin-bottom: 0;
}

.shortcode-join-title {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.6;
}

.shortcode-join-subtitle {
    font-size: 18px;
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.6;
}

.joinpage {
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px 0px; */
    /* position: fixed; */
    /* left: 0; */
    /* top: 0; */
    /* bottom: 0; */
    background: #fff;
    /* padding: 100px 10px 10px 10px; */
    /* overflow-y: auto; */
    width: 100%;
    /* -webkit-overflow-scrolling: touch; */
    margin: 60px auto;
    padding: 0 20px;
}

.joinpage p.joinpage-info {
    font-size: 14px;
    margin: 15px 0 0 0;
    color: #555;
    line-height: 1.5;
    text-align: center;
}

.joinpage p.joinpage-info a {
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid #e3e3e3;
}

.joinpage.joinpage--inline {
    padding: 30px 10px;
    border-radius: 0;
    position: relative;
    box-shadow: none;
    left: auto;
    max-width: 400px;
    margin: 0;
    display: flex;
    justify-content: center;
}

.joinpage .joinpage-left {
    margin-bottom: 30px;
}

.joinpage.joinpage--inline {
    padding: 30px 20px 20px 20px;
    border-radius: 4px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
    margin-top: 0;
    background: #f9f9f9;
}

@media (min-width: 1024px) {
    .joinpage {
        /* padding: 60px 0; */
        max-width: 900px;
        /* width: 470px; */
        /* width: 940px; */
        /* left: 50%; */
        /* margin-left: -235px; */
        /* margin-left: -470px; */
        display: flex;
        justify-content: space-between;
        /* padding: 100px 30px 30px 30px; */
    }

    /* .joinpage.joinpage--inline {
        padding: 30px 20px 20px 20px;
        border-radius: 4px;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
        margin-top: 0;
        background: #f9f9f9;
    } */

    .joinpage .joinpage-left {
        width: 55%;
    }

    .joinpage .joinpage-right {
        width: 40%;
    }
}

hr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.joinpage .joinpage-field {
    border: 1px solid #d5d5d5;
    width: 100%;
    border-radius: 4px;
    outline: none;
    padding: 19px 13px;
    font-weight: var(--font-weight-light);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
}

.joinpage-right {
    width: 100%;
}

.joinpage .joinpage-field.invalid {
    border-color: var(--red);
}

@media (min-width: 1024px) {
    .joinpage-sticky {
        position: sticky;
        top: 100px;
    }
}

.joinpage .joinpage-button {
    background-color: var(--brand-color);
    width: 100%;
    padding: 20px 10px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    border: 2px solid var(--brand-color);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
    font-size: 18px;
    line-height: 1.4;
}

.joinpage .joinpage-button span {
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.joinpage-subtitle {
    font-size: 20px;
    text-align: center;
    line-height: 1.4;
}

.joinpage .joinpage-button:hover {
    background-color: transparent;
    color: var(--brand-color);
}

.joinpage .joinpage-button:active {
    background-color: var(--brand-color);
    opacity: 0.5;
    color: #fff;
}

.joinpage .joinpage-twitter {
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 20px 10px;
    color: #00acee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    border: 2px solid #00acee;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1;
}

.joinpage .joinpage-twitter:hover {
    background-color: #00acee;
    color: #fff;
}

.joinpage .joinpage-twitter:active {
    background-color: #00acee;
    color: #fff;
    opacity: 0.5;
}

.joinpage-logos {
    display: flex;
    justify-content: center;
    padding-left: 10px;
    margin-bottom: 30px;
    margin-top: 30px;
}

@media (min-width: 1024px) {
    .joinpage-logos-left {
        justify-content: flex-start;
    }
}

.joinpage-logo {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -15px;
}

a.joinpage-logo:hover {
    margin-top: -2px;
}

a.joinpage-logo:active {
    margin-top: 0;
}

.joinpage-title {
    /* font-family: 'Raleway', sans-serif; */
    font-weight: bold;
    margin-bottom: 18px;
    text-align: center;
    line-height: 1.5;
    font-size: 20px;
    color: #1c1c1c;
}

.joinpage h2 {
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.joinpage p {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    text-align: center;
}

@media (min-width: 1024px) {
    .joinpage h2, .joinpage p {
        text-align: left;
    }
    .joinpage-title {
        font-size: 24px;
    }
}

.joinpage p:first-child {
    margin-top: 0;
}

.joinpage-joined {
    border-radius: 4px;
    border: 2px solid var(--brand-color);
    padding: 10px;
    margin-top: 15px;
    color: var(--brand-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.os-links {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    padding: 10px;
    border: var(--border);
    box-shadow: var(--shadow);
    overflow-y: auto;
    margin: 20px 20px 0 20px;
}

.os-links li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 5px;
    font-size: 14px;
}

.os-links li a:hover {
    text-decoration: underline;
}

@media (min-width: 1024px) {
    .os-links {
        position: fixed;
        width: 300px;
        top: 70px;
        left: 0;
        bottom: 0;
        margin: 0;
    }
}

.question {
    font-size: 14px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: #fff;
    padding: 24px;
    font-family: var(--font-family-body);
}

.question:not(:last-child) {
    margin-bottom: 20px;
}

.question h2 {
    font-size: 22px;
    color: #333;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.question h2 a {
    color: #333;
    line-height: 1.4;
}

.question p.more {
    text-align: right;
    margin: 20px 0 0 0;
    font-family: var(--font-family-body);
}

.question .more a {
    color: var(--link-color);
    font-size: 14px;
    text-decoration: none;
}

.question .answer {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.question .answer:last-child {
    margin-bottom: 0;
}

.question .answer p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 0 10px;
    font-family: var(--font-family-body);
}

.question .logo {
    width: 50px;
}

.question .avatar {
    width: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -14px;
}

.card {
    width: 100%;
    border: var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
}

.card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    font-family: var(--font-family-body);
}

.avatar {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    font-family: var(--font-family-body);
}

.avatar:hover {
    opacity: 0.8;
}

.avatar:active {
    opacity: 0.5;
}

.avatar img {
    width: 30px;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin-right: 5px;
}

.avatar img.rounded {
    border-radius: 3px;
}

.jobs-item {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #333;
    padding: 5px;
    font-size: 14px;
    font-weight: 500;
}

.jobs-item span {
    font-size: 12px;
    color: #aaa;
    padding-left: 5px;
}

.jobs-item:hover {
    background: #f4f4f4;
}

.jobs-item:active {
    opacity: 0.7;
}

.jobs .more {
    color: #333;
    padding: 10px;
    text-align: center;
    border: var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    width: 100%;
    margin-top: 10px;
    display: block;
    font-size: 14px;
    background: #fff;
}

.jobs .more:hover {
    background: #ebebeb;
}

.jobs .more:active {
    opacity: 0.7;
}

.jobs-item img {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.tip {
    box-shadow: var(--shadow);
    border: var(--border);
    padding: 20px;
    border-radius: var(--radius);
    max-width: 600px;
    margin: 0 auto 20px auto;
}

.tip img.tip-image {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.tip p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.breadcrumb {
    list-style: none;
    padding: 0;
    display: flex;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.breadcrumb .arrow {
    padding: 0 5px;
}

.breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
}

.update {
    border: var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
}

.update .update-status {
    display: flex;
}

.update .photo {
    width: 48px;
    height: 48px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-right: 12px;
}

.update .text {
    font-size: 18px;
    width: 100%;
    border: none;
    outline: none;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
    resize: none;
}

.invalid::-webkit-input-placeholder {
    color: var(--red);
}

.update .buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.update .buttons .button {
    display: block;
    text-decoration: none;
    background: #F5F6F7;
    font-size: 12px;
    padding: 5px 5px;
    border-radius: 3px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #F5F6F7;
}

.update .buttons .button:hover {
    background: #eee;
    border: 1px solid #eee;
}

.update .buttons .button.active {
    background: #eee;
    border: 1px solid var(--brand-color);
}

.update .update-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.update .update-footer .update-footer-button {
    background: #F5F6F7;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 25px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #F5F6F7;
}

.update .update-footer .update-footer-button:hover {
    background: #eee;
    border: 1px solid #eee;
}

.update .update-footer .update-footer-button.update-footer-button-post {
    background: var(--brand-color);
    border: 1px solid var(--brand-color);
    color: #fff;
}

.update .update-footer .update-footer-button:hover {
    opacity: 0.9;
}

.update .update-footer .update-footer-button:active {
    opacity: 0.8;
}

.update .update-image-upload {
    width: 100%;
    height: 300px;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
}

.update .update-image-upload-plus {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.update .update-image-upload:hover {
    opacity: 0.8;
}

.update-city {
    display: flex;
    align-items: center;
}

.update-city .update-city-photo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background-image: url(https://remotehunt.com/storage/cities/screens/miami-united-states.jpg);
    background-size: cover;
    background-position: center;
    margin-right: 5px;
}

a.status {
    text-decoration: none;
}

a.status:hover {
    opacity: 0.8;
}

a.status:active {
    opacity: 0.5;
}

.status {
    color: #333;
    display: flex;
    border: var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.status .photo {
    width: 48px;
    height: 48px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-right: 12px;
    flex: none;
}

.status .contents {
    flex: 1;
}

.status .contents .status-user {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

.status .contents .status-user-info {
    color: #777;
    font-weight: normal;
}

.status .contents .text {
    font-size: 1rem; /* 16px minimum */
    line-height: 1.5;
    font-family: var(--font-family-body);
}

.status .contents img.image {
    width: 100%;
    display: block;
    margin-top: 10px;
}

.status .status-photos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
    margin-top: 10px;
}

.status .status-photos img {
    display: block;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -10px;
}

.status .status-photos-people {
    font-size: 14px;
    color: #777;
    margin-left: 5px;
}

.status .status-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.status .status-buttons .status-buttons-button {
    background: #F5F6F7;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: #333;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #F5F6F7;
}

.status .status-buttons .status-buttons-button.status-buttons-button-like {
    width: 80px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.status .status-buttons .status-buttons-button.status-buttons-button-liked {
    color: var(--brand-color);
}

.status .status-buttons .status-buttons-button svg {
    width: 20px;
    margin-right: 3px;
}

.status .status-buttons .status-buttons-button:hover {
    background: #eee;
    border: 1px solid #eee;
}

.status .status-buttons .status-buttons-button.active {
    background: #eee;
    border: 1px solid var(--brand-color);
}

.status .status-buttons .status-buttons-photos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
}

.status .status-buttons .status-buttons-photos img {
    display: block;
    width: 34px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -10px;
}

.status .status-buttons .status-buttons-photos .status-buttons-photo {
    width: 34px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -10px;
    background-size: cover;
    background-position: center;
}

.status .status-buttons .status-buttons-photos-text {
    font-size: 14px;
    color: #777;
    margin-left: 5px;
}

.status-workplace {
    display: flex;
    align-items: center;
}

.status-workplace b {
    margin-left: 5px;
    margin-right: 5px;
}

.status-text-photos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 15px;
}

.status-text-photos img {
    display: block;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-left: -10px;
}

.status-text-photos-text {
    font-size: 14px;
    color: #777;
    margin-left: 5px;
}

.vermenu {
    border-radius: var(--radius);
    background: #fff;
    margin-bottom: 20px;
    border: var(--border);
}

.letter .block {
    background: #f5f5f5;
    border-radius: var(--radius);
}

.vermenu.transparent {
    background: transparent;
    box-shadow: none;
}

.vermenu a:not(:last-child) {
    border-bottom: var(--border);
}

.vermenu.transparent a:first-child {
    /* border-top: 1px solid #e3e3e3; */
}

.vermenu.transparent a:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.vermenu.transparent a:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.vermenu a:hover {
    background-color: #f9f9f9;
}

.vermenu a:active,
.vermenu a.active {
    background-color: #f0f9fd;
}

.vermenu .user {
    display: block;
    padding: 15px;
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
}

.vermenu .user .photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}

.vermenu .user.small .photo {
    width: 24px;
    height: 24px;
    border-radius: var(--radius);
}

.vermenu .user.small .name {
    font-size: 14px;
    margin-bottom: 0;
}

.vermenu .user .photo.placeholder {
    border: 1px solid #ddd;
}

.vermenu .user .name {
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    margin-bottom: 3px;
}

.vermenu .user .view {
    font-size: 14px;
    text-decoration: none;
    color: var(--brand-color);
}

.vermenu .link {
    text-decoration: none;
    color: #1c1c1c;
    display: block;
    font-size: 14px;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.vermenu .link .logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 7px;
}

.vermenu-user {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.vermenu a.link:first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.vermenu a.link:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.page .page-block {
    max-width: 720px;
    margin: 60px auto;
}

@media (min-width: 1024px) {
    .page .page-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.page .page-block .page-block-text {
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 1024px) {
    .page .page-block .page-block-text {
        padding-right: 60px;
        text-align: left;
        margin-bottom: 0;
    }
}

.page .page-block .page-block-text h1 {
    font-size: 30px;
    line-height: 1.3;
    margin: 0;
}

.page .page-block .page-block-text h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 0;
}

.page .page-block .page-block-text p {
    font-size: 16px;
    line-height: 1.5;
}

.announcement {
    background: #fff;
    color: #333;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
    border-bottom: var(--border);
    line-height: 1.4;
}

.announcement a {
    color: var(--brand-color);
}

/* Article - https://bitsofco.de/github-contribution-graph-css-grid/ */

/* Grid-related CSS */

:root {
  --square-size: 16px;
  --square-gap: 5px;
  --week-width: calc(var(--square-size) + var(--square-gap));
}

.months { grid-area: months; }
.days { grid-area: days; }
.squares { grid-area: squares; }

.graph-container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.graph {
  display: inline-grid;
  grid-template-areas: "empty months"
                       "days squares";
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
}

.months {
  display: grid;
  grid-template-columns: calc(var(--week-width) * 4) /* Jan */
                         calc(var(--week-width) * 4) /* Feb */
                         calc(var(--week-width) * 4) /* Mar */
                         calc(var(--week-width) * 5) /* Apr */
                         calc(var(--week-width) * 4) /* May */
                         calc(var(--week-width) * 4) /* Jun */
                         calc(var(--week-width) * 5) /* Jul */
                         calc(var(--week-width) * 4) /* Aug */
                         calc(var(--week-width) * 4) /* Sep */
                         calc(var(--week-width) * 5) /* Oct */
                         calc(var(--week-width) * 4) /* Nov */
                         calc(var(--week-width) * 5) /* Dec */;
}

.days,
.squares {
  display: grid;
  grid-gap: var(--square-gap);
  grid-template-rows: repeat(7, var(--square-size));
}

.squares {
  grid-auto-flow: column;
  grid-auto-columns: var(--square-size);
}


/* Other styling */

.graph {
    margin-bottom: 20px;
}

.graph ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.graph ul li {
    line-height: 1;
}

.days li:nth-child(odd) {
  visibility: hidden;
}

.squares li {
  background-color: #ebedf0;
  position: relative;
}

.squares li[data-level="1"] {
  background-color: rgba(64, 57, 168, 0.3);
}

.squares li[data-level="2"] {
    background-color: rgba(64, 57, 168, 0.6);
}

.squares li[data-level="3"] {
    background-color: rgba(64, 57, 168, 1);
}

.has-tooltip {
    /* display: inline; */
}

.tooltip {
    background: #fff;
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 12px;
    position: absolute;
    top: 20px;
    left: 0;
    display: none;
    z-index: 99999;
    white-space: nowrap;
}

.has-tooltip:hover {
    cursor: pointer;
}

.tooltip:after {
    left: 50%;
    transform: translateX(-50%);
}

.tooltip:before {
    left: 50%;
    transform: translateX(-50%);
}

.has-tooltip:hover .tooltip {
    display: block;
}

/* Dark tooltip variant that floats above */
.has-tooltip-dark {
    position: relative;
}

.tooltip-dark {
    background: #333;
    color: #fff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 999999;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    margin-bottom: 0;
}

.tooltip-dark:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.has-tooltip-dark:hover .tooltip-dark {
    display: block;
}

.has-tooltip-dark:hover {
    cursor: not-allowed;
}

.news {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-left: -10px;
    margin-right: -10px;
    background: #fff;
    border-bottom: var(--border);
    color: #333;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .news {
        border: var(--border);
        border-radius: var(--radius);        
        margin-bottom: 10px;
        margin-left: 0;
        margin-right: 0;
    }
}

.news .text {
    flex: 1;
}

.news h1 {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.news .title {
    text-decoration: none;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .news .title {
        margin-bottom: 0;
    }
}

.news .buttons {
    margin-top: 5px;
    display: flex;
    flex: 1;
    align-items: center;
}

.news .buttons .button {
    color: #777;
    text-decoration: none;
    font-size: 14px;
    margin-right: 8px;
}

.news .buttons .button:hover {
    text-decoration: underline;
}

.h1 {
    font-size: 2.5rem; /* 40px */
    margin: 0 0 10px 0;
}

h1.h1 {
    font-size: 2.5rem; /* 40px */
}

.container .h1,
.container h1.h1,
.container.cols .h1,
.container.cols h1.h1 {
    font-size: 2.5rem; /* 40px */
}

.p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
}

p.p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
}

.container .p,
.container p.p,
.container.cols .p,
.container.cols p.p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
}

.p a {
    color: var(--link-color);
}

.chart-container {
    width: 100%;
    overflow: auto;
}

@media (min-width: 1024px) {
    .chart-container {
        overflow: visible;
    }
}

.chart {
    font-size: 14px;
    position: relative;
    min-width: 100%;
}

.chart .months {
    position: relative;
    height: 20px;
    border-top: 3px solid;
    margin-top: 10px;
    padding-top: 10px;
}

.chart .months .month {
    position: absolute;
}

.chart .startups .startup-row {
    position: relative;
    height: 30px;
}

.chart .startups .startup {
    display: flex;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    position: absolute;
    top: 5px;
    align-items: center;
}

.chart .startups .startup:hover {
    opacity: 0.8;
}

.chart .startups .startup:active {
    opacity: 0.5;
}

.chart .startups .startup .mrr {
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    font-size: 11px;
    padding: 2px 3px;
    margin-left: 3px;
}

.chart .startups .startup .logo {
    display: block;
    width: 20px;
    margin-right: 5px;
}

.chart .year {
    position: absolute;
    width: 3px;
    top: 0;
    bottom: 0;
    background: #000;
}

.big-progress {
    background: #f5f5f5;
    border-radius: var(--radius);
    /* box-shadow: var(--shadow); */
    /* border: var(--border); */
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
}

a.big-progress:hover {
    opacity: 0.8;
}

a.big-progress:active {
    opacity: 0.5;
}

.big-progress .filling {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    /* background-color: #2bde73; */
    background-color: #ffc924;
    color: #fff;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.25),-1px 0 0 rgba(0,0,0,.1);
    margin-right: 20px;
}

.small-progress {
    background: #f5f5f5;
    border-radius: 6px;
    /* box-shadow: var(--shadow); */
    /* border: var(--border); */
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
}

a.small-progress:hover {
    opacity: 0.8;
}

a.small-progress:active {
    opacity: 0.5;
}

.small-progress .filling {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #2bde73;
    /* background-color: #ffc924; */
    color: #fff;
    padding: 10px 10px 10px 0;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    text-shadow: 1px 1px 0 rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.25),-1px 0 0 rgba(0,0,0,.1);
    /* margin-right: 20px; */
}

.tool {
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    background: #fff;
}

.tool {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 20px;
}

.tool .tool-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.tool .tool-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -10px;
    right: -10px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.2);
}

.tool .tool-title {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.tool .tool-tagline {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #777;
}

.tool .tool-screen {
    width: 140px;
    height: 140px;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    position: relative;
}

.tool .tags {
    margin-top: 50px;
}

.tool .tag {
    /* border: 2px solid #162040; */
    color: #162040;
    /* border-radius: 4px; */
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    /* padding: 4px 6px; */
    padding: 6px 6px;
    margin-right: 5px;
    /* background-color: #fff; */
    float: left;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    /* background: #e8e8e8; */
    background: #f1f1f1;
    border-radius: var(--radius);
    /* border: 1px solid #d9e1ec; */
}

.hormenu {
    box-shadow: var(--shadow);
    border: var(--border);
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    overflow-x: auto;
    margin-bottom: 20px;
}

.hormenu-container {
    margin-top: 20px;
    position: relative;
    z-index: 9;
}

.hormenu.transparent {
    box-shadow: none;
    background: none;
    padding: 0;
}

.hormenu a {
    text-align: center;
    text-decoration: none;
    color: #1c1c1c;
    font-size: 14px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 30%;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .hormenu a {
        width: auto;
    }
}

.hormenu a:hover {
    background-color: #f9f9f9;
}

.hormenu a:active {
    opacity: 0.5;
}

.hormenu .hormenu-icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin-bottom: 5px;
    font-size: 20px;
}

.hormenu .hormenu-logo {
    width: 20px;
    display: block;
    margin: 0 auto;
}

/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  margin-right: 5px;
}

.switch__container {
  font-size: 13px;
}

/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

.lds-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  z-index: 999999999;
  display: none;
}
.lds-ring-loading {
    display: inline-block;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 4px;
  border: 4px solid var(--brand-color);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--brand-color) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.updates {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}

.updates li {
    margin-bottom: 10px;
}

.updates li a {
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: #333;
}

.updates li a:hover {
    color: var(--link-color);
}